@charset "utf-8";

@media screen and (max-width:1200px) {
    .youtube-area {
        height:650px;
    }
    .section-2 .swiper-container {
        padding: 30px;
    }
    .profile-container {
        padding: 50px;
    }
    .tab-container .tab-content-wrap .tab-content {
        padding: 30px;
    }
    .tab-container .tab-content-wrap .tab-content .content-info .content-detail {
        margin-right: 0;
    }
    .book-list-style ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 80px 40px;
    }
    .book-list-style ul li:nth-child(5n - 4)::before {
        display:none;
    }
    .book-list-style ul li:nth-child(4n - 3)::before {
        position:absolute;
        left:-8px;
        top:210px;
        z-index:-1;
        content:'';
        display:block;
        width:calc(100% * 4 + 40px * 3 + 24px);
        height:150px;
        background: url(../images/bg/bg-rack.png) 0 100% no-repeat;
        background-size: 100% auto;
    }
} 

@media screen and (max-width:992px) {    
    #wrap .header .inner nav .nav_wrap {
        position:relative;
        position:fixed;
        left:-100%;
        top:0;
        z-index:100;
        width:100%;
        height:100vh;
    }
    #wrap .header .inner nav .nav_wrap .bg {
        position:absolute;
        left:0;
        top:0;
        z-index:-1;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.75);
    }
    #wrap .header .inner nav .nav_wrap > ul {
        display:block;
        max-width:270px;
        min-width:270px;
        height:100%;
        padding:30px 0;
        overflow-y:auto;
        background-color:#FFFFFF;
        box-sizing:border-box;
        overflow:visible;
    }
    #wrap .header .inner nav > ul > li {
        width:100%;
        padding:0;
        margin-bottom:15px;
    }
    #wrap .header .inner nav > ul > li:first-child {
        padding:0;
    }
    #wrap .header .inner nav ul li a {
        padding:15px;
    }
    #wrap .header .inner nav ul li a.is-active::after {
        display:none;
    }
        #wrap .header .inner nav ul li a.is-active span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            z-index:-1;
            background-color: #ffda3d;
            width:100%;
            height: 10px;
            margin: 16px 0 0 0;
        }
    #wrap .header .inner nav ul li ul {
        display:block;
        position:sticky;
        margin-top:0;
        background-color:#F7F7F7;
    }
    #wrap .header .inner nav .btn_mobile {
        display:block;
    }
    #wrap .header .inner nav .btn_close {
        position:absolute;
        left:290px;
        top:25px;
        display:block;
    }
    .youtube-area {
        height:500px;
    }
    .section-3 .download-container .download-list ul {
        column-gap:30px 15px;
    }
    .section-3 .download-container .download-list ul li {
      flex: 0 1 calc(33.3333% - 14px);
    }
    .seciton-4 .relevant-container .site-list {
        padding:0 15px;
    }
    .profile-container {
        padding:50px 30px;
    }
    .profile-container .profile-img {
        width: 200px;
        margin-right: 30px;
        flex: 0 0 200px;
    }
    .profile-container .profile-img figure img {
        width:100%;
        height:auto;
    }
    .profile-container .profile-img figure figcaption {
        font-size:22px;
    }
    .profile-container .profile-img figure figcaption span {
        top:-40px;
        padding: 5px 10px;
    }
    .profile-container .profile-img figure figcaption p {
        padding: 5px 10px;
    }
    .tab-container .tab-content-wrap .tab-content .content-info {
        margin-top:0;
    }
    .tab-container .tab-content-wrap .tab-content .content-info .thumb {
        flex:auto;
        margin:0 30px 0 0;
    }
    .tab-container .tab-content-wrap .tab-content .content-info .content-detail {
        flex: 0 0 calc(100% - 257px);
    }
    .book-list-style ul {
        grid-template-columns: repeat(3, 1fr);
        gap: 80px 30px;
    }
    .book-list-style ul li:nth-child(4n - 3)::before {
        display:none;
    }
    .book-list-style ul li:nth-child(3n - 2)::before {
        position:absolute;
        left:-8px;
        top:214px;
        z-index:-1;
        content:'';
        display:block;
        width:calc(100% * 3 + 30px * 2 + 24px);
        height:120px;
        background: url(../images/bg/bg-rack.png) 0 100% no-repeat;
        background-size: 100% auto;
    }
    .board-list ul li .detail .title {
        -webkit-line-clamp:2;
    }
}

@media screen and (max-width:768px){
    #wrap .header .inner .logo {
      width: 160px;
    }
    .youtube-area {
        height:420px;
    }
    .section-3 .download-container .download-list ul li {
        flex: 0 1 calc(50% - 10px);
    }
    .seciton-4 .relevant-container .site-list {
        padding:0;
    }
    .footer .company-info {
        letter-spacing:-0.2px;
    }
    .profile-container {
        display:block;
        padding:50px 15px;
    }
   .profile-container .profile-img {
        width: 100%;
        max-width:300px;
        margin:0 auto 30px;
    }
    .profile-container .profile-img figure img {
        width:100%;
        height:auto;
    }
    .tab-container .tab-content-wrap .tab-content .content-info .content-detail {
        display:block;
        flex: 0 0 calc(100% - 257px);
    }
    .tab-container .tab-content-wrap .tab-content .content-info .content-detail dl {
        margin-bottom:15px;
    }
    .tab-container .tab-content-wrap .tab-content .content-info .content-detail dl:last-child {
        margin-bottom:0;
    }
    .book-list-style ul {
        gap: 50px 15px;
    }
    .book-list-style ul li:nth-child(3n - 2)::before {
        left:-8px;
        top:190px;
        width:calc(100% * 3 + 15px * 2 + 24px);
        height:100px;
    }
    .book-list-style ul li img {
        width:100%;
        max-width:180px;
    }
    .book-list-style ul li figcaption {
        width:100%;
        max-width:170px;
    }
    .board-view {
        padding:15px 0 0;
    }
    .board-view .board-header {
        padding:0 15px 0;
    }
    .board-view .board-body {
        padding:15px;
    }
    .board-view .board-body .board-content {
        padding-top:15px;
    }
    .board-view .board-footer {
        padding:15px;
    }
    .guest-book {
        padding: 15px;
    }
    .guest-book-comment-list {
        padding: 15px;
    }
    .comment-write-container .user-info input {
        width: 150px;
        padding: 15px;
    }
    .comment-list ul li ul {
        margin: 15px 0 0 30px;
    }
    .user-info .input-search {
        width:calc(100% - 80px);
    }
    .user-info .input-search input {
        padding:0 55px 0 15px;
    }
    .board-list ul li {
        flex: 0 1 30%;
    }
    .board-list ul li .thumb {
        height: 130px;
    }
}

