@charset "utf-8";

/**
 * --------------------------------
 * common CSS
 * --------------------------------
*/

@font-face {
    font-family: "WorkSans";
    font-style: normal;
    font-weight: 300;
    src: local("Work Sans Light"),
    url("../font/WorkSans-Light.eot"),
    url("../font/WorkSans-Light.eot?#iefix") format("embedded-opentype"),
    url("../font/WorkSans-Light.woff") format("woff");
}

@font-face {
    font-family: "WorkSans";
    font-style: normal;
    font-weight: 400;
    src: local("Work Sans Regular"),
    url("../font/WorkSans-Regular.eot"),
    url("../font/WorkSans-Regular.eot?#iefix") format("embedded-opentype"),
    url("../font/WorkSans-Regular.woff") format("woff");
}

@font-face {
    font-family: "WorkSans";
    font-style: normal;
    font-weight: 600;
    src: local("Work Sans Semi Bold"),
    url("../font/WorkSans-SemiBold.eot"),
    url("../font/WorkSans-SemiBold.eot?#iefix") format("embedded-opentype"),
    url("../font/WorkSans-SemiBold.woff") format("woff");
}

@font-face {
    font-family: "NotoSansKR";
    font-style: normal;
    font-weight: 200;
    src: url("../font/NotoSansKR-DemiLight.eot");
    src: url("../font/NotoSansKR-DemiLight.eot?#iefix") format("embedded-opentype"),
        url("../font/NotoSansKR-DemiLight.woff2") format("woff2"),
        url("../font/NotoSansKR-DemiLight.woff") format("woff");
}

@font-face {
    font-family: "NotoSansKR";
    font-style: normal;
    font-weight: 500;
    src: url("../font/NotoSansKR-Medium.eot");
    src: url("../font/NotoSansKR-Medium.eot?#iefix") format("embedded-opentype"),
        url("../font/NotoSansKR-Medium.woff2") format("woff2"),
        url("../font/NotoSansKR-Medium.woff") format("woff");
}

@font-face {
    font-family: "NotoSansKR";
    font-style: normal;
    font-weight: 700;
    src: url("../font/NotoSansKR-Bold.eot");
    src: url("../font/NotoSansKR-Bold.eot?#iefix") format("embedded-opentype"),
        url("../font/NotoSansKR-Bold.woff2") format("woff2"),
        url("../font/NotoSansKR-Bold.woff") format("woff");
}

