@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 430 / var(--inner) * 100vw ), 430px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 430 / var(--inner) * 100vw ), 430px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"대호에스텍(주)"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:10px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:8px; width:2px; height: 2px; background:#454545; border-radius: 50%;}

.bg-gray {background:#f9f9f9;}
.bgtext {margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); padding-left: clamp(26px, calc( 35 / var(--inner) * 100vw ), 35px); position: relative; font-size:clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.bgtext:after {position: absolute; content: ''; left: 0; top: clamp(8px, calc( 10 / var(--inner) * 100vw ), 10px); width:clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); height: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); background:url(../images/sub/bgtext.png) no-repeat; background-size: contain;}
.bgtext .subtext {display: inline-block; padding-left:10px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 400; color: #454545;}
.bgtext2 {margin-bottom: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); padding-left:clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px); position: relative; font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: #454545;}
.bgtext2:after {position: absolute; content: ''; left: 0; top: clamp(4px, calc( 5 / var(--inner) * 100vw ), 5px); width: clamp(3px, calc( 4 / var(--inner) * 100vw ), 4px); height:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); background:var(--color-primary);} 

.headimg {position: relative; padding-bottom: clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px);}
.headimg .headtit {padding-left: clamp(10px, calc( 35 / var(--inner) * 100vw ), 35px); position: absolute; bottom: 0; font-size: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); color: #ddd; line-height: 1.1;}
.headtext {padding-left: clamp(10px, calc( 35 / var(--inner) * 100vw ), 35px); margin-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.headtext .txt1 {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.headtext .txt2 {padding-top:clamp(15px, calc( 32 / var(--inner) * 100vw ), 32px);  line-height:1.66;}
.headtext .txt3 {padding-top:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); font-weight: bold;}
.sub01_sec1 {margin-top:clamp(35px, calc( 70 / var(--inner) * 100vw ), 70px); padding-top: clamp(35px, calc( 70 / var(--inner) * 100vw ), 70px); border-top: 1px solid #ddd;}

.goalitem {display: flex; flex-wrap: wrap; margin:-20px;}
.goallist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.goallist .inner {padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border: 1px solid #ddd; border-radius:16px; height: 100%;}
.goallist .icn img {height: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px);}
.goallist .textbx {padding-top: clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px);}
.goallist .tit {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.goallist .partitem {margin-top: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.goallist .partlist {display: flex; color: #454545; letter-spacing: -0.5px;}
.goallist .partlist + .partlist {margin-top: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.goallist .name {flex: 1 0 clamp(42px, calc( 50 / var(--inner) * 100vw ), 50px); max-width: clamp(42px, calc( 50 / var(--inner) * 100vw ), 50px); font-weight: bold;}
.goallist .bullet-item {flex:1 0 auto; width:1%;}

.sub01_sec3item {display: flex; flex-wrap: wrap; margin: -20px;}
.sub01_sec3list {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.sub01_sec3list .inner {display: flex; align-items: center;justify-content: center; position: relative; height:clamp(180px, calc( 373 / var(--inner) * 100vw ), 373px); border-radius: 16px; transition: 0.3s; overflow: hidden;}
.sub01_sec3list .inner.bg1 {background: url(../images/sub/sub01_01-img3.png) no-repeat; background-size: cover; }
.sub01_sec3list .inner.bg2 {background: url(../images/sub/sub01_01-img4.png) no-repeat; background-size: cover;}
.sub01_sec3list .inner.bg3 {background: url(../images/sub/sub01_01-img5.png) no-repeat; background-size: cover;}
.sub01_sec3list .textbx {color: #fff; text-align: center;}
.sub01_sec3list .kor {font-size: clamp(19px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold;}
.sub01_sec3list .eng {padding-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 400;}
.sub01_sec3list .hoverbx {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,108,0,1) 0%, rgba(227,27,35,1) 100%); opacity: 0; transition: 0.3s;}
.sub01_sec3list .hoverbx img {width: clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px);}
.sub01_sec3list .inner:hover .hoverbx {opacity: 1;}

.companybg {max-width:1920px;width:100%;margin:0 auto;}
.companybg .flxWrap {background:#111111;}
.companybg .imgbx {flex:1 0 969px;max-width:969px;text-align:center;}
.companybg .textbx {flex:1 0 auto;width:1%; background:#111111;}
.companybg .inner {display:flex;justify-content:space-between;flex-direction: column;padding:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); color:#fff; height: 100%;}
.companybg .logo img {width:clamp(200px, calc( 334 / var(--inner) * 100vw ), 334px);}
.companybg .innerinfo {margin-top:20px;}
.companybg .innerinfo .list {margin-top:10px;font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}

.history-bnr { border-radius: 24px; height: clamp(180px, calc( 300 / var(--inner) * 100vw ), 300px); padding: 0 clamp(16px, calc( 50 / var(--inner) * 100vw ), 50px); display: flex; align-items: center; justify-content: center; background:url('../images/sub/history-bnr.jpg') no-repeat 50% 50% / cover;}
.history-bnr h2 {font-size:  clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; letter-spacing: 1em; line-height: 1em; color: rgba(255, 255, 255, .3); text-transform: uppercase;}

.history-wrap {padding-top:80px; position:relative; color: #454545;}
.history-wrap:before {top:100px; bottom:0; position:absolute; left:300px; width:1px; background-color:#ddd; content:"";}
.history-item {padding-bottom:130px; display:flex; align-items:initial;}
.history-item:last-child {padding-bottom:0;}
.history-item .history-year {position:relative; top:0; left:0; width:300px; color:#242424; font-size: clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); line-height:1.4em; letter-spacing:-.03em; text-align:right; padding-right:0; display:flex; justify-content:space-between;}
.history-item .history-year strong {line-height:1em; display:inline-block; text-align:center; transition:all 0.5s ease; font-weight:500; flex:1;}
.history-month-box {padding-left:105px; flex:1;}
.history-detail {margin-bottom:15px; display:flex; font-size:18px; letter-spacing:-.03em; font-weight:500; transition:all 0.5s ease;}
.history-detail:last-child {margin-bottom:0;}
.history-detail p {flex:1;}
.history-item .dots {width:10px; height:10px; top:9px; right:-5px; margin:0; position:relative; border:2px solid #000; background:#fff; border-radius:50%; transition:all 0.3s; z-index:0;}
.history-item .dots .inner-dots {width:100px; height:100px; position:absolute; background:rgba(228, 27, 35, .1); border-radius:100%; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; transition:all 0.3s;}
.history-item .dots .inner-dots:after {width:60px; height:60px; display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; background:rgba(228, 27, 35, .3); border-radius:100%; transition:all 0.5s;}
.history-item .history-detail .subcolor {color: #aaaaaa;}
.history-item.active .history-year {font-size:60px;}
.history-item.active .history-year strong {font-weight:700;}
.history-item.active .history-detail {font-weight:700;}
.history-item.active .history-month-item {color:#242424;}
.history-item.active .dots .inner-dots {transform:translate(-50%,-50%) scale(1); animation:ani .5s forwards ease; animation-delay:.05s;}
.history-item.active .dots .inner-dots:before {width:40px; height:40px; display:block; content:""; background:#fff; position:absolute; left:50%; top:50%; border-radius:100%; border:10px solid var(--color-primary); animation:ani .5s forwards ease; animation-delay:.02s;}
.history-item.active .dots .inner-dots:after {animation:ani .5s forwards ease; animation-delay:.08s;}
.history-item.active .history-year strong {line-height:.6em;}
.history-item.active .fr-view p,
.history-item.active .fr-view span {font-weight:bold !important;}

@keyframes ani {
	0% {transform:translate(-50%,-50%) scale(0);}
	100% {transform:translate(-50%,-50%) scale(1);}
}

@media (max-width: 1024px) {
	.history-item {padding-bottom: 80px;}
	.history-item .history-year {width: 250px;}
	.history-month-box {padding-left:100px;}
	.history-detail {font-size: 16px;}
	.history-wrap:before {top:80px; left: 250px;}
	.history-item .dots .inner-dots {width:80px; height:80px;}
	.history-item .dots .inner-dots:after {width:50px; height:50px;}
	.history-item.active .dots .inner-dots:before {width:30px; height:30px;}
	.history-item.active .history-year {font-size: 36px;}
}

@media (max-width: 640px) {
	.history-wrap {padding-top:50px;}
	.history-month-box {padding-left:0;}
	.history-item {padding-bottom: 40px; display:block;}
	.history-item .history-year {width:100%; text-align:left;}
	.history-item .history-year strong {text-align:left; line-height:1.5em; margin-bottom:15px; display:block;}
	.history-item .dots {display:none;}
	.history-wrap:before {display:none;}
	.history-detail {margin-bottom:10px;}
    .history-item.active .history-year {font-size: 28px;}
	.history-item.active .history-year strong {line-height:1em;}
}

.ceritem {display: flex; flex-wrap: wrap; margin: -15px;}
.cerlist {flex: 1 0 25%; max-width: 25%; padding: 15px;}
.cerlist .images {position:relative; padding-bottom:137.58%; overflow:hidden;}
.cerlist .images:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.cerlist .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : initial;}

.location .map {width:100% !important; height:clamp(250px, calc( 430 / var(--inner) * 100vw ), 430px) !important;}
.location .map iframe {width:100%;height:100%;}
.location .adr-wrap {margin:clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px) 0 35px;}
.location .adr-wrap .comp {margin-bottom:10px; color:var(--color-primary); font-weight:600; font-size: clamp(15px, calc( 17 / var(--inner) * 100vw ), 17px); line-height:1.4em;}
.location .adr-wrap .adr {margin-bottom:10px; font-size: clamp(1rem, 0.8849rem + 0.4605vw, 1.4375rem); color:#000; font-weight:600; line-height:1.4em;}
.location .adr-wrap .wrap span {margin-right:20px; font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}
.location .adr-wrap .wrap span:last-child {margin-bottom:0;}
.location .info {display:flex;  border:1px solid #ddd;}
.location .info .col {display:flex; align-items:center; padding:40px; width:33.3333%; border-right:1px solid #ddd;}
.location .info .col:last-child {border-right:none;}
.location .info .col .ic {display:flex; justify-content:center; align-items:center; width:80px; height:80px; margin-right:25px; border-radius:50%; background-color:var(--color-primary); }
.location .info .col dl {min-width:0; width:1%; flex:1 1 auto; font-size:18px; line-height:1.4em;}
.location .info .col dl dt {margin-bottom:10px; color:#000; font-weight:600;}
.location .info .col dl dd {color: #242424; font-weight:500;word-break: break-all;}

@media (max-width: 1024px) {
	.location .adr-wrap {margin-bottom:20px;}
	.location .adr-wrap .comp {margin-bottom:5px;}
	.location .adr-wrap .wrap span {margin-right:15px;}
	.location .info .col {padding:20px 10px;}
	.location .info .col .ic {width:45px;height:45px;margin-right:15px;}
	.location .info .col .ic svg {height:25px;}
	.location .info .col dl dt {margin-bottom:5px;}
}

@media (max-width: 640px) {
	.location .info {display:block;}
	.location .info .col {border-right:none; border-bottom:1px solid #ddd; width:100%;}
	.location .info .col:last-child {border-bottom:none;}
	.location .info .col dl {font-size: 15px;}
	.location .info .col dl dt {margin-bottom:0;}
	.location .info .col .ic {margin-right:10px;}
}

.sub02_s1item {display: flex; flex-wrap: wrap;}
.sub02_s1list {flex: 1 0 16.66%; max-width: 16.66%; margin-left: -1px; border: 1px solid #ddd;}
.sub02_s1list .inner {padding:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); text-align: center;}
.sub02_s1list span {display: block; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.sub02_s1list .num {margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);  color: var(--color-primary);}
.sub02_s1list img {height: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.sub02_s1list .txt {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); }

.sub02_s2item {display: flex; flex-wrap: wrap; margin:-20px;}
.sub02_s2list {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.sub02_s2list .inner {padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); background: #fff; border-radius: 24px; text-align: center; height: 100%;}
.sub02_s2list .title {margin-bottom: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.sub02_s2list .insitem {display: flex; flex-wrap: wrap; margin: -20px -10px;}
.sub02_s2list .inslist {flex: 1  0 50%; max-width: 50%; padding: 20px 10px;}
.sub02_s2list .inslist img {height: clamp(90px, calc( 160 / var(--inner) * 100vw ), 160px);}
.inslist .textbx {padding-top: 10px; }
.inslist .txt {line-height: 1.45; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.sub02_s2list .colwid {display: flex; flex-wrap: wrap; margin: -20px;}
.sub02_s2list .col {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.sub02_s2list .col .inslist {flex: 1 0 100%; max-width: 100%;}

.sub02_s2list .insitem.type2 .inslist {flex: 1  0 33.33%; max-width: 33.33%; }

.sub02_s3item {display: flex; flex-wrap: wrap; margin:-20px;}
.sub02_s3list { flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.sub02_s3list .inner {padding:20px 10px; text-align: center; height: 100%; border: 1px solid #ddd; border-radius: 24px;}
.sub02_s3list .title {margin-bottom: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}

.sub02_sborder {padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); border: 1px solid #ddd;}
.sub02_sborder.bg {background: #fff;}

.sub02_02s1top {margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); padding:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); background: #f6f6f6; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; line-height: 1.6;}
.sub02_02s1top .txt2 {color: #aaa;}

.icntxtitem {display: flex; flex-wrap: wrap;}
.icntxtlist {flex: 1 0 clamp(220px, calc( 280 / var(--inner) * 100vw ), 280px); max-width: clamp(220px, calc( 280 / var(--inner) * 100vw ), 280px); display: flex; align-items: center;}
.icntxtlist .icn img {margin-right: 10px; height: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px)}
.icntxtlist .textbx {flex: 1 0 auto; width: 1%; color: #454545; line-height: 1.4;}
.icntxtlist .dec {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}
.icntxtlist .num {font-weight: 600; color:var(--color-primary);}

.scopewrap {margin-top: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.scopewrap .bullet-list {color: #454545; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.scopewrap .bullet-item .bullet-list::before {top: clamp(8px, calc( 11 / var(--inner) * 100vw ), 11px);}

.sub02_sborder .imgflx {display: flex; flex-wrap: wrap; margin: -10px; padding-top: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);}
.sub02_sborder .img {padding: 10px; flex: 1 0 auto; width: 1%; text-align: center;}
.sub02_sborder .img:first-child {flex: 1 0 675px; max-width: 675px;}

.sub02_sborder .imgbx {flex:1 0 580px; max-width: 580px; margin-right: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.sub02_sborder .textbx {flex: 1 0 auto; width: 1%;}
.sub02_sborder .badgeitem {display: flex; flex-wrap: wrap; margin: -10px;}
.sub02_sborder .badgelist {padding: 10px;}
.sub02_sborder .badgelist .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; width: clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px); height: clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 8px;}
.sub02_sborder .badgelist .inner.bg1 {background:var(--color-primary);}
.sub02_sborder .badgelist .inner.bg2 {background: #000;}
.sub02_sborder .badgelist .inner.bg3 {background: #555;}
.sub02_sborder .badgelist span {display: block; color: #fff; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight: 600; line-height: 1.57;}
.sub02_sborder .badgelist .font2 {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 1.3;}
.sub02_sborder .imgbx.wid2 {flex:1 0 400px; max-width: 400px;}

.inbdwrap + .inbdwrap {margin-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); border-top: 1px solid #ddd;}
.tblbx table th,
.tblbx table td {padding: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px) clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); text-align: center; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.tblbx table th:first-child,
.tblbx table td:first-child {border-left: 1px solid #ddd;}
.tblbx table th {font-weight: 500; background: #f9f9f9; border-top: 1px solid #ddd;}
.tblbx table td {color: #454545;background: #fff;}
.tblbx table .bg-gray {background: #555555; color: #fff; border-color:#555; line-height: 1.6;}
.tblbx.type2 th {background:var(--color-primary); color: #fff;}

.inicnitem {display: flex; flex-wrap: wrap; margin:-10px; padding-top: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.inicnlist {flex: 1 0 20%; max-width: 20%; padding: 10px;}
.inicnlist .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px) 5px; background:var(--color-primary); border-radius: 16px;}
.inicnlist .inner img {width: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px);}
.inicnlist .inner .name {display: block; padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;color: #fff; }

.specsec + .specsec {margin-top: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.specsec .dec {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500;}
.specsec .specitem {display: flex; flex-wrap: wrap; margin:-20px; padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) 0;}
.specsec .speclist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.specsec .speclist .txt {padding: 8px; text-align: center; color: #fff; background: #000; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}
.specsec .boxtit {margin-bottom: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500;}

#kakao-talk-channel-chat-button {position: fixed; bottom: var(--padding-20); right: var(--padding-20); z-index: 9999;}