@media screen and (max-width:576px){
    #wrap header .inner {
        position:relative;
        height:90px  !important;
    }
    #wrap .header .inner .logo {
        position:absolute;
        left:50%;
        transform:translate(-50%);
        width:140px;
    }
    #wrap .header .inner .visitor {
        display:none;
    }
    section[class^=section-] .section-title {
        font-size: 32px;
    }
    .section-1 {
      padding-top:135px;
    }
    .youtube-area {
        height:320px;
    }
    .section-1 .degital-book-container .book-list {
        gap: 50px 20px;
    }
    .section-1 .degital-book-container .book-list li {
        flex: 1 0 40%;
    }
    .section-3 .download-container .download-list h3 {
        font-size:24px;
    }
    .section-3 .download-container .download-list ul {
        display:block;
    }
    .section-3 .download-container .download-list ul li {
        margin-bottom:30px;
    }
    .section-3 .download-container .download-list ul li figure img {
        height:240px;
    }
    .seciton-4 .relevant-container .site-list {
        height:auto;
        padding:15px;
        gap:15px 15px;
    }
    .seciton-4 .relevant-container .site-list li {
        flex: 1 1 40%;
    }
    .footer .company-info span + span {
        margin-left: 0;
    }
    .profile-container {
        padding:30px 15px;
    }
    .profile-container .profile-text {
        font-size: 16px;
    }
    .tab-container {
        margin-top:30px;
    }
    .tab-container .tabs li {
        font-size:20px;
    }
    .tab-container .tab-content-wrap .tab-content {
        padding:30px 15px 15px;
    }
    .tab-container .tab-content-wrap .tab-content .content-info {
        display:block;
    }
    .tab-container .tab-content-wrap .tab-content .content-info .thumb {
        margin-right:0;
        margin-bottom:30px;
    }
    .tab-container .tab-content-wrap .tab-content .content-info .content-detail dl dd {
        margin-top:10px;
        font-size:16px;
    }
    .tab-container .tab-content-wrap .tab-content .content-character {
        padding:15px;
        margin-top:30px;
    }
    .tab-container .tab-content-wrap .tab-content .content-character dl dd {
        margin-top:10px;
        font-size:16px;
    }
    .book-list-style ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .book-list-style ul li:nth-child(3n - 2)::before {
        display:none;
    }
    .book-list-style ul li:nth-child(2n - 1)::before {
        position:absolute;
        left:-8px;
        top:180px;
        z-index:-1;
        content:'';
        display:block;
        width:calc(100% * 2 + 15px * 1 + 24px);
        height:100px;
        background: url(../images/bg/bg-rack.png) 0 100% no-repeat;
        background-size: 100% auto;
    }
    .book-list-style ul li figcaption {
        max-width:140px;
    }
    .user-info .btn-way {
        width: 200px;
        height: 58px;
        margin-left: auto;
        padding: 0 15px;
        font-size: 15px;
    }
    .user-info .btn-way::before {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    .comment-write-container {
        position:relative;
    }
    .comment-write-container .user-info {
        display:flex;
        align-items:center;
    }
    .comment-write-container .user-info input {
        flex: 1;
        width:100%;
    }
    .comment-write-container .comment-button-area {
        position:absolute;
        right:0;
        bottom:0;
        width:100%;
    }
    .comment-write-container .comment-button-area button {
        flex: 1;
    }
    .comment-write-container .comment-textfield {
        margin-bottom:60px;
    }
    .board-list ul li {
        flex: 0 1 calc(50% - 10px);
    }
    .board-list ul li .thumb {
        height: 120px;
    }
    .user-info .input-search button {
        right:10px;
        width:30px;
        height:30px;
    }
}
@media screen and (max-width:360px){
    .youtube-area {
        height:250px;
    }
    .section-1 .degital-book-container .book-list {
        display:block;
    }
    .section-1 .degital-book-container .book-list li {
        margin-bottom:50px;
    }
    .section-3 .download-container .download-list ul li figure img {
        height:180px;
    }
    .seciton-4 .relevant-container .site-list {
        display:block;
        text-align:center;
    }
    .seciton-4 .relevant-container .site-list li {
        margin:0 auto 15px;
    }
    .seciton-4 .relevant-container .site-list li:last-child {
        margin:0 auto;
    }
     .user-info .input-search {
        width:calc(100% - 75px);
    }
    .user-info .input-search input {
        padding:0 50px 0 10px;
    }
}