@charset "utf-8";

@import url('base.css');

/* --------------------------------------------
 * layout
/* ------------------------------------------ */
.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=70); opacity:.7; z-index:9;}
body.ovf_hdn, .ovf_hdn{ overflow:hidden; height:100%;}

#wrap{ position: relative; width:100%; padding: 0; }

#header{ position: absolute; top: 0; left: 0; width: 100%; height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 55px; transform: translateY(-100%); z-index:3; }
#header .logo{ width: 147px;}
#header .logo a{ display: block; height: 54px; background: url(../images/logo.png) no-repeat 50% 50% / cover;}
#header .utill{ position: relative; display: flex; gap:35px; justify-content: flex-end; align-items: center; }
#header .utill .naver{ display: flex; align-items: center; gap:5px; color: #111; font-weight: 600;}
#header .utill .naver::before{ content: ''; width: 20px; height: 20px; background: url(../images/ic_nshop.png) no-repeat 50% 50% / cover;}
#header .utill .naver:hover{ text-decoration: none; opacity: .8;}
#header .utill .lang{ position: relative; display: inline-block;}
#header .utill .lang .langBtn{ position: relative; display: flex; align-items: center; width: 68px; height: 34px; color: #111; font-weight: 600; }
#header .utill .lang .langBtn i{ width: 20px; height: 20px; background: url(../images/ic_earth.png) no-repeat 50% 50% / cover; margin-right: 5px; text-indent: -9999px;}
#header .utill .lang .langBtn::after{ content: ''; position: absolute; top: 50%; right: 0; width: 8px; height: 8px; border-top: #1e1e1e 2px solid; border-right: #1e1e1e 2px solid; transform: translateY(-6px) rotate(135deg); transition: all 0.2s ease-in-out;}
#header .utill .lang .langBtn.on::after{ transform: translateY(-2px) rotate(-45deg); }
#header .utill .lang .langList{ position: absolute; top: 34px; background-color: #b60f2e; color: #fff; width: 100%; padding: 10px 0; text-align: center; display: none;}
#header .utill .lang .langList a{ display: block; color: #fff; padding: 5px 10px; opacity: .5;}
#header .utill .lang .langList a:hover{ text-decoration: none; opacity: 1;}
#header .bt-menu{ position: relative; width: 2.2rem; height: 2.2rem; color: transparent; font-size: 0; display: none;}
#header .bt-menu i{ display: block; width: 1.8rem; height: .2rem; background-color: #111; position: absolute; top: 50%; left: 50%; transform: translateX(-50%);}
#header .bt-menu i:nth-child(1){ margin-top: -6px;}
#header .bt-menu i:nth-child(2){ margin-top: -1px;}
#header .bt-menu i:nth-child(3){ margin-top: 5px;}
#header .utill .lang-mob{ display: none;}

.main #header.aMnuOpen .utill .naver::before{ filter:none;}
.main #header.aMnuOpen .bt-menu i{ background-color: #111; }