/* base */
html {width:100%;}
body {width:100%;font-family:"malgun gothic", "맑은 고딕", Dotum, "돋움", sans-serif;font-weight:400;font-size:16px;line-height:1;color:#767676;letter-spacing:-0.025em;word-wrap:break-word;}
h1,h2,h3,h4,h5,h6 {margin:0;font-weight:400;}
ul, ol {list-style:none;margin:0;padding:0;}
button {font-family:"malgun gothic", "맑은 고딕", Dotum, "돋움", sans-serif;cursor:pointer;padding:0;border:none;letter-spacing:-0.025em;background-color:transparent;outline:none;}
a {color:#767676;text-decoration:none;outline:none;}
i, p, div, span, li {margin:0;}
em {display:inline-block;font-style:normal;}
table {table-layout:fixed;width:100%;border-collapse:collapse;border-spacing:0;}
table caption {display:none;}
th, td {padding:0;}
dl, dd {margin:0;}
figure {margin:0;}
img {vertical-align:top;}
address {font-style:normal;}
.hide {position:absolute !important;left:-9999px;}
*, *:before, *:after {box-sizing:border-box;}

/* skip */
.skip a {display:flex;position:absolute;z-index:9999;top:-35px;width:100%;height:33px;font-size:15px;line-height:33px;font-weight:700;letter-spacing:-2px;text-align:center;text-decoration:none;background:#ffffff;opacity:0.9;}
.skip a:focus {top:0;}
.skip a:hover {letter-spacing:-1px;}

/* swiper */
.btn-prev {outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;}
.btn-next {outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;}
[class*="swiper-button-prev"] {outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;}
[class*="swiper-button-next"] {outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;}

/* layout */
#wrap {min-width:1640px;}

#header .header-inner {position:relative;margin:0 auto;width:1280px;}
#header .header-inner .img2 {position:absolute;top:0;right:0;}
#header .header-inner .search {position:relative;height:109px;}
#header .header-inner .search input {position:absolute;left:160px;top:26px;width:300px;height:60px;line-height:60px;font-size:16px;font-family:"NotoSansKR";font-weight:200;border:0;outline:none;z-index:1;}
#header .header-inner .search input::placeholder {color:#aaa;font-size:16px;font-family:"NotoSansKR";font-weight:200;}
#header .header-inner .search input:focus::placeholder {color:#fff;}
#header .header-inner .search .bg-off {position:absolute;left:0;top:24px;}
#header .header-inner .search .bg-on {display:none;position:absolute;left:0;top:24px;}
#header .header-inner .search input:focus ~ .bg-off {display:none;}
#header .header-inner .search input:focus ~ .bg-on {display:block;}

#header .btn-myroom {position:absolute;right:65px;top:0;display:inline-block;width:50px;height:100%;}
#header .btn-cart {position:absolute;right:0;top:0;display:inline-block;width:50px;height:100%;}

#header .lnb-inner {position:relative;margin:0 auto;max-width:1640px;opacity:0;transition:0.8s;}
#header .lnb-inner.active {opacity:1;}
#header #lnb {position:absolute;left:50%;top:-89px;margin-left:-920px;padding-top:21px;padding-bottom:39px;width:240px;border:1px solid #dfe4ea;background-color:#fff;box-shadow:9px 9px 24px 0px rgba(0, 0, 0, 0.1);border-radius:50px;transition:0.4s;}
#header #lnb.close {margin-left:-808px;padding-top:28px;width:128px;}
#header.short #lnb {margin-left:-808px;}
#header.short #lnb.close {margin-left:-810px;}
#header #lnb .logo {margin:0 auto 45px;width:95px;transition:0.4s;}
#header #lnb .logo img {width:100%;}
#header #lnb.close .logo {margin-bottom:53px;width:74px;}
#header #lnb .menu1 {padding-right:31px;}
#header #lnb .menu1 li {margin-top:16px;text-align:right;}
#header #lnb .menu1 li:first-child {margin-top:0;}
#header #lnb .menu1 li a {cursor:default;}
#header #lnb .menu1 li:nth-child(1) a,
#header #lnb .menu1 li:nth-child(2) a,
#header #lnb .menu1 li:nth-child(3) a {cursor:pointer;}
#header #lnb .menu1 span {display:inline-block;width:112px;opacity:1;transition:0.4s;overflow:hidden;text-align:left;}
#header #lnb.close .menu1 span {opacity:0;width:0;}
#header #lnb .menu1 .icon {border-radius:20px;transition:0.4s;}
#header #lnb .menu1 a:hover .icon,
#header #lnb .menu1 .on a .icon {box-shadow:6px 6px 12px 0px rgba(0, 0, 0, 0.3);}

#header #lnb .menu2 {padding-right:39px;}
#header #lnb .menu2 li {margin-top:14px;text-align:right;}
#header #lnb .menu2 li:first-child {margin-top:48px;}
#header #lnb .menu2 span {display:inline-block;width:114px;opacity:1;transition:0.4s;overflow:hidden;text-align:left;}
#header #lnb.close .menu2 span {opacity:0;width:0;}
#header #lnb .btn-lnb {margin-top:62px;width:100%;text-align:center;}
#header #lnb .btn-lnb img.open {display:inline-block;}
#header #lnb .btn-lnb img.close {display:none;}
#header #lnb.close .btn-lnb img.open {display:none;}
#header #lnb.close .btn-lnb img.close {display:inline-block;}

.menu {display:none;position:absolute;left:0;top:112px;height:380px;background-color:#fff;}
.menu.active {display:block;}
.menu ul {display:none;height:380px;background-color:#fff;}
.menu ul > li > a {display:block;color:#444;font-size:15px;font-weight:200;font-family:"NotoSansKR";font-weight:200;cursor:default;}
.menu .depth2 li:hover > a,
.menu .depth2 li.two .depth3 > li:hover > a,
.menu ul > li.color > a {color:#1c4196;font-weight:500;cursor:pointer;background:url("./book/menu_arrow.png") no-repeat 89.5% center;}

.menu .depth1 {display:block;width:160px;border-right:1px solid #b7bad4;border-left:1px solid #121c72;border-bottom:1px solid #121c72;background-color:#eef5f9;}
.menu .depth1 > li > a {margin-right:-1px;padding-left:48px;color:#1c4196;font-size:17px;font-weight:700;height:62px;line-height:59px;border-right:1px solid #b7bad4;border-bottom:1px solid #b7bad4;letter-spacing:0;}
.menu .depth1 > li:hover > a,
.menu .depth1 > li.active > a {background:none;}
.menu .depth1 > li.active > a {font-size:17px;font-weight:700;border-right:1px solid #fff;background-color:#fff;}

.menu .depth1 > li > .depth2 {position:absolute;left:160px;top:0;width:172px;border-right:1px solid #121c72;border-bottom:1px solid #121c72;}
.menu .depth1 > li.active > .depth2 {display:block;}
.menu .depth1 > li > .depth2 > li > a {padding-left:24px;line-height:46px;}
.menu .depth1 > li > .depth2 > li:nth-child(1) {padding-top:12px;}

.menu .depth1 > li > .depth2 > li > .depth3 {position:absolute;left:171px;top:0;width:161px;border-left:1px solid #e9e9e9;border-right:1px solid #121c72;border-bottom:1px solid #121c72;}
.menu .depth1 > li.active > .depth2 > li.active > .depth3 {display:block;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > a {padding-left:24px;line-height:31px;}
.menu .depth1 > li > .depth2 > li > .depth3 > li:nth-child(1) {padding-top:20px;}

.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 {display:none;position:absolute;left:159px;top:0;width:362px;height:380px;background-color:#fff;border-left:1px solid #e9e9e9;border-right:1px solid #121c72;border-bottom:1px solid #121c72;}
.menu .depth1 > li.active > .depth2 > li.active > .depth3 > li.active > .depth4 {display:block;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul {display:none;}
.menu .depth1 > li:hover > .depth2 > li:hover > .depth3 > li:hover > .depth4 ul,
.menu .depth1 > li.active > .depth2 > li.active > .depth3 > li.active > .depth4 ul {display:block;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul {width:162px;position:absolute;left:0;top:0;background-color:transparent;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul + ul {left:160px;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul li {display:inline-block;width:162px;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul li > a {padding-left:24px;line-height:31px;font-size:14px;color:#767676;cursor:default;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul li:nth-child(1) {padding-top:20px;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul li:hover:not(.active) > a {color:#767676;font-weight:200;background:none;}
.menu .depth1 > li > .depth2 > li > .depth3 > li > .depth4 ul li.active > a {color:#1c4196;}
.menu .btn-close {position:absolute;top:0;right:0;cursor:pointer;}

#contents {position:relative;z-index:10;}
#contents .con {position:relative;}
#contents .con .inner {position:relative;margin:0 auto;width:1280px;z-index:2;}

#contents .con01 .btns {position:absolute;right:0;bottom:0;width:266px;height:72px;background-color:rgba(0, 0, 0, 0.25);z-index:10;}
#contents .con01 .btns .swiper-button-prev-swipercon01 {position:absolute;bottom:1px;left:7px;width:35px;height:100%;background:url("./con01_btn_prev.png") no-repeat center center;cursor:pointer;}
#contents .con01 .btns .swiper-button-next-swipercon01 {position:absolute;bottom:1px;left:110px;width:35px;height:100%;background:url("./con01_btn_next.png") no-repeat center center;cursor:pointer;}
#contents .con01 .btns .swiper-pagination-swipercon01 {position:absolute;bottom:0;left:53px;padding-top:24px;width:60px;height:100%;font-family:"WorkSans";color:#d0cbcb;font-size:20px;}
#contents .con01 .btns .swiper-pagination-swipercon01 .swiper-pagination-current {display:inline-block;width:18px;color:#fff;font-weight:600;text-align:center;}
#contents .con01 .btns .swiper-pagination-swipercon01 .swiper-pagination-total {display:inline-block;width:18px;color:#fff;opacity:0.5;font-weight:300;text-align:center;}
#contents .con01 .btns .btn-play {position:absolute;bottom:0;right:86px;width:35px;height:100%;font-size:0;text-align:left;text-indent:-9999px;}
#contents .con01 .btns .btn-play:after {content:"";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;background:url("./con01_btn_play.png") no-repeat 0 0;}
#contents .con01 .btns .btn-play.active:after {background:url("./con01_btn_stop.png") no-repeat 0 0;}
#contents .con01 .btns .btn-more {position:absolute;bottom:0;right:0;}

#footer {position:relative;text-align:center;background-color:#f4f4f4;z-index:10;}
#footer:after {content:"";position:absolute;left:0;top:85px;width:100%;height:1px;background-color:#e5e5e5;z-index:1;}
#footer .inner {margin:0 auto;width:1280px;}
#footer .btn-top {display:none;position:fixed;bottom:32px;right:10px;width:74px;height:74px;z-index:1;}
#footer .btn-top.scroll {display:block;}