/* 서브 */
#sub {width:100%;}
#sub .subtop {width:100%; background-position: center; background-size: cover; position: relative; color: #fff;}
#sub .subtop::before {width: 100%; height: 8rem; content: ""; background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0)); position: absolute; top: 0; left: 0;}
#sub .subtop .inner2 {height: 22.5rem; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 6rem; }
#sub .subtop#sub1 {background-image: url(images/subtop1.jpg);}
#sub .subtop#sub2 {background-image: url(images/subtop2.jpg);}
#sub .subtop#sub3 {background-image: url(images/subtop3.jpg);}
#sub .subtop#sub4 {background-image: url(images/subtop4.jpg);}
#sub .subtop#sub5 {background-image: url(images/subtop5.jpg);}

#sub .snb {width: 100%; height: 3.5rem; display: flex; gap: 0.5rem;}
#sub .snb li {flex:1; height: inherit; position: relative;}
#sub .snb li a {height:inherit; display: flex; justify-content: center; align-items: center; background-color: #0e5099; color: #fff; border-radius: 0.5rem 0.5rem 0 0; font-size: 1.2rem; overflow: hidden;}
#sub .snb li a:not(.on):before {width: 100%; height: 100%; content: ""; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%); position: absolute;}
#sub .snb li a.on {background-color: #fff; color: #0e5099; font-weight: 700;}




#sub #content {width:100%; position: relative;}

.roundImg {border-radius: 1.5rem;}
.bigImg {border-radius: 0 7.5rem 0 0;}


#sub .paragraph {width: 100%; position: relative;}

#sub .paragraph.visual {width: 100%; height: 15rem; background-position: center; background-size: cover; margin: 3.5rem 0;}
#sub .paragraph.visual.sub1_1 {background-image: url(images/sub1_1.jpg);}
#sub .paragraph.visual .inner2 {height: inherit;}
#sub .paragraph.visual h1 {color: rgba(255,255,255,0.5); position: relative; top: 0.5rem;}

#sub .paragraph.sub1_1 img {width: 8rem;}

/* SUB1_2 오시는 길 */
#sub .paragraph .mapBtn {display: flex; gap: 0.5rem;}
#sub .paragraph .mapBtn a {width: 10rem; height: 3rem; background-position: center; background-repeat: no-repeat; border: 1px #0e5099 solid; text-indent: -3333px;}
#sub .paragraph .mapBtn a:hover {box-shadow: 0.2rem 0.2rem 0.5rem rgba(0,0,0,0.2); transform: translate(-0.2rem,-0.2rem); font-weight: 600;}

#sub .paragraph .mapBtn a.nmap {background-image: url(images/map_nmap.png); background-size: 6.7rem auto;}
#sub .paragraph .mapBtn a.kmap {background-image: url(images/map_kmap.png); background-size: 6.6rem auto;}
#sub .paragraph .mapBtn a.tmap {background-image: url(images/map_tmap.png); background-size: 4.36rem auto;}


/** SUB2 포장안내 **/
#sub .sub2_1 {width:100%; position: relative !important; margin-top: 3rem;}
#sub .sub2_1 .stepList {
    width: 8rem;
    position: -webkit-sticky;
    position: sticky;
    top: 30vh;
    left: 0.5rem;
    z-index: 1;
    padding: 5rem 0 10rem;
}

#sub .sub2_1 .stepList li { margin-bottom: 0.5rem; font-size: 0.65rem;}
#sub .sub2_1 .stepList li::before {content:""; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #0e5099;float: left; position: relative; top: 0.15rem; opacity: 0; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#sub .sub2_1 .stepList li.active {color: #0e5099; font-weight: 700;}
#sub .sub2_1 .stepList li.active::before {left: 0.4rem; opacity: 1; margin-right: 1rem;}

#sub .sub2_1 .scrollPage {width: 100%; position: relative; top: -29.25rem;}
#sub .sub2_1 .scrollPage .scroll {padding: 5rem 0;}
#sub .sub2_1 .scrollPage .scroll:nth-child(odd) {background-color: #f1f8ff;}
#sub .sub2_1 .scrollPage .scroll .num {margin-bottom: 1.5rem;}
#sub .sub2_1 .scrollPage .scroll .num::before { counter-increment: number 1; content: "STEP " counter(number, decimal-leading-zero); color: #0e5099; font-weight: 700; }

#sub .sub2_1 .scroll .inner2 {padding-left: 8rem;}
#sub .sub2_1 .scroll .inner2 .flex {gap: 2rem; flex-direction: column;}
#sub .sub2_1 .scroll .inner2 .flex > div {width: 100%; border-radius: 1rem; background-color: #fff; border: 1px #c7e2fd solid; padding: 1.75rem;}
#sub .sub2_1 .scroll .inner2 .flex.noFrame > div {border-radius: 0; background-color: transparent; border: 0; padding: 0;}
#sub .sub2_1 .scroll .inner2 .flex > div .swiper {width: 100%;}
#sub .sub2_1 .scroll .inner2 .flex > div .swiper-slide img {width: 100%;}
.swiper-button-next,.swiper-button-prev { zoom: 0.6;}


