@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		#wrap {position:relative;height:100%;width:100%;margin:0;padding:0; overflow:hidden;} 
			/* #container 안의 레이아웃 */
			#container{position: relative;z-index:3;}
		#contents_wrap {position:relative; width:calc(100% - 60px); max-width:1300px; margin:0 auto; box-sizing:border-box;} /* #container 안의 컨텐츠 감싸는 영역 */
		.main_index #contents_wrap{max-width:100%;}
		#contents_wrap #side_box {width:100%;padding:110px 0 0 0;box-sizing:border-box;} /* lnb 감싸는 영역 */
		#contents_wrap #contents_box {width:100%;padding:140px 0 180px;box-sizing:border-box;} /* 컨텐츠를 감싸는 영역 */
		#contents_wrap #side_box + #contents_box {padding-top:0;} /* lnb와 컨텐츠가 float 일때 사이즈 재설정 */
			/* navigation layout */
		#contents_wrap .nav_wrap {box-sizing:border-box;}
			/* #content */
		#content {width:100%;margin:0;padding:0;text-align:left;box-sizing:border-box;} /* navigation 을 제외한 컨텐츠 */
		#content .sub_content{width:100%;margin:0 auto;background:#fff;box-sizing:border-box;}
		#content .sub_content:after {clear:both;content:"";display:block;}
			/* 컨텐츠 전체 가로 사이즈 */
		.w_custom {position:relative;width:calc(100% - 60px);max-width: 1280px;margin:0 auto;box-sizing:border-box;}

	@media only screen and (max-width:1217px) {
	}
	@media only screen and (max-width:1200px) {
		
	}
	@media only screen and (max-width:1023px) {
		#contents_wrap #side_box {padding: 85px 0 0 0;}
		#contents_wrap #contents_box {padding: 120px 0 160px;}
		#contents_wrap, .w_custom{width:calc(100% - 30px);}
	}
	@media only screen and (max-width:860px) {
		#contents_wrap #side_box {padding: 85px 0 0 0;}
		#contents_wrap #contents_box {padding: 110px 0 150px;}
	}
	@media only screen and (max-width:767px) {
		#contents_wrap #side_box {display:none;}
		.sub_goods #contents_wrap #side_box {display:block;padding:0;}
	}
	@media only screen and (max-width:640px) {
		#contents_wrap #contents_box {padding: 90px 0 130px;}
	}
	@media only screen and (max-width:479px) {
		#contents_wrap #contents_box {padding: 70px 0 110px;}
	}
	@media only screen and (max-width:320px) {
		#contents_wrap, .w_custom{width:calc(100% - 20px);}
	}

/*───────────────────────────────────────────────────────────

	 HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
		#header{position:absolute; top:0; left:0; width:100%; z-index:9;transition:all 0.4s;}
		#header .cont{position:relative; display:flex; align-items:center; width:calc(100% - 60px); height:130px; max-width:1720px; margin:0 auto; box-sizing:border-box; transition:all 0.4s;}
		#header .logo{font-size:0;}
		#header .logo a{display:inline-block; width:45px; height:50px; background:url('/data/skin/respon_default/images/skin/hd_logo_wh.svg') no-repeat left center; background-size:auto 100%; transition:all 0.4s;}
		#header .gnb{position:absolute; top:0; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; justify-content:center; width:calc(100% - 300px); height:100%;}
		#header .gnb > li{position:relative; height:100%; text-align:center;}
		#header .gnb > li > a{position: relative; display:inline-flex; align-items:center; height:100%; font-size:20px; font-weight:500; color:rgba(255,255,255,0.6); padding:0 2.1vw; transition: all 0.4s;}
        #header .gnb > li > a span{position: relative;}
		#header .gnb .dep2{display: none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;min-width:120px;background:var(--point-dark);padding: 15px 0; border-radius:20px;}
		#header .gnb .dep2 > li{ padding:0 45px}
		#header .gnb .dep2 > li + li{margin-top:15px;}
		#header .gnb .dep2 > li > a{display:inline-block;font-size: 16px;font-weight:400;color:rgba(255,255,255,0.4); padding: 10px 0 3px;font-family: 'Noto Sans KR', sans-serif; transition: all 0.4s;}
		#header .menu-trigger{position:absolute;top:50%;right: 30px;transform:translateY(-50%);width: 45px;height:100%;font-size:0;}
			#header .menu-trigger:before{position:absolute; content:''; width:100px; height:100px; top:45%; left:50%; transform:translate(-50%, -50%); background:var(--point-mint); border-radius:100%; opacity:0; transition:all 0.6s;}
		#header .menu-trigger span{position:absolute;top: 45%;left: 0;width: 7px;height: 7px;border-radius:100%;background:#fff;transform:translateY(-50%);}
			#header .menu-trigger span:nth-child(2){margin-left: -3.5px;left: 50%;}
			#header .menu-trigger span:nth-child(3){left: auto;right: 0;}

		#header .quick_list{position:fixed; right:30px; bottom:30px; z-index:8; opacity:0; pointer-events:none; transition:all 0.4s;}
		#header .quick_list li{position:relative;text-align:right;border-radius:10px;transition:all 0.4s;width:54px; margin-left:auto; overflow:hidden; box-shadow:0 0 20px rgba(0,0,0,0.25); font-size:0;}
			#header .quick_list li:not(:first-child){margin-top:10px;}
		#header .quick_list li dl{position:relative;display: inline-flex;}
		#header .quick_list li dl dt{width:54px;height:54px;border-radius:10px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:0;box-sizing:border-box;}
		#header .quick_list li.store{background:var(--point-yellow);}
		#header .quick_list li.store dl dt{}
		#header .quick_list li.store dl dt img{width:27px;}
		#header .quick_list li.store dl dt + dd{position:absolute;top:50%;right:calc(100% - 4px);width: max-content;transform: translateY(calc(-50% - 0.5px));z-index: 3; opacity:0; transition:all 0.4s;}
		#header .quick_list li.top dl dt{background:var(--black-color02);}
		#header .quick_list li .link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
	
			/* on */
				#header.on .quick_list{opacity:1; pointer-events:inherit;}

			/* over */
				@media screen and (min-width:1024px) { 
					#header .menu-trigger:hover:before{width:200px; height:200px; opacity:1;}
					#header .menu-trigger:hover span{animation-name: menu-trigger01; animation-duration:1s; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
						#header .menu-trigger:hover span:nth-child(2){animation-name: menu-trigger02;}
						#header .menu-trigger:hover span:nth-child(3){animation-name: menu-trigger03;}
					@keyframes menu-trigger01 {0% {top: 20%; opacity:0; }20% {top: 20%; opacity:0; }100% {top: 45%; opacity:1; }}
					@keyframes menu-trigger02 {0% {top: 20%; opacity:0; }40% {top: 20%; opacity:0; } 100% {top: 45%; opacity:1; }}
					@keyframes menu-trigger03 {0% {top: 20%; opacity:0; }60% {top: 20%; opacity:0; }100% {top: 45%; opacity:1; }}
					#header .quick_list li.store:hover{width:170px;}
					#header .quick_list li.store:hover dl dt + dd{opacity:1;}
                    #header .gnb > li > a:hover{color: rgba(255,255,255,1);}
                    #header .gnb > li > a span:before{position: absolute; content:''; width:0; height:2px; <!--background: var(--point-white);--> left:0; top:100%; transition: all 0.4s;}
                    #header .gnb > li:hover > a span:before{width: 100%;}
                    #header .gnb .dep2 > li > a:hover{color: rgba(255,255,255,1); /* background: var(--black-color03); */border-bottom:1px solid #fff;;}
				}

		@media screen and (max-width:1023px) { 
			#header .cont{width:calc(100% - 30px); height:110px;}
				#header.on .cont{height:90px;}
			#header .logo a{height:45px;}
			#header .gnb{display:none;}
			#header .menu-trigger{right:15px;}

			#header .quick_list{right:15px;}
			#header .quick_list li{width:auto;}
			#header .quick_list li dl dt{width:50px; height:50px;}
		}
		@media screen and (max-width:860px) { 
			#header .cont{height:100px;}	
				#header.on .cont{height:80px;}
			#header .logo a{height:42px;}

		}
		@media screen and (max-width:640px) { 
			#header .cont{height:90px;}
				#header.on .cont{height:70px;}
			#header .logo a{height:40px;}
			#header .menu-trigger{width:40px;}
			#header .menu-trigger span{width:6px; height:6px;}
				#header .menu-trigger span:nth-child(2){margin-left:-3px;}

			#header .quick_list li dl dt{width:45px; height:45px; }
		}
		@media screen and (max-width:479px) { 
			#header .cont{height:80px;}
				#header.on .cont{height:65px;}
			#header .logo a{height:38px;}
			#header .menu-trigger{width:35px;}
		}


