@charset "utf-8";

body,input,select,textarea,button{letter-spacing: 0.8;}

/*-------------------------------------------------------------------
	@ Layout
-------------------------------------------------------------------*/
#wrap{position: relative; left: 50%; width: 1920px; max-width: 1920px; margin-left: -960px;}

/* header */
header{display: flex; align-items: center; justify-content: space-between; position: absolute; left: 50%; width: 1600px; height: 100px; margin-left: -800px; z-index: 1100;}
header h1{display: block; width: 219px; height: 46px; background: url(../../images/logo.svg) no-repeat; text-indent: -9999em; transition: background 0.5s ease;}
.lang{display: flex; align-items: center; justify-content: flex-end; position: fixed; left: 50%; top: 0; width: 1600px; height: 100px; margin-left: -800px; z-index: 1200;}
.lang.off{display: none;}
#google_translate_element{display: flex; align-items: center; width: 120px; height: 30px; padding-left: 40px; background: url('../../images/google.png') left center no-repeat; box-sizing: border-box;}
#google_translate_element .skiptranslate{font-size: 0;}
#google_translate_element .skiptranslate > span{display: none;}
#google_translate_element .skiptranslate select{width: 80px; height: 30px; background: url('../../images/select_arw.png') right center no-repeat; font-size: 14px; color: #222;}
#google_translate_element .skiptranslate select.on{color: #fff; background-image: url('../../images/select_arw_w.png');}
#google_translate_element .skiptranslate select option{color: #222;}

