@charset "utf-8";
.body-main {position: relative;}
section {position: relative; overflow: hidden;}


/* .newMain-contents section:after {content:''; display:block; clear:both;} */

/* scroll */
.scroll { position: absolute; bottom: 20px; right: 3.2%; width: 28px; height: 60px; z-index: 90; 
	animation: scrollAni 2.0s ease-in-out reverse; animation-iteration-count: infinite; 
}
.fp-viewing-footPage .scroll { display: none; }
 @keyframes scrollAni{
	0%{bottom: 10px;} 
	25%{bottom: 20px;} 
	50%{bottom: 10px;} 
	75%{bottom: 20px;} 
	100%{bottom: 10px;} 
}
@-webkit-keyframes scrollAni{
	0%{bottom: 10px;} 
	25%{bottom: 20px;} 
	50%{bottom: 10px;} 
	75%{bottom: 20px;} 
	100%{bottom: 10px;} 
}
@-moz-keyframes scrollAni{
	0%{bottom: 10px;} 
	25%{bottom: 20px;} 
	50%{bottom: 10px;} 
	75%{bottom: 20px;} 
	100%{bottom: 10px;} 
}


/* 공통 */
.clr01 {color: #e7b541; vertical-align: baseline;}
.clr02 {color: #fff; vertical-align: baseline;}

/* main_title */
.main__title {margin: 0 0 50px 50px;}
.main__title em {font-size: 20px; color: #281513; display: block;}
.main__title h2 {font-size: 50px; color: #231815; position: relative; padding-bottom: 20px; font-weight: 300; margin: 20px 0 0; display: inline-block;}
.main__title h2::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #281513;}
.main__title p {font-size: 20px; color: #7a542c; line-height: 1.3; margin-top: 30px; font-weight: 300;}
.main__title p strong {font-weight: 500;}


/* more */
.main_bnt {display: inline-block; width: 110px; height: 35px; line-height: 35px; position: relative; background: #231815 url(../images/main/bnt_ico.png) center right 20px no-repeat; color: #fff; font-size: 16px; border-radius: 50px; border: none; cursor: pointer; vertical-align: baseline; text-align: left; font-family: "myriad-pro"; }
.main_bnt span{vertical-align: baseline; padding-left: 20px; font-weight: 300;position: absolute; top: -3px;}

@media only screen and (max-width: 1440px){
    .main__title em {font-size: 18px; }
    .main__title h2 {font-size: 45px; }
    .main__title p {font-size: 18px; margin-top: 20px;}

}

@media only screen and (max-width: 1024px){
    .main__title {margin: 0 0 30px 30px;}
    .main__title h2 {font-size: 40px; }
    .main_bnt { font-size: 15px; width: 90px; background: #231815 url(../images/main/bnt_ico.png) center right 15px no-repeat;}
    .main_bnt span{padding-left: 15px; top: -1px;}

}

@media only screen and (max-width: 768px){
    .main__title em {font-size: 16px; }
    .main__title h2 {font-size: 35px; }
    .main__title {margin: 0 0 0 0;}

}

@media only screen and (max-width: 480px){
    .main__title h2 {font-size: 30px; }
    .main__title p br {display: none;}

}

/*Main Visual*/
.main__visual {overflow:hidden; }
.main__visual-item {font-size:0; white-space:nowrap; overflow:hidden; position:relative; height:calc(100vh - 100px); min-height:800px !important; max-height:980px !important;}
.main__visual-inner {display:block; width:100%; margin: 0 auto 0; padding: 15% 20px; white-space:normal; position:relative; z-index:10; word-break:keep-all; vertical-align:middle; max-width: 1400px;}

.main__visual-copy {position: absolute; top: 50%; left: 0; color: #231815; z-index: 2;}
.main__visual-copy .border { border: 2px solid #231815; border-radius: 50px; padding: 8px 36px; display: inline-block;}
.main__visual-item.nth-2 .main__visual-copy .border { padding: 8px 15px; }
.main__visual-copy em {font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: 3px;}
.main__visual-copy > h2 {font-size: 55px; font-weight: 300; line-height: 1.1; margin-top: 30px;}
.main__visual-copy > p {font-size:18px; font-weight:400; line-height:1.3; margin-top: 20px;} 
.main__visual-copy .main_bnt {margin-top: 40px;}

.main__visual-item > .bg {position:absolute; height:100%; width:100%; top:0; left:0; overflow:hidden; z-index:-1; }
.main__visual-item > .bg .main__visual-img {background-size:cover; background-position: center; background-repeat: no-repeat; transition:all 10s ease-in-out; transform:scale(1) skew(0.001deg); position: relative;}
.main__visual-item.slick-active > .bg .main__visual-img.is-scale {transform:scale(1.2) skew(0.001deg); transition:all 10s ease-in-out;}

.main__visual-item.nth-1 .main__visual-img{background-image:url('../images/main/main_visual01.jpg');}
.main__visual-item.nth-2 .main__visual-img{background-image:url('../images/main/main_visual02.jpg');}
.main__visual-item.nth-3 .main__visual-img{background-image:url('../images/main/main_visual03.jpg');}
.main__visual-item.nth-4 .main__visual-img{background-image:url('../images/main/main_visual04.jpg');}
.main__visual-item.nth-5 .main__visual-img{background-image:url('../images/main/main_visual05.jpg');}
.main__visual-img,
.main__visual-img img{width:100%; height:100%;}

.main__visual-control {margin-top: 30px; display: flex; align-items: center;}
.main__visual-dots {font-size: 16px; font-weight: 700; color: #fff;}
.main__visual-dots span {vertical-align: baseline;}
.main__visual-dots span+span {padding-left: 320px; position: relative;}
.main__visual-dots span+span::before {display: block; content: ""; width: 300px; height: 1px; background: rgba(0, 0, 0, 0.15); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.main__visual-dots span+span::after {display: block; content: ""; width: 0; height: 2px; background: #000; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 6s linear; z-index: 1; }
.main__visual-item.slick-active .main__visual-dots span+span::after {animation-duration:7s; animation-iteration-count: initial; animation-name:visual-dots;}

@keyframes visual-dots {
    0% {width: 0;}
    100% {width: 300px;}
}


.main__visual-control .prev {display: block; margin-right: 10px; width: 8px; height: 14px; background: url('../images/common/arrow01.png') no-repeat center;}
.main__visual-control .next {display: block; margin-left: 10px; width: 8px; height: 14px; background: url('../images/common/arrow01.png') no-repeat center; transform: rotate(180deg);}

.main__visual-scroll {position: absolute; bottom: 60px; left: 0; transform: rotate(-90deg); transform-origin: 0 0;}
.main__visual-scroll span {font-family: 'Montserrat'; font-size: 14px; font-weight: 300; color: #fff; padding-right: 210px; position: relative;}
.main__visual-scroll span::after {display: block; content: ""; width: 190px; height: 1px; background: #fff; position: absolute; top: 50%; right: 0; transform: translateY(-50%); animation-duration:5s; animation-iteration-count: infinite; animation-name:visual-dots;}

@media only screen and (max-width: 1440px) {
    .main__visual-item::before {left: auto; right: 30%;}
    .main__visual-item::after {right: auto; left: 30%;}
    .main__visual-inner {margin: 0 20px; width: auto; padding: 20% 20px;}
    .main__visual-copy > h2 {font-size: 50px;}
}

@media only screen and (max-width: 1240px) {
    .main__visual-item {min-height: 700px !important; height: 100%;}
    .main__visual-inner {padding: 23% 20px;}
    .main__visual-copy .border { padding: 5px 30px;}
    .main__visual-item.nth-2 .main__visual-copy .border { padding: 5px 12px;}
    .main__visual-copy em {font-size: 15px; }
    .main__visual-copy > h2 {font-size: 45px;}
    .main__visual-copy > p {margin-top: 10px;}
    .main__visual-control {margin-top: 60px;}
}

@media only screen and (max-width: 1024px) {
    .main__visual-copy > p {width: 70%;}
    .main__visual-item {min-height: 600px !important;}
    .main__visual-control {margin-top: 40px;}
    .main__visual-dots {font-weight: 500;}

    .main__visual-scroll span {font-size: 12px;}
}

@media only screen and (max-width: 768px) {
    /* .main__visual-item {min-height: 500px !important;} */
    .main__visual-inner {padding: 30% 20px;}
    /* .main__visual-copy {text-align: center; left: 50%; transform: translateX(-50%); width: 100%;} */
    .main__visual-copy > h2 {font-size: 40px;}

    /* .main__visual-control {justify-content: center;} */
}

@media only screen and (max-width: 640px) {
    .main__visual-copy > h2 {font-size: 30px;}
    .main__visual-copy > p {font-size: 16px;}
    .main__visual-scroll {bottom: 20px;}
}

@media only screen and (max-width: 480px) {
    .main__visual-inner {padding: 40% 20px;}
    .main__visual-copy .border { padding: 5px 8px;}
    .main__visual-item.nth-2 .main__visual-copy .border {padding: 5px 8px;}
    .main__visual-copy em {letter-spacing: 0; font-size: 14px;  }
    .main__visual-copy > p {width: 100%;}
    .main__visual-scroll {display: none;}
    .main__visual-dots span+span {padding-left: 160px; }
    .main__visual-dots span+span::before { width: 150px; }

    @keyframes visual-dots {
        0% {width: 0;}
        100% {width: 150px;}
    }
}

.dots .slick-dots {font-size: 0; text-align: center; margin: 0 40px;}
.dots .slick-dots li {display: inline-block;}
.dots .slick-dots li+li {margin-left: 10px;}
.dots .slick-dots li button {border: 0; font-size: 0; background: transparent; width: 15px; height: 3px; background: #281513; opacity: 0.15;}
.dots .slick-dots li.slick-active button { opacity: 1;}




/* main__brand */
.main__brand { width: 100%; position: relative; padding-top: 80px;}
.main__brand::before { content: ""; width: 50%; height: 100%; display: block; background: url(../images/main/sec03_bg01.jpg) no-repeat top center; background-size: cover; position: absolute; top: 0; z-index: -1;}
.main__brand::after { content: ""; width: 50%; height: 100%; display: block; background: url(../images/main/sec03_bg02.jpg) no-repeat bottom left; background-size: cover; position: absolute; top:0; right: 0; z-index: -1;}
.main__brand {position: relative;}
.br_bnt.left { position: absolute; bottom: 0; right: 50%;}
.br_bnt.right { position: absolute; bottom: 0; right: 0;}
.br_bnt {width: 65px; height: 65px; display: block; background: #231815 url(../images/main/bnt_ico02.png) center no-repeat; }
.main__brand-wrap {display: flex;}
.main__brand .brand_bg { width: 50%; display: flex; flex-flow: column-reverse; margin-bottom: 500px;}
.main__brand .main__title { margin: 0 0 0 90px;}
.main__brand .main__title h2 { font-size: 40px; font-weight: 700;}
.main__brand .main__title h2::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #281513; opacity: 0.1;}
.main__brand .main__title p {margin-top: 10px; text-shadow: 0px 0px 15px #dac8ba;}
.main__brand .brand_right .main__title h2::before {content: ''; position: absolute; left: 0; bottom: 0; width: 82%; height: 1px; background: #281513; opacity: 0.25;}

@media only screen and (max-width: 1440px){
    .main__brand .main__title h2 { font-size: 36px; }

}

@media only screen and (max-width: 1024px){

}

@media only screen and (max-width: 940px){
    .main__brand .main__title { margin: 0 0 0 40px;}
    .main__brand-wrap {flex-direction: column;}
    .main__brand .brand_bg {width: 100%; margin-bottom: 300px;}
    .main__brand { position: relative; }
    .main__brand::before { content: ""; width: 100%; height: 70%; display: block; background: url(../images/main/sec03_bg01.jpg) no-repeat center; background-size: cover; position: absolute; top: 0; z-index: -1;}
    .main__brand::after { content: ""; width: 100%; height: 50%; display: block; background: url(../images/main/sec03_bg02.jpg) no-repeat top left; background-size: cover; position: absolute; top: auto; bottom:0; right: 0; z-index: -1;}
    .br_bnt.left { position: absolute; bottom: 50%; right: 0;}
}

@media only screen and (max-width: 768px){
    .main__brand .main__title { margin: 0 0 0 0;}
    .main__brand .main__title h2 { font-size: 34px; }

}

@media only screen and (max-width: 480px){
    .main__brand .main__title h2 { font-size: 30px; }
    .main__brand .main__title h2 img { width: 200px; }


}


/* main__company */
.main__company {padding: 80px 0 60px;}

.main__company-list {margin-top: 50px; font-size: 0; text-align: center; display: flex; position: relative;}
.main__company-list .list-item {display: inline-block; width: 25%; text-align: center;position: relative; padding: 100px 0 60px;}
.main__company-list .list-item::after {content: ""; width: 90%; height: 90%; border: 1px solid #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition:all 0.3s ease-in-out;}
.main__company-list .list-item i {display: block; transition: all 0.3s ease-in-out; position: relative; }
.main__company-list .list-item.nth-1,
.main__company-list .list-item.nth-3 {background: #f1efec;}
.main__company-list .list-item.nth-2,
.main__company-list .list-item.nth-4 {background: #e8e3df;}
.main__company-list .list-item .main_bnt { margin-top: 20px; z-index: 100; transition:all 0.3s ease-in-out; opacity: 0; }
.main__company-list .list-item:hover .main_bnt { opacity: 1; }
.main__company-list .list-item:hover::after { opacity: 1;}

.main__company-list .list-item i img { position: relative;}

.main__company-list .list-item p {font-size: 25px; font-weight: 500; color: #7a542c; margin-top: 50px; position: relative; line-height: 1.3;}
.main__company-list .list-item p strong {font-size: 16px; font-weight: 300; color: #7a542c; margin-bottom: 10px; display: block;}
.main__company-list .list-item.nth-1 p::after {display: none;}

.main__company-list .list-item:hover .main_bnt {opacity: 1; transition:all 0.3s ease-in-out; }
.main__company-list .list-item:hover p,
.main__company-list .list-item:hover p strong {color: #231815;}

@media only screen and (max-width: 1440px){

}

@media only screen and (max-width: 1024px){
    .main__company-list .list-item p {font-size: 22px; margin-top: 30px;}
    .main__company-list .list-item p strong {font-size: 15px; }
    
    .main__company-list .list-item p {font-size: 20px; margin-top: 30px;}
    .main__company-list {flex-wrap: wrap;}
    .main__company-list .list-item {width: 50%;}
    .main__company-list .list-item.nth-1 {order: 1;}
    .main__company-list .list-item.nth-2 {order: 2;}
    .main__company-list .list-item.nth-3 {order: 4;}
    .main__company-list .list-item.nth-4 {order: 3;}
    .main__company-list .list-item {padding: 60px 0 40px;}
}

@media only screen and (max-width: 540px){
    .main__company {padding: 60px 0 30px;}

}
@media only screen and (max-width: 540px){
    .main__company-list .list-item {width: 100%;}
    .main__company-list .list-item.nth-3 {order: 3;}
    .main__company-list .list-item.nth-4 {order: 4;}
}
@media only screen and (max-width: 480px){

}


/* main-promotion */
.main-promotion{padding:60px 0 120px 0;}
.main-promotion-list{font-size:0;}
.main-promotion-list>li{width:50%; height: 470px; display:inline-block; vertical-align:top;}
.main-promotion-videoWrap{position:relative;}
.main-promotion-videoWrap:after{content:""; display:block; padding-bottom:56.25%;}
.main-promotion-videoWrap>iframe{width:100%; position:absolute; left:0; top:0; width:100%; height:100%;}
.main-promotion-textWrap{padding-right:160px;}
.main-promotion-textWrap .link__wrap{margin-left:50px;}
.main-promotion-tit{font-size:48px; display:block;}
.main-promotion-stit{font-size:0.583em; font-weight:700; display:block;}
.main-promotion-kor{margin-bottom:23px;}
.main-promotion-ktit{font-size:24px; margin-bottom:14px; display:block;}
.main-promotion-text{font-size:16px; line-height:1.5em;}
.main-promotion-link{
    font-size:16px; text-align:center; display:block; padding:18px 0 17px 0; width:160px; font-family:"Montserrat"; font-weight:400; background:#fff; border:1px solid #222; box-sizing:border-box; color:#222;
}
.main-promotion-link:hover{color:#222;}
@media all and (max-width:1440px){
    .main-promotion-list>li{ height: auto;}
    .main-promotion-textWrap {padding-right: 0;}

}
@media all and (max-width:1024px){
    .main-promotion{padding:60px 0 100px 0;}
    .main-promotion-tit{font-size:32px;}
    .main-promotion-ktit{font-size:22px; margin-bottom:12px;}
    .main-promotion-textWrap .link__wrap {margin-left: 30px;}
    .main-promotion-list>li {width: 100%;}
    .main-promotion-textWrap {margin-bottom: 50px;}
    .vod__language-link { width: 50px; height: 30px; background-size: 50px 30px; margin-right: 10px;}
}
@media all and (max-width:768px){
    .main-promotion{padding:30px 0 60px 0;}
    .main-promotion-list>li{width:100%; display:block;}
    .main-promotion-tit{font-size:28px;}
    .main-promotion-ktit{font-size:18px;}
    .main-promotion-text,
    .main-promotion-link{font-size:14px;}
    .main-promotion-link{width:130px;}
    .main-promotion-textWrap .link__wrap {margin-left: 0;}
}


/* 홍보동영상부분 */
.vod__language {margin-bottom: 50px;}
.vod__language-link {display:inline-block; margin-right:1.85%; width:60px; height:40px; background-repeat:no-repeat; background-position:50% 50%; background-size:60px 40px; box-sizing: border-box; }
.vod__language-link.nth-1 {background-image:url('../images/main/ico_vod01.png');}
.vod__language-link.nth-2 {background-image:url('../images/main/ico_vod02.png');}
.vod__language-link.nth-3 {background-image:url('../images/main/ico_vod03.png');}
.vod__language-link.nth-4 {background-image:url('../images/main/ico_vod04.png');}

.vod__language-link:hover.nth-1,
.vod__language-link.is-active.nth-1 {background-image:url('../images/main/ico_vod01_on.png');}
.vod__language-link:hover.nth-2,
.vod__language-link.is-active.nth-2 {background-image:url('../images/main/ico_vod02_on.png');}
.vod__language-link:hover.nth-3,
.vod__language-link.is-active.nth-3 {background-image:url('../images/main/ico_vod03_on.png');}
.vod__language-link:hover.nth-4,
.vod__language-link.is-active.nth-4 {background-image:url('../images/main/ico_vod04_on.png');}

@media only screen and (max-width: 1024px){
    .vod__language-link {width:45px; height:30px; background-size:45px 30px;}
}
@media only screen and (max-width: 768px){
    .vod__language { margin: 20px 0;}

}




/* business */
.main__business {padding: 70px 0 120px;}
.main__business-wrap {position: relative; margin-top: 30px;}
.main__business-wrap .main__business-list {width: 45%; padding-right: 5%; position: relative;}
.main__business-list .list-item  { position: relative; padding-bottom: 100px; padding-right: 50px;
    /* background: linear-gradient(to bottom, #dccbb9 425px, #fff 50%); */
}
.main__business-list .list-item::before { content: ''; width: 90%; height: 425px; background: #dccbb9; position: absolute; top: 0; left: 0; border-top-left-radius: 40px; border-bottom-right-radius: 40px;}
.main__business-list .list-item::after {content: ""; position: absolute; bottom: 0; right: 0; width: 224px; height: 224px; z-index: 5; background: url(../images/main/product_pt.png) center no-repeat; animation: product_point 28s linear infinite;}
@keyframes product_point {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(-360deg)}
}

.main__business-list .list-item {position: relative; }
.main__business-list .list-item .img {width: 100%; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); z-index: 100;}
.main__business-list .list-item img {width: 90%; position: relative; z-index: 10;}
.main__business-list .list-item p {font-size: 23px; color: #000; line-height: 1.4; text-transform: uppercase;}
.main__business-list .list-item p+p {margin-top: 10px;}


.main__business-wrap .main__business-img {width: 100%; position: absolute; top: 0; left: 45%;}
.main__business-wrap .main__business-img-item {position: relative; margin-right: 30px; padding-bottom: 20px;  overflow: hidden; text-align: center;}
.main__business-wrap .main__business-img-item .img-box {position: relative; border-top-left-radius: 40px; border-bottom-right-radius: 40px; overflow: hidden; background: #f1f1f1;}
.main__business-wrap .main__business-img-item p { margin-top: 30px; font-size: 20px;}



.main__business-list .text3 {display: inline-block;  padding: 40px; position: absolute; z-index: 300;} 
.main__business-list .text3 h2 {font-size: 25px; font-weight: 400; color: #231815; margin-bottom: 20px;}
.main__business-list .text3 p {font-size: 20px; font-weight: 300; color: #9f7c5c; line-height: 1.4;}


.main__business-nav { position: absolute; top: -30%; left: 45%; display: flex; align-items: center;}
.main__business-nav .ar {display: inline-block; width: 51px; height: 47px; cursor: pointer;}
.main__business-nav .prev {background: url('../images/main/main__product-arrow01.png') no-repeat left center; background-size: contain; transition:all 0.3s ease-in-out;}
.main__business-nav .next {background: url('../images/main/main__product-arrow01.png') no-repeat left center; background-size: contain; transition:all 0.3s ease-in-out; transform: rotate(180deg);}
.main__business-nav .prev:hover {background: url('../images/main/main__product-arrow02.png') no-repeat left center; background-size: contain; }
.main__business-nav .next:hover {background: url('../images/main/main__product-arrow02.png') no-repeat left center; background-size: contain;  transform: rotate(180deg);}

@media only screen and (max-width: 1240px) {
    .main__business-wrap .main__business-list {width: 55%;}
    .main__business-wrap .main__business-img {left: 55%;}
    .main__business-nav {  left: 55%; }

    .main__business-list .list-item::after { width: 190px; height: 190px; background-size: contain; }


    .main__business-list .text3 h2 {font-size: 22px; margin-bottom: 20px;}
    .main__business-list .text3 p {font-size: 18px;}

}
@media only screen and (max-width: 1024px) {
    .main__business-wrap .main__business-list {width: 60%;}

}
@media only screen and (max-width: 768px) {
    .main__business-wrap .main__business-list {width: 80%;  margin: 0 auto; padding-right: 0;}
    .main__business-wrap .main__business-img {opacity: 0;}
    .main__business-nav { top:auto; bottom: -10%; left: 50%; transform: translateX(-50%);}
    .main__business-nav .ar {width: 36px; height: 30px;}
    .dots .slick-dots {margin: 0 20px; display: flex;}
    .dots .slick-dots li button {width: 12px; height: 2px;}
    .main__business-list .list-item::after { width: 150px; height: 150px;}
    .main__business-list .text3 h2 {font-size: 20px; margin-bottom: 15px;}
    .main__business-list .text3 p {font-size: 16px;}


}
@media only screen and (max-width: 640px) {
    .main__business-wrap .main__business-list {width: 100%;}
}
@media only screen and (max-width: 540px) {

    .main__business-list .list-item::before {height: 350px;}
    .main__business-wrap .main__business-img-item {height: 410px;}
}
@media only screen and (max-width:450px) {
    .dots .slick-dots { margin: 0 10px;}
    .main__business-list .list-item::before {height: 320px;}
    .main__business-wrap .main__business-img-item {height: 380px;}
}