@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(//cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css);
@font-face{font-family:'yg-jalnan';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');font-weight:normal;font-style:normal}
html{width:100%;height:100%;margin:0;padding:0}
body{width:100%;height:100%;margin:0;padding:0;color:#2a2829;overflow-y:scroll;word-break:keep-all}
body,button,input,textarea,select{font-family:'Noto Sans KR',sans-serif;font-size:14px;line-height:1.5;font-weight:400}
h1,h2,h3,h4{margin:0;padding:0;font-weight:500}
a{text-decoration:none;color:#2a2829;box-sizing:border-box}
button{box-sizing:border-box;margin:0;padding:3px 5px;border:0;background:#f7f1f8;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
dl,dt,dd{margin:0;padding:0}
p{margin:10px;padding:0}
img{border:0}
input[type="text"],input[type="password"]{-webkit-appearance:none;box-sizing:border-box;padding:3px 5px;border:1px solid #d2d1d2}
input[type="number"]{-webkit-appearance:none;box-sizing:border-box;padding:5px;border:1px solid #d2d1d2;text-align:center}
input[type="date"]{-webkit-appearance:none;box-sizing:border-box;padding:4px;border:1px solid #d2d1d2}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#7f7d7b}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#7f7d7b}
input::-moz-placeholder,textarea::-moz-placeholder{color:#7f7d7b}
input::-moz-placeholder,textarea::-moz-placeholder{color:#7f7d7b}
input[type="checkbox"]+span,input[type="radio"]+span{display:inline-block;margin-right:5px}
input[type="text"]:disabled,input[type="text"]:read-only{color:#7f7d7b;background:#f2f2f2}
input[type="checkbox"]{position:relative;margin:0;padding:0;vertical-align:top;width:0;height:0;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none}
input[type="checkbox"]+span{position:relative;display:inline-block;padding:2px 7px 2px 27px;line-height:23px}
input[type="checkbox"]+span:before{content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-01.png) -100px -10px no-repeat;-webkit-background-size:300px 40px;background-size:300px 40px}
input[type="checkbox"]:checked ~ span{color:#ff7300;font-weight:500}
input[type="checkbox"]:checked+span:before{content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-01.png) -130px -10px no-repeat;-webkit-background-size:300px 40px;background-size:300px 40px}
input[type="checkbox"]:disabled ~ span{color:#7f7d7b}
input[type="checkbox"]:disabled+span:before{content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-01.png) -160px -10px no-repeat;-webkit-background-size:300px 40px;background-size:300px 40px}
input[type="radio"]{position:relative;margin:0;padding:0;vertical-align:top;width:0;height:0;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none}
input[type="radio"]+span{position:relative;display:inline-block;padding:3px 7px 4px 27px;line-height:23px}
input[type="radio"]+span:before{content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-01.png) -10px -10px no-repeat;-webkit-background-size:300px 40px;background-size:300px 40px}
input[type="radio"]:checked ~ span{color:#f37;font-weight:500}
input[type="radio"]:checked+span:before{content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-01.png) -40px -10px no-repeat;-webkit-background-size:300px 40px;background-size:300px 40px}
input[type="radio"]:disabled ~ span{color:#7f7d7b}input[type="radio"]:disabled+span:before{content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-01.png) -70px -10px no-repeat;-webkit-background-size:300px 40px;background-size:300px 40px}
select{box-sizing:border-box;padding:3px;border:1px solid #d4d4d4}
textarea{box-sizing:border-box;padding:3px;border:1px solid #d4d4d4}
.off{display:none}
.just{word-break:normal;text-align:justify}
.frame{max-width:1200px;margin:0 auto;position:relative;padding:0 20px}
img {width: 100%; }
article { width: 100%; }
/* .header {  position: fixed;  top: 0;  left: 0; width: 100%;  z-index: 100;  border-bottom: 3px solid transparent; transition: border-color 1s, color 0.8s;} */
.header { width: 100%; }
.header .logoW a {
  display: block;
  width: 140px;
  height: 40px;
  background: url(../images/logo-white.png) left 20px center no-repeat;
  background-size: auto 100%;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  color: transparent;
  margin-top: 16px;
}
.header .logo a {
  display: block;
  width: 140px;
  height: 40px;
  background: url(../images/logo.png) left 20px center no-repeat;
  background-size: auto 100%;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  color: transparent;
  margin-top: 16px;
}
.header h1 { height: 0px; text-indent: -99999px; }
.header .container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 0; }
.header .dim { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;}
.header.on .dim { display: block;}
.header .openNavBtn.off { display: none; }
.header .openNavBtn { display: flex; justify-content: center; align-items: center; position: relative; width: 60px; height: 60px; line-height: 0; text-indent: -9999px; color: transparent; z-index: 11; background: none;}
.header .openNavBtn > div { position: relative; width: 24px; height: 16px;}
.header .openNavBtn span { position: absolute; display: block; width: 24px; height: 2px; background-color: #031e36; transition: transform 0.5s, width 0.2s, opacity 0.2s, background-color 0.5s;}
.header .openNavBtn span:nth-child(1) { top: 0; transform-origin: top left;}
.header .openNavBtn span:nth-child(2) { top: 50%;}
.header .openNavBtn span:nth-child(3) { top: 100%; transform-origin: bottom left;}
.header.on .openNavBtn { animation: opacity2 0.3s linear both 0s;}
.header.on .openNavBtn span:nth-child(1) { transform: rotate(45deg);}
.header.on .openNavBtn span:nth-child(2) { opacity: 0;}
.header.on .openNavBtn span:nth-child(3) { transform: rotate(-45deg);}
.header .container .menu_wrap { position: fixed;  top: 0;  right: -280px;  width: 280px;  height: 100%; background: #fff;  z-index: 10;}
.header .container  .gnb { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; align-items: flex-start; justify-content: center; padding-top: 10px;}
.header .container  .gnb .depth1 { width : 10%; position: relative;}
.header .container  .gnb .depth1 > a { display: block; height: 57px; padding: 20px; font-size: 20px; font-weight: 600; text-align: center; color: #000; transition: color 0.8s;}
.header .container  .gnb .depth1 .depth2 { box-sizing: border-box; padding: 20px; text-align: center; width: 100%; position: absolute; top: 57px; left: 0px; }
.header .container  .gnb .depth1 .depth2 li { padding: 10px; }
.header .container  .gnb .depth1 .depth2 a { color: #fff; font-size: 15px; }
@media screen and (min-width : 1000px) {
  .header .logoW {
    display: none;
  }
  .header .logo a{
    height: 60px;
    background: url(../images/logo-white.png) left 20px center no-repeat;
    background-size: auto 100%;
  }
  .header .logo  {
      
  }
}

/* home */ 

main h2 { height: 0px; text-indent: -99999px;  }
main .section { min-height: 100vh; display: flex;  justify-content: center;  align-items: center; }
main .section.top { margin-top: -60px; background: url('/images/ts-home-top.jpg'); background-repeat: no-repeat; background-size: cover;}
main .section.top .theme { color: #fff; text-align: center;}
main .section.top .theme .main { margin-bottom: 30px; }
main .section.top .theme .main strong { font-size: 55px; font-weight: bold; }
main .section.top .theme .sub span {  font-size: 30px; }

main .section.sec { background-color: #fff;}
main .section .box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-items: center; padding: 20px 0;}
main .section .descBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;justify-content: space-between;  min-height: 250px;}
main .section .descBox > .title { font-weight: bold; font-size: 35px;  background: linear-gradient(to bottom, black, gray);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent; }
main .section .descBox > .sub { font-weight: bold;  font-size: 22px;}
main .section .descBox > .more { font-weight: bold; }

main .section.thr  { background: #eee;  }
main .section.thr .box .descBox {align-items: center; min-height: 150px;}
main .section.thr .box .sideBox.thr { display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-top: 30px;}
main .section.thr .box .sideBox.thr .contan {  margin-bottom: 20px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; align-items: center; width: 100%; max-width: 300px; min-height: 450px; background-color: #fff; border-radius: 20px;}
main .section.thr .box .sideBox.thr .contan .copy { padding: 30px; width: 100%; box-sizing: border-box;}
main .section.thr .box .sideBox.thr .contan .copy .title { font-size: 20px; font-weight: bold; margin-bottom: 20px;}
main .section.thr .box .sideBox.thr img { border-radius: 20px 20px 0 0 ; }

main .section.bot.home { height: 200px; background: url('/images/ts-home-bot.png'); background-repeat: no-repeat; background-size: cover;}
main .section.bot .box .descBox { min-height: 150px; }
@media screen and (min-width : 1000px) {
  main .section { height: 100vh; }
  .header { padding-top: 15px;}
  .header .container .menu_wrap {position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 100%; right: 0; background: none; height: 63px;}
  .header .container .gnb .depth1 { width: 20%; }
  main .section.top { margin-top: -100px; }
  main .section.sec .descBox { width: 50%; min-height: 400px;}
  main .section.sec .sideBox.one { width: 50%; }
  main .section.thr .box .sideBox.thr { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 30px;}
  main .section.thr .box .sideBox.thr .contan { width: 30%; }
  main .section .descBox > .title { font-size: 48px; }
  main .section .descBox > .sub { font-size: 30px;}
  .header .container .gnb { padding-top: 0; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center;}
  .header .container .gnb .depth1 > a { color: #fff;}
  }
  
  /* company */
main .section.company .frame { max-width: 600px; }
main .section.company.top { background: url('/images/ts-company-top.png'); background-repeat: no-repeat; background-size: cover;}
/* main .section.company.sec { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: space-between; min-height: 250px;} */
main .section .descBox.typeB { align-items: center; word-break: keep-all;}
main .section.company.sec .descBox .title { margin-bottom: 20px; }
main .section.company.sec .descBox .sideBox { margin-bottom: 20px; }
main .section.company.sec .descBox .desc { padding: 20px 0; text-align: center; font-size: 20px; font-weight: bold; color:#FF8A00; margin-bottom: 20px; }
main .section.company.sec .descBox .sub { font-size: 16px; margin-bottom: 10px; }
main .section.company.sec .descBox .more { font-size: 25px; font-weight: bold;}

main .section .descBox.typeC { align-items: center; word-break: keep-all;}
main .section.company.thr .descBox .title { margin-bottom: 20px; }
main .section.company.thr .descBox .sideBox { margin-bottom: 20px;}
main .section.company.thr .descBox .desc { font-size: 20px; font-weight: bold; color:#FF8A00; margin-bottom: 20px; }
main .section.company.thr .descBox .sub {display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; font-size: 16px; margin-bottom: 10px; width: 100%;}
main .section.company.thr .descBox.typeC .sub .contan { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; width: 100%;}
main .section.company.thr .descBox.typeC .sub .contan:not(:last-child) { margin-bottom: 20px; }
main .section.company.thr .descBox.typeC .sub .contan .copy { position: relative; width: 50%; padding: 20px; box-sizing: border-box;}
main .section.company.thr .descBox.typeC .sub .contan .copy::before { content: ''; position: absolute; bottom: 50%; margin-bottom: -57px; left: -140px; width: 60%; padding-top: 60%; }
main .section.company.thr .descBox.typeC .sub .contan .copy.check::before { background: url("/images/ts-company-thr-1.png") 50% 50% no-repeat; background-size: cover; }
main .section.company.thr .descBox.typeC .sub .contan .copy.service::before { background: url("/images/ts-company-thr-2.png") 50% 50% no-repeat; background-size: cover; }
main .section.company.thr .descBox.typeC .sub .contan .copy.product::before { background: url("/images/ts-company-thr-3.png") 50% 50% no-repeat; background-size: cover; }
main .section.company.thr .descBox.typeC .sub .contan .copy .title { font-size: 20px; }
main .section.company.thr .descBox.typeC .sub .contan .copy .subttl { font-weight: 300; }

main .section.company.bot { background: #fff; }
main .section.company.bot .descBox.typeD { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
main .section.company.bot .descBox .title { margin-bottom: 20px; }
main .section.company.bot .descBox .sideBox { margin-bottom: 20px; }
main .section.company.bot .descBox .desc {display: flex; flex-direction: column; font-size: 20px; font-weight: bold; color:#FF8A00;}
main .section.company.bot .descBox .sub {display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; font-size: 16px; margin-bottom: 10px; width: 100%; align-items: center;}
main .section.company.bot .descBox.typeD .sub span { border-radius: 20px;} 
main .section.company.bot .descBox.typeD .sub .ceo { padding: 20px 0;  }
main .section.company.bot .descBox.typeD .sub .ceo span { background: #FF8A00; padding: 10px 30px; color: #fff;}
main .section.company.bot .descBox.typeD .sub .contan { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%;}
main .section.company.bot .descBox.typeD .sub .contan:not(:last-child) { margin-bottom: 20px; }
main .section.company.bot .descBox.typeD .sub .contan > span { box-sizing: border-box; width: 45%; text-align: center;}
main .section.company.bot .descBox.typeD .sub .contan .department { border: 1px solid #FF8A00; padding: 20px 30px;}
main .section.company.bot .descBox.typeD .sub .contan .charge { border: 1px solid #828282; padding: 10px 30px; font-size: 13px;}

@media screen and (min-width : 1000px) {
  main .section .box { padding: 63px 0; }
  main .section.company { justify-content: flex-start; height: auto;}
  main .section.company.top .theme { text-align: left; }
  main .section.company .frame { max-width: 1200px; }
  main .section.company.sec .descBox {width: 100%; }
  main .section.top .theme .sub span { font-size: 25px;}
  /* main .section.company .sideBox.one { width: 100%; } */
  main .section.company.sec .descBox .more { text-align: center;}
  main .section.company .descBox { width: 100%; }
  main .section.company.thr .descBox.typeC .sub .contan { width: 33.3% }
  main .section.company.thr .descBox .sub { justify-content: flex-start; align-items: center; }
  main .section.company.thr .descBox.typeC .sub .contan .copy { width: 100%; padding: 150px 20px 20px 20px; }
  main .section.company.thr .descBox.typeC .sub .contan .copy::before { left: 36%; width: 30%; padding-top: 30%; margin-bottom: 0px; }
  main .section.company.thr .descBox .sub { flex-direction: row; }
  .section.company.product.sec .productBox ul li .imgBox{
    display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
  }
}

main .section.make.top { background: url('/images/ts-make-top.png'); background-repeat: no-repeat; background-size: cover;}
main .section.make.sec .subImg { max-width: 800px; }

main .section.make.sec .box ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
main .section.make.sec .box ul li { margin-bottom: 20px; border-radius: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; background: rgba(36, 81, 113, 0.05); padding: 20px; width: 100%;}
main .section.make.sec .box ul li > div { width: 100%; text-align: center;}
main .section.make.sec .box ul li > div img { max-width: 250px; }
main .section.make.sec .box ul li > div.descBox { min-height: auto; justify-content: flex-start}
main .section.make.sec .box ul li > div.descBox h3 { margin-bottom: 10px; font-size: 20px; font-weight: bold; color: #FF8A00; }
main .section.make.sec .box ul li > div.descBox span{ text-align: left; font-weight: bold;}

@media screen and (min-width : 1000px) {
    main .section.make.sec .box ul li .imgBox { width: 40%; }
    main .section.make.sec .box ul li .descBox { width: 60%; }
}

/* General styles for the section */
.section.company.product.sec {
  padding: 20px;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

/* Frame styling */
.section.company.product.sec .frame {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Box styling */
.section.company.product.sec .box {
  margin-bottom: 20px;
}

.section.company.product.sec .productBox .title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  background: linear-gradient(to bottom, black, gray);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.section.company.product.sec ul {
  list-style: none;
  padding: 0;
}

.section.company.product.sec li {
  margin-bottom: 20px;
}

/* Individual product styling */
.section.company.product.sec .productBox{
  max-width: 600px;
}
.section.company.product.sec .productBox ul li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.section.company.product.sec .productBox ul li .imgBox{
  box-shadow: 5px 5px 5px #eee;
  border-radius: 10px;
}

.section.company.product.sec .productBox ul li .descBox{
  display: flex;
    align-items: center;
    padding-bottom: 20px;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}
.section.company.product.sec .productBox ul li .descBox .dtitle{
  font-weight: bold;
  font-size: 20px;
  padding-top: 20px;
  width: 100%;
}

.section.company.sec .productBox .descBox .desc {
  padding: 20px 0; 
  margin-bottom: 20px;
  color: #000;
  font-size: 16px;
  text-align: left;
  font-weight: 300;
}

.section.company.sec .productBox .descBox .thebogi {
  position: relative;
  background: none;
  font-weight: bold;
  padding-right: 30px;
}

.section.company.sec .productBox .descBox .thebogi::after {
  content: '';
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: url(/images/etc-icon.png) -265px -17px no-repeat;
    background-size: 650px 300px;
    transform: rotate(90deg);
    cursor: pointer;
}
.section.company.sec .productBox .descBox .thebogi.on::after {
  transform: rotate(270deg);

}


.section.company.product.sec .productBox ul li:last-child {
  border-bottom: none;
}

.section.company.product.sec .productBox ul li .imgBox img{
  width: 100%;
}
.section.company.product.sec .productBox ul li .imgBox .desc{
  width: 100%;
}

.section.company.product.sec .productBox ul li img {
  border-radius: 8px;
}

.section.company.product.sec .productBox ul li .content {
  flex: 1;
}

.section.company.product.sec .productBox ul li .content .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #222;
}

.section.company.product.sec .productBox ul li .content .desc {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Detail Box styling */
.section.company.product.sec .detalieBox {
  width: 100%;
  margin-top: 20px;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.section.company.product.sec .detalieBox .quality, 
.section.company.product.sec .detalieBox .field {
  margin-bottom: 20px;
}

.section.company.product.sec .detalieBox .subTtl {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color:#FF8A00;
  padding-bottom: 5px;
}

.section.company.product.sec .detalieBox ul {
  list-style-type: none;
  padding-left: 0;
  margin-top: 10px;
}

.section.company.product.sec .detalieBox ul li {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.section.company.product.sec .detalieBox ul li .stitle {
  font-size: 14px;
  font-weight: bold;
  flex: 0 0 130px;
  
}

.section.company.product.sec .detalieBox ul li .copy {
  font-size: 14px;
  color: #555;
  flex: 1;
}

.section.company.product.sec .detalieBox .requestBox{
  text-align: center;
}

.section.company.product.sec .detalieBox .requestBox a{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  background:#FF8A00;
  color: #fff;
  border-radius: 20px;
  padding: 10px 30px;
}

main .section.affiliate { background-color: #fff; display: flex; justify-content: center; align-items: center;}
main .section.affiliate:not(:last-child) { border-bottom: 1px solid #A9A9A9; }
main .section.affiliate .box { max-width: 600px; }
main .section.affiliate.top { background: linear-gradient(370deg, rgba(0,0,0,0.3), rgba(0, 0, 0, 0.5)), url('/images/ts-affiliate-top.png') no-repeat center/cover;}
main .section.affiliate.sec .desc { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
main .section.affiliate.sec .desc img { width: 30%; }
main .section.affiliate .descBox .title { margin: 30px 0; }
main .section.affiliate.sec .descBox > .sub { font-weight: 400; }
main .section.affiliate .desc { color: #FF8A00;}
main .section.affiliate.thr .desc { text-align: left; font-size: 18px; }
main .section.affiliate.bot .desc { text-align: center; }
main .section.affiliate .desc b { margin: 10px 0; color: #000; }
main .section.affiliate .desc p { margin: 10px 0; color: #000; }
main .section.affiliate.thr .desc span { color: #505050; margin-bottom: 20px;}
main .section.affiliate.thr .desc span.sub {  font-size: 16px; }
main .section.affiliate.seve .descBox > .sub { font-size: 18px;}
main .section.affiliate .descBox .sideBox span { margin: 10px 0; font-weight: bold; display: block; }
main .section.affiliate.six .descBox .box { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
main .section.affiliate.six .descBox .sideBox img {width: 100%; min-height: 192px;}
main .section.affiliate.six .descBox .sideBox .box span { text-align: center; }
main .section.affiliate.six .descBox .sideBox .box span.copy { color: #505050; font-size: 16px; }
main .section.affiliate.six .descBox .sideBox .box span.desc { color: #000; font-weight: bold; font-size: 22px;}

main .section.request { height: auto; }
main .section.request { background-color: #f5f5f5;}
main .section.request.sec .requestBox .box {margin-top: 30px; border-radius: 20px; background-color: #fff; width: 100%; padding: 20px; box-sizing: border-box;}
main .section.request.sec .requestBox .box.step2 { margin-bottom: 30px; }
main .section.request.sec .requestBox .box.step2.off { display: none; transform: translateX(-100%);}
main .section.request.sec .requestBox .box.step2.show{ display: flex; animation: slideIn 1s ease-in-out; }
main .section.request.sec .requestBox .box .textBox{ width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; }
main .section.request.sec .requestBox .box .textBox .step { margin-bottom: 10px; font-weight: bold; color: #2970FF; }
main .section.request.sec .requestBox .box .textBox .title { margin-bottom: 20px; font-weight: bold; font-size: 24px; }
main .section.request.sec .requestBox .box .textBox .desc { color: #505050; margin-bottom: 30px;}
main .section.request.sec .requestBox .box .textBox a { color: #fff; background-color:#FF8A00; padding: 5px 20px; border-radius: 5px;}
main .section.request.sec .requestBox .box .info { margin-top: 20px; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; }
main .section.request.sec .requestBox .box .info .category { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: center; }
main .section.request.sec .requestBox .box .info .select { font-size: 20px; font-weight: bold; margin-bottom: 10px; }
main .section.request.sec .requestBox .box .info .list { width: 100%; overflow-x: auto; margin-top: 30px;}
main .section.request.sec .requestBox .box .info .list span{ font-size: 25px; font-weight: bold; }
main .section.request.sec .requestBox .box .info .list ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
main .section.request.sec .requestBox .box .info .list ul li { min-height: 230px; margin-right: 2%; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: center; align-items: center; border: 2px solid #CDCDCD; border-radius: 20px; max-width: 200px;}
main .section.request.sec .requestBox .box .info .list ul li.on {border: 2px solid #2970FF;}
main .section.request.sec .requestBox .box .info .list ul li img { width: 100%; border-radius: 20px 20px 0 0;}
main .section.request.sec .requestBox .box .info .list ul li .title { font-weight: bold; text-align: center; padding: 20px; font-size: 20px;}
main .section.request.sec .requestBox .box  dl { border-top: 2px solid #000; display: flex; flex-direction: row; align-content: flex-start; flex-wrap: wrap; align-items: center;}
main .section.request.sec .requestBox .box  dt { font-weight: bold; position: relative; z-index: 10; line-height: 45px; text-align: center; width: 30%;}
main .section.request.sec .requestBox .box dd { width: 70%; padding: 15px 0; box-sizing: border-box; border-bottom: 1px solid #d2d2d2;}
main .section.request.sec .requestBox .box .necessary{ color: #f29b11; font-weight: 500;}
main .section.request.sec .requestBox .box input { border-radius: 5px; border: 1px solid #CDCDCD; width: 100%;}
main .section.request.sec .requestBox .box textarea { border-radius: 5px; border: 1px solid #CDCDCD; width: 100%;}
main .section.request.sec .requestBox .box .buttonBox { margin-top: 20px; width: 100%; text-align: center;}
main .section.request.sec .requestBox .box .buttonBox button { padding: 5px 20px; color: #fff; font-size: 20px; background: #FF8A00; border-radius: 5px;}
main .section.request.sec .requestBox .box .info .requestList li:not(:last-child) { border-bottom: 1px solid #82828261; box-sizing: border-box; padding-bottom: 10px; margin-bottom: 10px; }
main .section.request.sec .requestBox .box .info .requestList .productBox {display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
main .section.request.sec .requestBox .box .info .requestList .productBox .cancle { position: relative; background-color: transparent; border: 1px solid #505050; border-radius: 20px; width: 16px; height: 16px; margin-right: 5px; }
main .section.request.sec .requestBox .box .info .requestList .productBox .cancle span{ position: absolute; left: 2px; top:6px; display: block; height: 2px; background-color: #031e36; width: 10px;}
main .section.request.sec .requestBox .box .info .requestList .productBox .cancle span:first-child { transform: rotate(45deg); }
main .section.request.sec .requestBox .box .info .requestList .productBox .cancle span:last-child { transform: rotate(-45deg); }
main .section.request.sec .requestBox .box .info .requestList .productBox .product { width: 20%; color: #505050; font-weight: bold; }
main .section.request.sec .requestBox .box .info .requestList .productBox .count { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 80%; }
main .section.request.sec .requestBox .box .info .requestList .productBox .count .tsub { text-align: center; width: 15%; }
main .section.request.sec .requestBox .box .info .requestList .productBox .count input { width: 35%; }



@keyframes slideIn {
  from {
      transform: translateX(-100%); /* 왼쪽 바깥에서 시작 */
  }
  to {
      transform: translateX(0); /* 원래 위치로 이동 */
  }
}
@media screen and (min-width : 800px) {
  main .section.request.sec .requestBox .box { align-items: flex-start; padding: 40px 60px;  }
  main .section.request.sec .requestBox .box .textBox { width: 30%; margin-right: 2%; }
  main .section.request.sec .requestBox .box .info { width: 68%; margin-top: 0; }
  main .section.request.sec .requestBox .box input { padding: 10px; box-sizing: border-box;}
  main .section.request.sec .requestBox .box textarea { padding: 10px; box-sizing: border-box;}
}

@media screen and (min-width : 1000px) {
 /*  main .section.sec .sideBox.one {width: 100%;} */
  main .section.company.sec .descBox .sub {font-size: 18px; line-height: 2;} 
  main .section.company.thr .descBox .sideBox {margin-bottom: 0;}
  main .section.company.thr .descBox .intro .sideBox > img {width: 700px; height: auto;}
  main .section.company.thr .descBox .intro3 .sideBox {display: flex;flex-direction: row-reverse; width: 70%;}
  main .section.company.thr .descBox .intro3 .sideBox > img {width: 50%; margin-right: 10px;}
  main .section.company.thr .descBox .desc {padding-left: 50px; margin-bottom: 0; width: 30%;}
  main .section.affiliate.thr .descBox > div {display: flex; align-items: center; margin-bottom: 150px; width: 100%;}
  main .section.affiliate .descBox > .intro2 {flex-direction: row-reverse;}
  main .section.affiliate .descBox > .intro2 .desc {padding-left: 0; padding-right: 60px;}
  main .section.company.bot .descBox .desc { margin-top: 20px;}
  main .section.affiliate.bot .desc b {margin: 0; font-size: 30px;}
  main .section.company.bot .descBox .sub {margin-top: 50px;}
  main .section.affiliate.six .descBox .sideBox {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;}
  main .section.affiliate.six .descBox .sideBox .box { width: 24%; margin-right: 1%; }
  main .section.affiliate.six .descBox .sideBox .box:last-child { margin-right: 0; }

  main .section.affiliate.seve .descBox .sideBox {display: flex;}
  main .section.affiliate.seve .descBox .sideBox img {width: 50%;}
  main .section.affiliate.seve .descBox > .sub {margin-top: 50px;}

  main .section.request.sec .requestBox .box { padding: 40px 60px;  }
  main .section.request.sec .requestBox .box .textBox { width: 30%; margin-right: 2%; }
  main .section.request.sec .requestBox .box .info { width: 68%; margin-top: 0; }
}

@media screen and (min-width : 1000px) {
  .section.company.product.sec .productBox ul li{
    justify-content: space-between;
  }
  .section.company.product.sec .productBox ul li .imgBox{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      width: 40%;
  }

  .section.company.product.sec .productBox{
    max-width: 1000px;
  }

  .section.company.product.sec .productBox ul li .descBox{
    width: 55%;
  }
  .section.company.product.sec .productBox .title {
    font-size: 36px;

  }
  .section.company.product.sec .productBox ul li .descBox .dtitle {
    font-size: 24px;
  }

  .section.company.sec .productBox .descBox .thebogi {
    font-size: 18px;
  }

  main .section.affiliate .box { max-width: none; }
}

.layerPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, .45);
}

.layerPopup .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity = 50);
}

.layerPopup .head {
  background: #fff;
  height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 50px;
}

.layerPopup .head h3 {
  font-weight: 500;
  font-size: 22px;
}

.layerPopup .head .btnClose {
  width: 89px;
  height: 100%;
  background: url(/images/menuClose_ico_01.svg) center no-repeat;
  background-size: 19px auto;
  font-size: 0;
  text-indent: -9999px;
  padding: 0;
  position: absolute;
  right: 0;
}
.layerPopup .frame {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 300px;
  height: auto;
  background-color: #fff;
  z-index: 10;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

.layerPopup .content {
  padding: 20px;
  background: #f1f1f1;
}

.layerPopup .content dl {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}

.layerPopup .content dt {
  position: relative;
  z-index: 10;
  line-height: 45px;
  text-align: center;
  width: 30%;
}

.layerPopup .content dd {
  width: 70%;
  padding: 15px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #d2d2d2;
}

.layerPopup .content dd div ul li{
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
}

.layerPopup .content dd div ul li span{
  text-align: center;
  width: 30%;
}
.layerPopup .content dd div ul li input{
  width: 70%;
}

.layerPopup .content input {
  border: 0;
  position: relative;
  outline: 0;
  width: 100%;
  padding: 10px 25px;
  z-index: 2;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .4);
  -webkit-box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .4);
  width: 100%;
  border-radius: 40px;
}

.layerPopup .content input[type='file'] {
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.layerPopup .content .requestBox {
  padding: 0px 0px 70px 0px;
}

.layerPopup .content .requestBox .necessary{
  color: #f29b11;
  font-weight: 500;
}
.layerPopup .content .requestBox textarea{
  border: 0;
  position: relative;
  outline: 0;
  width: 100%;
  padding: 10px 25px;
  z-index: 2;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .4);
  -webkit-box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .4);
  width: 100%;
  border-radius: 40px;
}

.layerPopup .content .requestBox .buttonBox {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 11;
}

.layerPopup .content .requestBox .buttonBox button {
  width: 100%;
  height: 60px;
  color: #fff;
  font-size: 24px;
  background: #FF8A00;
}

@media screen and (min-width: 600px) {
  .layerPopup .content {
      padding: 30px 35px;
  }
}

@media screen and (min-width: 1000px) {
  
}

.footer { padding: 20px 0 20px 0; }