@charset "UTF-8";

#header.fixed .header-in { background:transparent; }
.container { position:relative; }
.o0 {opacity: 0}/*ie 모바일버전에서 container이 보이는 현상 방지*/
.contents { max-width:none; padding:0; margin:0; }
.section { position:relative; height:100vh; padding:0 30px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-align:center; color:#fff; }
.section::before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url("../images/common/vis-bg.png"); }
#section-1.section { background-image:url("../images/main/section-1.jpg"); }
#section-2.section { background-image:url("../images/main/section-2.jpg"); }
#section-3.section { background-image:url("../images/main/section-3.jpg"); }
#section-4.section { background-image:url("../images/main/wll_visual.png"); }

.section .info { position:relative; padding-top:60px; z-index:2; top:50%; transform:translateY(-50%); color:#fff; text-align:center; }
.section .subj { font-family:'Montserrat'; font-weight:bold; font-size:29px; line-height:1.24; }
.section .subj.ico { padding-top:76px; }
.section .subj.ico::before { content:''; position:absolute; left:50%; top:30px; width:240px; height:52px; margin-left:-120px; background:url("../images/main/section-3-2.png") center center no-repeat; background-size:cover; }
.section .text { max-width:530px; min-height:35px; margin:24px auto 0; font-size:16px; line-height:1.5; }
.section .btn { margin-top:32px; }
.section .more { position:relative; display:inline-block; padding:0 72px 0 18px; font-size:15px; font-weight:700; line-height:50px; color:#000; border-radius:50px; background:#fff; text-align:left; }
.section .more::before { content:''; position:absolute; right:9px; top:9px; width:32px; height:32px; border-radius:100%; background:#ff5000; }
.section .more::after { content:''; position:absolute; right:22px; top:20px; width:7px; height:7px; border:0 solid #fff; border-width:2px 2px 0 0; transform:rotate(45deg); }

.channel-kakao { position:relative; max-width:1480px; padding:46px 20px 58px; margin:0 auto; color:#231916; text-align:center; z-index: 1; background-color: #fff;} /* 2021-10-14 z-index, background-color 추가 */
.channel-kakao .info .subj { margin-bottom:28px; font-size:20px; font-family:'NanumSquare'; font-weight:700; }
.channel-kakao .info .text { font-size:13px; line-height:1.38; }
.channel-kakao .info .text::before { display:none; margin:0 auto 24px;} /* 2021-10-12 display 수정 */
/* 2021-10-12 추가 :: S */
.channel-kakao .info .text .chfuturelab_btn {display: block; position: relative; font-size: 0; background-image: url('../images/common/sprite-mo.png'); margin: 0 auto 24px; background-size: 500px 500px; background-position: -193px -19px; width: 251px; height: 51px;}
.channel-kakao .info .text .chfuturelab_btn a {display: block; position: absolute; left: 55px; top: 0; /*right: 0; bottom: 6px;*/ width: 196px; height: 45px; z-index: 1;}
/* 2021-10-12 추가 :: E */
.channel-kakao .guide .guide-cont { position:relative; font-size:14px; }
.channel-kakao .guide .subj { display:block; margin-bottom:16px; }
.channel-kakao .guide .kakao_step { position:relative; padding:5px 0 16px; counter-reset:number; line-height:18px; }
.channel-kakao .guide .kakao_step::after { position:absolute; right:0; top:0; }
.channel-kakao .guide .kakao_step li { counter-increment:number; }
.channel-kakao .guide .kakao_step li::before { content:counter(number); display:inline-block; width:18px; height:18px; margin-right:6px; font-size:12px; font-weight:700; color:#fff; background:#000; border-radius:100%; text-align:center; }
.channel-kakao .guide .kakao_step li + li { margin-top:12px; }

.sub_newsletter { display: none; }
/* 2022-05-12 newsletter 추가 :: S */
.main_newsletter {padding: 46px 20px 27px; background: #ff4600; color: #fff; font-family: 'NanumSquare';}
.main_newsletter .inner {display: flex; max-width: 1240px; margin: 0 auto;}
.main_newsletter .subj_box {margin-top: 35px; width: 400px; flex: 0 0 auto;}
.main_newsletter .subj_box .subj {position: relative; margin-bottom: 20px; font-size: 48px; font-weight: 500; font-family: 'Montserrat'; letter-spacing: -0.025em; line-height: 1;}
.main_newsletter .subj_box .subj::after {position: absolute; bottom: calc(100%); right: calc(100%); width: 20px; height: 1px; background: #fff; transform-origin: right center; transform: rotate(45deg); content: '';}
.main_newsletter .subj_box .desc {font-size: 20px;}
.main_newsletter .subj_box .desc span {font-weight: 700; color: #fff22a;}
.main_newsletter .cont_box {width: 100%; padding-left: 25px; box-sizing: border-box;}
.main_newsletter .cont_box .desc {font-size: 25px;}
.main_newsletter .cont_box .desc.m {display: none;}
.main_newsletter .cont_box .desc span {font-weight: 700; color: #fff22a;}
.main_newsletter .cont_box .input_row {position: relative; margin: 22px 0 22px -25px;}
.main_newsletter .cont_box .input_row input {display: block; width: 100%; height: 60px; border: 0; padding: 0 162px 0 47px; font-size: 18px; background: #fff; border-radius: 30px;}
.main_newsletter .cont_box .input_row .submit_btn {position: absolute; top: 0; right: 0; width: 142px; height: 60px; font-size: 18px; font-weight: 500; color: #fff; background: #222; border-radius: 30px;}
.main_newsletter .fm-chk + .checked-i.txt {padding-left: 31px; line-height: 21px; font-size: 17px;}
.main_newsletter .fm-chk + .checked-i.txt .agree_pop_btn {display: inline-block; font-weight: 700; padding-bottom: 2px; border-bottom: 1px solid #fff; font: inherit; vertical-align: top;}
.main_newsletter .fm-chk + .checked-i:before {width: 21px; height: 21px; background-color: #fff; border-radius: 0;}
.main_newsletter .fm-chk:not(:disabled):checked + .checked-i:before {background-color: #fff;}
.main_newsletter .fm-chk + .checked-i:after {border-color: #000;}
.main_newsletter .check_row {display: flex;}
.main_newsletter .check_row .fm-item + .fm-item {margin-left: 58px;}
.main_newsletter .guide_txt {margin-top: 32px; font-size: 17px;}
/* 2022-05-12 newsletter 추가 :: E */

.deco { position:fixed; left:0; top:0; width:100%; height:100vh; z-index:1; } 
.deco .circle-big { position:absolute; left:50%; top:50%; }
.deco .circle-small { position:absolute; left:50%; top:50%; }
.deco .line { position:absolute; right:0; top:50%; }
.deco .line::before { content:''; position:absolute; right:-73px; top:-22px; width:150px; height:5px; background:#fff; }
.deco .circle-big .circle { position:absolute; left:50%; top:50%; width:886px; height:886px; transform:translate(-50%,-50%); transition:all 1200ms }
.deco .circle-big .circle::before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:152px solid rgba(255,255,255,.3); border-radius:100%; }
.deco .circle-small .circle { position:absolute; left:50%; top:50%; width:240px; height:240px; transform:translate(-50%,-50%); transition:all 1200ms }
.deco .circle-small .circle::before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:4px solid #ff5000; border-radius:100%; }
.deco .circle-small .line::before { right:-16px; top:10px; width:39px; height:3px; }
.deco .circle-big { transition:all 1600ms; animation:circleBig 4000ms infinite linear alternate; }
.deco .circle-small { transition:all 1600ms; animation:circleSmall 3500ms infinite linear alternate; }
.indicator.visible-after, .visible-after + .deco { position:absolute; top:200vh; }
.indicator.visible-before, .visible-before + .deco { position:absolute; top:0; }

@keyframes circleBig {
	0% { transform:translate(0,0); }
	100% { transform:translate(40px,15px); }
}
@keyframes circleSmall {
	0% { transform:translate(0,0); }
	100% { transform:translate(20px,-12px); }
}

/****************************** PC ******************************/
@media all and (min-width:1200px) {
	.indicator { position:fixed; top:0; right:60px; width:19px; height:100vh; z-index:10; }
	.indicator .in { display:block; position:absolute; right:0; top:50%; }
	.indicator .in::before { content:''; position:absolute; left:10px; top:10px; bottom:10px; width:1px; background:#5e5d5f; }
	.indicator .anchor { display:block; }
	.indicator .anchor + .anchor { margin-top:44px; }
	.indicator a { position:relative; display:block; width:19px; height:19px; }
	.indicator a::before { content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3px 0 0 -3px; border-radius:100%; background:#999; transition:all .3s }
	.indicator .active a::before { width:13px; height:13px; margin:-5px 0 0 -6px; background:#ff5000; }

	.section .info { padding-top:0; }
	.section .subj { font-size:54px; line-height:1.18; }
	.section .subj.ico { padding-top:190px; }
	.section .subj.ico::before { top:-13px; width:480px; height:104px; margin-left:-240px; }
	.section .text { min-height:30px; margin-top:35px; font-family:'NanumSquare'; font-size:22px; line-height:1.36; }
	.section .btn { margin-top:55px; }

	.section .more { padding:0 87px 0 47px; font-family:'NanumSquare'; font-size:18px; line-height:60px; border-radius:60px; }
	.section .more::before { right:10px; top:10px; width:40px; height:40px; }
	.section .more::after { right:26px; top:24px; width:10px; height:10px; }
	.section .scroll { display:none; }

	.channel-kakao { display:flex; padding-top:57px; padding-bottom:60px; text-align:left; }
	.channel-kakao .info { flex:1; }
	.channel-kakao .info .subj { margin-bottom:29px; font-family:'NanumSquare'; font-size:24px; font-weight:700; }
	.channel-kakao .info .text { font-family:'NanumSquare'; font-size:18px; line-height:1.55; }
	.channel-kakao .info .text::before { margin:0 0 18px; }
	/* 2021-10-12 추가 :: S */
	.channel-kakao .info .text .chfuturelab_btn {margin:0 0 18px; background-image: url('../images/common/sprite.png'); background-size: 500px 650px; background-position: 0 -346px; width: 334px; height: 68px;}
	.channel-kakao .info .text .chfuturelab_btn a {left: 73px; top: 0; /*right: 0; bottom: 9px;*/ width: 261px; height: 59px;}
	/* 2021-10-12 추가 :: E */
	.channel-kakao .guide { flex:1; padding:63px 0 0; }
	.channel-kakao .guide .btn, .channel-kakao .guide .close { display:none; }
	.channel-kakao .guide .guide-cont { display:block !important; padding:0 0 0 59px; font-size:16px; border-left:1px solid #d3d1d0; }
	.channel-kakao .guide .kakao_step { padding:0; }
	.channel-kakao .guide .kakao_step::after { top:auto; bottom:-4px; }
	.channel-kakao .guide .kakao_step li + li { margin-top:8px; }
	.channel-kakao .guide .kakao_step li::before { width:20px; height:20px; margin-right:10px; }

	.visible-1 + .deco .circle-big .circle { transform:translate(-50%,-50%) scale(0.541760722) rotate(45deg); }
	.visible-1 + .deco .circle-small .circle { transform:translate(-50%,-50%) scale(1) rotate(225deg); }
	.visible-2 + .deco .circle-big .circle { transform:translate(-50%,-50%) scale(0.864559819) rotate(135deg); }
	.visible-2 + .deco .circle-small .circle { transform:translate(-50%,-50%) scale(0.495833333) rotate(70deg); }
	.visible-3 + .deco .circle-big .circle { transform:translate(-50%,-50%) scale(1) rotate(335deg); }
	.visible-3 + .deco .circle-small .circle { transform:translate(-50%,-50%) scale(0.995833333) rotate(45deg); }
	.visible-1 + .deco .circle-big { margin-left:216px; margin-top:216px; }
	.visible-1 + .deco .circle-small { margin-left:-233px; margin-top:-233px; }
	.visible-2 + .deco .circle-big { margin-top:-418px; }
	.visible-2 + .deco .circle-small { margin-top:-225px; }
	.visible-3 + .deco .circle-big { margin-top:-193px; }
	.visible-3 + .deco .circle-small { margin-top:-193px; }
}
@media all and (min-width:1200px) and (max-width:1799px) {
	.channel-kakao { padding-left:60px; padding-right:60px; }
}

/****************************** MO ******************************/
@media all and (max-width:1199px) {
	.indicator { display:none; }

	.scroll { position:absolute; left:50%; bottom:29px; z-index:10; width:25px; height:30px; margin-left:-12px; white-space:nowrap; text-indent:-999px; overflow:hidden; }
	.scroll::before, .scroll .in::before, .scroll .in::after { content:''; position:absolute; left:50%; bottom:3px; width:9px; height:9px; margin-left:-6.5px; border:0 solid #fff; border-width:0 0 3px 3px; transform:rotate(-45deg); }
	.scroll::before { opacity:1; }
	.scroll .in::before { bottom:11px; opacity:0.5; }
	.scroll .in::after { bottom:19px; opacity:0.2; }

	.channel-kakao .info .text { margin-bottom:30px; }
	.channel-kakao .guide .btn button { font-size:12px; font-weight:700; text-decoration:underline; }
	.channel-kakao .guide .guide-cont { display:none; position:absolute; bottom:50px; left:20px; right:20px; padding:17px 20px 20px; border:1px solid #000; background:#fff; text-align:left; }
	.channel-kakao .guide .kakao_step { font-weight:700; }
	.channel-kakao .guide .close { display:block; position:absolute; right:14px; top:10px; width:30px; height:30px; white-space:nowrap; text-indent:-100px; overflow:hidden; }
	.channel-kakao .guide .close::before { content:''; display:block; position:absolute; top:50%; left:50%; margin:-1px 0 0 -11px; width:22px; height:2px; background:#000; transform:rotate(-45deg); transition:transform 0.2s; }
	.channel-kakao .guide .close::after { content:''; display:block; position:absolute; top:50%; left:50%; margin:-1px 0 0 -11px; width:22px; height:2px; background:#000; transform:rotate(45deg); transition:transform 0.2s; }
	.channel-kakao .guide .close:hover .i-close::before, .channel-kakao .guide .close:hover .i-close::after { transform:rotate(0); }

	/* 2022-05-12 newsletter 추가 :: S */
	.main_newsletter {padding: 22px 20px 21px; }
	.main_newsletter .inner {display: block;}
	.main_newsletter .subj_box {width: 100%; margin-top: 0; text-align: center;}
	.main_newsletter .subj_box .subj {display: inline-block; margin-bottom: 35px; font-size: 28px;}
	.main_newsletter .subj_box .subj::after {width: 10px;}
	.main_newsletter .subj_box .desc {display: none;}
	.main_newsletter .cont_box {max-width: 640px; margin: 0 auto; padding-left: 0; text-align: center;}
	.main_newsletter .cont_box .desc {font-size: 12px;}
	.main_newsletter .cont_box .desc.m {display: block;}
	.main_newsletter .cont_box .desc.w {display: none;}
	.main_newsletter .cont_box .input_row {margin: 13px 0 14px;}
	.main_newsletter .cont_box .input_row input {height: 35px; padding: 0 100px 0 25px; font-size: 12px; border-radius: 17px;}
	.main_newsletter .cont_box .input_row .submit_btn {width: 88px; height: 35px; font-size: 12px; font-family: 'NanumSquare'; border-radius: 17px;}
	.main_newsletter .fm-chk + .checked-i.txt {padding-left: 19px;font-size: 10px; line-height: 14px;}
	.main_newsletter .fm-chk + .checked-i:before {width: 14px; height: 14px;}
	.main_newsletter .fm-chk + .checked-i:after {left: 3px;}
	.main_newsletter .check_row {justify-content: center;}
	.main_newsletter .check_row .fm-item + .fm-item {margin-left: 20px;}
	.main_newsletter .guide_txt {display: none;}
	/* 2022-05-12 newsletter 추가 :: E */
	
	
	.visible-1 + .deco .circle-big .circle { transform:translate(-50%,-50%) scale(0.270880361) rotate(45deg); }
	.visible-1 + .deco .circle-small .circle { transform:translate(-50%,-50%) scale(0.5) rotate(225deg); }
	.visible-2 + .deco .circle-big .circle { transform:translate(-50%,-50%) scale(0.43227991) rotate(135deg); }
	.visible-2 + .deco .circle-small .circle { transform:translate(-50%,-50%) scale(0.247916667) rotate(70deg); }
	.visible-3 + .deco .circle-big .circle { transform:translate(-50%,-50%) scale(0.5) rotate(335deg); }
	.visible-3 + .deco .circle-small .circle { transform:translate(-50%,-50%) scale(0.420833333) rotate(45deg); }
	.visible-1 + .deco .circle-big { margin-left:95px; margin-top:93px; }
	.visible-1 + .deco .circle-small { margin-left:-103px; margin-top:-105px; }
	.visible-2 + .deco .circle-big { margin-top:-245px; }
	.visible-2 + .deco .circle-small { margin-top:-148px; }
	.visible-3 + .deco .circle-big { margin-top:-139px; }
	.visible-3 + .deco .circle-small { margin-top:-139px; }
}

@media all and (max-width: 768px) {
	#section-4.section { background-image:url("../images/main/wll_visual_mo.png"); background-color: #fbf9fa; }
}