@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; }
.products #wrap,
.about #wrap{ overflow: hidden;}

#header{ position: absolute; top: 0; left: 0; width: 100%; height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 80px; transform: translateY(-100%); z-index:3; }
#header .logo{ width: 180px;}
#header .logo a{ display: block; height: 42px; 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 .lang{ position: relative; display: flex; }
#header .utill .lang .langBtn{ position: relative; display: inline-flex; align-items: center; height: 34px; color: #666; font-size: 16px; font-weight: 600; }
#header .utill .lang .langBtn + .langBtn{ margin-left: 16px; padding-left: 16px;}
#header .utill .lang .langBtn + .langBtn::before{ content: ''; background-color: #cecdcd; display: block; top: 50%; left: 0; width: 1px; height: 10px; margin-top: -5px; position: absolute;}
#header .utill .lang .langBtn:hover,
#header .utill .lang .langBtn.on{ color: #111; text-decoration: none;}
#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;}

nav > ul{ display: flex; align-items: center; gap: 54px;}
nav a{ display: block;}
nav > ul > li{ position: relative;}
nav > ul > li > a{ line-height: 120px; color: #111; font-size: 20px; font-weight: 600; text-transform: uppercase;}
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: #2e3192; 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: 150px; padding: 35px 30px; border-radius: 20px; background-color: #2e3192; transform: translateX(-50%); font-size: 16px; display: none;}
nav .gnb1 .subDepth{ width: 196px;}
nav .gnb2 .subDepth{ width: 210px;}
nav .gnb3 .subDepth{ width: 164px;}
nav .subDepth > li > a{ color: #fff; line-height: 1.1; font-weight: 600; opacity: .6;}
nav .subDepth > li:hover > a{ opacity: 1; text-decoration: none;}
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: .6; 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;}

footer{ padding: 95px 60px 125px; background-color: #000; color: #fff;}
footer .footerWrap{ position: relative; display: flex; max-width: 1200px; margin: 0 auto;}
footer .logo{ width: 354px;}
footer address{ display: flex; flex: 1; flex-direction: column; font-size: 16px;}
footer address .addr2{ margin-top: 5px;}
footer address .copy{ opacity: .5; font-size: 14px; margin-top: 65px;}
footer .bt-top{ position: absolute; width: 32px; height: 32px; display:block; right: 0; top: 10px; font-size:0; color:transparent; overflow: hidden;}
footer .bt-top::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 32px; height: 32px; 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: 0;  width: 32px; height: 32px; 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: 0;}

.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: 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::before{ content: ''; width: 4px; height: 1px; background-color: #bababa; display: inline-block; margin-right: 10px; vertical-align: 4px;}
.menu-content .subDepth li > ul > li > a:hover{ color: #fff; text-decoration: underline;}

/* .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: #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;}


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

#mainVisual{ position: relative; width: 100%; padding: 120px 80px; z-index: 2;}
#mainVisual .visualSlide{ border-radius:0; transform: scale(1.2); transition: all 1.6s ease; overflow: hidden;}
#mainVisual.ani .visualSlide{ transform: scale(1); border-radius: 26px;}
#mainVisual .bg .bg-pc{ height: 720px; background-size: cover; }
#mainVisual .bg .bg-mob{ display: none;}
#mainVisual .copy{ position: absolute; top: 0; bottom: 0; border-left-width: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; font-weight: 800; font-size: 75px; line-height: 1.1;}
#mainVisual .pag{ position: absolute; bottom: 25px; left: 0; padding: 0 40px; color: #fff; z-index:2;} 
#mainVisual .ctlr{ position: absolute; bottom: 30px; right: 0; padding: 0 30px; display: flex; gap:20px; 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: .5;}
#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;}

.main-vis-text{ position: relative; }
.main-copy{ font-size: 45px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #111; gap:40px; }
.main-copy b{ font-size: 120px; font-weight: 900; line-height: 1;}
.marquee-container{ overflow: hidden; margin-top: 150px;}
.marquee-text{ color:#f6f6f7; font-size:200px; font-weight: 600; white-space: nowrap; text-transform: uppercase;}

.main-prod{ max-width: 1380px; margin: 0 auto; padding: 70px 0 0 0;}
.main-prod .itm{ position: relative;}
.main-prod .itm + .itm{ margin-top: 60px;}
.main-prod .itm .text{ position: absolute; top: 0; left: 0; bottom: 0; width: 100%; padding: 90px 88px; display: flex; flex-direction: column; color: #fff; font-size: 18px;}
.main-prod .itm .text .tit{ line-height: 1; margin-bottom: 60px; font-size: 72px; font-weight: 900; }
.main-prod .itm .text .more{ text-transform: uppercase; width: 120px; height: 54px; border-radius: 30px; font-size: 16px; font-weight: 600; text-align: center; border:#fff 1px solid; color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(30px); position: absolute; top: 98px; right: 88px; transition: all .3s ease;}
.main-prod .itm .text .more:hover{ background-color: #fff; color: #020202; text-decoration: none;}

.main-research{ margin: 150px 0 0 0; padding: 100px 0 90px; background: url(../images/main_research.jpg) no-repeat 50% 50% /cover;}
.main-research .inner{ max-width: 1200px; margin: 0 auto; font-size: 18px;}
.main-research .tit{ font-size: 60px; color: #111; margin-bottom: 80px;}
.main-research .tit2{ font-size: 24px; color: #111; margin-bottom: 30px;}
.main-research .desc{ display: flex; align-items: end;}
.main-research .desc .text{ flex:1;}
.main-research .desc .btz{ width: 240px;}
.main-research .desc .btz a{ height: 70px; color: #fff; display: flex; width: 240px; justify-content: center; align-items: center; font-size: 20px; font-weight: 500; background-color: #2e3192; text-transform: uppercase; border-radius: 40px; transition: all .3s ease;}
.main-research .desc .btz a:hover{ background-color: #111; text-decoration: none;}
.main-research .desc2{ margin-top: 90px;}
.main-research .desc2 ul{ display: flex; align-items: center; justify-content: center; gap:22px;}
.main-research .desc2 ul li{ width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; position: relative; border: #111 1px solid; border-radius: 50%; font-weight: 600; color: #111; padding: 50px; text-align: center;}
.main-research .desc2 ul li i{ position: absolute; top: calc(50% - 12px); left: -24px; display: block; width: 24px; height: 24px; overflow: hidden;}
.main-research .desc2 ul li i::before{ content: ''; width: 24px; height: 24px; border: #111 1px solid; border-radius: 50%; display: block; top: -12px; left: 0; position: absolute;}
.main-research .desc2 ul li i::after{ content: ''; width: 24px; height: 24px; border: #111 1px solid; border-radius: 50%; display: block; bottom: -12px; left: 0; position: absolute;}

.main-obj > p{ position: absolute; display: block;}
.main-obj .obj1{ width: 320px; height: 320px; border-radius: 50%; border: #e7e7eb 1px solid; top: 894px; left: 100px; }
.main-obj .obj2{ width: 320px; height: 320px; background: url(../images/main_obj1.png) no-repeat 50% 50% / cover; top: 1020px; left: -50px; }
.main-obj .obj3{ width: 460px; height: 607px; background: url(../images/main_obj2.png) no-repeat 50% 50% / cover; top: 755px; right: 90px; }
.main-obj .obj4{ width: 160px; height: 160px; background: url(../images/main_obj3.png) no-repeat 50% 50% / cover; top: 1170px; right: 80px; }

/* sub */
#container{ position: relative; max-width: 1200px; margin: 0 auto; padding: 0 0 120px 0;}

.sub-tit{ display: flex; flex-direction: column; gap:20px; align-items: center; padding: 200px 0 90px; position: relative; z-index: 2;}
.sub-tit .tit{ text-align: center; font-size: 70px; color: #111; font-weight: 900; line-height: 1.2; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease;}
.sub-tit .location{ display: flex; align-items: center; color:#111; gap: 20px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: 0.2s;}
.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;}

.sub-tit2{ color: #111; font-size: 40px; margin-bottom: 50px;}

ul.ul-list{ color: #888; font-size: 18px;}
ul.ul-list > li{ text-indent: -16px; padding-left: 16px;}
ul.ul-list > li + li{ margin-top: 15px;}
ul.ul-list > li::before{ content: ''; width: 4px; height: 4px; border-radius: 50%; display: inline-block; background-color: #999; margin-right: 10px; vertical-align: 4px;}

.div-tab{ display: flex; justify-content: center; gap: 20px; margin-bottom: 50px;}
.div-tab .itm{ border: #e6e6e6 1px solid; height: 60px; min-width: 180px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #111; font-weight: 600;}
.div-tab .itm:hover,
.div-tab .itm.active{ background-color: #111; border-color: #111; color: #fff; text-decoration: none;}

.tbl-hd{ display: flex; margin-bottom: 30px; justify-content: space-between; align-items: center;}
.tbl-hd .totle{ color: #777;}
.tbl-hd .totle b{ color: #111;}
.tbl-sch{ position: relative; width: 340px;}
.tbl-sch .inp{ border:#e6e6e6 1px solid; width: 100%; height: 50px; border-radius: 25px; padding: 0 50px 0 25px; background-color: #fff;}
.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;}

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

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: #e6e6e6 1px solid;}
table.list tbody td{ padding: 28px 10px; text-align: center;}
table.list tbody td.title{ text-align: left;}
table.list .col-no{ width: 110px;}
table.list .col-date{ width: 140px;}

.tbl-view{ border-top: #111 1px solid; border-bottom: #111 1px solid;}
.tbl-view .view-hd{ padding: 50px 45px; display: flex; align-items: center; font-weight: 600;}
.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; font-size: 14px;}
.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: 16px; height: 16px; background: url(../images/ic_clib.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;}
.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;}

.news-list{ display: flex; gap:60px 30px; flex-wrap: wrap; border-top: #010101 1px solid; padding-top: 30px;}
.news-list .itm{ width: calc(33.3% - 20px); display: flex; flex-direction: column; gap:25px;}
.news-list .itm .img{ overflow: hidden; border-radius: 10px;}
.news-list .itm .img img{ object-fit: cover; width:100%; height:216px; 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;}

.inq-wr .text1{ font-size: 40px; color:#111; font-weight:600; text-align: center; }

.form-wr{ display: flex; flex-wrap: wrap; gap: 0 40px; margin-top: 100px; border-top: #010101 1px solid;}
.form-wr .form-itm{ position: relative; width: calc(50% - 20px); border-bottom: #e6e6e6 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: 16px; 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:#2e3192;}
.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 130px; border-radius: 0;}
.form-wr .form-itm .textarea{ height: 200px; padding: 34px 20px 20px 130px;}
.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:#2e3192; 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: 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;}

.sub-lg-tx{ font-size: 40px; font-weight: 600; color: #111; text-align: center;}
.visual-sect{ overflow: hidden; position: relative; left: 50%; transform: translateX(-50%); width: 1560px; margin-bottom: 140px;}
.visual-sect .img { position: relative; width: 100%;}
.visual-sect .img img { width: 100%; 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;}

/* products */
.heat-bx{ width: 1200px; margin: 110px auto 0; display: flex; gap:30px;}
.heat-bx .itm{ position: relative; flex: 1; border-radius: 30px; overflow: hidden; }
.heat-bx .itm span{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: flex; padding: 70px 80px; color: #fff; font-size: 90px; transition: all .3s ease; }
.heat-bx .itm i{ position: absolute; bottom: 60px; left: 60px; width: 60px; height: 60px; background-color: rgba(255,255,255,.05); border-radius: 50%; display: block; backdrop-filter: blur(10px); transition: all .3s ease;}
.heat-bx .itm i::before,
.heat-bx .itm i::after{ content: ''; width: 14px; height: 2px; position: absolute; top: 50%; left: 50%; display: block; background-color: #999; transform: translate(-50%,-50%);}
.heat-bx .itm i::after{ transform: translate(-50%,-50%) rotate(90deg);}
.heat-bx .itm:hover span{ background-color: #2e3192;}
.heat-bx .itm:hover i{ background-color: rgba(255,255,255,1); transform: rotate(90deg); }
.heat-bx .itm:hover i::before,
.heat-bx .itm:hover i::after{ background-color: #2e3192;}

.prod-cont{ width: 1200px; margin: 0 auto -120px;}
.prod-cont .prod-tit{ font-size: 40px; color: #111; font-weight: 600; margin: 80px 0 40px; }
.prod-cont p{ font-size: 20px;}
.prod-cont .tx02{ font-size: 24px}
.prod-cont p + .table-bx,
.prod-cont .table-bx + p{ margin-top: 20px;}
.prod-cont .tx01{ width: 1200px; font-size: 24px; color: #111; font-weight: 600; letter-spacing: -.05em; }
.prod-cont .img{ width: 1200px; margin-top: 75px; display: flex; flex-wrap: wrap; gap:40px 3.5%;}
.prod-cont .img img{ width: 31%;}
.prod-cont .sheet-bx{ display: flex; border-top: #111 1px solid; margin: 80px auto 0; padding: 100px 0 0 0; width: 100%; max-width: 1200px; justify-content: space-between;}
.prod-cont .sheet-bx dt{ font-size: 24px; font-weight: 600;}
.prod-txt{ position: relative; width: calc(100vw - 1px); left: 50%; transform: translateX(-50%); margin-top: 100px; padding: 100px 30px; background-color: #f5f7f9; display: flex; flex-direction: column; align-items: center; }

.prod-tbl{ border-top: #111 2px solid; color:#111;}
.prod-tbl thead th{ padding: 25px 10px; text-align: center; font-size: 16px; color: #111; font-weight: 600; line-height: 1.2; border-bottom: #e5e5e5 1px solid;  border-left: #e5e5e5 1px solid;  background-color: #f5f7f9;}
.prod-tbl tbody td{ padding: 25px 10px; text-align: center; font-size: 16px; color: #111; line-height: 1.2; border-bottom: #e5e5e5 1px solid; border-left: #e5e5e5 1px solid; }
.prod-tbl tbody td.l{ text-align: left; padding-left: 40px; }
.prod-tbl .bLn{ border-left: none;}

/* rnd */
.equ-list{ position: relative; width: calc(100vw - 10px); left: 50%; transform: translateX(-50%); padding: 100px 0; margin-top: 100px; margin-bottom: -120px; background-color: #fafafa; }
.equ-list .inner{ max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap:56px;}
.equ-list .itm{  background-color: #fff; border-radius: 45px; width: calc(50% - 28px); text-align: center; display: flex; flex-direction: column; align-items: center; padding: 30px; font-size: 30px; font-weight: 600; color: #111;}

.dev-wr .tx01{ font-size: 20px; color: #111; }
.dev-proc{ display:flex; justify-content:center; align-items:center; gap:0; padding: 100px 0; }
.dev-proc li{ margin: 0; padding: 0;}
.dev-proc .circle{ width: 260px; height: 260px; border-radius: 50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; font-weight:600; position: relative; margin-left: -26px; gap:15px;}
.dev-proc li:first-child .circle{ margin-left: 0; }
.dev-proc .circle .num{ font-size: 18px; opacity: .5; }
.dev-proc .circle .c-txt{ font-size: 20px; line-height:1.2; padding: 0; height: 102px;}
.dev-proc li:nth-child(1) .circle{ background: rgba(153,170,200,0.9); }
.dev-proc li:nth-child(2) .circle{ background: rgba(92,130,198,0.9); }
.dev-proc li:nth-child(3) .circle{ background: rgba(57,83,178,0.9); }
.dev-proc li:nth-child(4) .circle{ background: rgba(36,64,170,0.9); }
.dev-proc li:nth-child(5) .circle{ background: rgba(13,17,132,0.9); }

.dev-bx{ border-top: #111 1px solid; padding-top: 90px;}
.dev-bx-lst .itm{ border-radius: 45px; padding: 40px 80px 40px 40px; background-color: #fafafa; display: flex;}
.dev-bx-lst .itm + .itm{ margin-top: 40px;}
.dev-bx-lst .itm .hd{ width: 300px; display: flex; flex-direction: column; gap:15px;}
.dev-bx-lst .itm .hd i{ font-size: 18px; color: #2e3192; opacity: .3;}
.dev-bx-lst .itm .hd h4{ line-height: 1.2; font-size: 24px; color: #2e3192;}
.dev-bx-lst .itm ul{ flex:1;}

.rnd-wr .tx01{ font-size: 20px;color: #111;}
.rnd-wr .tx02{ margin-top: 90px; font-size: 20px;color: #111;}
.rnd-bx1{ border-top: #111 1px solid; margin-top: 100px; padding-top: 100px;}
.rnd-chart{ padding-top: 110px; display: flex; flex-direction: column; gap:120px;}
.rnd-chart h4{ position: relative; background-color: #2e3192; width: 400px; height: 120px; color: #fff; margin: 0 auto; border-radius: 60px; display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: 600;}
.rnd-chart h4::after{ content: ''; position: absolute; background-color: #d7dce3; top: 120px; height: 60px; width: 1px; display: block; left: 50%;}
.rnd-chart ul{ position: relative; display: flex; gap:20px;}
.rnd-chart ul li{ position: relative;  width: calc(25% - 15px); display: flex; flex-direction: column; }
.rnd-chart ul li b{ height: 98px; background-color: #d7dce3; display: flex; align-items: center; justify-content: center; color: #2e3192; font-size: 24px; border-radius: 30px 30px 0 0; }
.rnd-chart ul li span{ flex:1; display: flex; justify-content: center; min-height: 144px; background-color: #e9ecf0; border-radius: 0 0 30px 30px; padding: 30px 15px; color: #2e3192; font-size: 20px; text-align: center;}
.rnd-chart ul li::before{ content: ''; position: absolute; background-color: #d7dce3; top: -60px; height: 60px; width: 1px; display: block; left: 50%;}
.rnd-chart ul li:nth-child(1):before,
.rnd-chart ul li:nth-child(4):before{ display: none;}
.rnd-chart ul::before{ content: ''; position: absolute; display: block; border:#d7dce3 1px solid; border-bottom: none; left: 143px; right: 143px; height: 60px; top: -60px; border-radius: 40px 40px 0 0; }

.cert-list{ display: flex; gap: 90px 50px; flex-wrap: wrap; margin-top: 90px;}
.cert-list .itm{ width: calc(25% - 37.5px); }
.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:#2b40f5 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: #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);}


/* recruit */
.talent-wr .tx01{ color: #111; font-size: 60px; font-weight: 600; text-align: center; line-height: 1.2;}
.talent-wr ul{ margin-top: 100px; padding-top: 100px; border-top: #111 1px solid; display: flex; justify-content: center;  line-height: 1.2; gap:90px;}
.talent-wr ul li{ display: flex; flex-direction: column; align-items: center; text-align: center; gap:30px; font-size: 20px;}
.talent-wr ul li b{ font-size: 36px;}

.benefits-wr .tx01{ color: #111; font-size: 20px;}
.benefits-wr ul{ margin-top: 100px; display: flex; flex-wrap: wrap; gap:30px;}
.benefits-wr ul li{ width: calc(33.3% - 30px); border: #e6e6e6 1px solid; min-height: 360px; padding: 50px 30px 30px 40px; border-radius: 45px; display: flex; flex-direction: column; line-height: 1.2;}
.benefits-wr ul li i{ color:#2e3192; opacity: .3; font-size: 18px; font-weight: 600; }
.benefits-wr ul li b{ font-size: 24px; color: #111; margin: 10px 0 15px; text-transform: uppercase; letter-spacing: -.05em;}
.benefits-wr ul li span{ font-size: 20px;}
.benefits-wr ul li .img{ margin-top: auto; display: flex; justify-content: end;}

.hr-wr .tx01{ color: #111; font-size: 20px;}
.hr-bx1{ margin-top: 100px; padding-top: 100px; border-top: #111 1px solid;}
.hr-bx1 ul{ display: flex; gap:30px;}
.hr-bx1 ul li{ width: calc(33.3% - 20px); justify-content: space-between; border-radius: 45px; display: flex; gap:10px; flex-direction: column; padding: 30px 10px; color: #fff; align-items: center; background-color: #6c8ecc; text-align: center; font-size: 24px;}
.hr-bx1 ul li:nth-child(2){ background-color: #4c64ba;}
.hr-bx1 ul li:nth-child(3){ background-color: #313493;}
.hr-bx1 ul li b{ font-weight: 500; line-height: 1.2;}
.hr-bx2{ margin-top: 100px; padding: 100px 0; position: relative; width: calc(100vw - 10px); left: 50%; transform: translateX(-50%); background-color: #f5f7f9; margin-bottom: -120px; display: flex; flex-direction: column; align-items: center;}
.hr-bx2 > *{ width: 1200px;}
.hr-bx2 ul{ display: flex; gap:10px; margin-bottom: 25px;}
.hr-bx2 ul li{ position: relative; justify-content: center; border-radius: 20px; background-color: #fff; display: flex; flex-direction: column; padding: 20px; flex:1; gap: 5px; text-align: center; color: #888; line-height: 1.2; font-size: 14px;}
.hr-bx2 ul li b{ font-size: 20px; color: #111;}
.hr-bx2 ul li i{ position: absolute; top: 50%; left: -11%; overflow: hidden; transform: translateY(-50%); display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #ebeff3; }
.hr-bx2 ul li i::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-left: #111 2px solid; border-bottom: #111 2px solid; display: block; transform: translate(-50%,-50%) rotate(-135deg);}

.recruit-list{ display: flex; flex-wrap: wrap; gap:20px;}
.recruit-list .itm{ width: calc(25% - 15px);  display: flex; }
.recruit-list .itm a{ position: relative; overflow: hidden; border: #e6e6e6 1px solid; width: 100%; border-radius: 10px; padding: 30px; display: flex; flex-direction: column; text-decoration: none;}
.recruit-list .itm a > *{ position: relative; z-index: 2;}
.recruit-list .itm a .cate{ color:#2b40f5; font-size:15px; font-weight: 600;}
.recruit-list .itm a .cate.close{ color:#d0d5db;}
.recruit-list .itm a .tit{ font-size: 18px; color: #111; margin: 5px 0 60px; max-height: 45px; line-height: 1.2; overflow: hidden; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.recruit-list .itm a .date{ display: flex; flex-direction: column; gap:5px; font-size: 15px;  color: #868e96;}
.recruit-list .itm a .date em{ font-weight: 600; font-size: 16px; }
.recruit-list .itm a:hover .cate,
.recruit-list .itm a:hover .tit{ color: #fff; }
/* news hover ripple */
.recruit-list .itm a .ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: none;
  background: #2e3192;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.22,.9,.35,1), opacity 300ms ease;
  will-change: transform, width, height, opacity;
  z-index: 1;
}

.recruit-vew-desc{ position: relative; margin: 50px 0 0 0; background-color: #f3f3f7; padding: 50px 60px; }
.recruit-vew-desc .desc-hd{ border-bottom:#d6d6dd 1px solid; padding: 0 0 50px 0;}
.recruit-vew-desc .desc-hd .logo img{ height: 38px;}
.recruit-vew-desc .desc-hd strong{ font-size: 36px; margin-top: 10px; display: block; line-height: 1.2;}
.recruit-vew-desc .desc-bd{ padding: 50px 0 0 0; }
.recruit-vew-desc .desc-bd-itm{ text-indent: -25px; padding-left: 25px;}
.recruit-vew-desc .desc-bd-itm::before{ content: '*'; margin-right: 15px;}
.recruit-vew-bt{ margin: 60px 0 0 0; display: flex; justify-content: center; gap:8px;}
.recruit-vew-bt .btn{ border-radius: 40px;}
.recruit-vew-bt .btn::after{ content:''; width: 22px; height: 22px; margin-left: 70px; background-image: url(../images/ic_arr.png);}
.recruit-vew-bt .btn:hover{ background-color: #333;}

/* about */
.about-wr{ position: relative;}
.about-wr::before{ content: ''; position: absolute; top: -50px; right: -175px; width: 419px; height: 623px; display: block; background: url(../images/about_bg.png) no-repeat 50% 50% / cover;}
.about-wr .tx1{ position: relative; font-size: 150px; color: #111; font-weight: 900; text-align: center; }
.about-wr .tx2{ position: relative; margin-top: 120px; display: flex; justify-content: space-between; gap:30px;}
.about-wr .tx2 .text{ width: 600px; color: #111; font-size: 20px;}
.about-bx{ margin-top: 100px; margin-bottom: -120px; position: relative; width: calc(100vw - 10px); left: 50%; transform: translateX(-50%); background-color: #f5f7f9; padding: 100px 0;}
.about-bx .inner{ width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column;}
.about-bx .tit{ font-size: 75px; margin-bottom: 90px; font-weight: 200; text-transform: uppercase;}
.about-bx .tit b{ font-weight: 700;}
.about-bx ul{ margin-left: auto; width: 100%; max-width: 800px; border-top: #111 2px solid; font-size: 20px;}
.about-bx ul li{ padding: 30px 0; display: flex; border-bottom: #e5e5e5 1px solid;}
.about-bx ul li b{ width: 200px;}
.about-bx ul li span{ flex:1;}

.vision-wr .tit{ color: #2e3192; font-size: 30px; text-align: center; text-transform: uppercase; margin-bottom: 70px;}
.vision-bx1 ul{ display: flex; justify-content: space-between; gap:15px;}
.vision-bx1 ul li{ position: relative;}
.vision-bx1 ul li .text{ color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; padding: 55px 34px; display: flex; flex-direction: column; font-size: 20px; gap:30px;}
.vision-bx1 ul li b{ font-size: 30px; line-height: 1.2;}
.vision-bx2{ position: relative; width: calc(100vw - 10px); left: 50%; transform: translateX(-50%); background-color: #f5f7f9; margin-top: 100px; padding: 100px 0; display: flex; flex-direction: column; align-items: center;}
.vision-bx2 .text{ position: relative; padding: 0 115px; text-align: center; font-size: 60px; color: #111;font-family: 'GMarketSans'; display: flex; flex-direction: column; font-weight: 600; line-height: 1.2;}
.vision-bx2 .text::before,
.vision-bx2 .text::after{ content: ''; position: absolute; top: 10px; right: 0; width: 46px; height: 46px; display: block; background: url(../images/vision_dot.png) no-repeat 50% 50% / cover;}
.vision-bx2 .text::before{ right: auto; left: 0; transform: rotate(180deg);}
.vision-bx3{ margin-top: 100px;}
.vision-bx3 ul{ display: flex; flex-wrap: wrap; gap:20px 60px;}
.vision-bx3 ul li{ width: calc(50% - 30px); padding: 30px 10px; gap:35px; border-top: #111 1px solid; display: flex; align-items: center; font-size: 20px;}
.vision-bx3 ul li span{ flex:1;}

.global-wr .tx1{ font-size: 20px; color: #111; }
.global-bx1{ display: flex; padding: 100px 0;}
.global-bx1 li{ position: relative; width: 400px; height: 400px; color: #fff; text-align: center; margin: 0 -1px;}
.global-bx1 li > div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 300px; height: 300px; border-radius: 50%; background-color: #6c8ecc; display: flex; flex-direction: column; justify-content: center; align-items: center; gap:10px; }
.global-bx1 li:nth-child(2) > div{ background-color: #4c64ba;}
.global-bx1 li:nth-child(3) > div{ background-color: #313493;}
.global-bx1 li > div span{ height: 100px;}
.global-bx1 li > div i{ width: 20px; height: 40px; background-color: #ffff; display: block; position: absolute; top: calc(50% - 20px); left: -60px;}
.global-bx1 li > div i::before,
.global-bx1 li > div i::after{ content: ''; width: 13px; height: 3px; background-color: #313493; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.global-bx1 li > div i::after{ transform: translate(-50%, -50%) rotate(90deg);}
.global-bx1 li::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border:#a1a3ce 2px dotted; }
.global-bx1 li::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: #fff;}
.global-bx1 li:nth-child(2)::after{ content: ''; position: absolute; top: 0; bottom: auto; left: 0; width: 100%; height: 52%; background-color: #fff;}
.global-bx2{ border-top: #111 1px solid; padding-top: 100px; display: flex; justify-content: space-between; gap:30px;}
.global-bx2 span{ font-size: 20px;}

.contact-bx1{ display: flex; flex-wrap: wrap; gap:10px 70px;}
.contact-bx1 li{ width: calc(33% - 46px); display: flex; gap:35px;}
.contact-bx1 li:nth-child(1){ width: 100%; }
.contact-bx1 li span{ flex: 1;}
.contact-bx2{ margin-top: 60px;}
.contact-bx2 .tit{ font-size:20px; margin-bottom: 15px;}
.map-bx{ margin-top: 60px; border-radius: 45px; overflow: hidden; width: 100%;}
.map-bx iframe{ width: 100%; height: 500px; }

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

  #header{ padding: 0 20px;}

  #mainVisual{ padding: 120px 20px;}
  .main-prod{ padding: 70px 20px 0;}
  .main-research{ padding: 100px 20px 90px;}

  .visual-sect{ width: 100%;}
  
  @media screen and (max-width:1200px){
    .main-research .desc2 ul{ width: 100%; gap:2vw;}
    .main-research .desc2 ul li{ width: 14vw; height: 14vw;; padding: 0;}
    .main-research .desc2 ul li i{ width: 2vw; height: 2vw; left: calc(-2vw - 1px); top: calc(50% - 1vw);}
    .main-research .desc2 ul li i::before{ width: 2vw; height: 2vw; top: -1vw;}
    .main-research .desc2 ul li i::after{ width: 2vw; height: 2vw; bottom: -1vw;}

    #container{ padding: 0 20px 120px;}

    .heat-bx{ width: 100%; gap:20px;}
    .heat-bx .itm span{ padding: 30px;}

    .prod-cont,
    .prod-cont .tx01,
    .prod-cont .img{ width: 100%;}

    .rnd-chart ul::before{ left: 11vw; right: 11vw;}
    .equ-list .inner{ padding: 0 20px;}
    .dev-proc .circle{ width: calc(100vh / 5); height: calc(100vh / 5);}
    .hr-bx2{ padding: 100px 20px;}
    .hr-bx2 > *{ width: 100%;}

    .about-bx .inner{ padding: 0 20px;}
    .vision-bx2 .text{ padding: 0 80px;}
    .global-bx1 li{ width: 33vw; height: 33vw; }
    .global-bx1 li > div{ width: 26vw; height: 26vw;}
    .global-bx1 li > div p{ width: 8vw;}
    .global-bx1 li > div i{ left: -3.8vw;}

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

    nav,
    #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);}

    footer{ padding: 95px 20px 125px;}
    footer .footerWrap{ flex-direction: column;}
    footer address{ margin-top: 60px;}

    .dev-proc .circle{ width: calc(76vh / 5); height: calc(76vh / 5);}
    
    .modalPop .pop-close{ top: 0;}

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

      #mainVisual .copy{ font-size: 3rem;}
      .main-copy{ font-size:2rem;}
      .main-copy b{ font-size: 5rem;}
      .main-prod .itm .text{ padding: 3rem;}
      .main-prod .itm .text .tit{ font-size: 2.4rem; margin-bottom: 1rem;}
      .main-prod .itm .text .more{ position: relative; top: auto; right: auto; margin-top: 3rem;}
      .main-research .desc{ flex-direction: column; align-items: start;}
      .main-research .desc .btz{ width: 100%; margin-top: 2rem;}

      .heat-bx .itm i{ left: 20px; bottom: 20px;}

      .visual-sect h3{ left: 8rem; font-size: 3rem;}
      .visual-sect.animate h3{ left: 5rem;}

      .dev-proc .circle .num{ font-size: 14px;}
      .dev-proc .circle .c-txt{ font-size: 16px; height: 84px;}

      .talent-wr ul li b{ font-size: 25px;}

      .hr-bx2 ul li i{ left: -17%;}

      .tbl-view .hd-tx{ flex-wrap: wrap;}

      .about-wr .tx1{ font-size: 12vw;}

      .contact-bx1{ gap:10px 50px;}
      .contact-bx1 li{ width: calc(50% - 25px);}
      
      @media screen and (max-width:768px){  

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

          #header{ height: 5.6rem; padding: 0 2rem;}
          #header .logo{ width: 12rem;}
          #header .logo a{ height: 2.8rem;}

          footer{ padding: 4.5rem 1rem 6rem 3rem;}
          footer .logo{ width: 15rem;} 
          footer address{ margin-top: 2.5rem; font-size: 1.2rem;}
          footer address .addr2 span{ display: block;}
          footer address .copy{ margin-top: 4rem; font-size: 1.1rem;}
          footer .bt-top{ width: 2.5rem; height: 2.5rem; top: 0; right: 2rem;}
          footer .bt-top::before,
          footer .bt-top::after{ width: 2.5rem; height: 2.5rem;}
          
          #header.aMnuOpen .logo{ z-index: 99;}
          #header.aMnuOpen .utill{ position: absolute; top: 0; left: 0; height: 10rem; width: 100vw; padding: 1.4rem 2rem; justify-content: start; align-items: end; border-bottom: #f0f0f0 1px solid;}
          #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;}
          #header.aMnuOpen .bt-menu{ position: absolute; top: 1.5rem; right: 2rem; }

          .menu-content{ padding: 12rem 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);}

          #mainVisual{ padding: 5.6rem 1.5rem;}
          #mainVisual .bg .bg-pc{ display: none;}
          #mainVisual .bg .bg-mob{ display: block; height: 46rem; background-size: cover;}
          #mainVisual .pag{ bottom: 1.7rem; padding: 0 2rem;}
          #mainVisual .ctlr{ gap:1rem; bottom: 2rem; padding: 0 2rem;}
          #mainVisual .ctlr button{ width: 3.8rem; height: 3.8rem;}

          .main-vis-text{ padding: 10rem 0 0;}
          .main-copy { padding: 0 1.5rem;}
          .main-copy b{ font-size: 4.5rem;}
          .marquee-container{ margin-top: 4rem;}
          .marquee-text{ font-size: 12rem;}

          .main-obj .obj1{ width: 11rem; height: 11rem; top: 54.6rem; left: 1.5rem;}
          .main-obj .obj2{ width: 11rem; height: 11rem; top: 60rem; left: -5rem;}
          .main-obj .obj3{ width: 24rem; height: 31.6rem; top: 48rem; right: -4rem;}
          .main-obj .obj4{ width: 5.5rem; height: 5.5rem; top: 68rem; right: -2rem;}

          .main-prod{ padding: 1rem 1.5rem 0;}
          .main-prod .itm + .itm{ margin-top: 3rem;}
          .main-prod .itm .text{ padding: 4rem 3rem;}
          .main-prod .itm .text{ font-size: 1.2rem;}
          .main-prod .itm .text .tit{ font-size: 3rem; margin-bottom: 3rem;}
          .main-prod .itm .text p{ line-height: 1.6;}
          .main-prod .itm .text .more{ width: 7rem; height: 3.4rem; font-size: 1.2rem;}

          .main-research{ margin: 7.5rem 0 0 0; padding: 7rem 3rem 7rem;}
          .main-research .desc .text{ font-size: 1.2rem;}
          .main-research .tit{ font-size: 2.5rem; margin-bottom: 4rem;}
          .main-research .tit2{ font-size: 1.7rem; margin-bottom: 2rem;}
          .main-research .desc .btz{ margin-top: 5rem;}
          .main-research .desc .btz a{ width: 18rem; height: 5.4rem; font-size: 1.5rem;}
          .main-research .desc2{ display: none;}

          #container{ padding: 0 2rem 4rem; min-height: 60vh;}

          .sub-tit{ padding: 7rem 0 3rem;}
          .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: 1rem 1.5rem;}
          .sub-tit .location .depth3 li + li{ margin-top: .5rem;}
          .sub-tit2{ font-size: 2rem; margin-bottom: 2rem;}

          ul.ul-list{ font-size: 1.3rem;}
          ul.ul-list > li{ text-indent: -1rem; padding-left: 1rem;}
          ul.ul-list > li + li{ margin-top: 1rem;}
          ul.ul-list > li::before{ width: .3rem; height: .3rem; margin-right: .5rem;}

          .div-tab{ gap:1rem; margin-bottom: 3rem;}
          .div-tab .itm{ height: 4rem; min-width: 12rem; font-size: 1.6rem;}

          .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%;}

          table.list colgroup,
          table.list thead{ display: none;}
          table.list tbody{ display: flex; flex-direction: column;}
          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;}
          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: 100%; order:2; font-size: 1.25em;}

          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;}

          .recruit-vew-desc{ margin: 2rem 0 0 0; padding: 3rem 2rem;}
          .recruit-vew-desc .desc-hd{ padding-bottom: 3rem;}
          .recruit-vew-desc .desc-hd .logo img{ height: 2rem;}
          .recruit-vew-desc .desc-hd strong{ font-size: 1.8rem;}
          .recruit-vew-desc .desc-bd{ padding-top: 3rem;}
          .recruit-vew-bt{ margin-top: 3rem;}

          .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; line-height: 1.2;}  
          .news-list .itm .text .date{ font-size: 1.2rem;}
		  .news-list .itm .img img{ height:28vw;}

          .inq-wr .text1{ 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: 4rem; padding-left: 8rem;}
          .form-wr .form-itm.cate .bd{ gap:1.4rem}
          .form-wr .form-itm .textarea{ height: 10rem; padding: 1rem 1rem 1rem 8rem;}

          .privacy-bx{ padding: 2rem 0 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;}

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

          .heat-bx{ margin-top: 5rem; flex-direction: column; gap:2rem;}
          .heat-bx .itm{ width: 100%; border-radius: 1.6rem;}
          .heat-bx .itm span{ font-size: 4rem; padding: 3rem;}
          .heat-bx .itm i{ width: 4rem; height: 4rem;}

          .visual-sect{ margin-bottom: 4rem;}
          .visual-sect h3{ left: 4rem;}
          .visual-sect.animate h3{ left: 2rem;}

          .prod-cont{ margin-bottom: -4rem;}
          .prod-cont .prod-tit{ font-size: 2rem; margin: 4rem 0 2rem;}
          .prod-cont .table-bx{ width: 100%; overflow-x: auto;}
          .prod-tbl{ width: 150vw;}
          .prod-tbl thead th{ font-size: 1.2rem; padding: 2rem 1rem;}
          .prod-tbl tbody td{ font-size: 1.2rem; padding: 2rem 1rem;}
          .prod-cont p{ font-size: 1.3rem;}
          .prod-cont p + .table-bx, 
          .prod-cont .table-bx + p{ margin-top: 1rem;}
          .prod-cont .tx01{ font-size: 1.5rem;}
          .prod-cont .img{ margin-top: 3rem; flex-direction: column; gap:1rem;}
          .prod-cont .img img{ width: 100%; }
          .prod-cont .sheet-bx{ margin-top: 3rem; padding-top: 3rem; flex-direction: column;}
          .prod-cont .sheet-bx dt{ font-size: 1.6rem; margin-bottom: 1rem;}
          .prod-txt{ margin-top: 4rem; padding: 4rem 2rem;}
          .prod-cont .tx02{ font-size: 1.4rem; }

          .rnd-wr .tx01{ font-size: 1.4rem;}
          .rnd-wr .tx02{ margin-top: 4rem; font-size: 1.4rem;}
          .rnd-bx1{ margin-top: 4rem; padding-top: 4rem;}
          .rnd-chart{ padding-top: 2rem; gap:2rem;}
          .rnd-chart h4{ width: 82vw; height: 7rem; font-size: 2.3rem;}
          .rnd-chart ul{ width: 74vw; margin: 0 auto; flex-direction: column; gap:2rem;}
          .rnd-chart ul li{ width: 100%;}
          .rnd-chart ul li b{ height: 5.5rem; font-size: 1.8rem; border-radius: 2rem 2rem 0 0;}
          .rnd-chart ul li span{ min-height: 7rem; font-size: 1.4rem; border-radius: 0 0 2rem 2rem;}
          .rnd-chart h4::after,
          .rnd-chart ul::before{ display: none;}
          .rnd-chart ul li:nth-child(1)::before, 
          .rnd-chart ul li:nth-child(2)::before, 
          .rnd-chart ul li:nth-child(3)::before,
          .rnd-chart ul li:nth-child(4)::before{ display: block; height: 2rem; top: -2rem;}
          
          .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;}

          .equ-list{ width: 100vw; margin-top: 4rem ; margin-bottom: -4rem; padding: 3rem 0;}
          .equ-list .inner{ padding: 0 2rem; gap:2rem;}
          .equ-list .itm{ border-radius: 2rem; padding: 2rem; font-size: 1.4rem; width: calc(50% - 1rem);}

          .dev-wr .tx01{ font-size: 1.4rem;}
          .dev-proc{ flex-direction: column; padding: 3rem 0;}
          .dev-proc .circle{ gap:.5rem; margin-left: 0; margin-top: -10vw; width: calc(76vh / 3); height: calc(76vh / 3);}
          .dev-proc li:nth-child(1) .circle{ margin-top: 0;}
          .dev-proc .circle .num{ font-size: 1.4rem;}
          .dev-proc .circle .c-txt{ font-size: 1.6rem; height: auto;}
          .dev-bx{ padding-top: 3rem;}

          .dev-bx-lst .itm{ border-radius: 2rem; padding: 2rem; flex-direction: column; align-items: start;}
          .dev-bx-lst .itm + .itm{ margin-top: 2rem;}
          .dev-bx-lst .itm .hd{ gap:.5rem}
          .dev-bx-lst .itm .hd i{ font-size: 1.2rem;}
          .dev-bx-lst .itm .hd h4{ font-size: 1.8rem;}
          .dev-bx-lst .itm ul{ margin-top: 2rem;}

          .talent-wr .tx01{ font-size: 2rem;}
          .talent-wr ul{ margin-top: 4rem; padding-top: 4rem; flex-direction: column; gap: 6rem;}
          .talent-wr ul li{ font-size: 1.5rem; gap:1rem}
          .talent-wr ul li i{ width: 6.5rem;}
          .talent-wr ul li b{ font-size: 2.7rem;}

          .benefits-wr .tx01{ font-size: 1.6rem;}
          .benefits-wr ul{ margin-top: 4rem; gap:2rem;}
          .benefits-wr ul li{ width: calc(50% - 1rem); padding: 2rem; border-radius: 2rem; min-height: auto;}
          .benefits-wr ul li i{ font-size:1.2rem;}
          .benefits-wr ul li b{ font-size: 1.6rem; margin: 0 0 1rem;}
          .benefits-wr ul li span{ font-size: 1.3rem;}
          .benefits-wr ul li img{ width: 5rem; margin-top: 2rem;}

          .hr-wr .tx01{ font-size: 1.6rem;}
          .hr-bx1{ margin-top: 4rem; padding-top: 4rem;}
          .hr-bx1 ul{ flex-direction: column; gap:2rem}
          .hr-bx1 ul li{ width: 100%; border-radius: 2rem; font-size: 1.6rem;}
          .hr-bx1 ul li i{ width: 4rem;}
          .hr-bx2{ padding: 3rem 2rem; margin-top: 4rem; margin-bottom: -4rem; width: 100vw; }
          .hr-bx2 ul{ margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap;}
          .hr-bx2 ul li{ flex: none; font-size: 1.2rem; padding: 1.5rem; width: calc(50% - 1rem);}
          .hr-bx2 ul li b{ font-size: 1.6rem;}
          .hr-bx2 ul li i{ width: 3rem; height: 3rem; left: -13%; }
          .hr-bx2 ul li:nth-child(1){ order:1;}
          .hr-bx2 ul li:nth-child(2){ order:2;}
          .hr-bx2 ul li:nth-child(3){ order:4;}
          .hr-bx2 ul li:nth-child(4){ order:3; z-index: 1;}
          .hr-bx2 ul li:nth-child(5){ order:5; z-index: 2;}
          .hr-bx2 ul li:nth-child(3) i,
          .hr-bx2 ul li:nth-child(5) i{ left: calc(50% - 1.5rem); top: -18%; transform: rotate(90deg);}
          .hr-bx2 ul li:nth-child(4) i{ left: auto; right: -15%; top: calc(50% - 1rem); transform: rotate(-180deg);}

          .recruit-list{ flex-direction: column;}
          .recruit-list .itm{ width: 100%; }
          .recruit-list .itm a{ padding: 2rem;}
          .recruit-list .itm a .cate{ font-size: 1.2rem;}
          .recruit-list .itm a .tit{ font-size: 1.5rem; margin: .5rem 0 3rem;}
          .recruit-list .itm a .date{ font-size: 1.2rem;}
          .recruit-list .itm a .date em{ font-size: 1.3rem;}
			
		  .recruit-vew-bt{ flex-direction: column;}
		  .recruit-vew-bt .btn{ font-size:1.6rem; padding:0; width:100%;}
		  .recruit-vew-bt .btn::after{ margin-left:3rem; width:1.6rem; height:1.6rem; background-size:cover; }

          .about-wr::before{ width: 20rem; top: 0; right: -4rem; background-size: 100% auto; background-position: 50% 0;}
          .about-wr .tx2{ margin-top: 4rem; flex-direction: column;}
          .about-wr .tx2 .text{ font-size: 1.5rem; width: 100%;}
          .about-bx{ margin-top: 4rem; margin-bottom: -4rem; padding: 4rem 0; width: 100vw;}
          .about-bx .tit{ font-size: 2rem; margin-bottom: 3rem;}
          .about-bx ul{ font-size: 1.3rem;}
          .about-bx ul li{ padding: 1rem; flex-direction: column;}

          .vision-wr .tit{ font-size: 1.6rem; margin-bottom: 3rem;}
          .vision-bx1 ul{ gap: 1rem; flex-wrap: wrap; flex-direction: column; justify-content: center;}
          .vision-bx1 ul li{ width: 100%;}
          .vision-bx1 ul li .text{ padding: 2rem; font-size: 1.5rem; gap:1rem;}
          .vision-bx1 ul li b{ font-size: 2.2rem;}
          .vision-bx2{ margin-top: 4rem; padding: 4rem 2rem; width: 100vw;}
          .vision-bx2 .text{ padding: 0 4rem; font-size: 2rem;}
          .vision-bx2 .text::before, .vision-bx2 .text::after{ width: 3rem; height: 3rem;}
          .vision-bx3{ margin-top: 4rem;}
          .vision-bx3 ul{ flex-direction: column; gap:2rem}
          .vision-bx3 ul li{ width: 100%; padding: 1rem; font-size: 1.3rem;}
          .vision-bx3 ul li i{ width: 3rem; height: 3rem;}

          .global-wr .tx1{ font-size: 1.6rem;}
          .global-bx1{ padding: 4rem 0; align-items: center; flex-direction: column;}
          .global-bx1 li{ width: 60vw; height: 60vw;}
          .global-bx1 li::after{ top: 0; left: 0; width: 50%; height: 100%; bottom: 0;}
          .global-bx1 li:nth-child(2):after{ top: 0; right: 0; left: auto; width: 50%; height: 100%; bottom: 0;}
          .global-bx1 li > div{ width: 46vw; height: 46vw;}
          .global-bx1 li > div i{ width: 6vw; height: 6vw; top: -9.5vw; left: calc(50% - 3vw);}
          .global-bx1 li > div span{ font-size: 1.2rem; height: auto; padding: 0 2rem;}
          .global-bx2{ margin-top: 4rem; padding-top: 4rem; flex-direction: column;}
          .global-bx2 span{ font-size: 1.4rem;}
          
          .contact-bx1 li{ width: 100%; gap:0;}
          .contact-bx1 li b{ width: 8rem;}
          .map-bx{ border-radius: 2rem; margin-top: 4rem;}
          .map-bx iframe{ height: 40rem;}
          .contact-bx2{ margin-top: 4rem;}
          .contact-bx2 .tit{ font-size: 1.6rem;}
          
          .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;}
}