@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 420 / var(--inner) * 100vw ), 420px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 420 / var(--inner) * 100vw ), 420px) !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:15px; 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:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}

.bg-gray {background:#fafafa;}
.conwrap + .conwrap {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}

.visionarea .flxWrap {align-items: center;}
.visionarea .imgbx {flex: 1 0 500px; max-width: 500px; margin-right:clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px);}
.visionarea .textbx {flex: 1 0 auto; width: 1%;}
.visionarea .textbx .icn img {width:clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px);}
.visionarea .textbx .tit {margin-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color: #222;}
.visionarea .textbx .desc {padding-top:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); line-height: 1.8;}

.location-area .flxWrap {flex-direction: row-reverse;}
.location-area .mapbx {flex: 1 0 750px; max-width: 750px; margin-left: 20px;}
.location-area .directions {flex: 1 0 auto; width: 1%; padding-top: 20px;}
.directions .address-info .comp {color:var(--color-primary); font-weight:700; margin-bottom:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.directions .address-info .addr {color:#222; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.directions .address-info .etc span {display:inline-block; margin-right:clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px);}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .infolist {display: flex; padding-top:clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.directions .infolist .icn {margin-right: 10px;}
.directions .infolist .icn img {width: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px);}
.directions .infolist .name {font-weight: bold; color:var(--color-primary);}
.directions .infolist .info {margin-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-weight: 500; color: #222;}

.businessarea {letter-spacing: -0.5px;}
.businessarea .toptit {display: flex; align-items: center; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color: #222;} 
.businessarea .toptit img {width: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); margin-right: 10px;}
.businessarea .topdec {padding-top:clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); line-height: 1.85;}
.businessarea .bottomimg {display: flex; flex-wrap: wrap; margin:-20px; padding-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.businessarea .images {flex: 1 0 50%; max-width: 50%; padding: 20px;}

.viewtop {display: flex; align-items: center; flex-wrap: wrap;}
.viewtop .imgbx {flex:1 0 400px; max-width: 400px; margin-right:clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px);}
.viewtop .images {position:relative; padding-bottom:100%; overflow:hidden;}
.viewtop .images 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;}
.viewtop .images:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.viewtop .textbx {flex: 1 0 auto; width: 1%;}
.viewtop .ptitle {margin-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); margin-bottom: clamp(17px, calc( 35 / var(--inner) * 100vw ), 35px); padding-bottom: clamp(17px, calc( 35 / var(--inner) * 100vw ), 35px); position: relative; font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold; color: #222;}
.viewtop .ptitle:after {position: absolute; content: ''; left: 0; bottom: 0; width:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); height: 2px; background: var(--color-primary);}
.detaillist+ .detaillist {margin-top:clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px);}
.detaillist {display: flex; flex-wrap: wrap; line-height: 1.5;}
.detaillist .name {flex: 1 0 clamp(70px, calc( 105 / var(--inner) * 100vw ), 105px); max-width: clamp(70px, calc( 105 / var(--inner) * 100vw ), 105px);font-weight: 600; color: #222;}
.detaillist .detail {flex: 1 0 auto; width: 1%;}
.viewtop .buttonbx {margin-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.buttonbx {display: flex; margin: -5px;}
.buttonbx .btninner {padding: 5px;}
.buttonbx .btn-type {display: inline-flex; align-items: center; justify-content: center; padding:0 10px; width: clamp(110px, calc( 160 / var(--inner) * 100vw ), 160px); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; font-weight: 600; line-height: 1;border-radius: 6px;} 
.buttonbx .btn-type.gray {border-color: #ddd; background: #f5f5f5; color: #222;}
.viewdetail {margin-top: clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px);}
.viewdetail + .buttonbx {margin-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); justify-content: center;}

.inquiry .btn-pack.large {border-radius:8px;}

.formradio {display: flex; }
.formradio .item {margin-right:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); height:clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); line-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.formradio .item:last-child {margin-right: 0;}