.wrap{}


/* 더보기 버튼 */
.main section .more{display:inline-block; vertical-align: top;}
.main section .more a{display:inline-block; vertical-align: top; height: 60px; position:relative;  font-weight:bold; font-size:16px; color: #fff; text-transform: uppercase; line-height: 60px;transition: 0.5s}
.main section .more a::after{content:''; position:absolute; top:26px; right: 3px; width: 6px; height: 6px; border-radius:50%; border:1px solid #fff; transition:0.4s;}
.main section .more .circle_box{}
.main section .more .circle_box i{margin-left: 10px; opacity: 0; transition:0.5s;}
.main section .more .circle_box svg{position:absolute; top: 0; right: -23px; transform:rotate(203deg);}
.main section .more .circle_box svg circle{fill:none; stroke-dasharray: 185; stroke-dashoffset: 185; transition: 0.5s;}

.main section .more.c a{color: #555;}
.main section .more.c a::after{border-color:#555;}

.main section .more:hover a{color: #f77b0b;}
.main section .more:hover a::after{opacity: 0;}
.main section .more:hover .circle_box svg circle{stroke-dashoffset: 22;}
.main section .more:hover .circle_box i{opacity: 1;}

.main section .more.c:hover a{color: #222;}
.main section .more.c:hover a::after{opacity: 0;}


/* 메인 nav */
.scroll_nav{display:none; position:fixed; bottom: 50px; left: 100px; z-index: 50;}
.scroll_nav ul{display:flex;}
.scroll_nav ul li{position:relative;  font-weight:bold; font-size:14px;margin-right: 10px; color: #f37321; text-transform: uppercase; box-sizing:border-box; padding-left: 15px; cursor: pointer; width: auto; transition:0.5s}
.scroll_nav ul li::after{content:''; position:absolute; top: 37%; left: 0; transform:translateY(-50%); width: 6px; height: 6px; box-sizing:border-box; border:1px solid #999; border-radius:50%; transition:0.5s}
.scroll_nav ul li:last-of-type{margin-right: 0;}
.scroll_nav ul li span{display:inline-block; width: 0; overflow: hidden;}

.scroll_nav ul li.on::after{background: #f37321; border-color:#f37321}
.scroll_nav ul li.on span{width: 100%;}

/* 시작 */
.main{position:relative; width: 100%; height: 100vh;}
.main.fix{position:fixed; top: 0; left: 0; z-index: 20;}
.main section{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000;}
.main section .center_box{position:relative; padding: 0 210px; box-sizing:border-box; display:flex; align-items:center; width: 100%; height: 100vh;}
.main section .mv{width: 100%; height: 100vh;}
.main .section01{z-index: 4;}
.main .section01 .slide_wrap{}
.main .section01 .slide_wrap .slide_ctn{}
.main .section01 .slide_wrap .slide_ctn .item{}
.main .section01 .slide_wrap .slide_ctn .item .bg{position:relative; width: 100%; height: 100vh;background-size:cover !important; }
.main .section01 .slide_wrap .slide_ctn .item .bg05{background:url(/img/main/mv01.jpg) 50% 50% no-repeat;}
.main .section01 .slide_wrap .slide_ctn .item .bg06{background:url(/img/main/mv02.jpg) 50% 50% no-repeat;}
.main .section01 .slide_wrap .slide_ctn .item .bg video{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); min-width: 100%; min-height: 100%;}
.main .section01 .slide_wrap .slide_txt{position:absolute; top: calc(50% - 45px); width: 100%; left:0; box-sizing:border-box; padding-left: 100px; transform:translateY(-50%);}
.main .section01 .slide_wrap .tit h2{font-weight:900; font-size:100px; letter-spacing:-0.05em; color: #fff; line-height: 1.1; margin-bottom:10px; text-shadow: 0px 0px 5px #00000059}
.main .section01 .slide_wrap .tit h2 span{font-weight:400; font-size:50px;}
.main .section01 .slide_wrap .tit h2:last-of-type{margin-bottom:0;}
.main .section01 .scroll_down{position:absolute; bottom: 100px; left: 100px; width: 128px; height: 128px; text-align: center; cursor: pointer;}
.main .section01 .scroll_down::after{content:''; position:absolute; top: 0; left: 0; right: 0; bottom: 0; background:url(/img/common/icon_moveTxt.png) 50% 50% no-repeat; animation:rotateTxt 5s infinite linear}
.main .section01 .scroll_down i{line-height: 128px; font-size:24px; color: #fff;}

.main .section02{z-index: 3;}
.main .section02 .slide_wrap{}
.main .section02 .slide_wrap .slide_ctn{}
.main .section02 .slide_wrap .slide_ctn .item{}
.main .section02 .slide_wrap .slide_ctn .item .bg{width: 100%; height: 100vh; background-size:cover !important;}
.main .section02 .slide_wrap .slide_ctn .item .bg01{background:url(/img/main/m_biz01.jpg) 50% 50% no-repeat;}
.main .section02 .slide_wrap .slide_ctn .item .bg02{background:url(/img/main/m_biz02.jpg) 50% 50% no-repeat;}
.main .section02 .slide_wrap .slide_ctn .item .bg03{background:url(/img/main/m_biz03.jpg) 50% 50% no-repeat;}

.main .section02 .slide_wrap .slide_ui{position:absolute; top: 50%; width: 100%; left: 0; padding-left: 210px; box-sizing:border-box; transform:translateY(-50%);}
.main .section02 .slide_wrap .slide_ui .slide_tab{display:flex;}
.main .section02 .slide_wrap .slide_ui .slide_tab li{position:relative;  font-weight:300; font-size:18px; color: #777; margin-right: 40px; transition: color 0.4s; cursor: pointer;}
.main .section02 .slide_wrap .slide_ui .slide_tab li:last-of-type{margin-right: 0;}
.main .section02 .slide_wrap .slide_ui .slide_tab li::before{content:''; position: absolute; top: 9px; right: -23px; width: 5px; height: 5px; border-radius:50%; background: #ccc;}
.main .section02 .slide_wrap .slide_ui .slide_tab li::after{content:''; position:absolute; bottom: 0; left: 0; width: 0; height: 8px; background: #f77b0b; opacity: 0.15; transition:0.4s}
.main .section02 .slide_wrap .slide_ui .slide_tab li:last-of-type::before{display:none; }
.main .section02 .slide_wrap .slide_ui .slide_tab li:hover,
.main .section02 .slide_wrap .slide_ui .slide_tab li.on{font-weight:bold; color: #f77b0b;}
.main .section02 .slide_wrap .slide_ui .slide_tab li:hover::after,
.main .section02 .slide_wrap .slide_ui .slide_tab li.on::after{width: 100%;}
.main .section02 .slide_wrap .slide_ui .slide_txt{margin-top: 32px;}
.main .section02 .slide_wrap .slide_ui .slide_txt .item{}
.main .section02 .slide_wrap .slide_ui .slide_txt .item h2{font-weight:300; font-size:60px; letter-spacing:-0.05em; color: #fff; overflow: hidden;}
.main .section02 .slide_wrap .slide_ui .slide_txt .item h2 span{display:inline-block; vertical-align: top; line-height: 1.4;}
.main .section02 .slide_wrap .slide_ui .slide_txt .item h2 > span.fw{font-weight:500;}
.main .section02 .slide_wrap .slide_ui .slide_txt .item p{font-weight:300; font-size:18px; color: #fff; opacity: 0.4; line-height: 1.7; margin-top: 42px; max-width: 50%;}
.main .section02 .slide_wrap .slide_ui .slide_txt .item .more{margin-top: 100px;}

.main .section03{position:relative; z-index: 2; background: #f4f4f4;}
.main .section03::after{content:''; position:absolute; bottom: -254px; right: -189px; width: 877px; height: 797px; background:url(/img/main/main_bg03.png) 50% 50% no-repeat; background-size:cover; filter:grayscale(1); z-index: -1;}
.main .section03 .left_bg{width: 700px; height: 100vh; position:absolute; top: 0; left: 0; background:url(/img/main/main_bg02.jpg) 50% 50% no-repeat; background-size:cover;}
.main .section03 .left_bg::after{content:''; position:absolute; top: 0; left: 0; width: 0; height: 100%; background: #f4f4f4;}
.main .section03 .center_box .top{display:flex; width: 100%;}
.main .section03 .center_box .top .tit{width: 580px;}
.main .section03 .center_box .top .tit p{ font-weight:500; font-size:16px; color: #f37321; text-transform: uppercase;}
.main .section03 .center_box .top .tit p span{display:inline-block; vertical-align: top;}
.main .section03 .center_box .top .tit h2{font-size:60px; color: #222; margin-top: 20px;}
.main .section03 .center_box .top .tit .more{margin-top: 60px;}
.main .section03 .center_box .top .list{width: calc(100% - 580px); border-top: 1px solid #f77b0b;}
.main .section03 .center_box .top .list .item{display:flex; position:relative; padding: 30px; box-sizing:border-box; border-bottom: 1px solid #cccccc;}
.main .section03 .center_box .top .list .item a{position:absolute; top: 0; left: 0; bottom: 0; right: 0;}
.main .section03 .center_box .top .list .item .txt{width: calc(100% - 100px);} 
.main .section03 .center_box .top .list .item .txt h3{font-weight:bold; font-size:26px; color: #222222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main .section03 .center_box .top .list .item .txt p:not(.date){font-weight:300; font-size:15px; color: #666; margin: 15px 0 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main .section03 .center_box .top .list .item .txt p.date{ font-weight:500; font-size:14px; color: #aaa; letter-spacing:0.05em;}
.main .section03 .center_box .top .list .item .txt p.date i{position:relative; top: 2px; font-size:16px; margin-right: 4px;}
.main .section03 .center_box .top .list .item .more{width: 100px; position:absolute; top: 50%; right: 20px; transform:translateY(-50%); line-height: 57px; font-size:16px; height: 60px; text-align: right;}
.main .section03 .center_box .top .list .item .more .circle_box i{margin-left: 0; margin-right: 23px;}
.main .section03 .center_box .top .list .item .more .circle_box{}
.main .section03 .center_box .top .list .item .more .circle_box svg{right: 0;}

.main .section03 .center_box .top .list .item:hover .more .circle_box svg circle{stroke-dashoffset: 22;}
.main .section03 .center_box .top .list .item:hover .more .circle_box i{opacity: 1; color: #f77b0b;}

.main .section04 .mv{background:url(/img/main/main_bg04.jpg) 50% 50% no-repeat; background-size:cover;}
.main .section04 .center_box{position:absolute; width: 100%; top: 50%; justify-content:center; transform:translateY(-50%);}
.main .section04 .txt{text-align: center;}
.main .section04 .txt p{ font-weight:500; font-size:16px; color: #f37321; text-transform: uppercase;}
.main .section04 .txt p span{display:inline-block; vertical-align: top;}
.main .section04 .txt h2{font-weight:500; font-size:60px; color: #fff; margin-top: 18px;}
.main .section04 .txt h2 span{position:relative; top: -5px; font-family: '02HanwhaR';}
.main .section04 .txt .more{margin-top: 70px;}

/* animation */
.main .section01 .slide_wrap .tit h2{animation:blur 3.5s 0.2s both}
.main .section01 .slide_wrap .slide_ctn .item.slick-active .bg05,
.main .section01 .slide_wrap .slide_ctn .item.slick-active .bg06{animation:zoom 3.5s 0.2s both}
/* .main .section01 .slide_wrap .slide_ctn .item.slick-active .bg{animation:zoom 3.5s 0.2s both} */
.main .section02.active .slide_wrap .slide_ui .slide_tab{animation:fadeUp 1.2s 0.5s both}
.main .section02.active .slide_wrap .slide_ui .slide_txt{animation:fadeUp 1.2s 0.5s both}
.main .section02 .slide_wrap .slide_ui .slide_txt .item.slick-active h2 > span:not(.split){animation:up 0.8s 0.2s both}
.main .section02 .slide_wrap .slide_ui .slide_txt .item.slick-active h2 span span{animation:fadeIn 1.4s 0.2s both}
.main .section02 .slide_wrap .slide_ui .slide_txt .item.slick-active p{animation:fadeUp 0.8s 1s both}
.main .section03.active .center_box .top .tit p span{animation:moveTxt 0.8s 1s both}
.main .section03.active .center_box .top .tit h2{animation:fadeLeft 1.2s 0.9s both}
.main .section03.active .center_box .top .list{animation:fadeRight 1.2s 0.9s both}
.main .section03.active .left_bg::after{width: 100%;}
.main .section03.active .left_bg::after{animation:wLeft 1.2s 0.7s both}
.main .section04.active .txt p span{animation:moveTxt 0.8s 1s both}
.main .section04.active .txt h2{animation:fadeUp 0.8s 1s both}
.main .section04.active .txt .more{animation:fadeUp 0.8s 1s both}

/* 노트북 */
.ratio{}
.ratio .main .section01 .slide_wrap .slide_txt{transform:translateY(-50%) scale(0.72); transform-origin: left; padding-left: 150px;}
.ratio .main .section02 .slide_wrap .slide_ui{transform:translateY(-50%) scale(0.72); transform-origin: left; padding-left: 150px;}
.ratio .main .section03 .center_box .top .tit{transform:scale(0.75);transform-origin: left; padding-left: 74px;}
.ratio .header .header_ui .all_gnb nav > ul > li > a{padding: 20px 40px;}
.ratio .header .header_ui .all_gnb nav > ul > li > ul{top: -8px;}


@keyframes blur {
	0%{filter:blur(5px); opacity: 0;}
	100%{filter:blur(0); opacity: 1;}
}
@keyframes zoom {
	0%{transform:scale(1.15);}
	100%{transform:scale(1);}
}
@keyframes wLeft {
	0%{width:100%}
	100%{width:0}
}
@keyframes fadeIn {
	0%{ opacity: 0;}
	100%{ opacity: 1;}
}
@keyframes fadeUp {
	0%{transform:translateY(80px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}
@keyframes fadeLeft {
	0%{transform:translateX(-80px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}
@keyframes fadeRight {
	0%{transform:translateX(80px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}
@keyframes up {
	0%{transform:translateY(120%);}
	100%{transform:translateY(0);}
}
@keyframes moveTxt {
	0%{transform:translateX(-20px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}

@media screen and (max-width: 1600px){
	.scroll_nav{left: 50px;}

/* 	.main .section01 .slide_wrap .tit{padding-left: 50px;} */
	.main .section01 .slide_wrap .slide_txt{padding-left: 50px;}
	.main .section01 .scroll_down{bottom: 50px; left: 50px;}
	.main .section02 .slide_wrap .slide_ui{padding-left: 50px;}
	
	.main section .center_box{padding: 0 50px;}
	.main .section03 .left_bg{width: 550px;}

}


@media screen and (max-width: 1200px){
	.main{height: auto;}
	.main.fix{position:static;}
	.main section{position:relative;}
	.scroll_nav,
	.main .section01 .scroll_down{display:none !important; }
	.main .section01 .slide_wrap{margin-top: 74px;}
	.main .section01 .slide_wrap .tit h2{font-size:80px;}
	.main .section01 .slide_wrap .tit h2 span{font-size:40px;}
	.main .section01 .slide_wrap .slide_txt{padding-left: 16px; top: 50%;}
	.main .section01 .slide_wrap .slide_ctn .item .bg{height: calc(100vh - 74px);}
	
	.main .section02 .slide_wrap .slide_ui{padding:0 16px;}
	.main .section02 .slide_wrap .slide_ui .slide_txt{margin-top: 20px;}
	.main .section02 .slide_wrap .slide_ui .slide_txt .item h2{font-size:40px;}
	.main .section02 .slide_wrap .slide_ui .slide_txt .item p{margin-top: 20px; max-width: 80%;}
	.main .section02 .slide_wrap .slide_ui .slide_txt .item .more{margin-top: 50px;}
	
	.main .section03::after{bottom: -375px; right: -323px;}
	.main section .center_box{padding: 60px 16px; height: auto;}
	.main .section03 .left_bg{display:none; }
	.main .section03 .center_box .top{flex-wrap:wrap;}
	.main .section03 .center_box .top .tit{width: 100%; margin-bottom:30px;}
	.main .section03 .center_box .top .list{width: 100%;}
	.main .section03 .center_box .top .tit h2{font-size:40px; margin-top: 10px;}
	.main .section03 .center_box .top .tit .more{margin-top: 30px;}
	.main .section03 .center_box .top .list .item .txt p:not(.date){margin: 10px 0 20px;}

	.main .section04 .txt h2{font-size:40px;}
}

@media screen and (max-width: 1000px){
	.main .section01 .slide_wrap .tit h2{font-size:60px;}
	.main .section01 .slide_wrap .tit h2 span{font-size:32px;}
}

@media screen and (max-width: 800px){
	.main .section02 .slide_wrap .slide_ui .slide_txt .item p{font-size:17px; max-width: 100%;}
	.main .section02 .slide_wrap .slide_ui .slide_tab li{font-size:14px;}
	.main .section02 .slide_wrap .slide_ui .slide_txt .item p br{display:none; }
	.main .section02 .slide_wrap .slide_ui .slide_txt .item h2{font-size:29px;}
	.main .section02 .slide_wrap .slide_ui .slide_txt .item h2 br{display:none; }
	.main .section03 .center_box .top .list .item{padding: 20px;}
	.main .section03 .center_box .top .list .item .txt h3{font-size:20px;}

}