@charset "utf-8";

/* 회사개요 */
.about-bg { height: 350px; border-radius: 30px; overflow: hidden; background: url(../images/sub/sub1_1.jpg) center no-repeat; background-size: cover;}
.about-box { padding: 40px 60px; background: #fff; border-radius: 30px 0 30px 30px; margin-top: -120px; margin-left: 140px; padding-bottom: 0;} 
.about .titbox { display: flex; align-items: center; gap: 20px;}
.about .titbox .tit { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1em; color: #000; font-family: 'Montserrat', sans-serif;}
.ab-tbl-wrap { margin-top: 25px; width: 100%;}
.ab-tbl { border-collapse: collapse; width: 100%; border-top: 1px solid #1b2088; padding: 0 60px;}
.ab-tbl tr { border-bottom: 1px solid #ddd;}
.ab-tbl tr td { font-size: 16px; padding: 20px 10px; line-height: 1.6em; font-weight: 300; letter-spacing: -.03em; color: #454545; color: #454545;}
.ab-tbl tr td.fw { font-weight: 600; color: #242424;}
.ab-tbl tr td:first-child { padding-left: 60px;}

/* 인사말 */
.greet { position: relative; display: flex; justify-content: flex-end;}
.greet-img { width: 66.666%; border-radius: 30px; overflow: hidden; position: absolute; left: 0; top: 0;}
.greet-img img { width: 100%;}
.greet-box { padding: 60px; position: relative; padding-bottom: 0; border-radius: 30px 0 30px 30px; width: 59%; padding-right: 0; background: #fff; margin-top: 60px;}
.sub_sb { position: absolute; right: 0; top: 30px;}
.greet-box>h3 { font-size: 33px; font-weight: 500; letter-spacing: -.03em; line-height: 1.5em; color: #242424;}
.greet-box>h3 span { font-weight: 700;}
.greet-box>h3 span.clr1 { color: #1b2088;}
.greet-box>b { font-size: 20px; font-weight: 600; line-height: 1.4em; letter-spacing: -.03em; color: #242424; display: block; margin-top: 50px;}
.greet-box>b span { color: #1b2088; }
.greet-box>p { font-size: 16px; letter-spacing: -.03em; font-weight: 300; color: #454545; line-height: 1.666em; margin-top: 25px;}

/* 연혁 */
.hst-bg { padding: 80px 0; text-align: center; border-radius: 30px; background: url(../images/sub/hst_bg.jpg) center no-repeat; background-size: cover; color: #fff; position: relative;}
.hst-bg b { font-size: 23px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2em; font-family: 'Montserrat', sans-serif;}
.hst-bg .titbox { font-size: 40px; font-weight: 600; letter-spacing: -.03em; font-family: 'Montserrat', sans-serif; line-height: 1.2em; display: flex; align-items: center; justify-content: center;}
.hst-bg p { font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1.6em; margin-top: 15px;}
.hst-bg::after { content: ""; left: 0; right: 0; margin: auto; bottom: -17px; position: absolute; width: 34px; height: 34px; border-radius: 100%; background: #1b2088; border: 11px solid #fff; z-index: 1;}
.history { position: relative; padding-top: 75px;}
.history::after { content: ""; position: absolute; left: 0; right: 0; margin: auto; top: 0; background: #ddd; width: 1px; height: 92%; z-index: -1;}
.history .group { position: relative; margin-bottom: 40px;}
.history .group:last-child { margin-bottom: 0;}
.history .group .group-ttl {font-size:30px; line-height:1em; color: #242424; font-weight: 700; position: relative;}
.history .group .group-ttl::before { width: 57px; height: 1px; background: #ddd; content: ""; position: absolute; top: 0; bottom: 0; margin: auto;}
.history .group:nth-child(odd) .group-ttl::before { left: -67px;}
.history .group:nth-child(even) .group-ttl::before { right: -67px;}
.history .group .groupbox::after { content:''; position:absolute; top:5px; width:22px; height:22px; background:#1b2088; border:1px solid #ddd; box-shadow: #f2f2f2 0px 0px 0px 6px inset; border-radius:100%;}
.history .group:nth-of-type(odd) .groupbox::after { left: -12px;}
.history .group:nth-of-type(even) .groupbox::after { right: -10px;}
.history .group:nth-child(odd) .groupbox { width: 50%; position: relative; margin-left: 50%; padding-left: 80px;}
.history .group:nth-child(even) .groupbox { width: 50%; position: relative; margin-left: 0; padding-right: 82px;}
.history .group ul {position: relative; width:100%; margin-top: 25px;}
.history .group:nth-child(even) ul {text-align:right;}
.history .group ul li {position: relative; color:#454545; margin-bottom: 6px; font-size: 16px; font-weight: 300; letter-spacing: -.03em; display: flex; line-height: 1.4em;}
.history .group ul li:last-child {margin-bottom: 0;}
.history .group ul li .month {font-weight: 700; letter-spacing: -.03em; width: 40px; color: #1b2088; line-height: 1.4em; position: absolute; top: 0; left: 0;}
.history .group ul li .txt { padding-left: 40px;}
.history .group:nth-of-type(even) ul li .month { left: auto; right: 0;}
.history .group:nth-of-type(even) ul li .txt  { padding-left: 0; padding-right: 40px;}
.history .group ul li .month::after { content: ""; position: absolute; right: 9px; width: 4px; height: 4px; border-radius: 100%; background: #ababab; top: 8px;}
.history .group:nth-of-type(even) ul li .month::after { right: auto; left: 9px;}
.history .group:nth-child(even) ul li {flex-direction: row-reverse;}
.history .group:nth-child(even) .group-ttl { text-align: right;}

/* 조직도 */
.organ { text-align: center;}

/* 오시는 길 */
.mapbox { border-radius: 30px; overflow: hidden;}
.root_daum_roughmap .border1 { border: none !important; background: none !important;}
.root_daum_roughmap .border2 { border: none !important; background: none !important;}
.root_daum_roughmap .border3 { border: none !important; background: none !important;}
.root_daum_roughmap .border4 { border: none !important; background: none !important;}
.root_daum_roughmap .wrap_controllers { display: none;}
.lct { margin-top: 40px;}
.lct b { font-size: 16px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1em; color: #1b2088; display: block; margin-bottom: 6px;}
.lct .tit { font-size: 23px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.lct-text { margin-top: 10px;}
.lct-text span { display: inline-block; font-size: 16px; font-weight: 300; letter-spacing: -.03em; color: #454545; padding-right: 20px;}
.lct-text span:last-child { padding-right: 0;}
.lct-list { margin-top: 30px; border-top: 1px solid #ddd;}
.lct-list li { padding: 30px; display: flex; border-bottom: 1px solid #ddd; align-items: center; position: relative;}
.lct-title { display: flex; font-size: 18px; font-weight: 500; letter-spacing: -.03em; color: #242424; align-items: center; gap: 20px; position: absolute; left: 30px; top: 25px;}
.lct-txt { font-size: 16px; letter-spacing: -.03em; font-weight: 300; line-height: 1.2em; color: #454545; padding-left: 150px;}

/* 제품소개탭메뉴 */
.pd {  display: flex; align-items: flex-start; position: relative; }
.pd-tab { max-width: 310px; width: 100%; padding: 20px 30px 0; border: 1px solid #ddd; border-radius: 0 0 30px 30px; border-top: 2px solid #1b2088; position: sticky; top: 120px; margin-top: 65px;}
.pd-right { padding-left: 135px; width: calc(100% - 310px);}
.pd-tab>li { border-bottom: 1px solid #ddd; padding: 30px 0; cursor: pointer; position: relative;}
.pd-tab .tit { font-size: 20px; position: relative; font-weight: 600; line-height: 1em; color: #898989;}
.pd-tab>li::after { content:""; position:absolute; right:0; top:30px; display:inline-block; width:10px; height:10px; border-right:3px solid #898989; border-bottom:3px solid #898989; transform:rotate(45deg);}
.pd-tab li.active::after {transform:rotate(-135deg); margin-top:6px; border-color:#1b2088;}
.pd-tab li.active .tit { color: #1b2088;}
.pd-tab li .acd { margin-top: 20px; display: none;}
.pd-tab li .acd li { margin-bottom: 10px;}
.pd-tab li .acd li a{ font-size: 18px; color: #898989; font-weight: 400; line-height: 1.3em; display: flex; gap: 10px; align-items: center;}
.pd-tab li .acd li a:hover { color: #1b2088; text-decoration: underline; text-underline-position: under;}
.pd-tab li .acd li:last-child { margin-bottom: 0;}
.pd-tab>li:last-child { border: none;}
.icon-area { width: 20px; display: none; height: 15px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.pd-tab>li:nth-child(3) .acd li .icon-area{ display: block;}
.pd-tab>li:nth-child(3) .acd li:first-child .icon-area{ background-image: url(../images/sub/pro_ico1.png) ;}
.pd-tab>li:nth-child(3) .acd li:nth-child(2) .icon-area{ background-image: url(../images/sub/pro_ico2.png) ;}
.pd-tab>li:nth-child(3) .acd li:nth-child(3) .icon-area{ background-image: url(../images/sub/pro_ico3.png) ;}
/* .pd-tab>li:nth-child(3) .acd li:nth-child(4) .icon-area{ background-image: url(../images/sub/pro_ico4.png) ;} */

/* csr */
.sub3-list {padding-top: 0;}
.sub3-list ul {display:flex; flex-wrap:wrap; margin:0 -16px;}
.sub3-list ul li {width:25%; padding:0 16px; margin-bottom:35px; text-align:center; border-radius: 20px; overflow: hidden;}
.sub3-list ul li .thumb {position:relative; padding-bottom:140%; margin-bottom:18px; border-radius: 20px; overflow: hidden;}
.sub3-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; }
.sub3-list ul li .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; border-radius: 20px;}
.sub3-list ul li .tit {color:#686868; font-size:16px; line-height:1.2em; font-weight: 300; letter-spacing: -.03em;}

/* 갤러리 tab */
.dg-tab { display: flex; width: 100%; background: #f8f9f9; border-bottom: none; position: relative; border-radius: 15px 15px 0 0; margin-bottom: 60px;}
.dg-tab::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; z-index: 0; border-radius: 15px 15px 0 0;}
.dg-tab>li { border-bottom: 1px solid #1b2088; text-align: center; width: calc(100%/2);position: relative; word-break: break-all; font-weight: 600; display: block; font-size: 18px; color: #898989; letter-spacing: -.03em; padding: 0 10px; cursor: pointer; z-index: 1;}
.dg-tab>li a { height: 50px; line-height: 50px; display: block; width: 100%;}
.dg-tab>li.active { border-left: 1px solid #1b2088; border-right: 1px solid #1b2088; border-top: 1px solid #1b2088; background: #fff; border-bottom: none; overflow: hidden; z-index: 1; color: #1b2088; border-radius: 15px 15px 0 0;}
.dg-tab>li.active::after { display: none;}
.dg-tab>li:last-child::after { display: none;}