@charset "utf-8";

/* 페이지 스타일 */
.page_frame {font-size: min(calc(10 / 500 * 100vw), 10px); width: 100%; width: 100%; max-width: 1300px; margin: 0 auto;}

/* 상단 탭상자 */
.tab_frame .SCD_tab_box {
    /* 탭 너비 및 탭 갯수 */
    --item-width:232px;
    --item-length:3;
    width: 100%; max-width: calc(var(--item-width) * var(--item-length)); margin: 0 auto 7.8em;
    display: grid; grid-template-columns: repeat(var(--item-length), 1fr);
}
.tab_frame .SCD_tab_box > li > a{
    padding: 1.9em 1em; display: flex; align-items: center; border: 1px solid #d2d2d2; text-align: center;
    justify-content: center; color: #434343; gap: 0.5em; transition: 0.3s; cursor: pointer;
}
.tab_frame .SCD_tab_box > li:not(:last-child) > a{border-right: none;}
.tab_frame .SCD_tab_box > li > a .tab_text {font-size: 1.8em; line-height: 1.2; transition: 0.3s;}

/* tab_active */
.tab_frame .SCD_tab_box > li > a.on {background: var(--main-color); border-color: transparent;}
.tab_frame .SCD_tab_box > li > a.on .tab_text {color: #fff;}


.p103 {width:100%; word-break: keep-all; word-wrap: break-word; }
.root_daum_roughmap {width:100% !important;}


/* 구글맵 CSS */
.p103 .itemBox .tab_wrap iframe{width: 100%;}

/* 표 CSS */
.p103 .box_wrap{ width: 100%; display: flex; margin-top: 5em; gap: 30px;}

.p103 .box_wrap .box_all{width: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.p103 .box_wrap .box_all .title p{font-size: 2.5em; font-weight: bold; margin-bottom: 1em;}
.p103 .box_wrap .box_all .box{margin-top: 1.5em; display: flex;}

.p103 .box_wrap .box_all .box .left{width: 100%; max-width: 100px; }
.p103 .box_wrap .box_all .box .left p{font-size: 1.8em; line-height: 1.5;}

.p103 .box_wrap .box_all .box .right{width: 100%; min-width: 270px; }
.p103 .box_wrap .box_all .box .right p{font-size: 1.8em; color: #434343; line-height: 1.5;}

.p103 .box_wrap .box2 > .title p{margin-bottom: 0;}
.p103 .box_wrap .box2 .sea_text p{font-size: 1.8em; color: #434343; line-height: 1.5;}
.p103 .box_wrap .box2 > .box{margin-top: 0;}

.p103 .box_wrap .box2 .box_btn{display: flex; align-items: center; justify-content: center; width: 200px; background-color: #337ab7;}
.p103 .box_wrap .box2 .box_btn a {padding: 1.8em 70px;}
.p103 .box_wrap .box2 .box_btn a p {color: #fff; font-size: 1.8em;}

@media (max-width: 768px) {
    .p103 .box_wrap{flex-direction: column; gap: 40px;}
    .p103 .box_wrap .box_all .box .left{width: 25%;}
    .p103 .box_wrap .box_all .box .right{min-width: initial;}

    .p103 .box_wrap .box2 > .title{margin-bottom: 2.5em;}
    .p103 .box_wrap .box2 > .box{margin-bottom: 3em;}
}