/*───────────────────────────────────────────────────────────

	 ASIDE | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
		#header.trigger{background:#fff0; pointer-events:none;}
		#header.trigger .cont{opacity:0; }
		#header.trigger .quick_list{opacity:0; pointer-events:none;}
		#header.trigger .menu-trigger{pointer-events:auto;}
		#header.trigger .menu-trigger span{background:var(--point-yellow);}
		#aside{position:fixed;top:-100%;right:0;;width: 1920px;height:100vh;transition:all 0.8s;opacity:0;z-index:5}
			#aside.on{top:0;opacity:1;}
			.aside_bg{width: 1920px;height:100vh;position: fixed;top:0;left: 50%;transform: translateX(-50%);background:var(--point-mint);clip-path: circle(0% at 100% 0%);z-index:4;transition:all 0.8s;}
			.aside_bg.on{clip-path: circle(145vmax at 100% 0); transition:all 0.8s;}

		#aside .aside_box{height:100%;padding:100px 0;box-sizing:border-box;overflow-y:auto;display: flex;align-items: center;}
		#aside .aside_box{-ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */}
		#aside .aside_box::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera */}
		#aside .slidemenu{width: 100%;}
		#aside .slidemenu > li{display:flex;align-items: center;}
			#aside .slidemenu > li + li{border-top:1px dashed rgba(255,255,255,0.3);}
		#aside .slidemenu > li > a{font-size: 4vh;font-weight:bold;color:#fff;width: 30%;padding: 5vh 0;transition:all 0.4s;}
		#aside .slidemenu .depth{width: 70%;display:inline-flex;justify-content: flex-end;flex-wrap: wrap;}
		#aside .slidemenu .depth > li{}
			#aside .slidemenu .depth > li + li:before{display:inline-flex; content:'/'; margin:0 15px; font-size:18px;font-weight:400;color:#fff;}
		#aside .slidemenu .depth > li > a{position:relative; font-size:18px;font-weight:400;color:#fff;padding: 5px 0;display: inline-block; transition:all 0.4s;}
			#aside .slidemenu .depth > li > a:after{position:absolute; content:''; width:0; height:2px; background:#fff; left:50%; bottom:0; transform:translateX(-50%); opacity:0; transition:all 0.4s;}

		@media only screen and (min-width:1024px) {
			#aside .slidemenu > li:hover > a{color:var(--point-yellow);}
			#aside .slidemenu > li:hover .depth > li + li:before, #aside .slidemenu > li:hover .depth > li > a{color:rgba(255,255,255,0.4);}
			#aside .slidemenu > li:hover .depth > li > a:hover{color:#fff;}
			#aside .slidemenu .depth > li > a:hover:after{width:100%; opacity:1;}
		}
	@media only screen and (max-width:1620px) {
		#aside{width:calc(100% + 1px);}
		.aside_bg{width:calc(100% + 1px);}
	}
	@media only screen and (max-width:1230px) {
		#aside .slidemenu .depth > li + li:before, #aside .slidemenu .depth > li > a{font-size:17px;}
	}
	@media only screen and (max-width:1023px) {
		#aside .slidemenu .depth > li + li:before, #aside .slidemenu .depth > li > a{font-size:16px;}
	}
	@media only screen and (max-width:860px) {
		#aside .aside_box{display:block;}
		#aside .slidemenu > li{display:block; padding:20px 0;}
		#aside .slidemenu > li > a{font-size:27px; width:100%; padding:0;}
		#aside .slidemenu .depth{width:100%; justify-content:flex-start; margin-top:15px;}
		#aside .slidemenu .depth > li + li:before, #aside .slidemenu .depth > li > a{font-size:15px;}
	}
	@media only screen and (max-width:640px) {
		#aside .aside_box{padding:80px 0;}
		#aside .slidemenu > li > a{font-size:25px;}
		#aside .slidemenu .depth{}
		#aside .slidemenu .depth > li > a{font-size:14px;}
	}
	@media only screen and (max-width:479px) {
		#aside .aside_box{padding:60px 0;}
		#aside .slidemenu .depth{margin-top:10px;}
		#aside .slidemenu .depth > li + li:before{margin:0 12px;}
	}


