@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, 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:10px; margin-top:10px; line-height:1.87;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:clamp(11px, calc( 13 / var(--inner) * 100vw ), 13px); width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left:0;}
.bullet-item .bullet-list.none:before {display:none;}

.bg-gray {background:#fafafa;}

.sub01_01 .textbx {margin-top:clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px);text-align: center;}
.sub01_01 .title {font-size:clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; color: #222;}
.sub01_01 .desc {padding-top:clamp(15px, calc( 27 / var(--inner) * 100vw ), 27px); line-height:1.85; }

.history-bnr {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.history .item {display:flex; flex-wrap: wrap;}
.history .item .year {padding-left:clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px); padding-bottom: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); position: relative; font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1.4em; color: var(--color-primary); text-align:left; flex: 1 0 clamp(180px, calc( 260 / var(--inner) * 100vw ), 260px); max-width:clamp(180px, calc( 260 / var(--inner) * 100vw ), 260px); line-height:1em; }
.history .year:before {position:absolute; content:""; background:var(--color-primary); margin-left:-7px; top:14px; left:0; width:14px; height:14px;}
.history .year:after {position:absolute; content:""; left:0; top:14px; width:1px; height:100%; background:#ddd; z-index:-1;}
.history .list {margin-top: 10px;  padding-bottom: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); flex: 1 0 auto; width: 1%;}
.history .list li {margin-bottom:20px; color: #454545;}
.history .list li:last-child {margin-bottom:0;}
.history .list .title {font-size:20px; font-weight: bold; color: #222;}
.history .list .text {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); line-height:1.8;}
.history .item:last-child .year:after {display:none;}
.history .item:last-child .year {padding-bottom: 0;}
.history .item:last-child .list {padding-bottom: 0;}

@media (max-width: 1024px) {
    .history .item .year {font-size: 32px;}
    .history .year:before {margin-left: -5px; top: 10px; width: 10px; height: 10px;}
    .history .list {margin-top: 5px;}
	.history .list li {margin-bottom:15px;}
}

@media (max-width: 640px) {
	.history .item {border:0; }
	.history .item .year {padding-bottom: 15px !important; font-size: 28px; flex: 1 0 100%; max-width: 100%;}
    .history .year:before {margin-left: 0; width: 6px; height: 6px; }
    .history .year:after {display:none;}
    .history .list {margin-top: 0;}
	.history .list li {margin-bottom:10px;}
    .history .list .title {font-size: 16px;}
}

.adr-wrap {margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.adr-wrap .comp {margin-bottom: 7px; font-weight: 600; color:var(--color-primary);}
.adr-wrap .adr {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #222;}
.adr-wrap .adritem {display: flex; flex-wrap: wrap; padding-top: clamp(20px, calc( 27 / var(--inner) * 100vw ), 27px);}
.adr-wrap .adrlist {display: flex; margin-right: clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px); letter-spacing: -0.3px; line-height: 1.5;}
.adr-wrap .adrlist:last-child {margin-right: 0;}
.adr-wrap .name {width: clamp(90px, calc( 100 / var(--inner) * 100vw ), 100px); padding-left:clamp(34px, calc( 40 / var(--inner) * 100vw ), 40px); background-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px) auto !important; font-weight: 600; color: #222; }
.adr-wrap .name.bg1 {background:url(../images/sub/map-icn1.jpg) no-repeat left center; }
.adr-wrap .name.bg2 {background:url(../images/sub/map-icn2.jpg) no-repeat left center; }
.adr-wrap .name.bg3 {background:url(../images/sub/map-icn3.jpg) no-repeat left center; }
.adr-wrap .dec {flex: 1 0 auto; width: 1%;}

.guideitem {display: flex; flex-wrap: wrap; margin: -20px;}
.guidelist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.guidelist .images {position: relative; border-radius: 16px; overflow: hidden;}
.guidelist .images:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);border-radius: 16px;}
.guidelist .textbx {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); padding-left: clamp(5px, calc( 30 / var(--inner) * 100vw ), 30px);}
.guidelist .title {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #222;}
.guidelist .bullet-item {display: flex; flex-wrap: wrap; padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.guidelist .bullet-list {flex: 1 0 50%; max-width: 50%; margin-top: 0; }
.guidelist .bullet-list::before {background:#666; }

.guideitem.type2 .textbx {padding-left: 0;}
.guideitem.type2 .guidelist .title {font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); text-align: center;}

.contentswrap + .contentswrap {padding-top: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.incotentsbx + .incotentsbx {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.incotentsbx .flxWrap {align-items: center;}
.incotentsbx .imgbx {flex: 1 0 500px; max-width: 500px; margin-right: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.incotentsbx .textbx {flex: 1 0 auto; width: 1%;}
.incotentsbx .textbx .title {font-size: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: #222;}
.incotentsbx .textbx .desc {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); line-height: 1.8;}
.incotentsbx .bullet-item {padding-top:6px;}
.incotentsbx .bullet-list {margin-top: 0; color: var(--color-primary);}

.inquirybx .buttons .cen .btn-pack {border-radius: 8px;}

.samplingbx {overflow: hidden;}
.samplingbx .toptext {margin-bottom:clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.samplingbx .toptext span {display: block; text-align: center;}
.samplingbx .toptext .toptt {font-weight: 600; color: var(--color-primary);}
.samplingbx .toptext .bottomtt {padding-top:10px; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: #222;}
.samplingbx .innertext {margin-top: clamp(30px, calc( 58 / var(--inner) * 100vw ), 58px); padding:clamp(25px, calc( 52 / var(--inner) * 100vw ), 52px) clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius:16px; border: 1px solid #ddd; overflow: hidden;}
.samplingbx .bullet-list {margin-top: 0;}
.samplingbx .bullet-list::before {background: #666;}