@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(300px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(300px, calc( 500 / var(--inner) * 100vw ), 500px) !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:9px; 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:9px; width:5px; height:1px; background:#242424;}

.bg-gray {background:#fafafa;}

.bordertextbx {text-align: center;}
.bordertextbx .bdtitle { font-size:  clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; color:var(--color-1);}
.bordertextbx .line {margin:  clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px) 0; position: relative; height:  clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); }
.bordertextbx .line:after {position: absolute; content: ''; left: 50%; bottom: 0; transform: translateX(-50%); width: 1px; height:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); background: var(--color-1);}
.bordertextbx .desc {line-height: 1.6;}

.titlebg {margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); padding-left:  clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); position: relative; font-size:  clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold;}
.titlebg:after {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: 4px ; height:  clamp(22px, calc( 28 / var(--inner) * 100vw ), 28px); background:var(--color-1);}

/* 소개 */
.aboutwrap .bordertextbx {padding-bottom: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.historybox + .historybox {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.hisbg {margin-bottom: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(160px, calc( 300 / var(--inner) * 100vw ), 300px);}
.hisbg.bg1 {background: url(../images/sub/his-1.jpg) no-repeat 50% 50%; background-size: cover;}
.hisbg.bg2 {background: url(../images/sub/his-2.jpg) no-repeat 50% 50%; background-size: cover;}
.hisbg.bg3 {background: url(../images/sub/his-3.jpg) no-repeat 50% 50%; background-size: cover;}
.historyitems {display: flex; flex-wrap: wrap;}
.yearsbx {flex: 1 0  clamp(140px, calc( 290 / var(--inner) * 100vw ), 290px); max-width:  clamp(140px, calc( 290 / var(--inner) * 100vw ), 290px); padding-right: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.yearsbx .years {font-size:clamp(24px, calc( 60 / var(--inner) * 100vw ), 60px); font-weight:bold; color: #2c2c2c;}
.histextbx {flex: 1 0 auto; width: 1%; border-top: 1px solid #2c2c2c; border-bottom: 1px dashed #ddd;}
.histextbx .hinner {padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0;}
.histextbx .contlist {display: flex; flex-wrap: wrap; line-height: 1.4;}
.histextbx .contlist + .contlist {margin-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px);}
.histextbx .month {flex: 1 0 clamp(150px, calc( 190 / var(--inner) * 100vw ), 190px); max-width: clamp(150px, calc( 190 / var(--inner) * 100vw ), 190px); padding-right:10px; color:var(--color-1); font-weight: bold; letter-spacing: -0.5px;}
.histextbx .descbx {flex: 1 0 auto; width: 1%; color: #505050; }

.histextbx .desc + .desc {margin-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.certificatebx {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.certitem {display: flex; flex-wrap: wrap; margin-left: -20px;}
.certlist {padding: 0 20px;}
.certlist .name {display: block; padding-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); text-align: center; font-weight: 500;}

.direction {padding-top: 20px;}
.direction .flxWrap {justify-content: space-between; align-items: center;}
.direction .titlebx {flex: 1 0 180px; max-width: 180px; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: #454545;}
.direction .addrbx {flex: 1 0 auto; width: 1%;}
.direction .addritem {display: flex; flex-wrap: wrap; justify-content: flex-end;}
.direction .addrlist {padding-left: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); margin-left: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative;}
.direction .addrlist:first-child {padding-left: 0;margin-left: 0;}
.direction .addrlist:after {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: #ddd;}
.direction .addrlist:first-child:after {display: none;}
.direction .inner {display: flex; align-items: center;}
.direction .icn {margin-right: 12px;}
.direction .icn img {vertical-align: middle;}
.direction .desc {display: inline-block; color: #454545;}

/* 사업소개 */
.busibg {padding: clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px) 0; } 
.busibg.bg1 .bordertextbx .desc  {color: #fff;}
.busibg.bg1 {background: url(../images/sub/busi-bg.jpg) no-repeat; background-size: cover; }
.busibg.bg2 {background: #eefdff;}

.containbx {padding: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px) 0;}
.circlelist {padding: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom: 1px solid #ddd;}
.circlelist:first-child {border-top: 1px solid #ddd;}
.circlelist .inner {display: flex; flex-wrap: wrap;}
.circlelist .image {flex: 1 0 clamp(140px, calc( 200 / var(--inner) * 100vw ), 200px); max-width: clamp(140px, calc( 200 / var(--inner) * 100vw ), 200px);}
.circlelist .image img {width: clamp(100px, calc( 160 / var(--inner) * 100vw ), 160px);}
.circlelist .textbx {flex: 1 0 auto; width: 1%;}
.circlelist .tit {margin-bottom: 12px; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.circlelist .dec {color: #454545; line-height: 1.6;}

.serviceitem {display: flex; flex-wrap: wrap; margin: -20px;}
.servicelist {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.servicelist .sinner {padding:clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) 15px; border: 1px solid #ddd; border-radius: 24px; height: 100%; text-align: center;}
.servicelist .icn img {height: clamp(50px, calc( 118 / var(--inner) * 100vw ), 118px);}
.servicelist .tt {margin-top:clamp(15px, calc( 36 / var(--inner) * 100vw ), 36px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.servicelist .text {padding-top:12px; color: #454545; line-height: 1.6;}

/* 문의폼 */
.radioitem {display: flex; align-items: center; flex-wrap: wrap; }
.radioitem .item {margin-top: 2px; margin-bottom: 2px; margin-right: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.radioitem .item:last-child {margin-right: 0;}
.board-form + .board-form {margin-top:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.formtit {margin-bottom:clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(16px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}