/*───────────────────────────────────────────────────────────

	 FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
		#footer{background:var(--point-dark); padding:80px 0 90px;}
		#footer .ftr_top{position:relative;}
		#footer .logo{position:relative; padding-right:100px; box-sizing:border-box;}
			#footer .logo:after{position:absolute; content:''; width:100%; height:1px; background:rgba(217, 217, 217, 0.5); top:50%; left:0; margin-top:-0.5px;}
		#footer .logo dl{position:relative; display:inline-flex; align-items:center; background:var(--point-dark); z-index:2; padding-right:30px;}
		#footer .logo dl dt{font-size:0;width:60px;}
			#footer .logo dl dt + dd{padding-left:17px;}
		#footer .logo dl dd{font-size:var(--title-20); font-weight:600; color:#fff; line-height:1;}
		#footer .sns_list{position:absolute; top:50%; right:0; transform:translateY(calc(-50% - 0.5px)); font-size:0; padding-left:30px; background:var(--point-dark); display:inline-flex; align-items:center; z-index:3;}
		#footer .sns_list li{}
			#footer .sns_list li:not(:last-child){margin-right:20px;}
		#footer .sns_list li a{display:inline-block;}

		#footer .ftr_btm{display:flex;justify-content:space-between;margin-top:40px;align-items: flex-end;}
		#footer .info{width:calc(100% - 400px); box-sizing:border-box;}
		#footer .info dl{display:flex;}
			#footer .info dl:not(:first-child){margin-top:4px;}
		#footer .info dl :where(dt, dd){font-size:var(--title-14); color:#fff; letter-spacing:-0.03em; line-height:1.5;}
		#footer .info dl dt{width:120px; font-weight: 300;opacity: 0.8;}
		#footer .info dl dd{width:calc(100% - 120px);font-weight: 200;opacity: 0.6;}
		#footer .info dl dd a{font-size:inherit; font-weight:inherit; color:inherit;}
		#footer .exp{width:500px; text-align:right; box-sizing:border-box;}
		#footer .exp .link_list{display:flex; align-items:center; justify-content:flex-end;}
		#footer .exp .link_list li{}
			#footer .exp .link_list li:not(:last-child) a:after{display:inline-flex;content:'·';margin: 0 8px;}
		#footer .exp .link_list li a{font-size:var(--title-15); font-weight:100; color:#fff; font-family: 'pretendard', sans-serif;}
		#footer .exp .link_list li a strong{font-size:inherit; font-weight:400; color:inherit;}
		#footer .exp .copy{display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top: 31px;}
		#footer .exp .copy :where(dt, dd){font-size: var(--title-14);font-weight: 200;color:#fff;opacity:0.4;line-height:1.6;letter-spacing: 0.01em;}
		#footer .exp .copy dt{margin-right:24px;}
		#footer .exp .copy a{font-size:inherit; font-weight:inherit; color:inherit;}


		
	@media screen and (max-width:900px) {
		#footer .ftr_btm{display:block;}
		#footer .info{width:100%;}
		#footer .exp{width:100%; margin-top:30px;}
		#footer .exp .link_list{justify-content:flex-start;}
		#footer .exp .copy{justify-content:flex-start;}
	}
	@media screen and (max-width:860px) {
		#footer{padding:70px 0 80px;}
		#footer .logo dl{padding-right:25px;}
		#footer .sns_list{padding-left:25px;}
		#footer .ftr_btm{margin-top:30px;}
		#footer .exp .copy{margin-top:20px;}
	}
	@media screen and (max-width:640px) {
		#footer .logo dl{padding-right:20px;}
		#footer .logo dl dt{width:55px;}
			#footer .logo dl dt + dd{padding-left:15px;}
		#footer .sns_list{padding-left:20px;}
		#footer .sns_list li:not(:last-child){margin-right:15px;}
		#footer .info dl dt{width:110px;}
		#footer .info dl dd{width:calc(100% - 110px);}
	}
	@media screen and (max-width:479px) {
		#footer{padding:50px 0 70px;}
		#footer .logo dl{padding-right:10px;}
		#footer .logo dl dt{width:50px;}
		#footer .sns_list{padding-left:10px;}
		#footer .info dl dt{width:100px;}
		#footer .info dl dd{width:calc(100% - 100px);}
		#footer .ftr_btm{margin-top:25px;}
		#footer .exp .copy{margin-top:15px;}
	}


/*───────────────────────────────────────────────────────────

	 SIDE_BOX | outline/left_bbs.html｜outline/left_goods.html｜outline/left_member.html｜outline/left_service.html

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
		#side_box {padding-bottom:1.8%;}
		#side_box .sub_menu {width:100%;padding:0;margin:0;z-index:2;text-align:center;vertical-align:top;}
		#side_box .sub_menu dl {position:relative;display:inline-block;margin:0 auto;z-index:3;font-size:0;text-align:center;vertical-align:top;padding:0;}
		#side_box .sub_menu dt,
		#side_box .sub_menu dd {display:inline-block;margin:0;padding:0;}
		#side_box .sub_menu dt {display:none;}
		#side_box .sub_menu dd {line-height:31px;height:32px;padding:0 12px;border-bottom:1px #ccc solid;position:relative;z-index:1;box-sizing:border-box;vertical-align:top;}
		#side_box .sub_menu dd + dd {}
		#side_box .sub_menu dd a,
		#side_box .sub_menu dd strong {height:31px;line-height:31px;font-size:15px;font-weight:600;padding:0 2px;color:#888;display:inline-block;box-sizing:border-box;vertical-align:top;}
		#side_box .sub_menu dd:hover a,
		#side_box .sub_menu dd.on a,
		#side_box .sub_menu dd strong {border-color:#333;color:#333;position:relative;}
		#side_box .sub_menu dd:hover a:before,
		#side_box .sub_menu dd.on a:before, 
		#side_box .sub_menu dd strong:before {bottom:-1px;width:100%;height:2px;background:#333;left:50%;transform:translateX(-50%);position:absolute;content:"";display:block;}

	@media only screen and (max-width:1200px) {
	}
	@media only screen and (max-width:1024px) {
	}
	@media only screen and (max-width:860px) {
		#side_box .sub_menu dd {line-height:29px;height:30px;padding:0 8px;}
		#side_box .sub_menu dd a,
		#side_box .sub_menu dd strong {height:29px;line-height:29px;font-size:14px;padding:0 2px;}
	}
	@media only screen and (max-width:767px) {
	}
	@media only screen and (max-width:640px) {
		#side_box .sub_menu dd {line-height:27px;height:28px;padding:0 8px;}
		#side_box .sub_menu dd a,
		#side_box .sub_menu dd strong {height:27px;line-height:27px;font-size:14px;padding:0 2px;}
	}
	@media only screen and (max-width:479px) {
		#side_box {display:none;}
	}


/*───────────────────────────────────────────────────────────

	 MAIN | index.html

───────────────────────────────────────────────────────────*/
	/* 비주얼 */
		.main_visual{position: relative;height: 1000px;background:var(--point-dark);display: flex;align-items: center;justify-content: center;overflow:hidden;}
		.main_visual .video{position: relative;width:1280px;height: 720px;opacity:0.5;border-radius:20px;overflow:hidden;display: inline-block;font-size: 0; transition:all 3s; transition-delay:1s;}
			.main_visual .video:before{position:absolute; content:''; width:100%; height:100%; top:0; left:0; background:url('../images/skin/main_video_bg.png') no-repeat left ; background-size:cover; transition:all 0.6s; transition-delay:4s; z-index:3;}
		.main_visual .video iframe{position: absolute;width: 1920px;height: 150%;top: 50%;left: 50%;transform: translate(-50%, -50%);pointer-events:none;transition:all 3s;transition-delay:1s;}
		.main_visual .txt_wrap{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:5; text-align:center; opacity:0; transition:all 3s;transition-delay:1s;}
		.main_visual .txt_wrap h3{font-size:var(--title-64); font-weight:700; color:#fff; line-height:1.4;}
			.main_visual .txt_wrap h3 + .main_more{margin-top: 58px;}
		.main_visual .txt_wrap h5{font-size:var(--title-30); font-weight:500; color:#fff;}
			.main_visual .txt_wrap h5 + h3{margin-top: 35px;}
		.main_visual .scr_down{position:absolute; bottom:0; left:50%; transform:translateX(calc(-50% - 0.5px)); font-size:var(--title-14); font-weight:200; color:#fff; line-height:1;}
		.main_visual .scr_down span{position:relative; display:block; width:1px; height:80px; margin:11px auto 0; background:rgba(255,255,255,0.3);}
			.main_visual .scr_down span:before{position:absolute; content:''; width:5px; height:5px; background:var(--point-mint); border-radius:100%; top:0; left:50%; margin-left:-2.5px;}
			.main_visual .scr_down span:before{animation-name: ScrollDown; animation-duration:1.5s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
			@keyframes ScrollDown {0% {top:0;}100% {top:calc(100% - 5px);}}

			/* on */
				.main_visual.on .video{width:100%; height:100%; border-radius:0;}
				.main_visual.on .video:before{opacity:0;}
				.main_visual.on .txt_wrap{opacity:1;}

		@media screen and (max-width:1280px) {
			.main_visual{height:78vw; min-height:450px;}
			.main_visual .video{width:calc(100% - 120px); height:52vw;}
			.main_visual .video iframe{width:145%; min-width:800px;}
			.main_visual .txt_wrap h3 + .main_more{margin-top:4.1vw;}
			.main_visual .txt_wrap h5 + h3{margin-top:2.5vw;}
		} 
		@media screen and (max-width:1023px) {
			.main_visual .txt_wrap h3 + .main_more{margin-top:41px;}
			.main_visual .txt_wrap h5 + h3{margin-top:25px;}
			.main_visual .scr_down span{height:60px;}
		} 
		@media screen and (max-width:860px) {
			.main_visual .txt_wrap h3 + .main_more{margin-top:35px;}
			.main_visual .txt_wrap h5 + h3{margin-top:15px;}
		} 
		@media screen and (max-width:640px) {
			.main_visual .video{border-radius:10px;}
			.main_visual .txt_wrap h3 + .main_more{margin-top:30px;}
			.main_visual .txt_wrap h5 + h3{margin-top:10px;}
			.main_visual .scr_down span{height:50px;}
		} 
		@media screen and (max-width:479px) {
			.main_visual .txt_wrap h3 + .main_more{margin-top:25px;}
			.main_visual .txt_wrap h5 + h3{margin-top:7px;}
			.main_visual .scr_down span{height:40px;}
		} 

	/* 공통 */
		

		.main_more{display:inline-block;}
		.main_more span{display:inline-flex;align-items:center;justify-content:center;padding: 2px 20px 0;height: 50px;border: 2px solid #fff;border-radius:30px;font-size:var(--title-16);font-weight: 400;color:#fff;line-height: 1;transition:all 0.4s;box-sizing: border-box;  }
			.main_more span:after{display:inline-flex;content:'';width:20px;height:12px;background:url('/data/skin/respon_default/images/skin/main_arw.svg') no-repeat center;margin-left: 12px; transition:all 0.4s;}
			
		.main_title{position:relative; box-sizing:border-box;}
		.main_title h3{font-size:var(--title-60);font-weight: 600;color:#fff;line-height:1.2;}
			.main_title h3 + h6{margin-top: 26px;}
		.main_title h4{font-size:var(--title-40);font-weight: 700;color:rgba(0, 0, 0, 0.9);line-height:1.3;}
			.main_title h4 + p{margin-top:15px;}
		.main_title h6{font-size:var(--title-22);font-weight: 400;color:#fff;}
			.main_title h6 + .main_more{margin-top: 59px;}
		.main_title p{font-size:var(--title-18);font-weight: 400;color:#222;line-height:1.6;letter-spacing:-0.02em;}

		#wrap .swiper_btn:after{display:none;}

			/* over */
				@media screen and (min-width:1024px) {
					.main_more span{width:165px; max-width:165px;}
					.main_more span:hover{background:#fff; color:var(--point-dark); font-weight:500;}
					.main_more span:hover:after{background-image:url('../images/skin/main_arw_bk.png');}
				}


	/* 런칭 예정 IP */
		.main_expected{background:var(--point-dark); padding:243px 0; overflow:hidden;}
		.main_expected .w_custom{display:flex;}
		.main_expected .main_title{width: 440px;padding: 97px 30px 120px 0;box-sizing: border-box;}
		.main_expected .controller{position:absolute;left:0;bottom: 10%;font-size:0; display:inline-block;}
		.main_expected .swiper-pagination{position:relative; display:inline-flex;}
		.main_expected .swiper-pagination span{width:12px;height:12px;border-radius:100%;box-sizing:border-box;border:2px solid #d9d9d9;opacity: 1; transition:all 0.6s;}
			.main_expected .swiper-pagination span:not(:last-child){margin-right:20px;}
			.main_expected .swiper-pagination span.swiper-pagination-bullet-active{opacity:0;}
		.main_expected .circle{position:absolute;content:'';top:0;left:0;margin-left:0;transform:translateY(0);width:12px;height:12px;background: #fff;box-sizing:border-box;border-radius:100%;transition:all 0.6s;}

		.main_expected .info{width: calc(100% - 440px);}
		.main_expected .infoSwiper{overflow:hidden; width:1320px; padding-top:10px;}
		.main_expected .infoSwiper .swiper-slide{position:relative;width: calc(1320px / 3 - 20px);margin-right:30px;}
		.main_expected .infoSwiper .more_plus{position:absolute; top:40px; right:40px; z-index:4; opacity:0; transition:all 0.4s;}
		.main_expected .infoSwiper .link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
		.main_expected .infoSwiper .thumb{font-size:0; background:var(--point-dark); border-radius:10px; transition:all 0.4s;}
		.main_expected .infoSwiper .thumb span{position:relative; display:inline-block; border-radius:10px; opacity:0.5; transition:all 0.4s; overflow:hidden;}
			.main_expected .infoSwiper .thumb span:before{position:absolute; content:''; border-radius: 10px; border: 2px solid #fff; background: linear-gradient(180deg, #FFF 0%, #D9D9D9 0%, rgba(217, 217, 217, 0.00) 0.01%, rgba(0, 0, 0, 0.78) 84.75%); top:0; left:0; width:100%; height:100%; box-sizing:border-box; opacity:0; transition:all 0.4s;}
		.main_expected .infoSwiper dl{position:absolute;left:40px;bottom:45px;border-radius:10px;transform:translateY(40px);transition:all 0.4s;width: calc(100% - 80px);}
		.main_expected .infoSwiper dl dt{font-size:var(--title-30); font-weight:600; color:#fff; line-height:1.3; font-family: 'Noto Sans KR', sans-serif;}
			.main_expected .infoSwiper dl dt + dd{margin-top:16px;}
		.main_expected .infoSwiper dl dd{font-size:var(--title-20); font-weight:300; color:#fff; opacity:0; transition:all 0.4s;}

		
			/* over */
				@media screen and (min-width:1024px) {
					.main_expected .infoSwiper .swiper-slide:hover .more_plus{opacity:1;}
					.main_expected .infoSwiper .swiper-slide:hover .thumb{background:#222;}
					.main_expected .infoSwiper .swiper-slide:hover .thumb span{opacity:1; transform:translateY(-10px);}
					.main_expected .infoSwiper .swiper-slide:hover .thumb span:before{opacity:1;}
					.main_expected .infoSwiper .swiper-slide:hover dl{transform:translate(0);}
					.main_expected .infoSwiper .swiper-slide:hover dl dd{opacity:1;}
				}

	/* 런칭 IP */
		.main_complete.main_expected{padding-top:0;padding-bottom: 173px;}
		.main_complete.main_expected .w_custom{display:block;}
		.main_complete.main_expected .main_title{display:flex; align-items:center; width:auto; padding:0;}
		.main_complete.main_expected .main_title h3 + h6{margin:0 0 0 26px;}
		.main_complete.main_expected .controller{bottom: 6px;left:auto;right: 0;}
		
		.main_complete .cardSwiper{padding: 53px 30px 53px 30px;width: calc(100% + 60px);margin-left: -30px;overflow:hidden;box-sizing:border-box;}
		.main_complete .swiper-slide{position:relative;width:auto;margin-right:32px;width: calc(1300px / 4 - 29px);}
		.main_complete .cardSwiper .link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
		.main_complete .cardSwiper .thumb{font-size:0; border-radius:20px; overflow:hidden; background:var(--point-dark); transition:all 0.4s;}
		.main_complete .cardSwiper .thumb span{position:relative; display:inline-block; border-radius:20px; opacity:0.5; transition:all 0.4s;}
			.main_complete .cardSwiper .thumb span:before{position:absolute; content:''; width:100%; height:100%; top:0; left:0; background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 8.33%, #000 100%); border:2px solid #fff; border-radius:20px; box-sizing:border-box; opacity:0; transition:all 0.4s;}
		.main_complete .cardSwiper dl{position:absolute;left:50%;bottom: 60px;transform:translateX(-50%);width:calc(100% - 30px);text-align:center;transition:all 0.4s;}
		.main_complete .cardSwiper dl dt{font-size:var(--title-30); color:#fff; font-weight:500; line-height:1.3; letter-spacing:-0.03em;}
			.main_complete .cardSwiper dl dt + dd{margin-top: 28px;}
		.main_complete .cardSwiper dl dd{}

		/* over */
			@media screen and (min-width:1024px) {
				.main_complete .cardSwiper .swiper-slide:hover .thumb{transform:scale(1.11)}
				.main_complete .cardSwiper .swiper-slide:hover .thumb span{opacity:1;}
				.main_complete .cardSwiper .swiper-slide:hover .thumb span:before{opacity:1;}
				.main_complete .cardSwiper .swiper-slide:hover dl{transform:translate(-50%, 15px);}
                .main_complete .cardSwiper .swiper-slide:hover .main_more span{background: #fff; color: var(--point-dark); font-weight: 500;}
                .main_complete .cardSwiper .swiper-slide:hover .main_more span:after{background-image:url('../images/skin/main_arw_bk.png');}
			}

	/* WORK */
		.main_work{padding: 175px 0 160px;overflow:hidden;}  
		.main_work .main_title h3{position:relative;display:inline-block;color:var(--point-dark);font-weight: 700;padding-bottom: 30px;}
			.main_work .main_title h3:before{position:absolute; content:''; width:300%; height:2px;  background:var(--point-dark); bottom:0; right:0;}
		.main_work .slide_wrap{position:relative;display:flex;align-items:flex-end;margin-top: -116px;}
		.main_work .controller{position:absolute; left:0; bottom:0; font-size:0; display:inline-flex; z-index:5;}
		.main_work .controller .swiper_btn{position:relative; top:auto; left:auto; bottom:auto; right:auto; margin:0; width:60px; height:60px; border:2px solid var(--point-dark); border-radius:100%; background:#fff url('/data/skin/respon_default/images/skin/main_arw_bk.png') no-repeat center; box-sizing:border-box; transition:all 0.4s;}
			.main_work .controller .swiper_btn.swiper-button-prev{transform:scaleX(-1); margin-right:10px;}
		.main_work .titleSwiper{width:420px;}
		.main_work .titleSwiper .main_title{padding-right:30px;}
		.main_work .titleSwiper .link_list{display:flex;font-size: 0;}
			.main_work .titleSwiper .link_list + .main_title{margin-top: 33px;}
		.main_work .titleSwiper .link_list li{}
			.main_work .titleSwiper .link_list li:not(:last-child){margin-right:20px;}
		.main_work .titleSwiper .link_list li a{display:inline-block;border:1px solid #ddd;border-radius:6px;overflow:hidden;box-sizing: border-box;width:120px;}
		.main_work .titleSwiper .swiper-wrapper{align-items:flex-end;}
		.main_work .titleSwiper .swiper-slide{opacity:0 !important;pointer-events:none;padding-bottom: 112px;box-sizing:border-box;transition:all 0.4s;}
		.main_work .titleSwiper .swiper-slide.swiper-slide-thumb-active{opacity:1 !important; pointer-events:inherit;}

		.main_work .info{width:calc(100% - 420px);}
		.main_work .thumbSwiper{ width:1720px; overflow:hidden; box-sizing:border-box;}
		.main_work .thumbSwiper .swiper-wrapper{align-items:flex-end;}
		.main_work .thumbSwiper .swiper-slide{width:calc(1720px / 2);}
		.main_work .thumbSwiper .swiper-slide .thumb{position: relative; border-radius:20px;height: 0;padding-bottom: 62.7%; opacity:0; transition:all 0.4s;}
		.main_work .thumbSwiper .swiper-slide.on .thumb{opacity:1;}
		.main_work .thumbSwiper .swiper-slide.on + .swiper-slide .thumb{opacity:1;}
		.main_work .thumbSwiper .swiper-slide .thumb span{position: absolute;right: 0;bottom: 0;width: 93%;height: 69.75%;border-radius:20px;overflow:hidden;transition:all 0.8s; }
		.main_work .thumbSwiper .swiper-slide .thumb span img{width:100%; height:100%; object-fit:cover; max-width:none; max-height:none;}
		.main_work .thumbSwiper .swiper-slide.on .thumb span{width:100%; height:100%; opacity:1;}

			/* over */
				@media screen and (min-width:1024px) {
					.main_work .controller .swiper_btn:hover{background-color:var(--point-dark); background-image:url('../images/skin/main_arw.png');}
				}

	/* COMMUNITY */
		.main_community{position:relative; padding: 129px 0;background:#00AEA5;}
			.main_community:before{position:absolute;content:'';width:18px;height:18px;background:url('/data/skin/respon_default/images/skin/main_community_icon01.svg') no-repeat center;left: 8%;bottom: 42%;}
			.main_community:after{position:absolute;content:'';width:37px;height:36px;background:url('/data/skin/respon_default/images/skin/main_community_icon02.svg') no-repeat center;top: 16.5%;right: 11%;}
		.main_community .board_list{display:flex;margin-top: 42px;}
		.main_community .board_list > li{position:relative; width:calc(100% / 2 - 20px);border:3px solid var(--point-dark);box-sizing:border-box;background:#fff;border-radius:20px;padding: 40px 40px 45px;}
			.main_community .board_list > li:not(:last-child){margin-right:40px;}
			.main_community .board_list > li:before{position:absolute; content:''; background:no-repeat center;}
			.main_community .board_list > li:nth-child(1) .charactor{position:absolute; left: -54px;bottom: -39px; font-size:0;}
			.main_community .board_list > li:nth-child(2) .charactor{position:absolute; right: 131px;top: -65px; font-size:0;}
		.main_community .board_list .main_title{}
		.main_community .board_list .main_title h4{font-weight:600;}
		.main_community .board_list .main_title h4 a{display:inline-block; font-size:inherit; font-weight:inherit; color:inherit; padding-right:35px; box-sizing:border-box;}
			.main_community .board_list .main_title h4 a:after{position:absolute; content:''; width:31px; height:18px; top:50%; right:0; transform:translateY(-50%); background:url('/data/skin/respon_default/images/skin/main_arw_big_bk.svg') no-repeat center;}
		.main_community .board_ol{border-top:2px solid var(--point-dark);margin-top: 22px;}
		.main_community .board_ol > li{position:relative;padding: 31px 0 0;box-sizing:border-box;display:flex;align-items:center;}
			.main_community .board_ol > li:not(:first-child){border-top:1px solid #ddd; margin-top:29px;}
		.main_community .board_ol .link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
		.main_community .board_ol .date{display:inline-flex; align-items:center; align-content:center;;justify-content:center; flex-wrap:wrap; width:70px; height:70px; border-radius:10px; background:#ddd; text-align:center; transition:all 0.4s;}
		.main_community .board_ol .date dt{width:100%;font-size:var(--title-30);font-weight:700;color:#fff;line-height: 1;}
		.main_community .board_ol .date dt + dd{margin-top:3px;}
		.main_community .board_ol .date dd{width:100%;font-size:var(--title-14);font-weight:400;color:#fff;line-height: 1;}
		.main_community .board_ol .info{width:calc(100% - 70px); padding-left:24px; box-sizing:border-box;}
		.main_community .board_ol .info dt{font-size:var(--title-20); font-weight:500; color:var(--point-dark); line-height:1.5; font-family: 'Noto Sans KR', sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
			.main_community .board_ol .info dt + dd{margin-top: 6px;}
		.main_community .board_ol .info dt em{font-size:inherit; font-weight:inherit; color:inherit;}
		.main_community .board_ol .info dd{font-size:var(--title-16); font-weight:400; color:#888; letter-spacing:-0.03em; line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
		.main_community .board_ol .info dd * {display:inline;}

		/* over */
			@media screen and (min-width:1024px) {
				.main_community .board_ol > li:hover .date{background:var(--point-dark);}
			}

	@media screen and (max-width:1600px) {
		.main_community:before{bottom:4%;}
	}
	@media screen and (max-width:1500px) {
		.main_work .slide_wrap{margin-top:-7vw;}
		.main_work .thumbSwiper{width:114vw;}
		.main_work .thumbSwiper .swiper-slide{width:calc(114vw / 2);}
	}
	@media screen and (max-width:1400px) {
		.main_community .board_list > li:nth-child(1) .charactor{/* transform: rotate(-42deg); */left: -7px;bottom: -61px;}
	}
	@media screen and (max-width:1360px) {
		.main_complete .cardSwiper{}
		.main_complete .swiper-slide{width:calc(100% / 4 - 24px);}
	}
	@media screen and (max-width:1280px) {
		.main_title h3 + h6{margin-top:2vw;}
		.main_title h4 + p{margin-top:12px;}
		.main_title h6 + .main_more{margin-top:4.6vw;}

		.main_expected{padding:18.5vw 0;}
		.main_expected .main_title{width:36%; padding:7.5vw 30px 120px 0;}
		.main_expected .info{width:64%;}
		.main_expected .infoSwiper{width:calc(100% + 30px); }
		.main_expected .infoSwiper .swiper-slide{width:32vw; margin-right:2.2vw;}

		.main_complete .cardSwiper dl{bottom:55px;}
		.main_complete .cardSwiper dl dt + dd{margin-top:2.15vw;}

		.main_work .main_title h3{padding-bottom:25px;}
		.main_work .controller .swiper_btn{width:55px; height:55px;}
		.main_work .titleSwiper{width:34.4%;}
		.main_work .titleSwiper .link_list li:not(:last-child){margin-right:15px;}
		.main_work .titleSwiper .link_list + .main_title{margin-top:2.5vw;}
		.main_work .info{width:65.6%;}
		.main_work .thumbSwiper .swiper-slide .thumb{padding-bottom:0; height:450px;}

		.main_community .board_list > li{width:calc(100% / 2 - 1.5vw);}
		.main_community .board_list > li:not(:last-child){margin-right:3vw;}
	} 
	@media screen and (max-width:1023px) {
		.main_title h3 + h6{margin-top:20px;}
		.main_title h4 + p{margin-top:10px;}
		.main_title h6 + .main_more{margin-top:47px;}

		.main_expected{padding:180px 0;}
		.main_expected .controller{left:5px;}
		.main_expected .infoSwiper{padding-top:0;}
		.main_expected .infoSwiper .swiper-slide{margin-right:15px;}
		.main_expected .infoSwiper dl{left:35px; bottom:40px; width:calc(100% - 70px); transform:none;}
		.main_expected .infoSwiper dl dt + dd{margin-top:12px;}
		.main_expected .infoSwiper dl dd{opacity:1;}

		.main_complete.main_expected{padding-bottom:150px;}
		.main_complete .cardSwiper{padding:40px 0 0 0; width:100%; margin-left:0;}
		.main_complete .swiper-slide{margin-right:15px; width:calc(100% / 4 - 12px);}
		.main_complete .cardSwiper dl{bottom:50px;}
		.main_complete .cardSwiper dl dt + dd{margin-top:22px;}

		.main_work{padding:150px 0;}
		.main_work .controller .swiper_btn{width:50px; height:50px;}
		.main_work .slide_wrap{flex-wrap:wrap; flex-direction:column-reverse; margin-top:0;}
		.main_work .titleSwiper{width:100%; padding-top:30px; }
		.main_work .titleSwiper .swiper-slide{padding-bottom:80px;}
		.main_work .titleSwiper .link_list + .main_title{margin-top:25px;}
		.main_work .info{width:100%; padding-top:40px;}
		.main_work .thumbSwiper{width:calc(100% + 30px); margin-left:-15px; padding: 0 15px;}
		.main_work .thumbSwiper .swiper-slide{width:87%;}
		.main_work .thumbSwiper .swiper-slide .thumb{height:53vw;}

		.main_community{padding:110px 0;}
		.main_community .board_list{margin-top:35px;}
		.main_community .board_list > li{width:calc(100% / 2 - 7.5px); padding:35px 35px 40px;}
			.main_community .board_ol > li:not(:first-child){margin-top:25px;}
			.main_community .board_list > li:not(:last-child){margin-right:15px;}
		.main_community .board_ol > li{padding-top:25px;}
		.main_community .board_ol .date{width:65px; height:65px;background:var(--point-dark);}
		.main_community .board_ol .info{padding-left:20px; width:calc(100% - 65px);}
	} 
	@media screen and (max-width:860px) {
		.main_title h4 + p{margin-top:7px;}
		.main_more span{height:40px;padding-top: 0;}

		.main_expected, .main_work{padding:160px 0;}

		.main_complete.main_expected{padding-bottom:160px;}
		.main_complete .cardSwiper{padding-top:35px;}
		.main_complete .swiper-slide{width:calc(100% / 3 - 10px);}
		.main_complete .cardSwiper dl{bottom:45px;}

		.main_work .main_title h3{padding-bottom:20px;}
		.main_work .titleSwiper{padding-top:25px;}
		.main_work .titleSwiper .link_list + .main_title{margin-top:20px;}
		.main_work .titleSwiper .swiper-slide{padding-bottom:75px;}
		.main_work .controller .swiper_btn{width:45px; height:45px;}

		.main_community:after{top:4%;}
		.main_community:before{bottom:30px;}
		.main_community .board_list{flex-wrap:wrap; flex-direction:column-reverse;}
		.main_community .board_list > li{width:100%;}
		.main_community .board_list > li:not(:last-child){margin:15px 0 0;}
	} 
	@media screen and (max-width:767px) {
		.main_expected .w_custom{display:block; padding-bottom:30px;}
		.main_expected .main_title{width:100%;padding: 0 0 30px 0;position:static;}
		.main_expected .controller{bottom:0;}
		.main_expected .info{width:100%;}
		.main_expected .infoSwiper{margin-left:-15px; padding-left:15px; padding-right:15px;}
		.main_expected .infoSwiper .swiper-slide{width:55vw;}

		.main_complete.main_expected .main_title{padding-bottom: 25px;}
		.main_expected .controller, .main_complete.main_expected .controller{left:50%;transform:translate(-50%) !important; bottom:0;right:auto; }
		.main_expected .swiper-pagination span{width:8px;height:8px;border:none;background:#d9d9d9;}
			.main_expected .swiper-pagination span:not(:last-child){margin-right:10px;}
		.main_expected .circle{width:10px;height:10px;border: 2px solid #fff;background:none;top:-1px;}
		.main_complete .cardSwiper{padding-top:0;}
	} 
	@media screen and (max-width:640px) {
		.main_title h3 + h6{margin-top:15px;}
		.main_title h6 + .main_more{margin-top:40px;}

		.main_expected, .main_work{padding:140px 0;}
		.main_expected .infoSwiper .thumb{border-radius:5px;}
		.main_expected .infoSwiper dl{left:30px; bottom:35px; width:calc(100% - 60px);}
		.main_expected .infoSwiper dl dt + dd{margin-top:10px;}

		.main_complete.main_expected{padding-bottom:140px;}
		.main_complete.main_expected .main_title	{align-items: flex-start;flex-direction: column;}
		.main_complete.main_expected .main_title h3 + h6{margin:15px 0 0 0;}
		.main_complete .swiper-slide{width:calc(100% / 2 - 7.5px);}
		.main_complete .cardSwiper dl{bottom:40px;}
		.main_complete .cardSwiper .thumb{border-radius:10px;}

		.main_work .main_title h3{padding-bottom:15px;}
		.main_work .titleSwiper .swiper-slide{padding-bottom:70px;}
		.main_work .titleSwiper .link_list li:not(:last-child){margin-right:10px;}
		.main_work .thumbSwiper .swiper-slide .thumb{border-radius:10px;}
		.main_work .thumbSwiper .swiper-slide .thumb span{border-radius:10px;}
		.main_work .info{padding-top:35px;}
		.main_work .controller .swiper_btn{width:40px; height:40px;}


		.main_community{padding:80px 0;}
		.main_community:before{left:25%;}
		.main_community .board_list > li{border-radius:10px;}
		.main_community .board_list > li:nth-child(1) .charactor{height: 60px;bottom: -43px;}
		.main_community .board_list > li:nth-child(2) .charactor{height:60px; right:14%; top:-40px;}
		.main_community .board_ol{margin-top:15px;}
		.main_community .board_ol .date{width:60px; height:60px;}
		.main_community .board_ol .info{width:calc(100% - 60px); padding-left:15px;}
	} 
	@media screen and (max-width:479px) {
		.main_more span{height:38px;}

		.main_expected, .main_work, .main_community{padding:120px 0;}
		.main_expected .infoSwiper .swiper-slide{width:60vw;}
		.main_expected .infoSwiper dl{left:25px; bottom:30px; width:calc(100% - 50px);}

		.main_work .titleSwiper .link_list{justify-content: center;}
		.main_complete.main_expected{padding-bottom:120px;}

		.main_complete .cardSwiper dl{bottom:35px;}

		.main_work .titleSwiper .link_list + .main_title{padding:0;text-align: center;}
		.main_work .main_title h3{padding-bottom:10px;}
		.main_work .info{padding-top:30px;}
		.main_work .titleSwiper .swiper-slide{padding-bottom:0;}
		.main_work .controller{left:50%;transform:translate(-50%);display: none;}

		.main_community .board_list > li{padding:30px 30px 35px;}
	} 
	@media screen and (max-width:431px) {

		.main_expected{padding:100px 0;}

		.main_complete .cardSwiper{width:calc(100% + 30px); margin-left:-15px; padding:0 15px;}
		.main_complete .swiper-slide{width:60vw;}
	}