@charset "utf-8";

/* header */
.header-wrap { background:#eff1f8; border-bottom:1px solid #e3e3e3; height:73px; padding:15px 20px; position:relative}
.header-wrap .logo-area {float:left; width:170px; padding:5px 20px; border-radius: 5px;}
.header-wrap .logo-area:hover {background:#e1e6f6;}
.header-wrap .search-wrap  {float:right; width:300px; position:relative;}
.header-wrap .search-wrap .search-ui input[type="text"].search-input { border:0; width:100%; height:100%; font-size: 1.3rem; font-weight:600; }
.header-wrap .search-wrap .search-ui { width:100%; background:#fff; box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.1); border-radius: 100px; padding:13px 50px 13px 20px; border:1px solid #fff; transition: border .2s; position:relative}
.header-wrap .search-wrap .search-ui:hover { border:1px solid #8198eb; }
.header-wrap .search-wrap .btn-wrap {position:absolute; top:4px; right:5px; }
.header-wrap .search-wrap .btn-wrap button {padding: 0 10px;}
.header-wrap .search-wrap .btn-wrap button .material-icons {font-size:14px;}

@media (max-width: 768px) {
    .header-wrap {padding:15px}
	.header-wrap .logo-area {padding:5px 15px; width:153px;}
	.header-wrap .search-wrap {width:215px}
}

@media(max-width:500px) {
	.header-wrap {height:70px;}
	.header-wrap .logo-area {width:135px;}
	.header-wrap .search-wrap {width:0; transition: width .3s ease;position: absolute; right: 15px; z-index: 1; top:15px}
	.header-wrap .search-wrap .search-ui {opacity:0; padding:13px 0 13px 0; border:0; transition: padding .2s ease, border .2s ease, opacity .1s ease}
	.header-wrap .search-wrap:hover {width: calc(100% - 33px);}
	.header-wrap .search-wrap:hover .search-ui {padding:10px 50px 10px 20px; height:100%; border:1px solid #fff; opacity:1}
	.header-wrap .search-wrap .btn-wrap button {height:30px; padding:0 8px;}
}


/* body */
.manual-wrap {position:relative}
.manual-wrap .lf-bar {width:270px; float:left; border-right:1px solid #e3e3e3;  background:#fbfcff;padding:5px;height:calc(100vh - 73px); }
.manual-wrap .lf-bar .scroll-wrap {overflow-y: auto;height:100%; padding:25px}
.manual-wrap .lf-bar .depth-wrap {margin-bottom:35px}
.manual-wrap .lf-bar .depth-wrap:last-child {margin-bottom:0}
.manual-wrap .lf-bar .depth-wrap h3 {font-size:1.4rem; color:#a4b2e0; padding-bottom:15px}
.manual-wrap .lf-bar .depth-wrap ul li {margin-bottom:7px; padding:7px 10px 7px 15px; font-size:1.4rem; cursor:pointer; border-radius:5px; position:relative}
.manual-wrap .lf-bar .depth-wrap ul li:before {position:absolute; content:''; top:12px; left:7px; background:#aaa; width:2px; height:2px; border-radius: 50%;}
.manual-wrap .lf-bar .depth-wrap ul li:hover {background:#f0f4ff;}
.manual-wrap .cont {width:calc(100% - 270px); float:left; height:calc(100vh - 73px); overflow-y: auto; position:relative}
.manual-wrap .cont .guide-cont {margin-bottom:30px; }
.manual-wrap .cont .guide-cont:last-child {margin-bottom:0}
.manual-wrap .cont .sec-width {margin:0 auto; width:1200px; padding:30px}
.manual-wrap .cont .guide-tit {font-size:2.4rem; font-weight:600; padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #e5e5e5;}
.manual-wrap .cont .guide-sub-tit {font-size:1.7rem; font-weight:600; color:#8fa3eb; padding-bottom:10px}
.manual-wrap .cont .guide-cont p {font-size:1.6rem; line-height:25px; letter-spacing: -0.2px;}
.manual-wrap .cont .guide-cont img {max-width:100%;}
.manual-wrap .cont .mo-btn {position:absolute; right:25px; top:20px; display:none; z-index:3}
.manual-wrap .cont .mo-btn .material-icons {font-size: 14px;background: #abb9eb;padding: 10px;border-radius: 50%;color: #fff; cursor:pointer; transition: background .3s ease}
.manual-wrap .cont .mo-btn .close {display:none;}
.manual-wrap .cont .mo-btn.on .close {display:block;}
.manual-wrap .cont .mo-btn.on .menu {display:none}
.manual-wrap .cont .mo-btn:hover .material-icons {background: #93a5e5}

@media(max-width:1600px) {
	.manual-wrap .cont .sec-width {width:100%}
}

@media(max-width:1024px) {
	.manual-wrap .lf-bar {width:240px}
	.manual-wrap .cont {width:calc(100% - 240px)}
	.manual-wrap .cont .sec-width {padding:25px}
	.manual-wrap .cont .guide-tit {font-size:2rem; padding-bottom:20px; margin-bottom:20px;}
	.manual-wrap .cont .guide-sub-tit {font-size:1.6rem}
	.manual-wrap .cont .guide-cont p {font-size:1.4rem; line-height:22px}
}

@media(max-width:768px) {
	.manual-wrap .cont .sec-width {padding:20px}
	.manual-wrap .lf-bar {position:absolute; top:0; left:100%; width:100%; z-index:2; transition: left .5s ease}
	.manual-wrap .lf-bar.on {left:0;}
	.manual-wrap .lf-bar .depth-wrap h3 {padding-right:45px}
	.manual-wrap .cont .mo-btn {display:block;}
	.manual-wrap .cont {width:100%}
	.manual-wrap .cont .guide-tit {padding-right:50px}
}

@media(max-width:500px) {
	.manual-wrap .lf-bar .scroll-wrap {padding-top:20px}
	.manual-wrap .lf-bar .depth-wrap {margin-bottom:30px}	
	.manual-wrap .lf-bar .depth-wrap h3 {padding-right:30px}
	.manual-wrap .lf-bar .depth-wrap ul li {margin-bottom:5px}
	.manual-wrap .cont .guide-tit {font-size:1.8rem;}
	.manual-wrap .cont .guide-sub-tit {font-size:1.5rem}
	.manual-wrap .cont .mo-btn {right:13px; top:15px}
	.manual-wrap .cont .mo-btn .material-icons {padding:8px}
}