nav > ul{ display: flex; align-items: center; gap:45px;}
nav a{ display: block;}
nav > ul > li{ position: relative;}
nav > ul > li > a{ line-height: 80px; color: #b20f2d; font-size: 18px; font-weight: 600;}
nav > ul > li > a:hover{ text-decoration: none;}
nav .subDepth{ position: absolute; top: 70px; left: 50%; width: 150px; padding: 30px 45px; background-color: #b60f2e; transform: translateX(-50%); font-size: 15px; display: none;}
nav .gnb1 .subDepth{ width: 180px;}
nav .gnb2 .subDepth{ width: 180px;}
nav .gnb3 .subDepth{ width: 220px;}
nav .gnb4 .subDepth{ width: 220px;}
nav .gnb5 .subDepth{ width: 180px;}
nav .subDepth > li > a{ color: #fff; opacity: .5;}
nav .subDepth > li:hover > a{ opacity: 1; text-decoration: none;}
nav .subDepth > li + li{ margin-top: 15px;}
nav .subDepth > li > ul{ padding: 6px 0 0 0;}
nav .subDepth > li > ul > li > a{ font-size: 15px; color: #fff; opacity: .5;}
nav .subDepth > li > ul > li:hover > a{ opacity: 1; text-decoration: none;}
nav .subDepth > li > ul > li + li{ margin-top: 5px;}

footer{ padding: 90px 60px 80px; background-color: #ae0f2c; color: #fff;}
footer .footerWrap{ position: relative; display: flex;}
footer .f-nav{ font-size: 18px; font-weight: 600; width: 600px; }
footer .f-nav a{ display: inline-block; color: #fff; padding: 2px 0; text-transform: uppercase;}
footer .f-nav li + li{ margin-top: 5px;}
footer .f-addr{ font-size: 15px; display: flex; flex-direction: column; gap:90px; line-height: 1.6;}
footer .btDown{ position: absolute; top: 0; right: 0; width: 250px; height: 56px; display: block; border: #fff 1px solid; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #fff; padding: 0 18px; transition:all 0.2s ease-in-out;}
footer .btDown::after{ content: ''; width: 20px; height: 20px; background: url(../images/ic_down.png) no-repeat 50% 50% / cover; transition:all 0.2s ease-in-out;}
footer .btDown:hover{ background-color: #fff; color:#111; text-decoration:none;}
footer .btDown:hover::after{ filter: brightness(0) saturate(100%) invert(0%) sepia(34%) saturate(6821%) hue-rotate(195deg) brightness(128%) contrast(87%);}
footer .copyright{ margin-top: 165px; font-size: 14px; color: #fff; display: flex; align-items: end; justify-content: space-between;}
footer .bt-top{ position: absolute; width: 80px; height: 80px; display:flex; flex-direction: column; gap:4px; align-items: center; justify-content: center; background: #000; color:transparent; font-size: 12px; font-weight:500; color:#fff; border-radius: 50%; right: 60px; bottom: 120px;}
footer .bt-top i{ position: relative; width:16px; height:16px; overflow:hidden;}
footer .bt-top i::before{ content: '';  display: block; position: absolute; top: 0; left: 0; width: 16px; height: 16px; background: url(../images/top.png) no-repeat 50% 50% / cover;  transition: top .6s ease; }
footer .bt-top i::after{ content: '';  display: block; position: absolute; top: 150%; left: 0;  width: 16px; height: 16px; background: url(../images/top.png) no-repeat 50% 50% / cover;  transition: top .6s ease; }
footer .bt-top:hover i:before {top: -150%;}
footer .bt-top:hover i:after {top: 0;}

.menu-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 10;}
.menu-bg .bg-part { position: absolute;  width: 25%;  height: 100%; background-color: #fff; background-repeat: no-repeat; transform: scaleY(0); display: none; transform-origin: top;}
.menu-bg .part1 { top: 0; left: 0; transform-origin: top; }
.menu-bg .part2 { top: 0; left: 25%; transform-origin: bottom;}
.menu-bg .part3 { top: 0; left: 50%; transform-origin: top; }
.menu-bg .part4 { top: 0; left: 75%; transform-origin: bottom; }
.menu-content{ position: fixed;  top: 0; left: 0; z-index: 11; width: 100%; height: 100vh; padding: 120px 60px 0; background-color: #fff; display: none;}
.menu-content .allMenu{ display: flex; flex-wrap: wrap; color: #fff; gap:40px;}
.menu-content .allMenu a{ display: block; color: #fff;}
.menu-content .allMenu > li{ width: calc(33.3% - 30px);}
.menu-content .allMenu > li > a{ font-size: 30px; color: #111; font-weight: 600;}
.menu-content .allMenu > li > ul{ margin: 24px 0 0 0;}
.menu-content .subDepth{ margin: 25px 0 0 0;}
.menu-content .subDepth > li + li{ margin-top: 20px;}
.menu-content .subDepth > li > a{ font-size: 18px; color:#bababa; padding-right:10px;}
.menu-content .subDepth li > ul{ margin-top: 18px;}
.menu-content .subDepth li > ul > li + li{ margin-top: 6px;}
.menu-content .subDepth li > ul > li > a{ font-size:16px; color:#999; padding-right:1rem;}
.menu-content .subDepth li > ul > li > a:hover{ color: #fff; text-decoration: underline;}

/* main */
#indexWrap{ position: relative;}

#mainVisual .text{ position: absolute; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: column; padding: 60px 60px 130px; color: #ae0f2c; z-index: 2;}
#mainVisual .text .text1{ font-family: 'Paperozi'; font-weight: 100; line-height: 1.1; font-size: 96px; }
#mainVisual .text .text2{ font-size: 24px; line-height: 1.2; margin-top: 20px; font-weight: 600;}
#mainVisual{ position: relative; overflow: hidden;}
#mainVisual img{ width: 100%; }
#mainVisual .swiper-slide{ position: relative;}
#mainVisual .bg{ position: relative; display:flex; min-height: 950px; }
#mainVisual .bg > div{ position: absolute; top:0; left:0; bottom:0;flex:1; width:100%; background-size: cover; background-position:50% 50%; background-repeat:no-repeat;}
#mainVisual .bg > div.bg-mob{ display:none;}
#mainVisual .ctlr{ position: relative; margin-bottom: 20px; display: flex; align-items: center; gap:10px; padding: 0 8px;}
#mainVisual .ctlr .prev,
#mainVisual .ctlr .next{ width: 18px; height: 18px; position: relative; color: transparent; font-size: 0; opacity: .5;}
#mainVisual .ctlr .prev::after,
#mainVisual .ctlr .next::after{ content:''; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); display:block; width: 8px; height: 8px; border-top: #ae0f2c 2px solid; border-right: #ae0f2c 2px solid; }
#mainVisual .ctlr .prev::after{ transform: translateX(-50%) translateY(-50%) rotate(-135deg);}
#mainVisual .ctlr .prev:hover,
#mainVisual .ctlr .next:hover{ opacity: 1;}
#mainVisual .pag{ display: flex; align-items: center; width: auto; margin-right: 10px;} 
#mainVisual .custom-scrollbar{ width: 160px; margin: 0 20px; height: 3px; position: relative;}
#mainVisual .swiper-scrollbar{ top: 0; left: 0; height: 3px; background-color: rgba(178,15,48,.25); width: 100%; opacity: 1 !important;}
#mainVisual .swiper-scrollbar-drag{ background-color: #b20f2d;}

.main-business{ position: relative; padding-bottom: 900px;}
.main-business .text{ position: absolute; top: 0; height: 900px; display: flex; flex-direction: column; justify-content: space-between; padding: 50px 60px 80px; color: #ae0f2c; font-size: 30px; z-index: 2;}
.main-business .text h2{ font-size: 24px; font-weight: 200;}
.main-business .text p{ margin-top: auto;}
.main-business .sct{ position: sticky; top: 0; display: flex; height: 900px; background-color: #b20f2d;}
.main-business .sct .img{ flex:1; width: 50%;}
.main-business .sct .img img{ height: 900px; width: 100%; object-fit: cover; object-position: 50% 50%;}
.main-business .sct .desc{ flex:1; width: 50%; font-size: 24px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 80px;}
.main-business .sct .desc span{ font-family: 'Paperozi'; font-weight: 100; line-height: 1.1; margin-top: 30px; font-size: 75px;}
.main-business .sct .desc strong{ margin-top: 65px; font-weight: 500; letter-spacing: -.05em;}

.main-hd{ display: flex; justify-content: space-between; margin: 0 0 90px 0;}
.main-hd .tit{ color: #ae0f2c; font-size: 80px; font-family: 'Paperozi'; font-weight: 100; line-height: 1.1;  }
.main-hd .btz{ display: flex; gap:10px; align-items: center;}

.main-prod{ margin: 170px auto 0; max-width: 1440px;}
.main-prod .main-bd{ display: flex; justify-content: space-between;}
.main-prod .main-bd .thumb{ overflow:hidden;}
.main-prod .main-bd .desc{ width: 780px; display: flex; flex-direction: column;}
.main-prod .prod-nav li{ display: flex; align-items: center; justify-content: space-between;}
.main-prod .prod-nav li + li{ margin-top: 30px;}
.main-prod .prod-nav li button{ font-size: 24px; color: #111; font-weight: 600; display: flex; align-items: center; transition:all 0.2s ease-in-out;}
.main-prod .prod-nav li button::before{ content: ''; height: 2px; width: 0; display: block; background-color:#b20f2d; transition:all 0.2s ease-in-out;}
.main-prod .prod-nav li span{ margin-left: auto; opacity: 1; font-size: 20px; color:#ae0f2c; opacity: 0; transition:all 0.2s ease-in-out;}
.main-prod .prod-nav li.active button,
.main-prod .prod-nav li.on button{ color: #b20f2d; }
.main-prod .prod-nav li.active button::before,
.main-prod .prod-nav li.on button::before{ width: 35px; margin-right: 15px;}
.main-prod .prod-nav li.active span,
.main-prod .prod-nav li.on span{ opacity: 1;}
.main-prod .prod-slide{ overflow: hidden; margin-top: auto;}
.main-prod .prod-slide .pag{ margin: 0 0 20px 0; text-align: right;}
.main-prod .prod-slide .pag .swiper-pagination-bullet{ width: 14px; height: 14px; background-color: #8f8f8f; opacity: 1;}
.main-prod .prod-slide .pag .swiper-pagination-bullet-active{ background-color: #b20f2d; }
.main-prod .prod-slide .swiper-slide{ width: 230px; height: 340px; text-align: center; font-size: 18px; padding: 0 0 20px 0; color: #111; background-color: #ebe2d6; display: flex; flex-direction: column; justify-content: space-between;}
.main-prod .prod-slide .swiper-slide .img{ overflow:hidden;}
.main-prod .prod-slide .swiper-slide .img img{ transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);}
.main-prod .prod-slide .swiper-slide:hover .img img{ transform: scale(1.12);}
.main-prod .prod-slide .swiper-slide .text{ display: flex; flex-direction: column; align-items: center; gap:10px; padding: 0 10px;}
.main-prod .prod-slide .swiper-slide .text strong{ line-height: 1.1; font-weight: 400;}
#main_prod {
  transition: transform 0.6s ease, opacity 0.3s ease;
}

#main_prod.animating {
  transform: scale(1.1);
  opacity: 0;
}


.main-oem{ margin: 170px auto 0; max-width: 1440px;}
.main-oem .oem-slide{ overflow: hidden; }
.main-oem .oem-slide .swiper-slide{ display: grid; gap:60px 90px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;}
.main-oem .oem-slide .swiper-slide .itm{ display: flex; flex-direction: column; align-items: center;}
.main-oem .oem-slide .swiper-slide .itm.lg{ grid-column: 1 / 2; grid-row: 1 / 3;}
.main-oem .oem-slide .swiper-slide .itm:nth-child(4){ grid-column: 3 / 4; grid-row: 2 / 2;}
.main-oem .oem-slide .swiper-slide .img{ background-color:#f4f3f1; display: flex; justify-content: center; align-items: center; height: 240px; width: 100%;}
.main-oem .oem-slide .swiper-slide .itm img{ width: 200px; height: 200px; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);}
.main-oem .oem-slide .swiper-slide .itm:hover img { transform: scale(1.12);}
.main-oem .oem-slide .swiper-slide .itm.lg .img{ height: 640px; width: 570px;}
.main-oem .oem-slide .swiper-slide .itm.lg .img img{ width: 500px; height: 500px; object-fit: cover;}
.main-oem .oem-slide .swiper-slide .txt{ display: flex; flex-direction: column; align-items: center; margin-top: 20px; text-align: center; font-size: 14px; color: #111; gap:10px;}
.main-oem .oem-slide .swiper-slide .txt strong{ font-size: 20px; font-weight: 400;}
.main-oem .oem-slide .swiper-slide .txt span{ opacity: .5;}
.main-oem .oem-slide .pag{ margin: 30px 0 0 0; text-align: center;}
.main-oem .oem-slide .pag .swiper-pagination-bullet{ width: 14px; height: 14px; background-color: #8f8f8f; opacity: 1;}
.main-oem .oem-slide .pag .swiper-pagination-bullet-active{ background-color: #b20f2d; }

.main-process{ position: relative; margin: 180px 0 0 0; }
.main-process .bg{ width: 100%; height: 760px; background: url(../images/main_process.jpg) no-repeat 50% 50% / cover; }
.main-process .text{ position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; padding: 80px 60px; color: #fff; letter-spacing: -.05em;}
.main-process .text b{ font-size: 90px; font-weight: 100; line-height: 1; letter-spacing: -.05em; margin-bottom: 20px;}
.main-process .text p{ width: 50%; font-size: 24px; margin: 0 0 0 auto; line-height: 1.5;}
.main-process .img{ position: absolute; bottom: 70px; right: 60px; display: flex; justify-content: end; gap:32px;}
.main-process .img > li{ position: relative; border: #fff 1px solid; border-radius: 50%; font-size: 20px; gap:5px; width: 152px; height: 152px; line-height: 1.1; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; flex-direction: column;}
.main-process .img > li + li::before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); left: -24px; width: 8px; height: 8px; display: block; border-top: #fff 2px solid; border-right: #fff 2px solid; }

.main-inq{ background-color: #dcd2c2; display: flex; padding: 100px 60px; color: #ae0f2c; font-size: 30px; letter-spacing: -.05em;}
.main-inq a{ position: relative; margin-left: auto; display: flex; align-items: center; font-weight: 600; color: #ae0f2c; padding-right: 135px; transition: all 0.2s ease-in-out;}
.main-inq a i{ display: block; overflow:hidden; position: absolute; top: 50%; right: 0; margin-top: -15px; width: 42px; height: 30px; }
.main-inq a i::before{ content: '';  display: block; position: absolute; top: 50%; right: 0; margin-top: -15px;  width: 42px; height: 30px; background: url(../images/ic_arr.png) no-repeat 50% 50% / cover;  transition: right .6s ease;}
.main-inq a i::after{ content: '';  display: block;position: absolute; top: 50%; right: 150%; margin-top: -15px;  width: 42px; height: 30px; background: url(../images/ic_arr.png) no-repeat 50% 50% / cover;  transition: right .6s ease;}
.main-inq a:hover i:before {right: -150%;}
.main-inq a:hover i:after {right: 0;}

.lay-pop{ position: fixed; top: 0; left: 0; bottom: 0; width: 100%; background-color: rgba(0,0,0,.6); z-index: 99; display: none;} 
.lay-pop .pop-inner{ width: 100%; height: 100vh; padding: 30px; display: flex; justify-content: center; align-items: center;}
.lay-pop .pop-bx{ position: relative; width: 800px; max-height: 90vh;  display: flex; flex-direction: column; overflow-y: auto;}
.lay-pop .pop-con{ background-color: #fff; padding: 50px; flex:1;overflow-y: auto;}
.lay-pop .pop-close{ position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; display: block; font-size: 0; color: transparent;}
.lay-pop .pop-close::before,
.lay-pop .pop-close::after{ content: ''; position: absolute; width: 16px; height: 2px; background-color: #1e1e1e; display: block; top: 50%; left: 50%; margin: -1px 0 0 -8px; transform: rotate(45deg);}
.lay-pop .pop-close::after{ transform: rotate(-45deg);}
.lay-pop .pop-bt{ background-color:#fff; display: flex; justify-content: center; padding: 30px;}
.main-pop{ width: 450px;  margin: 0 auto; background-color: #5c151f;}
.main-pop .pop-slide{ position: relative; overflow: hidden;}
.main-pop .ctlr{ position: absolute; bottom: 25px; right: 30px; z-index: 2; height: 34px; background-color: rgba(0,0,0,.5); border-radius: 20px; display: flex; padding: 0 14px; color: #a3a4a5; justify-content: center; align-items: center;}
.main-pop .ctlr .pag{ text-align: center; font-size: 14px;}
.main-pop .ctlr .pag .swiper-pagination-current{ color: #fff;}
.main-pop .ctlr .prev,
.main-pop .ctlr .next{ position: relative; width: 20px; height: 20px; font-size: 0; color: transparent;}
.main-pop .ctlr .prev::after,
.main-pop .ctlr .next::after{ content: ''; width: 7px; height: 7px; position: absolute; top: 50%; left: 50%; margin: -3px 0 0 -3px; border-top: #fff 1px solid; border-right: #fff 1px solid; transform: rotate(45deg);}
.main-pop .ctlr .prev::after{ transform: rotate(-135deg);}
.main-pop .ctlr .swiper-button-disabled{ display: none;}
.main-pop-bottom{ display: flex; height: 60px; background-color: #fff; padding: 0 25px; justify-content: space-between; align-items: center;}


/* sub */
#container{ position: relative; padding: 210px 0 100px; max-width: 1440px; margin: 0 auto;}
.sub-tit{ position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; margin: 0 0 80px 0;}
.sub-tit .tit{ font-size: 27px; color: #111;}
.sub-tit .location{ display: flex; align-items: center; font-size: 16px; color:#111; gap:10px;}
.sub-tit .location > li{ position: relative; padding: 0 0 0 24px;}
.sub-tit .location > li a{ display: block;}
.sub-tit .location > li::before{ content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 1px; display: block; background-color: #a3a3a3; transform: rotate(-50deg);}
.sub-tit .location > li.h{ padding: 0;}
.sub-tit .location > li.h a{ color: transparent; font-size: 0; background: url(../images/ic_home.png) no-repeat 50% 50% / cover; width: 18px; height: 18px;}
.sub-tit .location > li.h::before{ display: none;}
.sub-tit .location > li:last-child .bt{ font-weight: 600; display: flex; align-items: center; font-size: 16px;}
.sub-tit .location > li:last-child .bt::after{ content: ''; border-top: #111 4px solid; border-left: transparent 4px solid; border-right: transparent 4px solid; margin-left: 8px;}
.sub-tit .location > li:last-child.active .bt::after{ transform: rotate(180deg); }
.sub-tit .location .depth3{ position: absolute; top: 30px; right: 0; width: auto; min-width: calc(100% - 25px); background-color: #fff; border:#e6e6e6 1px solid; padding: 25px 30px; display: none;}
.sub-tit .location .depth3 li + li{ margin-top: 10px;}
.sub-tit .location .depth3 a{ color: #999;}
.sub-tit .location .depth3 a:hover{ color: #111; text-decoration: none;}
.about .sub-tit .location .depth3{ width: 230px;}
.capability .sub-tit .location .depth3{ width: 150px;}
.products .sub-tit .location .depth3{ width: 240px;}
.oem .sub-tit .location .depth3{ width: 160px;}
.support .sub-tit .location .depth3{ width: 160px;}

.visual_sect{ overflow: hidden; position: relative; left: 50%; transform: translateX(-50%); width: calc(100vw - 10px); height: 360px; margin: 0 0 90px 0;}
.visual_sect .img { position: relative; width: 100%;}
.visual_sect .img img { width: 100%; height: 480px; object-fit: cover;}
.visual_sect:after { display:block; content:''; width:100%; height:101%; position:absolute; top: -0.5%; left: 0; right: 0; bottom: 0; background-color:#fff; transition: left 1.4s ease-in-out; -webkit-transition: left 1.4s ease-in-out; -moz-transition: left 1.4s ease-in-out; -ms-transition: left 1.4s ease-in-out; -o-transition: left 1.4s ease-in-out; } 
.visual_sect.animate::after { left:100%; } 

.div-tab{ display: flex; align-items: center; gap: 5px; margin: 0 0 40px 0;}
.div-tab .itm{ height: 90px; width:300px; display: flex; align-items: center; justify-content: center; border: #e5e5e5 1px solid; font-size: 24px; color: #111; border-radius: 50px; font-weight: 600;}
.div-tab .itm:hover,
.div-tab .itm.active{ text-decoration: none; background-color: #c51b36; border-color: #c51b36; color: #fff; }
.div-tab.prod .itm{ padding: 0 10px; justify-content: start; font-size: 16px; gap:10px;}
.div-tab.prod .itm i{ width: 60px; height: 60px; border-radius: 50%; filter: grayscale(100%); opacity: .5;}
.div-tab.prod .itm:hover i,
.div-tab.prod .itm.active i{ filter:none; opacity: 1; }
.div-tab.prod.oem{ margin: 0 0 90px 0;}
.div-tab.prod.oem .itm{ width: 230px; }

.tbl-hd{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 40px 0;}
.tbl-hd .total{ color: #777; font-size: 16px;}
.tbl-hd .total b{ color: #111; }
.tbl-hd .sch-bx{ position: relative; width: 340px; }
.tbl-hd .sch-bx .input{ border-radius: 0; width: 100%; border:#e6e6e6 1px solid; height: 50px; padding: 0 15px;}
.tbl-hd .sch-bx .sch{ position: absolute; top: 50%; right: 0; margin-top: -25px; width: 50px; height: 50px; color: transparent; font-size: 0; background: url(../images/ic_search.png) no-repeat 50% 50% / 18px;}
.tbl-hd.r{ justify-content: end; padding-right: 15px;}

div.paging{ text-align:center; padding:0; margin:90px 0 0 0; position:relative; }
div.paging a,
div.paging strong{ display:inline-block; width:42px; height:42px; line-height:40px; color:#1e1e1e; text-align:center; margin:0; vertical-align:middle; overflow: hidden; margin-left: -5px; }
div.paging a:hover{ color:#ae0f2c;}
div.paging .on,
div.paging .on:hover{ color:#ae0f2c; font-weight:400;}
div.paging .direction{ position:relative; background-position: 50% 50%; background-size: 24px; background-repeat: no-repeat; opacity: .2;}
div.paging .direction > span{ position:absolute; top:-9999px; left:-9999px;}
div.paging .direction.first{ background-image: url(../images/ic_paging_last.png); transform:rotate(-180deg);}
div.paging .direction.prev{ background-image: url(../images/ic_paging_next.png); transform:rotate(-180deg);}
div.paging .direction.next{ background-image: url(../images/ic_paging_next.png);}
div.paging .direction.last{ background-image: url(../images/ic_paging_last.png);}
div.paging .direction:hover{ opacity: 1;}

.news-list{ display: flex; gap:60px; flex-wrap: wrap;}
.news-list .itm{ width: calc(33.3% - 40px); display: flex; flex-direction: column; gap:25px;}
.news-list .itm .img{ overflow: hidden; background-color: #fbfaf9;}
.news-list .itm .img img{ object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.news-list .itm:hover .img img { transform: scale(1.12);}
.news-list .itm .text{ display: flex; flex-direction: column; gap:15px;}
.news-list .itm .text .cate{ font-size: 14px; }
.news-list .itm .text .date{ color: #777; margin-top: 5px; font-size: 14px;}
.news-list .itm .text .tit{ font-size: 20px; font-weight: 600; max-height: 60px; line-height: 1.5; overflow: hidden; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news-list .itm .text .desc{ font-size: 15px;}
.news-list .itm .text .cost{ font-size: 20px; font-family: "Pretendard Variable", Pretendard;}
.news-list .itm:hover .text{ text-decoration: none;}
.news-list .itm:hover .text .tit{ text-decoration: underline;}
.news-list.prod .itm{ gap:20px; }
.news-list.prod .itm .text{ gap:10px; padding: 0 12px;}
.news-list.prod .itm .text .desc{ margin-top: 5px;}
.news-list.prod .itm .text .cost{ margin-top: 20px;}
.news-list.oem .itm .img img{ width: 100%; }
.news-list.oem .itm .text{ gap:10px;}
.news-list.oem .itm .tit{ text-align: center; font-size: 18px;}
.news-list.oem .itm .text span{text-align: center; font-size: 14px; color:#111;}
.news-list.prod .itm:hover .img img,
.news-list.oem .itm:hover .img img{ transform: scale(1);}
.news-list.oem .itm:hover .text .tit{ text-decoration: none;}

.no-text{ padding: 160px 30px; align-items: center; justify-content: center; width: 100% !important; font-size: 20px; color:#111; gap:20px  !important; flex-direction: row !important;}
.no-text::before{ content: ''; width: 48px; height: 48px; background: url(../images/ic_info.png) no-repeat 50% 50% / cover;}

table.list{ border-top: #000 1px solid;}
table.list .num{ width: 100px;}
table.list .date{ width: 140px;}
table.list thead th{ padding: 26px 10px; text-align: center; border-bottom: #000 1px solid; color: #000; font-size: 16px; font-weight: 500;}
table.list tbody td{ padding: 26px 10px; text-align: center; border-bottom: #e6e6e6 1px solid; color: #1e1e1e; font-size: 16px; }
table.list tbody td.subject{ text-align: left;}

.tbl-view{ border-top: #111 1px solid; border-bottom: #111 1px solid;}
.tbl-view .view-hd{ padding: 50px 45px; display: flex; align-items: center;}
.tbl-view .view-hd .subject{ font-size: 30px; font-weight: 600; color: #111; flex:1;}
.tbl-view .view-hd .date{ color: #777; width: 140px; text-align: right; margin-left: auto;}
.tbl-view .view-att{ border-top: #e6e6e6 1px solid; padding: 25px 45px; display: flex;}
.tbl-view .view-att dt{ font-size: 16px; color:#999; width: 150px;}
.tbl-view .view-att dd{ flex:1; display: flex; gap:15px 80px; flex-wrap: wrap;}
.tbl-view .view-att dd .itm{ color: #111; font-size: 15px; display: flex; align-items: center; gap:5px;}
.tbl-view .view-att dd .itm::before{ content: ''; width: 18px; height: 18px; background: url(../images/ic_file.png) no-repeat 50% 50% / cover;}
.tbl-view .view-con{ border-top: #e6e6e6 1px solid; font-size: 18px; color: #111; padding: 50px 45px; line-height: 1.8;}

.prod-hd{ padding: 20px 0 45px; display: flex; align-items: center; border-bottom: #f1f1f1 1px solid;}
.prod-hd .tit{ font-size: 60px; color: #111; width: auto; padding-right: 110px; }
.prod-hd .text{ flex:1; font-size: 18px; color: #111;}
.prod-hd .btz{ width: 200px; display: flex; justify-content: end;}
.prod-hd .btz .btn{ gap:35px; border-color: #c61b36;}

.prod-view{ margin-bottom: -100px;}
.prod-view-hd{ display: flex; align-items: center; max-width: 1440px; margin: 0 auto;}
.prod-view-hd .img{ width: 50%; display: flex; justify-content: center; align-items: center;}
.prod-view-hd .text{ width: 50%; flex:1; padding: 0 50px 0 115px; color: #111;}
.prod-view-hd .text .tx-tit{ font-size: 54px; line-height: 1.3; text-transform: uppercase;}
.prod-view-hd .text .tx-con{ font-size: 18px; margin-top: 40px;}
.prod-view-hd .text .tx-exc{ color: #c61b36; margin-top: 40px; font-size: 14px;}
.prod-view-hd .text .btn{ height: 73px; width: 360px; line-height: 70px; margin-top: 110px;}
.prod-view-bd{ position: relative; width: calc(100vw - 10px); left: 50%; margin: 90px 0 0; transform: translateX(-50%); background-color: #fafaf7; display: flex; align-items: center; flex-direction: column; padding: 90px 0 120px; }

.dv-wait{ display: flex; flex-direction: column; align-items: center; padding: 240px 0; gap:35px;}
.dv-wait p{ display: flex; flex-direction: column; align-items: center; gap:5px; color: #999;}
.dv-wait p b{ font-size: 22px; color: #c61b36;}

.sub-tit-hd{ display: flex; flex-direction: column; color: #111; font-size: 24px; gap:20px; margin: 0 0 80px 0; }
.sub-tit-hd b{ font-size: 60px; font-weight: 400;}

.inquiry-bx{ border-top: #111 1px solid; border-bottom: #111 1px solid; padding: 24px 0 0 0; }
.inquiry-bx .inquiry-bx-tit{ font-size: 24px; color: #111; }
.inquiry-bx .inquiry-bx-list{ display: flex; flex-wrap: wrap; gap:58px; padding: 40px 0 38px;}
.inquiry-bx .inquiry-bx-list .itm{ position: relative; width: calc(33.3% - 38.6px);}
.inquiry-bx .inquiry-bx-list .itm span{ position: absolute; top: 0; left: 0; width: 100%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: #fff; text-align: center; font-size: 40px; font-weight: 700;}
.inquiry-bx .inquiry-bx-list .itm span em{ font-size: .6em;}
.inquiry-bx .inquiry-bx-list .itm:hover span,
.inquiry-bx .inquiry-bx-list .itm.active span{ background-color: #dbd2c1; color: #ae0f2d;}
.inquiry-bx .inquiry-bx-list .itm.active span::before{ content: ''; width: 75px; height: 52px; background: url(../images/ic_inquiry.png) no-repeat 50% 50% / cover; margin-bottom: 10px;}
.inquiry-bx .inquiry-bx-list.n2 .itm{ width: calc(50% - 29px);}

.form-wr{ display: flex; flex-wrap: wrap; gap: 30px 60px; padding: 40px 0;}
.form-wr .form-itm{ width: calc(50% - 30px);}
.form-wr .form-itm.w100{ width: 100%;}
.form-wr .form-itm .hd{ font-size: 16px; color:#111; font-weight: 700; padding: 10px 0;}
.form-wr .form-itm .bd{ display: flex;}
.form-wr .form-itm .inp{ width: auto; flex: 1;}
.form-wr .input-wrapper{ position: relative; flex: 1;}
.form-wr .input-wrapper .inp{ width: 100%;}
.form-wr .form-itm .ul-list01{ margin-top: 25px;}

.ul-list01{ color: #111; }
.ul-list01 li{ text-indent: -10px; padding-left: 10px;}
.ul-list01 li::before{ content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #d5d6dc; display: inline-block; margin-right: 6px; vertical-align: 4px;}

.clear-btn{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/ic_x3.png); border: none; font-size: 0; color: transparent; cursor: pointer; display: none;  }

/* named upload */
.filebox{ position: relative; text-align: left; display: flex; width: 100%; background-color: #f5f5f5;}
.filebox input[type="file"]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.filebox label{ background-color: #fff; display: flex; justify-content: center; align-items: center; border: #d3d3d3  1px solid; height: 60px; line-height: 60px; width: 180px; text-align: center; color: #575757;  cursor: pointer; font-weight: 600;}
.filebox label:hover{ border-color: #111; background-color: #111; color: #fff;}
.filebox .upload-name{ flex: 1; display: inline-block; padding:0 20px; color:#1e1e1e; border: none; font-size: inherit; font-family: inherit; line-height: 60px; height: 60px; vertical-align: middle; border-radius:0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.filebox .upload-display{ margin-bottom: 5px;}
.filebox .upload-thumb-wrap{ display: inline-block; max-width:360px; padding: 2px; vertical-align: middle; border: 1px solid #ddd; border-radius: 5px; background-color: #fff;}
.filebox .upload-display img { display: block; max-width: 100%; width: 100%; height: auto;}

.privacy-bx{ border-top: #ddd 1px solid; padding: 30px 0 20px;}
.privacy-bx .tit{ color: #111; font-weight: 700;} 
.privacy-bx .text{ background-color: #fafafa; padding: 30px 24px; margin: 35px 0 0 0; color: #111;}
.privacy-bx .dv-chk{ padding: 20px 0; align-items: center; display: flex; justify-content: space-between;}
.privacy-bx .dv-chk label{ font-size: 16px; color: #111; font-weight: 600;}

.cert-list{ display: flex; gap: 90px 30px; flex-wrap: wrap; padding-top: 20px;}
.cert-list .itm{ width: calc(20% - 24px); }
.cert-list .itm .img{ position: relative; cursor: pointer;}
.cert-list .itm .img img{ border: #e6e6e6 1px solid;}
.cert-list .itm .img::before{ content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; border:#ae0f2c 2px solid; background: rgba(255,255,255,.0) ; opacity: 0; transition:all 0.2s ease-in-out;}
.cert-list .itm .img::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: #ae0f2c url(../images/ic_sch.png) no-repeat 50% 50% / 24px; opacity: 0; transition:all 0.2s ease-in-out;}
.cert-list .itm:hover .img::before,
.cert-list .itm:hover .img::after{ opacity: 1; }
.cert-list .itm .txt{ margin-top: 30px; padding: 0 10px; font-size: 20px; text-align: center; font-weight: 500; color: #111;}
.cert-list .itm .txt li::before{ content: ''; width: 4px; height: 4px; background-color: #d3d3d3; margin-right: 10px; vertical-align: 4px; display: inline-block; }
.cert-list .itm .txt li + li{ margin-top: 5px;}

.modalPop{ display:none;position:fixed;top:0;left:0;width:100vw;height:100vh; background-color: rgba(0,0,0,.7); z-index:9999;justify-content:center;align-items:center; overflow-y: auto;}
.modalPop .inner{ position: relative; top:50%; transform: translateY(-50%); margin: 0 auto; width: 630px; display: flex; height: 900px; align-items: center; justify-content: center;}
.modalPop #imgModalImg{ width: 100%; height: 900px; max-width:90vw; }
.modalPop .pop-close{ position: absolute; top: 0; right: -60px; cursor:pointer; z-index:10001; width: 60px; height: 60px; display: block; background-color: #000; font-size: 0; color: transparent;}
.modalPop .pop-close::before,
.modalPop .pop-close::after{ content: ''; position: absolute; width: 20px; height: 2px; background-color: #fff; display: block; top: 50%; left: 50%; margin: -1px 0 0 -8px; transform: rotate(45deg);}
.modalPop .pop-close::after{ transform: rotate(-45deg);}

.customers-list{ display: flex; flex-wrap: wrap; gap:60px 30px;}
.customers-list .itm{ width: calc(20% - 24px); height: 160px; padding: 30px 33px; display: flex; justify-content: center; align-items: center; border: #e6e6e6 1px solid;}

.expertise-bx{ display: flex; flex-direction: column;}
.expertise-bx li{ display: flex; padding: 55px 0; font-size: 20px; color: #111;}
.expertise-bx li + li{ border-top: #ddd 1px solid;}
.expertise-bx li b{ width: 438px; color: #ae0f2c; font-size: 30px; padding-right: 10px;}
.expertise-bx li div{ flex:1; }

.develop-hd{ font-size: 24px; color: #111; display: flex; flex-direction: column; gap: 90px;}
.develop-hd b{ font-size: 60px; font-weight: 400;}
.develop-bd{ margin-top: 90px; position: relative; left: 50%; width: calc(100vw - 10px); min-height: 780px; background: url(../images/develop_bg.jpg) no-repeat 50% 50% / cover; transform: translateX(-50%);}
.develop-bd .inner{ max-width: 1440px; margin: 0 auto; display: flex; padding: 90px 0; color: #fff;}
.develop-bd .text{ width: 50%; display: flex; flex-direction: column; gap:60px; font-size: 24px; font-weight: 500;}
.develop-bd .text .tit{ font-size: 42px; }
.develop-bd ul{ width: 50%; display: flex; flex-wrap: wrap; padding: 0 0 0 40px; gap: 38px 40px;}
.develop-bd ul li{ width: calc(50% - 20px); border: #fff 2px solid; height: 120px; padding: 0 50px; text-align: center; border-radius: 60px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: 600;}

.develop-c1{ margin: 90px 0 0 0;}
.develop-c1 .tit{ color: #111; font-size: 42px; margin: 0 0 50px 0;}
.develop-c1 ul{ display: flex; flex-wrap: wrap; gap: 38px;}
.develop-c1 ul li{ position: relative; border: #ddd 1px solid; width: calc(25% - 28.5px); min-height: 328px; padding: 35px 36px; display: flex; flex-direction: column; font-size: 15px; color: #111;}
.develop-c1 ul li:nth-child(1){ order:1;}
.develop-c1 ul li:nth-child(2){ order:2;}
.develop-c1 ul li:nth-child(3){ order:3;}
.develop-c1 ul li:nth-child(4){ order:4;}
.develop-c1 ul li:nth-child(5){ order:8;}
.develop-c1 ul li:nth-child(6){ order:7;}
.develop-c1 ul li:nth-child(7){ order:6;}
.develop-c1 ul li:nth-child(8){ order:5;}
.develop-c1 ul li b{ font-size: 14px; color: #ddd; font-weight: 400;}
.develop-c1 ul li strong{ color: #111; font-size: 24px; margin: 10px 0 15px;}
.develop-c1 ul li span{ color: #999; font-size: 14px;}
.develop-c1 ul li::after{ content: ''; width: 59px; height: 59px; display: block; position: absolute; bottom: 30px; right: 30px; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;} 
.develop-c1 ul li:nth-child(1)::after{ background-image: url(../images/develop_ic1.png); }
.develop-c1 ul li:nth-child(2)::after{ background-image: url(../images/develop_ic2.png); }
.develop-c1 ul li:nth-child(3)::after{ background-image: url(../images/develop_ic3.png); }
.develop-c1 ul li:nth-child(4)::after{ background-image: url(../images/develop_ic4.png); }
.develop-c1 ul li:nth-child(5)::after{ background-image: url(../images/develop_ic5.png); }
.develop-c1 ul li:nth-child(6)::after{ background-image: url(../images/develop_ic6.png); }
.develop-c1 ul li:nth-child(7)::after{ background-image: url(../images/develop_ic7.png); }
.develop-c1 ul li:nth-child(8)::after{ background-image: url(../images/develop_ic8.png); }
.develop-c1 ul li::before{ content: ''; position: absolute; top: calc(50% - 4px); left: -26px; border-top: #e7b7bf 2px solid; border-right: #e7b7bf 2px solid; width: 8px; height: 8px; transform: rotate(45deg); }
.develop-c1 ul li:nth-child(1)::before{ display: none;}
.develop-c1 ul li:nth-child(5)::before{ top: -26px; left: calc(50% - 4px); transform: rotate(135deg);}
.develop-c1 ul li:nth-child(6)::before,
.develop-c1 ul li:nth-child(7)::before,
.develop-c1 ul li:nth-child(8)::before{ top: calc(50% - 4px); left: auto; right: -26px; transform: rotate(-135deg);}

/* about */
.about-tit-hd{ display: flex; flex-direction: column; color: #111; font-size: 20px; font-weight: 500; gap:40px;}
.about-tit-hd b{ font-weight: 200; font-size: 75px; line-height: 1.2;  font-family: 'Paperozi';}
.cupful-img{ margin-top: 120px; position: relative; left: 50%; width: calc(100vw - 10px); transform: translateX(-50%); display: flex; height: 780px; text-align: center;}
.cupful-img .itm{ flex:1; color: #fff; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; font-size: 48px; font-weight: 600; border-left: #fff 1px solid;}
.cupful-img .itm:nth-child(1){ background-image: url(../images/cupful_img11.jpg); border-left: none;}
.cupful-img .itm:nth-child(2){ background-image: url(../images/cupful_img12.jpg);}
.cupful-img .itm:nth-child(3){ background-image: url(../images/cupful_img13.jpg);}
.cupful-overview{ position: relative; left: 50%; width: calc(100vw - 10px); transform: translateX(-50%); background: url(../images/cupful_img2.jpg) no-repeat 0 0 / cover; padding: 150px 0 120px; }
.cupful-overview .inner{ max-width: 1440px; margin: 0 auto; display: flex;}
.cupful-overview .tit{ font-size: 42px; color: #111; font-weight: 600; width: 50%;}
.cupful-overview .text{ flex:1; color: #111;}
.cupful-overview .text .tx1{ font-size: 24px; font-weight: 600;}
.cupful-overview .text ul{ margin-top: 60px; border-top: #dbdbd1 1px solid; }
.cupful-overview .text ul li{ border-bottom: #dbdbd1 1px solid; padding: 30px 0; display: flex; align-items: center;}
.cupful-overview .text ul li b{ width: 140px;}
.cupful-overview .text ul li span{ font-size: 18px; font-weight: 500;}
.history-bx{ position: relative; width: 100%; display: flex; justify-content: space-between;}
.history-bx .history-hd{ width: 600px; padding: 150px 0 0 0; display: flex; flex-direction: column; color: #111; }
.history-bx .history-hd .tit{ font-size: 48px; text-align: center; text-transform: uppercase;}
.history-bx .history-hd .txt{ margin-top: 80px; text-align: center; font-size: 24px;}
.history-bx .history-hd .img{ margin-top: 120px;}
.history-bx .history-bd{ width: 50%; border-left: #ebebeb 1px solid; padding: 150px 90px 0 115px; display: flex; flex-direction: column; }
.history-bx .history-bd .itm{ color: #111;}
.history-bx .history-bd .itm + .itm{ margin-top: 90px;}
.history-bx .history-bd .itm h4{ font-size: 36px; margin-bottom: 20px;}
.history-bx .history-bd .itm ul li{ font-size: 20px; }
.history-bx .history-bd .itm ul li + li{ margin-top: 15px;}
.history-nav{ position: absolute; top: 150px; right: 0; background-color: #f7f7f7; width: 30px; border-radius: 15px; display: flex; flex-direction: column;}
.history-nav .nav-itm{ height: 30px; position: relative; width: 100%; display: flex; justify-content: center; align-items: center;}
.history-nav .nav-itm::before{ content: ''; background-color: #c8c8c8; display: flex; width: 5px; height: 5px; border-radius: 50%; }
.history-nav .nav-itm span{ position: absolute; top: 50%; right: 50px; transform: translateY(-50%); color: #c61b36; display: block; font-size: 18px; opacity: 0;}
.history-nav .nav-itm.active::before{ background-color: #c61b36; }
.history-nav .nav-itm.active span{ opacity: 1; }
.history-nav.fixed{ position: fixed; right: calc(50% - 720px); }
.history-bx + .btn-box{ margin-top: 100px;}

.vision-wr{ margin-top: 90px;}
.vision-wr .tit{ color: #ae0f2c; font-size:30px; margin-bottom: 80px; text-align: center;}
.vision-img{ text-align: center;}
.vision-img .txt{ color: #111; font-size: 74px; font-weight: 300; line-height: 1.2; font-family: 'Paperozi';}
.vision-img .vision-img-bx{ position: relative; margin-top: 25px; padding: 115px 0 0 0; display: flex; justify-content: center; gap:80px; background: url(../images/vision_bg.jpg) no-repeat 50% 0 / cover;}
.vision-img .vision-img-bx .itm{ width: 400px; display: flex; flex-direction: column; gap:50px;}
.vision-img .vision-img-bx .itm p{ position: relative; width: 100%; }
.vision-img .vision-img-bx .itm p b{ position: absolute; top: 0; left: 0; width: 100%; bottom: 0; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 36px;}
.vision-img .vision-img-bx .itm span{ font-size: 20px; color: #111;}

.business-wr{ margin-top: 90px; margin-bottom: -100px;}
.business-wr .tit{ margin: 90px 0; font-size: 60px; color: #111; font-weight:500;}
.business-bx{ display: flex; flex-direction: column; gap:150px; }
.business-bx li{ display: flex; align-items: center;}
.business-bx li .img{ width: 700px;}
.business-bx li .text{ flex:1; padding: 0 0 0 120px; color: #111;}
.business-bx li .text h4{ font-size: 42px; letter-spacing: -.05em;}
.business-bx li .text .tx1{ margin-top: 60px; font-size: 24px; font-weight: 500;}
.business-bx li .text .tx2{ margin-top: 30px; font-size: 18px;}
.business-bx li .btn-box{ justify-content: start; margin-top: 40px;}
.business-bx li:nth-child(even){ flex-direction: row-reverse; }
.business-bx li:nth-child(even) .text{ padding: 0 120px 0 0;}
.business-inq{ position: relative; left: 50%; width: calc(100vw - 10px); transform: translateX(-50%); margin-top: 120px; background-color: #f9f9ef;}
.business-inq .inner{ max-width: 1440px; margin: 0 auto; padding: 80px 0; gap:30px; display: flex; justify-content: space-between; align-items: center; font-size: 30px; font-weight: 600; color: #111; }

.ci-wr{ margin-top: 90px; color: #111;}
.ci-wr .tit{ margin: 110px 0 30px; font-size: 48px;}
.ci-wr .text{ font-size: 20px;}
.ci-wr .text2{ font-size: 20px; display: flex; justify-content: space-between; gap:30px;}
.ci-wr .text2 ul li + li{ margin-top: 10px;}

.location-bx1{ color: #111;}
.location-bx1 .tit{ font-size: 60px; font-weight: 400; margin-bottom: 40px;}
.location-bx1 .map-bx{ margin-top: 40px; width: 100%;}
.location-bx1 .map-bx iframe{ width: 100%; height: 400px;}
.location-bx2{ margin-top: 90px; padding-top: 60px; display: flex; color: #111; border-top: #ddd 1px solid;}
.location-bx2 .text{ padding-right: 20px; flex:1;}
.location-bx2 .tit{ font-size: 60px; font-weight: 400; margin-bottom: 35px;}
.location-bx2 .tit span{ font-size: 30px; color: #999;}
.location-bx2 .map-bx{ width: 700px;}
.location-bx2 .map-bx iframe{ width: 100%; height: 400px;}
.location-tx{ display: flex; flex-wrap: wrap; gap:20px 4%; font-size: 20px;}
.location-tx li{ width: 30%; display: flex; align-items: center;}
.location-tx li b{ display: flex; align-items: center; padding-right: 20px;}
.location-tx li i{ width: 48px; margin-right: 20px;}
.location-tx li span{ flex: 1;}
.location-tx li:nth-child(1){ width: 100%; }
.location-bx2 .location-tx li{ width: 100%; align-items: start;}
.location-bx2 .location-tx li span{ padding-top: 10px;}

@media screen and (max-width:1440px){

  footer .f-nav{ width: 200px;}
  footer .f-addr{ padding-top: 100px;}
  footer .copyright .logo{ max-width: 300px;}

  .main-prod{ position: relative; padding: 180px 30px 0; z-index: 2;}
  .main-hd .tit{ max-width: 400px;}
  .main-prod .main-bd .desc{ width: 560px; margin-left: 40px;}
  .main-prod .prod-nav li span{ flex:1; padding-left: 20px;}
  .main-prod .prod-slide .swiper-slide{ height: 280px;}

  .main-oem{ padding: 180px 30px 0;}
  .main-oem .oem-slide .swiper-slide{ gap:30px 50px; grid-template-columns: 2fr 1fr 1fr;}
  .main-oem .oem-slide .swiper-slide .itm .img{ padding: 20px;}
  .main-oem .oem-slide .swiper-slide .itm.lg .img{ width: 100%; height: auto; padding: 40px;}
  .main-oem .oem-slide .swiper-slide .itm .img img,
  .main-oem .oem-slide .swiper-slide .itm.lg .img img{ width: 100%; height: auto;}

  #container{ padding: 210px 30px 100px;}

  .business-inq .inner{ padding: 80px 30px;}

  @media screen and (max-width:1024px){
    
    nav{ display: none;}

    #header{ padding: 0 2rem; height: 5.4rem;}
    #header .logo{ width: 9rem;}
    #header .logo a{ height: 3.3rem;}
    #header .utill{ gap:1.5rem;}
    #header .utill .naver{ font-size: 0; color: transparent; }
    #header .utill .lang{ display: none;}
    #header .bt-menu{ display: block;}

    #header.aMnuOpen .logo{ z-index: 12;}
    #header.aMnuOpen .utill{ margin: 0; z-index: 12;}
    #header.aMnuOpen .utill .lang{ display: block; margin-left: 0;}
    #header.aMnuOpen .utill .lang .langBtn::after{ border-color:#fff;}
    #header.aMnuOpen .bt-menu i:nth-child(2){ opacity: 0;}
    #header.aMnuOpen .bt-menu i:nth-child(1){ margin: 0; transform: translateX(-50%) translateY(-50%) rotate(45deg);}
    #header.aMnuOpen .bt-menu i:nth-child(3){ margin: 0; transform: translateX(-50%) translateY(-50%) rotate(-45deg);}

    .visual_sect{ width: 100vw; height: auto; margin-bottom: 50px;}
    .visual_sect .img img{ height: auto; }

    .inquiry-bx .inquiry-bx-list{ gap:20px;}
    .inquiry-bx .inquiry-bx-list .itm{ width: calc(33.3% - 13.3px);}
    .inquiry-bx .inquiry-bx-list .itm span{ font-size: 24px;}
    .inquiry-bx .inquiry-bx-list .itm.active span::before{ width: 40px; height: 28px;}
    .inquiry-bx .inquiry-bx-list.n2 .itm{ width: calc(50% - 10px);}

    .prod-view-hd .img{ width: 40%;}
    .prod-view-hd .text{ width: 60%; padding: 0 30px;}

    .modalPop .pop-close{ top: 0;}

    .customers-list .itm{ padding: 20px 10px; height: auto;}
    
    .develop-bd .inner{ padding: 90px 30px;}

    /* about */ 
    .cupful-overview .tit{ width: 30%; }
    .history-bx .history-hd{ width: 30%;}
    .history-bx .history-bd{ width: 60%; padding: 150px 40px 0 40px;}

    .business-bx li{ align-items: start; }
    .business-bx li .img{ width: 40%;}
    .business-bx li .text{ padding: 0 0 0 30px;}
    .business-bx li:nth-child(even) .text{ padding: 0 30px 0 0;}

    .location-tx li{ width: 40%;}

    
    .lay-pop .pop-bt .btn{ padding: 20px;}
    .modalPop .pop-close{ top: 0;}

    @media screen and (max-width:820px){ 

      footer{ padding: 3.5rem 1.8rem 2rem;}
      footer .footerWrap{ flex-direction: column; gap:3rem;}    
      footer .f-nav{ display: flex; flex-wrap: wrap; width: 100%; font-size: 1.2rem;}
      footer .f-nav li{ width: 33.3%;}
      footer .btDown{ order:2; position: relative; width: 20rem; height: 4.5rem;}
      footer .btDown::after{ width: 1.5rem; height: 1.5rem;}
      footer .f-addr{ order:3; font-size: 1.1rem; gap:2.5rem; padding-top: 0;}
      footer .copyright{ flex-direction: column; gap:1rem; font-size: 1rem; margin-top: 4rem; align-items:start;}
      footer .copyright .logo{ max-width: 60vw; order:2;}
      footer .bt-top{ right: 2rem; bottom: 3rem; width: 5.4rem; height: 5.4rem; background-size: 2rem;}

      .menu-bg .bg-part{ background-image: none;}

      .menu-content{ padding: 120px 30px 0;}
      .menu-content .allMenu > li > a{ font-size: 26px;}

      #mainVisual .bg{ min-height: 150vw;}
      #mainVisual .text{ padding: 6rem 2rem; bottom: 0; top: auto;}
      #mainVisual .text .text1{ font-size: 3.9rem;}
      #mainVisual .text .text2{ font-size: 1.8rem;}
      #mainVisual .custom-scrollbar{ width: 6.5rem;}   

      .main-hd{ flex-direction: column; padding: 0 2rem; align-items: center; margin-bottom: 5rem;}
      .main-hd .tit{ font-size: 4rem; text-align: center; width: 100%;}
      .main-hd .btz{ margin-top: 2.4rem;}

      .main-business{ background-color: #b20f2d; padding: 0;}
      .main-business .text{ position: relative; padding: 5.5rem 1rem 5rem; color: #fff; font-size: 2.3rem; height: auto; text-align: center;}
      .main-business .text h2{ display: none;}
      .main-business .sct{ position: relative;  flex-direction: column; padding: 0 2rem; height: auto;}
      .main-business .sct .img{ width: 100%;}
      .main-business .sct .img img{ height: 30rem;}
      .main-business .sct .desc{ width: 100%; font-size: 1.8rem; padding: 4rem 0 5.5rem 0;}
      .main-business .sct .desc i{ width: 5rem;}
      .main-business .sct .desc span{ font-size: 3.6rem; margin-top: 1rem;}
      .main-business .sct .desc strong{ margin-top: 1.4rem;}

      .main-prod{ margin: 6.5rem 0 0 0; padding: 0;}
      .main-prod .main-bd{ position: relative; padding: 8rem 2rem 0; flex-direction: column; }
      .main-prod .main-bd .thumb{width: 100%; }
      .main-prod .main-bd .thumb img{ width: 100%;}
      .main-prod .prod-nav{ position: absolute; top: 0; width: 100%; left: 0; padding: 0 2rem; gap:2.5rem; display: flex; justify-content: center;}
      .main-prod .prod-nav li{ position: relative;}
      .main-prod .prod-nav li + li{ margin-top: 0;}
      .main-prod .prod-nav li button{ width: 100%; font-size: 1.8rem; padding: .5rem 0; line-height: 1.1; display: flex; justify-content: center; align-items: center;}
      .main-prod .prod-nav li span{ display: none;}
      .main-prod .prod-nav li button::before{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0;}
      .main-prod .prod-nav li.active button::before{ width: 0;}
      .main-prod .prod-nav li.on button::before{ width: 100%;}
      .main-prod .main-bd .desc{ width: 100%; margin-top: 4rem; margin-left: 0;}
      .main-prod .prod-slide{ display: flex; flex-direction: column; width: 100%;}
      .main-prod .prod-slide .swiper-slide{ height: 22rem;}
      .main-prod .prod-slide .swiper-slide .text{ font-size: 1.2rem; gap:.5rem;}
      .main-prod .prod-slide .swiper-wrapper{ order:1;}
      .main-prod .prod-slide .pag{ order:2; margin: 2.5rem 0 0 0; text-align: center;}
      .main-prod .prod-slide .pag .swiper-pagination-bullet{ width: .8rem; height: .8rem;}

      .main-oem{ margin: 11rem 0 0 0; padding: 0;}
      .main-oem .main-bd{ padding: 0 2rem;}
      .main-oem .oem-slide .swiper-slide{ display: flex; flex-wrap: wrap; gap:2.5rem 2rem;}
      .main-oem .oem-slide .swiper-slide .itm{ width: calc(50% - 1rem);}
      .main-oem .oem-slide .swiper-slide .itm .img{ width: 100%; height: 32vw;}
      .main-oem .oem-slide .swiper-slide .itm .img img{ width: 30vw; height: 30vw;}
      .main-oem .oem-slide .swiper-slide .itm.lg{ width: 100%;}
      .main-oem .oem-slide .swiper-slide .itm.lg .img{ width: 100%; height: 61vw;}
      .main-oem .oem-slide .swiper-slide .itm.lg .img img{ width: 61vw; height: 61vw;}
      .main-oem .oem-slide .swiper-slide .txt{ font-size: 1.2rem; margin-top: 1.5rem; gap:.5rem}
      .main-oem .oem-slide .swiper-slide .txt strong{ font-size: 1.8rem;}
      .main-oem .oem-slide .pag .swiper-pagination-bullet{ width: .8rem; height: .8rem;}

      .main-process{ margin: 6rem 0 0 0;}
      .main-process .bg{ height: 105vw; }
      .main-process .text{ padding: 4rem 2rem; text-align: center;}
      .main-process .text b{ font-size: 3rem;}
      .main-process .text p{ font-size: 1.2rem; width: 100%;}
      .main-process .img{ display: none;}

      .main-inq{ padding: 4rem 2rem; flex-direction: column; font-size: 1.8rem; text-align: center;}
      .main-inq a{ margin: 4rem auto 0; display: flex; justify-content: center; align-items: center; gap:2rem; padding: 0;}
      .main-inq a i{ position: relative; top: auto; right: auto; margin: 0; width: 2.6rem; height: 2rem;}
	  .main-inq a i::before,
	  .main-inq a i::after{ width: 2.6rem; height: 2rem; top: auto;  margin: 0; }

      .prod-hd{ flex-wrap: wrap; }
      .prod-hd .tit{ width: 100%; margin-bottom: 20px;}

      .form-wr{ gap:20px 30px;}

      .prod-view-hd .text .tx-tit{ font-size: 30px;}
      .prod-view-hd .text .btn{ width: 100%;}

      .expertise-bx li b{ width: 40%;}

      /* about */
      .vision-img .vision-img-bx{ gap:20px;}

      .location-bx2{ flex-direction: column;}
      .location-bx2 .map-bx{ width: 100%; margin-top: 20px;}
      
      @media screen and (max-width:768px){  

        .cupful-img .itm{ font-size: 2rem;}

        .lay-pop .pop-con{ padding: 60px 30px;}

        @media screen and (max-width:640px){        

          #header.aMnuOpen{ height: 16rem; padding: 0;}
          #header.aMnuOpen .logo{ position: absolute; top: 1.1rem; left: 2rem; z-index:14;}
          #header.aMnuOpen .utill{ padding: 10rem 2rem 3rem 2rem; height: 16rem; border-bottom: #f0f0f0 1px solid; width: 100%; justify-content: space-between;}
          #header.aMnuOpen .utill .naver{ border: #111 1px solid;  width: 12.4rem; font-size: 1.2rem; color:#111; display: flex; justify-content: center; align-items: center; height: 3rem; border-radius: 2rem; }
          #header.aMnuOpen .utill .naver::before{ width: 1rem; height: 1rem;}
          #header.aMnuOpen .utill .menuBtn{ position: absolute; top: 1.6rem; right: 2rem; width: 2.2rem;}
          #header.aMnuOpen .utill .menuBtn i:nth-child(1), 
          #header.aMnuOpen .utill .menuBtn i:nth-child(3),
          #header.aMnuOpen .utill .menuBtn:hover i:nth-child(1), 
          #header.aMnuOpen .utill .menuBtn:hover i:nth-child(3),
          #header .utill .menuBtn:hover i:nth-child(1),
          #header .utill .menuBtn:hover i:nth-child(3){ width: 1.8rem;}
          #header.aMnuOpen .utill .lang{ display: none;}
          #header.aMnuOpen .utill .lang-mob{ display: flex; gap:1.4rem}
          #header.aMnuOpen .utill .lang-mob a{ color: #b2b2b2;}
          #header.aMnuOpen .utill .lang-mob a.active{ color: #111;}
          
          .menu-content{ padding: 16rem 2rem 0;}
          .menu-content .allMenu{ flex-direction: column; overflow-y: auto; height: calc(100vh - 16rem); padding-top: 1rem; display: block;}
          .menu-content .allMenu > li{ flex: none; width: 100%;}
          .menu-content .allMenu > li + li{ margin-top: 1.8rem;}
          .menu-content .allMenu > li > a{ position: relative; font-size: 2rem;}
          .menu-content .allMenu > li > a::after{ content: ''; position: absolute; display: block; top: 50%; right: .5rem; margin-top: -1rem; transform: rotate(135deg); width: 1.2rem; height: 1.2rem; border-top: #111 .2rem solid; border-right:#111 .2rem solid;}
          .menu-content .allMenu > li.on > a::after{ margin-top: -.6rem; transform: rotate(-45deg);}
          .menu-content .subDepth{ margin: 1.5rem 0 0 0; padding: 0 0 0 1rem; }
          .menu-content .depth3{ margin: 1.5rem 0 0 0; padding: 0 0 0 1.5rem;}
          .menu-content .subDepth {  max-height: 0;  opacity: 0;  transform: translateY(-10px);  overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;}
          .menu-content .allMenu > li.on .subDepth {  max-height: 55rem;  opacity: 1;  transform: translateY(0);}

          .main-prod .prod-nav li{ flex: 1;}

          #container{ padding: 10rem 2rem;}
          .sub-tit{ flex-direction: column; align-items: start; gap:1rem; margin-bottom: 4rem;}
          .sub-tit .location{ font-size: 1.2rem; gap:.5rem}
          .sub-tit .location li.h a{ width: 1.4rem; height: 1.4rem;}
          .sub-tit .location li:last-child .bt{ font-size: 1.2rem; color:#000; }
          .sub-tit .location > li{ padding: 0 0 0 1rem; line-height: 1.1;}
          .sub-tit .location > li::before{ width: .6rem;}
          .sub-tit .location .depth3{ top: 2rem; padding: 1rem 1.5rem;}
          .sub-tit .location .depth3 li + li{ margin-top: .5rem;}
		  .about .sub-tit .location .depth3{ width: 11rem;}
          .products .sub-tit .location .depth3{ width: 16rem;}
          .oem .sub-tit .location .depth3{ width: 11rem;}

          .div-tab{ margin-bottom: 4rem;}
          .div-tab .itm{ height: 4rem; width: 10rem; font-size: 1.5rem;}
          .div-tab.prod{ flex-wrap: wrap;}
          .div-tab.prod .itm,
          .div-tab.prod.oem .itm{ flex: none; width: auto; font-size: 1.4rem;}
          .div-tab.prod .itm i{ width: 3rem; height: 3rem;}
          .div-tab.prod.oem{ margin: 0 0 4rem 0;}

          .tbl-hd{ flex-direction: column; align-items: start; gap:1rem; margin-bottom: 3rem;}
          .tbl-hd .sch-bx{ width: 100%;}
          .tbl-hd .sch-bx .input{ height: 4rem;}
          .tbl-hd .sch-bx .sch{ width: 4rem; height: 4rem; margin-top: -2rem;}

          .news-list{ gap: 3rem 2rem;}
          .news-list .itm{ gap: 1.5rem; width: calc(50% - 1rem);}
          .news-list .itm .text{ gap:.5rem}
          .news-list .itm .text .tit{ font-size: 1.5rem; max-height: 4.5rem;}  
          
          .no-text{ flex-direction: column !important; padding: 4rem 2rem; gap: 1rem !important; font-size: 1.3rem;}
          .no-text::before{ width: 3rem; height: 3rem;}

          div.paging{ margin-top: 3.5rem;}
          div.paging a, 
          div.paging strong{ width: 3rem; height: 3rem; line-height: 3rem;}

          table.list colgroup,
          table.list thead{ display: none;}
          table.list tbody tr{ display: flex; flex-wrap: wrap; border-bottom: #e6e6e6 1px solid; padding: 1.4rem 0;}
          table.list tbody tr td{ font-size: 1.3rem; padding: 0; border: none; text-align: left;}
          table.list tbody tr td.num{ width: 4rem;}
          table.list tbody tr td.date{ text-align: right; margin-left: auto;}
          table.list tbody tr td.subject{ width: 100%; order:3; margin-top: 1rem; font-size: 1.5rem;}

          .tbl-view .view-hd{ padding: 3rem 0; flex-direction: column;}
          .tbl-view .view-hd .subject{ font-size: 2rem;}
          .tbl-view .view-hd .date{ margin-top: 1rem;}
          .tbl-view .view-att{ padding: 1rem 0;}
          .tbl-view .view-att dt{ font-size: 1.3rem; width: 8rem;}
          .tbl-view .view-att dd{ gap:1rem 2rem;}
          .tbl-view .view-att dd .itm{ font-size: 1.3rem;}
          .tbl-view .view-att dd .itm::before{ width: 1.4rem; height: 1.4rem;}
          .tbl-view .view-con{ padding: 3rem 0; font-size: 1.4rem;}
			
          .prod-hd{ padding: 2rem 0; flex-direction: column; align-items: start;}
          .prod-hd .tit{ font-size: 2rem; margin-bottom: 1rem; width:100%;}
          .prod-hd .text{ font-size: 1.4rem; width:100%;}
          .prod-hd .btz{ width: 100%; margin-top: 2rem; justify-content: start;}
          
          .prod-view{ margin-bottom:-10rem;}
          .prod-view-hd{ flex-direction: column; padding: 0;}
          .prod-view-hd .img{ width: 100%;}
          .prod-view-hd .text{ width: 100%; padding: 3rem 0 0;}
          .prod-view-hd .text .tx-tit{ font-size: 2.2rem;}
          .prod-view-hd .text .tx-con{ font-size: 1.6rem; margin-top: 2rem;}
          .prod-view-hd .text .tx-exc{ font-size: 1.3rem; margin-top: 2rem;}
          .prod-view-hd .text .btn{ margin-top: 4rem; height: 5rem; line-height: 5rem;}
          .prod-view-bd{ padding: 4rem 0; width: 100vw; background-color: #fafaf7; padding: 0 0 5rem 0;}

          .dv-wait{ padding: 8rem 0;}

          .sub-tit-hd{ font-size: 1.4rem; gap:1rem; margin: 0 0 4rem 0;}
          .sub-tit-hd b{ font-size: 2rem;}

          .visual_sect .img img{ height: 10rem;}

          .inquiry-bx{ padding: 1.4rem 0 0 0;}
          .inquiry-bx .inquiry-bx-tit{ font-size: 1.6rem;}
          .inquiry-bx .inquiry-bx-list{ padding: 2rem 0; gap:1rem;}
          .inquiry-bx .inquiry-bx-list .itm,
          .inquiry-bx .inquiry-bx-list.n2 .itm{ width: calc(50% - .5rem);}
          .inquiry-bx .inquiry-bx-list .itm span{ font-size: 1.4rem; padding: .4rem;}
          .inquiry-bx .inquiry-bx-list .itm.active span::before{ width: 2rem; height: 1.4rem; margin-bottom: .4rem;}

          .form-wr{ padding: 2rem 0;}
          .form-wr .form-itm{ width: 100%;}
          .form-wr .form-itm .hd{ font-size: 1.4rem; padding: .5rem 0;}          
          .form-wr .form-itm .ul-list01{ margin-top: 1rem;}

          .filebox .upload-name{ height: 4rem; padding: 0 1rem;}
          .filebox label{ height: 4rem; width: 8rem; font-size: 1.3rem; padding: 0;}

          .privacy-bx{ padding: 2rem 0;}
          .privacy-bx .text{ margin: 1.5rem 0 0 0; padding: 1.4rem;}
          .privacy-bx .dv-chk{ padding: 1.5rem 0; flex-direction: column; gap:1rem; align-items: start;}
          .privacy-bx .dv-chk label{ font-size: 1.3rem;}
                    
          .cert-list{ flex-wrap: wrap; gap: 3rem 1.8rem; margin-top:4rem;}
          .cert-list .itm{ width: calc(50% - .9rem); flex: none; max-width: none;}
          .cert-list .itm .txt{ font-size: 1.4rem; margin-top: 1rem; padding: 0 .4rem;}
          
          .modalPop .inner{ width: 30rem; height: 42rem;}
          .modalPop .pop-close{ width: 3rem; height: 3rem; top:0; right: 0;}
          .modalPop #imgModalImg{ height: 42rem;}

          .expertise-bx li{ padding: 2rem 0; flex-direction: column; font-size: 1.4rem;}
          .expertise-bx li:first-child{ padding-top: 0;}
          .expertise-bx li b{ width: 100%; font-size: 2rem; margin-bottom: 1rem;}
          .expertise-bx li br,
          .expertise-bx li b br{ display: none;}

          .customers-list{ gap: 3rem 1.8rem;}
          .customers-list .itm{ width: calc(50% - .9rem); }

          .develop-hd{ font-size: 1.3rem; gap:2rem;}
          .develop-hd b{ font-size: 2rem;}
          .develop-bd{ margin-top: 4rem; width: 100vw; min-height:auto;}
          .develop-bd .inner{ padding: 3rem 2rem; flex-direction: column;}
          .develop-bd .text{ width: 100%; gap:2rem; font-size: 1.4rem;}
          .develop-bd .text .tit{ font-size: 2rem;}
          .develop-bd ul{ width: 100%; padding: 0; margin-top: 3rem; gap:2rem;}
          .develop-bd ul li{ width: calc(50% - 1rem); font-size: 1.6rem; padding: 0 2rem; height: 10rem;}

          .develop-c1{ margin-top: 4rem;}
          .develop-c1 .tit{ font-size: 2rem; margin-bottom: 2rem;}
          .develop-c1 ul{ gap:2rem;}
          .develop-c1 ul li{ width: calc(50% - 1rem); padding: 1rem 1rem 5rem 1rem; font-size: 1.3rem; min-height:20rem;}
          .develop-c1 ul li b{ font-size: 1.2rem;}
          .develop-c1 ul li strong{ font-size: 1.8rem;}
          .develop-c1 ul li span{ font-size: 1.2rem;}
          .develop-c1 ul li::after{ bottom: 1rem; right: 1rem; width: 3rem; height: 3rem;}
          .develop-c1 ul li::before{ left: -1.6rem;}
          .develop-c1 ul li:nth-child(3)::before{ content: ''; top: -1.6rem; left: calc(50% - .8rem); transform: rotate(135deg);}
          .develop-c1 ul li:nth-child(4)::before{ content: ''; left: auto; right: -1.6rem; transform: rotate(-135deg);}
          .develop-c1 ul li:nth-child(5)::before{ content: ''; top: -1.6rem; }
          .develop-c1 ul li:nth-child(6)::before{ content: ''; left: -1.6rem; transform: rotate(45deg);}
          .develop-c1 ul li:nth-child(7)::before{ content: ''; top: -1.6rem; left: calc(50% - .8rem); transform: rotate(135deg);}
          .develop-c1 ul li:nth-child(8)::before{ content: ''; left: auto; right: -1.6rem;}
          .develop-c1 ul li:nth-child(3){ order:4;}
          .develop-c1 ul li:nth-child(4){ order:3;}
          .develop-c1 ul li:nth-child(5){ order:5;}
          .develop-c1 ul li:nth-child(6){ order:6;}
          .develop-c1 ul li:nth-child(7){ order:8;}
          .develop-c1 ul li:nth-child(8){ order:7;}

          /* about */
          .about-tit-hd{ font-size: 1.4rem; gap:2rem;}
          .about-tit-hd b{ font-size: 3rem;}
          .cupful-img{ margin-top: 4rem; width: 100vw; height: 20rem;}
          .cupful-img .itm{ font-size: 1.8rem; padding: 1rem;}
          .cupful-overview{ width: 100vw; padding: 5rem 2rem;}
          .cupful-overview .inner{ flex-direction: column;}
          .cupful-overview .tit{ width: 100%; font-size: 2rem;}
          .cupful-overview .text .tx1{ font-size: 1.4rem; margin-top: 1rem;}
          .cupful-overview .text ul{ margin-top: 3rem;}
          .cupful-overview .text ul li{ padding: 1rem 0; flex-direction: column;}
          .cupful-overview .text ul li b{ width: 100%;}
          .cupful-overview .text ul li span{ font-size: 1.6rem; margin-top: 1rem; width: 100%;}
          .history-bx{ flex-direction: column; margin-top: 5rem;}
          .history-bx .history-hd{ width: 100%; padding: 0;}
          .history-bx .history-hd .tit{ font-size: 2rem; text-align: left;} 
          .history-bx .history-hd .txt{ margin-top: 2rem; text-align: left; font-size: 1.4rem;}
          .history-bx .history-hd .img{ margin-top: 2rem;}
          .history-bx .history-bd{ position: relative; border-left: none; padding: 4rem 0 0 0; width: 100%;}
          .history-bx .history-bd .itm h4{ font-size: 2rem;}
          .history-bx .history-bd .itm ul li{ font-size: 1.4rem;}
          .history-bx .history-bd .itm + .itm{ margin-top: 4rem;}
          .history-nav{ display: none;}
          .history-bx + .btn-box{ margin-top: 5rem; flex-wrap: wrap;}

          .vision-wr{ margin-top: 4rem;}
          .visual_sect{ margin-bottom: 3rem;}
          .vision-wr .tit{ font-size: 2.4rem; margin-bottom: 3rem;}
          .vision-img .txt{ font-size: 2.4rem;}
          .vision-img .vision-img-bx{ background-size: 100% auto; padding-top: 6rem; flex-direction: column;}
          .vision-img .vision-img-bx .itm{ width: 100%; align-items: center; gap:2rem;}
          .vision-img .vision-img-bx .itm p{ width: 16rem;}
          .vision-img .vision-img-bx .itm p b{ font-size: 2rem;}
          .vision-img .vision-img-bx .itm span{ flex:1; font-size: 1.5rem;}
          .vision-img .vision-img-bx .itm + .itm{ margin-top: 3rem;}

          .business-wr{ margin-top: 4rem; margin-bottom: -10rem;}
          .business-wr .tit{ margin: 4rem 0; font-size: 2.4rem;}
          .business-bx{ gap:4rem;}
          .business-bx li,
          .business-bx li:nth-child(even){ flex-direction: column;}
          .business-bx li .img{ width: 100%;}
          .business-bx li .text,
          .business-bx li:nth-child(even) .text{ padding: 2rem 0 0 0;}
          .business-bx li .text h4{ font-size: 1.8rem;}
          .business-bx li .text .tx1{ margin-top: 2rem; font-size: 1.6rem;}
          .business-bx li .text .tx2{ margin-top: 1rem; font-size: 1.4rem;}
          .business-bx li .btn-box{ margin-top: 2rem;}
          .business-inq{ margin-top: 4rem; width: 100vw;}
          .business-inq .inner{ padding: 4rem 2rem; flex-direction: column; font-size: 1.8rem; text-align: center;}

          .ci-wr{ margin-top: 4rem;}
          .ci-wr .tit{ margin: 5rem 0 1rem; font-size: 2.4rem;}
          .ci-wr .text{ font-size: 1.4rem;}
          .ci-wr .text2{ font-size: 1.4rem; flex-direction: column;}
          .ci-wr .text2 ul li + li{ margin-top: .5rem;}

          .location-bx1 .tit{ margin-bottom: 2rem; font-size: 2.4rem;}
          .location-bx2{ margin-top: 4rem; padding-top: 3rem;}
          .location-bx2 .tit{ font-size: 2.2rem; margin-bottom: 2rem;}
          .location-bx2 .tit span{ font-size: 1.6rem;}
          .location-tx{ flex-direction: column; font-size: 1.4rem;}
          .location-tx li{ width: 100%; gap:0;}
          .location-tx li i{ width: 2rem; margin-right: 1rem;}
          .location-tx li:nth-child(1){ flex-direction: column; align-items: start;}
          .location-tx li:nth-child(1) b{ margin-bottom: 1rem;}
          .location-tx li b{ margin-right: 1rem;}
          .location-bx2 .location-tx li span{ padding-top: 0;}
          .location-bx1 .map-bx iframe,
          .location-bx2 .map-bx iframe{ height: 30rem;}
          
          .lay-pop .pop-inner{ padding: 4vw;}
          .lay-pop .pop-con{ padding: 4rem 1.5rem;}
          .lay-pop.sm .pop-bx{ width: 90vw;}
          .lay-pop.sm .pop-con{ padding: 2rem;}
          .lay-pop .pop-bt{ padding: 1.5rem; border-top: #e6e6e6 1px solid;}
          .main-pop{ max-width: 32rem; width: 90vw;}

        }/* /640px */

      }/* /768px */

    }/* /820px */

  } /* /1024px */

} /* /1440px */

@media screen and (min-width:1024px) and (max-height: 700px) {
  .main-pop{ max-width: 50vh; width: auto;}
}