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

    html { font-size: 1em;}
    html,body { width: 100%; height: 100%;}
	.banner_dsktp {
        display: block;
    }

    .banner_mobile {
        display: none;
    }

}

@media only screen and (max-width: 991px) {
    /* tablet 미디어 쿼리 */
    html { font-size: 1em;}
    .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: 1rem; margin-top: 5rem;}
    header .menuContainer nav > ul > li { float: none; border-bottom: 1px solid #999; margin-left: 0;}
    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;}
    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;}
    header .menuContainer nav > ul > li.on a { padding-left: 2rem; color: #666;}

    header nav > ul > li.firstmenu.on > ul {display: block; transform: translateX(-50%); }

    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: block;  background-size: 70% auto;  }
    header .gUtils .myPage,
    header .gUtils .myMenu { position: absolute;}
    header .gUtils .myMenu { left: calc(100% + 2rem); width: 100%}
    header .gUtils .myPage { background-size: 80%; left: calc(100% + 1rem);}
    header .gUtils .search { background-image: url(../images/ic_searchB.png); background-size: 70% 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: inherit;
        justify-content: flex-start;
    }
    .flexTab .tablink { flex: none;}
    header .menuContainer .clearFix .logintext {display: block;}

    .about-visual {
        background: url(/MCManAttachment/GetAttachmentImage?id=6155&thumbsize=640) no-repeat 50%;
    }
    .history-visual {
        background: url(/MCManAttachment/GetAttachmentImage?id=6154&thumbsize=640) no-repeat 50%;
    }
    .talk-visual {
        background: url(/MCManAttachment/GetAttachmentImage?id=6156&thumbsize=640) no-repeat 50%;
    }

    .txSans .hanja {font-size: 10pt;}
    .txSans .editor_email {font-size: 10pt;}

    header {
        transform: translateY(70px);
    }

    .banner_mobile {
        display: none;
    }

    .cbCnt .cntList .basicList.bookList.writing img {
        box-sizing: unset;
        width: 160px;
        height: auto;
    }
}

