@charset "utf-8";
/* common */
body{width:100%; overflow:hidden;}
.logo{width:auto; height:30px; /* 제네시스 로고 크기 다름 */}
#close_bt_div{display:none; position:fixed; top:0; left:0; width:100%; height:auto; min-height:100vh; background:rgba(0,0,0,0.8); z-index:10;}
.hidden{display:none;}
.show{display:block;}


/* header */
header{position:fixed; top:0; left:0; width:100%; height:64px; font-size:20px; box-sizing:border-box; color:#fff; background:#000; z-index:1;}
header .wrap{display:flex; position:relative; max-width:960px; width:90%; height:100%;  margin:0 auto; flex-wrap:wrap; justify-content:space-between; align-items:center;}
header a{display:inline-block;}
header .btn_nav{width:18px;}
header .btn_search{margin-left:auto; margin-right:20px; width:20px;}
header .btn_home{width:20px;}
header .btn_home svg{vertical-align:middle;}


/* nav */
nav{display:none; position:fixed; top:0; width:80%; max-width:400px; height:100%; background-color:#fff; z-index:11;}
#top_kind_toc{display:flex; width:100%; height:60px; padding:0 30px; justify-content:flex-end; border-bottom: 2px solid rgba(0, 0, 0, 0.8);}
.toc_close{order:2; width:15px; background:url("../images/btn_close.png") center center no-repeat; background-size:100% auto; cursor:pointer;}
.toc_search{order:1; width:15px; margin-right:30px; background:url("../images/btn_search.png") center center no-repeat; background-size:100% auto; cursor:pointer;}
#view_container {width:100%; height:100%; padding-bottom:60px; overflow-y:scroll;}
#id_toc1 ul li {margin-bottom:0;}
.toc-chap {clear:both; position:relative; padding:18px 60px 18px 28px; margin-top:0; font-weight:normal; line-height:26px; font-size:14px; border-bottom: 1px solid #f6f3f2; background:url("../images/btn_but1.png") no-repeat; background-size:20px auto; background-position:right 28px top 50%;}
.chapter_text2{font-size:16px; line-height:1;}
ul.toc-sect{color:#82846f; background:#f6f3f2;}
ul.toc-sect li a {display:block; position:relative; padding:20px 60px 20px 28px; line-height: 1.3; text-align:left; font-size:16px; word-wrap:break-word;}
.toc-chap.on{color:#a47b61;background-image:url("../images/btn_but2.png");}

/* section header */
#scroll_nav{position:fixed; top:64px; left:0; width:100%; height:50px; background:#f6f3f2;}
#scrollmask {position:relative; display:flex; max-width:960px; width:90%; height:100%; align-items:center; margin:0 auto; overflow:hidden;}
.home2 img{width:20px; vertical-align:top;}
#chapter {padding-right:5px; margin-left:20px; margin-right: 1px; line-height:50px; font-size:18px; overflow:hidden; white-space:nowrap; cursor:default;}


/* section layout */
#wrapper {position:fixed; width:100%; height:100%; margin:114px auto 0;}
#root {/*position:relative; iOS 뒤로가기시 스와이프 위치 못잡음*/ display:none; width:100%; top:0; bottom:0; margin:0 auto; overflow:hidden;cursor:default;}
#root > div.Heading2, #root > div.Heading2-NoTOC{width:100%; margin:0; overflow-y:auto;}
.swipe_inner_wrap{position:relative  ;margin:0 auto; max-width:960px; width:90%; padding-bottom:100px; min-height:calc(100vh - 188px); background-color:#fff;}


/* section sect */ 
.sect {padding-top:30px;}
.sect li {margin-bottom: 0; border-top:2px solid #f6f3f2;}
.sect li:first-child {border-top:none;}
.sect li:last-child {border-bottom:2px solid #f6f3f2;}
.sect li a{display:block; padding:15px; color:#05141F; line-height:1.3; font-size:16px; font-family: 'Noto-M' , 'NotoETC-M';}


/* footer */
footer{width:100%; background:#262626;}/*CHN*/
footer .wrap{padding:14px 15px 15px 15px; text-align:center; background:#262626;}/*CHN*/
footer p{min-height: 18px; padding:0; font-size:11px; color:#fff; font-family:"point", "NotoETC", "Noto", sans-serif;}
footer .logo_footer{width:auto; height:17px; margin-bottom:10px;}


/* article */
.btn_area {position:fixed; left:0; bottom:0; width:100%; overflow:hidden;}
.btn_prev2 {display:none; position:fixed; top:50%; left:0; width:52px; height:52px; transform:translateY(-50%); animation:arrow1 0.4s; opacity:0.7; z-index:999;}
.btn_prev2 img{position:absolute; width:100%; height:100%;}
.btn_next2 {display:none; position:fixed; top:50%; right:0; width:52px; height:52px;transform:translateY(-50%); animation:arrow2 0.4s; opacity:0.7; z-index:999;}
.btn_next2 img{position:absolute; width:100%; height:100%;}
@keyframes arrow1{0%{left:-50px;}100%{left:0;}}
@keyframes arrow2{0%{right:-50px;}100%{right:0;}}

#count{display:none; position:absolute; left:18px; height:40px; line-height:49px; font-size:16px; text-align:left; color:#fff;}
.type_a .btn_page{display:inline-block; width:10px; height:10px; margin:5px 8px; border-radius:10px; letter-spacing:0; color:#CCC; background:#ccc; *zoom:1; overflow:hidden;}
.type_a .btn_page.on{width:10px; height:10px; letter-spacing:0.1px; color:#bb162b; background:#bb162b; }
.type_b .btn_page{display:inline-block; width:8px; height:8px; margin:6px 3px; border-radius:10px; letter-spacing:0; color:#CCC; background:#ccc; *zoom:1; overflow:hidden;}
.type_b .btn_page.on{width:8px; height:8px; letter-spacing:0.1px; color:#bb162b; background:#bb162b;}

#gototop {display:none; position:fixed; bottom:0; right:0; width:60px; height:56px; z-index:1000; cursor:pointer;}
#gototop img {width:100%; height:auto; background-color: rgba(100, 100, 100, 0.251);}


@media screen and (min-width:600px) {
	header .btn_nav{width: 27px;}
	.logo{height:50px;}
	.toc_search{width: 20px;}
	.toc_close{width: 20px;}
	footer .wrap{padding:13px 15px;}
	footer .logo_footer{height:25px;}
}

@media screen and (min-width:768px) {
	header{height:79px}
	#top_kind_toc{justify-content:space-between;}
	#scroll_nav{top: 79px;}
	#chapter{margin-left:20px;}
	#wrapper{margin-top: 129px;}
	header .header_wrap, #scrollmask, .swipe_inner_wrap{margin: 0 auto;}	
	.swipe_inner_wrap{min-height:calc(100vh - 208px);}
	.toc-chap{background-size: 26px auto;}
	footer p{font-size:12px;}
}