@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; overflow: hidden;}

#header{ position: absolute; top: 0; left: 0; width: 100%; height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 90px; transform: translateY(-100%); z-index:3; }
#header .logo{ width: 252px;}
#header .logo a{ display: block; height: 34px; 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 .bt-menu{ position: relative; width: 38px; height: 38px; color: transparent; font-size: 0; }
#header .bt-menu i{ display: block; width: 38px; height: 1px; background-color: #111; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); transition: all .3s ease;}
#header .bt-menu i:nth-child(1){ margin-top: -9px;}
#header .bt-menu i:nth-child(3){ margin-top: 8px;}
#header .bt-menu:hover i:nth-child(2){ width: 20px;}

nav > ul{ display: flex; align-items: center; gap: 35px; }
nav a{ display: block;}
nav > ul > li{ position: relative;}
nav > ul > li > a{ line-height: 120px; color: #111; font-size: 20px; font-family: 'GMarketSans';}
nav > ul > li > a:hover{ text-decoration: none;}
nav > ul > li > a::after{ content: ''; position: absolute; height: 2px; width: 0; top: 77px; left: 50%; background-color: #0a4ed9; display: block; opacity: 0; transition: all .3s ease;}
nav > ul > li:hover > a::after{ left: 0; width: 100%; opacity: 1;}
nav .subDepth{ position: absolute; top: 108px; left: 50%; width: 196px; padding: 35px 30px; border-radius: 30px; background-color: #0a4ed9; transform: translateX(-50%); font-size: 16px; display: none;}
nav .gnb2 .subDepth{ width: 210px;}
nav .gnb3 .subDepth{ width: 230px;}
nav .gnb4 .subDepth{ width: 120px;}
nav .subDepth > li > a{ color: #fff; line-height: 1.1; font-size: 16px;}
nav .subDepth > li:hover > a{ opacity: 1;}
nav .subDepth > li + li{ margin-top: 25px;}
nav .subDepth > li > ul{ padding: 10px 0 0 0;}
nav .subDepth > li > ul > li > a{ font-size: 16px; color: #fff; opacity: .5; text-indent: -10px; padding-left: 10px; }
nav .subDepth > li > ul > li > a::before{ content: ''; width: 4px; height: 1px; background-color: #fff; display: inline-block; margin-right: 4px; vertical-align: 4px;}
nav .subDepth > li > ul > li:hover > a{ opacity: 1; text-decoration: none;}
nav .subDepth > li > ul > li + li{ margin-top: 5px;}

.main #header .logo a{ filter: brightness(0) invert(1);}
.main nav > ul > li > a{ color: #fff; }
.main #header .bt-menu i{ background-color: #fff; }

footer{ position: relative; padding: 145px 0 150px; background: #0b50d9 url(../images/bg_footer.jpg) no-repeat 100% 100%; color: #fff; }
footer .footerWrap{ position: relative; display: flex; max-width: 1680px; width: 100%; margin: 0 auto;}
footer .logo{ width: 660px;}
footer address{ display: flex; flex: 1; flex-direction: column; font-size: 18px; color:#c0cef2; }
footer address .addr1{ display: flex; flex-direction: column; gap:10px;}
footer address .addr1 b{ color:#fff;}
footer address .addr2{ color:#c0cef2; margin-top: 90px; display: flex; flex-direction: column;}
footer address .addr2 b{ margin-bottom: 20px; color:#fff;}
footer .f-mn{ width: 310px; display: flex; flex-direction: column; gap:10px;}
footer .f-mn a{ color: #fff; }
footer .copyright{ position: absolute; bottom: 0; left: 0; font-size: 18px; color:#c0cef2; }
footer .copyright .copy{ width: 660px; padding-bottom: 5px;}
footer .tel{ margin-top: 130px;}
footer .tel b{ color: #fff; }
footer .btn.lg{ position: absolute; bottom: 0; right: 0; width: 330px; padding: 0 35px; justify-content: space-between; z-index: 9;}
footer .bt-top{ position: absolute; width: 74px; height: 74px; display:block; border-radius: 50%; border:#fff 2px solid; right: 0; top: 0; overflow: hidden; color: transparent; }
footer .bt-top::before{ content: ''; display: block; position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -13px; width: 26px; height: 26px; background: url(../images/top.png) no-repeat 50% 50% / cover;  transition: top .6s ease; }
footer .bt-top::after{ content: ''; display: block; position: absolute; top: 150%; left: 50%; margin: -13px 0 0 -13px; width: 26px; height: 26px; background: url(../images/top.png) no-repeat 50% 50% / cover;  transition: top .6s ease; }
footer .bt-top:hover{ opacity: .6;}
footer .bt-top:hover:before {top: -150%;}
footer .bt-top:hover:after {top: 50%;}

.menu-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 10;}
.menu-content{ position: fixed; top: 0; left: 0; z-index: 11; width: 100%; height: 100vh; padding: 0 0 0 90px; background-color: rgba(0,0,0,.8); backdrop-filter: blur(10px); display: none;}
.menu-content .allMenu{ margin: 150px 0 0 0; display: flex; flex-wrap: wrap; color: #fff; gap: 90px;}
.menu-content .allMenu a{ display: block; color: #fff; font-family: 'GMarketSans'; text-decoration: none;}
.menu-content .allMenu > li{ flex:1;}
.menu-content .allMenu > li > a{ font-size: 40px; font-weight: 400;}
.menu-content .allMenu > li > ul{ margin: 80px 0 0 0;}
.menu-content .subDepth{ margin: 25px 0 0 0;}
.menu-content .subDepth > li + li{ margin-top: 25px;}
.menu-content .subDepth > li > a{ font-size: 20px; 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: 20px; padding-right:1rem;}
.menu-content .subDepth li > ul > li > a::before{ content: ''; width: 4px; height: 1px; background-color: #fff; display: inline-block; margin-right: 10px; vertical-align: 4px;}
.menu-content .subDepth li > ul > li > a:hover{ color: #fff; text-decoration: none;}
.menu-content .menu-hd{ display: flex; justify-content: space-between; height: 120px; padding: 0; align-items: center;}
.menu-content .close{ position: absolute; width: 38px; height: 38px; display: block; top: 40px; right: 90px; color: transparent; font-size: 0;}
.menu-content .close i{ position: absolute; top: 50%; left: 50%; width: 38px; height: 1px; background-color: #fff; display: block; transform: translate(-50%, -50%) rotate(45deg);}
.menu-content .close i:nth-child(2){ transform: translate(-50%, -50%) rotate(-45deg);}

/* .lay-pop */
.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: transparent;}
.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;}

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

#mainVisual{ position: relative; width: 100%; overflow: hidden; z-index: 2;}
#mainVisual .visualSlide{ border-radius:0; transform: scale(1.2); transition: all 1.6s ease; }
#mainVisual.ani .visualSlide{ transform: scale(1); }
#mainVisual .bg .bg-pc{ height: 100vh; background-size: cover; }
#mainVisual .bg .bg-mob{ height: 100vh; background-size: cover; display: none;}
#mainVisual .copy{ position: absolute; top: 0; bottom: 0; padding: 0 0 0 85px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: start; color: #fff; text-align: center; font-weight: 800; font-size: 100px; line-height: 1.4; font-family: 'GMarketSans';}
#mainVisual .ctlr{ position: absolute; bottom: 60px; left: 0; padding: 0 90px; display: flex; gap:5px; z-index:2;} 
#mainVisual .ctlr button{ position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0; border:#fff 2px solid; border-radius: 50%; opacity: .3; transition: all .3s ease;}
#mainVisual .ctlr button::after{ content: ''; width: 10px; height: 10px; display: inline-block; transform: rotate(45deg); border-top: #fff 2px solid; border-right: #fff 2px solid; }
#mainVisual .ctlr button.prev::after{ transform: rotate(-135deg);}
#mainVisual .ctlr button:hover{ opacity: 1;}
#mainVisual .ctlr button.swiper-button-disabled:hover{ opacity: .3;}

.scroll-d-box{ position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); z-index: 5; text-transform: uppercase; } 
.scroll-d-box span{ color: #fff; font-size: 18px; font-family: 'GMarketSans'; font-weight: 600;} 
.scroll-d-box i{ position: relative; display: block; height: 60px; width: 4px; background: rgba(255,255,255,.25); margin: 30px auto 0; overflow: hidden; } 
.scroll-d-box i::before{ content: ''; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 4px; height: 20px; border-radius: 0; background: #fff; animation: scroll-d linear infinite 3s; } 
@keyframes scroll-d { 
  0% { top: -100%; } 
  100% { top: 100%; } 
}

.main-tbx{ position: relative;}
.main-tit{ position: relative; font-size: 78px; color: #111; font-weight: 600; font-family: 'GMarketSans'; letter-spacing: -.02em; line-height: 1.1;}

.main-vision{ position: relative; min-height: 1500px; overflow: hidden; background-color: #f9fafe; padding: 140px 0 0;}
.main-vision > *{ position: relative;}
.main-vision .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 1500px; background-image: url('../images/main_vision.jpg'); background-size: cover; overflow: hidden; animation: wiggle 20s linear infinite;}
@keyframes wiggle {
  0% {
    transform: scale(1) translate3d(0, 0, 0.01px) rotateY(-20deg) rotateX(5deg);
  }
  50% {
      transform: scale(1.4)  translate3d(0, 0, 0.01px) rotateY(20deg) rotateX(5deg);
  }
  100% {
      transform: scale(1) translate3d(0, 0, 0.01px) rotateY(-20deg) rotateX(5deg);
  }
}
.main-vision .main-tbx{ text-align: center;}
.main-vision .main-tbx p{ font-size: 30px; color: #111; }
.main-vision .mv-bx{ position: relative; display: flex; justify-content: center; width: 100%; max-width: 1680px; margin: 110px auto 120px;}
.main-vision .mv-bx .itm{ position: relative; background-color: #0a4ed9; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 35px 30px; border-radius: 30px; height: 445px;}
.main-vision .mv-bx .itm i{ position: absolute; top: 30px; right: 40px; }
.main-vision .mv-bx .itm .tit{ font-size: 34px; font-weight: 600; line-height: 1.1; }
.main-vision .mv-bx .itm p{ font-size: 20px; height: 100px;}
.main-vision .t1{ font-size: 48px; text-align: center;}
.main-vision .btn-box{ margin-top: 120px;}

.marquee-container{ position: relative; overflow: hidden; padding: 100px 0 250px; font-family: 'GMarketSans';}
.marquee-text{ color:#b8d4fb; font-size:270px; font-weight: 400; white-space: nowrap; }
.marquee-container .mask{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 2;}
.marquee-container .mask::before{ content: ''; width: 100%; position: absolute; bottom: 0; top: 0; left: 0; display: block; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); }
.marquee-container .mask .bg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 300px; background: url(../images/main_ailix_bg2.jpg) no-repeat 50% 100% / cover;}

.main-ailix{ background: url(../images/main_ailix_bg.jpg) no-repeat 0 50%; padding: 170px 0 0;}
.main-ailix .t1{ text-align: center; font-size: 42px; font-weight: 600; text-transform: uppercase; font-family: 'GMarketSans';}
.main-ailix .t1 span{ color: #c0c0c0; }
.main-ailix .ailix-bx1{ display: flex; margin: 120px auto 170px; justify-content: center; gap:215px; font-size: 27px;}
.main-ailix .ailix-bx2{ margin: 0 auto; width: 100%; max-width: 1470px; }
.main-ailix .ailix-bx2 .itm{ display: flex; flex-direction: column; background-color: rgba(243, 247, 250, .9); border-radius: 30px; padding: 0 45px; min-height: 570px; transition:all 0.2s ease-in-out;}
.main-ailix .ailix-bx2 .itm *{transition:all 0.2s ease-in-out;}
.main-ailix .ailix-bx2 .tit{ display: flex; padding: 80px 0 45px; gap:24px; font-size: 24px; line-height: 1; font-weight: 400; align-items: flex-end; border-bottom: rgba(213,223,229,.25) 1px solid;}
.main-ailix .ailix-bx2 .tit img{ height: 50px; }
.main-ailix .ailix-bx2 .text{ flex:1; padding: 45px 0 40px; display: flex; flex-direction: column; gap:40px;}
.main-ailix .ailix-bx2 .text b{ font-size: 27px; font-family: 'GMarketSans'; font-weight: 400; line-height: 1.1;}
.main-ailix .ailix-bx2 .text span{ letter-spacing: -.02em;}
.main-ailix .ailix-bx2 .more{ margin-top: auto; line-height: 1; font-size: 14px; font-family: 'GMarketSans'; font-weight: 500; display: flex; text-transform: uppercase; gap:20px; text-decoration: none;}
.main-ailix .ailix-bx2 .more::after{ content: ''; width: 10px; height: 10px; background: url(../images/ic_more.png) no-repeat 50% 50% / cover; transition:all 0.2s ease-in-out;}
.main-ailix .ailix-bx2 .more:hover::after{ transform: rotate(45deg);}
.main-ailix .ailix-bx2 .itm:hover{ background: url(../images/main_ailix_bx.png) no-repeat 50% 50% / cover;}
.main-ailix .ailix-bx2 .itm:hover .tit,
.main-ailix .ailix-bx2 .itm:hover .text,
.main-ailix .ailix-bx2 .itm:hover .more{ color: #fff;}
.main-ailix .ailix-bx2 .itm:hover .tit img,
.main-ailix .ailix-bx2 .itm:hover .more::after{ filter: brightness(0) invert(1);}

.main-partners{ padding: 80px 0 180px; width: 100%; max-width: 1650px; margin: 0 auto;}
.main-partners .main-tbx,
.main-news .main-tbx{ max-width: 1650px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-bottom: 100px;}
.main-partners-lst{ display: flex; flex-wrap: wrap; gap:20px 36px;}
.main-partners-lst li{ width: calc(20% - 28.8px); }
.main-partners-lst li a,
.main-partners-lst li .bx{ border: #d5dfe5 1px solid; height: 90px; width: 100%; padding: 10px 20px; border-radius: 15px; display: flex; justify-content: center; align-items: center; transition:all 0.2s ease-in-out;}
.main-partners-lst li a:hover{ border-color: #a4b6c0; box-shadow: 0 0 10px rgba(0,0,0,.1);}

.main-news{ position: relative; background-color: #f3f3f6; padding: 180px 0 150px;}
.main-news::before{ content: ''; position: absolute; top: -180px; right: 0; width: 282px; height: 706px; display: block; background: url(../images/main_news_bg.png) no-repeat 50% 50% / cover;}
.main-news-lst{ position: relative; width: 100%; max-width: 1650px; margin: 0 auto 150px;} 
.main-news-lst li{ padding: 60px 0; border-top: #000 1px solid;}
.main-news-lst li:last-child{ border-bottom: #000 1px solid;}
.main-news-lst .bx{ display: flex; font-size: 18px; align-items: start; line-height: 1.2;}
.main-news-lst .bx:hover{ color: #0a4ed9; text-decoration: none;}
.main-news-lst .num{ width: 180px; display: none;}
.main-news-lst .tit{ width: 430px; font-size: 30px; font-weight: 400; overflow: hidden; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-news-lst .txt{ width: 420px; margin-left: 215px; overflow: hidden; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-news-lst .date{ margin-left: auto;}

.main-committed{ position: relative; width: 100%; margin: 0 auto; max-width: 1800px; padding: 100px 60px 90px 90px; display: flex; flex-direction: column; justify-content: space-between; min-height: 930px;}
.main-committed .bx{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: url(../images/main_committed.png) no-repeat 50% 50% / cover; border-radius: 45px; overflow: hidden; }
.main-committed .t1{ position: relative; color: #fff; font-size: 78px; font-family: 'GMarketSans'; font-weight: 600; line-height: 1.2;}
.main-committed .main-committed-bx{ position: relative; display: flex; justify-content: space-between; align-items: end;}
.main-committed .main-committed-bx ul{ max-width: 840px; width: 100%; display: flex; gap:14px;}
.main-committed .main-committed-bx ul li{ height: 180px; border: #fff 2px solid; flex:1; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 25px 20px; border-radius: 20px; backdrop-filter: blur(5px);}
.main-committed .main-committed-bx ul li b{ color:#fff; font-size: 24px; font-weight: 500;}
.main-committed .main-committed-bx ul li i{ margin-left: auto;}

.main-contact{ position: relative; width: 100%; margin: 60px auto 0; max-width: 1800px; padding: 120px 85px 110px 85px; display: flex; flex-direction: column; justify-content: space-between; min-height: 660px;}
.main-contact .bx{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: url(../images/main_contact.png) no-repeat 50% 50% / cover; border-radius: 45px; overflow: hidden; }
.main-contact .t1{ position: relative; font-size: 78px; font-family: 'GMarketSans'; font-weight: 600; line-height: 1.2;}
.main-contact .main-contact-bx{ position: relative; display: flex; justify-content: space-between; align-items: end;}
.main-contact .main-contact-bx p{ font-size: 24px;}

/* sub */
#container{ position: relative; max-width: 1440px; margin: 0 auto; padding: 240px 0 150px; }
.contents.line{ position: relative; padding-top: 75px;}
.contents.line::before{ content: ''; position: absolute; top: 0; display: block; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #bac7cf; left: 50%;}
.pag-tit{ margin: 120px 0 60px; font-size: 60px;}

.div-tab{ display: flex; justify-content: center; align-items: center; height: 120px; border-bottom: #d5dfe5 1px solid; gap:100px;}
.div-tab .itm{ height: 80px; display: flex; align-items: center; position: relative; color: #bac7cf; font-size: 28px; font-family: 'GMarketSans'; font-weight: 600; overflow: hidden; }
.div-tab .itm span{ height: 80px; display: flex; align-items: center; opacity: 1; transition: top .6s ease;}
.div-tab .itm::after{ content: '';  position: absolute; display: flex; align-items: center; top: 80px; left: 0; width: 100%; height: 80px; color: #000; transition: top .6s ease;}
.div-tab .itm:nth-child(1)::after{ content: 'Ailix Prime';}
.div-tab .itm:nth-child(2)::after{ content: 'Ailix Voice';}
.div-tab .itm:nth-child(3)::after{ content: 'Ailix Omninote';}
.div-tab .itm:hover span,
.div-tab .itm.on span{ transform: translateY(-80px); opacity: 0;}
.div-tab .itm:hover::after,
.div-tab .itm.on::after{ top: 0; }

.sub-tit{ display: flex; flex-direction: column; gap: 60px; align-items: flex-start; margin-bottom: 60px; position: relative; z-index: 2;}
.sub-tit .tit{ text-align: center; font-size: 90px; color: #111; font-weight: 600; line-height: 1; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: 0.2s;}
.sub-tit .location{ position: relative; z-index: 3; display: flex; align-items: center; color:#111; gap: 20px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.sub-tit .location > li{ position: relative; padding: 0 0 0 24px;}
.sub-tit .location > li > a{ display: block; text-transform: uppercase; }
.sub-tit .location > li::before{ content: ''; position: absolute; top: calc(50% - 2px); left: 0; border-radius: 50%; width: 3px; height: 3px; display: block; background-color: #999; }
.sub-tit .location > li.h{ padding: 0;}
.sub-tit .location > li.h a{ color: transparent; font-size: 0; background: url(../images/ic_h.png) no-repeat 50% 50% / cover; width: 14px; height: 14px;}
.sub-tit .location > li.h::before{ display: none;}
.sub-tit .location > li:last-child .bt{ font-weight: 600; display: flex; align-items: center; text-transform: uppercase;}
.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: 16px;}
.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;}
.products .sub-tit .location .depth3{ width: 170px;}
.company .sub-tit .location .depth3{ width: 200px;}
.support .sub-tit .location .depth3{ width: 120px;}

.sub-tit.type1 .location > li > a{ font-size: 45px; text-transform:none;}
.sub-tit.type1 .location > li:last-child .bt::after{ border-top: #111 20px solid; border-left: transparent 15px solid; border-right: transparent 15px solid;}
.sub-tit.type1 .location .depth3{ top: 60px;}
.sub-tit.type1 .tit{ display: none;}

.visual-sect{ position: relative; overflow: hidden; left: 50%; transform: translateX(-50%); width: 100vw; margin-bottom: 75px;}
.visual-sect .img { position: relative; width: 100%;}
.visual-sect .img img { width: 100%; height: 500px; 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 .8s ease-in-out; -webkit-transition: left .8s ease-in-out; -moz-transition: left .8s ease-in-out; -ms-transition: left .8s ease-in-out; -o-transition: left .8s ease-in-out; } 
.visual-sect.animate::after { left:100%; } 
.visual-sect h3{ position: absolute; left: 220px; top: 50%; transform: translateY(-50%); font-size: 90px; color: #fff; font-weight: 600; opacity: 0;}
.visual-sect.animate h3{ left: 180px; opacity: 1; transition: all .4s .8s ease-in-out;}

.sub-tx-lg{ font-size: 30px; color: #111; font-weight: 600;}

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

/* company */
.journey-hd{ display: flex; flex-direction: column; gap:120px; margin-bottom: 120px;}
.journey-hd .t1{ display: flex; flex-direction: column; align-items: center; color: #bac7cf; font-size: 78px; font-family: 'GMarketSans'; text-align: center;}
.journey-bx{ position: relative; padding: 0 0 0 370px;}
.journey-bx + .journey-bx{ margin-top: 80px;}
.journey-bx .tit{ position: absolute; top: 0; left: 0; color: #0a4ed9; font-size: 78px; font-weight: 900; line-height: 1;} 
.journey-bx .itm{ display: flex; flex-direction: column; padding: 45px 0 50px; border-bottom: #d5dfe5 1px solid;}
.journey-bx .itm:first-of-type{ padding-top: 0; }
.journey-bx .itm .n{ font-size: 40px; font-weight: 600; line-height: 1;}
.journey-bx .itm ul{ margin-top: 30px; display: flex; flex-direction: column; gap:10px; font-size: 22px;}
.journey-bx .itm ul > li{ text-indent: -15px; padding-left: 15px;}
.journey-bx .itm ul > li::before{ content: ''; width: 4px; height: 4px; background-color: #ddd; border-radius: 50%; margin-right: 10px; display: inline-block; vertical-align: middle; }

.cert-bx{ position: relative; padding: 65px 0 0 0;}
.cert-bx::before{ content: ''; position: absolute; top: 0; display: block; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #bac7cf; left: 50%;}
.cert-list{ display: flex; gap: 90px 48px; flex-wrap: wrap; margin-top: 75px;}
.cert-list .itm{ width: calc(25% - 36px); }
.cert-list .itm .img{ position: relative; cursor: pointer; background-color: #f6f8f9; border-radius: 15px; padding: 30px;}
.cert-list .itm .img img{ }
.cert-list .itm .img::before{ content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: rgba(10,78,217,.2) ; border-radius: 15px;  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: #2b40f5 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 -10px; transform: rotate(45deg);}
.modalPop .pop-close::after{ transform: rotate(-45deg);}

.partners-bx{ margin-top: 70px;}
.partners-bx .main-partners-lst{ gap:40px;}
.partners-bx .main-partners-lst > li{ width: calc(25% - 30px); height: 110px;}

.page-tit{ font-size: 75px; line-height: 1.1;}
.contact-tit{ display: flex; flex-direction: column; gap:60px;}
.contact-tit ul{ font-size: 24px; display: flex; flex-direction: column; gap:10px;}
.contact-bx1 .contact-tit{ flex-direction: row; justify-content: space-between;}
.contact-bx1 .map-bx{ margin-top: 50px; width: 100%;}
.contact-bx1 .map-bx iframe{ width: 100%; height: 560px; }
.contact-bx2{ margin-top: 110px; display: flex; justify-content: space-between;}
.contact-bx2 .map-bx,
.contact-bx3 .map-bx{ width: 700px;}
.contact-bx2 .map-bx iframe,
.contact-bx3 .map-bx iframe{ width: 100%; height: 400px; }
.contact-bx3{ margin-top: 110px; padding-top: 110px; display: flex; justify-content: space-between; border-top: #d5dfe5 1px solid;}

.about-bx1{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin-top: -75px; padding: 150px 0 210px; background: #f5f6fa url(../images/about_bg.jpg) no-repeat 50% 50% / cover;} 
.about-bx2{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); padding: 180px 0 150px; }
.about-bx3{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); padding: 140px 0 170px; margin-bottom: -150px; background: url(../images/about_bg2.jpg) no-repeat 50% 50% / cover;}
.about-bx1 .inner,
.about-bx2 .inner,
.about-bx3 .inner{ width: 100%; max-width: 1440px; margin: 0 auto; position: relative; padding: 0 30px;}
.about-bx1 .inner{ display: flex; flex-direction: column; align-items: flex-end;}
.about-bx1 .text{ position: relative; z-index: 2; font-size: 90px; font-family: 'GMarketSans'; width: 100%; display: flex; flex-direction: column; line-height: 1.3;}
.about-bx1 .text .t1{ text-align: left;}
.about-bx1 .text .t2{ text-align: center;}
.about-bx1 .text .t3{ text-align: right;}
.about-bx1 p{ position: relative; z-index: 2; margin-top: 150px; max-width: 50%; font-size: 27px;}
.about-bx1 .obj1{ position: absolute; top: 360px; left: 340px;}
.about-bx1 .obj2{ position: absolute; top: 454px; left: 0;}
.about-bx1 .obj3{ position: absolute; bottom: -240px; left: 407px;}
.about-bx2::before{ content: ''; position: absolute; top: -350px; right: 0; width: 280px; height: 628px; display: block; background: url(../images/prod_obj1.png);}
.about-bx2::after { content: ''; position: absolute; bottom: -200px; left: 0; width: 280px; height: 628px; transform: rotate(180deg); display: block; background: url(../images/prod_obj1.png);}
.about-bx2 .inner{ display: flex; }
.about-bx2 .title{ font-size: 60px; width: 480px;}
.about-bx2 .text{ flex: 1; border-top: #111 1px solid;}
.about-bx2 .text li{ display: flex; border-bottom: #111 1px solid; padding: 40px 35px; font-size: 22px; }
.about-bx2 .text li .t-tx{ width: 235px; font-weight: 600;}
.about-bx2 .text li .c-tx{ flex:1;}
.about-bx2 .text li p + p{ margin-top: 25px;}
.about-bx3 .title{ font-size: 60px; color: #fff; margin-bottom: 80px;}
.about-bx3 .t1{ color: #fff; font-size: 28px; margin-top: 100px;}
.about-bus{ display: flex; gap:40px;}
.about-bus .itm{ position: relative; flex:1; backdrop-filter: blur(10px); border-radius: 30px; border: #5e6065 1px solid; color: #fff; padding: 50px 40px; display: flex; flex-direction: column; }
.about-bus .itm > p{ font-size: 36px; font-weight: 600; line-height: 1.1; margin-bottom: 60px;}
.about-bus .itm ul{ font-size: 20px;}
.about-bus .itm::after{ content: ''; position: absolute; bottom: 30px; right: 20px; width: 70px; height: 70px; background: url(../images/about_ic1.png) no-repeat 50% 50% / cover; }
.about-bus .itm:nth-child(2):after{ background: url(../images/about_ic2.png) no-repeat 50% 50% / cover; }
.about-bus .itm:nth-child(3):after{ background: url(../images/about_ic3.png) no-repeat 50% 50% / cover; }

.vision-bx1{ position: relative; padding: 90px 30px 150px;max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column;}
.vision-bx1::before{content: ''; position: absolute; top: calc(50% - 308px); left: calc(50% - 39vw); width: 660px; height: 684px; background: url(../images/vision_bg2.png) no-repeat 50% 50% / cover;}
.vision-bx1 .title{ position: relative;font-size: 90px; font-family: 'GMarketSans'; font-weight: 400; line-height: 1.2; margin-bottom: 60px;}
.vision-bx1 p{ position: relative; max-width: 50%; font-size: 28px; margin-left: auto;}
.vision-bx1 p b{ color: #0b4fd9; }
.vision-bx1 .img{ position: relative; margin: 90px auto 0;}
.vision-bx2{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); display: flex; gap:60px; flex-direction: column; align-items: center; text-align: center; padding: 150px 30px; background: url(../images/vision_bg.jpg) no-repeat 50% 50% / cover;}
.vision-bx2 .title{ background: url(../images/vision_t1.png) no-repeat 50% 50% / cover; width: 562px; height: 612px; padding-bottom: 60px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 60px;}
.vision-bx2 p{ font-size: 45px; font-weight: 500;}
.vision-bx3{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); padding: 150px 30px;}
.vision-bx3.gray{ background-color: #f9fafc; margin-bottom: -150px;}
.vision-bx3.gray::before{content: ''; position: absolute; top: -310px; right: -10vw; width: 660px; height: 684px; background: url(../images/vision_bg2.png) no-repeat 50% 50% / cover;}
.vision-bx3 .inner{ width: 100%; max-width: 1440px; margin: 0 auto; position: relative;}
.vision-bx3 .title{ position: absolute; top: 45px; left: 0; font-size: 60px; line-height: 1.2;}
.vision-bx3 ul{ display: flex; flex-wrap: wrap; gap:45px; }
.vision-bx3 ul li{ width: calc(33.3% - 30px); border-radius: 30px; background-color: #e8f1fe; padding: 45px 30px; font-size: 20px;}
.vision-bx3 ul li:nth-child(1){ margin-left: calc(33.3% + 10px);}
.vision-bx3 ul li .tit{ font-size: 30px; line-height: 1.2; border-bottom: #bac7cf 1px solid; padding-bottom: 30px; margin-bottom: 30px;}

/* Sustainability */
.esg-bx1{ position: relative;}
.esg-bx1::before{content: ''; position: absolute; top: calc(50% - 270px); left: calc(50% - 35vw); width: 550px; height: 535px; background: url(../images/esg_bg.png) no-repeat 50% 50% / cover;}
.esg-bx1 .title{ font-size: 90px; font-family: 'GMarketSans'; font-weight: 400; line-height: 1.2; margin-bottom: 90px;}
.esg-bx1 .inner{ position: relative; z-index: 2; display: flex; justify-content: space-between; gap:150px;}
.esg-bx1 .text{ max-width: 900px; font-size: 27px; display: flex; flex-direction: column;}
.esg-bx1 .text strong{ font-size: 45px; color: #0b4fd9;}
.esg-bx1 .text b{ font-size: 30px; margin: 75px 0 30px; font-weight: 500;}
.esg-bx1 .img2{ margin-top: -70px; width: 1680px; position: relative; left: 50%; transform: translateX(-50%);}
.esg-bx2{ margin-top: 150px;}
.esg-bx2 .title{ font-size: 60px; margin-bottom: 60px;}
.esg-bx2 .t1{ font-size: 30px; letter-spacing: -.02em;}
.esg-bx3{ margin-top: 140px;margin-bottom: -180px;}
.esg-bx3 .itm{ position: relative; padding: 120px 0;}
.esg-bx3 .itm:nth-child(odd)::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background-color: #f9fafc;}
.esg-bx3 .itm .hd{ position: relative; display: flex; border-bottom: #e7e7e7 1px solid; padding-bottom: 60px; margin-bottom: 60px; gap:120px;}
.esg-bx3 .itm .hd i{ width: 240px; height: 240px; border-radius: 50%; background-color: #f3f6fd; display: flex; justify-content: center; align-items: center; padding: 10px;}
.esg-bx3 .itm .hd .txt{ flex:1; font-size: 30px;}
.esg-bx3 .itm .hd .tit{ color:#0b4fd9; font-size: 42px; margin-bottom: 40px;}
.esg-bx3 .itm .ul-list01{ position: relative; font-size: 24px;}
.esg-bx3 .itm:last-child{ padding-bottom: 150px;}

.speak-bx1{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); padding: 0 30px;}
.speak-bx1::before{content: ''; position: absolute; top: calc(50% - 260px); right: -10vw; width: 550px; height: 535px; background: url(../images/esg_bg.png) no-repeat 50% 50% / cover;}
.speak-bx1 .inner{ max-width: 1440px; margin: 0 auto; padding-bottom: 160px; border-bottom: #111 1px solid;}
.speak-bx1 .title{ font-size: 75px; font-family: 'GMarketSans'; font-weight: 400; line-height: 1.2; margin-bottom: 80px;}
.speak-bx1 .text{ font-size: 24px;}
.speak-bx2{ padding: 150px 0;}
.speak-bx2 .title,
.speak-bx3 .title,
.speak-bx4 .title{ position: relative; font-size: 60px; margin-bottom: 70px;}
.speak-bx2 ul{ display: flex; flex-wrap: wrap; gap:45px;}
.speak-bx2 ul li{ position: relative; padding: 50px 40px 140px; width: calc(33.3% - 30px); border: #1977f9 1px solid; border-radius: 30px; font-size: 20px; display: flex; flex-direction: column;}
.speak-bx2 ul .tit{ font-size: 30px; margin-bottom: 45px;}
.speak-bx2 ul i{ position: absolute; bottom: 35px; right: 30px;}
.speak-bx3{ position: relative; padding: 120px 0;}
.speak-bx3::before{ content: ''; position: absolute; top: 0; bottom: 0; border-radius: 30px; background-color: #f4f8fe; width: 1680px; left: 50%; transform: translateX(-50%);}
.speak-bx3 .ul-list01,
.speak-bx4 .ul-list01{ position: relative; font-size: 22px;}
.speak-bx3 .ul-list01 > li::before,
.speak-bx4 .ul-list01 > li::before{ background-color: #111;}
.speak-bx3 .ul-list01 a{ text-decoration: underline;}
.speak-bx4{ margin-top: 120px;}
.speak-bx4 .dv-chk{ margin-top: 70px; border-top: #d5dfe5 1px solid; padding: 50px 0; border-bottom: #111 1px solid; }
.speak-bx4 .dv-chk label{ font-size: 22px; display: flex; gap:12px; flex:1;}

/* support */
.inq-wr{ padding-top: 70px; position: relative;}
.inq-wr::before{ content: ''; position: absolute; top: 0; display: block; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #bac7cf; left: 50%;}
.inq-wr .t1{ color: #bac7cf; font-size: 30px; font-family: 'GMarketSans'; }
.form-wr{ display: flex; flex-wrap: wrap; gap: 0 40px; margin-top: 70px; border-top: #010101 1px solid;}
.form-wr .form-itm{ position: relative; width: calc(50% - 20px); border-bottom: #d5dfe5 1px solid; min-height: 94px; display: flex;}
.form-wr .form-itm.w100{ width: 100%;}
.form-wr .form-itm.cate{ padding-left: 130px;}
.form-wr .form-itm .hd{ position: absolute; top: 50%; left: 0; font-size: 24px; color:#111; font-weight: 600; line-height: 1; transform: translateY(-50%); z-index: 2;}
.form-wr .form-itm.txt .hd{ top: 44px; transform: none;}
.form-wr .form-itm .hd i{ color:#0a4ed9;}
.form-wr .form-itm .bd{ display: flex; flex:1; align-items: center;}
.form-wr .form-itm.cate .bd{ gap:44px;}
.form-wr .form-itm .inp,
.form-wr .form-itm .textarea{ width: 100%; height: 94px; flex: 1; border: none; background-color: transparent; display: block; padding: 0 20px 0 165px; border-radius: 0;}
.form-wr .form-itm .textarea{ height: 200px; padding: 44px 20px 20px 165px;}
.form-wr .input-wrapper{ position: relative; flex: 1;}
.form-wr .input-wrapper:after { content:''; display:block; position:absolute; bottom:-1px; left:0; width:0%; height:2px; background:#0a4ed9; transition:all .3s ease;}
.form-wr .input-wrapper.focus::after { width:100%;}
.form-wr .form-itm .ul-list01{ margin-top: 25px;}
.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;  }

.privacy-bx{ padding: 45px 0 0; border-bottom: #111 1px solid;}
.privacy-bx .tit{ color: #111; font-weight: 700; font-size: 24px;} 
.privacy-bx .text{ background-color: #f4f6fa; padding: 40px 45px; margin: 35px 0 0 0; font-size: 22px;  color: #111;}
.privacy-bx .dv-chk{ padding: 15px 0; align-items: center; display: flex; justify-content: space-between;}
.privacy-bx .dv-chk label{ font-size: 16px; color: #111; font-weight: 600;}

.tbl-hd{ display: flex; margin-bottom: 40px; justify-content: space-between; align-items: center;}
.tbl-hd .total{ color: #bac7cf;}
.tbl-hd .total b{ font-weight: 500; color: #111;}
.tbl-sch{ position: relative; width: 340px;}
.tbl-sch .inp{ border:#eaeef1 1px solid; width: 100%; height: 50px; border-radius: 25px; padding: 0 50px 0 25px; background-color: #eaeef1;}
.tbl-sch .inp::placeholder{ color: #111;}
.tbl-sch .search{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 50px; height: 50px; background: url(../images/ic_search.png) no-repeat 50% 50% / 18px; color: transparent; font-size: 0;}
.tbl-sch2{display: flex; gap:15px;}
.tbl-sch2 .select{ min-width: 160px;}

.news-list{ display: flex; gap: 70px 60px; flex-wrap: wrap; padding-bottom: 70px; border-bottom: #d5dfe5 1px solid;}
.news-list .itm{ width: calc(33.3% - 40px); display: flex; flex-direction: column; gap: 35px;}
.news-list .itm .img{ overflow: hidden; background-color: #fbfaf9; border-radius: 10px; height: 250px; background: url(../images/default.jpg) no-repeat 50% 50% / cover;}
.news-list .itm .img img{ width: 100%; height: 250px; 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: 20px; }
.news-list .itm .text .date{ color: #999; font-size: 20px;}
.news-list .itm .text .tit{ font-size: 28px; font-weight: 600; line-height: 1.2; 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 .itm.no-text{ width: 100%; text-align: center; border-top: #111 1px solid; padding-top: 70px;}

div.paging{ text-align:center; padding:0; margin: 60px 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:#0a4ed9;}
div.paging .on,
div.paging .on:hover{ color:#0a4ed9; 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;}

.tbl-view{ border-bottom: #111 1px solid;}
.tbl-view .view-hd{ padding: 0 0 50px; display: flex; align-items: center; font-weight: 600;}
.tbl-view .view-hd .subject{ font-size: 36px; font-weight: 600; color: #111; flex:1;}
.tbl-view .view-hd .date{ color: #777; width: 140px; text-align: right; margin-left: auto; font-size: 18px;}
.tbl-view .view-att{ border-top: #d5dfe5 1px solid; padding: 25px 35px; display: flex;}
.tbl-view .view-att dt{ font-size: 20px; color:#bac7cf; 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: 20px; display: flex; align-items: center; gap:5px;}
.tbl-view .view-att dd .itm::before{ content: ''; width: 16px; height: 16px; background: url(../images/ic_clib.png) no-repeat 50% 50% / cover;}
.tbl-view .view-con{ border-top: #d5dfe5 1px solid; font-size: 22px; color: #111; padding: 50px 35px; line-height: 1.8;}
.tbl-view .hd-tx{ border-top: #e6e6e6 1px solid; padding: 20px 45px; display: flex; align-items: center; gap: 10px 80px;}
.tbl-view .hd-tx .itm{ display: flex; gap:20px; color: #868e96;}
.tbl-view .hd-tx .cate{ color: #2b40f5;}

table.list{ border-top: #000 1px solid;}
table.list thead th{ padding: 30px 10px; text-align: center; text-align: center; border-bottom: #000 1px solid; color: #000; font-weight: 600; line-height: 1;}
table.list tbody tr{ border-bottom: #d5dfe5 1px solid;}
table.list tbody td{ padding: 28px 10px; text-align: center; font-size: 18px;}
table.list tbody td.title{ text-align: left; color: #1e1e1e; font-size: 24px; font-weight: 600;}
table.list tbody td.title a{ display: block; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
table.list .col-no{ width: 110px;}
table.list .col-date{ width: 140px;}
table.list .no{ color:#0a4ed9; font-weight: 600;}
table.list .date{ color:#999;}

.noTxt{ font-size: 24px; font-weight: 600; text-align: center; width: 100%;}

/* products */
.product-hd{ padding: 75px 0 0; display: flex; justify-content: center; align-items: flex-end; gap:55px; font-size: 52px; line-height: 1; font-family: 'GMarketSans';}
.product-hd .logo{ max-width: 335px;}
.product-hd-tx{ margin-top: 145px; display: flex; justify-content: space-between; gap:20px;}
.product-hd-tx .text{  flex:1; display: flex; flex-direction: column; gap:60px; font-size: 24px;}
.product-hd-tx .text b{ font-size: 75px; line-height: 1.2;}

.product-bd{ position: relative; background: #f4f6fa url(../images/prod_obj2.png) no-repeat 0 757px; position: relative; width: 100vw; left: 50%; transform: translateX(-50%); padding: 120px 0; margin-top: 150px;}
.product-bd::before{ content: ''; position: absolute; top: 390px; right: 0; width: 280px; height: 628px; display: block; background: url(../images/prod_obj1.png);}
.product-wr .arr{ width: 16px; display: flex; flex-direction: column; margin: 80px auto; align-self: center; justify-content: center; gap:8px; }
.product-wr .arr i{ border-top: #1990ff 8px solid; border-left: transparent 8px solid; border-right: transparent 8px solid;}
.product-wr .arr i:nth-child(1){ opacity: .1;}
.product-wr .arr i:nth-child(2){ opacity: .5;}
.product-wr .arr b{ position: relative; left: 50%; display: block; margin: 15px auto 0; color:#1977f9; font-size: 40px; transform: translateX(-50%);}
.prod-bd1{ position: relative; max-width: 1400px; width: 100%; margin: 0 auto; background-color: #dee9fa; border-radius: 30px; padding: 50px 30px 40px; display: flex; flex-direction: column; gap:30px; text-align: center;}
.prod-bd1 .tit{ color: #415e8d; font-size: 40px; font-weight: 600; line-height: 1.2; }
.prod-bd1 ul{ display: flex; gap:14px;}
.prod-bd1 ul li{ background-color: #eff4fd; flex:1; border-radius: 10px; padding: 25px 15px; color: #617799; font-size: 22px; line-height: 1.2; display: flex; justify-content: center; align-items: center; }
.prod-bd2{ position: relative; max-width: 1400px; width: 100%; margin: 0 auto; background-color: #dee9fa; border-radius: 30px; padding: 80px 10px; display: flex; flex-direction: column; text-align: center; }
.prod-bd2 .tit{ color:#0a4ed9; font-size: 75px;}
.prod-bd2 ul{ display: flex; margin-top: 60px; justify-content: center; font-size: 28px; line-height: 1.2;}
.prod-bd2 ul li{ background-color: rgba(25,119,249,.8); width: 280px; height: 280px; border-radius: 50%; display: flex; color: #fff; justify-content: center; align-items: center;}
.prod-bd2 ul li + li{ margin-left: -20px;}
.prod-bd3{ position: relative; margin-top: 80px; font-size: 24px; text-align: center;}
.product-key{ border-top: #111 1px solid;}
.product-key > li{ padding: 40px 10px 40px 35px; display: flex; border-bottom: #d5dfe5 1px solid; align-items: center; gap:40px;}
.product-key > li:last-child{ border-color: #111;}
.product-key > li i{ width: 160px; height: 160px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #e8f1fe;}
.product-key > li .text{ flex:1;}
.product-key > li .text .tit{ font-size: 30px; font-weight: 600; }
.product-key > li .text ul{ color: #999; font-size: 22px; margin-top: 25px;}
.product-proc{ display: flex; flex-wrap: wrap; gap:60px;}
.product-proc > li{ position: relative; border:#1977f9 1px solid; border-radius: 30px; width: calc(33.3% - 45px); padding: 35px 30px; display: flex; flex-direction: column; gap:30px; font-size: 22px; letter-spacing: -.02em;}
.product-proc > li .tit{ display: flex; flex-direction: column; font-size: 30px; gap:10px;}
.product-proc > li .tit em{ font-size: 16px; color:#1977f9;}
.product-proc > li .tit b{ font-weight: 600; line-height: 1.2;}
.product-proc > li + li::before{ content: ''; position: absolute; top: 50%; left: -44px; transform: translateY(-50%); width: 28px; height: 28px; display: block; border-radius: 50%; background: #1977f9 url(../images/ic_arr.png) no-repeat 50% 50% / 11px; }
.product-proc > li:nth-child(1){ order:1;}
.product-proc > li:nth-child(2){ order:1;}
.product-proc > li:nth-child(3){ order:1;}
.product-proc > li:nth-child(4){ order:6;}
.product-proc > li:nth-child(5){ order:5;}
.product-proc > li:nth-child(6){ order:4;}
.product-proc > li:nth-child(4)::before{ top: -44px; left: 50%; transform: translateX(-50%) rotate(90deg);}
.product-proc > li:nth-child(5)::before,
.product-proc > li:nth-child(6)::before{ left: auto; right: -44px; transform: translateY(-50%) rotate(180deg);}
.product-proc > li .img{ margin-top: auto; text-align: center;}
.product-proc.voice{ gap:40px;}
.product-proc.voice > li{ flex:1; width: auto;}
.product-proc.voice > li:nth-child(2){ flex:1.4;}
.product-proc.voice > li + li::before{ left: -36px;}
.product-proc.voice > li:nth-child(4)::before{ top: 50%; left: -36px; transform: translateY(-50%) rotate(0);}
.product-proc.omninote > li{ width: calc(50% - 30px);}
.product-proc.omninote > li:nth-child(3){ order:3;}
.product-proc.omninote > li:nth-child(4){ order:2;}
.product-proc.omninote > li:nth-child(3)::before{ top: -44px; left: 50%; transform: translateX(-50%) rotate(90deg);}
.product-proc.omninote > li:nth-child(4)::before{ top: 50%; right: -44px; left:auto; transform: translateY(-50%) rotate(180deg);}
.product-bene{ display: flex; flex-direction: column; gap:60px;}
.product-bene > li{ display: flex; align-items: center; gap:60px;}
.product-bene.omninote > li{ align-items: flex-start;}
.product-bene > li .img{ width: 440px;}
.product-bene > li .text{ flex:1; }
.product-bene > li .text .tit{ font-size: 30px; line-height: 1.2;}
.product-bene > li .text ul{ margin-top: 20px; font-size: 22px;}
.product-bene > li .text > p{ font-size: 24px; color: #0a4ed9; font-weight: 600; margin-bottom: 10px;}
.prod-scope{ background-color: #e8f1fe; border-radius: 30px; padding: 40px;}
.prod-scope .tit{ text-align: center; font-size: 45px; padding: 50px; border-bottom: #111 1px solid; margin-bottom: 50px;}
.prod-scope .ul-list01{ font-size: 22px;}
.prod-scope .ul-list01 > li::before{ background-color: #111;}
.prod-scope .text dl{ margin-top: 50px; display: flex; border-radius: 15px; padding: 30px; background-color: #fff;}
.prod-scope .text dl dt{ color:#415e8d; font-size: 30px; font-weight: 600; width: 440px;}
.prod-scope .text dl dd{ flex:1;}
.prod-scope .text dl ul{ display: flex; flex-wrap: wrap; margin-top: -5px;}
.prod-scope .text dl ul li{ width: 50%; font-size: 22px; color: #415e8d; text-indent: -10px; padding-left: 10px; margin-top: 5px;}
.prod-scope .text dl ul li::before{ content: ''; width: 4px; height: 4px; display: inline-block; vertical-align: 4px; background-color: #999; border-radius: 50%; margin-right: 5px;}
.prod-exp{ display: flex; flex-wrap: wrap; gap:40px;}
.prod-exp > li{ padding: 50px 40px 40px; background-color: #e8f1fe; border-radius: 30px; width: calc(50% - 30px);}
.prod-exp > li .tit{ padding: 20px 0 30px; display: flex; flex-direction: column; border-bottom: #bac7cf 1px solid; margin-bottom: 30px; font-size: 24px;}
.prod-exp > li .tit b{ font-size: 36px;}
.prod-exp > li .ul-list01{ font-size: 22px;}
.prod-exp > li .ul-list01 > li::before{ background-color: #111; }
.prod-m1{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); padding: 50px 0 115px; display: flex; flex-direction: column; align-items: center; gap:120px;}
.prod-m1 .t1{ width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 30px; text-align: center; display: flex; flex-direction: column; gap:30px; font-size: 45px; line-height: 1.2;}
.prod-m1 .t1 b{ font-size: 78px; color: #bac7cf; font-family: 'GMarketSans';}
.prod-m1 .t2{ font-size: 27px; text-align: center; padding: 0 30px;}
.prod-m1::before{ content: ''; position: absolute; top: 0; right: 0; width: 280px; height: 628px; display: block; background: url(../images/prod_obj1.png);}
.prod-m1::after{ content: ''; position: absolute; bottom: -200px; left: 0; width: 280px; height: 628px; transform: rotate(180deg); display: block; background: url(../images/prod_obj1.png);}
.prod-m2{ width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background: #f4f6fa url(../images/prod_m2.jpg) no-repeat 100% 100% / cover; height: 600px; display: flex; justify-content: center; align-items: center;}
.prod-m2 ul{ display: flex; justify-content: center;}
.prod-m2 ul li{ background-color: rgba(25,119,249,.8); width: 400px; height: 400px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 45px; line-height: 1.2; text-align: center;}
.prod-m2 ul li + li{ margin-left: -20px;}
.product-wr .main-ailix{ background:none; padding-top: 120px;}

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

  #header{ padding: 0 30px;}
  footer{ padding: 145px 30px 150px;}

  .sub-tit{ padding: 0 30px;}
  .contents{ padding: 0 30px;}
  
  .main-vision{ padding: 140px 30px 0;}
  .main-partners{ padding: 80px 30px 180px;}
  .main-news{ padding: 180px 30px 150px;}

  .product-bd{ padding: 120px 30px; }

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

    .menu-content{ padding: 0 30px;}
    .menu-content .close{ right:40px;}

    #mainVisual .copy{ font-size: 70px;}

    .main-ailix .t1{ padding: 0 30px;}    
    .main-ailix .ailix-bx1{ gap:150px; padding: 0 30px;}
    .main-ailix .ailix-bx2{ padding: 0 30px;}

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

      #header{ padding: 0 30px; gap:40px;}

      nav{ display: none;}

      footer .footerWrap{ flex-wrap: wrap;}
      footer .logo{ width: 100%; margin-bottom: 90px;}
      footer .logo img{ max-width: 68vw;}
      footer .btn.lg{ position: relative; top: auto; right: auto; margin-bottom: 90px;}
      footer address{ width: 100%; flex: none;}
      footer address .addr2,
      footer .tel{ margin-top: 70px;}
      footer .f-mn{ width: 100%; margin-top: 80px; gap:35px; flex-direction: row;}
      footer .copyright{ position: relative; bottom: auto; left: auto; margin-top: 80px;} 
      footer .bt-top{ top: auto; bottom: 0;}

      #mainVisual .copy{ padding: 0 30px; font-size: 50px;}

      .main-vision .mv-bx .itm{ width: 550px; gap: 20px; }

      .news-list{ gap:50px 30px;}
      .news-list .itm{ width: calc(33.3% - 20px); gap:20px;}
      .news-list .itm .img,
      .news-list .itm .img img{ height: 180px;}

      .product-hd-tx .img{ width: 40%;}
      .prod-bd2 ul li{ width: 19vw; height: 19vw; font-size: 2.4vw;}
      .prod-bd2 ul li + li{ margin-left: -2vw;}
      .product-bene > li{ align-items: flex-start;}
      .product-bene > li .img{ width: 40%; }

      .prod-m2 ul li{ width: 30vw; height: 30vw;}

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

        .menu-content .allMenu,
        .menu-content .allMenu > li > ul{ margin-top: 40px;}

        .main-partners .main-tbx{ align-items: flex-start;}

        #mainVisual .bg .bg-pc{ display: none;}
        #mainVisual .bg .bg-mob{ display: block;}

        .main-vision{ padding-bottom: 100px;}
        
        .main-ailix .ailix-bx1{ gap: 70px; flex-direction: column; align-items: center; text-align: center; margin-bottom: 140px;}
        .main-ailix .ailix-bx1 p{ width: 580px;}
        .main-ailix .ailix-bx2{ gap:30px;}
        .main-ailix .ailix-bx2 .itm{ width: 580px;}
        .marquee-text{ font-size: 200px;}
        .marquee-container{ padding: 100px 0 100px;}
        .marquee-container .mask .bg{ height: 150px;}
        .marquee-container .mask::before{ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);}

        .main-partners-lst{gap:20px 20px;}
        .main-partners-lst li{ width: calc(33.3% - 16px);}
        
        .partners-bx .main-partners-lst{gap:20px 20px;}
        .partners-bx .main-partners-lst li{ width: calc(33.3% - 16px);}

        .main-committed{ padding: 70px 40px 60px; justify-content: start; gap:60px;}
        .main-committed .t1{ font-size: 40px;}
        .main-committed .main-committed-bx{flex:1; flex-direction: column; align-items: start;}
        .main-committed .main-committed-bx ul li{ height: 240px;}

        .main-contact{ padding: 120px 40px 60px; gap:80px;}
        .main-contact .t1{ font-size: 78px;}
        .main-contact .main-contact-bx{ flex-direction: column; gap:50px; align-items: start;}
        .main-contact .main-contact-bx p{ font-size: 30px;}

        .main-news-lst li{ padding: 30px 30px 30px 0;}
        .main-news-lst .bx{ position: relative; flex-wrap: wrap; padding: 0 0 0 0;}
        .main-news-lst .tit{ width: 100%; -webkit-line-clamp:1;}
        .main-news-lst .txt{ width: 100%; margin: 20px 0 10px;}
        .main-news-lst .num{ position: absolute; top: 5px; left: 0;}
        .main-news-lst .date{ width: 100%; margin: 0;}

        .visual-sect .img img{ height: 300px;}       

        .sub-tit.type1 .location > li > a,
        .sub-tit.type1 .location li:last-child .bt{ font-size:2rem;}
        .sub-tit.type1 .location > li:last-child .bt::after{ border-top: #111 1rem solid; border-left: transparent .8rem solid; border-right: transparent .8rem solid;}

        .div-tab{ gap:10px; padding: 0 30px; justify-content: space-between;}

        .journey-bx{ padding: 0 0 0 200px;}
        .journey-bx .tit{ font-size: 50px;}

        .cert-list{ gap:50px 20px;}
        .cert-list .itm{ width: calc(25% - 15px);}
        .cert-list .itm .img{ padding: 10px;}

        .contact-bx1 .contact-tit,
        .contact-bx2 .contact-tit,
        .contact-bx3 .contact-tit{ flex-direction: column; gap:2rem;}
        .contact-bx1,
        .contact-bx2,
        .contact-bx3{ flex-direction: column; gap:4rem;}
        .contact-bx1 .map-bx, 
        .contact-bx2 .map-bx, 
        .contact-bx3 .map-bx{ width: 100%;}

        .about-bx1 .text{ font-size: 60px;}
        .about-bx1 p{ font-size: 20px;}
        .about-bx1 .obj1{ top: 100px;}
        .about-bx1 .obj2{ top: 300px;}
        .about-bx1 .obj3{ left: 200px;}
        .about-bx2 .inner{ flex-direction: column;}
        .about-bx2 .title{ margin-bottom: 40px;}
        .about-bx2 .text li .t-tx{ width: 180px;}
        .about-bus{ gap:20px;}
        .about-bus .itm{ padding: 30px; padding-bottom: 100px; }
        .about-bus .itm::after{ width: 50px; height: 50px;}
        .about-bus .itm > p{ font-size: 28px;}
        .about-bus .itm ul{ font-size:16px;}

        .vision-bx1 p{ max-width: 100%;}
        .vision-bx3 .title{ position: relative; top: auto; left: auto; margin-bottom: 60px;}
        .vision-bx3 .title br{ display: none;}
        .vision-bx3 ul li:nth-child(1){ margin-left: 0;}
        .vision-bx3 ul li{ width: calc(50% - 23px);}
        .vision-bx3.gray::before{ width: 330px; height: 340px; top: -100px;}

        .esg-bx3 .itm .hd{ gap:30px;}
        .esg-bx3 .itm .hd i{ width: 120px; height: 120px;}

        .speak-bx2 ul li{ width: calc(50% - 45px);}

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

          #header{ height: 5.5rem; padding: 0 2rem;}
          #header .logo{ width: 12.5rem;}
          #header .logo a{ height: 1.7rem;}
          #header .bt-menu{ width: 2rem; height: 2rem;}
          #header .bt-menu i{ width: 2rem;}
          #header .bt-menu i:nth-child(1){ margin-top: -.5rem;}
          #header .bt-menu i:nth-child(3){ margin-top: .5rem;}

          footer{ padding: 5.5rem 2rem;}
          footer .logo{ margin-bottom: 4.5rem;}
          footer .btn.lg{ width: 22rem; margin-bottom: 4.5rem;}
          footer address{ font-size: 1.3rem;}
          footer address .addr1{ gap:.5rem}
          footer address .addr2{ margin-top: 3.5rem;}
          footer address .addr2 b{ margin-bottom: .5rem;}
          footer .tel{ margin-top: 3.5rem;}
          footer .f-mn{ gap:2rem; margin-top: 3.5rem;}
          footer .copyright{ font-size: 1.3rem; margin-top: 4rem;}
          footer .bt-top{ width: 3.5rem; height: 3.5rem;}
          footer .bt-top::before,
          footer .bt-top::after{ width: 1.4rem; height: 1.4rem; margin: -.7rem 0 0 -.7rem;}

          .menu-content{ padding: 0; background-color: #fff;}
          .menu-content .menu-hd{ padding: 0 2rem; height: 5.5rem; border-bottom: #f0f0f0 1px solid;}
          .menu-content .menu-hd .logo{ filter: brightness(0) saturate(100%) invert(13%) sepia(87%) saturate(4143%) hue-rotate(228deg) brightness(100%) contrast(117%);}
          .menu-content .close{ top: 2rem; right: 2rem; width: 2rem; height: 2rem;}
          .menu-content .close i{ width: 2rem; background-color: #000;}
          .menu-content .allMenu{ flex-direction: column; overflow-y: auto; height: calc(100vh - 5.5rem); padding: 2rem; display: block; margin: 0;}
          .menu-content .allMenu a{ color:#bababa; font-size: 1.5rem;}
          .menu-content .allMenu > li{ flex: none; width: 100%;}
          .menu-content .allMenu > li + li{ margin-top: 4rem;}
          .menu-content .allMenu > li > a{ position: relative; font-size: 1.5rem; font-weight: 600; color: #000;}
          .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 .allMenu > li > ul{ margin: 0;}
          .menu-content .subDepth{ padding: 0; }
          .menu-content .subDepth li > ul{ margin-top: 0;}
          .menu-content .subDepth > li > a,
          .menu-content .subDepth li > ul > li > a{ font-size: 1.5rem;}
          .menu-content .subDepth li > ul > li > a::before{ background-color: #bababa;}
          .menu-content .depth3{ margin: 1.5rem 0 0 0; padding: 0;}
          .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; margin-top: 2.5rem; opacity: 1; transform: translateY(0);}
          .menu-content .allMenu > li.on .subDepth > li > ul{ margin-top: 2rem;}

          #container{ padding: 8rem 0;}

          .main-tit{ font-size:3rem;}
          .main-tbx .btn.lg{ min-width: 9rem; padding: 0;}

          #mainVisual .copy{ padding: 0 2rem; font-size: 8vw;}
          #mainVisual .ctlr{ padding: 0 3rem; bottom: 3rem;}
          #mainVisual .ctlr button{ width: 3rem; height: 3rem;}
          #mainVisual .ctlr button::after{ width: .6rem; height: .6rem;}

          .scroll-d-box span{ font-size:1.2rem;}
          .scroll-d-box i{ margin-top: 1.5rem; width: .2rem; height: 3rem;}
          .scroll-d-box i::before{ height: 1rem;}

          .main-vision{ padding: 7.5rem 2rem; min-height: auto;}
          .main-vision .mv-bx{ margin: 4.5rem 0;}
          .main-vision .mv-bx .itm{ width: 28rem; padding: 3rem 2rem; height: 29rem;}
          .main-vision .mv-bx .itm .tit{ font-size: 2rem;}
          .main-vision .mv-bx .itm i{ width: 4.5rem; top: 3rem; right: 3rem;}
          .main-vision .mv-bx .itm p{ font-size: 1.3rem; height: 4.6rem;}
          .main-vision .t1{ font-size: 1.8rem;}
          .main-vision .btn-box{ margin-top: 4rem;}
          .main-vision .main-tbx p{ font-size:1.5rem; margin-top: 2rem;}

          .main-ailix{ padding: 7.5rem 0 0; background-size: 80% auto; background-position: -10rem 30%;}
          .main-ailix .t1{ font-size: 2.1rem; padding: 0 2rem;}
          .main-ailix .ailix-bx1{ gap:3.5rem; font-size: 1.3rem; margin-bottom: 4.5rem;}
          .main-ailix .ailix-bx1 p{ width: 100%; max-width: 78vw;}
          .main-ailix .ailix-bx2 .itm{ width: 28rem; padding: 0 2.5rem; min-height: 37rem;}
          .main-ailix .ailix-bx2 .tit{ padding: 4.5rem 0 2.5rem; font-size: 1.6rem; gap:1.5rem}
          .main-ailix .ailix-bx2 .tit img{ height: 3rem;}
          .main-ailix .ailix-bx2 .text{ padding: 2.5rem 0; gap:2.5rem;}
          .main-ailix .ailix-bx2 .text b{ font-size: 1.8rem;}

          .marquee-container { padding: 3.5rem 0 8rem;}
          .marquee-container .mask .bg{ height: 8rem;}          
          .marquee-container .mask::before{ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);}
          .marquee-text{ font-size: 10rem;}

          .main-partners .main-tbx, 
          .main-news .main-tbx{ margin-bottom: 4rem;}
          
          .main-partners{ padding: 4.5rem 2rem;}
          .main-partners-lst,
          .partners-bx .main-partners-lst{ gap:1rem;}
          .main-partners-lst li,
          .partners-bx .main-partners-lst li{ width: calc(50% - .5rem); }
          .main-partners-lst li a,
          .main-partners-lst li .bx,
          .partners-bx .main-partners-lst li a,
          .partners-bx .main-partners-lst li .bx{ height: auto; padding: 1rem; border-radius: .8rem;}

          .main-news{ padding: 4.5rem 2rem;}
          .main-news::before{ display: none;}
          .main-news-lst{ margin-bottom: 8rem;}
          .main-news-lst li{ padding: 1.4rem 1.4rem 1.4rem 0;}
          .main-news-lst .bx{  font-size: 1.2rem;}
          .main-news-lst .num{ top: .3rem;}
          .main-news-lst .tit{ font-size:1.5rem;}
          .main-news-lst .txt{ margin: 1rem 0 .5rem;}

          .main-committed{ padding: 3rem 2rem 2.5rem; gap:3rem; min-height: 46rem;}
          .main-committed .bx{ border-radius: 2.2rem;}
          .main-committed .t1{ font-size: 2rem;}
          .main-committed .main-committed-bx ul{ gap:.5rem;}
          .main-committed .main-committed-bx ul li{ flex:1; padding: 1.2rem; height: 12rem; border-width: .1rem; border-radius: 1rem;}
          .main-committed .main-committed-bx ul li b{ font-size: 1.2rem; letter-spacing: -.03em;}
          .main-committed .main-committed-bx ul li i{ width: 2rem;}

          .main-contact{ margin-top: 3rem; min-height: auto; gap:4rem; padding: 5.5rem 2rem 3.5rem;}
          .main-contact .bx{ border-radius: 2rem;}
          .main-contact .t1{ font-size: 3.8rem;}
          .main-contact .main-contact-bx p{ font-size: 1.5rem;}

          .main-pop{ width: 100%;}
          
          .contents{ padding: 0 2rem;}
          .contents.line{ padding-top: 3rem;}

          .sub-tit{ padding: 0 2rem; gap:2rem; margin-bottom: 4rem;}
          .sub-tit .tit{ font-size: 2.2rem;}
          .sub-tit .location{ font-size: 1.2rem; gap:.5rem}
          .sub-tit .location li.h a{ width: 1.2rem; height: 1.2rem;}
          .sub-tit .location li:last-child .bt{ font-size: 1.2rem; }
          .sub-tit .location > li{ padding: 0 0 0 1rem; line-height: 1.1;}
          .sub-tit .location .depth3{ top: 2rem; padding: 2rem 1.5rem;}
          .sub-tit .location .depth3 li + li{ margin-top: 1rem;}
          .products .sub-tit .location .depth3{ width: 12rem;}
          .company .sub-tit .location .depth3{ width: 14rem;}
          .support .sub-tit .location .depth3{ width: 8rem;}

          .sub-tit.type1 .location > li > a,
          .sub-tit.type1 .location li:last-child .bt{ font-size:1.6rem;}
          .sub-tit.type1 .location > li:last-child .bt::after{ border-top: #111 1rem solid; border-left: transparent .8rem solid; border-right: transparent .8rem solid;}
          .sub-tit.type1 .location .depth3{ top: 2.4rem;}

          .visual-sect{ margin-bottom: 4rem;}
          .visual-sect .img img{ height: 14rem;}

          .sub-tx-lg{ font-size: 1.8rem;}

          .pag-tit{ font-size: 4.2rem; margin: 5rem 0 2rem;}

          .div-tab{ padding: 0 2rem; height: 6rem; gap:.4rem;}
          .div-tab .itm{ height: 5rem; font-size: 1.3rem;}
          .div-tab .itm span{ height: 5rem;}
          .div-tab .itm::after{ height: 5rem;}

          .journey-hd{ gap:3rem; margin-bottom: 6rem;}
          .journey-hd .t1{ font-size: 3.5rem;}
          .journey-bx{ padding: 0; }
          .journey-bx .tit{ position: relative; top: auto; margin-bottom: 3rem; font-size: 5.6rem;}
          .journey-bx .itm{ padding: 2rem 0;}
          .journey-bx .itm .n{ font-size: 3rem;}
          .journey-bx .itm ul{ margin-top: 2rem; font-size: 1.3rem;}

          .cert-bx{ padding: 4rem 0 0 0;}          
          .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;}
          .modalPop .pop-close::before,
          .modalPop .pop-close::after{ width: 1.4rem; height: .2rem; margin-left: -.7rem;}

          .page-tit{ font-size: 4rem;}
          .contact-tit ul{ font-size: 2rem;}
          .contact-bx2{ margin-top: 5rem;}
          .contact-bx3{ margin-top: 5rem; padding-top: 5rem;}
          .contact-bx1 .map-bx, 
          .contact-bx2 .map-bx, 
          .contact-bx3 .map-bx,
          .contact-bx1 .map-bx iframe, 
          .contact-bx2 .map-bx iframe, 
          .contact-bx3 .map-bx iframe{height: 30rem;}
          
          .about-bx1 .inner, 
          .about-bx2 .inner, 
          .about-bx3 .inner{ padding: 0 2rem;}
          .about-bx1{ margin-top: -4rem; padding: 5rem 0;}
          .about-bx1 .text{ font-size: 3rem;}
          .about-bx1 .obj1,
          .about-bx1 .obj2,
          .about-bx1 .obj3{ display: none;}
          .about-bx1 p{ margin-top: 4rem; max-width: 100%; font-size: 1.6rem;}
          .about-bx2::before{ top: -15rem; width: 14rem; height: 30rem; background-size: cover;}
          .about-bx2::after{ bottom: -15rem; width: 14rem; height: 30rem; background-size: cover;}
          .about-bx2{ padding: 5rem 0;}
          .about-bx2 .title,
          .about-bx3 .title{ font-size:4rem; margin-bottom: 2rem;}
          .about-bx2 .text li{ padding: 2rem 0; font-size: 1.5rem; flex-direction: column;}
          .about-bx2 .text li .t-tx{ width: 100%; margin-bottom: 1rem;}
          .about-bx2 .text li p + p{ margin-top: 1rem;}
          .about-bx3{ padding: 5rem 0; margin-bottom: -8rem;}
          .about-bx3 .t1{ font-size: 1.8rem; margin-top: 3rem;}
          .about-bus{ flex-direction: column;}
          .about-bus .itm{ width: 100%; padding: 2rem; bottom: auto; }
          .about-bus .itm::after{ width: 4rem; height: 4rem; top: 2rem; right: 2rem;}
          .about-bus .itm > p{ font-size: 2.5rem; margin-bottom: 3rem;}

          .vision-bx1{ padding: 0 0 5rem;}
          .vision-bx1 .title{ font-size: 3rem; margin-bottom: 4rem;}
          .vision-bx1 p{ font-size: 1.6rem;}
          .vision-bx1::before{ width: 30rem; height: 32rem; left: 50%;}
          .vision-bx1 .img{ margin-top: 4rem;}
          .vision-bx2{ padding: 5rem 0; gap:4rem;}
          .vision-bx2 .title{ width: 30rem; height: 32rem; font-size: 4rem;}
          .vision-bx2 p{ font-size: 2rem;}
          .vision-bx3{ padding: 5rem 2rem;}
          .vision-bx3 .title{ font-size: 3rem; margin-bottom: 4rem;}
          .vision-bx3 ul{ gap:3rem; flex-direction: column;}
          .vision-bx3 ul li{ width: 100%; padding: 2rem; border-radius: 1.5rem; font-size: 1.6rem;}
          .vision-bx3 ul li .tit{ font-size: 2rem; padding-bottom: 2rem; margin-bottom: 2rem;}
          .vision-bx3.gray{ margin-bottom: -8rem;}
          .vision-bx3.gray::before{ width: 15rem; height: 16rem; top: -5rem;}

          .inq-wr{ padding-top: 3rem;}
          .inq-wr .t1{ font-size: 1.6rem;}
          .form-wr{ margin-top: 4rem; gap:0;}
          .form-wr .form-itm{ min-height: 4rem; width: 100%;}
          .form-wr .form-itm.cate{ padding-left: 8rem;}
          .form-wr .form-itm .hd{ font-size: 1.3rem;}
          .form-wr .form-itm.txt .hd{ top: 1.4rem;}
          .form-wr .input-wrapper .inp{ height: 6rem; padding-left: 8rem;}
          .form-wr .form-itm.cate .bd{ gap:1.4rem}
          .form-wr .form-itm .textarea{ height: 10rem; padding: 1rem 1rem 1rem 8rem;}
          .about-bus .itm ul{ font-size: 1.5rem;}

          .privacy-bx{ padding: 2rem 0 0;}
          .privacy-bx .tit{ font-size: 1.6rem;}
          .privacy-bx .text{ margin: 1.5rem 0 0 0; padding: 1.4rem; font-size: 1.3rem;}
          .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;}          
          
          .tbl-hd{ margin-bottom: 2rem; flex-wrap: wrap;}
          .tbl-sch{ width: calc(100% - 12rem);}
          .tbl-sch .inp{ height: 4rem; padding: 0 4rem 0 1rem;}
          .tbl-sch .search{ width: 4rem; height: 4rem; background-size: 1.4rem;}
          .tbl-sch2{ margin-top: 1rem; width: 100%; flex-wrap: wrap; gap:1rem;}
          .tbl-sch2 .select{ width: calc(50% - .5rem) ; min-width: auto;}
          .tbl-sch2 .btn{ width: 100%;}

          .news-list{ gap: 3rem 2rem; padding-bottom: 3rem;}
          .news-list .itm{ gap: 1.5rem; width: calc(50% - 1rem);}
          .news-list .itm .img{ height: 11rem;}
          .news-list .itm .img img{ height: 11rem;}
          .news-list .itm .text .cate{ font-size: 1.3rem;}
          .news-list .itm .text{ gap:.5rem}
          .news-list .itm .text .tit{ font-size: 1.5rem; max-height: 4.5rem; line-height: 1.2;}  
          .news-list .itm .text .date{ font-size: 1.2rem;}
          .news-list .itm.no-text{ padding-top: 3rem;}
          
          div.paging{ margin-top: 3.5rem;}
          div.paging a, 
          div.paging strong{ width: 3rem; height: 3rem; line-height: 3rem;}          

          .tbl-view .view-hd{ padding: 2rem 0; flex-direction: column;}
          .tbl-view .view-hd .subject{ font-size: 2rem;}
          .tbl-view .view-hd .date{ margin-top: 1rem; margin-left: 0; margin-right: auto; text-align: left;}
          .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;}
          .tbl-view .hd-tx{ padding: 1rem 0;}          

          table.list colgroup,
          table.list thead{ display: none;}
          table.list tbody{ display: flex; flex-direction: column; width: 100%;}
          table.list tbody tr{ position: relative; display: flex; flex-wrap: wrap; width: 100%; padding: 1rem 0 1rem 3rem; gap:.6rem 2rem}
          table.list tbody td{ padding: 0; display: flex; color:#999; font-size: 1.3rem;}
          table.list tbody td.no{ position: absolute; top: 1.2rem; left: 0; width: auto; order:1;}
          table.list tbody td.date{ width: auto; order:3;}
          table.list tbody td.title{ width: calc(100vw - 8rem); order:2; font-size: 1.25em;}
          table.list tbody td.title a{ width: 100%;}

          .noTxt,
          table.list tbody td.noTxt{ font-size: 1.4rem; justify-content: center; position: relative; width: 100%; padding: 0 3rem 0 0; left: 50%; transform: translateX(-50%); }

          .product-hd{ padding: 4rem 0 0 0; gap:2rem; font-size: 2rem;} 
          .product-hd .logo{ max-width: 50%;}
          .product-hd-tx{ margin-top: 4rem; flex-direction: column;}
          .product-hd-tx .text{ font-size: 1.8rem; gap:1rem;}
          .product-hd-tx .text b{ font-size: 3rem;}
          .product-hd-tx .img{ width: 100%;}
          .product-bd{ padding: 4rem 2rem; margin-top: 5rem;}
          .product-bd::before{ top: 28rem; width: 10rem; height: 30rem;}
          .prod-bd1{ padding: 2rem; gap:3rem; border-radius: 1.5rem;}
          .prod-bd1 .tit{ font-size: 2rem;}
          .prod-bd1 ul{ flex-direction: column;}
          .prod-bd1 ul li{ padding: 1.5rem; font-size: 1.4rem;}
          .product-wr .arr{ margin: 4rem auto;}
          .product-wr .arr b{ font-size: 3.4rem;}
          .prod-bd2{ padding: 2rem; gap:3rem; border-radius: 1.5rem;}
          .prod-bd2 .tit{ font-size: 3.5rem;}
          .prod-bd2 ul{ margin-top: 0; flex-direction: column;}
          .prod-bd2 ul li{ width: 100%; height: 6rem; border-radius: 3rem; font-size: 1.8rem;}
          .prod-bd2 ul li br{ display: none;}
          .prod-bd2 ul li + li{ margin-top: 1.3rem;}
          .prod-bd3{ margin-top: 4rem; font-size: 1.6rem;}
          .product-key > li{ padding: 2rem 0; flex-direction: column; gap:2rem;}
          .product-key > li i{ width: 8rem; height: 8rem;}
          .product-key > li i img{ width: 4rem;}
          .product-key > li .text .tit{ font-size: 2rem; text-align: center;}
          .product-key > li .text ul{ font-size: 1.4rem; margin-top: 1.5rem;}
          .product-proc,
          .product-proc.voice,
          .product-proc.omninote{ flex-direction: column; gap:1rem;}
          .product-proc > li,
          .product-proc.omninote > li{ width: 100%; padding: 1.5rem; border-radius: 1.5rem; gap: 1.5rem; font-size: 1.4rem;}
          .product-proc > li .tit{ font-size: 2rem; gap:0;}
          .product-proc > li .tit em{ font-size: 1.2rem;}
          .product-proc > li + li::before,
          .product-proc > li + li:nth-child(4)::before,
          .product-proc.voice > li + li:nth-child(4)::before,
          .product-proc.omninote > li + li:nth-child(3)::before,
          .product-proc.omninote > li + li:nth-child(4)::before,
          .product-proc > li + li:nth-child(5)::before,
          .product-proc > li + li:nth-child(6)::before,
          .product-proc.voice > li + li::before{ top: -2rem; left: 50%; transform: translateX(-50%) rotate(90deg);}
          .product-proc > li:nth-child(4){ order:4;}
          .product-proc > li:nth-child(5){ order:5;}
          .product-proc > li:nth-child(6){ order:6;}
          .product-proc.omninote > li:nth-child(3){ order:3;}
          .product-proc.omninote > li:nth-child(4){ order:4;}
          .product-bene > li{ flex-direction: column; gap:1.5rem;}
          .product-bene > li .img{ width: 100%;}
          .product-bene > li .text .tit{ font-size: 2rem;}
          .product-bene > li .text ul{ margin-top: 1rem; font-size: 1.4rem;}
          .prod-scope{ border-radius: 1.5rem; padding: 2rem;}
          .prod-scope .tit{ padding: 2rem 0; font-size: 2.8em; margin-bottom: 3rem;} 
          .prod-scope .ul-list01{ font-size: 1.8rem;}
          .prod-scope .text dl{ margin-top: 3rem; flex-direction: column;}
          .prod-scope .text dl dt{ width: 100%; font-size: 2.5rem;}
          .prod-scope .text dl ul{ margin-top: 3rem;}
          .prod-scope .text dl ul > li{ width: 100%; font-size: 1.8rem;}
          .prod-exp{ flex-direction: column; gap:2rem;}
          .prod-exp > li{ width: 100%; padding: 2rem; border-radius: 1.5rem;}
          .prod-exp > li .tit{ padding: 1rem 0 2rem; margin-bottom: 2rem; font-size: 1.8rem;}
          .prod-exp > li .tit b{ font-size: 2.8rem;}
          .prod-exp > li .ul-list01{ font-size: 1.8rem;}

          .prod-m1{ padding: 3rem 2rem 5rem; gap: 5rem;}
          .prod-m1::before,
          .prod-m1::after{ width: 14rem; height: 30rem; background-size: cover;}
          .prod-m1 .t1{ padding: 0; font-size: 2rem;}
          .prod-m1 .t1 b{ font-size: 4rem;}
          .prod-m1 .t2{ padding: 0; font-size: 2.2rem;}
          .prod-m2{ padding: 4rem 2rem; height: auto;}
          .prod-m2 ul{ flex-direction: column; width: 100%;}
          .prod-m2 ul li{ width: 100%; height: 6rem; border-radius: 3rem; font-size: 3rem;}
          .prod-m2 ul li + li{ margin: 2rem 0 0 0;}
          .product-wr .main-ailix{ padding-top: 4rem;}
          .product-wr .main-ailix .ailix-bx2{ padding: 0;}

          .esg-bx1 .title{ font-size: 3rem; margin-bottom: 4rem;}
          .esg-bx1 .inner{ flex-direction: column; gap:3rem;}
          .esg-bx1 .text{ font-size: 1.5rem;}
          .esg-bx1 .text strong{ font-size: 2.4rem;}
          .esg-bx1 .text b{ font-size: 2rem; margin: 2rem 0 1rem;}
          .esg-bx1 .img2{ margin-top: 4rem; width: 100%;}
          .esg-bx1::before{ width: 20rem; height: 18rem; top: 50%; left: 0;}
          .esg-bx2{ margin-top: 5rem;}
          .esg-bx2 .title{ font-size: 3rem; margin-bottom: 4rem;}
          .esg-bx2 .t1{ font-size: 2rem;}
          .esg-bx3{ margin-top: 5rem; margin-bottom: -8rem;}
          .esg-bx3 .itm{ padding: 5rem 0;}
          .esg-bx3 .itm .hd{ gap:1rem; flex-direction: column; padding-bottom: 3rem; margin-bottom: 3rem;}
          .esg-bx3 .itm .hd i{ width: 8rem; height: 8rem; padding: 2rem;}
          .esg-bx3 .itm .hd .txt{ font-size: 1.6rem;}
          .esg-bx3 .itm .hd .tit{ font-size: 2.4rem; margin-bottom: 2rem;}
          .esg-bx3 .itm .ul-list01{ font-size: 1.5rem;}
          .esg-bx3 .itm:last-child{ padding-bottom: 8rem;}

          .speak-bx1{ padding: 0 2rem;}
          .speak-bx1 .inner{ padding-bottom: 5rem;}
          .speak-bx1::before{ width: 25rem; height: 24rem;}
          .speak-bx1 .title{ font-size: 3rem; margin-bottom: 4rem;}
          .speak-bx1 .text{ font-size: 1.6rem;}
          .speak-bx2{ padding: 5rem 0;}
          .speak-bx2 .title, 
          .speak-bx3 .title, 
          .speak-bx4 .title{ font-size: 3rem; margin-bottom: 4rem;}
          .speak-bx2 ul{ gap:3rem;}
          .speak-bx2 ul li{ width: 100%; padding: 2rem; border-radius: 1.5rem; font-size:1.5rem;}
          .speak-bx2 ul .tit{ font-size: 2rem; margin-bottom: 2rem;}
          .speak-bx2 ul i{ position: relative; width: 6rem; height: 6; bottom: auto; right: auto; margin: 2rem 0 0 auto;}
          .speak-bx3{ padding: 5rem 0;}
          .speak-bx3 .ul-list01, 
          .speak-bx4 .ul-list01{ font-size: 1.6rem;}
          .speak-bx4{ margin-top: 5rem;}
          .speak-bx4 .dv-chk{ margin-top: 4rem; padding: 3rem 0;}
          .speak-bx4 .dv-chk label{ font-size: 1.6rem; }

        } /* /640px */

      } /* /820px */

    } /* /1024px */

  } /* /1200px */

} /* /1440px */

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