@charset "utf-8";

/* #wrap{ background:red; } */

/** Tablets **/
@media screen and (max-width:1024px){
    /* #wrap{ background:orange; } */

    /* rw */
    .rw-pc{ display:none !important; }/* pc */
    .rw-mo{ display:block !important; }/* tablet, mobile */

    /* layout */
    .full-layout{ padding:0 16px; }

    .snb-container{ flex-direction:column; }
    .snb-container .snb-layout{ width:100%; margin:0; }
    .snb-container .snb-layout .snb-header{ display:none; }
    .snb-container .snb-layout .snb-content{ padding:0 16px; background-color:#F5F6FA; border-left:none; border-right:none; }
    .snb-container .content-layout{ width:100%; flex:none; }

    .fixed-bottom{ margin-top:40px; }
    .fixed-bottom > .content-layout{ padding:10px 16px; }
    .fixed-bottom > .content-layout .left{ display:none; }
    .fixed-bottom > .content-layout .right{ width:100%; }
    .fixed-bottom > .content-layout .right .btn-layout{ margin:0 -4px 0 auto; }
    .fixed-bottom > .content-layout .right .btn-layout > *{ margin:0 4px; flex:1; }
    .fixed-bottom .btn-layout .btn-L .rw-mo{ display:inline-block !important; }

    .list-card .price-area{ letter-spacing:-.08em; align-items:flex-end; }
    .list-card .price-area [class^='color-']{ margin-right:4px; font-size:16px; }
    .list-card .price-area [class^='color-'].percent{ font-size:20px; }
    .list-card .price-area .price{ font-size:13px; }
    .list-card .price-area .price del{ font-size:10px; }

    .pdf-layout{ height:500px; }

    /* list */
    .list-type1 > ul{ margin:-6px -4px 0; }
    .list-type1 > ul > li{ width:calc( 25% - 8px ); margin:6px 4px; }

    .list-type2{ margin:0 auto 24px; }

    .list-card > ul{ margin:-6px -4px 0; }
    .list-card > ul > li{ width:calc( 25% - 8px ); margin:6px 4px; }

    .slide-card .list-card > ul > li{ width:calc( 30% - 8px ); }
    .slide-card .swiper-btn{ display:none; }

    .list-review > ul{ width:calc( 100% + 8px ); margin:-6px -4px 0; display:flex; flex-wrap:wrap; }
    .list-review > ul > li{ width:calc( 33.33% - 8px ); margin:6px 4px; }

    .slide-review .swiper-review > ul.swiper-wrapper > li.swiper-slide{ margin-right:8px; }

    .list-curri > dd .btn-area{ padding:0; }

    .toggle-type1 > dt > a{ padding-right:40px; font-size:14px; }
    .toggle-type1 > dt > a:after{ width:16px; height:16px; margin-top:-8px; right:16px; }
    .toggle-type1 > dd{ font-size:12px; }

    /* .tit-board .tit-side{ margin-top:40px; position:relative; }
    .tit-board .btn-write{ width:100%; } */

    /* view */
    .view-container .tit-dep3.tit-border{ margin:40px auto 16px; }
    .view-container .list-about{ margin-top:8px; }

    .view-type1 .tit-dep3{ font-size:24px; }
    .view-type1 .video-layout{ margin-top:16px; }
    .view-type1 .list-images > li{ margin-top:16px; }
    .view-type1 .content-area{ margin-top:16px; }
    .view-type1 .file-area{ margin-top:16px; }
    .view-type1 .file-area > li{ margin-top:4px; }
    
}

/** mobiles **/
@media screen and (max-width:767px){
    /* #wrap{ background:yellowgreen; } */

    .flex-area{ margin:-4px -4px 0; }
    .flex-area > *{ margin:4px; }

    /* rw */
    .rw-pt{ display:none !important; }/* pc, tablet */
    .rw-sm{ display:block !important; }/* mobile */

    .mo-block{ display:block; }

    .tit-border .tit-side.tit-link{ font-size:14px; }

    /* ico */
    [class^='ico']{ width:18px; height:18px; }/* 18 36 120 */
    .ico-share, .ico-ellipsis-v{ width:24px; height:24px; }

    .ico-noti-s-gy{ width:12px; height:12px; }

    .ico-fb-m{ width:24px; height:24px;  }
    .ico-inst-m{ width:24px; height:24px; }
    .ico-ytb-m{ width:24px; height:24px; }
    .ico-blog-m{ width:24px; height:24px; }
    .ico-cafe-m{ width:24px; height:24px; }
    .ico-home-m{ width:24px; height:24px; }
    .ico-external-link-m{ width:24px; height:24px; }

    .ico-kakao-l{ width:48px; height:48px; }
    .ico-fb-l{ width:48px; height:48px; }
    .ico-blog-l{ width:48px; height:48px; }
    .ico-link-l{ width:48px; height:48px; }
    .ico-exclamation-cir-l{ width:48px; height:48px; }

    /* .ico-app-stroe{ width:100px; height:30px; }
    .ico-google-play{ width:100px; height:30px; } */
    .ico-logo-wt{ width:77px; height:20px; }

    .ico-logo-wt{ width:104px; height:24px; }
    .ico-logo{ width:104px; height:24px; }
    
    /* sticker */
    .sticker-area{ margin:-2px -2px 0; }
    .sticker-area > *{ margin:2px; padding:0 4px; }
    .sticker-L > *{ height:24px; line-height:22px; padding:0 5px; font-size:12px; font-weight:400; }

    /* btn */
    .btn, .btn:active{ height:40px; line-height:38px; padding:0 16px; }
    .btn-XS, .btn-XS:active{ height:26px; line-height:24px; padding:0 8px; font-size:10px; }
    .btn-S, .btn-S:active{ height:30px; line-height:28px; font-size:12px; }
    .btn-L, .btn-L:active{ width:100%; min-width:0; height:46px; line-height:44px; padding:0 16px; }
   
    /* input, select, textarea */
    .input-text input:not(.btn){ height:40px; line-height:38px; font-size:14px; }
    .input-search input:not(.btn){ padding-right:48px; }
    .input-search .btn-search{ right:8px; }
    .toggle-radio{ width:calc( 100% - 8px ); flex:none; }

    .input-checkbox{ line-height:22px; padding-left:26px; font-size:14px; }
    .input-checkbox .ico-checkbox{ width:18px; height:18px; top:3px; }

    .input-checkbox-sort{ line-height:26px; }
    .input-checkbox-sort .ico-checkbox{ top:4px; }

    .input-radio{ line-height:22px; padding-left:26px; font-size:14px; }
    .input-radio .ico-radio{ width:18px; height:18px; top:2px; }

    .toggle-radio span{ height:40px; line-height:38px; font-size:14px; }

    .select select{ height:40px; line-height:38px; font-size:14px; }
    .select-S select{ height:30px; line-height:28px; font-size:12px; }
    .select-sort select{ height:24px; line-height:26px; }

    .textarea textarea{ width:100%; padding:16px; background-color:#fff; border:none; border:1px solid #C4C4C4; font-size:14px; -webkit-box-shadow:none; box-shadow:none; vertical-align:middle; resize:none; overflow:auto; -webkit-appearance:none; }
   
    /* layout */
    .form-layout{ max-width:none; }

    .fixed-bottom > .content-layout .right{ display:block; }
    .fixed-bottom > .content-layout .right .btn-layout{ margin:0 -4px; }

    .user-layout > .cont-area{ margin-left:8px; }

    .btn-layout{ margin-top:24px; }
    .btn-right{ margin-top:8px; }

    .no-data{ min-height:0; }

    /* sort */
    .sort-list{ margin-top:24px; }

    /* slide */
    .swiper .swiper-pager .swiper-pagination-bullet{ width:8px; height:8px; }

    /* tab */
    .tab-type1 > ul > li > *{ font-size:14px; }

    /* tit */
    .tit-dep1{ margin-top:40px; font-size:24px; }
    .tit-dep1 > small{ margin-top:8px; }
    .tit-dep2{ font-size:20px; }
    .tit-dep3{ font-size:18px; }
    .tit-dep3 > small{ font-size:15px; }
    .tit-dep4{ font-size:16px; }

    .tit-border{ padding-bottom:8px; }
    .tit-border .tit-side.tit-link{ font-size:12px; }

    /* txt */
    .txt-info{ padding-left:14px; }
    .txt-info .ico-noti-s-gy{ width:12px; height:12px; top:2px; }

    /* tab */
    .tab-type2{ margin:16px auto; }
    .tab-type2 > ul > li > *{ height:30px; line-height:28px; font-size:14px; }

    /* list */
    .list-type1{ margin:16px auto; }
    .list-type1 > ul > li{ width:calc( 50% - 8px ); }

    .list-type2 > ul > li{ font-size:12px; }
    .list-type2 > ul > li .btn-layout{ margin-top:16px; }

    .list-card{ margin:16px auto; }
    .list-card > ul > li{ width:calc( 50% - 8px ); }
    .list-card > ul > li > a .tit-dep4{ height:48px; line-height:24px; }
    .list-card > ul > li .site{ font-size:11px; }

    .list-card .price-area [class^='color-']{ font-size:15px; }
    .list-card .price-area [class^='color-'].percent{ font-size:18px; }
    .list-card .price-area .price{ font-size:12px; }

    .slide-card{ margin:0 -16px 0 0; }
    .slide-card .list-card > ul > li{ width:calc( 48% - 8px ); }

    .list-review{ margin:16px auto; }
    .list-review > ul > li{ width:calc( 100% - 8px ); }

    .list-sns{ margin:-8px -4px 0; }
    .list-sns > a{ width:calc( 33.33% - 8px ); margin:8px 4px; }
    .list-sns > a > .icon{ width:48px; height:48px; }
    .list-sns > a > .tit{ margin-top:8px; font-size:12px; }

    .list-curri > dd .tit-area{ padding-left:26px; }
    .list-curri > dd .tit-area .icon{ top:3px; }

    /* table */
    .table-type1{ margin-top:16px; }
    .table-type1 > ul > li{ padding:16px 0; flex-wrap:wrap; }
    .table-type1 > ul > li.thead{ display:none; }
    .table-type1 > ul > li.thead + li{ padding-top:0; }
    .table-type1 > ul > li > div{ width:auto; padding:0; font-size:12px; }
    .table-type1 > ul > li > .data-center{ padding:0 4px; color:#828282; align-items:flex-start; order:3; }
    .table-type1 > ul > li > .data-num{ width:auto; font-size:0; align-items:flex-start; order:2; }
    .table-type1 > ul > li > .data-tit{ width:100%; margin-bottom:4px; flex:none; order:1; }
    .table-type1 > ul > li > .data-tit > .tit{ font-size:16px; }
    .table-type1 > ul > li.thead > .data-check, .table-type1 > ul > li > .data-check{ width:26px; margin-left:auto; order:4; }

    .table-type2 table tr th, .table-type2 table tr td{ padding:16px 8px; font-size:12px; }
    .table-type2 table tr td{ font-size:14px; }

    /* form */
    .form-type1 > dl > dt{ font-size:12px; }
    .form-type1 .btn-area{ margin-top:8px; align-items:flex-start; flex-direction:column; }
    .form-type1 .btn-area .txt-info{ margin-top:8px; margin-left:0; }
    .form-type1 ul.file-area > li{ font-size:12px; }
    .form-type1 ul.file-area > li > a .ico-close-cir-s{width:12px; height:12px; }

    /* view */
    .view-container{ padding-top:0; }
    .view-container .list-about > li{ font-size:14px; }
    .view-container .list-about > li .tit{ width:60px; font-size:12px; }

    .view-type1 .tit-dep3{ margin-bottom:4px; }
    .view-type1 .content-area{ font-size:14px; }
    .view-type1 .hash-area span{ font-size:12px; }
    .view-type1 .file-area > li a{ font-size:12px; }
    .view-type1 .file-area > li a .ico-download-s{ width:12px; height:12px; top:0; }
}

/** mobiles xs **/
@media screen and (max-width:360px){
    /* #wrap{ background:green; } */
    #wrap{ font-size:12px; }

    .list-card .price-area [class^='color-']{ font-size:12px; }
    
}