@charset "utf-8";

@font-face {
  font-family: "GmarketSans";
  font-weight: 300;
  src: url(../font/GmarketSansLight.woff2) format(woff);
}
@font-face {
  font-family: "GmarketSans";
  font-weight: 500;
  src: url(../font/GmarketSansMedium.woff2) format(woff);
}
@font-face {
  font-family: "GmarketSans";
  font-weight: 800;
  src: url(../font/GmarketSansBold.woff2) format(woff);
}



html {
  scroll-behavior: smooth;
}

.krfont{font-family: 'Poppins', 'GmarketSans' !important;}

.inner{padding: 0 10rem; }
.inner2{padding: 0 14rem}

.top_nav{display: flex; gap:60px;}
.top_nav li a{color: #fff; font-size: 18px; }

.header{position: fixed; left: 0; top: 0; width: 100%; z-index: 9992; transition-duration: 1s}
.header .inner{display: flex; 
    justify-content: space-between;
    align-items: center;
    height: 100px; transition-duration: 1s}


.header.drop{top: -100px}
.header.nodrop{background: rgba(0,0,0,0.5); top: 0}

.header.nodrop .inner{height: 80px}

.main_visual{height: 100vh; overflow: hidden; position: relative;
    display: flex;
    justify-content: center;
    align-items: center;}
.main_visual .main_video{position:absolute; z-index: -1; background: #000; width: 100%; 
height: 100%; left: 0; top: 0}
.main_visual .main_video video{width: 100%; height: 100%; opacity: .8;
object-fit: cover;}

.main_visual .txt{text-align: center}
.main_visual .txt h2{color: #fff; font-size: 60px; font-weight: 200; line-height: 150%; word-break: keep-all}


.main_section{padding: 150px 0; }
.main_section.bg{background: #F9F9F9}

.main_title{margin-bottom: 80px;}
.main_title.center{text-align: center}

.main_title img + h2{margin-top: 30px}

.main_title h3{color: #F0720F; font-size: 18px; font-weight: bold; margin-bottom: 15px; line-height: 150%; word-break: keep-all}
.main_title h2{font-size: 60px; font-weight: 400; color: #1b1b1b; word-break: keep-all; line-height: 150%}
.main_title h2 b{font-weight: bold; color: #F0720F}
.main_title p{margin-top: 40px; font-size: 24px; word-break: keep-all; line-height: 150%; color: #333}

.main_flex3{display: flex; gap:40px; padding-top: 80px}
.main_flex3 .box{flex:1; overflow: hidden; border-radius: 10px; 
box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.15); position: relative; padding: 50px 40px; height: 60vh;
display: flex;     justify-content: flex-start;
    align-items: flex-end; transition-duration: 1s}

.main_flex3 .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;z-index: -1 }
.main_flex3 .box .bg img{transition-duration: 1s; width: 100%; height: 100%; object-fit: cover;}
.main_flex3 .box:hover .bg img{scale:1.1}

.main_flex3 .box:first-child{margin-top: 80px}
.main_flex3 .box:nth-child(2){margin-top: 0px;}
.main_flex3 .box:nth-child(3){margin-top: 0px}


.main_flex3.show .box:first-child{margin: 0}
.main_flex3.show .box:nth-child(2){margin-top: 80px;}
.main_flex3.show .box:nth-child(3){margin-top: -80px}


.main_flex3 .box .txt{}
.main_flex3 .box .txt h3{color: #fff; font-size: 24px; line-height: 150%; word-break: keep-all}
.main_flex3 .box .txt p{color: #fff; font-size: 18px; line-height: 150%; word-break: keep-all; margin-top: 20px;}


.icon_flex{margin-top: 80px; display: flex; gap:25px;}
.icon_flex .box{text-align: center; width: 120px;}
.icon_flex .box .icon{width: 120px; height: 120px; border: 1px solid #ddd; border-radius: 120px; 
display: flex; justify-content: center;
    align-items: center;}

.icon_flex .box p{color: #444; font-size: 18px; line-height: 150%; word-break: keep-all; margin-top: 25px;}

.slide_are{border-radius: 10px;
background: #F9F9F9;
box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.15);
width: 600px;
position: relative
}

.slide_are .box{  width: 600px; height: 600px; 
display: flex; justify-content: center;
    align-items: center;}

.product_flex{display: flex;   align-items: center;
    justify-content: space-between;  }

.slide_are .slick-dots{display: flex; position: absolute; left: 0; width: 100%; bottom: 20px; gap:10px;justify-content: center;
    align-items: center; }
.slide_are .slick-dots li button{font-size: 0; width: 30px; height: 10px; 
background: #d9d9d9; border-radius: 10px; transition-duration: .5s; border: 0}


.slide_are .slick-dots li.slick-active button{width: 10px; background: #F0720F}


.materials_flex{display: flex; gap:40px;}
.materials_flex .box{flex:1; overflow: hidden; border-radius: 10px; 
box-shadow: 2px 2px 25px 0px rgba(0, 0, 0, 0.15); position: relative; padding: 50px 40px; height: 60vh;
display: flex;     justify-content: flex-start;
    align-items: flex-end; transition-duration: 1s}

.materials_flex .box .txt{position: relative; width: 100%}
.materials_flex .box .txt h3{color: #fff; font-size: 24px; line-height: 150%; word-break: keep-all}
.materials_flex .box .txt p{color: #fff; font-size: 18px; line-height: 150%; word-break: keep-all; margin-top: 10px;}


.materials_flex .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;z-index: -1 }
.materials_flex .box .bg img{transition-duration: 1s; width: 100%; height: 100%; object-fit: cover;}
.materials_flex .box:hover .bg img{scale:1.1}


.materials_flex .box .txt a{background: #fff; width: 90px; height: 90px; border-radius: 100px;
display: flex; justify-content: center;
    align-items: center; position: absolute; right: 0; bottom: 0; opacity: 0; transition-duration: .5s}

.materials_flex .box:hover .txt a{opacity: 1}



.pop-layer .pop-container {
  padding: 50px;
  border-radius: 10px;
background: #FFF;
box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);
position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 800px;
}


.pop-layer {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9998
}



a.btn-layerClose {
  position: absolute; top: 0; right: -60px
}





.pop_flex{display: flex; gap:60px;
justify-content: flex-start;
    align-items: stretch;}
.pop_flex .thum{border-radius: 10px; overflow: hidden}
.pop_flex .thum img{max-width: 100%}
.pop_flex .txt{padding: 30px 0; position: relative; flex:1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;}
.pop_flex .txt h3{font-size: 24px; font-weight: bold}

.pop_flex .txt ul.dist{margin-top: 25px}


ul.dist{}
ul.dist li{position: relative; padding-left: 15px; font-size: 16px; line-height: 150%; word-break: keep-all; color: #333}
ul.dist li:after{content: '·'; position: absolute; left: 0; top: 0}

ul.dist li b{color: #F0720F}

.pop_flex .txt .pop_icon{position: absolute; right: 0; top: 0}




/**
 *  Progress Bar
 */
.progress {
	margin-top:80px;
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 10px;
  overflow: hidden;
  
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, #F0720F, #F0720F);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.ink_slide{}
.ink_slide img{max-width: 100%; display: block; margin: 0 auto; border-radius: 10px;
box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);}

.ink_slide .slick-list{padding: 0 20rem}
.ink_slide p{font-size: 18px; margin-top: 25px; text-align: center; color: #444; word-break: keep-all; line-height: 150%}
.ink_slide .box{padding: 20px}




.top_btn{width: 100px; height: 100px; border-radius: 100px; background: rgba(255,255,255,.8);
 position: fixed; right: 50px; bottom: 50px; z-index: 3;
 display: flex;
    justify-content: center;
    align-items: center; transition-duration: .5s; border: 1px solid #F5F5F5}
.top_btn span{background: url(../img/top.png); width: 14px; height: 18px; display: block;
 background-position: center; background-repeat: no-repeat; transition-duration: 1s}

.top_btn:hover{ box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20); background: #fff}
.top_btn:hover span{margin-bottom: 10px}

.foot_are{background: #fff; border-top: 1px solid #F5F5F5;}
.foot_top{border-bottom: 1px solid #F5F5F5; padding: 30px 0; border-top: 1px solid #F5F5F5;}
.foot_top .inner{display: flex; gap:15px; align-items: center;
    justify-content: flex-start;}
.foot_top .inner a{font-size: 16px; color: #666666; font-weight: 500}
/*.foot_top .inner a.agree_btn{color: #1D1D1B; }*/
.foot_top .inner span{width: 4px; height: 4px; display: block; background: #666; border-radius: 4px}

.foot_info{padding: 40px 0}
.foot_info .inner{display: flex;  align-items: flex-start;
    justify-content: space-between}
.foot_info .inner .left{display: flex; gap:50px;}

.foot_info_list{display: flex; gap:10px 20px;     flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.foot_info_list li{display: flex; font-size: 16px; color: #1D1D1B; line-height: 35px; gap:20px; justify-content: flex-start;
    align-items: center;}
.foot_info_list li b{height: 35px; color: #1D1D1B; background: #f5f5f5; 
border: 1px solid #ddd; border-radius: 35px; line-height: 35px; width: 100px; text-align: center}

.foot_info_list li.w100{width: 100%}

.foot_copy{border-top: 1px solid #F5F5F5; padding: 30px 0; text-align: center}
.foot_copy p{color: #383838; font-size: 16px}