@import url( "//fonts.googleapis.com/earlyaccess/notosanskr.css" );

:focus {outline:0 !important;}

html, body {position: relative;height: 100%;-webkit-overflow-scrolling:touch;}
body, button, input {font-family: 'Apple SD Gothic Neo', "Noto Sans KR",'droid sans fallback', sans-serif;}
body {-webkit-font-smoothing: antialiased;font-size: 14px;color:#000;margin: 0;padding: 0;height:100%;position:relative;}
ul {padding: 0;margin: 0;list-style: none;}
a, a:link, a:visited {color: #000; text-decoration: none; outline: none;}

.wrap {padding-top: 50px;}

#sub.fml {padding-bottom: 61px; background-color: #fff;}

button {border: 0;padding: 0;cursor: pointer;}

button.black-btn {width: 100%; background-color: #222; color: #fff;}
button.gray-btn {width: 100%; background-color: #f1f1f1; color: #000;}
a.black-btn {width: 100%; background-color: #222; color: #fff; display: inline-block; text-align: center;}
a.gray-btn {width: 100%; background-color: #f1f1f1; color: #000; display: inline-block; text-align: center;}

input[type="checkbox"] + label {cursor: pointer;}

input[type="text"], input[type="password"], input[type="search"],input[type="number"],input[type="email"] {height: 26px; font-size: 13px; border-width: 0 0 1px; border-style: solid; border-color: #ebebeb; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 0;}
input[type="checkbox"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0;}

select {width: 100%; height: 26px; font-size: 13px; border-width: 0 0 1px; border-style: solid; border-color: #ebebeb; background-color: transparent; appearance: none; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; padding-right: 17px; text-overflow: ellipsis; white-space: nowrap;}
select:required:invalid {color: #999;}
option[value=""][disabled] {display: none;}
option {color: black;}
.select-wrap {position: relative; display: inline-block;}
.select-wrap::before {width: 7px; height: 7px; position: absolute; top: 7px; right: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); border-width: 0 0 2px 2px; border-style: solid; border-color: #828282; content: '';}

input.chk {width: 21px; height: 21px; position: relative; border: 1px solid #e5e5e5; background-color: transparent; border-radius: 0;}
input[type="checkbox"]::after {width: 21px; height: 21px; position: relative; content: ''; display: inline-block; background-image: url('/resources/image/checkbox.png'); background-size: 21px 21px;}
input[type="checkbox"]:checked::after {background-image: url('/resources/image/checkbox_checked.png');}
input.chk::before {content: ''; width: 9px; height: 5px; border-width: 0 0 3px 3px; border-style: solid; border-color: #e5e5e5; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute; top: 4px; left: 4px;}
input.chk:checked::before {border-color: #000;}

input.rchk {width: 21px; height: 21px; position: relative; border: 1px solid #e5e5e5; border-radius: 50%; -webkit-box-shadow: 0 0 1px #000; background-color: transparent;}
input.rchk::before {content: ''; width: 9px; height: 5px; border-width: 0 0 3px 3px; border-style: solid; border-color: #e5e5e5; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute; top: 4px; left: 4px;}
input.rchk:checked {border: 1px solid #000;} 
input.rchk:checked::before {border-color: #000;}
.input-long {width: 100%;}

.nav {position: fixed; top: 0; left: 0; width: 100%; padding: 0 25px; box-sizing: border-box; text-align: center; z-index: 10; background-color: #2bb673;}
.nav li {height: 19px; padding: 27px 0 23px; float: left; list-style: none;}
.nav li img {width: 100%;}
.nav li.nav-back {margin-right: 25px; padding: 28px 0 22px;}
button.nav-back-btn {width: 9px; height: 15px; background-image: url('/resources/image/btn_back.png'); background-size: 9px 15px; background-repeat: no-repeat; background-color: transparent;}
.nav li.nav-logo img {width: 114px; height: 16px;}
.nav li.nav-link {float: right; font-size: 8px; position: relative; padding: 32px 0 18px;}
.nav li.nav-link a {display: inline-block; vertical-align: middle;}
.nav li.nav-link a.cart {width: 24px; height: 10px; margin-bottom: 5px; margin-right: 8px; background-image: url('/resources/image/cart.png'); background-size: 24px 10px; background-repeat: no-repeat;}
.nav li.nav-link a.login {width: 31px; height: 13px; margin-top: -2px; margin-left: 8px; background-image: url('/resources/image/login.png'); background-size: 31px 13px; background-repeat: no-repeat;}
.nav li.nav-link a.my {width: 20px; height: 9px; margin-bottom: 4px; margin-left: 8px; background-image: url('/resources/image/MY.png'); background-size: 20px 9px; background-repeat: no-repeat;}
.nav-link span.cart-num {width: 16px; height: 16px; position: absolute; top: 16px; left: 16px; box-sizing: border-box; display: inline-block; background-image: url('/resources/image/cart_num.png'); background-size: 58px 58px; background-repeat: no-repeat; vertical-align: middle;}
.cart-1 {background-position: 0px 0px;}
.cart-2 {background-position: -21px 0px;}
.cart-3 {background-position: -42px 0px;}
.cart-4 {background-position: 0px -21px;}
.cart-5 {background-position: -21px -21px;}
.cart-6 {background-position: -42px -21px;}
.cart-7 {background-position: 0px -42px;}
.cart-8 {background-position: -21px -42px;}
.cart-9 {background-position: -42px -42px;}
.nav-link span.cart-0 {background-image: url('/resources/image/cart_num_0.png'); background-position: 0px 0px; background-size: 16px 16px;}
.nav-link span.cart-over {width: 25px; height: 16px; left: 8px; background-image: url('/resources/image/cart_num_over9.png'); background-position: 0px 0px; background-size: 25px 16px;}

#footer {padding: 50px 25px; font-size: 12px; font-family: 'Apple SD Gothic Neo', "Noto Sans KR",'droid sans fallback', sans-serif;}
.footer-link:after{content:''; display:block; clear:both;}
.footer-link li {margin: 20px 10px 10px 0; float: left;}
.footer-link li a {font-size: 12px; font-weight: bold; letter-spacing: -0.05em; color: #555;}
.footer-info, .copyright {font-size: 12px; color: #999;}
.footer-info {clear: both; margin: 0; letter-spacing: -0.05em; line-height: 160%;}
.copyright {margin-top: 10px;}

#footer-menu {position: fixed; bottom: 0; width: 100%;}
#footer-menu .footer-menu-bar {width: 100%; height: 61px; box-sizing: border-box; padding: 12px 25px; border-top: 1px solid #e6e6e6; background-color: #fafafa; display: none;}
#footer-menu .footer-save-btn {width: 23px; height: 23px; margin-top: 6px; display: none;/* display: inline-block; */ background-image: url('/resources/image/footer_menu_icon.png'); background-size: 106px 57px; background-position: -1px -33px; background-repeat: no-repeat;}
#footer-menu .on.footer-save-btn {background-position: -25px -33px;}
#footer-menu .footer-buy-btn {width: 98px; height: 33px; float: right; margin-left: 5px; border: 1px solid #dbdbdb; border-radius: 5px; box-sizing: border-box; line-height: 31px; font-size: 17px; letter-spacing: -0.05em; font-weight: bold; color: #fff; background-color: #17af6b; display: block;}
#footer-menu .footer-cart-btn {width: 98px; height: 33px; float: right; border: 1px solid #dbdbdb; border-radius: 5px; box-sizing: border-box; line-height: 31px; font-size: 17px; letter-spacing: -0.05em; font-weight: bold; color: #fff; background-color: #000; display: block;}

/*
#footer-menu .footer-menu-top {position: absolute; top: -41px; right: 10px; z-index: 2;}
#footer-menu .footer-menu-talk {position: absolute; right: 10px; transition: 0.35s; z-index: 1;}
#footer-menu .footer-menu-share {position: absolute; right: 10px; transition: 0.7s; z-index: 1;}
.footer-menu-top, .footer-menu-talk, .footer-menu-share {background-image: url('/resources/image/footer_menu_icon.png'); background-size: 106px 57px; background-repeat: no-repeat;}
#footer-menu .footer-menu-top {width: 34px; height: 31px; background-position: -1px -1px;}
#footer-menu .footer-menu-talk {width: 34px; height: 31px; background-position: -36px -1px;}
#footer-menu .footer-menu-share {width: 34px; height: 31px; background-position: -71px -1px; background-color: transparent;}
*/

.share-box {width: 290px; padding: 25px 23px 30px; background-color: #fff; text-align: center; box-sizing: border-box; display: none;}
.share-box button {background-color: #fff;}
.share-box h2 {margin: 0; font-size: 16px; letter-spacing: -0.025em; line-height: 16px; position: relative;}
.share-box .close_modal {width: 16px; height: 16px; position: absolute; top: 0; right: -6px; background-color: transparent;}
.close_modal:before, .close_modal:after {content: '';background-color: #000;height: 1px;width: 100%;top: 50%;left: 0;position: absolute;}
.close_modal:before {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.close_modal:after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.share-box ul {margin-top: 25px;}
.share-box ul li {width: 46px; margin-left: 20px; float: left; font-size: 12px; letter-spacing: -0.05em; color: #888;}
.share-box ul li:first-child {margin-left: 0;}
.share-sns-icon {width: 46px; height: 46px; background-image: url('/resources/image/share_sns_icon.png'); background-size: 97px 97px; background-repeat: no-repeat; display: inline-block;}
.share-sns-icon.fb {background-position: 0px 0px;}
.share-sns-icon.kakao {background-position: -51px 0px;}
.share-sns-icon.line {background-position: 0px -51px;}
.share-sns-icon.twt {background-position: -51px -51px;}

#lean_overlay {position: fixed;top: 0px;left: 0px;bottom:0px;height:100%;width:100%;background: #000;display: none;z-index: 9999;}

.top_wrap{position: fixed;bottom: 65px;right: 15px;z-index:100}
.top_wrap .footer-menu-top {width: 34px; height: 31px; background-position: -1px -1px;}
.top_wrap .footer-menu-talk {width: 34px; height: 31px; background-position: -36px -1px;}
.top_wrap .footer-menu-share {width: 34px; height: 31px; background-position: -71px -1px; background-color: transparent;}

.show.footer-menu-talk {top: -80px;}
.hide.footer-menu-talk {top: -41px;}
.show.footer-menu-share {top: -121px;}
.hide.footer-menu-share {top: -41px;}

.footer-menu-top, .footer-menu-talk, .footer-menu-share {background-image: url('/resources/image/footer_menu_icon.png'); background-size: 106px 57px; background-repeat: no-repeat;}

#book #footer-menu .footer-menu-bar {display: block;}

#footer-menu .cart-del-notice {width: 100%; padding: 0 10px; position: absolute; top: -70px; left: 0; z-index: 3; box-sizing: border-box; display: none;}
#footer-menu .cart-del-notice div {width: 100%; height: 40px; line-height: 40px; background-color: rgba(0,0,0,0.7); border-radius: 5px; font-size: 15px; color: #fff; text-align: center;}
#footer-menu .cart-del-notice span {color: #10db61;}


/* 팝업 - 새창 : 위로 올라오는 팝업 :: 도서 상세 페이지 */
.popup_wrap{border-radius:10px 10px 0 0;background:#fff;}
/* 팝업 상단 */
.popup_wrap .popup_top{height:43px;line-height:43px;border-bottom:1px solid #d6d6d6}
.popup_wrap .popup_top a{display:inline-block;*zoom:1;width:43px;height:43px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-family: 'icon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 43px;vertical-align: middle;}
.popup_wrap .popup_top a:before{font-size: 40px;}
.popup_wrap .popup_top span{text-align:left;margin-left:10px;vertical-align: middle;}
/* 팝업 컨텐츠 */
.popup_wrap .popup_content{position:relative;margin:0 auto;max-width:600px;text-align:left;padding:35px 20px 0 20px;overflow-y: auto;height: 100%;}
/* 팝업 컨텐츠 : 하단 구매하기 버튼 - 보관함담기, 장바구니, 바로구매  */
.popup_wrap .sec_btn,.popup_wrap .sec_btn_app{border-top:1px solid #d6d6d6;position:fixed;bottom:0;left:0;background:#fff;width:100%}
.popup_wrap .sec_btn > div,.popup_wrap .sec_btn_app > div{max-width:600px;padding: 10px 20px;overflow:hidden;text-align:right;margin:0 auto}
.popup_wrap .btn_box a{color:#333;display:inline-block;*zoom:1;}
.popup_wrap .btn_box a i{position:relative;width:25px;height:14px;display:inline-block;*zoom:1;}
.popup_wrap .btn_box a i:before{font-size:25px;position:absolute;bottom: -7px;left:0}
.popup_wrap .btn_box a.keep{float:left;font-family: 'icon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;width: 20px;height: 20px;position: relative;}
.popup_wrap .btn_box a.keep:before{font-size: 25px;position: absolute;bottom: -2px;left: -4px;}
.popup_wrap .btn_box a.keep.on{color:#25c17d}
.popup_wrap .btn_box span.bar{display:inline-block;*zoom:1;width: 1px;background: #333;height: 10px;margin: 0 5px 0 10px;}

/* 도서 상세 :: 아이콘*/
@font-face {
	font-family: 'icon';font-weight: normal;font-style: normal;
	src: url('/resources/css/fonts/icon.eot?jsd4rz');
	src: url('/resources/css/fonts/icon.eot?jsd4rz#iefix') format('embedded-opentype'),
		 url('/resources/css/fonts/icon.ttf?jsd4rz') format('truetype'),
		 url('/resources/css/fonts/icon.woff?jsd4rz') format('woff'),
		 url('/resources/css/fonts/icon.svg?jsd4rz#icon') format('svg');
}

.popup_wrap i,.bookdetail_wrap i{
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

.icon_01:before {content: "\e900";color: #25c17d;}
.icon_02:before {content: "\e901";color: #25c17d;}
.icon_03:before {content: "\e902";color: #25c17d;}
.icon_04:before {content: "\e903";color: #25c17d;}
.icon_05:before {content: "\e904";color: #25c17d;}
.icon_06:before {content: "\e905";color: #25c17d;}
.icon_07:before {content: "\e906";color: #25c17d;}
.icon_08:before {content: "\e907";color: #fff;}
.icon_09:before {content: "\e908";}
.icon_10:before {content: "\e909";}
.icon_11:before {content: "\e90a";color: #ff4a1a;}
.icon_12:before {content: "\e90b";color: #585858;}
.icon_13:before {content: "\e90c";}
.icon_14:before {content: "\e90d";color: #656565;}
.icon_15:before {content: "\e90e";color: #c3c3c3;}
.icon_16:before {content: "\e90f";color: #afafaf;}
/* 스크롤 막는 방법 */
body.none_scroll{height: 100%;overflow: hidden !important;width: 100%;position: fixed;}
/* body.none_scroll .st-container{height: 100%;overflow: hidden !important;width: 100%;position: fixed;} */