/* pbv-b ltr */

body{width:100%; height:100%; overflow:hidden;-webkit-text-size-adjust: 100%;}
.hidden{display:none;}
.show{display:block;}


/* header */
header {position:fixed; top:0px; left:0; width:100%; padding:20px 22px 0; margin: 0 auto; background-color:#fff; z-index:3;}
header .wrap {display:flex; width:100%; max-width:1000px; flex-direction:column-reverse; align-items:flex-start; justify-content:space-between; margin:0 auto;} 
.left_header {display:flex; width:100%; height:40px; align-items:center;}
.right_header {display:flex; width: 100%; height:25px; justify-content:flex-end; margin-bottom:10px;  gap: 20px;}
header img {width:24px; height:24px;}
header a{padding:0; align-items:center; background:none; border:none; cursor:pointer;}
header button {display:flex; padding:0; align-items:center; border:none; background:none; cursor:pointer;}

.searchBox{position:relative;}
.subSearch {display: none; position:fixed; top:55px; left:0; width:100%; padding:25px 22px; margin-left:auto; box-sizing:border-box; background-color:#CCD0D3; z-index:5;}
.subSearch input {width:calc(100% - 54px); height:35px; padding:0 40px 0 15px; line-height:1.5; border:none; outline:none;}
.subSearch .btn_search_etc{position:absolute; top:30px; right:30px;}
.right_header .btn_search_close{display:none;}

.on .left_header{display:none;}
.on .subSearch{display:block;}
.on .btn_search_all{display:none;}
.on .btn_search_close{display:flex;}

.autocomplete-items{position:absolute; max-height:170px; box-sizing: border-box; outline:1px solid #dddcdb; overflow-y:auto; z-index:1;}
.autocomplete-items div{padding:5px 15px; background-color: #fff; cursor:pointer;}
.autocomplete-items div:hover{background-color: #e7ebf5;}
.autocomplete-items .autocomplete-active{background-color:#e7ebf5;}
.autocomplete-items::-webkit-scrollbar{width: 15px; background: #ccc;}
.autocomplete-items::-webkit-scrollbar-thumb{background: #05141f;}
.subSearch .autocomplete-items{top:61px; left:22px; width:calc(100% - 43px); }
.mainSearch .autocomplete-items{top:44px; left:0px; width:100%; color:#333;}

.breadcrumb {width:100%; color:#05141F; font-size:14px;}
.breadcrumb ol {display: flex; flex-wrap: nowrap; align-items: center; overflow: hidden; white-space: nowrap;}
.breadcrumb li:first-child {flex-shrink: 0; margin-right: 4px;}
.breadcrumb li:not(:first-child) {margin-right: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.breadcrumb li::before {content: ">"; display: inline-flex; width: 12px; height: 12px; margin-right: 4px; align-items:center; color: #999; font-family: sans-serif;}
.breadcrumb li:first-child::before {display: none;}
.breadcrumb .btn_home {display: flex; align-items: center;}
.breadcrumb .btn_home img {width: 24px; height: 24px; margin-right: 8px; margin-top: -4px;} 


@media (min-width: 1000px) {
    header{padding:20px 40px 0;}
    header .wrap {flex-direction:row; align-items:center;}
    .left_header {max-width:calc(100% - 100px); height:50px; flex: 0 0 90%;}
    .right_header {height:50px; align-items: center; margin-bottom:0;}
    .on .left_header{flex:0 0 50%;  max-width:580px;}
    .on .right_header {flex: 0 0 40%; max-width:400px;}
    
    .subSearch{display:block; position:relative; top:0px; width:0; padding:0; background-color:inherit; }
    .subSearch input{display:none; width:calc(100% - 92px);}
    .subSearch .btn_search_etc{display:none; top:5px; right:40px;}
    .subSearch .autocomplete-items{top:36px; left:0; width:100%;}

    header.on .left_header{display:flex;}
    header.on .subSearch{width:calc(100% - 40px); padding:0; margin-right:-60px; border:1px solid #CCD0D3; transition: width 0.3s ease-in-out;}
    header.on .subSearch input{display:block;}
    header.on .subSearch .btn_search_etc{display:block; transition: right 0.1s ease-in-out;}
    header.on .btn_search_close{margin-left:10px; z-index:5;}
}


/* nav */
nav{position:fixed; top:0; right:-500px; width:100%; max-width:460px; height:100%; background-color:#fff; opacity:0; visibility: hidden; transition: right 0.2s ease-in-out, opacity 0.2s ease-in-out; z-index:11;}
nav.on{right: 0; opacity: 1; visibility: visible;}
.nav_header{display:flex; justify-content:space-between; align-items:center; padding:17px 20px 16px; border-bottom:1px solid #07141F;}
.nav_header .nav_home{display:flex; align-items:center; gap:8px;}
.nav_header span{margin-top:3px;}

#view_container {width:100%; max-height:100%; overflow-y:scroll; border:1px solid #DADCDE;}
.toc-chap {clear:both; position:relative; margin-top:0; line-height:26px; font-size:16px; border-top: 1px solid #E7E9EC; background:url("../images/btn_mo.png") no-repeat; background-size:20px auto; background-position:right 25px top 50%; color:#05141F;}
.toc-chap a{display:block; padding:15px 45px 15px 20px;}

.toc-sect{display:none; color:#636B74;}
.toc-sect li{border-top:1px solid #E7E9EC;}
.toc-sect li a {display:block; position:relative; padding:15px 45px 15px 30px; line-height: 1.3; text-align:left; font-size:14px; word-wrap:break-word;}
.toc-chap.on{background:url("../images/btn_mc.png") no-repeat; background-size:20px auto; background-position:right 25px top 50%;}
.toc-sect li.active a{color:#05141F;}
.toc-chap:hover{background-color:#F2F4F6; text-decoration:underline;}
.toc-sect li:hover{background-color:#F2F4F6; text-decoration:underline;}


/* layout */
section {padding-bottom:135px; background:#fff;}
.search section{padding-top:135px;  height:calc(var(--vh, 1vh) * 100);}

#wrapper{position:relative; width:100%; margin:0 auto; background-color:#fff; overflow:hidden;}
#root{position:relative; width:100%;}
#root > div[class^='Heading2'] {width: 100%; margin: 0; overflow-y: auto;}
.swipe_inner_wrap{position:relative; max-width:1044px; margin:0 auto; padding:135px 22px 150px; overflow: visible;}

@media screen and (min-width:1000px) { 
    .search section {padding-top:110px;}
    .swipe_inner_wrap {padding:110px 40px 200px; max-width:1080px;}
}


/* contents */
.btn_page{position:fixed; bottom:60px; left:22px; display:flex; gap:10px; z-index: 2;}
.btn_page button{padding:0;}
.btn_page img{width:42px; height:42px;}

@media screen and (min-width:712px) {     	
    .btn_page{left:0; margin-top:80px;}
    .btn_page img{width:80px; height:80px;}
}

/* footer */
footer{position:fixed; bottom:0; left:0; display:flex; width:100%; height:40px; align-items:center; font-size:12px; color:#fff; background-color: #05141F;}
.footer-wrap{width:100%; max-width:1000px; margin:0 auto; padding:0 20px; text-align:left; box-sizing:content-box;}

@media screen and (min-width:712px) {   
	.footer-wrap{padding:0 40px;}
}

/* article */
.alertBox{display:none; position:fixed; top:50%; left:50%; max-width:360px; width:90%;min-width:300px; padding:20px; transform:translate(-50%, -50%);  background-color:#fff; z-index:3;}
.alertBox.on{display:block;}
.alertBox p{margin-bottom:20px;}
.alertBox button{float:right; display:block; color:rgb(0, 170, 210);}

.btn_top span{display:none;}
.btn_top .m{display:block;}
.btn_top img{border-radius: 50%; background-color: rgba(204, 204, 204, 0.6);}

.mask{display:none; position:fixed; top:120px; left:0; width:100%; height: calc(var(--vh, 1vh) * 100 - 64px); overflow:hidden; background:rgba(0, 0, 0, 0.7);  z-index:2;}
.mask.on{display:block;}

.btn_top {display: none; position: fixed; width: 52px; bottom: 20px; right: 20px; z-index: 2;}

.imgBox {display: none; position:fixed; top:115px; left: 50%; width: 100%; height:100%; transform: translateX(-50%); text-align: center; background-color: rgba(0, 0, 0, 0.8); z-index:3;}
.imgBox-wrap{position: relative; max-width:1280px; margin: 0 auto; height: 100%;}
.imgClose{position:absolute; top:15px; right:35px; cursor:pointer; z-index:5;}
.imgClose img{width: 24px;  height: 24px; opacity: 0.8;}
.imgClose img:hover{opacity: 1;}
.imgWrap{padding:100px 35px 0;}

.modalImage{width:auto; height:auto; max-width:100%; max-height:100%;}

@media screen and (min-width:712px) { 
	.btn_top {right:38px;}
    .mask{top:70px;}
    .imgWrap img[src^="contents/images/d-"]{width:auto;}
}

@media screen and (min-width: 1000px) {
    .btn_page{left: calc((100vw - 1000px) / 2);}
    .btn_top {right: calc((100vw - 1000px) / 2 + 38px);}
    .imgBox {top: 90px;}
}




/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; }
    html, body, nav, .toc-sect, .toc-chap, .autocomplete-items div, .subSearch .autocomplete-items, .searchBox input, .alertBox{background: #05141f; color: #fff;}
    header, section, #wrapper , .breadcrumb{background: #05141f; color: inherit;}
    #view_container, .toc-sect li, .nav_header, .toc-chap{border-color:#303438;}
    .toc-chap{background:url("../images/btn_mo_dark.png") no-repeat; background-size:20px auto; background-position:right 25px top 50%; }
    .toc-chap.on{background:url("../images/btn_mc_dark.png") no-repeat; background-size:20px auto; background-position:right 25px top 50%;}
    .toc-sect li.active a {color: #bbb; background-color:#19202a;}
    .toc-chap:hover, .toc-sect li:hover{background-color: #1c3f55;}
    .subSearch{background-color: #36444f; color: #fff;}
    .autocomplete-items{outline:1px solid rgba(221, 221, 221, 0.5);}
    .autocomplete-items div:hover, .autocomplete-items .autocomplete-active{background-color: #1c3f55; color: #fff;}
    .breadcrumb li::before{color:rgba(255,255,255,0.8);}
    .btn_search img, .btn_home img , .btn_nav img{filter: invert(100%);}
    .btn_search_close img, .nav_close img{filter: invert(70%);}

    @media screen and (min-width:712px) { 
        .subSearch{background-color: inherit;}
        header.on .subSearch{border-color:rgba(221, 221, 221, 0.5);}
    }
}