@charset "UTF-8";

/*[s] Reset Css */
	html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none}
	input,button,textarea{background-color: transparent; border:none; -webkit-border-radius:0; -webkit-appearance:none}
	input[type=submit],input[type=image],input[type=button],button,a{cursor: pointer; text-decoration: none;}
	img,video,audio,object,embed,iframe{max-width:100%;}
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,legend,figure{margin:0;padding:0}
	fieldset,img,abbr,acronym{border:none}
	fieldset{display:block}
	ol,ul{list-style:none outside}
	em,i{font-style: normal;}
	h1,h2,h3,h4,h5,h6,address,caption,cite,code,dfn,em,th,var{font-size:100%; font-weight:normal}

	hr,legend,caption,hr{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;border: 0;overflow: hidden;clip: rect(0 0 0 0);clip-path: inset(50%);white-space: nowrap;}

	img{
		image-rendering: -moz-crisp-edges; /* Firefox */
		image-rendering: -o-crisp-edges; /* Opera */
		image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
		image-rendering: crisp-edges;
		vertical-align:top;
	}

	a{outline:none !important; select-dummy: expression(this.hideFocus=true) !important;}

	/* 다국어
	html:lang(ko){font-family:'Noto Sans KR', sans-serif;}
	html:lang(en){font-family:'Noto Sans KR', sans-serif;}
	html:lang(zh){font-family:'Noto Sans SC', 'Noto Sans KR', sans-serif;}
	html:lang(ja){font-family:'Noto Sans JP', 'Noto Sans KR', sans-serif;}
	*/

	/* Skip Navigation */
	.skip{width:1px; height:1px; margin:0 -1px -1px 0; padding:0; font-size:0; line-height:0; display:block; overflow:hidden;}
	.skip:is(:hover, :active, :focus){width:100%; height:auto; margin:0; padding:5px 0; font-weight:bold; font-size:12px; line-height:1; color:#333; text-decoration:none !important; text-indent:10px}

	body,th,td,input,select,textarea,h2,h3,h4,h5,address,code,button{font-family:'Noto Sans KR', sans-serif; font-style:normal; font-weight:normal;}
	body{font-size:1.6rem; line-height:1.3; color:#666;}
/*[e] Reset Css */

/*[s] All Style */
    *::-webkit-scrollbar{width: 0.5rem; height:100%;}/* 스크롤바의 너비 */
	*::-webkit-scrollbar:horizontal{height: 0.5rem;}
    *::-webkit-scrollbar-thumb{height: 10%; background-color:var(--point); border-radius: 1rem;}  /* 스크롤바의 길이 & 색상 */
    *::-webkit-scrollbar-track{background-color: rgba(0,0,0,0.1);}/*스크롤바 뒷 배경 색상*/

/*[s] Transition Style */
    #introVisual .visualRoll .slider>div,
	#introVisual .vTxtArea .ii,
    #introVisual .vTxt .ii{transition: all .3s ease-out; transform-origin: 50% 50%;}
/*[e] Transition Style */

#wrap{padding-top:9rem;}

/*[s] HEADER */
	#header{width:100%; background-color: #fff; font-size:0; line-height:0; border-bottom:1px solid #e6e6e6; position: fixed; left:0; top:0; z-index:8;}

	#header>.inConts{border-bottom:1px solid transparent; display: flex; justify-content: space-between; border:0}
	#header>.inConts>*{flex:0 1 auto; display: flex; align-items: center; justify-content: flex-start;}

	#header h1{padding:1.3rem 0 1.6rem; display:inline-block; position: relative;}
	#header h1>a{display:inline-block; position: relative;}
	#header h1>a img{width:11.5rem;}

	#header .introNav{margin-left:3.5rem; flex:1; display:flex; justify-content:space-between;}

	#header #introMenu,
	#header #introMenu #list,
	#header #introMenu #list>li,
	#header #introMenu #list>li>a{height:9rem;}

	#header #introMenu{display:flex; justify-content: space-between; position: relative;}/*width:calc(100% - 28rem); */
	#header #introMenu #list{display: flex; gap:0.9rem}
	#header #introMenu #list>li{display:inline-block; vertical-align: top; position: relative;}
	#header #introMenu #list>li>a{padding:0 2rem; width:100%; font-weight: 400; font-size:1.7rem; line-height:1.3; color: #555; text-align: center; display: flex; align-items: center; position: relative; z-index:3; transition:all 0.3s ease-out;}
	#header #introMenu #list>li>a>span{display:table-cell; vertical-align:middle; position: relative; letter-spacing:0.01em !important; white-space:nowrap;}
	#header #introMenu #list>li>a::after{content:""; display:block; width:4rem; height:0.3rem; background-color:var(--point); position:absolute; left:50%; bottom:0; transform:translateX(-50%); opacity:0; transition:all 0.3s ease-out;}

	#header #introMenu #list .gnbSub{width:14rem; margin-left:-7rem; padding:2rem 0 2.5rem; text-align: center; display:none; position: absolute; left:50%; top:100%; z-index:6; background-color:#fff;}
	#header #introMenu #list .gnbSub>li{padding:0 0.7rem;}
	#header #introMenu #list .gnbSub>li+li{margin-top:1rem;}
	#header #introMenu #list .gnbSub>li>a{width:100%; min-height:3.5rem; padding:0.5rem 0.7rem 0.7rem; font-weight: 400; font-size:1.8rem; line-height:1.3; color:#333; display: flex; align-items: center; justify-content: center; border-radius:99px;}

	#header #introMenu #list .gnbSub>li:is(:hover, .oPage)>a{font-weight: 500; color:#222;}

	#header #introMenu #list>li.one .gnbSub,
	#header #introMenu #list .gnbSub>li.hide{display:none !important;}

	#wrap[data-device="pc"] #header:is(:hover, .all, .move){background-color:#fff; border-color:var(--point);}

	#wrap #header #introMenu #list>li:is(:hover, .oPage, .active)>a,
	#wrap #header #introMenu #list>li>a.active{font-weight:700; color:#000}
	#wrap #header #introMenu #list>li:is(:hover, .oPage, .active)>a::after,
	#wrap #header #introMenu #list>li>a.active::after{opacity:1;}

    #header .right-utill{display:flex;}
    #header .right-utill .app_down{padding:0.6rem; width:15.8rem; display:flex; align-items:center; gap:0.7rem; border-radius:4.6rem; background:linear-gradient(0deg, #ff9300, #f5cc44);}
    #header .right-utill .app_down span{margin-top:-0.2rem; font-size:1.6rem; font-weight:700; line-height:1; color:#fff;}
    #header .right-utill .app_down::before{content:""; display:block; width:3.4rem; height:3.4rem; border-radius:50%; background:url("/images/intro/hd_app_down_ico.png") no-repeat center/1.4rem; background-color:#fff;}

    .app_down_nav{padding:0.5rem 0; position:relative;}
    .app_down_nav > ul{width:100%; padding:0 1.4rem; display:none; background-color:#fff; position:absolute; left:0; top:100%; z-index:3; border:1px solid #e6e6e6; border-radius:1rem; overflow:hidden}
    .app_down_nav > ul li a{display:block; padding:1rem 0;}
    .app_down_nav > ul li a img{width:12.8rem;}
    .app_down_nav > ul li+li a{border-top:1px solid #e6e6e6}

/*[e] HEADER */

/*[s] Main Style */
    .sect_wr{padding:14.2rem 0 0}
    .sect_tit{margin-bottom:3rem; text-align:center;}
    .sect_tit h3{font-size:3.5rem; line-height:5rem; color:#000; font-weight:700;}
    .sect_tit p{margin-top:1.1rem; padding-top:1.4rem; font-size:2rem; line-height:3rem; color:#555; position:relative;}
    .sect_tit p::before{content:""; display:block; width:6rem; height:1px; background-color:var(--point); position:absolute; left:50%; top:0; transform:translateX(-50%);}

    /* introVisual */
		#introVisual{width:100%; position: relative; z-index:2; overflow:hidden;}
		#introVisual .visualRoll{white-space: nowrap;}
		#introVisual .visualRoll .swiper-slide{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;}
		#introVisual .visualRoll .swiper-slide>img{width:100%; max-width:none; height:87rem; object-fit: cover; object-position: center center; transform:scale(1);}

		#introVisual .vTxtArea{width:100%; height:100%; padding:0 0; text-align: center; position: absolute; left:0; top:0; z-index:5; display: flex; align-items: center; justify-content: center;}
		#introVisual .vTxt{width:100%; max-width:132rem; margin:0 auto; padding:0 2rem; position: relative;}
		#introVisual .vTxt .ii{font-size:0; line-height:0; color: #fff; top:50px; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word; white-space: normal;}
		#introVisual .vTxt .i01{transition-delay: 0.7s;}
		#introVisual .vTxt .i02{transition-delay: 0.75s;}
		#introVisual .vTxt .i03{transition-delay: 0.8s;}
		#introVisual .vTxt .i04{transition-delay: 0.85s;}
		#introVisual .vTxt .i05{transition-delay: 0.9s;}
		#introVisual .vTxt .i06{transition-delay: 0.95s;}
		#introVisual .vTxt .i07{transition-delay: 1s;}

		#introVisual .vTxt .ii.title{padding-bottom:1.1rem; font-size:2rem; line-height:3rem; color:#fff; font-family:var(--play); position:relative;}
		#introVisual .vTxt .ii.title::after{content:""; display:block; width:6rem; height:1px; background-color:var(--point); position:absolute; left:50%; bottom:0; z-index:1; transform:translateX(-50%);}		
		#introVisual .vTxt .ii.text{margin-top:1.9rem; font-weight:700; font-size:4.5rem; line-height:5.5rem;}

		#introVisual .swiper-slide-active .vTxt .ii{top:0px; opacity:1;}
		
        .video_box{padding:14rem 0 0;}
        .video_box .inConts{max-width:164.5rem;}
        .video_box iframe{width:100%; aspect-ratio:16/9;}

    /* shorts_sect */
        .shorts_sect{padding-bottom:12rem; position:relative;}
        .shorts_sect .inConts{max-width:164.5rem; overflow:hidden;}
        /* .shorts_sect::before,
        .shorts_sect::after{content:""; display:block; width:calc((100% - 132rem)/2); height:100%; position:absolute; top:0; z-index:2;}
        .shorts_sect::before{left:0; background-color:#fff;}
        .shorts_sect::after{right:0; background:linear-gradient(90deg, transparent 10%, #fff 35%);} */
        .shorts_sect .shorts_sw{padding-bottom:3rem; position:relative;}
        .shorts_sect .shorts_sw .swiper-slide{width:29.9rem; margin-right:2.8rem; aspect-ratio:9/16; cursor:pointer;}
        .shorts_sect .shorts_sw .video_wr{width:100%; height:100%; background-color:#000; border-radius:1rem; box-shadow:0 1.5rem 1.5rem rgba(0, 0, 0, 0.15); overflow:hidden; position:relative;}
        .shorts_sect .shorts_sw .video_thumb{width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0;}
        .shorts_sect .shorts_sw .video_iframe_container{width:100%; height:100%; position:absolute; left:0; top:0; display:none;}
        .shorts_sect .shorts_sw .video_iframe_container iframe{width:100%; height:100%; border:none;}
        .shorts_sect .shorts_sw .video_iframe_container.active{display:block}
        .shorts_sect .shorts_sw .play_ico{display:flex; align-items:center; justify-content:center; position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%, -50%); transition:all 0.3s ease-out;}
        .shorts_sect .shorts_sw .play_ico::before{content:""; display:block; width:8rem; height:9.9rem; background:url("/images/intro/shorts ico.png") no-repeat center/contain;}
        .shorts_sect .shorts_sw .video_iframe_container.active + .play_ico{opacity:0;}
        .shorts_sect .shorts_sw .click_overlay{position:absolute; inset:0 0 0 0; z-index:5; cursor:pointer;}
        .fancybox__container .fancybox__slide{padding:0 10rem}
        .fancybox__container .fancybox__content{width:auto !important; height:80vh !important; aspect-ratio:9/16; background-color:transparent !important;}
        .fancybox__container .fancybox__slide .fancybox__content .fancybox__iframe{border-radius:1rem; overflow:hidden;}

    /* best_awd_bann */
        /* .best_awd_bann figure{width:100%; height:48rem;} */
        .best_awd_bann figure img{width:100%;}

    /* int_news_sect */
        .int_news_sect{padding-bottom:15rem;}
        .int_news_sect ul li{display:flex; align-items:center; gap:6rem 8rem; flex-wrap:wrap;}
        .int_news_sect ul li:nth-child(even){flex-direction:row-reverse; text-align:right;}
        .int_news_sect ul li+li{margin-top:12rem;}
        .int_news_sect ul li figure{flex:1; box-shadow:0 1.5rem 1.5rem rgba(0, 0, 0, 0.15);}
        .int_news_sect ul li figure img{width:100%;}
        .int_news_sect ul li .cont_box{flex:1;}
        .int_news_sect ul li .cont_box .num{display:block; margin-bottom:2.5rem; font-size:1.8rem; line-height:1; color:var(--point); font-family:var(--play);}
        .int_news_sect ul li .cont_box em{display:block; font-size:2.5rem; line-height:3.5rem; color:#000; font-weight:700;}
        .int_news_sect ul li .cont_box p{margin-top:0.8rem; font-size:1.8rem; line-height:2.8rem; color:#666;}

    /* howto_sect */
        .howto_sect{padding-bottom:21rem; background:url("/images/intro/howto_sect_bg.jpg") no-repeat center/cover;}
        .howto_sect .sect_tit h3{color:#fff}
        .howto_sect .sect_tit p{color:#fff}
        .howto_sect .howto_sw{overflow:hidden;}
        .howto_sect .howto_sw .swiper-slide{padding:5rem 2rem 4.8rem; margin-right:2.8rem; width:calc((100% - 8.4rem)/4); text-align:center; background-color:#fff; border-radius:1rem; transition:all 0.3s ease-out;}
        .howto_sect .howto_sw .swiper-slide .num{display:block; font-size:1.8rem; line-height:1; color:#555; font-family:var(--play);}
        .howto_sect .howto_sw .swiper-slide .ico{margin:4.8rem auto 0; width:8rem;}
        .howto_sect .howto_sw .swiper-slide .ico img{transition:all 0.3s ease-out;}
        .howto_sect .howto_sw .swiper-slide dl{margin-top:3.9rem;}
        .howto_sect .howto_sw .swiper-slide dt{font-size:2.2rem; line-height:3.2rem; color:#000; font-weight:500; transition:all 0.3s ease-out;}
        .howto_sect .howto_sw .swiper-slide dd{margin-top:0.5rem; font-size:2rem; line-height:2.8rem; color:#555; transition:all 0.3s ease-out;}
        .howto_sect .howto_sw .swiper-slide:is(:hover, .swiper-slide-active){background-color:var(--point);}
        .howto_sect .howto_sw .swiper-slide:is(:hover, .swiper-slide-active) .num,
        .howto_sect .howto_sw .swiper-slide:is(:hover, .swiper-slide-active) dt,
        .howto_sect .howto_sw .swiper-slide:is(:hover, .swiper-slide-active) dd{color:#fff}
        .howto_sect .howto_sw .swiper-slide:is(:hover, .swiper-slide-active) .ico img{filter:brightness(0) invert(1);}

    /* browse_sect */
        .browse_sect{padding-bottom:12.5rem;}
        .browse_sect .browse_sw{padding-bottom:3rem; position:relative; overflow:hidden;}
        .browse_sect .browse_sw .swiper-slide{width:76.5rem; border-radius:1rem; box-shadow:0 1.5rem 1.5rem rgba(0, 0, 0, 0.15); transition:all 0.3s ease-out; overflow:hidden;}
        .browse_sect .browse_sw .swiper-slide .img_box img{width:100%;}
        .browse_sect .browse_sw .swiper-slide .cont_box{padding:3.5rem 2rem 4rem; display:flex; gap:4rem; color:#fff; background-color:#999; transition:all 0.3s ease-out;}
        .browse_sect .browse_sw .swiper-slide .cont_box em{font-size:3rem; line-height:4rem; font-weight:700;}
        .browse_sect .browse_sw .swiper-slide .cont_box p{flex:1; font-size:2rem; line-height:2.8rem; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all !important;}
        .browse_sect .browse_sw .swiper-slide-active .cont_box{background-color:var(--point);}
        .browse_sect .browse_sw .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next){opacity:0;}
        .browse_sect .browse_sw .swiper-pagination{display:none;}
        .browse_sect .browse_sw .swiper-pagination-bullet{width:1.8rem; height:1.8rem; border-radius:1.8rem; background-color:#b2b2b2; opacity:1;}
        .browse_sect .browse_sw .swiper-pagination-bullet-active{width:6rem; background-color:var(--point);}

    /* finish_sect */
        .finish_sect{padding:12rem 0; background:url("/images/intro/finish_sect_bg.jpg") no-repeat right center/cover;}
        .finish_sect .inConts{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:3.5rem 0}
        .finish_sect p{font-size:3rem; line-height:4rem; font-weight:500; color:#fff;}
        .finish_sect .btns{display:flex; align-items:center; gap:1rem; }
        .finish_sect .btns a{display:block; padding:1rem 2rem 1.3rem; min-width:21rem; height:6rem; font-size:1.7rem; line-height:3.5rem; color:#fff; text-align:center; border-radius:6rem; border:1px solid #fff;}
        .finish_sect .btns a.point{background-color:var(--point); border-color:var(--point);}

    /* intro_pg_quick */
        .intro_pg_quick{position:fixed; right:4rem; bottom:3rem; z-index:10;}
        .intro_pg_quick a{display:block; width:10rem; height:11rem; font-size:1.5rem; line-height:2rem; font-weight:500; text-align:center; color:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:2rem; background-color:var(--point);}
        .intro_pg_quick a .ico_box{margin-bottom:0.7rem; display:block;}
        .intro_pg_quick a .ico_box img{width:3.2rem;}

/*[e] Main Style */

/*[s] FOOTER */
    #footer{padding:7rem 0 7.3rem; background-color:#f8f8f8; text-align:center;}
    #footer .inConts{display:block; padding:0 2rem}
    #footer .footer-info{font-size:1.6rem; line-height:2.6rem; font-weight:300; color:#555;}
    #footer .footer-info p{display:flex; flex-wrap:wrap; justify-content:center;}
    #footer .footer-info p span+span{margin-left:0.9rem; padding-left:0.9rem; position:relative;}
    #footer .footer-info p span+span::after{content:""; display:block; width:1px; height:1.3rem; background-color:#ccc; position:absolute; left:0; top:50%; transform:translateY(-50%);}
    #footer address{margin-top:0; display:block; font-size:1.6rem; line-height:2.6rem; font-weight:300; color:#555;}
/*[e] FOOTER */


@media only screen and (max-width: 1024px) {
    #wrap{padding-top:16.5rem;}

    /*[s] HEADER */
        #header .right-utill .app_down{height:auto; width:16.8rem; justify-content:flex-start;}
        #header .right-utill .app_down span{display:block;}

        #header #introMenu{width:100%; position:fixed; left:0; top:9rem; background-color:#f6f6f6;}
        #header #introMenu,
        #header #introMenu #list,
        #header #introMenu #list>li,
        #header #introMenu #list>li>a{height:7.5rem;}

        #header .introNav{flex:none; margin-left:0;}
    /*[e] HEADER */

    /*[s] Main Style */
        /* howto_sect */
            .howto_sect .howto_sw{width:calc(100% + 4rem); margin-left:-2rem;}
            .howto_sect .howto_sw .swiper-slide{width:40rem; margin-right:0; position:relative;}
            .howto_sect .howto_sw .swiper-slide::before{content:""; display:block; width:6rem; height:100%; background:url("/images/intro/howto_step_arrow.png") no-repeat center/3.8rem; position:absolute; right:100%; top:0; z-index:0;}
            .howto_sect .howto_sw .swiper-slide:nth-child(1)::before{display:none;}

        /* browse_sect */
            .browse_sect .browse_sw .swiper-slide{width:100%;}
        
        /* finish_sect */
            .finish_sect{padding:15rem 0; background-position:right 15% center;}
            .finish_sect p{width:100%;}
            .finish_sect .btns{flex-wrap:wrap;}
            .finish_sect .btns li{flex:1;}
            

    /*[e] Main Style */
}

@media only screen and (max-width: 840px) {
    /*[s] HEADER */
        #header .right-utill .app_down span{font-size:1.8rem;}

        #header #introMenu #list>li>a{font-size:2.4rem; line-height:3.4rem;}

        #header .introNav{flex:none; margin-left:0;}
    /*[e] HEADER */

    /*[s] Main Style */
        .sect_tit{margin-bottom:5rem;}
        .sect_tit h3{font-size:4rem; line-height:5rem;}
        .sect_tit p{font-size:2.4rem; line-height:3.4rem;}

        /* introVisual */
            #introVisual .visualRoll .swiper-slide{margin-right:0;}
            #introVisual .visualRoll .swiper-slide>img{height:89.5rem;}

            #introVisual .vTxtArea{padding-top:18rem; text-align:left; align-items:flex-start;}
            #introVisual .vTxt .ii.title{padding-bottom:1.6rem; font-size:2.2rem; line-height:3.2rem;}
            #introVisual .vTxt .ii.title::after{left:0; transform:translate(0);}
            #introVisual .vTxt .ii.text{font-size:6rem; line-height:7rem;}

        /* shorts_sect */
            .shorts_sect .shorts_sw .swiper-slide{width:33.8rem;}

        /* int_news_sect */
            .int_news_sect ul li figure{flex:none; width:100%;}
            .int_news_sect ul li .cont_box{flex:none; width:100%;}
            .int_news_sect ul li .cont_box .num{font-size:2.2rem; line-height:3rem;}
            .int_news_sect ul li .cont_box em{font-size:3rem; line-height:4rem;}
            .int_news_sect ul li .cont_box p{margin-top:1rem; font-size:2.4rem; line-height:3.4rem;}
            .int_news_sect ul li:nth-child(even){text-align:left;}

        /* howto_sect */
            .howto_sect .howto_sw .swiper-slide .num{font-size:2.4rem; line-height:3.4rem;}
            .howto_sect .howto_sw .swiper-slide dt{font-size:3rem; line-height:4rem;}
            .howto_sect .howto_sw .swiper-slide dd{font-size:2.4rem; line-height:3.4rem;}

        /* browse_sect */
            .browse_sect .browse_sw{padding-bottom:5.8rem;}
            .browse_sect .browse_sw .swiper-pagination{display:block}

        /* finish_sect */
            .finish_sect .btns a{padding:1.5rem 2rem 1.5rem; min-width:28rem; height:7rem; font-size:2.4rem;}

        /* intro_pg_quick */
            .intro_pg_quick{right:2rem;}
    /*[e] Main Style */

    /*[s] FOOTER */
        #footer .footer-info{font-size:2.4rem; line-height:3.4rem; overflow:hidden;}
        #footer .footer-info p{margin-left:-1.8rem; justify-content:flex-start;}
        #footer .footer-info p span{margin-left:0.9rem; padding-left:0.9rem;}
        #footer .footer-info p span+span::after{height:2.1rem;}
        #footer address{margin-top:3rem; font-size:2.4rem; line-height:3.4rem; text-align:left;}
    /*[e] FOOTER */
}