/* layout CSS a*/
.wrap { max-width: 900px; height: 100%; margin: 0 auto;}
main { padding-top: 5.125rem; padding-bottom: 5.125rem;padding-left: 1.5rem;padding-right: 1.5rem;}

/* heaer CSS */
header { width: 100%; height: 5.625rem; padding-top: 2.5rem; display: flex; justify-content: space-between; align-items: center;}
header h1 a { display: block; width: 5rem; height: 3.125rem; background: url(../images/logo.png) no-repeat center / 4.375rem auto;}
header .menuContainer { flex: 1; display: flex; justify-content: space-between; align-items: center;}
header nav > ul > li,
header .gUtils > li { float: left;}
header nav > ul > li { margin-left: 2rem; position: relative;}

header nav > ul > li > ul { display: none; /* padding-left: 1rem; padding-right: 1rem; */ position: absolute; left: 50%; transform: translateX(-50%); bottom: -180%; background-color: #000; white-space: nowrap; border-radius: 2rem;}
header nav > ul > li > ul li { display: inline-block;}
header nav > ul > li > ul li a { display: block; padding: .5rem 1rem; color: #fff;}
header nav > ul > li.on > ul { display: block;}
header nav > ul > li.firstmenu.on > ul {display: block; transform: translateX(-5%); }

header .gUtils > li button { display: block; width: 3rem; height: 3rem; background: #fff no-repeat center / 1.5rem auto;}
header .gUtils .search { background-image: url(../images/ic_search.png);}
header .gUtils .myPage { background-image: url(../images/ic_user.png);}
header .gUtils .lang { background-image: url(../images/ic_lang.png);}
header .gUtils .menuBtn { display: none; background-image: url(../images/ic_menu.png);}
header .menuBtn { display: none;}

sup {
    font-size: 75%;
    color: #80bfff;
text-decoration: underline;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup a{color: #3086df;}

sup {
    top: -.5em;
}

.wp-caption.aligncenter {margin: auto;}

.langContainer { position: relative;}
.langContainer > ul { display: none; position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); border: 1px solid #000; background-color: #fff; padding: .25rem 1rem; border-radius: 1rem; z-index: 1;}
.langContainer > ul li { padding: .25rem; border-bottom: 1px solid #ccc;}
.langContainer > ul li:last-child { border-bottom: none;}
.langContainer > ul li a { font-weight: 700;}
.langContainer.on > ul { display: block;}

.myMenu { position: relative;}
.myMenu input[type=checkbox] { display: none;}
.myMenu input[type=checkbox] + label {  height: 3rem; line-height: 3rem; padding-right: 2rem; background-image: url('../images/open.png'); background-repeat: no-repeat; background-position: right center; background-size: auto 1.3rem; cursor: pointer;width: 6rem; overflow: hidden;}
.myMenu input[type=checkbox] + label > span { font-weight: bold;}
.myMenu input[type=checkbox]:checked + label { background-image: url('../images/close.png');}
.myMenu .menuitems { display: none; position: absolute; top: 3rem; border: 1px solid #000; background-color: #fff; padding: .25rem 1rem; border-radius: 1rem; z-index: 1;}
.myMenu .menuitems li { padding: .25rem; border-bottom: 1px solid #ccc;}
.myMenu .menuitems li:last-child { border-bottom: none;}
.myMenu .menuitems li a { font-weight: 700;}
.myMenu input[type=checkbox]:checked ~ .menuitems { display: block;width: 100px;}

/* index CSS */
.index main h2 { text-align: center; margin-bottom: 1em;}
.index main .mainItem { display: flex; flex-direction: column; position: relative; text-align: center;font-size: 1.125rem;}
.index main .mainItem .mainImg { order: -1;}
.index main .mainItem dt { font-size: 2.125rem; padding-top: 3.5rem; padding-bottom: 1rem; line-height: 1em; letter-spacing: -0.05em
  ;}
.index main .mainItem p { margin-top: 2rem;}
.index main .mainItem ddd { text-align: justify; width: 90%; margin: auto;}
.index main .cntList h2 { padding-top: 1rem;}
.index main .cntList h2 .badge { margin-left: .5rem; vertical-align: middle;}

.index main .cntList .title {  text-align: left;}

.index main .changbiApply { margin-top: 5rem; margin-bottom: 6rem; display: flex; justify-content: space-between; align-items: flex-end;}
.index main .changbiApply img { /*height: 14.25rem;*/ height: calc(( 14.25rem * 2 )/ 3);}
.index main .changbiApply .mainBtn { /*padding: 1rem 2rem; width: auto;*/
  width: auto;
  display: inline-block;
  height: 42px;
  padding: 0 30px;
  background: url(/button1-download.svg) no-repeat left 20px top 8px;
  background-color: #2c3338;
  line-height: 42px;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  border-radius: 10px;
  transition: .25s;}

.index main .weekly { margin-top: 6rem; padding: 1rem 1rem 2rem; background-color: #f5f9fe;}
/*.index main .weekly h2 { margin-top: 1rem; font-size: 3rem; padding-top: 0; text-align: left; color: #3982e9;}*/
.index main .weekly h2 { margin-bottom: 1.5rem; text-align: left;    padding: 1.5rem 1rem 2rem;    line-height: 1em;    color: #3982e9;    font-size: 48px;    font-weight: 600;}
.index main .weekly h2 sup { display: inline-block; vertical-align: middle; /*margin-top: -1rem; font-size: 1rem;*/ letter-spacing: 0; line-height: 1.3em; color: #aac9f5; font-size: 12px;}
.index main .weekly .weekInfo .thumImg { float: right; width: 255px; margin-bottom: 3rem;     text-align: center;margin-left: 50px;}
.index main .weekly .weekInfo { margin-bottom: 3rem;}
.index main .weekly .weekInfo li { margin-bottom: 1rem;}
.index main .weekly .weekInfo li.txBlue {  display: inline-block;  border-top: 3px solid #3982e9;  font-size: 18px;}
.index main .weekly .weekInfo .sizeXX { line-height: 1.3em;}
.index main .weekly .weekInfo + .basicList { clear: both; border-color: #3982e9;}
.index main .weekly .weekInfo + .basicList li { border-color: #3982e9;}
.index main .weekly .weekInfo + .basicList li:last-child { border: none;}
.index main .weekly .weekInfo + .basicList li a .title,
.index main .weekly .weekInfo + .basicList li a { color: #3982e9;}

.index main .weekly .firstWeekly { display: none;}


.index main .weekly .sizeX {
    font-size: 1.3rem;
}

.index main .weekly .sizeXX {
    font-size: 1.5rem;
}

/* footer CSS */
footer { padding-bottom: 5rem; font-size: .875rem; text-align: center; border-top: 1px solid #000;}
footer h3 { margin-top: 1rem; margin-bottom: .5rem;}
/*footer > ul { display: flex; justify-content: space-between; padding-left: 8rem; padding-right: 8rem; margin-top: 2rem; margin-bottom: 2rem; line-height: 1.5rem;}*/
footer > ul { display: flex; justify-content: space-evenly; padding-left: 8rem; padding-right: 8rem; margin-top: 2rem; margin-bottom: 2rem; line-height: 1.5rem;}
footer .companyInfo { margin-top: 3rem; letter-spacing: -0.04em; line-height: 1.7rem;}
footer .companyInfo small { display: block; margin-top: 2rem;}

/* login CSS */
.login { text-align: center;}
.login .sizeXXX { font-size: 3rem;}
.login .loginForm { max-width: 400px; margin: 5rem auto;}
.login .loginForm label { margin-top: 1rem;}
.login .loginForm div:first-child { margin-bottom: 3rem;}
.login .loginForm .containerChk { display: block; margin-top: 1.8rem; margin-bottom: 4rem;}

/* Subpage Design CSS */
main .mainBtn,
main .outlineBtn { padding: 1rem; width: 100%;}
main .outlineBtn1 { padding: 1rem; width: 100%; background: transparent; border: 1px solid #000;}
main .mainBtn + .outlineBtn { margin-top: 1.5rem;}
main p a { text-decoration: underline;}
.colS { width: 400px; margin: 5rem auto;}
main.cbCnt { padding-top: 4rem;}

.stepHead { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem;}
.stepHead .stepBar { text-align: right;}
.stepHead .stepBar .step { font-weight: 500; font-size: 1rem; color: #000;}
.stepHead .stepBar .bar { position: relative; border: 1px solid #000; width: 8rem; height: .7rem;}
.stepHead .stepBar .bar::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 33.3333%; background: #000;}
.stepHead .stepBar .bar.step2::after { width: 66.6666%;}
.stepHead .stepBar .bar.step3::after { width: 100%;}
.stepHead + form h3 { margin-top: 1.5rem; }
.stepHead + form .wrapItem:last-of-type,
.stepHead + form .inputWrap:last-of-type,
.stepHead + form .inputWrap:last-of-type + p { margin-bottom: 4rem; }
.stepHead + form h3 ~ label,
.stepHead + form div + label { margin-top: 1rem;}
.stepHead + form select:first-of-type + label { margin-top: 1rem;}
.formFoot { margin-top: 2rem; text-align: center;}
.formFoot button,
.formFoot a { text-decoration: underline;}

.selWay { margin-bottom: 4rem;}
.selWay .outlineBtn { width: 48%; height: 20rem;}
.wrapItem.address > * { flex: 1;}
.wrapItem.address .outlineBtn { margin-left: 1rem;}

.userOK h2 { margin-bottom: .5rem;}
.userOK a { margin-top: 1.5rem; margin-bottom: 1.5rem; padding: 1rem;}
.userOK a.mainBtn { margin-top: 4rem;}

.cbCnt h2 { color: #000; margin-bottom: 2rem;}
.cbCnt .cntList { margin-bottom: 4rem;;}
.cbCnt .cntList .stepHead { justify-content: center;}
.cbCnt .selWay .outlineBtn { margin-top: 1rem; height: 15rem;}
.cbCnt > .clearFix:first-child .f-right { text-decoration: underline; margin-left: 1rem;}

.cbCnt .cntContainer h2,
.cbCnt .cntList h2 { text-align: center; margin-bottom: 5rem; line-height: 1.3em;}
.cbCnt .cntContainer h3 { text-align: center; margin-bottom: 1rem;}
.cbCnt .cntList h3 { margin-bottom: 1rem;}
.cbCnt .cntContainer h2 sub { display: block; margin: .5rem 0; font-size: 14pt;}
.cbCnt .cntList li { position: relative;}
.cbCnt .cntList li a + .outlineBtn { position: absolute; width: auto; right: 0; top: 50%; transform: translateY(-50%); padding: .7rem 1.5rem;}

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


.cbCnt .basicList.order { border: none;}
.cbCnt .basicList.order .noOrder { text-align: center;}
.cbCnt .basicList.order li { padding: 1.5rem 0; height: 15em;}
.cbCnt .basicList.order .thumnail { padding: 0; width: 13.125rem; height: 13.125rem; font-size: 0; background: #f3f3f3 url(../images/noImg.png) no-repeat center / 100% auto; border: 1px solid #000;text-align: center;}
.cbCnt .basicList.order dl { position: relative; margin-top: -0.5rem; margin-left: 15rem; min-height: 13.6rem; padding-bottom: 2.5rem;}
.cbCnt .basicList.order dl dt a,
.cbCnt .basicList.order dl dd { padding: .5rem 0; line-height: 1em;}
.cbCnt .basicList.order dl dt a { line-height: 1.3em;     font-size: 26px;}
.cbCnt .basicList.order dl dd:last-child { position: absolute; bottom: 0;    font-size: 20px;}

.cbCnt .orderInfo h2 { margin-bottom: 2rem;}
.cbCnt .orderInfo h2 > img { display: block; border: 1px solid #000; margin-bottom: 3rem;}
.cbCnt .orderInfo dl { line-height: 2rem; margin-bottom: 3rem;}
.cbCnt .orderInfo dl dt.f-left { width: 7rem;}
.cbCnt .orderInfo .basicList { margin-top: .5rem;}
.cbCnt .orderInfo .basicList li { padding: .4rem 0;height: auto;}
.cbCnt .orderInfo .extraPrice { padding-top: .5rem; padding-bottom: .5rem;text-align: right;}

.cbCnt .orderInfo .wrapItem.Read { margin-top: 4rem; margin-bottom: 4rem;}
/*.cbCnt .orderInfo .wrapItem.Read > img { width: 45%; border: 1px solid #000;}*/
.cbCnt .orderInfo .wrapItem.Read > img { height: 340px; border: 1px solid #000;}
.cbCnt .orderInfo .wrapItem.Read > .flex1 { margin-left: 2rem;}
.cbCnt .orderInfo .wrapItem.Read h2 { margin-top: .1rem; margin-bottom: 4rem; text-align: left;}
.cbCnt .orderInfo .wrapItem.Read h2 .sizeXX { line-height: 1.3em;}
.cbCnt .orderInfo .wrapItem.Read h2 sub { display: block; margin-top: 1rem; font-weight: 500; line-height: 1.5em;}
.cbCnt .orderInfo .wrapItem.Read .colItem { margin-top: 1.5rem;}
.cbCnt .orderInfo .wrapItem.Read .colItem select { width: auto; min-width: 15rem;}
.cbCnt .orderInfo .wrapItem.Read + h3 { text-align: left;}
.cbCnt .orderInfo .wrapItem.Read .wrapItem { margin-top: 3rem;;}
.cbCnt .orderInfo .wrapItem.Read .wrapItem .price { margin-right: 1rem;}
.cbCnt .orderInfo .wrapItem.Read .wrapItem .price .txSans { display: block;}
.cbCnt .orderInfo .wrapItem.Read .wrapItem .mainBtn { width: auto; padding-left: 2rem; padding-right: 2rem; white-space: nowrap;}


/*마이페이지 쿠폰*/
.cbCnt .selWay.coupon {
    margin-top: -2rem;
    margin-bottom:2rem;
}



.cbCnt .selWay.forOrder .outlineBtn { height: auto;}
/*.cbCnt .selWay.coupon .outlineBtn { align-items: flex-start; flex-direction: column; height: auto;}*/

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

/*.cbCnt .selWay.coupon .outlineBtn .cpName { align-self: stretch; text-align: left; line-height: 2.2rem; border-bottom: 1px solid #707070; margin-bottom: .4rem;}*/

    .cbCnt .selWay.coupon .outlineBtn .cpBox {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 300px;
        text-align: left;
        padding-left: 20px;
        margin-top: -10px;
    }

    .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;*/
        position:relative;
    }

    .cbCnt .selWay.coupon .outlineBtn .cpAmount {
        /*position: absolute;
        margin-bottom: 0px;
        width: 200px;
        text-align: right;*/
        position: relative;
    }

    .cbCnt .selWay.coupon .outlineBtn .cpType {
        /*position: absolute;
        margin-bottom: -40px;
        width: 200px;
        text-align: right;*/
        position: relative;
    }
    .cbCnt .selWay.coupon .outlineBtn .cpEndData {
        /*position: absolute;
        margin-bottom: -40px;
        width: 200px;
        text-align: right;*/
        position: relative;
        color: blue;
        line-height: 14px;
        font-size: .65rem
    }
    .cbCnt .selWay.coupon .outlineBtn .cpUseData {
        /*position: absolute;
        margin-bottom: -40px;
        width: 200px;
        text-align: right;*/
        position: relative;
        line-height: 14px;
        font-size: .65rem
    }

.cbCnt .selWay.coupon .outlineBtn.disable { opacity: .3; cursor: auto;}

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

    /*마이페이지 쿠폰끝*/

    /*구매 팝업쿠폰*/
    .modal-body .selWay.coupon {
        margin-bottom: -40px;
    }

    .modal-body .selWay.coupon .outlineBtn {
        /*
        flex-direction: column;
        height: 10vh;
        margin: 20px 0px;
        border: none;
        */
        height: 10vh;
		width: 360px;
		margin: 10px 0px;
        border: none;
    }

    .modal-body .selWay.coupon .outlineBtn .cpBox {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 300px;
        text-align: left;
        padding-left: 20px;
        margin-top: -10px;
    }

    .modal-body .selWay.coupon .outlineBtn .cpName {
        /*
        text-align: left;
        line-height: 2.2rem;
        margin: 0px 40px 0.4rem -30px;
        position: absolute;
        margin-bottom: 40px;
        width: 200px;
        */
        position: relative;
    }

    .modal-body .selWay.coupon .outlineBtn .cpAmount {
        /*
        position: absolute;
        margin-bottom: 0px;
        width: 200px;
        text-align: right;
        */
        position: relative;
    }

    .modal-body .selWay.coupon .outlineBtn .cpType {
        position: relative;
    }

    .modal-body .selWay.coupon .outlineBtn .cpEndData {
        /*
        position: absolute;
        margin-bottom: -40px;
        width: 200px;
        text-align: right;
        color: blue;
        font-size: .65rem
        */
            color: blue;
            position: relative;
        }

    .modal-body .selWay.coupon .outlineBtn.disable {
        opacity: .3;
        cursor: auto;
    }

    .modal-body .selWay.coupon .outlineBtn .cpImage {
        position: absolute;
        width: 300px;
        height: 120px;
    }

/*구매 팝업 쿠폰 끝*/

.cbCnt .termItem { margin-bottom: 4rem;}
.cbCnt .termItem h3 { margin-bottom: 2rem;}
.cbCnt .termItem h4 { margin-top: 1rem; margin-bottom: 0rem;}
.cbCnt .termFoot select { width: auto; min-width: 30rem; margin-bottom: 2rem;}
.cbCnt .termFoot .outlineBtn { width: auto; padding-left: 2rem; padding-right: 2rem;}

.cbCnt .centerMain .basicList { border-top: none;}
.cbCnt .centerMain .basicList li a { margin-top: 1rem; margin-bottom: 1rem;}
.cbCnt .centerMain .basicList li a .title { margin-bottom: .5rem;}

ul.faq {  margin: 0; font-size: 1rem;}
ul.faq a {
  color: blue;
}
ul.faq li { padding: .5rem 0; border-top:1px solid #000;}
ul.faq li:first-child { border-top:0 none;}
ul.faq li:last-child { border-bottom:1px solid #000;}
ul.faq li .question { display:block; padding: 1rem 0; color:#000; font-weight: 700; background: url(../images/arrow_down.png) no-repeat right / auto 1rem;}
ul.faq li .question::before,
ul.faq li .answer::before { font-weight: 900; display: inline-block; margin-right: .5rem;}
ul.faq li .question::before { content: 'Q.';}
ul.faq li .answer::before { content: 'A.';}
ul.faq li.active .answer { padding: 1rem 0; border-top: 1px solid #dedede;}
ul.faq li.active .question { background-image: url(../images/arrow_up.png);}

.cbCnt .giftBook { margin-bottom: 1rem;}
.cbCnt .giftBook + .basicList li { padding: .5rem 0;}
.cbCnt .giftBook + .basicList li button { text-decoration: underline;}
.cbCnt .giftBook + .basicList + button.sizeR { margin-top: .5rem; padding-top: .5rem; padding-bottom: .5rem;}
.cbCnt .giftBook ~ .info { margin-top: 3rem; margin-bottom: 3rem;}
.cbCnt .giftBook ~ .info p { margin-bottom: 2rem;}

.cbCnt .basicList.bookList,
.cbCnt .basicList.bookList li { border: none;}
.cbCnt .basicList.bookList li { float: left; width: 30%; margin-right: 5%; margin-bottom: 3rem;height: auto;}
.cbCnt .basicList.bookList li:nth-child(3n) { margin-right: 0;}
.cbCnt .basicList.bookList li a { display: block; padding-right: 0;}

.cbCnt .basicList.bookList li a#viewebook { padding: 0px; margin-top: -1.5em; margin-bottom: -1em;}
.cbCnt .basicList.bookList li a img { margin-bottom: 1rem; border: 1px solid #e9e9e9;}
.cbCnt .basicList.bookList.read li { margin-bottom: 1rem;}
.cbCnt .basicList.bookList.read li img { border: 1px solid #000;}
.cbCnt .basicList.bookList.read li .price { display: block; margin-top: .5rem;}

.cbCnt .cntList .basicList.bookList li { height: 379px;}
.cbCnt .cntList .basicList.bookList.read.writing h5 span {
    padding: 0.5rem 2rem;
    border: 1px solid #000;
    border-radius: 2rem;
}

.cbCnt h2.cbBook { text-align: center; margin: .5rem auto 4rem; width: 16rem; }
.cbCnt h2.cbBook img { margin-bottom: 1rem; border: 1px solid #e9e9e9;}
.cbCnt .bookCnt { margin-top: 5rem;}
.cbCnt .bookCnt h2 { text-align: left;}
.cbCnt .bookCnt h3 { margin-bottom: 2rem; line-height: 1.3em;}
.cbCnt .bookCnt h4 { margin-bottom: .5rem;}
.cbCnt .bookCnt .category { display: inline-block; padding: .5rem 2rem; border: 1px solid #000; border-radius: 2rem;}
.cbCnt .bookCnt section.cntContainer > p { text-indent: 1rem; text-align: justify;}
.cbCnt .bookCnt section.cntContainer > p + h4 { margin-top: 4rem;}
.cbCnt .bookCnt .quote { padding: 4rem 2rem;}
.cbCnt .bookCnt .footNote { margin-top: 4rem; margin-bottom: 6rem; padding-top: 1rem; font-size: 0.875rem; border-top: 1px solid #000; line-height: 1.7rem;}
.cbCnt .bookCnt .supNum { display: inline-block; margin-right: .5rem;}
.cbCnt .bookCnt .supNum::before { content:'[';}
.cbCnt .bookCnt .supNum::after { content:']';}
.cbCnt .bookCnt p .supNum { margin: 0; margin-top: -0.5rem; padding: 0; vertical-align: super; text-indent: .3rem; margin-right: .3rem; font-size: .75rem;}
.cbCnt .bookCnt p .supNum { margin: 0; margin-top: -0.5rem; padding: 0; vertical-align: super; text-indent: .3rem; margin-right: .3rem; font-size: .75rem;}

.cbCnt .bookCnt .modalWin h2 {
  text-align: center;
}

.cbCnt .bookCnt.disable { position: relative;}
.cbCnt .bookCnt.disable .modalBg { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: rgba(255,255,255,.9); 
  background:  linear-gradient(
    to bottom,
    rgba(255,255,255,.3) 20%, 
    rgba(255,255,255,.7) 40%, 
    rgba(255,255,255,1) 100%);
}
.cbCnt .bookCnt.disable .modalWin { position: absolute; width: 100%; top: 65%; transform: translateY(-50%); text-align: center; z-index: 2; background: #fff; border: 1px solid #000;}
.cbCnt .bookCnt.disable .modalWin h2 { margin-top: 3rem; margin-bottom: .5rem;}
.cbCnt .bookCnt.disable .modalFoot { display: flex; width: 75%; margin: 3rem auto;} 

/*.cbCnt .bookCnt .cntContainer h1 {}*/
/* 본문 태그 재정의*/
.cbCnt .bookCnt .cntContainer p {
  margin: 0;
}

.cbCnt .bookCnt .cntContainer .wp-caption-text {
    /*background-color: #E0E0E0;
    text-indent: 0em;
    background-color: #E0E0E0; 
    text-align: center; */
    text-indent: 0em;
    font-size: 14px;
    text-align: left;
}

.cbCnt .bookCnt .cntContainer h1 {

  font-size: 24px;
  color: #373737;
  letter-spacing: -2px;
  font-weight: 500;
  text-indent: 0.5em;
  /*margin: 0;*/
  text-align: center;
margin-top: 1.5em
  /*
  display: inline-block;
    padding: 0.2rem 2rem;
    border: 1px solid #000;
    border-radius: 2rem;
    */
}

.cbCnt .bookCnt .cntContainer h2 {
  font-size: 1.35rem;
  color: #373737;
  letter-spacing: -1px;
  font-weight: 500;
  text-indent: 0.7em;
  margin: 0;
}

.cbCnt .bookCnt .cntContainer h3 {
  font-size: 1.1em;
  color: #7f8c99;
  font-weight: 500;
  text-indent: 0.9em;
/*  margin: 0;*/
margin-top : 18px;
}

.cbCnt .bookCnt .cntContainer h4 {
  font-size: 14px;
  color: #8b8b8b;
  text-indent: 1em;
  margin: 0;
}

.cbCnt .bookCnt .cntContainer h5 {
  /*
  font-size: 15px;
  font-weight: 800;
  color: #54a3f4;
  border-bottom: 1px solid #54a3f4;
  display: inline-block;
  clear: both;
  margin-left: 1em;
  */
/*
  display: inline-block;
    padding: 0.2rem 2rem;
    border: 1px solid #000;
    border-radius: 2rem;
    margin: 0;
*/
    text-align: center;
}

    .cbCnt .bookCnt.writing div img{
        max-height:130px;
    }

.cbCnt .bookCnt.writing h5 {
  /*
  font-size: 15px;
  font-weight: 800;
  color: #54a3f4;
  border-bottom: 1px solid #54a3f4;
  display: inline-block;
  clear: both;
  margin-left: 1em;
  */
/*
  display: inline-block;
    padding: 0.2rem 2rem;
    border: 1px solid #000;
    border-radius: 2rem;
    margin: 0;
*/
    text-align: center;
}

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

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

.cbCnt .cntContainer h5 span span {padding: 0.5rem 2rem;  border: 1px solid #000;  border-radius: 2rem;}

.cbCnt .bookCnt.writing h5 span {padding: 0.5rem 2rem;  border: 1px solid #000;  border-radius: 2rem;}

.cbCnt .cntContainer .wrapItem .receipts {margin: auto; width: 200px}

.cbCnt .bookCnt .cntContainer h6 {
  font-size: 14px;
  border-bottom: 1px dashed #D1D1D1;
  padding-bottom: 4px;
  text-indent: 1em;
  margin: 0;
}

.cbCnt .bookCnt .cntContainer ul {
  list-style-type: disc;
  margin: 4px 0 110px 10px;
  list-style: none;
}

.cbCnt .bookCnt .cntContainer ul li {
  /*margin-left: 16px;*/
  margin-bottom: 12px;
}

.cbCnt .bookCnt .cntContainer ol {
  list-style-type: decimal;
  margin: 4px 0 20px 10px;
}

.cbCnt .bookCnt .cntContainer ol li {
  margin-left: 16px;
  margin-bottom: 12px;
}

.cbCnt .bookCnt .cntContainer img {
  width: auto;
  height: auto;
  max-width: 100%;
}

.cbCnt .bookCnt .cntContainer .weekInfo .thumImg {
  float: right;
  width: 255px;
  /*margin-bottom: 3rem;*/
  text-align: center;
  margin-left: 50px;
  margin-top: 25pt;
  height: 180px;
}

.cbCnt h2.writer { margin-bottom: 0; text-align: center;}
.cbCnt h2.writer + h3 { margin-top: 1rem; margin-bottom: 1rem;}
.cbCnt h2.writer > span { display: block;}
/*.cbCnt h2.writer .writerPic { margin: 1rem auto; overflow: hidden; font-size: 0;}*/
.cbCnt h2.writer .writerPic { 
    overflow: hidden;
    font-size: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
/*.cbCnt h2.writer .writerPic { margin: 1rem auto; width: 6.25rem; height: 8.25rem; border: 1px solid #000; border-radius: 50%; overflow: hidden; background: url(../images/pic_user.png) no-repeat center / 100% auto; font-size: 0;}*/
.cbCnt h2.writer sub { font-weight: normal;}
.cbCnt .writerIntro { margin-top: 3rem; margin-bottom: 5rem;}
.cbCnt .writerIntro p { margin-bottom: 2rem;}

.cbCnt .bookCnt.week h2 { margin-bottom: 3rem; text-align: center;}
.cbCnt .bookCnt.week .weekInfo li { margin-bottom: .5rem;}
.cbCnt .bookCnt.week .weekInfo li.sizeXX { line-height: 1.5em; font-size: 1.5rem;}
.cbCnt .bookCnt.week .weekInfo li.sizeX { font-size: 1.3rem;}
.cbCnt .bookCnt.week .mailing { padding: 1rem 0;}
.cbCnt .bookCnt.week .mailing a { text-decoration: none;}
.cbCnt .bookCnt.week .mailing .mainBtn { width: auto; /*padding-left: 2rem; padding-right: 2rem; max-width: 20rem;*/
  height: 42px;
  padding: 0 30px 0 52px;
  background: url(/button1-download.svg) no-repeat left 20px top 8px;
  background-color: #2c3338;
  line-height: 42px;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  border-radius: 10px;
  transition: .25s; }
.cbCnt .bookCnt.week .category { background-color: #000; color: #fff;}
.cbCnt .bookCnt.week .rights { margin-top: 5rem;}

.cbCnt .week.type01 h2 { text-align: left; padding: 1.5rem .7rem 2rem; line-height: 1em; color: #fff; background-color: #3982e9;}
.cbCnt .week.type01 h2 .badge { padding-top: 0; line-height: 1em; vertical-align: super; background-color: transparent;}
.cbCnt .week.type01 .mailing { display: flex; align-items: flex-end; overflow: hidden;}
.cbCnt .week.type01 .mailing p.txSans { flex: 1;}
.cbCnt .week.type01 .mailing .mainBtn { margin-left: 0; margin-top: 1rem; display: block;}
.cbCnt .week.type01 .mailing .thumPic { width: 60%; margin-left: 4rem;}
.cbCnt .week.type01 .mailing .thumPic img { width: 100%;}

.cbCnt .week.type02 h2,
.cbCnt .week.type02 h2 + section.cntContainer { background-color: #f5f9fe;}
.cbCnt .week.type02 h2 { margin-bottom: 0; text-align: left; padding: 1.5rem 1rem 2rem; line-height: 1em;color: #3982e9;font-size: 48px; font-weight: 600;
/*  margin-top: 1rem;
  font-size: 3rem;
  text-align: left;
  color: #3982e9;*/
}
.cbCnt .week.type02 h2 .badge { padding-top: 0; padding-left: 0; line-height: 1em; vertical-align: super; background-color: transparent; color: #3982e9;}
.cbCnt .week.type02 h2 + section.cntContainer { padding: 1rem;}

.cbCnt .week.type02 h2 sup {
  display: inline-block;
  vertical-align: middle;
  /*margin-top: -1rem;*/
  /*font-size: 1rem;*/
  letter-spacing: 0;
  line-height: 1.3em;
  color: #aac9f5;
  font-size: 12px;
}

.cbCnt .week.type02 .weekInfo .txBlue { display: inline-block; border-top: 3px solid #3982e9;}
.cbCnt .week.type02 .mailing { display: flex; align-items: flex-end; flex-direction: column; overflow: hidden;}
.cbCnt .week.type02 .mailing p.txSans { order: 2;}
.cbCnt .week.type02 .mailing .mainBtn { margin-left: 0; max-width: none; margin-top: 1rem; display: block; padding: 0 20px; line-height: 22px; border-radius: 6px; height: 30px;}
.cbCnt .week.type02 .mailing .thumPic { order: 1; width: 70%; margin-bottom: 1rem;}
.cbCnt .week.type02 .mailing .thumPic img { width: 100%;}

.cbCnt .search { position: relative; margin-top: 4rem; margin-bottom: 4rem;}
.cbCnt .search input { border-width: .4rem; font-size: 2rem; padding-right: 3rem; padding-left: 10px;}
.cbCnt .search button { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 3rem; height: 3rem; background: url(../images/ic_searchB.png) no-repeat center / 60% auto;}

.cbCnt .wrapItem.radioCustom { margin-top: 1rem; margin-bottom: 1rem;}
.cbCnt .wrapItem.radioCustom .containerChk { margin-top: .5rem; margin-bottom: .5rem; /*padding-left: 3.3rem; padding-right: 1.5rem;*/padding-left: 3rem;  margin-right: 1rem; height: 3rem; line-height: 3rem; color: #000; white-space: nowrap;}
.cbCnt .wrapItem.radioCustom .containerChk:last-child { margin-right: 0;}
.cbCnt .wrapItem.radioCustom .containerChk .checkmark { width: 100%; height: 3rem; /*border: 1px solid #000;*/ border: 0px; border-radius: 2rem; z-index: -1; background-color: #fff;}
.cbCnt .wrapItem.radioCustom .containerChk .checkmark::after { display: block; border: .5rem solid #fff; outline: 1px solid #000; width: .5rem; height: .5rem; background-color: #fff; transform: rotate(45deg); transform-origin: 25% 140%; border-radius: 50%;}
.cbCnt .wrapItem.radioCustom .containerChk input:checked ~ .checkmark.radio { background-image: none; /*background-color: #000;*/}
.cbCnt .wrapItem.radioCustom .containerChk input:checked ~  i { /*color: #fff;*/ white-space: nowrap;}
.cbCnt .wrapItem.radioCustom .containerChk input:checked ~  .checkmark::after { background-color: #000;}
.cbCnt .wrapItem.radioCustom.period { align-items: flex-end;}
.cbCnt .wrapItem.radioCustom.period > label { margin-bottom: .5rem; margin-right: 2rem;}
.cbCnt .wrapItem.radioCustom.period > .sizeXX { color: #666; margin-right: 1rem;}
.cbCnt .wrapItem.radioCustom.period input[type='text'] { border-color: #dbdbdb; padding-right: 1rem; background: url(../images/arrow_down.png) no-repeat right / auto 1rem;}
.cbCnt .wrapItem.listHead { margin-top: 4rem;}
.cbCnt .wrapItem.listHead .colItem { margin-left: 1rem; margin-right: 0;}
.cbCnt .wrapItem.listHead .colItem select { min-width: 13rem; border: none;}

.cbCnt .intro.cb h2 { position: relative; height: 30rem; color: #fff; background: url(../images/pic_intro.png) no-repeat center / cover;}
.cbCnt .intro.cb h2 > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.cbCnt .intro.cb h2 > span sub { display: block; margin-top: .5rem;}
.cbCnt .intro.cb h2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4);}
.cbCnt .intro h3 { text-align: left;/*margin-bottom: 0px;*/}
.cbCnt .intro h3 + p { margin-bottom: 2rem; /*text-indent: 1rem;*/  text-align: justify;}
.cbCnt .comment blockquote { /*text-align: center;*/ margin-bottom: 4rem; /*text-indent: 1rem;*/ text-align: justify;}
.cbCnt .comment blockquote cite { display: block;}
.cbCnt .comment blockquote .txSans { text-align: right; margin-bottom: 4rem; }
.cbCnt .intro.person h3 img { display: block; width: 6rem; height: 6rem; border-radius: 50%; border: 1p solid #000; margin-bottom: 1rem;}
.cbCnt .intro.person h3 sub { font-weight: 500; line-height: 1em;}
.cbCnt .intro.person hr { border-color: #000;}
.cbCnt .history h3 {  margin-bottom: 0px;}
.cbCnt .changbi li {    padding-bottom: 30px;  padding-left: 20px;  padding-right: 20px;  text-align: justify;}

.cbCnt .colS.orderMake { margin: 0;}
.cbCnt .colS.orderMake h2,
.cbCnt .colS.orderMake h3 { text-align: left;}
.cbCnt .colS.orderMake h2 img { height: 14rem;}
.cbCnt .colS.orderMake .listHead { padding-top: 0; padding-bottom: 1.5rem;}
.cbCnt .colS.orderMake .listHead .f-right { margin-top: .2rem;}
.cbCnt .colS.orderMake .basicList .f-left + button { margin-left: .5rem; line-height: 2em;}
.cbCnt .colS.orderMake .listFoot { margin-top: .5rem;;}
.cbCnt .colS.orderMake .listFoot button { padding-top: .5rem; padding-bottom: .5rem;}
.cbCnt .colS.orderMake .listFoot .extraPrice { margin-bottom: 1.5rem;}
.cbCnt .colS.orderMake .buyerInfo { padding-left: 8rem;}
.cbCnt .colS.orderMake label + div,
.cbCnt .colS.orderMake label + div + div{ margin-bottom: 1rem;}
.cbCnt .colS.orderMake h3 + label.containerChk { margin-bottom: 1rem;}
.cbCnt .colS.orderMake .basicList.noline li { padding-top: 0;}
.cbCnt .colS.orderMake .totalPrice { display: block; margin-top: .5rem; padding-top: 1.5rem; border-top: 1px solid #000; text-align: right;}

.cbCnt .paySel h3 { text-align: left;}
.cbCnt .paySel h3 sub { display: inline-block; font-weight: 500; margin-left: .5rem;}
.cbCnt .paySel .wrapItem.radioCustom { flex-wrap: wrap; justify-content: flex-start;}
.cbCnt .paySel .orderMake { margin-top: 1rem;}

.cbCnt .payProgress { border: 1px solid #000;}
.cbCnt .payProgress h3,
.cbCnt .payProgress h3 + p { padding: 2rem;}
.cbCnt .payProgress h3 { border-bottom: 1px solid #000; line-height: 1.3em;}
.cbCnt .payProgress .basicList { width: 60%; padding: 0 2rem 2rem;}
.cbCnt .payProgress .basicList li:first-child { margin-bottom: 1rem;}
.cbCnt .payConfirm { margin-top: 2rem; display: flex; align-items: center;}
.cbCnt .payConfirm .totalPrice { flex: 1; text-align: center;}
.cbCnt .payConfirm .mainBtn { width: auto; padding: 1.2rem 3.5rem;}

.cbCnt .cntContainer {font-size: 1.185rem; line-height: 2rem; padding-left: 20px;  padding-right: 20px;}

section.cntContainer.intro.person {  text-align: justify;  font-size: 1rem;}

.cbCnt .cntContainer.comment.changbi span {font-size: 100px; }

.cbCnt .cntContainer blockquote {
    margin: 0 2em;
    font-size: 0.95em;
}

.cbCnt .talk-visual li{
  text-align: justify;
}

.cbCnt .cntList .basicList.bookList.read .txSans.sizeX {
  font-size: 20px;
}

/* modal popup관련 css */

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Close Button */
/* .close { color: #fff; float: right; font-size: 28px; font-weight: bold;}
.close:hover,
.close:focus { color: black; text-decoration: none; cursor: pointer;} */

.modal-header { padding: 3rem 0 2rem;}
.modal-body { padding: 2rem;}
.modal-body > p { margin-bottom: 3rem;}
.modal-body > p:last-child { margin-bottom: 0;}
.modal-footer { display: flex; border-top: 1px solid #000;}
.modal-footer > button { flex: 1; padding: 1rem; border: none;}

/* Modal Content */
.modal-content { 
  position: relative;
  text-align: center;
  background-color: #fff;
  margin: auto;
  padding: 0;
  border: 1px solid #000000;
  width: 400px;
  top: 10rem;
  border-radius: 2rem 2rem 0 0;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}
.modal-content.searchModal { width: 60%; margin: 0 auto; min-width: 880px; }
.modal-content.searchModal .modal-body { padding: 0 4rem 4rem;}
.modal-content.searchModal h3 { text-align: left;}
.modal-content.searchModal .search { position: relative; margin-bottom: 2rem;}
.modal-content.searchModal .search button { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 3rem; height: 3rem; background: url(../images/ic_search.png) no-repeat center / 50% auto;}
.modal-content.searchModal .basicList li { padding-top: .5rem; padding-bottom: .5rem; border-bottom: 1px solid #000;}
.modal-content.searchModal .basicList li .containerChk i { font-weight: 900;}

.modal-content.searchModal .basicList li .containerNonChk i { font-weight: 900;}

/* Add Animation */
@keyframes animatetop {
  from {top: -10rem; opacity: 0}
  to {top: 10rem; opacity: 1}
}

.cbCnt .writer .outNamebox{
  width: 100%;
  height: 100px;
  position: relative;
}

.cbCnt .writer .outNamebox.noImg{
    margin-top: 30px;
}

.cbCnt .writer .outNamebox .inNamebox{
  width: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top: solid;
    border-bottom: solid;
    border-color: #3982E9;
}

.cbCnt .writer .outNamebox .inNamebox.Img{
    border-bottom: none;
}

.cbCnt .writer .outNamebox .inNamebox .writerName{
  display: flex;
    justify-content: center;
    height: 100px;
    align-content: space-between;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0;
    color: #3982E9;
}

    .cbCnt .writer .outNamebox .inNamebox .writerName .sizeX {
        color: #3982E9;
        word-break: keep-all;
    }



.card {
}

.cbCnt .cntList .card h2 {
    margin-bottom: 0rem;
    padding-top: 0rem;
}

.cbCnt .cntList .card h3 {
    font-family: NotoSansKR-Regular;
    font-size: 13px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -.33px;
    color: #858585;
    display: grid;
}



    .cbCnt .cntList .card h3 p[data-v-42872b8b] {
        width: 16rem;
        display: flex;
    }

.single {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    margin-bottom: -10px;
}

.el-divider--vertical {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
}



span.coupon_reg {
    background-color: #000;
    color: #fff;
    padding: 0.05rem 1rem;
    border-radius: 2rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    cursor: pointer;
}


div.deposit_desc {
    line-height: 1.5;
    display: none;
    font-size: 14px;
}

.el-divider {
    background-color: #dcdfe6;
}



.cbCnt .cntList .basicList.bookList.writing h2 .txSans.sizeX {
    font-size: 0.8rem;
}

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

.cbCnt .cntList .basicList.bookList.writing li {
    height: auto;
/*    margin-right: 0;
    margin-left: 2%;*/
}

    .cbCnt .cntList .basicList.bookList.writing li a {
        padding-bottom: 10px;
    }

/*
.cbCnt .cntList .basicList.bookList.writing > p {
    text-indent: 1rem;
    text-align: justify;
}

.cbCnt .cntList .basicList.bookList.writing p {
    margin: 0;
}
    */