@charset "utf-8";
/* 인사말 */
.gt { display: flex; align-items: flex-start;}
.gt-left { width: 50%; }
.gt-left h4 { font-size: 16px; font-weight: 700; line-height: 1em; letter-spacing: 0.2em; color: #02b4ec; font-family: "Play", sans-serif; margin-bottom: 30px; }
.gt-left h2 { line-height: 1.3em; letter-spacing: -.03em; font-weight: 500; font-size: 44px; color: #242424; margin-bottom: 50px; }
.gt-left h2 span { font-weight: 700; }
.gt-left h3 { font-size: 20px; font-weight: 600; line-height: 1.7em; letter-spacing: -.03em; color: #242424; margin-bottom: 25px;}
.gt-left p { font-size: 16px; font-weight: 300; line-height: 1.666em; letter-spacing: -.03em; color: #454545; margin-top: 15px;}
.gt-right { width: 50%; text-align: right; }

/* 경영이념 */
.mn-img { border-radius: 30px; height: 310px; padding: 90px 0; color: #fff; background: url(../images/sub/sub1-2-bg.jpg) center no-repeat; background-size: cover; text-align: center; margin-bottom: 60px; }
.mn-img h2 { line-height: 1em; font-size: 40px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 30px; }
.mn-img h3 { font-size: 20px; font-weight: 500; line-height: 2em; letter-spacing: -.03em; }
.mn-img h3 span { font-size: 28px; font-weight: 600; }
.mn-bg { text-align: center; position: relative; }
.mn-bg>img { position: absolute; left: 0; top: 0; right: 0; margin: auto;}
.mn-list { display: flex; flex-wrap: wrap; position: relative; z-index: 1; gap: 36px;}
.mn-list li { width: calc(100%/3 - 24px); text-align: center;}
.mn-list li .iconbox { display: flex; align-items: center; justify-content: center; width: 170px; height: 170px; border-radius: 100%; background: #fff; margin: 130px auto 120px;}  
.mn-list li.mg .tit { margin-top: 180px;}
.mn-list li .tit { font-size: 24px; line-height: 1.3em; letter-spacing: -.03em; margin-bottom: 10px; color: #242424; font-weight: 700; }
.mn-list li .tit-en { font-family: "Play", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.2em; line-height: 1em; margin-bottom: 20px; color: #aee23a;}
.mn-list li .tit-en.clr1 { color: #58d59b;}
.mn-list li .tit-en.clr2 { color: #06c9f8;}
.mn-list li .txt { line-height: 1.556em; letter-spacing: -.03em; color: #454545; font-weight: 300; font-size: 15px; }

/* 회사개요 */
.ot-logo { height: 200px; display: flex; align-items: center; border-radius: 30px; justify-content: center; border: 1px solid #ddd;}
.ot-txtbox { padding: 30px 0 50px; text-align: center; }
.ot-txtbox h3 { font-size: 24px; letter-spacing: -.03em; line-height: 1.3em; color: #242424; margin-bottom: 30px; margin-top: 30px;}
.ot-txtbox h3 span { font-weight: 700;}
.ot-txtbox p { font-size: 16px; font-weight: 300; letter-spacing: -.03em; line-height: 1.666em; color: #454545;}
.ot-list { border-radius: 30px; border: 1px solid #ddd; display: flex; overflow: hidden;}
.ot-list li { width: calc(100%/4); border-right: 1px solid #ddd; text-align: center; padding: 50px 5px 25px;}
.ot-list li:last-child { border: none; }
.ot-list li .tit { line-height: 1em; font-size: 22px; font-weight: 600; color: #242424; margin-bottom: 15px; margin-top: 25px;}
.ot-list li .txt { line-height: 1.5em; letter-spacing: -.03em; font-size: 16px; font-weight: 300; color: #454545; }
.ot-list li:hover { background: #fcfcfc;}

/* 회사연혁 */
.hst { padding-top: 90px; border-top: 2px solid #000;}
.history { position: relative; }
.history::after { content: ""; position: absolute; left: 25%; top: 10px; width: 1px; height: 92%; background: #ddd; z-index: -1;}
.history .group { display: flex; margin-bottom: 120px; align-items: flex-start;}
.history .group:last-child { margin-bottom: 0;}
.history .group .year { width: 25%; text-align: center; position: relative; font-size: 28px; font-weight: 500; letter-spacing: -.03em; color: #242424; line-height: 1em; }
.history .group .year::after { content: ""; width: 10px; height: 10px; border: 2px solid #000; border-radius: 10px; top: 8px; right: -6px; position: absolute; background: #fff; }
.history .group .info { width: 75%; padding-left: 100px; transition: .2s;}
.history .group .info ul li { display: flex; margin-bottom: 15px;}
.history .group .info ul li:last-child { margin-bottom: 0; }
.history .group .info ul li .month { font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1.5em; color: #898989; width: 55px;}
.history .group .info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; font-size: 18px; font-weight: 300; letter-spacing: -.03em; color: #454545; line-height: 1.5em; }
.history .group.active .year { font-size: 60px; }
.history .group.active .year::after { width: 100px; height: 100px; right: -50px; border-radius: 0; background: url(../images/sub/hst-af.png) center no-repeat; background-size: contain; border: none; top: -20px;}
.history .group.active .info ul li .month { color: #02b4ec; font-weight: 700; }
.history .group.active .info ul li .txt { color: #242424; font-weight: 700; }

/* 찾아오시는 길 */
.root_daum_roughmap {width:100% !important;}
.mapbox { border-radius: 20px; overflow: hidden; }
.directions {margin-top:50px; display: flex; align-items: flex-start;}
.directions .address-info {margin-bottom:30px; width: 50%; }
.directions .address-info .comp {color:#02b4ec; font-weight:500; margin-bottom:2px;}
.directions .address-info .addr {color:#242424; font-size:20px; font-weight:500; line-height:1.33em; letter-spacing:-.03em; margin-bottom:10px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info { line-height:1.5em; width: 50%; }
.directions .contact-info dl {display:flex; padding:15px 0;}
.directions .contact-info dt {width:160px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#ababab;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

/* sub2 공통 */
.sub2-txt { text-align: center; }
.sub2-txt h4 {  font-family: "Play", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.2em; line-height: 1em; margin-bottom: 30px; color: #02ade3;}
.sub2-af { text-align: center; margin: 55px 0 35px;}
.sub2-txt h2 { line-height: 1.5em; letter-spacing: -.03em; font-size: 32px; font-weight: 700; color: #242424; padding-bottom: 45px; border-bottom: 1px solid #242424;}
.sub2-fx { border-bottom: 1px dashed #ddd; padding: 60px; display: flex; align-items: center; position: relative;}
.sub2-fx.rv { flex-direction: row-reverse;}
.sub2-fx.bd { border: none; padding-bottom: 0;}
.sub2-left { width: 57%; padding-right: 55px;}
.sub2-left h3 { line-height: 1.4em; letter-spacing: -.03em; color: #242424; font-size: 28px; font-weight: 700; margin-bottom: 25px; }
.sub2-left p { margin-bottom: 15px; }
.sub2-left p:last-child { margin-bottom: 0; }
.sub2-left .num { font-size: 130px; font-weight: 900; line-height: 1em; letter-spacing: .05em; position: absolute; left: 21%; top: 40px; text-align: center; z-index: -1; -webkit-text-stroke: 4px transparent; color: #fff; background: -webkit-linear-gradient(-0deg, #9dc33c, #02b0ed ); -webkit-background-clip: text; opacity: 0.25;}
.sub2-right { width: 43%; border-radius: 20px; overflow: hidden; text-align: right; }
.sub2-fx.rv .sub2-left { padding-right: 0; padding-left: 55px;}
.sub2-fx.rv .sub2-left .num { left: auto; right: 21%; }

/* 사업실적 */
.pd-tab { display: flex; width: 100%; background: #fafafa; border: 1px solid #ddd; border-radius: 10px 10px 0 0; border-bottom: none; margin-bottom: 55px;}
.pd-tab>li { border-bottom: 1px solid #02b0ed; height: 60px; line-height: 60px; text-align: center;width: calc(100%/4); position: relative; word-break: break-all; line-height: 1.2em; }
.pd-tab>li::after { border-right: 1px solid #ddd; content: ""; position: absolute; width: 1px; height: 30px; background: #ddd; right: 0; top: 0; bottom: 0; margin: auto;}
.pd-tab>li.active { border-radius: 10px 10px 0 0; border-left: 1px solid #02b0ed; border-right: 1px solid #02b0ed; border-top: 1px solid #02b0ed; background: #fff; border-bottom: none; overflow: hidden; z-index: 1;}
.pd-tab>li.active::after { display: none;}
.pd-tab>li.active a { color: #02b0ed;}
.pd-tab>li:last-child::after { display: none;}
.pd-tab>li a { font-weight: 600; display: flex; font-size: 18px; color: #898989; letter-spacing: -.03em; padding: 5px 10px; width: 100%; height: 100%; align-items: center; justify-content: center;}