@charset "utf-8";

/* 
 * content CSS Document
 *
 */

.area-subVisual {position: relative; width:100%; height:500rem; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; background-color:var(--black);} 
.area-subVisual > .inr {position:relative;height:calc(100% - 70rem); display:flex; align-items: flex-end; justify-content:space-between; color: var(--white); padding-bottom:100rem;}
.area-subVisual[data-subLayout="about"]{background-image:url('/images/content/sub-visual01.jpg')}
.area-subVisual[data-subLayout="technology"]{background-image:url('/images/content/sub-visual07.jpg')}
.area-subVisual[data-subLayout="product"]{background-image:url('/images/content/sub-visual03.jpg')}
.area-subVisual[data-subLayout="service"]{background-image:url('/images/content/sub-visual04.jpg')}
.area-subVisual[data-subLayout="news"]{background-image:url('/images/content/sub-visual05.jpg')}
.area-subVisual[data-subLayout="contact"]{background-image:url('/images/content/sub-visual06.jpg')}
.area-subVisual h2 {font-size: 52rem; font-weight: 800; letter-spacing: -0.01em; text-shadow : 5rem 8rem 20rem rgba(0, 0, 0, 0.8)}
.sub-navigation ul {display:flex; align-items: center; gap: 20rem; justify-content: center;}
.sub-navigation li {position:relative; line-height:1; font-size:var(--font18); font-weight:500; letter-spacing: -0.01em; color:var(--white); }
.sub-navigation li img{height:15rem; vertical-align: top;}
.sub-navigation i {font-size:15rem;}
.area-subVisual[data-subLayout="news"] > .inr, .area-subVisual[data-subLayout="contact"] > .inr {height: 100%;}
.area-subVisual[data-subLayout="news"] .area_lnb, .area-subVisual[data-subLayout="contact"] .area_lnb  {display: none;}
/* lnb */
.area_lnb {--lnb-height:70rem; position:relative; height:var(--lnb-height); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 5; border-top: 1rem solid rgba(255, 255, 255, 0.1);}
.area_lnb .inr{display:flex; height:100%; z-index:1;}
.area_lnb .btn_home{display:flex; justify-content:center; align-items:center; height:100%; aspect-ratio:1/1; border-left: 1rem solid rgba(255, 255, 255, 0.2); border-right: 1rem solid rgba(255, 255, 255, 0.2); }
.area_lnb .btn_home img{display:block; width:18rem;}
.area_lnb .lnb-depth{position:relative; width: 300rem; height:100%; border-right: 1rem solid rgba(255, 255, 255, 0.2);}
.area_lnb .lnb-depth:not(.de1) {min-width: 300rem; width: auto;}
.area_lnb .lnb-depth span {font-size: var(--font16); overflow: hidden; padding-right: 30rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: normal; word-break: break-all;}
.area_lnb .lnb-depth.de1 button {pointer-events: none;} 
.area_lnb .lnb-depth button{display:flex; align-items:center; position:relative; padding:0 25rem; width:100%; height:100%; color:var(--white); background:none;}
.area_lnb .lnb-depth:not(.de1) button:after{content:''; display:block; position:absolute; right:30rem; top:50%; transform:translateY(-50%); width:11rem; aspect-ratio:1/1; background:url('/images/common/drop_down.svg')no-repeat center/contain; transition:.3s ease;}
.area_lnb .lnb-depth:not(.de1) button.open:after{transform:translateY(-50%) rotate(180deg);}
.area_lnb .lnb-depth nav {display:none; position:absolute; left:0; top:var(--lnb-height) -1rem; width:100%;  padding: 10rem 0; font-weight: 600; z-index:1; background:var(--point); color: rgba(255, 255, 255, 0.5);}
.area_lnb .lnb-depth nav span {padding-right: 0;}
.area_lnb .lnb-depth nav ul > li > a {display:block; padding: 10rem 25rem;}
.area_lnb .lnb-depth nav ul > li > a.on, .area_lnb .lnb-depth nav ul > li > a:hover {color: var(--white);}
.area_lnb .lnb-depth .box{display:none;}