#sub .sub3 {display: flex; flex-direction: column; gap: 8rem;}

#sub .sub3 .swiper {width:100%; box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.1);}
#sub .sub3 .swiper .swiper-slide img {width: 100%;}
#sub .sub3 .title {width:100%; display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 2rem 0;}



.num_reset {counter-reset: number 0;}



/*** SUB 공통 ***/
#sub .paragraph .bullet {margin: 0.15rem 0; padding-left: 1.25rem; position: relative;}
#sub .paragraph .bullet::before {content: "\25CF"; position:relative; top: -0.2rem; margin-right: 0.75rem; margin-left: -1rem; font-size: 0.3rem; color: #013187; font-style: normal;}
#sub .paragraph .bullet.check {margin: 0.15rem 0; padding-left: 1.5rem; position: relative;}
#sub .paragraph .bullet.check::before {content: url(images/bullet_check.png); position:relative; top: 0.15rem; margin-right: 0.5rem; margin-left: -1.5rem; font-size: 0.3rem; color: #0e5099; font-style: normal;}







#sub .paragraph #basic,#sub .paragraph #basic2 {border-collapse:collapse;}
#sub .paragraph #basic tr.category {background-color: #013187;}
#sub .paragraph #basic tr.category td {font-weight: 700; color: #fff;}
#sub .paragraph #basic th {background-color: #e4f1ff; padding:1rem 0.5rem; border-bottom: 0; border-left: 1px rgba(0,0,0,0.1) solid;}
#sub .paragraph #basic th * {font-weight: 700;}
#sub .paragraph #basic th.point {background-color: #06b19c;}
#sub .paragraph #basic th.bright {background-color: #315079;}
#sub .paragraph #basic td {padding:1rem; border-bottom: 1px rgba(0,0,0,0.1) solid; border-left: 1px rgba(0,0,0,0.1) solid;}
#sub .paragraph #basic td.bg {background-color: #f2f8ff; text-align: center;}
#sub .paragraph #basic td.blImportant {border-left: 1px rgba(0,0,0,0.1) solid !important;}
#sub .paragraph #basic .part td {border-bottom: 1px rgba(0,0,0,0.5) solid;}
#sub .paragraph #basic .head {border-left: 0;}




/* 서브페이지 탭 */

#sub .paragraph ul.tabs {width: fit-content; background-color: #dbeefc; padding: 0.3rem; border-radius: 10rem; margin: auto; display: flex; gap: 0.5rem;}
#sub .paragraph ul.tabs li { text-align:center; width: 12rem;}
#sub .paragraph ul.tabs li a {display:block; width: 100%; font-size: 1.1rem; line-height: 3rem; border-radius: 10rem;}
#sub .paragraph ul.tabs li:hover a,#sub .paragraph ul.tabs li.active a {background-color: #013187; color: #fff; font-weight: 700; }
#sub .tab_content {padding: 0; width:100%; min-height:15rem;}


#sub .paragraph .board_box {font-size:1rem !important;}
#sub .paragraph .board_box .board_bgcolor > span,#sub .paragraph .board_box .board_bgcolor > font,#sub .paragraph .board_box .att_title > font,#sub .paragraph .board_box .bbsnewf5 span {font-size:1rem !important;}
#sub .paragraph .board_box .ext_search {text-align: justify !important;}

#sub .paragraph .board_box #post_area img {max-width: 100%;}

#sub .paragraph .board_box .imgList .bbsnewf5 a {width: 17.5rem; height: 17.5rem; display: block; overflow: hidden;}
#sub .paragraph .board_box .imgList .bbsnewf5 a img {width: 100% !important; height: 100% !important; object-fit: cover;}
#sub .paragraph .board_box .imgList .bbsnewf5 .gallery_subject a {width: auto  !important; height: auto  !important;}


#sub .paragraph .board_box .formmail_border,
#sub .paragraph .board_box textarea[name="description1"] {max-width: 21rem;}
#sub .paragraph .board_box .formmail_border {min-width: 6rem;}
#sub .paragraph .board_box .formmail_cell_bgcolor table td {font-size: 0.9rem;}


@media only screen and (max-width:640px) {
    #sub .subtop {background-size: cover !important;}

    #sub .swiper-button-prev {zoom: 0.618;}
    #sub .swiper-button-next {zoom: 0.618;}

    .root_daum_roughmap {zoom: 0.618;}
}