@media only screen and (min-width: 992px) {

    html { font-size: 16px;}
    html,body { width: 100%; height: 100%;}

}

@media only screen and (max-width: 991px) {
    /* tablet 미디어 쿼리 */
    html { font-size: 20px;}
    .wrap { margin: 0 auto; padding: 1.5rem; max-width: none; -ms-overflow-style: none;}
    body { -ms-overflow-style: none;}
    body::-webkit-scrollbar { display: none;}
    html header { padding-top: 0;}

    header { display: block; position: fixed; top: 0; left: 0; right: 0; padding: 0; z-index: 9999; background-color: #fff;}
    header h1 { float: left; margin: 1.5rem;}
    header .menuContainer { position: absolute; top: 0; right: 0; width: 50vw; height: 100vh; background-color: #fff; border-left: 1px solid #999; display: block; z-index: 999; right: -50vw; transition: .2s;}
    header .menuContainer nav > ul { margin: .2rem; margin-top: 5rem;}
    header .menuContainer nav > ul > li { float: none; border-bottom: 1px solid #999; margin-left: 0;
        margin: 0 ;
        padding: 0 ;
        font-size: 1rem;}
    header .menuContainer nav > ul > li button,
    header .menuContainer nav > ul > li a { color: #000; display: block; padding: 1rem; font-size: 1.2rem;}
    header .menuContainer nav > ul > li > ul { position: relative; background-color: transparent; border-radius: 0; padding: 0; transform: none; border: none; left: 0;}
    header .menuContainer nav > ul > li:first-child.on { 
        border-top: 1px solid #999;
    }
    header .menuContainer nav > ul > li.on > ul li { display: block; border-top: 1px solid #d1d1d1;}
    header .menuContainer nav > ul > li.on button { width: 100%; background-color: #f1f1f1; text-align: left;}
    header .menuContainer nav > ul > li.on a { padding-left: 2rem; color: #666; font-size: 1rem;}
    header .menuContainer.active .gUtils .menuBtn { background-image: url(../../images/ic_menuClose.png);}
    header .menuContainer.active { right: 0;}
    header .gUtils { position: absolute; top: 1rem; left: -11rem;}
    header .gUtils li button { margin-left: .5rem; }
    /*header .gUtils .lang { display: none;}*/
    header .gUtils .myPage,
    header .gUtils .myMenu { position: absolute;}
    header .gUtils .myMenu { left: calc(100% + 2rem);}
    header .gUtils .myPage { background-size: 80%; left: calc(100% + 1rem);}
    header .gUtils .search { background-image: url(../../images/ic_searchB.png); background-size: 60% auto;}
    header .gUtils .menuBtn { display: block; background-image: url(../../images/ic_menu.png); background-size: 60% auto;}
    header 

    .cbCnt .wrapItem.radioCustom { flex-wrap: wrap; justify-content: flex-start;}

    .modal-content.searchModal .modal-body { padding-left: 2rem; padding-right: 2rem;}

    /* design CSS */
    .flexTab { flex-wrap: wrap; justify-content: flex-start;}
    .flexTab .tablink { flex: none;}

    .layout-01 .right-content-area {
        width: 100%;
    }
    
    .layout-01 .left-menu-area {
        display:  none;
    }

}

@media only screen and (max-width: 767px) {
    /* 스마트폰 미디어 쿼리 */
    html { font-size: 14px;}
    html .wrap { margin-top: 6rem;}
    html main,
    html main.cbCnt { padding-top: 0;}
    html .colS { width: auto;}

    .login .loginForm { max-width: none;}

    #layout-main {
        margin: 30px auto 30px;
        padding-bottom: 0px;
    }

    html .wrap.index { margin-top: 3rem;}
    .index header h1 { display: none;}
    .index main::before { content: ""; position: absolute; width: 40%; height: 15rem; top: 0rem; left: 50%; transform: translateX(-50%); background: url(../../images/mobile_index_logo.png) no-repeat center / contain;}

    .index main h2 { text-align: left;}
    
    .index main .changbiApply { flex-direction: column; padding-top: 40%; justify-content: center; align-items: center; margin-bottom: 1rem; background: url(../../images/mobile_big_copy.png) no-repeat center top / auto 65%;}
    .index main .changbiApply > img { display: none;}
    .index main .changbiApply .mainBtn { margin-top: 2rem; width: 100%;}
    .index main .mainItem p { text-align: left;}
    .index main .mainItem p.txSans.sizeX { text-align: center;}

    .index main .weekly { background: none; padding: 0;}
    .index main .weekly h2 { font-size: 1.25rem;}
    .index main .weekly h2 sup,
    .index main .weekly .weekInfo { display: none;}
    .index main .weekly h2 .badge { vertical-align: bottom;}

    footer .companyInfo { text-align: left;}

    .cbCnt .cntList h3 { text-align: left; margin-bottom: 2rem;}
    .cbCnt .selWay.coupon .outlineBtn { width: 100%;}
    .cbCnt .basicList.bookList { display: flex; flex-wrap: wrap; justify-content: space-between;}
    .cbCnt .basicList.bookList li { float: none; width: 47.5%; margin: 0 0 2rem 0 !important;}
    .cbCnt .intro.cb h2 > span,
    .cbCnt .intro.cb h2 > span sub{ line-height: 1.3em;}

    .cbCnt .week.type01 .mailing,
    .cbCnt .week.type02 .mailing { flex-direction: column; align-items: flex-start;}
    .cbCnt .week.type01 .mailing .thumPic,
    .cbCnt .week.type02 .mailing .thumPic { order: 1; width: 100%; margin-left: 0;}
    .cbCnt .week.type01 .mailing .sizeX,
    .cbCnt .week.type02 .mailing .sizeX { order: 2; margin-top: 1rem; align-self: center;}
    .cbCnt .week.type02 .mailing .sizeX { width: auto ! important;}

    .cbCnt .orderInfo .wrapItem.Read > img { width: 100%; margin-bottom: 2rem;}
    .cbCnt .orderInfo .wrapItem.Read > img + .flex1,
    .cbCnt .orderInfo .wrapItem.Read .colItem select { width: 100%; margin: 0;}
    .cbCnt .orderInfo .wrapItem.Read .wrapItem { justify-content: space-between;}
    .cbCnt .payProgress .basicList { width: 100%;}

    .cbCnt .bookCnt.disable .modalFoot { width: 70%; flex-direction: column;}
    .cbCnt .writerIntro h3 { text-align: left; }

    .cbCnt .payConfirm { flex-direction: column;}
    .cbCnt .payConfirm .mainBtn { width: 100%; margin-top: 2rem;}

    footer > ul { padding-left: 0; padding-right: 0; flex-wrap: wrap; justify-content: flex-start;}
    footer > ul > li { margin-right: 4rem; margin-top: 2rem;}

    .modal-content { width: auto; margin: 0 1.5rem;}
    .modal-content.searchModal { width: 90%;}

    /* design CSS */
    main .mainBtn, 
    main .outlineBtn { padding-top: 1.5rem; padding-bottom: 1.5rem;}
    .containerChk { white-space: nowrap;}
    .wrapItem { flex-wrap: wrap; justify-content: flex-start;}
    .wrapItem .flex1,
    .wrapItem .flex2,
    .wrapItem .flex3 { flex: none;}
    .wrapItem .colItem { width: 100%; margin-bottom: 1rem;}
    .wrapItem.period { display: block;}
    .wrapItem.period > .containerChk { float: left;}
    .wrapItem.period .colItem { width: 45%; float: left; margin-right: 0;}
    .wrapItem.period label + .colItem { clear: left;}
    .wrapItem.period .colItem + .txSans { float: left; width: 10%; margin-right: 0 !important; text-align: center;}
    .wrapItem.period .colItem + .searchBtn { display: block; clear: both; margin: 0; width: 100%}

    section.cntList .listHead { clear: both; padding-top: 3rem; justify-content: space-between;}
    section.cntList .listHead > .txSans { width: 100%; margin-bottom: 1rem;}
    section.cntList .listHead > .colItem { width: 48%; margin-left: 0 !important;}
    
    .cntList .basicList.col-2 { display: block; border-color: #333;}
    .cntList .basicList.col-2 li { width: auto;}
    .cntList .basicList.col-2 li:nth-child(1),
    .cntList .basicList.col-2 li:nth-child(2) { border-top: none;}
    .cntList .basicList.col-2 li:last-child { border-bottom: none;}

    .main-Container__container {
		margin-top: 15rem;
	}

	.main-Container__container .main-Container__main+.main-Container__side {
		/*margin-top: 0px;*/
        padding-top: 10px;
        border-top: solid 1px #dddcdc;
	}

	.main-Container__container .main-Container__main, .main-Container__container .main-Container__side {
		display: block;
		width: auto;
		float: none;
	}

	.main-Container__side figure{
		display: none;
	}

	.main-Container__main .widget, .main-Container__side .widget {
		margin-bottom: 0px;
    }

    .Button-03 {
        display: block;
        height: 42px;
        padding-left: 25px;
        width: auto;
        line-height: 42px;
        font-weight: 400;
        font-size: 16px;
        border-radius: 10px;
        transition: .25s;
        margin: 20px;
    }

    .cntContent__body {
        padding: 15px 0 0;
    }
    .cntContent__body, .cntContent__content, .cntContent__more-wrap, .cntContent__msgbox {
        margin-bottom: 0px;
    }

    .cntContent__content.user-html div{
        padding-top: 20px;
        font-size: 1rem;
    }
}

@media only screen and (max-width: 480px) {
    /* 완전 오래된 폰을 지원한다면 사용할 미디어 쿼리 */
    .cbCnt .orderInfo .wrapItem.Read .wrapItem a { width: 100% !important; margin-top: 1rem;}
}

/* IE10 and IE11 CSS Hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* 핵을 사용할 일은 더이상 없을거 같습니다. */
}