@media (max-width:768px){
	.area-subVisual{display:flex; flex-direction:column; justify-content:space-between;}
    .area-subVisual > .inr {flex-direction: column-reverse; justify-content: center; align-items: center; height:auto; padding-bottom: 0; gap: 20rem; padding-top: 50rem;}
    .area-subVisual h2 {font-size: 35rem; text-shadow : 0rem 5rem 10rem rgba(0, 0, 0, 0.08)}
    .area_lnb .lnb-depth.de1 {display: none;}
    .area_lnb .lnb-depth nav {top: var(--lnb-height)}
	.area_lnb .btn_home{flex:none;}
	.area_lnb .lnb-depth:not(.de1){flex:auto; min-width:inherit;}
}
@media (max-width:480px){
    .area-subVisual {height: 380rem;}
    .area-subVisual > .inr {height: calc(100% - 100rem); }
    .sub-navigation {display: none;}
    .area_lnb {--lnb-height:50rem; height:auto;}
    .area_lnb .inr {flex-direction:column; width: 100%;}
    .area_lnb .lnb-depth {border-right: 0;}
    .area_lnb .btn_home {display: none;}
    .area_lnb .lnb-depth button {font-size: 14rem; padding: 0 20rem;}
	.area_lnb .lnb-depth button.open{background-color:var(--point);}
    .area_lnb .lnb-depth:not(.de1){min-width: 100%; width: 100%; height:var(--lnb-height); border-top:1px solid rgba(255, 255, 255, 0.2);}
    .area_lnb .lnb-depth nav {font-size: 14rem; background: #f5f6f8; color: #888; margin-top: -1rem;}
    .area_lnb .lnb-depth nav ul > li > a.on, .area_lnb .lnb-depth nav ul > li > a:hover {color: var(--black);}
    .area_lnb .lnb-depth nav ul > li > a {padding: 10rem 20rem;}
}

/* 공통 레이아웃 */
#content {padding: 120rem 0; min-height: 300rem;}
#content img{max-width:100%;}
/* title */
.subTit {text-align: center; margin-bottom:60rem;}
.subTit em {display: block; font-size: var(--font20); font-weight: 600; color:#a9a9a9; margin-top:30rem;}
.subTit em[data-subtitle="kor"]{display:none}
.subTit h2 {font-size: var(--font45); line-height: 1.45; font-weight:800; letter-spacing: -0.02em;}
.sub_h4 {font-size: var(--font30); font-weight: 800;}
.sub_h5 {position: relative; font-size: var(--font28); font-weight: 700; letter-spacing: -0.01em; padding-left: 20rem;font-family: var(--font-combine); word-break:keep-all;}
.sub_h5::before {content: ''; position: absolute; top: 5rem; left: 0; width: 6rem; height: 22rem; background: linear-gradient(45deg, #12c1d6, #243ac3); word-break:keep-all;}
.sub_h6 {margin-top:40rem; font-size: var(--font22); font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-combine); }
.sub_h6 ~ .imgList{margin-top:20rem;}
.sub_h6 ~ .flex-box{margin-top:20rem;}
/* design */
.dotList li {position: relative; padding-left: 15rem; font-size: var(--font18); line-height: 1.6; word-break:keep-all;}
.dotList li + li {margin-top: 12rem;}
.dotList li::before {position: absolute; content:''; top: 11rem; left: 0; width: 5rem; height: 5rem; border-radius: 50%; background: #a9a9a9;}
.dotList li strong{display:block;}
/* flex box */
.flex-box{display:flex; align-items:center; gap:10rem;}
.flex-box.bewteen{justify-content:space-bewteen;}
.flex-box.top{align-items:flex-start;}
.flex-box .dotList{margin-top:0 !important;}
.flex-box .img{border:1rem solid #888;}
/* img mobile scroll */
.imgMob-box{background-color:#fff; text-align:center;}
@media (max-width:768px){
	.imgMob-box{overflow-x:auto;}
	.imgMob-box img{max-width:inherit !important; width:inherit;}
}
@media (max-width:767px){
    #content {padding: 80rem 0;}
    .subTit {margin-bottom:40rem;}
    .subTit em {margin-top:20rem;}
    .sub_h5 {padding-left:15rem;}
    .sub_h5::before {width:5rem; height:20rem; top: 7rem;}
}
@media (max-width:480px){
    #content {padding: 65rem 0;}
    .subTit {margin-bottom:30rem;}
    .subTit em {font-size: 15rem; margin-top: 15rem;}
    .sub_h5 {padding-left:9rem; font-size: 20rem;} 
    .sub_h5::before {width: 3rem; height: 15rem; top: 3rem;}
	.sub_h6{font-size: 18rem;}
    .dotList li {padding-left: 10rem}
    .dotList li + li {margin-top: 10rem;}
    .dotList li::before {top:10rem; width:4rem; height:4rem;}
}

/* about1 */
[data-sub="about1"]{word-break:keep-all;}
[data-sub="about1"] .subCont { padding: 0 80rem;}
[data-sub="about1"] .img {width: 100%; height: 420rem; margin-bottom: 60rem;}
[data-sub="about1"] .img img {width:100%; height:100%; object-fit: cover;}
[data-sub="about1"] .tit {margin-bottom: 50rem;}
[data-sub="about1"] .tit h2 {font-size: var(--font40); line-height: 1.45; font-weight:800; letter-spacing: -0.015em;}
[data-sub="about1"] .tit h2 span {color: var(--point);}
[data-sub="about1"] .txt {font-size: var(--font18); line-height: 1.8;}
[data-sub="about1"] .txt p + p {margin-top: 30rem;}
[data-sub="about1"] .ceo {display: flex; align-items: center; gap: 15rem; margin-top: 60rem; font-weight: 500;}
[data-sub="about1"] .sign {font-size: var(--font28); font-family: 'KCCImkwontaek';}

/* about2 */
[data-sub="about2"] {overflow: hidden;}
[data-sub="about2"] .hisImg {width:100%;height: 460rem; background: url(/images/content/about2.jpg) no-repeat 50% 50% / cover;}
[data-sub="about2"] .hisImg .inr {position:relative; height:100%;}
[data-sub="about2"] .hisImg .txt {position: absolute; bottom: -100rem; left:0; display:flex; justify-content:flex-end; flex-direction:column; width:470rem; height:auto; color: var(--white); padding: 80rem 50rem 80rem; box-sizing: border-box; z-index: 10; background: linear-gradient(-0deg, #0e5ecb, #007fda);s}
[data-sub="about2"] .hisImg .txt em {display: block; font-size: var(--font18); font-weight: 700; opacity: 0.7; letter-spacing:0.02em; margin-bottom:20rem;}
[data-sub="about2"] .hisImg .txt h3 {font-size:35rem; line-height: 1.35; font-weight: 700; font-family: var(--font-combine);}
[data-sub="about2"] .hisCon {position: relative; display: flex; flex-direction: column; padding: 100rem 0 50rem 0;}
[data-sub="about2"] .hisCon::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width:2rem; height: 100%; background: #eee;}
[data-sub="about2"] .hisList { width: 50%; padding-top: 80rem; box-sizing: border-box;}
[data-sub="about2"] .hisList h3 {position: relative; font-size: var(--font50); font-weight:900; margin-bottom: 30rem;}
[data-sub="about2"] .hisList h3::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 12rem; height:12rem; background: var(--white); border-radius: 50%; border: 2rem solid var(--second);}
[data-sub="about2"] .hisList li {display: flex; gap: 25rem; font-size: var(--font18); color: #555;}
[data-sub="about2"] .hisList li + li {margin-top: 20rem;}
[data-sub="about2"] .hisList li b {font-weight:800;}
[data-sub="about2"] .hisList:nth-child(even) {text-align: right; align-self: flex-start;} 
[data-sub="about2"] .hisList:nth-child(even) h3, [data-sub="about2"] .hisList:nth-child(even) ul {padding-right: 100rem;} 
[data-sub="about2"] .hisList:nth-child(even) li { flex-direction: row-reverse;} 
[data-sub="about2"] .hisList:nth-child(odd) {text-align: left; align-self: flex-end; } 
[data-sub="about2"] .hisList:nth-child(odd) h3, [data-sub="about2"] .hisList:nth-child(odd) ul {padding-left:100rem;} 
[data-sub="about2"] .hisList:nth-child(odd) .year::before {left:-6rem;}
[data-sub="about2"] .hisList:nth-child(even) .year::before {right: -6rem; background: var(--white); border: 2rem solid var(--second);}

/* about3 */
[data-sub="about3"] .certList {display:grid; grid-template-columns: repeat(5,1fr); gap: 50rem 30rem; text-align: center;}
[data-sub="about3"] .certCon {position: relative; display:block; padding: 60rem 20rem; box-sizing:border-box; background: #f5f6f8;}
[data-sub="about3"] .certCon .img {display: block; width:70%; margin: 0 auto;}
[data-sub="about3"] .certCon .img img {width: 100%; max-width: 100%; object-fit: contain;}
[data-sub="about3"] .certCon .over {position: absolute; bottom: 0;right: 0; display: flex; align-items: center; justify-content: center; transition: .4s; width: 50rem; height: 50rem; background: var(--second); color: var(--white);}
[data-sub="about3"] .certCon .over i {font-size: 20rem; transition: .3s;}
[data-sub="about3"] .certList p {margin-top: 20rem; font-size: var(--font18); font-weight: 600; word-break:keep-all;}
.modal-con {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); z-index: 100}
.modal-con__img {position: absolute;top: 50%;left: 50%;width: 28%;transform: translate(-50%, -50%);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);}
.modal-con__img .img {display:block;}
.modal-con__img img {width:100%;}
.modal-con .close {position: absolute; top: 0; right: -80rem; display: block; width: 60rem; height: 60rem; border-radius: 100%; background: #111;}
.modal-con .close::before {content: ''; position:absolute; top:50%; left:50%; width:20rem; height: 2rem; background: #fff; transform: translate(-50%, -50%) rotate(45deg);}
.modal-con .close::after {content: ''; position:absolute; top:50%; left:50%; width:20rem; height: 2rem; background: #fff; transform: translate(-50%, -50%) rotate(-45deg);}
[data-sub="about3"] .certCon:hover .over {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);}
[data-sub="about3"] .certCon:hover .over i {width: 55rem; height: 55rem; border-radius: 50%; background: var(--point); line-height: 55rem; text-align: center;}
[data-sub="about3"] .certCon:hover .over i:hover {transform: rotate(90deg);}

/* about4 */
[data-sub="about4"] .list {display: grid; grid-template-columns: repeat(4,1fr); gap: 25rem; text-align: center;}
[data-sub="about4"] .list li {border: 4rem solid #eee; transition:.3s;}
[data-sub="about4"] .list li:hover {border-color:var(--second);}
[data-sub="about4"] .list a {display:flex;align-items: center;justify-content: center; padding: 10rem; box-sizing: border-box;}
[data-sub="about4"] .list img {object-fit: contain; width: 100%;}
[data-sub="about4"] .list a.none {pointer-events:none;}

/* about5 */
[data-sub="about5"] .list {display: grid;grid-template-columns: repeat(2,1fr); gap: 60rem 0;}
[data-sub="about5"] .list li:nth-child(1) {padding-right: 35rem;}
[data-sub="about5"] .list li:nth-child(2) {padding-left: 35rem; border-left: 2rem dotted #ddd;}
[data-sub="about5"] .tit {display: flex; align-items: center; justify-content: space-between; gap: 10rem;}
[data-sub="about5"] .tit .link {display: flex; align-items: center ;justify-content: center; width:58rem; height: 58rem; border-radius: 50%; background: #f4f5f8; transition: .3s;}
[data-sub="about5"] .tit .link i {font-size: var(--font20);}
[data-sub="about5"] .tit img {object-fit:contain;}
[data-sub="about5"] .img {width: 100%;  margin: 35rem 0;}
[data-sub="about5"] .img img {width:100%; max-width: 100%;}
[data-sub="about5"] .txt {font-size: var(--font17); line-height: 1.7; color: #555;}
[data-sub="about5"] .tit .link:hover {background: var(--point); color: var(--white);}

/* about6 */
[data-sub="about6"] .subCont {display: flex; flex-direction:column; gap: 50rem;}
[data-sub="about6"] .subCont .cont {flex: 1;}
[data-sub="about6"] .subCont h5 {margin-bottom: 20rem; font-size: var(--font25); font-family: var(--font-combine);}
/* [data-sub="about6"] .tableWrap {border: 1rem solid #555; } */

[data-sub="about6"],
[data-sub="about7"]{
	table.table th, 
	table.table td{font-size:var(--font18);}
	table.table tbody td:first-child{ text-align: left; }
}

@media (max-width:1080px){
    [data-sub="about1"] .subCont {padding: 0;}
    [data-sub="about2"] .hisImg {height: 350rem;}
    [data-sub="about2"] .hisImg .txt { width:400rem;padding: 50rem 30rem 50rem;}
    [data-sub="about2"] .hisImg .txt h3 {font-size:30rem;}
    [data-sub="about3"] .certList {grid-template-columns: repeat(3,1fr); gap: 30rem 20rem;}
    [data-sub="about3"] .certCon {padding: 40rem 15rem;}
    [data-sub="about3"] .certCon .img {width: 80%;}
    [data-sub="about3"] .certCon .over {width: 40rem;height: 40rem;}
    .modal-con__img {width: 40%;}
    [data-sub="about4"] .list {gap: 15rem;}
    [data-sub="about4"] .list a {padding: 5rem;}
    [data-sub="about5"] .tit img {height: 45rem;}
    [data-sub="about5"] .list {grid-template-columns: repeat(1, 1fr);}
    [data-sub="about5"] .list li:nth-child(1) {padding-right: 0;}
    [data-sub="about5"] .list li:nth-child(2) {padding-left: 0;}
    [data-sub="about6"] .subCont {gap: 30rem;}
}
@media (max-width:767px){
    [data-sub="about1"] .img {height:350rem; margin-bottom:40rem;}
    [data-sub="about1"] .tit {margin-bottom: 30rem;}
    [data-sub="about1"] .tit h2 {line-height: 1.35; font-weight:700;}
    [data-sub="about1"] .txt p + p {margin-top: 22rem;}
    [data-sub="about1"] .txt p br {display: none;}
    [data-sub="about1"] .ceo {gap:10rem; margin-top: 40rem;}
    [data-sub="about1"] .sign {font-size: 18rem;}
    [data-sub="about2"] .hisList {padding-top:50rem;}
    [data-sub="about2"] .hisImg {height: 350rem; background-position: 70% 50%;}
    [data-sub="about2"] .hisImg .txt em {margin-bottom:15rem;}
    [data-sub="about2"] .hisImg .txt h3 {font-size:25rem;}
    [data-sub="about2"] .hisList:nth-child(even) .year::before {right: auto; left: 0;}
    [data-sub="about2"] .hisList:nth-child(even) h3, [data-sub="about2"] .hisList:nth-child(even) ul {padding-right:40rem;} 
    [data-sub="about2"] .hisList:nth-child(odd) h3, [data-sub="about2"] .hisList:nth-child(odd) ul {padding-left:40rem;} 
    [data-sub="about3"] .certList {grid-template-columns: repeat(2,1fr); gap: 20rem 15rem;}
    [data-sub="about3"] .certList p {margin-top: 12rem;}
    .modal-con__img {width: 50%;}
    [data-sub="about4"] .list {grid-template-columns: repeat(3,1fr); gap: 10rem;}
    [data-sub="about4"] .list a {padding: 0;}
    [data-sub="about6"] .subCont {flex-direction: column; gap: 40rem;}
}
@media (max-width:480px){
    [data-sub="about1"] .img {height:200rem; margin-bottom:40rem;}
    [data-sub="about1"] .tit h2 {font-size: 22rem;}
    [data-sub="about1"] .tit h2 br {display: none;}
    [data-sub="about1"] .txt p + p {margin-top: 15rem;}
    [data-sub="about2"] .hisImg {height: 220rem;}
    [data-sub="about2"] .hisImg .txt {width: 100%; padding: 30rem 20rem; bottom: -50rem;}
    [data-sub="about2"] .hisCon {padding: 60rem 0 30rem 0;}
    [data-sub="about2"] .hisImg .txt h3 {font-size: 18rem; font-weight: 600;}
    [data-sub="about2"] .hisCon::before {left: 0; transform: translateX(0);}
    [data-sub="about2"] .hisList {width:100%; padding-top: 30rem;}
    [data-sub="about2"] .hisList li {gap: 10rem; flex-direction: column; align-items: flex-start;}
    [data-sub="about2"] .hisList h3 {font-size: 22rem; margin-bottom: 20rem;}
    [data-sub="about2"] .hisList h3::before {width: 10rem; height: 10rem;}
    [data-sub="about2"] .hisList:nth-child(odd) .year::before {left: -5rem;}
    [data-sub="about2"] .hisList:nth-child(even) .year::before {left: -5rem;}
    [data-sub="about2"] .hisList:nth-child(even) h3, [data-sub="about2"] .hisList:nth-child(even) ul {padding-right:0; padding-left:30rem;} 
    [data-sub="about2"] .hisList:nth-child(odd) h3, [data-sub="about2"] .hisList:nth-child(odd) ul {padding-left:30rem;} 
    [data-sub="about2"] .hisList:nth-child(even) {text-align: left;}
    [data-sub="about2"] .hisList:nth-child(even) li {flex-direction: column;}
    [data-sub="about3"] .certCon {padding: 30rem 15rem;}
    [data-sub="about3"] .certCon .img {width: 90%;}
    [data-sub="about3"] .certCon .over {width: 30rem; height: 30rem;}
    [data-sub="about3"] .certCon .over i {font-size: 15rem;}
    .modal-con__img {width: 60%;}
    .modal-con .close {width: 35rem; height: 35rem; right: -40rem;}
    .modal-con .close::before, .modal-con .close::after {width: 14rem;}
    [data-sub="about4"] .list {grid-template-columns: repeat(2,1fr); gap: 7rem;}
    [data-sub="about4"] .list li {border: 1rem solid #e5e5e5;}
    [data-sub="about5"] .list {gap: 30rem;}
    [data-sub="about5"] .tit img {height: 30rem;}
    [data-sub="about5"] .tit .link {height: 40rem; width: 40rem;}
    [data-sub="about5"] .tit .link i {font-size: 15rem;}
    [data-sub="about5"] .img {margin: 20rem 0;}
}

/* 기술/제품/서비스 공통 */
.area_tech .tit, 
.area_product .tit, 
.area_service .tit {display: flex; gap: 15rem; align-items: flex-end; margin-bottom: 35rem;}
.area_tech .dotList, 
.area_product .dotList, 
.area_service .dotList {margin-top: 30rem;}
.sub_h6 ~ .dotList{margin-top:20rem !important;}
.tab-nav{ margin-bottom: 60rem; 
	ul{display: flex;justify-content: center;border-bottom: 1rem solid #ddd;}
	a{display: block;padding: 15rem 30rem;color: #999;/* border-bottom: 1px solid #222; */font-size: var(--font20);}
	a.on{/* background: var(--point); *//* color: #fff; */color: #222;font-weight: bold;border-bottom: 2rem solid #222;}
	
}

/* imgList */
.imgList {display: grid;}
.imgList.flex {display: flex; gap: 20rem;}
.imgList.flex .img {width: 100%; }
.imgList.gr2 {grid-template-columns: repeat(2, 1fr); gap: 30rem;}
.imgList.gr3 {grid-template-columns: repeat(3, 1fr); gap: 20rem;}
.imgList.gr4 {grid-template-columns: repeat(4, 1fr); gap: 20rem;}
.imgList.gr5 {grid-template-columns: repeat(5, 1fr); gap: 15rem;}
.imgList .img {position: relative; width: 100%; border: 1rem solid #888;background: var(--white);  display: flex; align-items: center; justify-content: center; overflow: hidden;}
.imgList .img img {width: 100%; height: 100%; object-fit: cover;}
.imgList .img.size img{width:auto; height:auto;}
.imgList .num {position: absolute; top: 0;left: 0; display: flex; align-items: center; justify-content: center; width: 40rem;height:40rem; background: var(--black); color: var(--white); font-weight: 800; z-index: 5;}
.imgList .name {font-size: var(--font18); font-weight: 500; display: flex; align-items: center; justify-content: center; width: 100%; height: 55rem; font-family: var(--font-combine); text-align: center; background: var(--black);; font-weight: 300; color: var(--white); }
.bg-gray {padding: 100rem 0; background:#f5f6f8; position: relative;}
.bg-gray::before {content: ''; position: absolute; inset: 0 -30vw 0;height:auto; background: #f5f6f8; z-index: -1;}

/* technology */
.area_tech {overflow: hidden;}
.area_tech .tit span {font-size: var(--font18); font-weight: 600; color: #a9a9a9;}
[data-sub="technology1"] .bg-gray {margin-bottom: 100rem;}
[data-sub="technology2"] .bg-gray,
[data-sub="technology3-new"] .bg-gray{margin: 100rem 0;}
[data-sub="technology3"] .imgList .img {flex-direction: column;}
[data-sub="technology4"] .imgList .img {flex-direction: column;}
[data-sub="technology5"] .subTit h2 {font-size: var(--font40);}
[data-sub="technology5"] .imgList li:nth-child(2) .img img {max-height:483rem;}
[data-sub="technology3-new"] .flex-box{gap:30rem;}
[data-sub="technology3-new"] .flex-box .dotList{flex:auto;}
/* product */
.area_product {overflow: hidden;}
.area_product .subTit em[data-subtitle="kor"]{display:block;}
[data-sub="product6"] .flex-box{gap:30rem;}
/* service */
.area_service {overflow: hidden;}
.area_service .graph {width: 100%; height: 100%; background: var(--white); text-align: center; border: 1rem solid #888; padding: 30rem; margin-bottom: 30rem;}
.area_service .graph img { max-width: 100%; object-fit: contain;}
.area_service p {margin-top: 20rem; font-size: var(--font18);}
[data-sub="service1"] .bg-gray {margin: 100rem 0}
[data-sub="service1"] .ss1.bg-gray {margin-top:0}
[data-sub="service1"] .ss4 .imgList .img {flex-direction: column;} 
[data-sub="service2"] .bg-gray {margin: 100rem 0}
[data-sub="service2"] .ss1 .imgList .img {flex-direction: column;} 
[data-sub="service2"] .ss2 .imgList .img {flex-direction: column;} 
[data-sub="service2"] .ss3 .box.b2 {margin-top: 30rem;}
[data-sub="service3"] .subTit h2 {font-size: var(--font40);}
[data-sub="service5"] .bg-gray {margin: 100rem 0}
[data-sub="service5"] .ss1.bg-gray {margin-top: 0;}
[data-sub="service5"] .imgList.flex .img,
[data-sub="service0202"] .imgList.flex .img{height: 400rem; padding: 10rem;}
[data-sub="service0101"] .bg-gray,
[data-sub="service0201"] .bg-gray,
[data-sub="service0202"] .bg-gray,
[data-sub="service0203"] .bg-gray{margin: 100rem 0}  
[data-sub="service0101"] .ss03.bg-gray{margin-bottom:0 !important;}
[data-sub="service0101"] .ss01.bg-gray,
[data-sub="service0201"] .ss01.bg-gray,
[data-sub="service0202"] .ss01.bg-gray,
[data-sub="service0203"] .ss01.bg-gray{margin-top:0}

@media (max-width:1080px){
    .bg-gray {padding: 80rem 0;}
    .imgList.flex {gap: 10rem;}
    .imgList.gr3, .imgList.gr2, .imgList.gr4, .imgList.gr5 {gap: 10rem;}
    [data-sub="technology1"] .bg-gray {margin-bottom: 70rem;}
    [data-sub="technology2"] .bg-gray,
	[data-sub="technology3-new"] .bg-gray{margin: 70rem 0;}
    [data-sub="service1"] .ss2 .imgList {grid-template-columns: repeat(3,1fr);}
    [data-sub="service1"] .bg-gray, [data-sub="service2"] .bg-gray, [data-sub="service5"] .bg-gray {margin: 70rem 0;}
	[data-sub="service0101"] .bg-gray,
	[data-sub="service0202"] .bg-gray,
	[data-sub="service0203"] .bg-gray{margin: 70rem 0}
}
@media (max-width:767px){
    .imgList.gr3 {grid-template-columns: repeat(2,1fr);}
    .imgList.gr4 {grid-template-columns: repeat(2,1fr);}
    .imgList.gr5 {grid-template-columns: repeat(3,1fr);}
    .imgList .name {height: 50rem;}
    .imgList .img  {border-color: #ddd;}
    [data-sub="technology5"] .imgList {flex-direction: column;}
    [data-sub="technology5"] .imgList .img img {object-fit: contain;}
    .area_service .graph {padding: 20rem; }
    [data-sub="service5"] .imgList.flex .img,
	[data-sub="service0202"] .imgList.flex .img{height: 330rem;}
	[data-sub="service0202"] .ss05 .imgList.gr2{grid-template-columns:1fr;}
    [data-sub="service5"] .ss4 .imgList.flex .img {height: 220rem;}
    [data-sub="service5"] .ss5 .imgList.flex .img {height: 240rem;}

	[data-sub="product6"] .flex-box{flex-wrap:wrap;}
	[data-sub="product6"] .flex-box .dotList{flex:0 1 100%;}
}
@media (max-width:480px){
    .area_tech .dotList, .area_product .dotList, .area_service .dotList {margin-top: 20rem;}
    .area_tech .tit, .area_product .tit, .area_service .tit {margin-bottom:20rem;}
    .area_product .imgList {grid-template-columns: repeat(1,1fr);}
    .bg-gray {padding: 60rem 0;}
    .imgList.gr5 {grid-template-columns: repeat(2,1fr); gap: 5rem;}
	.imgList.mob-once{grid-template-columns:1fr !important;}
    .imgList .name {height: 45rem;}
    [data-sub="technology1"] .bg-gray {margin-bottom: 50rem;}
    [data-sub="technology2"] .bg-gray {margin: 50rem 0;}
	[data-sub="technology3-new"] .bg-gray{margin: 50rem 0;}
    [data-sub="technology3"] .imgList, 
	[data-sub="technology4"] .imgList{grid-template-columns: repeat(1,1fr)}
	[data-sub="technology3-new"] .flex-box{flex-wrap:wrap;}
	[data-sub="technology3-new"] .flex-box .dotList{flex:0 1 100%;}
    [data-sub="service1"] .imgList {grid-template-columns: repeat(1,1fr)}
    [data-sub="service1"] .imgList {grid-template-columns: repeat(1,1fr) !important}
    [data-sub="service2"] .imgList {grid-template-columns: repeat(1,1fr);}
    [data-sub="service3"] .imgList {grid-template-columns: repeat(1,1fr);}
    .area_service .graph {padding: 10rem; margin-bottom: 10rem;}
    [data-sub="service1"] .bg-gray, [data-sub="service2"] .bg-gray, [data-sub="service5"] .bg-gray {margin: 50rem 0;}
    [data-sub="service5"] .imgList.flex {flex-direction: column;}
    [data-sub="service5"] .imgList.flex .img,
	[data-sub="service0202"] .imgList.flex .img{height: auto !important;}
    [data-sub="service5"] .imgList {grid-template-columns: repeat(1,1fr);}
	[data-sub="service0101"] .bg-gray,
	[data-sub="service0202"] .bg-gray,
	[data-sub="service0203"] .bg-gray{margin: 50rem 0}
}

/* contact */
[data-sub="contact"] {}
[data-sub="contact"] .mapImg {position: relative; }
[data-sub="contact"] .root_daum_roughmap {width: 100%; border: 1rem solid #ddd;}
[data-sub="contact"] .root_daum_roughmap .wrap_map {height: 600rem;}
[data-sub="contact"] .root_daum_roughmap .cont, .root_daum_roughmap .wrap_controllers, .root_daum_roughmap .map_border  {display: none;}
[data-sub="contact"] .mapBtn {position: absolute; bottom: -44rem; right: 5%; z-index: 10; display: flex; align-items: center; justify-content: center; border:8rem solid var(--white); width: 88rem; height: 88rem; background: linear-gradient(-0deg, #0e5ecb, #007fda); color: var(--white); border-radius: 50%;}
[data-sub="contact"] .mapBtn i {font-size: var(--font25);}
[data-sub="contact"] .mapInfo {margin-top: 50rem;}
[data-sub="contact"] .mapInfo h5 {display: flex; align-items: center; gap: 15rem; font-size: var(--font25); font-weight: 500;}
[data-sub="contact"] .mapInfo h5 i {display: flex; align-items: center; justify-content: center; width: 55rem; height: 55rem; border-radius: 50%; background: #f4f5f8; font-size: var(--font22);}
[data-sub="contact"] .list {font-size: var(--font18); line-height: 1.8; display: flex; align-items: center; gap: 15rem 30rem; margin-top: 30rem;}
[data-sub="contact"] .list li strong {display: inline-block; margin-right: 15rem;} 

@media (max-width:767px){
    [data-sub="contact"] .root_daum_roughmap .wrap_map {height: 500rem;}
}
@media (max-width:480px){
     [data-sub="contact"] .root_daum_roughmap .wrap_map {height: 350rem;}
     [data-sub="contact"] .mapBtn { bottom: -30rem; border:5rem solid var(--white); width: 60rem; height: 60rem;}
     [data-sub="contact"] .mapInfo {margin-top: 20rem;}
    [data-sub="contact"] .mapInfo h5 {flex-direction: column; align-items: flex-start; gap: 10rem;}
    [data-sub="contact"] .mapInfo h5 i {width: 40rem; height: 40rem;}
    [data-sub="contact"] .list {flex-direction: column; align-items: flex-start; gap: 10rem; margin-top: 20rem;}
 }