/* footer */
footer{padding: 58px 0 45px 160px; background: url('../../images/bg_footer.png') center right 100px no-repeat;}
footer button{display: block; margin-top: 30px; background: none; color: #222; font-family: 'Pretendard'; font-size: 18px; font-weight: 700; line-height: 150%; letter-spacing: -0.54px;}
footer p{color: #555; font-family: 'Pretendard'; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.48px;}
footer p a{color: #555; vertical-align: top;}

/*-------------------------------------------------------------------
	@ Pages
-------------------------------------------------------------------*/
/* intro */
.intro{position: relative; height: 960px; overflow: hidden;}
.intro p{position: absolute; left: 0; top: 150px; width: 100%; font-family: "cooper-black-std"; color: #222; font-size: 55px; line-height: 100%; text-align: center; z-index: 10;}
.intro p strong{color: #BD2F26;}
.intro .img{position: absolute; left: 50%; bottom: 0; width: 1600px; height: 600px; transform: translateX(-50%); overflow: hidden; border-right:1px solid #fff;}
.intro .img img{position: absolute; left: 50%; top: -140px; width: 1920px; height: 960px; transform: translateX(-50%);}
.intro .img img.blur{opacity: 0; z-index: 10;}

/* highlights */
.highlights{width: 100%; margin-top: -1460px;}
.highlights ul{display: flex; flex-wrap: wrap;}
.highlights ul > li{width: 960px; height: 960px; padding: 110px 0 0 160px; box-sizing: border-box;}
.highlights ul > li h2{display: block; height: 112px; color: #fff; font-family: "cooper-black-std"; font-size: 40px; line-height: 140%; letter-spacing: -0.8px;}
.highlights ul > li .img{margin-top: 50px;}
.highlights ul > li p{margin-top: 40px; color: #222; font-size: 24px; line-height: 160%; color: #fff;}
.highlights ul > li:nth-of-type(1){background: #FFFCF4;}
.highlights ul > li:nth-of-type(1) h2{color: #6C2E21;}
.highlights ul > li:nth-of-type(1) p{color: #222;}
.highlights ul > li:nth-of-type(2){background: url(../../images/bg_highlight.png) right bottom no-repeat #A7907A;}
.highlights ul > li:nth-of-type(3){background: url(../../images/bg_highlight.png) right bottom no-repeat #6C2E21;}
.highlights ul > li:nth-of-type(4){background: #F2EDE2;}
.highlights ul > li:nth-of-type(4) h2{color: #6C2E21;}
.highlights ul > li:nth-of-type(4) p{color: #222;}

/* video */
.video{width: 100%; font-size: 0;}
.video iframe{width: 100%; aspect-ratio: 560 / 315;}

/* signature */
.signature{padding: 150px 0; background: url('../../images/bg_signature.png') left 2090px no-repeat #BE2E26; overflow: hidden;}
.signature h2{display: block; color: #F2EDE2; font-family: "cooper-black-std"; font-size: 70px; line-height: 140%; letter-spacing: -1.4px; text-align: center;}
.signature .visual{margin-top: 50px; text-align: center;}
.signature h3{display: block; margin-top: 100px; color: #F2EDE2; font-family: "cooper-black-std"; font-size: 38px; line-height: 140%; letter-spacing: -1.1px; text-align: center;}
.signature .service{position: relative; width: 1600px; margin: 86px auto 0;}
.signature .service ul li{color: #F2EDE2; font-size: 24px; line-height: 130%; white-space: nowrap;}
.signature .service ul li span{font-size: 20px;}
.signature .service ul li:nth-of-type(1){position: absolute; left: 46px; top: 42px;}
.signature .service ul li:nth-of-type(2){position: absolute; left: 320px; top: 12px;}
.signature .service ul li:nth-of-type(3){position: absolute; left: 498px; top: 205px;}
.signature .service ul li:nth-of-type(4){position: absolute; left: 546px; top: 337px;}
.signature .service ul li:nth-of-type(5){position: absolute; left: 504px; top: 475px;}
.signature .service ul li:nth-of-type(6){position: absolute; left: 460px; top: 619px;}
.signature .service ul li:nth-of-type(7){position: absolute; left: 43px; top: 730px;}
.signature .service ul li:nth-of-type(8){position: absolute; left: 293px; top: 762px;}
.signature .service ul li:nth-of-type(9){position: absolute; left: 928px; top: 425px;}
.signature .service ul li:nth-of-type(10){position: absolute; left: 910px; top: 755px;}
.signature .service ul li:nth-of-type(11){position: absolute; left: 1144px; top: 730px;}
.signature .menu-list{position: relative; padding-left: 160px; margin-top: 250px;}
.signature .menu-list .swiper-slide{width: 700px; margin-right: 40px;}
.signature .menu-list .swiper-slide .info{margin-top: 45px;}
.signature .menu-list .swiper-slide .info strong{display: block; color: #FFF; font-family: "cooper-black-std"; font-size: 34px; line-height: 100%; letter-spacing: -0.68px;}
.signature .menu-list .swiper-slide .info p{margin-top: 25px; color: #F2EDE2; font-size: 24px; line-height: 150%;}
.signature .menu-list .swiper-button-prev{left: 40px; top: 193px; width: 64px; height: 64px; margin: 0; border-radius: 100%; box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.20);}
.signature .menu-list .swiper-button-prev::after{display: none;}
.signature .menu-list .swiper-button-next{right: 40px; top: 193px; width: 64px; height: 64px; margin: 0; border-radius: 100%; box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.20);}
.signature .menu-list .swiper-button-next::after{display: none;}

/* brand */
.brand{position: relative; height: 3050px; background: url('../../images/bg_brand.jpg') center / cover no-repeat; background-attachment: fixed;}
.brand .title{position: sticky; left: 0; top: 0; padding: 140px 0 700px 160px;}
.brand .title p{color: #FFF; font-size: 24px; line-height: 160%;}
.brand .title strong{display: block; margin-top: 25px; color: #FFF; font-family: "cooper-black-std"; font-size: 70px; line-height: 140%;}
.brand .ob1{position: absolute; right: 160px; top: 700px;}
.brand .ob2{position: absolute; left: 160px; top: 1200px;}
.brand .ob3{position: absolute; right: 160px; top: 1700px;}
.brand .ob4{position: absolute; left: 160px; top: 2100px;}
.brand .ob5{position: absolute; right: 160px; top: 2600px;}

/* history */
.history{position: relative; height: 1778px; padding-top: 134px; background: url('../../images/bg_history.jpg') center top no-repeat; box-sizing: border-box;}
.history h2{display: block; color: #FFF; text-align: center; font-family: "cooper-black-std"; font-size: 50px; line-height: 130%;}
.history h2 strong{color: #FFF2BE; font-weight: 400;}
.history p{margin-top: 20px; color: #FFF; text-align: center; font-size: 24px; line-height: 160%;}
.history .list{width: 1600px; margin: 100px auto 0;}
.history .list > li{position: relative; width: 50%;}
.history .list > li::after{position: absolute; top: 40px; width: 1px; height: calc(100% - 20px); background: #fff; content: "";}
.history .list > li strong{display: block; position: relative; padding: 0 55px; color: #FFF; font-family: "cooper-black-std"; font-size: 50px; line-height: 100%;}
.history .list > li strong::after{position: absolute; top: calc(50% + 4px); width: 23px; height: 23px; border: 4px solid #fff; border-radius: 100%; background: #020404; transform: translateY(-50%); box-sizing: border-box; content: "";}
.history .list > li ul{padding: 0 55px; margin-top: 25px;}
.history .list > li ul li{position: relative; padding-left: 25px; color: #FFF; font-size: 24px; line-height: 160%;}
.history .list > li ul li::after{position: absolute; left: 0; top: 0; font-size: 24px; line-height: 160%; color: #fff; content: "·";}
.history .list > li:nth-child(odd){margin-left: 50%;}
.history .list > li:nth-child(odd)::after{left: 0;}
.history .list > li:nth-child(odd) strong::after{left: -11px;}
.history .list > li:nth-child(even){text-align: right;}
.history .list > li:nth-child(even)::after{right: -1px;}
.history .list > li:nth-child(even) strong::after{right: -12px;}
.history .list > li:nth-child(even) ul{display: inline-block;}
.history .list > li:nth-child(even) ul li{text-align: left;}
.history .list > li:nth-of-type(1){height: 290px;}

/* why */
.why{padding: 126px 0 150px; background: #F2EDE2;}
.why h2{display: block; color: #6C2E21; font-family: "cooper-black-std"; font-size: 70px; line-height: 140%; text-align: center;}
.why .list{width: 1600px; margin: 60px auto 0; border-top: 1px solid #000;}
.why .list li{display: flex; justify-content: space-between; align-items: center; padding: 50px; border-bottom: 1px solid #000; transform: translateY(150px); opacity: 0; transition: all 0.8s ease;}
.why .list li.on{transform: translateY(0); opacity: 1;}
.why .list li .info h3{display: block; color: #6C2E21; font-family: "cooper-black-std"; font-size: 34px; font-weight: 400; line-height: 140%;}
.why .list li .info p{margin-top: 17px; color: #222; font-size: 24px; line-height: 160%;}
.why .list li:nth-child(even){justify-content: flex-start; padding-right: 0;}
.why .list li:nth-child(even) .info{order: 2; margin-left: 47px;}
.why .list li:nth-child(even) .img{order: 1;}

/* global */
.global{position: relative; padding: 126px 0 150px; background: url('../../images/bg_global.jpg') center top no-repeat #a7907a;}
.global h2{display: block; color: #fff; font-family: "cooper-black-std"; font-size: 70px; line-height: 140%; text-align: center;}
.global h2:nth-of-type(2){margin-top: 1148px;}
.global .arw1{position: absolute; left:479px; top:591px; transform-origin: right bottom; animation:pang 2.5s infinite ease-in-out;}
.global .arw2{position: absolute; left:1083px; top:404px; transform-origin: left bottom; animation:pang2 2.5s infinite ease-in-out;}
.global .arw3{position: absolute; left:587px; top:932px; transform-origin: right bottom; animation:pang 2.5s infinite ease-in-out;}
.global .arw4{position: absolute; left:1184px; top:712px; transform-origin: left bottom; animation:pang2 2.5s infinite ease-in-out;}
.global .arw5{position: absolute; left:1044px; top:1104px; transform-origin: left top; animation:pang3 2.5s infinite ease-in-out;}
.global .list{display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; width: 1600px; margin: 60px auto 0;}
.global .list > li{width: 780px; height: 600px; padding: 40px 30px 0 30px; background: #fff; box-sizing: border-box;}
.global .list > li .info{margin-top: 30px;}
.global .list > li .info h3{display: block; color: #6C2E21; font-family: "cooper-black-std"; font-size: 34px; font-weight: 400; line-height: 140%;}
.global .list > li .info p{margin-top: 17px; color: #222; font-size: 24px; line-height: 160%;}
@keyframes pang{
	0%{transform:scale(0) rotate(20deg); opacity: 1;}
	15%{transform:scale(1) rotate(0); opacity: 1;}
	60%{transform:scale(1); opacity: 1;}
	75%{transform:scale(1); opacity: 0;}
	100%{transform:scale(1); opacity: 0;}
}
@keyframes pang2{
	0%{transform:scale(0) rotate(-20deg); opacity: 1;}
	15%{transform:scale(1) rotate(0); opacity: 1;}
	60%{transform:scale(1); opacity: 1;}
	75%{transform:scale(1); opacity: 0;}
	100%{transform:scale(1); opacity: 0;}
}
@keyframes pang3{
	0%{transform:scale(0) rotate(10deg); opacity: 1;}
	15%{transform:scale(1) rotate(0); opacity: 1;}
	60%{transform:scale(1); opacity: 1;}
	75%{transform:scale(1); opacity: 0;}
	100%{transform:scale(1); opacity: 0;}
}

/* process */
.process{padding: 126px 0 120px; margin: 0 auto; background: #F2EDE2;}
.process h2{display: block; color: #6C2E21; font-family: "cooper-black-std"; font-size: 70px; font-weight: 400; line-height: 100%; text-align: center;}
.process ol{display: flex; flex-wrap: wrap; gap: 35px 0; width: 1430px; margin: 72px auto 0;}
.process ol > li{position: relative; width: 33.333%; padding-top: 250px; text-align: center;}
.process ol > li::after{position: absolute; right: -20px; top: 105px; width: 40px; height: 40px; background: url('../../images/process_arw.png') no-repeat; content: "";}
.process ol > li:nth-of-type(3)::after,
.process ol > li:nth-of-type(6)::after{display: none;}
.process ol > li .no{display: block; margin-top: 25px; color: #6C2E21; font-family: "cooper-black-std"; font-size: 30px; font-weight: 400;}
.process ol > li strong{display: block; color: #222; text-align: center; font-size: 24px; font-weight: 700; line-height: 140%;}
.process ol > li p{margin-top: 20px; color: #666; text-align: center; font-size: 13px; line-height: 150%; letter-spacing: 0.5px;}
.process ol > li:nth-of-type(1){background: url('../../images/process1.png') center top no-repeat;}
.process ol > li:nth-of-type(2){background: url('../../images/process2.png') center top no-repeat;}
.process ol > li:nth-of-type(3){background: url('../../images/process3.png') center top no-repeat;}
.process ol > li:nth-of-type(4){background: url('../../images/process4.png') center top no-repeat;}
.process ol > li:nth-of-type(5){background: url('../../images/process5.png') center top no-repeat;}
.process ol > li:nth-of-type(6){background: url('../../images/process6.png') center top no-repeat;}

/* qna */
.qna{padding: 126px 0 160px; background: #A7907A;}
.qna h2{display: block; color: #fff; font-family: "cooper-black-std"; font-size: 70px; font-weight: 400; line-height: 100%; text-align: center;}
.qna .list{display: flex; justify-content: space-between; width: 1600px; margin: 50px auto 0;}
.qna .list > li{width: 500px; height: 550px; padding: 40px 0 0 50px; background: #fff; box-sizing: border-box;}
.qna .list > li .no{display: block; margin-left: -10px; color: #A7907A; font-family: "cooper-black-std"; font-size: 80px; font-weight: 400; line-height: 100%; opacity: 0.3;}
.qna .list > li h3{display: block; margin-top: 28px; color: #525252; font-family: "cooper-black-std"; font-size: 32px; font-weight: 400; line-height: 140%;}
.qna .list > li p{position: relative; margin-top: 42px; padding-top: 40px; color: #666; font-size: 24px; font-weight: 400; line-height: 150%;}
.qna .list > li p::after{position: absolute; left: 0; top: 0; width: 400px; height: 1px; background: #D7D7D7; content: "";}

/* contact */
.contact{padding: 140px 0 130px; background: #414141;}
.contact h2{display: block; color: #fff; font-family: "cooper-black-std"; font-size: 70px; font-weight: 400; line-height: 100%; text-align: center;}
.contact p{margin-top: 10px; color: #FFF; text-align: center; font-size: 24px; line-height: 150%;}
.contact .form{width: 1000px; margin: 60px auto 0;}
.contact .form .row{display: flex; justify-content: space-between; margin-top: 34px;}
.contact .form .group{width: 460px;}
.contact .form .group label{display: block; margin-bottom: 10px; color: #FFF; font-family: 'Pretendard'; font-size: 20px; line-height: 100%;}
.contact .form .group input[type=text],
.contact .form .group input[type=email],
.contact .form .group input[type=password]{width: 100%; border-bottom: 1px solid #6b6b6b; background: none; color: #FFF; font-family: 'Pretendard'; font-size: 18px; line-height: 40px; font-weight: 200; caret-color: #fff;}
.contact .form .group textarea{width: 100%; height: 75px; margin-top: 12px; border-bottom: 1px solid #6b6b6b; background: none; color: #FFF; font-family: 'Pretendard'; font-size: 18px; line-height: 26px; font-weight: 200; caret-color: #fff;}
.contact .form .full{margin-top: 34px;}
.contact .form .full .group{width: 100%;}
.contact .form .bottom{display: flex; justify-content: space-between; margin-top: 20px;}
.contact .form .bottom .privacy{display: flex; align-items: center; font-size: 18px; color: #fff; line-height: 25px;}
.contact .form .bottom .privacy .btn-privacy{margin-left: 15px; background: none; font-size: 18px; color: #fff; line-height: 25px; text-decoration: underline; text-underline-offset: 3px;}
.contact .form .bottom .agree{display: flex; align-items: center;}
.contact .form .bottom .agree input[type="radio"]{display: block; position: absolute; overflow: hidden; height: 1px; border: 0; width: 1px; clip: rect(1px, 1px, 1px, 1px);}
.contact .form .bottom .agree input[type="radio"] + label{display: inline-block; position: relative; padding-left: 35px; margin-left: 15px; font-family: 'Pretendard'; font-size: 18px; line-height: 25px; color: #fff; cursor: pointer;}
.contact .form .bottom .agree input[type="radio"] + label:before{position: absolute; top: 0; left: 0; width: 25px; height: 25px; background: url('../../images/radio.png') center / 25px auto no-repeat; cursor: pointer; box-sizing: border-box; content: "";}
.contact .form .bottom .agree input[type="radio"]:checked + label:before{background: url('../../images/radio_checked.png') center / 25px auto no-repeat;}
.contact .form .btn-submit{display: block; width: 300px; height: 80px; margin: 60px auto 0; background: #222; color: #FFF; text-align: center; font-family: "cooper-black-std"; font-size: 26px; font-weight: 400; line-height: 100%; letter-spacing: -0.52px;}

/* pop */
.pop{display: none; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1200;}
.pop.on{display: flex;}
.pop > div{position: relative; width: 1200px; height: 800px; padding: 75px 75px 0 75px; background: #fff; box-sizing: border-box;}
.pop .btn-close{position: absolute; right: 20px; top: 20px; width: 50px; height: 50px; background: url('../../images/ico_close.svg') center no-repeat; text-indent: -9999em;}
.pop .privacy h3{display: block; color: #525252; font-family: "Cooper Black"; font-size: 34px; font-weight: 400; line-height: 140%;}
.pop .privacy .cont{padding-top: 40px; margin-top: 40px; border-top: 1px solid #D7D7D7; color: #666; font-size: 18px; line-height: 150%;}
.pop .privacy .cont ol li{padding-left: 20px; text-indent: -20px;}
.pop .privacy .cont ol li + li{margin-top: 25px;}