@media only screen and (max-width: 820px) {

    .cbCnt .selWay.coupon .outlineBtn {
        flex-direction: column;
        height: 10vh;
        width: 100%;
        margin: 10px 0px;
    }

    .modal-body .selWay.coupon .outlineBtn {
        flex-direction: column;
        height: 10vh;
        margin: 10px 0px;
        border: none;
        width: 100%;
    }
}

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

    .login .loginForm { max-width: none;}
    .login .txSans.sizeXXX {    font-size: 2rem;    }
    

    html .wrap.index {/* margin-top: 12rem; *//*25rem;*/padding-top: 18rem;}
    .index header h1 { display: none; transform: translateY(100px);}
    /*.index main::before { content: ""; position: absolute; width: 50%; height: 15rem; top: 8rem; 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: 17pt;}
    .index main .weekly h2 sup,
    .index main .weekly .weekInfo { display: none;}
    .index main .weekly h2 .badge { vertical-align: bottom;}
    .index main .weekly .firstWeekly { display: block;}


    .cbCnt .week.type02 h2 sup,
    .cbCnt .week.type02 .weekInfo { display: none;}
    .cbCnt .week.type02 h2 { font-size: 1.8rem;}
    

    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 .cntList .basicList.bookList.read li {
        float: none;
        width: 40%;
        margin: 0 1rem 2rem 1rem !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 { width: 50vw; margin-bottom: 2rem; height: auto;}
    .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;*/ margin:auto;}
    footer > ul > li { /*margin-right: 4rem; margin-top: 2rem;*/margin-right: 0rem; margin-top: 2rem;}

    .modal-content { width: auto; margin: 0 1.5rem;}
    .modal-content.searchModal { width: 90%; min-width:auto;}
    .modal-body .selWay.coupon .outlineBtn .cpImage {
        position: absolute;
        width: 300px;
        height: 90px;
    }

    .modal-footer {
        display: block;
        border-top: 1px solid #000;
        text-align: -webkit-center;
    }

    /* 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;*/justify-content:center;}
    .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;}

    .cntList ul.basicList a .title { display: block; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}

    .cbCnt .cntList .basicList.bookList li { height: auto;text-align: center;}

    .cbCnt > h5 {        margin: 2rem 0 -2rem 0;    }

    .cbCnt > h5 > span > span {            padding: 0.1rem 1rem;            border: 1px solid #000;            border-radius: 1rem;        }

    .cbCnt .cntContainer h5 span span {        font-size: 14px;        padding: 0.5rem 1rem;        border: 1px solid #000;        border-radius: 1.3rem;        font-weight: 400;    }

    .cbCnt .cntContainer {
        font-size: 1.3em;
        line-height: 2.8rem;
        padding-left: 0; 
        padding-right: 0;
    }

    .cbCnt .cntList .basicList.bookList.read .txSans.sizeX {
    font-size: 1em;
	box-sizing: content-box;
    }

    .cntList ul.basicList li {
        height: auto;
        margin-top: auto;
    }

    .index main .mainItem ddd {
        width: 100%;
    }

    mobileheader aa a{
        content: "";
        position: absolute;
        width: 50%;
        height: 5rem; /*15rem;*/
        top: 5rem;
        left: 50%;
        transform: translate(-50%, 40%);
        background: url(../images/mobile_index_logo.png) no-repeat center / contain;
    }

    .about-visual, .history-visual, .talk-visual {
        height: calc(100vh - 250px);
    }

    .about-visual{
        background: url(/MCManAttachment/GetAttachmentImage?id=6155&thumbsize=520) no-repeat 50%;
    }

    .history-visual{
        background: url(/MCManAttachment/GetAttachmentImage?id=6154&thumbsize=520) no-repeat 50%;
    }

    .talk-visual{
        background: url(/MCManAttachment/GetAttachmentImage?id=6156&thumbsize=520) no-repeat 50%;
    }

    .cbCnt .cntContainer .history-visual .M-h2, .about-visual .M-h2 {
        font-size: 28px;
        line-height: 40px;
    }

    .cbCnt .cntContainer .history-visual .M-h1, .cbCnt .cntContainer .history-visual .M-h2, .about-visual .M-h2 {
        font-weight: 600;
        letter-spacing: -.01em;
        word-break: keep-all;
    }

    .cbCnt .cntContainer .history-visual .M-bigtext-400 {
        font-weight: 400;
    }

    .cbCnt .talk-visual .M-h2 {
        font-size: 28px;
        line-height: 40px;
    }

    .cbCnt .talk-visual .M-h1, .cbCnt .talk-visual .M-h2 {
        font-weight: 600;
        letter-spacing: -.01em;
        word-break: keep-all;
    }

    .cbCnt .talk-visual .M-bigtext-400 {
        font-weight: 400;
    }








    .cbCnt .cntContainer .history-visual .M-bigtext-400, .M-bigtext-600 {
        font-size: 16px;
        letter-spacing: normal;
        line-height: 26px;
    }

    .cbCnt .bookCnt .cntContainer .wp-caption.alignnone img {
        width: calc(600px - 80vw);
    }

    .cbCnt .bookCnt .cntContainer .wp-caption.aligncenter img{
        width: calc(600px - 80vw);
    }

    .cbCnt .bookCnt .cntContainer .wp-caption.alignleft img{
        width: calc(200px - 20vw);
    }

    .cbCnt .bookCnt .cntContainer .wp-caption.alignleft, .cbCnt .bookCnt .cntContainer .wp-caption.wp-caption.alignright{
        margin-right: -60px;
        width : 200px;
    }

    .cbCnt .bookCnt.week .cntContainer .wp-caption.alignleft{
        margin-right: 20px;
    }

    .cbCnt .bookCnt .cntContainer .wp-caption.alignright img{
        width: calc(200px - 20vw);
    }



    .cbCnt .cntList .basicList.order .clearFix .sizeXX, .sizeX{
        font-size: 1.2rem;
    }

	.banner_dsktp {
        display: none;
    }

    .banner_mobile {
        display: block;
    }

    header {
        transform: translateY(130px);
    }

.txSans.reg {font-size:18px;}


    cbCnt .selWay.coupon .outlineBtn {
        flex-direction: column;
        height: 10vh;
        width: 300px;
        margin: 10px 0px;
    }

    .cbCnt .selWay.coupon .outlineBtn .cpName {
        text-align: left;
        line-height: 2.2rem;
        margin: 0px 40px 0.4rem -30px;
        position: absolute;
        margin-bottom: 40px;
        width: 200px;
        font-size: 18px;
    }

    .cbCnt .selWay.coupon .outlineBtn .cpAmount {
        position: absolute;
        margin-bottom: 0px;
        width: 200px;
        text-align: right;
        font-size: 20px;
    }

    .cbCnt .selWay.coupon .outlineBtn .cpEndData {
        position: absolute;
        margin-bottom: -40px;
        width: 200px;
        text-align: right;
        color: blue;
        font-size:12px;
    }

    .cbCnt .selWay.coupon .outlineBtn .cpImage {
        position: absolute;
        width: 300px;
        height: 100px;
    }

    

}

@media only screen and (max-width: 600px) {

    mobileheader aa a{
        transform: translate(-50%, 40%);
    }

    header {
        transform: translateY(90px);
    }
}

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

    html { font-size: 0.8em;}

    .index main .mainItem dt {
        font-size: 1.6rem;
    }

    .cbCnt .cntContainer {
        font-size: 1.5em;
        line-height: 1.8em;
        padding-left: 0;
        padding-right: 0;
    }

    .cbCnt .cntContainer h5 span span {        font-size: .81em;        padding: 0.5em 1em;        border: 1px solid #000;        border-radius: 1.3em;        font-weight: 400;    }

    .cbCnt .cntList .basicList.bookList .txSans.sizeX {
        font-size: 1.2rem;
    }

    .cbCnt .cntList .basicList.bookList.read .txSans.sizeX {
        font-size: 1em;
        /* box-sizing: content-box; */
        display: block;
    }

    .cbCnt .cntList .basicList.bookList li a {
        text-align: -webkit-center;
        display: block;
        padding-right: 0;
    }

    .cbCnt .cntList .basicList.bookList li a img{
        max-width: 90%;
    }

    .cbCnt .cntList .flexTab .moveScrollRight, .cbCnt .cntList .flexTab .moveScrollLeft {
        width: 6em;
        height: 6em;
    }

    footer > ul { place-content: center;}
    footer > ul > li {
        margin: auto;
    }

    .login .txSans.sizeXXX {    font-size: 1.5rem;    }

    .txSans.reg {font-size:15px;}

    .a2a_kit.a2a_kit_size_32.a2a_default_style {
        margin-bottom: 20px;
    }
}

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