@charset "utf-8";
/*mixin - cont_box */

.main-visual {height: 650px; background: var(--primary-gradi34); ;}
.mainArea{width:1400px; margin:0 auto;}

.section1 {position:relative; height: 550px}

@keyframes float-updown {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
  }
  
 .star1 {position: absolute;top: 0%;right: 35%;animation: float-updown 4s ease-in-out infinite; }
 .star2 {position: absolute;top: 65%;right: 40%;animation: float-updown 4s ease-in-out infinite; display:none }
 .star3 {position: absolute;top: 70%;right: 0%;animation: float-updown 4s ease-in-out infinite;}
 .star4 {position: absolute;bottom:-10%; left:10%; }


.star1 { animation-delay: 0s; }
.star2 { animation-delay: 5s; }
.star3 { animation-delay: 10s; }



.information {display: flex; gap: 1.3rem; z-index: 100; padding: 2.3rem 0 0;    justify-content: space-between;}
.info-btn {  display: flex;z-index: 100;flex-wrap: wrap;gap: 0.5rem;width: 50%; margin-top:4rem; }
.info-btn button {display: flex; align-items: center; padding: 0.8rem 1.3rem;font-size: 1rem; color:var(--black); cursor: pointer; background: var(--white); border:0; border-radius: 5px;width: calc(50% - 0.25rem);
  background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: 0.3s; text-align: left;
  justify-content: space-between; width: calc(50% - 0.25rem); transition: all 0.3s ease;}
.info-btn button:hover, .info-btn button.active{background: var(--primary-color); color:var(--white)}
.productCont {padding: 0.6rem;min-height: 200px;position: relative; width: 50%}
.productCont > div {display: none;position: absolute;top: 0;left: 0;right: 0;}
.productCont > .active {display: block;}

.productCont .slogan {display: flex;    flex-direction: column;}
.productCont .slogan > span {color:var(--primary-color); font-size: 0.9rem;}
.productCont .slogan > dl {margin-top:15px; display: flex; flex-direction: column; gap: 1.3rem; margin-bottom: 1.9rem;}
.productCont .slogan > dl > dt {color:var(--black); font-size: 2.5rem; font-weight: 600; line-height: 3.3rem;}
.productCont .slogan > dl > dd {font-size: 0.8rem; width:68%}


.customer_call {text-align: center; border-bottom:1px solid var(--gray-base); padding: 0.6rem 0; font-weight: 0.9rem; color:var(--black)}
.customer_call>span {color:var(--primary-color); margin-left: 15px;}


.main-contents01{position:relative; margin-bottom: 3.9rem;}
.marquee { z-index: -1; overflow: hidden; position: absolute; top: 31.3rem; left: 0; max-width: 100%; width: 100vw; height: 150px; font-size: 120px; 
  color: transparent; -webkit-text-stroke: 1px #ddd;  }
.marquee .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 20s linear infinite; }
@keyframes marquee {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}
@keyframes subvisualFadeIn {
to { opacity: 1; }
}
@keyframes subvisual {
 to { transform: scale(1); }
}


