@charset "utf-8";

/* aos custorm */
[data-aos="motion_zoom_left"] {transform: scale(1.1) !important; transform-origin: 0 0 !important;} 
[data-aos="motion_zoom_left"].aos-animate {transform: scale(1) !important; transition-duration:2s !important}

[data-aos="motion_slide_up"] {transform: translateY(500px) !important;} 
[data-aos="motion_slide_up"].aos-animate {transform: translateY(0)!important;}

#wrap {min-width:1300px;}
#container.main {margin-top: 90px;}
section {position:relative}
.sec1 {z-index:10; width:1200px; margin:0 auto}
.sec1 .main_slider {overflow:hidden; position:relative; width:100%; height:657px; font-size:0; white-space:nowrap; margin:0 auto}
.sec1:before {content:''; position:absolute; right:100%; bottom:0; display:block; width:100%; height:340px; background:#fff}
.sec1 .main_slider .slick-list {overflow:hidden; width:1200px; height:657px}
.sec1 .main_slider .items {position:relative; display:inline-block; outline:0}
.sec1 .btn_arrow {z-index:10; position:absolute; top:0; width:138px; height:100%; font-size:0; text-indent:-999px; background:url(../img/main/slide_arrow.png) right 280px no-repeat; outline:0;}
.sec1 .btn_prev {left:-138px; transform: rotate(180deg); background-position:right 350px;} 
.sec1 .btn_next {left:auto; right:-138px;}

.sec1 .main_slider_copy {position:absolute; left:-120px; bottom:0; width:582px; height:340px;}
.sec1 .main_slider_copy .copy_box {z-index:10; position:absolute; left:0; top:0; width:540px;}
.sec1 .main_slider_copy .copy_box .items {position:relative; opacity:0; display:inline-block; width:540px; height:340px;}
.sec1 .main_slider_copy .copy_box .items:first-child {opacity:1;}
.sec1 .main_slider_copy .copy_box .items .copy {overflow:hidden; width:100%; height:340px; padding-top:50px; padding-right:42px;}
.sec1 .main_slider_copy .copy_box .items .copy .tit {color:#000; font-family:'RobotoB'; font-family:'NotoSansB'; font-size:54px; line-height:70px}
.sec1 .main_slider_copy .copy_box .items .copy .sub {color:#000; font-family:'NotoSansL'; font-size:18px; line-height:30px; margin-top:20px}
.sec1 .main_slider_copy .copy_box .btn_more {opacity:0; position:absolute; right:-40px; bottom:55px; display:block; width:81px; height:81px; font-size:0; text-indent:-999px; background:url(../img/main/sec1_btn_more.png) no-repeat;}
.sec1 .main_slider_copy .copy_box.aos-animate .btn_more {opacity:0; animation:sec1Show 0.5s forwards ease; animation-delay:0.9s}
@keyframes sec1Show {
    from {opacity:0}
    to {opacity:1;}
}
.sec1 .main_slider_copy .bg_box {position:relative; width:540px; height:100%; background:#fff}

.sec1 .slide_count {position:absolute; right:-84px; top:280px; font-family:"RobotoL"; font-size:18px;}
.sec1 .slide_count .count {font-family:"RobotoB";}

.sec2 {z-index:1; margin-top:-337px; padding:533px 0 225px;} 
.sec2:before {content:''; position:absolute; left:0; top:0; display:block; width:100%; height:858px; background:#f0f0f0}
.sec2 .prd_list {width:100%; font-size:0; text-align:center;}
.sec2 .prd_list li {position:relative; display:inline-block; width:380px; margin:0 24px;}
.sec2 .prd_list li:nth-child(1) {z-index:3}
.sec2 .prd_list li:nth-child(2) {z-index:2}
.sec2 .prd_list li:nth-child(3) {z-index:1}
.sec2 .prd_list li a .icon_more {position:absolute; right:0; bottom:0; width:64px; height:64px; background:url(../img/main/sec2_btn_more.jpg) no-repeat}
.sec2 .prd_list li .more_box {opacity:0;z-index:10;position:absolute;right:-48px;bottom:-86px;width:393px;height: 260px;text-align:left;padding:26px;background:#fff;box-shadow:10px 20px 20px #ddd;transition:all 0.5s ease;transform: translateX(-100px);}
.sec2 .prd_list li .more_box dt {color:#000; font-family:'NotoSansB'; font-size:24px;}
.sec2 .prd_list li .more_box dt span {color:#b10904;font-size:12px;vertical-align:top;margin-top: 5px;display: inline-block;margin-right: 10px;}
.sec2 .prd_list li .more_box dd {overflow:hidden; height:85px; font-family:'NotoSansL'; font-size:14px; line-height:22px; letter-spacing: -0.35px;}
.sec2 .prd_list li .more_box dd .btn_more {position:absolute; right:27px; bottom:15px; color:#000; font-family:'NotoSansL'; font-size:12px; text-decoration: underline;}
.sec2 .prd_list li:after {z-index:1; content:''; display:none; position:absolute; right:-15px; top:16px; width:15px; height:534px; background:#fff;}
.sec2 .prd_list li:hover .more_box {opacity:1; transform: translateX(0px);}
.sec2 .prd_list li:hover:after {display:block;}

.sec3 {overflow:hidden; position:relative; left:50%; width:1920px; height:1200px; margin-left:-960px}

.sec3 .sec3_slider_nav {position:absolute; left:0; top:50%; width:100%; text-align:center; margin-top:-15px; transform: rotate(90deg);}
.sec3 .sec3_slider_nav .btn_arrow {display:inline-block; width:15px; height:25px; font-size:0; vertical-align:middle; background:url(../img/main/slide_arrow.png) no-repeat}
.sec3 .sec3_slider_nav .btn_arrow.btn_prev {transform: rotate(180deg);}
.sec3 .sec3_slider_nav ul {display:inline-block; vertical-align:middle; margin:0 20px}
.sec3 .sec3_slider_nav ul li {display:inline-block; vertical-align:middle; margin:0 60px}
.sec3 .sec3_slider_nav ul li a {color:#b3b3b3; font-family:'RobotoB'; font-size:30px;}
.sec3 .sec3_slider_nav ul li a.on {color:#000}

.sec3 .sec3_left {float:left; width:50%; height:100%; padding-top:255px; background:#f4ebe4}
.sec3 .sec3_left .slider_box {overflow:hidden; position:relative; width:500px; height:500px; margin:0 auto;}
.sec3 .sec3_left .tit {overflow:hidden; position:relative; width:500px; height:25px; font-family:'NotoSansM'; font-size:16px; margin:0 auto 20px;}
.sec3 .sec3_left .tit p {display:block; position:absolute; left:0; bottom:-100%; transition:all 0.5s ease;}
.sec3 .sec3_left .tit p.on {bottom:0}
.sec3 .sec3_left .info {overflow:hidden; position:relative; width:500px; height:55px; font-family:'NotoSansL'; font-size:18px; letter-spacing:-0.35px; margin:20px auto 0}
.sec3 .sec3_left .info p {position:absolute; left:-100%; top:0; width:500px;}
.sec3 .sec3_left .info p:first-child {left:0;}

.sec3 .sec3_left .btn_more {width:500px; margin:34px auto 0}
.sec3 .sec3_left .btn_more a {display:none;}
.sec3 .sec3_left .btn_more a.on {display:block;}


.sec3 .sec3_right {float:right; width:50%; height:100%; padding-top:211px; background:#f0f0f0} 
.sec3 .sec3_right .slider_box {overflow:hidden; position:relative; width:580px; height:780px; margin:0 auto;}
.sec3 .sec3_right .name {width:580px; color:#000; font-family:'NotoSansM'; font-size:16px; margin:23px auto;}
.sec3 .sec3_right .name p {display:none;}
.sec3 .sec3_right .name p.on {display:block;}


/* 1. 좌측슬라이드 */
.sec3 .sec3_slider1 {overflow:hidden; width:500px; height:500px; /* transform: scale(1.5); */}
.sec3 .sec3_slider1 .items {z-index:1; position:absolute; left:0; top:0; width:500px; height:500px; transition:all 1.5s ease; transform: scale(1.3)} 
.sec3 .sec3_slider1 .items.on {z-index:10; position:relative; animation: sec3slide1_1 1.5s ease-in-out; transform: scale(1) translateX(0%);}
.sec3 .sec3_slider1 .items.first.on {animation: none; transform: scale(1.2)}
.sec3 .sec3_slider1 .items:after {content:''; display:block; position:absolute; left:0; top:0; width:0%; height:100%; background:#000;}
.sec3 .sec3_slider1 .items.on:after {animation: sec3slide1_2 1.5s ease-in-out;}
.sec3 .sec3_slider1 .items.first.on:after {animation:none}

/* 자바스크립트 setimeout시간과 맞춰줘야함 */
@keyframes sec3slide1_1 {
    0% {transform: scale(1.3) translateX(-100%);}
    100% {transform: scale(1) translateX(0%);} 
}
@keyframes sec3slide1_2 {
    0% {width:0%;}
    50% {width:100%;}
    100% {width:0%; left:100%}
}

/* 2. 우측슬라이드 */
.sec3 .sec3_slider2 {overflow:hidden; width:580px; height:780px;}
.sec3 .sec3_slider2 .items {z-index:1; overflow:hidden; position:absolute; left:0; top:0; width:580px; height:780px; transition:all 1.5s ease; transform: scale(1.3); transform-origin: center bottom;}
.sec3 .sec3_slider2 .items.on {z-index:10; position:absolute; top:auto; bottom:0; animation: sec3slide2 1.2s ease-in-out; transform: scale(1) translateY(0%);}
.sec3 .sec3_slider2 .items.first.on {animation: none;}
.sec3 .sec3_slider2 .items p {position:absolute; left:0; top:80px; width:100%; color:#fff; font-family:"RobotoB"; font-size:60px; text-align:center;}

/* 자바스크립트 setimeout시간과 맞춰줘야함 */
@keyframes sec3slide2 {
    0% {height:0;}
    100% {height:100%;} 
}

.sec4 {padding:155px 0 80px}
.sec4 .title {font-family:"RobotoB"; font-size:48px; text-align:center;}
.sec4 .sec4_slider {position:relative; width:1284px; font-size:0; margin:85px auto 0;}
.sec4 .sec4_slider .btn_arrow {position:absolute; top:0; width:92px; height:100%; font-size:0; text-indent:-9999px; background:url(../img/main/slide_arrow.png) right center no-repeat; outline:0;}
.sec4 .sec4_slider .btn_arrow.btn_prev {left:-92px; transform: rotate(180deg);}
.sec4 .sec4_slider .btn_arrow.btn_next {right:-92px;}
.sec4 .sec4_slider ul {height:585px; margin-left:-10px;}
.sec4 .sec4_slider ul li {position:relative; display:inline-block; margin:0 0 10px 10px;}
.sec4 .sec4_slider ul li p {font-family:"NotoSansM"; color:#000; font-size:14px;}
/* .sec4 .sec4_slider ul li img {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);} */ /* 이미지중앙정렬 */
.sec4 .sec4_slider ul li:nth-child(1) p {position:absolute; right:0; top:-25px; text-align:right; margin-bottom:5px}
.sec4 .sec4_slider ul li:nth-child(2) p {position:absolute; left:-5px; top:0; transform: rotate(90deg); transform-origin: 0 0;}
.sec4 .sec4_slider ul li:nth-child(8) p {position:absolute; right:0; top:-25px;}

.sec4 .sec4_slider ul li:nth-child(1) {position:absolute; left:-10px; top:205px; width:180px; height:180px;}
.sec4 .sec4_slider ul li:nth-child(2) {width:700px; height:385px; margin-left:200px;}
.sec4 .sec4_slider ul li:nth-child(3) {width:180px; height:180px; vertical-align: top; margin-right:180px}
.sec4 .sec4_slider ul li:nth-child(4) {width:180px; height:180px;}
.sec4 .sec4_slider ul li:nth-child(5) {width:180px; height:180px;}
.sec4 .sec4_slider ul li:nth-child(6) {width:180px; height:180px;}
.sec4 .sec4_slider ul li:nth-child(7) {width:320px; height:180px;}
.sec4 .sec4_slider ul li:nth-child(8) {position:absolute; right:0; bottom:0; width:385px; height:385px;}

.sec4 .sec4_slider ul li a {overflow:hidden; position:relative; display:block; width:0; height:0; opacity:0;  background:#000}
.sec4 .sec4_slider ul li.on a {opacity:1; transition: all 0.5s ease-in-out;}
.sec4 .sec4_slider ul li:nth-child(1).on a {width:180px; height:180px; transition-delay: 0.2s}
.sec4 .sec4_slider ul li:nth-child(2).on a {width:700px; height:385px;}
.sec4 .sec4_slider ul li:nth-child(3).on a {width:180px; height:180px; transition-delay: 0.2s}
.sec4 .sec4_slider ul li:nth-child(4).on a {width:180px; height:180px; transition-delay: 0.4s}
.sec4 .sec4_slider ul li:nth-child(5).on a {width:180px; height:180px; transition-delay: 0.4s}
.sec4 .sec4_slider ul li:nth-child(6).on a {width:180px; height:180px; transition-delay: 0.4s}
.sec4 .sec4_slider ul li:nth-child(7).on a {width:320px; height:180px; transition-delay: 0.4s}
.sec4 .sec4_slider ul li:nth-child(8).on a {width:385px; height:385px; transition-delay: 0.5s}

.sec4 .sec4_slider ul li:nth-child(1) img {min-width:105%; height:180px;}
.sec4 .sec4_slider ul li:nth-child(2) img {width:105%;}
.sec4 .sec4_slider ul li:nth-child(3) img {min-width:105%; height:180px;}
.sec4 .sec4_slider ul li:nth-child(4) img {min-width:105%; height:180px;}
.sec4 .sec4_slider ul li:nth-child(5) img {min-width:105%; height:180px;}
.sec4 .sec4_slider ul li:nth-child(6) img {min-width:105%; height:180px;}
.sec4 .sec4_slider ul li:nth-child(7) img {width:105%;}
.sec4 .sec4_slider ul li:nth-child(8) img {min-width:105%; height:385px;}



/* [s] swiper */
/* .swiper-container .swiper-wrapper {width:100%;}
.swiper-container .swiper-wrapper .swiper-slide {width:100%; height:500px; background:#ddd} */
/* [e] swiper */

/* [s] layer_popup */
#dimLayer {z-index:100; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(95, 39, 39, 0.8);}
.layer_popup {z-index:101; display:none; position:absolute; left:50%; top:50%; border:1px solid #ddd; background:#fff; transform: translateX(-50%)}

.layer_popup .layer_tit {width:100%; font-size:0;}
.layer_popup .layer_cont {min-height:300px; padding:10px}
.layer_popup .btn_close {position:absolute; right:0; top:0; display:block; width:50px; height:50px; text-indent:-999px; font-size:0; transition : all 0.3s ease;}
.layer_popup .btn_close:before,
.layer_popup .btn_close:after {content:''; display:block; position:absolute; left:0; top:50%; width:100%; height:2px; background:#333}
.layer_popup .btn_close:before {transform:rotate(45deg);}
.layer_popup .btn_close:after {transform:rotate(-45deg);}
.layer_popup .btn_close:hover {transform:rotate(90deg)}
.layer_popup .btn_close:hover {transform:rotate(90deg)}
/* [e] layer_popup */

#layer1 {width:auto}
#layer1 .info_box {padding:0 50px}

/*en*/
/* html[lang="en"] .sec2 .prd_list li .more_box {height: 234px;} */