@charset "UTF-8";

/* style */
.font_st2{font-family: 'kanit';}
.btn_st1{font-family: 'kanit'; border-bottom: 1px solid transparent; transition: .2s all; font-size: 1.4rem; color: white; font-weight: 400; display: flex; align-items: center; gap: 6px; margin-top: 1.8rem;}
.btn_st1:hover{border-bottom: 1px solid #ffffff;}
.btn_st1.font_black:hover{border-bottom: 1px solid black;}

.tit_st1{margin-bottom: 5rem;}
.tit_st1 span{font-size: 1.5rem;}
.tit_st1 h2{font-size: 8rem; color: black; text-transform: uppercase; font-weight: 500; letter-spacing: -4px; line-height: 1;}

.tit_st1.tit_sub{margin-bottom: 0;}
.tit_st1.tit_sub span{color: #E2E2E2;}
.tit_st1.tit_sub h2{font-size: 5.4rem; font-weight: 600; color: white; margin-top: 1rem; line-height: 1.2;}

.tit_st2{width: 100%; padding-bottom: 1.5rem;margin-bottom: 1.5rem; border-bottom: 1px solid #e2e2e2;}
.tit_st2 span{color: #999;}
.tit_st2 p{font-size: 2.8rem; font-weight: 600; color: black; letter-spacing: -1px;}

.tab_btn{font-size: 1.4rem; color: #999; padding: .6rem 1.2rem; border-radius: 200px; font-weight: 500;}
.tab_btn.on{color: white; font-weight: 600; background-color: black;}

.scroll_on {opacity: 0;transition: all 1s ease-out;}
.scroll_on.active {opacity: 1 !important;transform: translate(0, 0) !important;}
.scroll_on.type_bottom {transform: translate(0, 100px);}
.scroll_on.type_left {transform: translate(-50px, 0);}
.scroll_on.type_right {transform: translate(50px, 0);}

.checkbox_st3{text-align: left;}
.checkbox_st3 input[type="checkbox"]{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
.checkbox_st3 input[type="checkbox"] + label{width: 100%; padding: 0rem 2rem; position: relative; border-radius: 4px; display: inline-block; cursor: pointer; box-sizing: border-box;}
.checkbox_st3 input[type="checkbox"]+ label div{color: var(--grayDark);}
.checkbox_st3 input[type="checkbox"]:checked + label div{color: black;}
.checkbox_st3 input[type="checkbox"] + label:before{content: "";position: absolute;left: 0;top: 50%; transform: translateY(-50%); width: 20px;height: 20px;text-align: center;background:white; border: 1px solid #b8b8b8; border-radius: 5px; box-sizing: border-box;}
.checkbox_st3 input[type="checkbox"]:checked + label:after {content: "";position: absolute;left: 0;top: 50%; transform: translateY(-50%);width: 20px;height: 20px;background: url('../../images/common/checkbox_check.png');background-repeat: no-repeat; background-position: center center;border-radius: 5px; border: none; background-size: cover;}
.checkbox_st3 input[type="checkbox"] + label span{font-size: 1.5rem; font-weight: 500; color: #333; font-size: 1.2rem; line-height: 34px;}
.checkbox_st3 input[type="checkbox"]:checked + label span{font-weight: 500; color: black;}

.input_wrap{padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 1.5rem;}
.input_wrap li{display: flex; flex-direction: column; width: 100%;}
.input_wrap li label{font-size: 1.5rem; font-weight: 500; color: #333;}
.input_wrap li input[type="text"],input[type="email"],input[type="tel"]{ border-width: 0 0 1px 0; width: 100%;}
.input_wrap li input[type="text"]:focus{border-width: 0 0 1px 0 !important; box-shadow: none !important;}
.input_wrap .radi_wrap{display: flex; justify-content: space-between; margin-top: .6rem;}
.input_wrap .radi_box{width: calc((100% - 12px)/ 2);}
.input_wrap .radi_box input[type="radio"] + label:before{float: none; margin-top: 0 !important;}

@media screen and (max-width: 768px){
  .tit_st1 h2{font-size: 6rem;}
  .tit_st1{margin-bottom: 4rem;}
  .tit_st1.tit_sub h2{font-size: 3.8rem;}
}
/* style */

/* header */
.header_wrap{transition: .5s all; z-index: 100; position: fixed; top: 0;left: 0; width: 100%; display: flex; padding: 1.5rem; left: 50%; transform: translateX(-50%);}
.header_wrap .wrapper{display: flex; max-width: 1660px; width: 100%; margin: 0 auto; justify-content: space-between;}
.logo a{color: white; font-size: 1.8rem; font-weight: 800; letter-spacing: -1px;}
.header_wrap .gnb_wrap , .gnb_m{display: flex; align-items: center; gap: 1.8rem; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.header_wrap .gnb_wrap a, .gnb_m a{font-weight: 500; font-size: 1.2rem; color: white;}
.header_wrap .gnb_wrap a:hover, .gnb_m a:hover{font-weight: 800;}
.header_wrap .logo a{display: flex; align-items: center; gap: 14px; font-size: 1.4rem; font-weight: 600;}
.header_wrap .logo img{width: 65px; margin-top: -6px;}

.header_wrap .btn_wrap{display: none;}
.gnb_m{display: flex;transition: .5s all; background-color: white; height: 0; padding: 0; overflow: hidden; flex-direction: column;position: fixed;z-index: 100;transform: translate(-50%, 0);top: 74px;background: white;width: 100%;}
.gnb_m a{color: black;}
.gnb_m.on{height: 202px; padding: 1.5rem;}

.menu_b, .logo_b{display: none;}
.header_wrap.scroll-bgon,.header_wrap.menu-bgon {background-color: white; border-bottom: 1px solid #e2e2e2;}  
.header_wrap.scroll-bgon .gnb_wrap a , .header_wrap.menu-bgon .gnb_wrap a, .header_wrap.menu-bgon .logo a, .header_wrap.scroll-bgon .logo a{color: black;}

.header_wrap.scroll-bgon .menu_b, .header_wrap.menu-bgon .menu_b, .header_wrap.menu-bgon .logo .logo_b, .header_wrap.scroll-bgon .logo .logo_b{display: block;}
.header_wrap.scroll-bgon .menu_w, .header_wrap.menu-bgon .menu_w, .header_wrap.menu-bgon .logo .logo_w, .header_wrap.scroll-bgon .logo .logo_w{display: none;}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@media screen and (max-width: 768px){
  .header_wrap .btn_wrap{display: block;}
    .gnb_wrap{display: none !important;}
    .header_wrap{height: 92px;}
}
/* header */

/* q_menu */
.header_right{max-width: 120px; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 100; padding: 1.2rem; background-color: white; border: 1px solid #d2d2d2; border-radius: 12px 0 0 12px;}
.header_right .q_wrap{gap: 6px; display: flex; flex-direction: column; align-items: center;}
.header_right .q_wrap li{height: calc(100% / 4); padding: .4rem;}
.header_right .q_wrap a{color: #666; display: flex; flex-direction: column; text-align: center; align-items: center;}
.header_right .q_wrap a:hover{font-weight: 600; color: black;}

@media screen and (max-width: 768px){
    .header_right{max-width: 60px;}
    .header_right .q_wrap li{width: 40px;}
    .header_right .q_wrap a{font-size: .8rem;}
}
/* q_menu */

/* footer */
.footer_wrap{width: 100%;padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
.footer_wrap .logo{width: 100%; margin-bottom: 1rem;}
.footer_wrap .logo a{color: black;}
.footer_wrap > div{width: 50%;}
.footer_txt li{text-transform: uppercase;}
.footer_txt li b{margin-right: .4rem; color: #999;}
.footer_txt li span{color: #666;}
.footer_sns p{color: #999;}
.sns{display: flex; gap: 10px; margin-bottom: 1rem;}
.sns a{width: 60px; height: 60px; border-radius: 50%; background: #F2F2F2; display: flex; align-items: center; justify-content: center;} 
.footer_sns .email{font-size: 1.5rem; color:#666; font-weight: 500; margin-bottom: .4rem;}

@media screen and (max-width: 768px){
    .footer_wrap{flex-direction: column;}
    .footer_wrap > div{width: 100%;}
    .footer_sns{margin-top: 4rem;}
    .sns a{width: 50px; height: 50px; padding: .4rem;}
    .sns a img{width: 100%; height: 100%; object-fit: contain;}
}
/* footer */


/* main_vis */
.main_visual{position: relative; height: 100vh;}
.main_txt{width: 100%; position: absolute;text-align: center;  z-index: 5; left: 50%; top: 52%; transform: translate(-50%, -50%);}
.main_txt .mt_logo{ opacity: 0; transform: translateY(-20px); transition-delay: .4s; transition: 1s all; margin-top: .2rem;}

 
.main_txt .mt_logo img{width: 220px;  top: 0;}
.main_txt .mt_logo p{font-size: 1.2rem; font-weight: 600; color: #2f4500; background-color: #efffcd; width: fit-content; margin: .4rem auto 1.2rem; border-radius: 200px; padding: .2rem 1.5rem;}
.main_txt .mt_logo div{overflow:hidden;}
.main_txt .mt_logo strong{top: 100px;}
/*.main_txt .mt_logo img.on{transform:translateY(-100px);}
.main_txt .mt_logo strong{transform:translateY(-100px); transition: transform 3s;}
.main_txt .mt_logo strong.on{transform:translateY(0);}*/

.main_txt h1{opacity: 0; transform: translateY(-20px); transition-delay: .4s; transition: 1s all; font-size:  5.4rem; font-weight: 600; letter-spacing: -2px; line-height: 1.2;}
.main_txt p{color: #e2e2e2; opacity: 0; transform: translateY(-20px); transition: 1s all; transition-delay: .4s;}

.main_swiper{overflow: hidden; height: 100%;}
.main_swiper .swiper-slide{width: 100% !important;}
.main_swiper .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}
.arrow_wrap{position: relative; height: 140px; width: 140px; margin: 5.4rem auto 0;}
.arrow_box{width: 140px; height: 140px; animation: rotate 6s infinite linear; background-image: url("../../images/main/typo_cir_w.png"); background-repeat: no-repeat; background-size: contain;background-position: center;}
.arrow_wrap img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main_txt h1.on, .main_txt p.on, .main_txt .mt_logo.on{opacity: 1;transform: translateY(0);}


@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  50%{
	opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out2 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.swiper-slide img {
    transform: scale(1);
    transition: transform 4s ease-in-out;
  }
  
  .swiper-slide-active img {
    transform: scale(1.1);
  }

  
@media screen and (max-width: 1200px){
    .main_txt h1{font-size: 4.5rem;}
    .main_txt > p{margin-top: 2rem !important;}
    .arrow_wrap, .arrow_box{width: 120px; height: 120px;}
}
@media screen and (max-width: 768px){
    .main_txt{text-align: left; padding: 1.5rem; padding-right: 2.5rem; top: 60%;}
    .main_txt .mt_logo img{width: 150px;}
    .main_txt .mt_logo{display: flex; flex-direction: column; align-items: center; width: fit-content;}
    .main_txt .mt_logo p{margin: 1rem 0 1rem;}
    .arrow_wrap{margin: 5rem 0;}
    .main_visual .arrow_wrap img{width: 12px;}
}
@media screen and (max-width: 500px){
  .main_txt h1{font-size: 2.5rem;}
  .arrow_wrap, .arrow_box{width: 80px; height: 80px;}
}
/* main_vis */

/* history */
.his_list li{padding: 3rem; position: relative; display: flex; align-items: flex-start; justify-content: space-between;}
.his_list li::before{content: "";width: 0; height: 1px; transition: 1s all; transition-delay: .5s; background-color: #999; position: absolute; left: 0;top: 0;}
.his_list li.active::before{width: 100%;}

.his_list .year{width: 30%; font-size: 4rem; font-weight: 500; color: #333; letter-spacing: -2px; line-height: 1;}
.his_list .his_wrap{width: 70%;}
.his_list .his{display: flex; align-items: flex-start;}
.his_list .his:nth-child(2), .his_list .his:nth-child(3){margin-top: 1rem;}
.his_list .his span{font-size: 1.5rem;}
.his_list .month{width: 20%;}
.his_list .his_txt{width: 100%; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start;}

@media screen and (max-width: 768px){
  .his_list li, .his_list .his{flex-wrap: wrap; gap: 1rem;}
  .his_list .year{font-size: 3.5rem;}
  .his_list .year, .his_list .his_wrap{width: 100%;}
  .his_list .his{gap: 6px;}
}
/* history */

/* contact */
.contact_wrap{display: flex;justify-content: space-between;}
.contact_wrap > div{width: 50%; display: flex; flex-direction: column;}
.contact_wrap .contact_l{justify-content: space-between;}
.contact_wrap .arrow_wrap{margin: 0;}
.contact_wrap .arrow_box{background-image: url("../../images/main/typo_cir_b.png");}
/*.contact_wrap .contact_r .btn_wrap{display: none;}*/
.contact_wrap .contact_r .btn_st1:hover{border-color: black;}
.agree_box{padding: 1rem; border: 1px solid #d1d1d1; border-radius: 2px;}

@media screen and (max-width: 1200px){
  .contact_wrap{flex-wrap: wrap;}
  .contact_wrap > div{width: 100%;}
  .contact_wrap .arrow_wrap img{width: 24px;}
  .contact_wrap .contact_l{overflow: hidden; flex-wrap: wrap; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid #e2e2e2; flex-direction: row;align-items: flex-end;justify-content: space-between;}
  .contact_wrap .contact_l .tit_st1{margin-bottom: 0;}
  .contact_wrap .contact_l .btn_wrap{display: none;}
  .contact_wrap .input_wrap{padding: 0;}
  .contact_wrap .contact_r .btn_wrap{padding-left: 0 !important; margin-top: 1rem;}
}

@media screen and (max-width: 768px){
  .contact_wrap .arrow_wrap img{width: 18px;}
  .contact_wrap .input_wrap .radi_wrap{flex-wrap: wrap; gap: 12px;}
  .contact_wrap .input_wrap .radi_wrap .radi_box{width: 100%;}
  .contact_wrap .input_wrap .radi_wrap .radi_box label{height: 60px;}
}

@media screen and (max-width: 500px){
  .contact_wrap .arrow_wrap{margin-top: 1.5rem;}
}
/* contact */

/* banner */
.banner_wrap{display: flex; width: 100%; justify-content: space-between;}
.banner_wrap .banner{width: 50%; height: 350px; padding-left: 6rem; background-repeat: no-repeat; background-size: cover; background-position: 20% center; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.banner_wrap .banner p{color: white; font-weight: 500; font-size: 2rem;}
.banner_wrap .banner > span{color: #e2e2e2; margin-top: .6rem;}

.banner_wrap .online{background-image: url("../../images/main/online_img.png");}
.banner_wrap .offline{background-image: url("../../images/main/offline_img.png");}

@media screen and (max-width: 1200px){
    .banner_wrap{flex-wrap: wrap;}
    .banner_wrap .banner{width: 100%; height: 200px; padding-left: 3rem; padding-right: 3rem;}
}
@media screen and (max-width: 768px){
  .banner_wrap .banner{background-position: 50% center;}
}
/* banner */


/* sub_visual */
#sub{overflow: hidden;}
.sub_visual{width: 100%; height: 460px; display: flex; align-items: center; justify-content: center; padding: 7rem 0; background-repeat: no-repeat; background-position: center; background-size: cover;}

.sub01{background-image: url("../../images/sub/sub_visual01.png");}
.sub02{background-image: url("../../images/sub/sub_visual02.png");}
.sub03{background-image: url("../../images/sub/sub_visual03.png");}

@media screen and (max-width: 1200px){
  .sub_visual{height: 380px;}
}
/* sub_visual */

/* about */
.about_box{margin-bottom: 7rem; display: flex; justify-content: space-between; align-items: center;}
.about_box > div{width: calc((100% - 40px)/ 2);}
.about_box .img_box{display: flex; align-items: flex-end;height: 420px; padding: 3rem; background-repeat: no-repeat; background-position: center; background-size: cover;}
.about_box .img_box .arrow_wrap{margin: 0;}
.about_box .txt_box p{font-size: 2rem; font-weight: 600; color: black; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #e2e2e2;}

.about01 .img_box{background-image: url("../../images/sub/sub_img01.png");}
.about02 .img_box{background-image: url("../../images/sub/sub_img02.png");}
.about03 .img_box{background-image: url("../../images/sub/sub_img03.png");}
.about04 .img_box{background-image: url("../../images/sub/sub_img04.png");}
.about05 .img_box{background-image: url("../../images/sub/sub_img05.png");}

.about02 .img_box, .about04 .img_box{justify-content: flex-end;}
.about02 .txt_box, .about04 .txt_box{text-align: right;}
.about05{margin-bottom: 0;}

@media screen and (max-width: 1200px){
  .about_box{flex-wrap: wrap; gap: 20px; margin-bottom: 5rem;}
  .about_box:nth-child(2), .about_box:nth-child(4){flex-direction: column-reverse;}
  .about_box > div{width: 100%;}
  .about_box .img_box{height: 380px;}
  .about02 .txt_box, .about04 .txt_box{text-align: left;}
}
@media screen and (max-width: 500px){
  .about_box .img_box .arrow_wrap img{width: 24px;}
}
/* about */

/* product */
.product_wrap{margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px;}
.product_wrap .pro{width: calc((100% - 80px)/ 3);}
.product_wrap .pro .img_box{width: 100%; height: 453px; margin-bottom: 20px;}
.product_wrap .pro .img_box img{width: 100%; height: 100%; object-fit: cover;}
.product_wrap .pro .txt_box p{font-size: 2rem; color: #333; font-weight: 500; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid #e2e2e2;}
.product_wrap .pro .txt_box span{color: #666;}

@media screen and (max-width: 1200px){
  .product_wrap{gap: 20px;}
  .product_wrap .pro{width: calc((100% - 20px)/ 2);}
  .product_wrap .pro .img_box{height: 400px;}
}
@media screen and (max-width: 768px){
  .product_wrap .pro{width: 100%;}
}
/* product */