/* title */
.title-style {width: 1400px; margin:0 auto; margin-top:5rem; margin-bottom:3rem}
.title-style > em {color:var(--primary-color); font-size: 1rem;}
.title-style > h3 {font-size: 2.5rem; color:var(--black); font-weight: 600; display: flex;    }
.title-style > h3 span.tit{ width: calc(100% - 6.5rem); }
.title-style > h3 span.more{ width: 6.5rem;text-align: right;font-size: 0.8rem;color: #000;cursor: pointer; ;}
.title-style > p {font-size: 1rem;}
.emphasize{color:var(--black); font-weight: 600;}

.member_perk{position:relative; background: #F4F9FE; border:1px solid #DDEBF6; box-shadow: var(--box-shadow-base); padding: 1.9rem; position:relative; border-radius: 8px;}
.member_perk > h4 {background: var(--primary-color); color:var(--white); font-size: 1.1rem; font-weight: 500; display: inline-block; border-radius: 30px; padding: .3rem 1.9rem;}
.member_perk > ul {margin-top: 1.3rem}
.member_perk > ul > li {position:relative; padding-left:15px; font-size: 0.9rem; line-height: 28px;}
.member_perk > ul > li:after{position:absolute; content: ''; width:3px; height: 3px; background: var(--primary-color); border-radius: 15px; left:0; top:15px}
.member_perk:after { position:absolute;content: ''; width: 640px; height: 438px; right:0; bottom:-150px; 
  background: url('../_image/main/pro_im01.svg') no-repeat;background-size: contain;}

.highlight{margin-top:18.8rem}
.highlight ul {display: flex;gap: 1.3rem;}
.highlight ul li{flex: 0 0 calc((100% - (1.5rem * 3)) / 3);
	max-width: calc((100% - (1.5rem * 3)) / 3); min-width: 0; 
	 background-color: #fff; box-sizing: border-box; border-radius: 15px; border:1px solid var(--gray-base);     -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;  padding:3.5rem 2.2rem; }
.highlight ul li:hover{outline: 2px solid var(--primary-color); box-shadow: var(--box-shadow-base); transition: all 0.3s ease;  box-sizing: border-box;}
.highlight ul li > div {position:relative}
.highlight ul li > div > h3 > em{color:var(--primary-color); font-size: 1rem; display: block;}
.highlight ul li > div span {position:absolute; right:0; top:0}
.highlight ul li > div > h3 {color:var(--black); font-size: 2rem; font-weight: 600;}
.highlight ul li > div > dl {margin: 2.2rem 0;}
.highlight ul li > div > dl > dt {color:var(--black); font-weight: 600;}
.highlight ul li > div > dl > dd {font-size:1rem;}

.main-contents02{margin-bottom:6.3rem}
.portfolio{width: 1400px; margin:0 auto; position:relative}
.swiper-slide{display: flex; gap: 1.9rem;}
.swiper-wrapper div { flex: 0 0 calc((100% - (1.5rem * 4)) / 4); text-align: center; }
.swiper-wrapper div img {border:1px solid var(--gray-base); border-radius: 15px; }
.swiper-wrapper div p {text-align: left; margin: 5px 0; font-size: 0.9rem;}
.swiper-wrapper {margin-bottom: 3.1rem;}

.swiper-pagination-bullet-active{width: 18px !important;
background: #639dd9 !important; border-radius: 8px !important;
background: linear-gradient(90deg, #639dd9, #6c6ee8) !important;}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {font-size: 1.3rem !important; color:var(--white)}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
  background: rgb(0,0,0,.6);
  border-radius: 30px;
  width: 50px !important;
  height: 50px !important;
  font-size: 0.8rem;
left:-23px !important;
top:35% !important
}
.swiper-button-next:after, .swiper-button-prev:after{font-size: 1.3rem !important; color:var(--white)}
.swiper-button-next, .swiper-rtl .swiper-button-prev{
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
  background: rgb(0,0,0,.6);
  border-radius: 30px;
  width: 50px !important;
  height: 50px !important;
  font-size: 0.8rem;
right:-23px !important;
top:35% !important
}

.main-contents03, .main-contents05{background: #F8F8FA ; padding: 8rem 0;}

.system01{display: flex; gap: 3.1rem;}
.system01 > ul {width: 50%;}
.system01 > ul:nth-child(2) {width: 50%; text-align: right; padding-top: 3.1rem;}

.system02{display: flex; gap: 3.1rem;}
.system02 > ul:nth-child(1) {width: 50%; text-align: left;padding-top: 3.1rem;}
.system02 > ul {width: 50%;}


.sy_txt02 > h4{color:var(--primary-color); font-weight: 600; margin-bottom:1.5rem}
.sy_txt02 > p {font-size: 1rem; color:var(--black); font-weight: 600; margin-bottom:1.5rem;}
.sy_txt02 > ul > li {position:relative; padding-left: 15px; font-size: 1rem;}
.sy_txt02 > ul > li:after{position:absolute; content: ''; width: 3px; height: 3px; background: var(--primary-color); border-radius: 8px; left:0; top:10px;}

.sy_txt03 { margin: 15px 0;}
.sy_txt03 > ul > li {font-size: 1rem;}
.sy_area{margin:3rem 0;}

.main-contents04, .main-contents06{padding: 8rem 0;}

.tbl{border:1px solid var(--gray-base);}
.tbl th { border:1px solid var(--gray-base);color: var(--black); font-weight: bold; text-align: center; padding: 10px 0px; font-size: 0.9rem; 
background: #F8F8FA;}
.tbl{ width:100%; margin:10px 0; }
.tbl th {text-align:center; } 

.tbl td{ padding:6px 6px;border:1px solid var(--gray-base); font-size: 0.9rem;}
.tbl td.left{text-align:left;}
.tbl td a {color:#000; font-size: 0.9rem; }
.tbl td a:hover{text-decoration:underline}
.tbl tr:hover td{ background:#fafafa;}
.tbl th:nth-child(2) {background: var(--primary-color); color:var(--white)}
.tbl td:nth-child(2) { color:var(--black)}
.tbl td:nth-child(2),
.tbl th:nth-child(2) {box-shadow: -3px 0 5px -3px rgba(0, 0, 0, 0.2),3px 0 5px -3px rgba(0, 0, 0, 0.2);}

.main-contents07 {background:url('../_image/main/bg01.png'); padding: 1.9rem 0 8rem;}
.PurchaseProcess > ul {display: flex;flex-wrap: wrap;gap: 1.3rem;justify-content: center;}
.PurchaseProcess > ul > li { width: calc((100% - 1.3rem * 5) / 6); }
.PurchaseProcess > ul > li > div {max-width: 22rem;  aspect-ratio: 1 / 1; /* 정사각형 */ ; margin: 0 auto;border-radius: 50%;background: var(--white);
  text-align: center;position: relative; /* max-height: 22rem;  */ }
.PurchaseProcess > ul > li > div:after{position:absolute; font-family: 'xeicon'; content: '\e93f'; right:-20px; top:40%; background: var(--primary-color); color:var(--white);
   width: 30px; height: 30px; border-radius: 30px; line-height: 30px;z-index: 10;}
.PurchaseProcess > ul > li:nth-child(6) > div:after{display: none;}
.PurchaseProcess > ul > li > div > dl {padding:3rem 1.3rem 0}
.PurchaseProcess > ul > li > div > dl > dt{color:var(--primary-color); font-size: 0.8rem; }
.PurchaseProcess > ul > li > div > dl > dd {color:var(--black)}
.PurchaseProcess > ul > li > div > dl > p {margin-top: 1rem;}
.PurchaseProcess > ul > li > div > dl > p img {height: 60px;}


.shopticsSer ul {display: grid;grid-template-columns: repeat(4, 1fr); gap: 1.9rem; padding: 0;margin: 0;list-style: none;}
.shopticsSer ul li {padding: 1.3rem;border-radius: 8px;border: 1px solid var(--gray-base); min-height: 25rem; position:relative}
.shopticsSer ul li > dl > dt{color:var(--black); font-weight: 600; margin-bottom: 0.9rem;}
.shopticsSer ul li > dl > dd {font-size: 0.8rem; }
.shopticsSer ul li > dl > dd.custom-line {line-height: 1.5;}
.shopticsSer ul li > dl > p {position:absolute; right:0; bottom:0}


.main-contents09{background: #262626; padding: 1.9rem 0 8rem; margin-top: 8rem;}
.main-contents09 .title-style h3{color:var(--white)}
.main-contents09 .title-style { color:#fff; }

.rfq{display: flex; gap: 1.3rem;}
.rfq .rfqLeft {border-right:1px solid #3D3D3D; width:50%; display: flex;flex-direction: column; gap: 1.3rem; margin-top: 1.3rem;}
.rfq .rfqLeft > dl > dt {color:#A4A4A4}
.rfq .rfqLeft > dl > dd {position:relative; padding-left: 15px; color:#fff; }
.rfq .rfqLeft > dl > dd:after{position:absolute; content: ''; width:3px; height:3px; background: var(--primary-color); border-radius: 8px; left:3px; top:13px}

.rfq .rfqRight { width:50%; display: flex; margin-top: 1.3rem;}

.rfq-form {position: relative;isolation: isolate;width: 100%;padding: 0 1.9rem;}
.rfq-form input[type="text"],
.rfq-form label,
.rfq-form label span {all: unset; box-sizing: border-box;}

.rfq-form p {position: relative;width: 100%;height: 70px; margin-bottom: 1.3rem;}
.rfq-form input[type="text"] {position: relative;width: 100%;height: 100%;padding: 20px 0 0;font-size: 1rem;border: none;border-bottom: 1px solid var(--black);background: transparent;
  color: var(--black);outline: none;z-index: 1; color:#fff; }
.rfq-form label {position: absolute;left: 0;bottom: 0;width: 100%;height: 100%; pointer-events: none;border-bottom: 1px solid  #ddd;z-index: 1;}
.rfq-form label::after {
  content: "";position: absolute;left: 0;bottom: -1px;width: 0;height: 100%;border-bottom: 2px solid #fff;transition: all 0.3s ease;}
.rfq-form label span {position: absolute;left: 0;bottom: 5px;font-size: 1rem;color: #767676;transition: all 0.3s ease;z-index: 2;}
.rfq-form input[type="text"]:focus + label span,
.rfq-form input[type="text"]:valid + label span {
  transform: translateY(-150%);font-size: 0.9rem;color: #ccc;}
.rfq-form input[type="text"]:focus + label::after,
.rfq-form input[type="text"]:valid + label::after {width: 100%;}
.rfq-form select {width: 100%;border: 0;border-bottom: 1px solid #ddd;border-radius: 0;background: url('../_image/sub/select_arrow.png') right 50% no-repeat transparent;background-size: 5%;
  color: #767676;margin-top: 1.9rem}
.rfq-form input[type="checkbox"] + label {margin-left: 0.5rem;font-size: 14px;color: #333;}
.agreearea {text-align: right; margin: 0.9rem 0;}
.agreearea > em {font-size: 0.9rem; margin-right: 0.9rem; color:#fff }
.rfq-form {padding: 0 0;}

.rfq-form .flex3 { display:Flex; }



@media all and (max-width:1400px){
  .mainArea, .title-style, .portfolio {width:100%; padding: 0 10px;}
 
}

@media all and (max-width:1280px){

  .member_perk > ul {padding-right:400px}
  .member_perk:after {width: 400px;}
  .highlight ul li{ padding: 2.2rem 1.5rem; }
  .PurchaseProcess > ul {display: flex; flex-wrap: wrap;justify-content: center;gap: 1.3rem; padding: 0;margin: 0;list-style: none;}
  .PurchaseProcess > ul > li {width: calc((100% - 2.5rem) / 3); box-sizing: border-box;}
  .PurchaseProcess > ul > li > div {width:100%;max-width: 100%;aspect-ratio: 1 / 1;margin: 0 auto; border-radius: 15px;background: var(--white);text-align: center;position: relative;}

}


@media all and (max-width:768px){
.star1, .star2, .star3 img{width:50%}
.star1 {right:-10%}
.star3 {top:100%}
.information{flex-direction: column;gap: 2.5rem; padding: 3.1rem 0 0 0;}
.productCont .slogan, .info-btn {width:100%; padding:0 10px}

.title-style > h3 span.tit {font-size: 1.9rem;}

.member_perk > ul {padding-right:0px}
.member_perk:after {width: 250px; background-position: bottom;}

.highlight ul {flex-direction: column;}
.highlight ul li{ padding: 2.2rem 1.5rem;    max-width: calc((100% - (0rem * 1)) / 1);}

.swiper-wrapper div { flex: 0 0 calc((100% - (1.5rem * 2)) / 2); text-align: center; }
.swiper-button-prev, .swiper-rtl .swiper-button-next {left:0 !important }
.swiper-button-next, .swiper-rtl .swiper-button-prev{ right:0 !important}

.system01, .system02 {flex-direction: column;}
.system01 > ul, .system01 > ul:nth-child(2) {width:100%}
.system02 > ul, .system02 > ul:nth-child(1) {width:100%}
.system02 > ul:nth-child(1) {order: 2; padding-top: 0;}
.system01 > ul:nth-child(2) {padding-top: 0}

.shopticsSer ul {grid-template-columns: repeat(2, 1fr); gap: 1.3rem;}
.shopticsSer ul li > dl > p {width: 100px;}

.rfq{flex-direction: column;}
.rfq .rfqLeft, .rfq .rfqRight  {width:100%;  }
.rfq .rfqLeft {border-right:0; border-bottom:1px solid #3D3D3D; padding-bottom: 3.1rem;}

}


@media all and (max-width:640px){
    
  .member_perk:after {display: none;}
  

}


.main_new01 { margin:100px auto; }
.main_new01 h1 { font-size:3rempx; color:#222; text-align:center; }
.solution_list { margin:30px auto; width:calc(100% - 20px); max-width:1400px; }
.solution_list > ul { display:flex;  flex-wrap:wrap; border-left:1px solid #ddd; border-top:1px solid #ddd; } 
.solution_list > ul > li { width:calc(100% / 4); box-sizing:border-box; border-right:1px solid #ddd; text-align:center; padding:1.8rem 0 1.2rem; border-bottom:1px solid #ddd;}

.solution_list > ul > li img { width:90%; margin:10px auto; }
.solution_list > ul > li > span { font-size:1.1rem; color:#222; }
.solution_list > ul > li > h4 { font-size:1.6rem; color:#00488c; font-weight:600; }
.solution_list > ul > li > p { font-size:1rem;  color:#222; display:flex; justify-content:center; align-items:center; gap:5px; }
.solution_list > ul > li > p span  { color:#ea0000;  font-size:1.5rem;display:flex; justify-content:center; align-items:center; gap:3px; }
.solution_list > ul > li > p strong { font-size:2.1rem; }
.solution_list > ul > li > ul.btns { display:flex; width:calc(100% - 40px); gap:0.3rem; margin:10px auto 0; }
.solution_list > ul > li > ul.btns li { flex-grow:1; }
.solution_list > ul > li > ul.btns li a { display:block; background:#dbf0ff; color:#022742; padding:0.3rem 0; font-size:1rem; }
.solution_list > ul > li > ul.btns li:last-child a { background:#0067b4; color:#fff;  }
.solution_list > ul > li > ul.btns li a:hover { opacity:0.7; }



@media all and (max-width:1160px){
.solution_list > ul > li { width:calc(100% / 3); }

}
@media all and (max-width:870px){
.solution_list > ul > li { width:calc(100% / 2); }
/*
.solution_list > ul > li > span { font-size:16px;; }
.solution_list > ul > li > h4 { font-size:20px;  }
.solution_list > ul > li > p { font-size:14px; }
*/
}


@media all and (max-width:600px){
.solution_list > ul > li > span { font-size:0.9rem; }
.solution_list > ul > li > h4 { font-size:1.1rem; letter-spacing:-0.05rem; }
.solution_list > ul > li > p { font-size:0.8rem; }
.solution_list > ul > li > ul.btns { width:calc(100% - 10px); gap:2px; margin:10px auto 0; }
.solution_list > ul > li > ul.btns li a span { display:none; }

}