/*--------------------------------------- 타이틀 ---------------------------------------*/
.ad_tit01 {position: relative;display: block;font-size: 22px;color: #444;line-height: 34px;padding-left: 10px;font-weight: 600}
.ad_tit01:after {position: absolute;top: 7px;left: 0;width: 3px;height: 20px;background: #095db3;content: "";}

.ad_tit02 {position: relative;display: block;font-size: 18px;color: #444;line-height: 34px;padding-left: 10px;}
.ad_tit02:after {position: absolute;top: 14px;left: 0;width: 5px;height: 5px;border-radius: 50%;background: #444;content: "";}

.ad_tit03 {position: relative;display: block;font-size: 16px;color: #095db3;line-height: 34px;padding-left: 10px;}
.ad_tit03:after {position: absolute;top: 16px;left: 0;width: 5px;height: 2px;background: #095db3;content: "";}

.ad_tit01.inline, .ad_tit02.inline, .ad_tit03.inline {display: inline-block !important}

/*--------------------------------------- 타이틀 ---------------------------------------*/
.ad_txt01 {position: relative;display: block;}
.ad_txt01 li {position: relative;display: block;padding-left: 8px;line-height: 20px;margin: 4px 0}
.ad_txt01 li:after {position: absolute;top: 9px;left: 0;width: 3px;height: 3px;background: #888;content: "";}

.ad_txt02 {position: relative;display: block;}
.ad_txt02 li {position: relative;display: block;padding-left: 8px;line-height: 20px;margin: 4px 0}
.ad_txt02 li:after {position: absolute;top: 9px;left: 0;width: 5px;height: 1px;background: #888;content: "";}

.grBox {position: relative;display: block;background: #f6f6f6;padding: 15px;}

/*---------------------------------------텍스트타입 스타일 ---------------------------------------*/
.txt_type {
    float: left;margin-right: 5px;display: inline-block;padding: 0 5px;min-width: 35px;text-align: center;font-size: 11px;
    height: 18px;line-height: 18px;font-weight: 600;border: 1px solid #ccc;border-radius: 3px;letter-spacing: 0
}

.type_blue {color: #2d7bf4;border: 1px solid #2d7bf4}
.type_sky {color: #4eb7eb;border: 1px solid #4eb7eb}
.type_yellow {color: #f9bc0b;border: 1px solid #f9bc0b}
.type_red {color: #f3434b;border: 1px solid #f3434b}
.type_green {color: #85ba05;border: 1px solid #85ba05}

@media only screen and (max-width:640px){
    .txt_type {padding: 0 3px;min-width: 30px;margin-right: 3px }
}

/*---------------------------------------프로그레스 스타일 ---------------------------------------*/

.progress {position: relative;display: block;width: 100%;height: 20px;background: #f3f3f3;overflow: hidden;border-radius: 5px;}
.progress_bar {position: relative;display: block;height: 20px;font-size: 12px;color: #fff;text-align: center;letter-spacing: 0;white-space:nowrap}

.progress_blue {background: #2d7bf4}
.progress_sky {background: #4eb7eb}
.progress_yellow {background: #f9bc0b}
.progress_red {background: #f3434b}
.progress_green {background: #85ba05}

/*---------------------------------------인포박스 ---------------------------------------*/
.infoBox {position: relative;display: block;overflow: hidden;border-radius: 5px;padding: 15px;color: #555;background: #f8f8f8;border: 1px solid #ddd;margin: 3px 0}
.line_red {color: #f3434b;background: #fef0f2;border: 1px solid #f9b3bd;}
.line_blue {color: #2d7bf4;background: #e5effe;border: 1px solid #8eb8f9;}
.line_sky {color: #4eb7eb;background: #eef8fd;border: 1px solid #aadcf5;}
.line_yellow {color: #f9bc0b;background: #fffaeb;border: 1px solid #fbd76f;}
.line_gray {color: #4eb7eb;background: #eef8fd;border: 1px solid #aadcf5;}

.bg_red {color: #fff;background: #f3434b;border: none;}
.bg_blue {color: #fff;background: #2d7bf4;border: none;}
.bg_sky {color: #fff;background: #4eb7eb;border: none;}
.bg_yellow {color: #fff;background: #f9bc0b;border: none;}
.bg_gray {color: #fff;background: #6c757d;border: none;}

/*---------------------------------------탭스타일 ---------------------------------------*/

.cont-tab {position: relative;display: block;overflow: hidden;background: #e6eaef;}
.cont-tab ul {overflow: hidden;width: 100%;}
.cont-tab li {float: left;}
.cont-tab li:last-child {border-right: none}
.cont-tab li a {display: block;text-align: center;font-size: 15px;color: #666;padding: 12px 0;border: 1px solid #e6eaef;border-bottom: 1px solid #bbb}
.cont-tab li a:hover {color: #084e99;}
.cont-tab li.active a {color: #084e99;border: 1px solid #bbb;border-bottom: 1px solid #fff;font-weight: 600;background: #fff;}

.ad_tab01 {position: relative;display: block;overflow: hidden;}
.ad_tab01 ul {overflow: hidden;width: 100%;}
.ad_tab01 li {float: left;}
.ad_tab01 li:last-child {border-right: none}
.ad_tab01 li a {display: block;text-align: center;font-size: 15px;color: #98a6ad;padding: 15px 0;border-bottom: 1px solid #dee2e6;}
.ad_tab01 li a:hover {color: #095db3;}
.ad_tab01 li.active a {color: #095db3;border: 1px solid #dee2e6;border-bottom: 1px solid #fff;border-top-right-radius: 5px;border-top-left-radius: 5px}

.ad_tab02 {position: relative;display: block;overflow: hidden;border: 1px solid #dee2e6;background: #fafafa;border-radius: 5px;padding: 0 7px}
.ad_tab02 ul {overflow: hidden;width: 100%;}
.ad_tab02 li {float: left;box-sizing: border-box;padding: 10px 7px;}
.ad_tab02 li a {display: block;text-align: center;font-size: 15px;color: #98a6ad;padding: 8px 0;background: #e2e7ed;border-radius: 5px;}
.ad_tab02 li a:hover {color: #095db3;text-decoration: underline}
.ad_tab02 li.active a {background: #095db3;color: #fff;}


.tw50 li {width: 50%;}
.tw33 li {width: 33.33%}
.tw25 li {width: 25%}
.tw20 li {width: 20%}
.tw16 li {width: 16.66%}
.tw14 li {width: 14.28%}
.tw12 li {width: 12.5%}


.tabViw {display: block;overflow: hidden;margin-top: 30px}

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

    .cont-tab {background: #fff;border-top: 1px solid #ddd;border-left: 1px solid #ddd;box-sizing: border-box}
    .cont-tab li {margin: -1px 0 0 -1px;}
    .cont-tab li a {display: block;text-align: center;font-size: 14px;color: #666;padding: 8px 0;border: 1px solid #ddd;box-sizing: border-box;background: #f8f8f8;}
    .cont-tab li.active a {background: #084e99;color: #fff;border: 1px solid #084e99;}

    .tw12 li {width: 25%}
    .tw16 li {width: 33.33%}
}
@media only screen and (max-width:400px){
    .cont-tab li a {font-size: 13px;padding: 6px 0;}

    .tw12 li {width: 33.33%}
    .tw16 li {width: 50%}
}


/*---------------------------------------테이블 스타일 ---------------------------------------*/
.table_st1 {position: relative;display: block;}
.table_st1 table {border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%;clear: both;text-align: center;border-top: 1px solid #dee2e6;}
.table_st1 th, .table_st1 td {border: 1px solid #dee2e6;padding: 12px;word-wrap: break-word;}
.table_st1 td {text-align: left;}
.table_st1 th {background: #f3f6f8;color: #333;}
.table_st1 thead th {border-bottom: 2px solid #dee2e6}
.table_st1 td {background: #fff;}
.table_st1 .c {text-align: center}
.table_st1 .l {text-align: left}
.table_st1 .r {text-align: right}

.table_st2 {position: relative;display: block;}
.table_st2 table {border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%;clear: both;text-align: center;border-top: 1px solid #dee2e6;}
.table_st2 th, .table_st2 td {border: 1px solid #dee2e6;padding: 12px;word-wrap: break-word;}
.table_st2 td {text-align: center;}
.table_st2 th {color: #333;background: #fff;border-bottom: 2px solid #dee2e6;font-weight: 600}
.table_st2 tr:nth-child(odd) td {background: #f3f6f8;}
.table_st2 .c {text-align: center}
.table_st2 .l {text-align: left}
.table_st2 .r {text-align: right}



/*---------------------------------------체크박스&라디오 스타일 ---------------------------------------*/
.checkbox, .radio { position: relative;padding-left: 26px;overflow: hidden;margin: 2px 0 }

.checkbox.checkbox_inline, .radio.radio_inline { display: inline-block;vertical-align: top;margin: 3px 8px 3px 0}
.checkbox.checkbox_single label, .radio.radio_single label {width: 18px;height: 18px;text-indent: -9999px;padding-left: 0}

.checkbox label { position: relative;display: inline-block;line-height: 20px;}
.checkbox label::before {
    content: "";display: inline-block;position: absolute;width: 14px;height: 14px;left: 0;margin-left: -24px;border: 2px solid #98a6ad;border-radius: 3px;background-color: #fff;
    -webkit-transition: border 0.2s ease-in-out, color 0.2s ease-in-out;-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after { display: inline-block;position: absolute;width: 14px;height: 14px;left: 0;top: 0;margin-left: -24px;padding-left: 2px;padding-top: 1px;font-size: 13px;color: #555555;font-weight: 600;line-height: 17px;text-indent: 0}
.checkbox input[type="checkbox"] { position: absolute;top: 0;left: 0;opacity: 0;width: 20px;height: 20px;cursor: pointer;z-index: 10 }
.checkbox input[type="checkbox"]:focus + label::before { outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
.checkbox input[type="checkbox"]:checked + label::after { font-family: 'Feather' !important;content: "\e92b";}
.checkbox input[type="checkbox"]:disabled + label { opacity: 0.65;}
.checkbox input[type="checkbox"]:disabled + label::before { background-color: #eeeeee;cursor: not-allowed;}

.checkbox_blue input[type="checkbox"]:checked + label::before { background-color: #095db3;border-color: #095db3;}
.checkbox_blue input[type="checkbox"]:checked + label::after { color: #fff;}

.checkbox_sky input[type="checkbox"]:checked + label::before { background-color: #4eb7eb;border-color: #4eb7eb;}
.checkbox_sky input[type="checkbox"]:checked + label::after { color: #fff;}

.checkbox_yellow input[type="checkbox"]:checked + label::before { background-color: #f9bc0b;border-color: #f9bc0b;}
.checkbox_yellow input[type="checkbox"]:checked + label::after { color: #fff;}

.checkbox_red input[type="checkbox"]:checked + label::before { background-color: #f3434b;border-color: #f3434b;}
.checkbox_red input[type="checkbox"]:checked + label::after { color: #fff;}

.checkbox_green input[type="checkbox"]:checked + label::before { background-color: #85ba05;border-color: #85ba05;}
.checkbox_green input[type="checkbox"]:checked + label::after { color: #fff;}

.checkbox_dark input[type="checkbox"]:checked + label::before { background-color: #313a46;border-color: #313a46;}
.checkbox_dark input[type="checkbox"]:checked + label::after  { color: #fff;}

.checkbox_org input[type="checkbox"]:checked + label::before { background-color: #ef4123;border-color: #ef4123;}
.checkbox_org input[type="checkbox"]:checked + label::after  { color: #fff;}


.radio label { position: relative;display: inline-block;line-height: 20px;}
.radio label::before {
    content: "";display: inline-block;position: absolute;width: 14px;height: 14px;left: 0;top: 0;margin-left: -24px;border: 2px solid #98a6ad;border-radius: 50%;background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;-o-transition: border 0.2s ease-in-out;transition: border 0.2s ease-in-out;]
}
.radio label::after {
    display: inline-block;position: absolute;content: " ";width: 10px;height: 10px;left: 4px;top: 4px;margin-left: -24px;border-radius: 50%;background-color: #98a6ad;
    -webkit-transform: scale(0, 0);-ms-transform: scale(0, 0);-o-transform: scale(0, 0);transform: scale(0, 0);-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);transition: transform 0.2s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] { position: absolute;top: 0;left: 0;opacity: 0;width: 20px;height: 20px;cursor: pointer;z-index: 10 }
.radio input[type="radio"]:focus + label::before { outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
.radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);-o-transform: scale(1, 1);transform: scale(1, 1);}
.radio input[type="radio"]:disabled + label { opacity: 0.65;}
.radio input[type="radio"]:disabled + label::before { cursor: not-allowed;}

.radio_blue input[type="radio"] + label::after { background-color: #095db3;}
.radio_blue input[type="radio"]:checked + label::before { border-color: #095db3;}
.radio_blue input[type="radio"]:checked + label::after { background-color: #095db3;}

.radio_sky input[type="radio"] + label::after { background-color: #4eb7eb;}
.radio_sky input[type="radio"]:checked + label::before { border-color: #4eb7eb;}
.radio_sky input[type="radio"]:checked + label::after { background-color: #4eb7eb;}

.radio_yellow input[type="radio"] + label::after { background-color: #f9bc0b;}
.radio_yellow input[type="radio"]:checked + label::before { border-color: #f9bc0b;}
.radio_yellow input[type="radio"]:checked + label::after { background-color: #f9bc0b;}

.radio_red input[type="radio"] + label::after { background-color: #f3434b;}
.radio_red input[type="radio"]:checked + label::before { border-color: #f3434b;}
.radio_red input[type="radio"]:checked + label::after { background-color: #f3434b;}

.radio_green input[type="radio"] + label::after { background-color: #85ba05;}
.radio_green input[type="radio"]:checked + label::before { border-color: #85ba05;}
.radio_green input[type="radio"]:checked + label::after { background-color: #85ba05;}

.radio_dark input[type="radio"] + label::after { background-color: #313a46;}
.radio_dark input[type="radio"]:checked + label::before { border-color: #313a46;}
.radio_dark input[type="radio"]:checked + label::after { background-color: #313a46;}

.radio_org input[type="radio"] + label::after { background-color: #ef4123;}
.radio_org input[type="radio"]:checked + label::before { border-color: #ef4123;}
.radio_org input[type="radio"]:checked + label::after { background-color: #ef4123;}

input[type="radio"] .styled:checked + label::before { color: #fff;}
input[type="radio"] .styled:checked + label::after { color: #fff;}


/*---------------------------------------버튼 스타일 ---------------------------------------*/
.btn {
    overflow: hidden;display: inline-block;vertical-align: top;border-radius: 3px;font-size: 13px;outline: none !important;
    text-align: center;padding: .375rem 1.1rem;border: 1px solid #d6dce1;background: #f8f9fa;color: #212529;margin: 1px;
}
.btn_round {border-radius: 2em}

.btn_blue {background: #095db3;border-color: #095db3;color: #fff;}
.btn_gray {background: #8d8d8d;border-color: #8d8d8d;color: #fff;}
.btn_green {background: #7ab605;border-color: #7ab605;color: #fff;}
.btn_red {background: #ef3d58;border-color: #ef3d58;color: #fff;}
.btn_yellow {background: #f9bc0b;border-color: #f9bc0b;color: #fff;}
.btn_sky {background: #4eb7eb;border-color: #4eb7eb;color: #fff;}
.btn_dark {background: #313a46;border-color: #313a46;color: #fff;}
.btn_org {background: #ef4123;border-color: #ef4123;color: #fff;}

.btn_outline_blue {color: #095db3;border-color: #095db3;background: #fff;}
.btn_outline_gray {color: #6c757d;border-color: #6c757d;background: #fff;}
.btn_outline_green {color: #7ab605;border-color: #7ab605;background: #fff;}
.btn_outline_red {color: #ef3d58;border-color: #ef3d58;background: #fff;}
.btn_outline_yellow {color: #f9bc0b;border-color: #f9bc0b;background: #fff;}
.btn_outline_sky {color: #4eb7eb;border-color: #4eb7eb;background: #fff;}
.btn_outline_dark {color: #313a46;border-color: #313a46;background: #fff;}
.btn_outline_org {background: #ef4123;border-color: #ef4123;color: #fff;}

.bw_xxs {min-width: 30px;padding: 0 10px;font-size: 13px;line-height: 20px;}
.bw_xs {min-width: 50px}
.bw_sm {min-width: 80px}
.bw_md {min-width: 110px}
.bw_lg {min-width: 130px}

.bh_sm {padding: .2rem .8rem;}
.bh_lg {padding: .7rem 1.6rem;font-size: 16px;}

.btn_box {position: relative;display: block;overflow: hidden;text-align: center;}
.btn_box.left {text-align: left;}
.btn_box.right {text-align: right;}
.btn_box.asbtn {position: absolute;bottom: -60px;left: 0}
.btn_box.asbtn .btn {height: 30px;line-height: 30px;padding: 0 10px}

@media only screen and (max-width:640px){
    .bw_xs {min-width: 40px}
    .bw_sm {min-width: 60px}
    .bw_md {min-width: 80px}
    .bw_lg {min-width: 100px}

    .bh_sm {padding: 3px 8px;}
    .bh_lg {padding: 7px 20px;font-size: 15px}
}
@media only screen and (max-width:420px){
    .bh_sm {padding: 3px 8px;}
    .bh_lg {padding: 7px 20px;}
}


/*공동레이어팝업*/
.commonLyr-wrap {display: none;position: fixed;_position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;}
.commonLyr-wrap .bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: .5;filter: alpha(opacity=50);}
.commonLyr-wrap .commonLyr-title {display: block;text-align: center;padding: 15px 0;border-bottom: 1px solid #ddd;font-size: 25px;color: #151515;line-height: 130%;font-weight: 600}
.commonLyr-wrap .common-layer {display: block;}

.common-layer {display: none;position: absolute;top: 50%;left: 50%;width: 100%;height: auto;max-width: 600px;min-width: 280px;background: #fff;border-radius: 10px;overflow: hidden;z-index: 10;}
.common-layer .contents {position: relative;display: block;padding: 30px;overflow-y: auto}
.common-layer .close {position: absolute;top: 12px;right: 0;width: 45px;height: 40px;display: block;}
.common-layer .close .commonLyr-close {position: relative;display: block;font-size: 30px;color: #333;}
.common-layer .close .commonLyr-close .fe {line-height: 40px}

.common-layer #pop-wrap {padding: 0 !important}

@media only screen and (max-width:640px){
    .commonLyr-wrap .commonLyr-title {padding: 12px 0;font-size: 20px;}
    .common-layer {width: 90%;max-width: 580px;}
    .common-layer .contents {padding: 25px;}
    .common-layer .close {top: 5px;}
}


@media only screen and (max-width:480px){
    .commonLyr-wrap .commonLyr-title {font-size: 18px;}
    .common-layer .close {top: 3px;}
}



@charset "utf-8";

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	공통요소
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.enter {display: block;overflow: hidden;clear: both}

.h3-title {position: relative;display: block;overflow: hidden;line-height: 30px;font-size: 23px;color: #222;font-weight: 600;margin-bottom: 10px;padding-left: 8px;letter-spacing: -0.05em}
.h3-title:after {position: absolute;top: 6px;left: 0;width: 4px;height: 18px;background: #084e99;content: "";}

.h4-title {position: relative;display: block;overflow: hidden;line-height: 26px;font-size: 18px;color: #084e99;font-weight: 600;margin-bottom: 10px;padding-left: 10px;letter-spacing: -0.05em}
.h4-title:after {position: absolute;top: 11px;left: 0;width: 5px;height: 5px;border-radius: 50%;background: #084e99;content: "";}

.line-gap {position: relative;display: block;height: 4px;background: url("/static/images/design/content/pattern01.png") repeat-x;margin: 40px 0;overflow: hidden;clear: both;}

.grlineBox {position: relative;display: block;overflow: hidden;padding: 15px;background: #f6f6f6;border: 1px solid #ddd;}

.bixtitle {position: relative;display: block;background: #5c6269;padding: 7px 0;text-align: center;font-size: 15px;font-weight: 600;color: #fff;border-radius: 5px;margin-bottom: 10px}

/*평점*/
.rating {position: relative;display: inline-block;height: 25px;overflow: hidden}
.rating i {position: relative;float: left;width: 17px;height: 25px;margin-right: 2px;vertical-align: top;color: #cad0d6}
.rating i:after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 25px;content: "\f005";font-family: FontAwesome;font-style: normal;font-size: 14px;display: block}
.rating i.on {color: #084e99}

/*리스트 상단*/
.cont-total-box {position: relative;display: block;overflow: hidden;margin-bottom: 10px}
.cont-total-box .total {line-height: 34px}
.cont-total-box .btn_group {}

/*북 공통*/
.bookCoverBox {position: relative;overflow: hidden;width: 118px;height: 168px;background: #fff;border: 1px solid #c6c6c6}
.bookCoverBox .bookCoverTop {position: absolute;display: block;top: -5px;left: -1px;width: 100%;height: 5px;padding: 0 1px;background: url("/static/images/design/content/cover/bookCoverTop.png") repeat-x bottom}
.bookCoverBox .bookCoverRight {position: absolute;display: block;top:0;right: -5px;width: 5px;height: 100%;background: url("/static/images/design/content/cover/bookCoverRight.png") repeat-y right}
.bookCoverBox .bookCoverBottom {position: absolute;display: block;bottom: -5px;left: -1px;width: 100%;height: 5px;padding: 0 1px;background: url("/static/images/design/content/cover/bookCoverBottom.png") repeat-x top}
.bookCoverBox .bookCoverLeft {position: absolute;display: block;top:0;left: -5px;width: 5px;height: 100%;background: url("/static/images/design/content/cover/bookCoverLeft.png") repeat-y left}

.bookCoverBox .book {position: relative;width: 118px;height: 168px;}
.bookCoverBox .book a {position: relative;display: block;width: 100%;height: 100%;}
.bookCoverBox .book img {width: 118px;height: 168px;display: block;z-index: 0}
.bookCoverBox .book .coverSdLeft {position: absolute;display: block;top: 0;left: 0;width: 14px;height: 100%;background: url("/static/images/design/content/cover/coverSdLeft.png") repeat-y left;z-index: 10}
.bookCoverBox .book .coverSdRight {position: absolute;display: block;top: 0;right: 0;width: 14px;height: 100%;background: url("/static/images/design/content/cover/coverSdRight.png") repeat-y right;z-index: 10}

.bookCoverBox:hover .book a:after {position: absolute;display: block;top: 0;left: 0;width: 100%;height: 100%;background: rgba(12,35,57,0.6);content: "";z-index: 50}
.bookCoverBox:hover .book a:before {position: absolute;display: block;top: 50%;left: 50%;width: 70px;height: 28px;line-height: 26px;margin: -14px 0 0 -35px;content: "more +";
    text-align: center;font-size: 12px;color: #fff;border: 1px solid #fff;border-radius: 30px;z-index: 55}

.bookCoverBox.medium {width: 160px;height: 230px;}
.bookCoverBox.medium .book {width: 160px;height: 230px;}
.bookCoverBox.medium .book img {width: 160px;height: 230px;}

.bookCoverBox.large {width: 200px;height: 288px;}
.bookCoverBox.large .book {width: 200px;height: 288px;}
.bookCoverBox.large .book img {width: 200px;height: 288px;}

.bookinfoText {position: relative;display: block}
.bookinfoText .stext {position: relative;display: block;font-size: 14px;}
.bookinfoText .red {color: #f22020}
.bookinfoText .title {position: relative;display: block;font-size: 17px;line-height: 140%;height: auto;overflow: hidden;}
.bookinfoText .title a {display: inline-block;color: #333;font-weight: bold;line-height: 22px}
.bookinfoText .title .ev_txt {color:#fff;font-size:12px;background: #0a929a;border-radius: 3px;padding: 0 7px;line-height: 20px;display: inline-block;vertical-align: top;margin-top: 1px}
.bookinfoText .stitle {display: block;margin-bottom: 3px}
.bookinfoText .stitle a {display: inline-block;color: #333;line-height: 130%;font-weight: 600}
.bookinfoText .txt {position: relative;display: block;font-size: 12px;color: #555;height: 38px;overflow: hidden;margin: 5px 0}
.bookinfoText .name {display: block;font-size: 12px;color: #888}
.bookinfoText .price {display: block;color: #333;font-size: 13px;font-weight: 500;font-family: 'Spoqa Han Sans', 'Sans-serif';}
.bookinfoText .price i {display: inline-block;margin-right: 3px;color: #f22020;font-weight: normal;font-style: normal;font-size: 11px}
.bookinfoText .gr_txt {position: relative;display: block;padding: 15px;background: #f6f6f6;font-size: 12px;line-height: 150%;margin-top: 10px;}
.bookinfoText .bookdtl {display: block;overflow: hidden;margin: 5px 0}
.bookinfoText .bookdtl li {position: relative;display: inline-block;float: left;padding: 0 20px 0 0;color: #808991;line-height: 25px;height: 25px;}
.bookinfoText .bookdtl li:after {position: absolute;top: 50%;right: 10px;width: 1px;height: 10px;margin-top: -5px;background: #bbb;content: "";}
.bookinfoText .bookdtl li:last-child:after {display: none}
.bookinfoText .reserve_book_text {position: relative;display: block;color: #f22020}

.book_list_purchase {position: absolute;bottom: 35px;left: 200px;display: block;}
.purchase_price {position: relative;display: block;overflow: hidden;}
.purchase_price .del {display: block;font-size: 16px;color: #888;}
.purchase_price .price {float: left;font-size: 16px;color: #1f8ce6;}
.purchase_price .price b {font-size: 22px;font-weight: bold;}
.purchase_price .price .discount {display: inline-block;font-size: 15px;color: #084e99;margin-left: 5px;vertical-align: top}
.purchase_price .point {margin-left: 10px}

.purchase_count {position: relative;display: block;overflow: hidden;margin-top: 5px}
.purchase_count button {position: relative;display: block;width: 28px;height: 28px;border-radius: 50%;border: 1px solid #d9e3e9 ;background: #fff;text-indent: -99999px;float: left;}
.purchase_count button:after {position: absolute;display: block;top: 0;left: 0;width: 100%;height: 28px;line-height: 26px;font-family: FontAwesome,LineAwesome;font-size: 15px;color: #999;text-align: center;text-indent: 0}
.purchase_count .minus_count:after {content: "\f28e"}
.purchase_count .plus_count:after {content: "\f2c2"}
.purchase_count .add_count {float: left;width: 40px;height: 28px;line-height: 26px;margin: 0 5px;text-align: center;text-indent: 0;border-radius: 3px;text-indent: 0}

.point {position: relative;display: inline-block;font-size: 13px;padding-left: 20px;line-height: 26px}
.point:before {position: absolute;top: 5px;left: 0;width: 16px;height: 16px;line-height: 17px;border-radius: 50%;background: #888;color: #fff;text-align: center;font-size: 12px;content: "P"}

.txtLst {position: relative;display: block;overflow: hidden;}
.txtLst ul {border-top: none !important}
.txtLst li {position: relative;display: block;padding: 0 0 0 10px !important;border-bottom: none !important;margin-bottom: 7px;line-height: 150% !important;min-height: 10px !important}
.txtLst li:last-child {margin-bottom: 0}
.txtLst li:after {position: absolute;top: 10px;left: 0;width: 5px;height: 1px;background: #bbb;content: "";}

.txtLst dl {border-top: none !important}
.txtLst dt {display: block;font-weight: 600;color: #084e99;margin-bottom: 10px}
.txtLst dd {position: relative;display: block;padding: 0 0 0 10px !important;border-bottom: none !important;margin-bottom: 7px;line-height: 150% !important;min-height: 10px !important}
.txtLst dd:last-child {margin-bottom: 0}
.txtLst dd:after {position: absolute;top: 10px;left: 0;width: 5px;height: 1px;background: #bbb;content: "";}

.boxTxt {position: relative;display: block;overflow: hidden;width: 420px;float: left;background: #f6f6f6;border: 1px solid #ddd;margin-bottom: 15px;padding: 15px;border-top: 2px solid #084e99}
.boxTxt:nth-child(odd) {margin-right: 15px;}
.boxTxt dl {border-top: none !important}
.boxTxt dt {position: relative;display: block;font-size: 15px;font-weight: 600;color: #084e99;margin-bottom: 7px;padding-left: 10px}
.boxTxt dt:before {position: absolute;top: 11px;left: 0;width: 3px;height: 3px;border-radius: 50%;background: #084e99;content: ""}
.boxTxt dd {position: relative;display: block;padding: 0 0 0 10px !important;border-bottom: none !important;margin-bottom: 7px;line-height: 150% !important;min-height: 10px !important}
.boxTxt dd:last-child {margin-bottom: 0}
.boxTxt dd:after {position: absolute;top: 10px;left: 0;width: 5px;height: 1px;background: #bbb;content: "";}

.oblock {position: relative;display: block;overflow: hidden}


.msg-wrap {display: block;border: 1px solid #ddd;background: #fafafa;text-align:center;font-size:15px;color:#333;padding:80px 0;}
.msg-wrap .tit {font-size:22px;font-weight:bold;letter-spacing:-1px;margin:15px 0;color:#1137a6;line-height:1;}
.msg-wrap:before {content:"";display:block;width:104px;height:80px;background:url("/static/images/design/content/msg-sprite.png") no-repeat center;margin:0 auto 30px;}

@media only screen and (max-width:1024px){
    .book_list_purchase {position: relative;bottom: 0;left: 0;margin-bottom: 15px}

    .msg-wrap {padding:60px 20px;box-sizing: border-box}
    .msg-wrap .tit {font-size:18px;}

    .boxTxt {width: 100%;box-sizing: border-box;}
    .boxTxt:nth-child(odd) {margin-right: 0;}
}

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

    .h3-title {font-size: 18px;}
    .h3-title:after {top: 7px;height: 16px;}

    .h4-title {line-height: 24px;font-size: 15px;margin-bottom: 7px}
    .h4-title:after {top: 11px;width: 4px;height: 4px;}

    .rating i {width: 14px;}
    .rating i:after {font-size: 12px;}

    .bookCoverBox {width: 94px;height: 136px;}
    .bookCoverBox .book {width: 94px;height: 136px;}
    .bookCoverBox .book img {width: 94px;height: 136px}
    .bookCoverBox .BookTpye_box:after {width: 15px;}
    .bookCoverBox .BookTpye_box:before {width: 15px;}

    .bookCoverBox.large {width: 118px;height: 168px;}
    .bookCoverBox.large .book {width: 118px;height: 168px;}
    .bookCoverBox.large .book img {width: 118px;height: 168px;}

    .purchase_price .del {font-size: 14px;}
    .purchase_price .price {font-size: 14px;}
    .purchase_price .price b {font-size: 18px;}
    .purchase_price .price .discount {font-size: 14px;}
}

@media only screen and (max-width:640px){
    .cont-total-box .total {display: block;float: none;clear: both}
    .cont-total-box .btn_group {display: block;float: none;clear: both}

    .bookCoverBox {width: 50px;height: 72px;}
    .bookCoverBox .book {width: 50px;height: 72px;}
    .bookCoverBox .book img {width: 50px;height: 72px}

    .bookCoverBox.large {width: 94px;height: 136px;}
    .bookCoverBox.large .book {width: 94px;height: 136px;}
    .bookCoverBox.large .book img {width: 94px;height: 136px;}

    .purchase_count button {width: 25px;height: 25px;}
    .purchase_count button:after {height: 25px;line-height: 22px;font-size: 15px;}
    .purchase_count .add_count {height: 25px;line-height: 21px;}

    .txtLst li {font-size: 13px}

    .txtLst dd {font-size: 13px}

    .boxTxt dt {font-size: 14px}
    .boxTxt dd {font-size: 13px}
}

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

    .h3-title {font-size: 16px;}
    .h3-title:after {top: 7px;height: 14px;}

    .bookinfoText .bookdtl li {padding: 0 10px 0 0;font-size: 13px;height: 20px;line-height: 20px}
    .bookinfoText .bookdtl li:after {right: 5px;}
    .bookinfoText .bookdtl li .rating {height: 20px;}
    .bookinfoText .bookdtl li .rating i {height: 20px;}
    .bookinfoText .bookdtl li .rating i:after {line-height: 20px;}


}

@media only screen and (max-width:400px){
    .bookCoverBox.large {width: 75px;height: 109px;}
    .bookCoverBox.large .book {width: 75px;height: 109px;}
    .bookCoverBox.large .book img {width: 75px;height: 109px;}

    .bookCoverBox.medium {width: 120px;height: 173px;}
    .bookCoverBox.medium .book {width: 120px;height: 173px;}
    .bookCoverBox.medium .book img {width: 120px;height: 173px;}
}


/*반응형 테이블,이미지*/
.rspvn-tableBox { position: relative;display: block;}
.rspvn-scroll {overflow:hidden }

.tbl_st01 {border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;clear:both;border-top:2px solid #333;background: #fff}
.tbl_st01 th, .tbl_st01 td {padding: 8px 10px;text-align:center;border:1px solid #ccc;line-height: 160%;word-wrap:break-word;word-break:keep-all;}
.tbl_st01 th {background:#f8f8f8;color:#222;}
.tbl_st01 a {color: #555}
.tbl_st01 small {font-weight: normal;letter-spacing: 0;color: #555;margin-left: 5px}
.tbl_st01.left td {text-align: left;padding: 10px 15px}

@media all and (max-width: 1200px) {
    .rspvn-tableBox.full {padding-top:120px;background: #f2f2f2 url("/static/images/design/content/rspvn-drag.png") no-repeat center 18px;background-size: 150px}
    .rspvn-tableBox.full:after, .rspvn-tableBox.full:before {position:absolute;top:50px;width:40px;height:20px;display: block;background-size: 40px !important;content:"";}
    .rspvn-tableBox.full:after { right:20px;background:url("/static/images/design/content/rspvn-arr02.png") no-repeat;}
    .rspvn-tableBox.full:before { left:20px;background:url("/static/images/design/content/rspvn-arr01.png") no-repeat;}

    .rspvn-scroll {position:relative;overflow-x:scroll;width: 100%;padding-top: 20px;background: #fff}
    .rspvn-tableBox.full .rspvn-scroll table {width: 1200px !important}

}
@media all and (max-width:640px) {
    .rspvn-tableBox {padding-top:120px;background: #f2f2f2 url("/static/images/design/content/rspvn-drag.png") no-repeat center 18px;background-size: 150px}
    .rspvn-tableBox:after, .rspvn-tableBox:before {position:absolute;top:50px;width:40px;height:20px;display: block;background-size: 40px !important;content:"";}
    .rspvn-tableBox:after { right:20px;background:url("/static/images/design/content/rspvn-arr02.png") no-repeat;}
    .rspvn-tableBox:before { left:20px;background:url("/static/images/design/content/rspvn-arr01.png") no-repeat;}

    .rspvn-scroll {position:relative;overflow-x:scroll;width: 100%;padding-top: 20px;background: #fff}

    .rspvn-scroll table {width:600px !important}

    .tbl_st01 {font-size: 13px;}
    .tbl_st01 th, .tbl_st01 td {padding:10px 8px;}
}
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	강의리스트
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*패키지 상단박스*/
.package-topBox {position: relative;display: block;overflow: hidden;background: #efefef;padding: 40px 35px;margin-bottom: 40px}
.package-topBox .title {display: block;text-align: center;font-size: 40px;color: #222;line-height: 45px;font-weight: 600;margin-bottom: 30px;letter-spacing: -0.05em}
.package-topBox ul {display: block;overflow: hidden;width: 700px;margin: 0 auto}
.package-topBox li {position: relative;display: block;padding-left: 120px;height: 45px;margin-bottom: 10px;}
.package-topBox li:last-child {margin-bottom: 0}
.package-topBox li  a {display: block;}
.package-topBox li .tit {position: absolute;top: 0;left: 0;width: 150px;height: 45px;color: #fff;text-align: center;line-height: 45px;font-size: 20px;border-radius: 40px;z-index: 10}
.package-topBox li .txt {position: relative;display: block;text-align: center;padding-left: 10px;background: #fff;font-size: 15px;color: #333;letter-spacing: -0.05em;
    font-weight: bold;border-radius: 45px;height: 45px;line-height: 45px;}

.package-topBox .st01 {background: #e96300 }
.package-topBox .st02 {background: #02a5a4 }
.package-topBox .st03 {background: #519d07 }
.package-topBox .st04 {background: #f03023 }
.package-topBox .st05 {background: #3c2c50 }
.package-topBox .st06 {background: #266729 }

/*강의 리스트*/
.lecture-list-wrap {position: relative;display: block;overflow: hidden;}
.lecture-list-wrap .item {position: relative;display: block;border: 1px solid #d0dbe1;margin-bottom: 30px;}
.lecture-list-wrap .item:before {position: absolute;top: 0;left: 0;width: 100%;height: 2px;background: #084e99;content: "";z-index: 1}
.lecture-list-wrap .item:last-child {margin-bottom: 0}

.lecture-list-wrap .item-top {position: relative;display: block;border-bottom: 1px solid #d0dbe1;padding: 15px 20px;padding-right: 230px;background: #eff3f8}
.lecture-list-wrap .title {position: relative;display: block;overflow: hidden}
.lecture-list-wrap .title a {float: left;font-size: 16px;line-height: 24px;color: #222;font-weight: bold;letter-spacing: -0.06em;margin-right: 5px;}
.lecture-list-wrap .title .status {display: inline-block;line-height: 24px;;background: #ccc;text-align: center;height: 24px;padding: 0 10px;font-size: 13px;border-radius: 3px;margin-top: -1px;vertical-align: middle}
.lecture-list-wrap .title .status.ing {background: #ec2851;color: #fff;}
.lecture-list-wrap .title .status.end {background: #5b616e;color: #fff;}
.lecture-list-wrap .title .status.due {background: #7ab605;color: #fff;}

.lecture-list-wrap .item-btn {position: absolute;top: 50%;right: 20px;margin-top: -15px}
.lecture-list-wrap .item-btn a {display: inline-block;vertical-align: top;text-align: center;height: 30px;border: 1px solid #d0dbe1;border-radius: 3px}
.lecture-list-wrap .item-btn .btn-cart {color: #999;font-size: 21px;line-height: 38px;width: 38px;background: #fff;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}
.lecture-list-wrap .item-btn .btn-cart .fe {line-height: 38px}
.lecture-list-wrap .item-btn .btn-dtil {border: 1px solid #084e99;background: #084e99;color: #fff;padding: 0 16px;line-height: 30px;font-size: 15px;margin-left: 2px;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}

@media only screen and (min-width:1025px) {
    .lecture-list-wrap .asbtn .btn-cart:hover {color: #084e99;border: 1px solid #084e99;}
    .lecture-list-wrap .asbtn .btn-dtil:hover {border: 1px solid #ca1921;background: #ca1921;}
}

.lecture-list-wrap .article {position: relative;display: block;padding: 15px 30px 15px 180px;border-bottom: 1px dotted #ccc;overflow: hidden;}
.lecture-list-wrap .article:last-child {border-bottom: none}
.lecture-list-wrap .tit-area {position: absolute;top: 50%;left: 30px;width: 130px;margin-top: -15px;overflow: hidden}
.lecture-list-wrap .tit-area .fe {float: left;font-size: 18px;font-weight: 600;color: #333;line-height: 30px;}
.lecture-list-wrap .tit-area .txt {float: left;font-size: 16px;font-weight: bold;color: #333;line-height: 30px;margin-left: 5px;letter-spacing: -0.06em}

.lecture-list-wrap .txt-area {position: relative;float: left;}
.lecture-list-wrap .txt-area li {display: block;font-size: 14px;color: #333;}
.lecture-list-wrap .txt-area li:last-child {margin-bottom: 0}
.lecture-list-wrap .article.last .txt-area li {font-size: 13px;color: #888}

.lecture-list-wrap .price-area {position: relative;display: block;height: 25px;padding: 15px 30px;background: #fafafa;overflow: hidden;}
.lecture-list-wrap .price-area div {line-height: 25px}
.lecture-list-wrap .price-area .date {display: inline-block;font-size: 14px;}
.lecture-list-wrap .price-area .del {float: left;font-size: 16px;color: #888;}
.lecture-list-wrap .price-area .price {float: left;font-size: 16px;color: #1f8ce6;margin-left: 10px}
.lecture-list-wrap .price-area .price b {font-size: 25px;font-weight: bold;}
.lecture-list-wrap .price-area .price .discount {display: inline-block;font-size: 15px;color: #084e99;margin-left: 5px;vertical-align: top}
.lecture-list-wrap .price-area .point {margin-left: 10px}

.lecture-list-wrap .item.busan:before {background: #f97408;}
.lecture-list-wrap .item.busan .item-top {background: #f9f5f1;}
.lecture-list-wrap .item.busan .btn-dtil {background: #f97408;border: 1px solid #f97408}
.lecture-list-wrap .item.busan .tit-area .fe, .lecture-list-wrap .item.busan .tit-area .txt {color: #f97408;}

.lecture-list-wrap .item.incheon:before {background: #069797;}
.lecture-list-wrap .item.incheon .item-top {background: #ecfafa;}
.lecture-list-wrap .item.incheon .btn-dtil {background: #069797;border: 1px solid #069797}
.lecture-list-wrap .item.incheon .tit-area .fe, .lecture-list-wrap .item.incheon .tit-area .txt {color: #069797;}

.academy-view-wrap {position: relative;display: block;overflow: hidden;}
.academy-title {position: relative;display: block;overflow: hidden;padding: 13px 20px;border-top: 2px solid #666;border-bottom: 1px solid #ddd;margin-bottom: 30px;
    background: #f6f6f6;font-size: 16px;color: #222;font-weight: 600;text-align: center;}
.academy-cont {display: block;padding: 0 0 30px;}
.academy-cont img {max-width: 100%}
.academy-cont-btn {position: relative;display: block;margin-top: 20px;text-align: center}
.academy-cont-btn img {max-width: 70% !important}
.academy-btn {display: block;overflow: hidden}
.academy-btn li {position: relative;float: left;width: 50%;background: #ecf1f6;text-align: center;height: 160px;padding: 30px 0}
.academy-btn li:first-child:after {position: absolute;top: 50%;right: 0;width: 1px;height: 160px;background: #d3dae1;margin-top: -80px;content: ""}
.academy-btn li .img {display: block;margin-bottom: 10px}
.academy-btn li .txt {display: block;}
.academy-btn li .txt span {display: block;font-size: 16px;}
.academy-btn li .txt b {display: block;font-size: 22px;color: #084e99}

.academy-board {position: relative;display: block;margin-bottom: 30px}


@media only screen and (max-width:1024px){
    /*패키지 상단박스*/
    .package-topBox ul {width: 100%}
    .package-topBox li {padding-left: 100px;}
    .package-topBox li .tit {width: 120px;font-size: 16px;}
    .package-topBox li .txt {text-align: left;padding-left: 40px;}

    /*강의 리스트*/
    .lecture-list-wrap .item-top {padding: 20px 150px 20px 30px !important;box-sizing: border-box}
    .lecture-list-wrap .title a {font-size: 18px;}

    .academy-cont {padding: 20px 0;}
    .academy-cont img {max-width: 100%;}
    .academy-btn li {padding: 20px 0}
}
@media only screen and (max-width:760px){
    /*강의 리스트*/
    .lecture-list-wrap .item-top {padding: 15px 40px 15px 20px !important;}
    .lecture-list-wrap .title a {font-size: 16px;line-height: 130%;}
    .lecture-list-wrap .title .status {line-height: 20px;height: 20px;padding: 0 8px;font-size: 11px;margin-top: -2px}

    .lecture-list-wrap .item-btn {right: 10px;margin-top: -15px;}
    .lecture-list-wrap .item-btn  a { width: 30px;height: 30px;border: none;border-radius: 50%}
    .lecture-list-wrap .item-btn .btn-dtil {border: none;background: #fff;color: #999;padding:0;line-height: 30px;font-size: 18px;margin-left: 0;text-indent: -99999px}
    .lecture-list-wrap .item-btn .btn-dtil:after {position: absolute;top: 0;left: 0;width: 100%;height: 30px;line-height: 30px;text-align: center;text-indent: 0;font-family: Feather;content: "\e930";}

    .lecture-list-wrap .item.busan .btn-dtil {color: #fff;}
    .lecture-list-wrap .item.incheon .btn-dtil {color: #fff;}

    .lecture-list-wrap .article {padding: 15px 15px 15px 150px;}
    .lecture-list-wrap .article.last {display: none;}
    .lecture-list-wrap .tit-area .fe {font-size: 18px;}
    .lecture-list-wrap .tit-area .txt {font-size: 16px;}

    .lecture-list-wrap .txt-area {position: relative;float: left;}
    .lecture-list-wrap .txt-area li {display: block;font-size: 13px;color: #666;line-height: 130%;margin-bottom: 7px}
    .lecture-list-wrap .txt-area li:last-child {margin-bottom: 0}
    .lecture-list-wrap .article.last  {font-size: 13px;color: #888}

    .academy-btn li {height: 150px;}
    .academy-btn li:first-child:after {height: 150px;margin-top: -75px}
    .academy-btn li .txt span {font-size: 14px;}
    .academy-btn li .txt b {font-size: 20px}
}
@media only screen and (max-width:640px){
    /*패키지 상단박스*/
    .package-topBox {display: none;}

    /*강의 리스트*/
    .lecture-list-wrap .item {margin-bottom: 20px}
    .lecture-list-wrap .item-top {padding: 15px 40px 15px 10px !important;}
    .lecture-list-wrap .title a {font-size: 15px;}

    .lecture-list-wrap .tit-area .fe {font-size: 16px;}
    .lecture-list-wrap .tit-area .txt {font-size: 15px;}

    .lecture-list-wrap .price-area .fr {float: none}
    .lecture-list-wrap .price-area .date {display: none}
    .lecture-list-wrap .price-area .del {font-size: 14px;}
    .lecture-list-wrap .price-area .price {font-size: 14px}
    .lecture-list-wrap .price-area .price b {font-size: 20px;}
    .lecture-list-wrap .price-area .price .discount {font-size: 14px;}
}

@media only screen and (max-width:480px){
    /*강의 리스트*/
    .lecture-list-wrap .article {padding: 10px;}
    .lecture-list-wrap .tit-area {position: relative;top: 0;left: 0;margin-top: 0}
    .lecture-list-wrap .tit-area .fe {font-size: 15px}
    .lecture-list-wrap .tit-area .txt {font-size: 14px;}

    .lecture-list-wrap .price-area {padding: 15px;}
    .lecture-list-wrap .price-area .del {display: none}
    .lecture-list-wrap .price-area .price {margin-left: 0}

    .lecture-list-wrap .item.busan .tit-area, .lecture-list-wrap .item.incheon .tit-area {position: absolute;top: 50%;left: 10px;width: 100px;margin-top: -15px;overflow: hidden}

    .lecture-list-wrap .item.busan .article, .lecture-list-wrap .item.incheon .article {padding: 10px 10px 10px 120px;}

    .academy-btn li {height: 120px;}
    .academy-btn li:first-child:after {height: 120px;margin-top: -60px}
    .academy-btn li .img img {width: 70px;}
    .academy-btn li .btn {font-size: 14px;padding: 8px 15px}
    .academy-btn li .txt span {font-size: 13px;}
    .academy-btn li .txt b {font-size: 18px}

}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	교재리스트
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*교재리스트*/
.book-list-wrap {position: relative;display: block;border-top: 1px solid #d0dbe1;}
.book-list-wrap > ul > li {position: relative;display: block;padding: 30px 180px 30px 200px;height: 170px;border-bottom: 1px solid #d0dbe1}
.book-list-wrap > ul > li:hover {background: #fafafa}
.book-list-wrap > ul > li .checkbox {position: absolute;top: 50%;left: 20px;margin-top: -10px}
.book-list-wrap > ul > li .bookCoverBox {position: absolute;top: 30px;left: 60px;}

.list_btBox {position: absolute;top: 50%;right: 20px;width: 130px;height: 93px;margin-top: -46px;overflow: hidden}
.list_btBox a {position: relative;display: block;margin: 5px 0;font-size: 16px;}

@media only screen and (max-width:1024px){
    .book-list-wrap > ul > li {padding: 30px 30px 30px 200px;height: auto}
    .list_btBox {position: relative;top:0;right: 0;width: 100%;height: auto;margin-top: 0;}
    .list_btBox a {display: inline-block;margin: 0 2px;}
}
@media only screen and (max-width:760px){
    .book-list-wrap > ul > li {padding: 20px 20px 20px 160px;height: auto}
    .book-list-wrap > ul > li .checkbox {top: 20px;left: 10px;margin-top: 0}
    .book-list-wrap > ul > li .bookCoverBox {top: 20px;left: 45px;}
}
@media only screen and (max-width:640px){
    .book-list-wrap > ul > li {padding: 20px 20px 20px 110px;height: auto}
    .list_btBox a {font-size: 14px;}
    .book-foot-btn {text-align: left !important}
}

@media only screen and (max-width:420px){
    .book-list-wrap > ul > li {padding: 42px 15px 15px 65px;height: auto}
    .book-list-wrap > ul > li .checkbox {top: 15px;left:0;}
    .book-list-wrap > ul > li .bookCoverBox {top: 45px;left: 0;}

}



/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	상세뷰 공통요소
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#view-detail-wrap {position: relative;display: block;width: 1200px;margin: 0 auto;}
.view-detail-top-wrap {position: relative;display: block;padding-top: 40px}
.view-detail-top-wrap:before {position: absolute;top: 40px;left: 0;width: 100%;height: 100%;background: #fff;content: "";z-index: 2}
.view-detail-top-wrap:after {position: absolute;top: 0;left: 50%;width: 2000px;height: 100%;margin-left: -1000px;background: #f4f4f4;content: "";z-index: 0}
.view-detail-top {position: relative;display: block;z-index: 10}

.detail-title {position: relative;display: block;overflow: hidden;background: #c6cbd1;padding: 18px 240px 18px 30px}
.detail-title .title {float: left;font-size: 22px;color: #151515;font-weight: bold;line-height: 30px}
.detail-title .txt_type {margin: 5px 0 0 5px;background: #fff;}

.view-detail-top-wrap .detail-info {position: relative;display: block;border: 1px solid #c9d3e2;background: #f5f9ff;padding: 8px 15px}
.view-detail-top-wrap .detail-info ul {display: block;}
.view-detail-top-wrap .detail-info li {position: relative;display: block;padding: 12px 10px 12px 120px;min-height: 25px;border-bottom: 1px dotted #c9d3e2;line-height: 25px;font-size: 13px;color: #666}
.view-detail-top-wrap .detail-info li:last-child {border-bottom: none}
.view-detail-top-wrap .detail-info li .title {position: absolute;top: 12px;left: 10px;width: 100px;color: #222;font-weight: bold}
.view-detail-top-wrap .detail-info li .delivery {font-size: 15px;display: inline-block;margin-right: 3px;vertical-align: top;line-height: 22px;}
.view-detail-top-wrap .detail-info li .delivery.free {color: #f44336}
.view-detail-top-wrap .detail-info li del {display: inline-block;font-size: 15px;color: #777}
.view-detail-top-wrap .detail-info li .price {display: block;font-size: 16px;color: #1f8ce6;margin: 3px 0;font-family: AritaDotum;line-height: 130%}
.view-detail-top-wrap .detail-info li .price b {display: inline-block;font-size: 25px;font-weight: bold;}
.view-detail-top-wrap .detail-info li .price .discount {display: inline-block;font-size: 14px;color: #084e99;font-weight: normal}
.view-detail-top-wrap .detail-info li select {width: 100%;max-width: 230px}
.view-detail-top-wrap .detail-info li .block {display: block !important}

.view-detail-top-wrap .detail-info .priceBtn {position: relative;display: block;overflow: hidden;margin: 5px 0 15px}
.view-detail-top-wrap .detail-info .priceBtn a {float: left;vertical-align: top;text-align: center;height: 42px;font-size: 15px;line-height: 42px;border: 1px solid #084e99;border-radius: 3px;letter-spacing: -0.05em;}
.view-detail-top-wrap .detail-info .priceBtn a small {font-size: 14px;margin-left: 3px;color: rgba(255,255,255,0.7)}
.view-detail-top-wrap .detail-info .priceBtn .btn-cart {width: 118px;color: #084e99;background: #fff;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}
.view-detail-top-wrap .detail-info .priceBtn .btn-cart .fe {line-height: 38px}
.view-detail-top-wrap .detail-info .priceBtn .btn-buy {width: 190px;background: #084e99;color: #fff;margin-left: 5px;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}
@media only screen and (min-width:1025px) {
    .detail-info .priceBtn .btn-buy:hover {border: 1px solid #ca1921;background: #ca1921;}
}

.view-bottom-detail-wrap {position: relative;display: block;padding-top: 60px;z-index: 10}
.view-bottom-tab-wrap {position: absolute;display: block;top: 0;left: 0;width: 100%;height: 40px;padding: 10px 0;z-index: 100}
.view-bottom-tab-wrap:before {position: absolute;top: 0;left: 50%;width: 2000px;height: 100%;margin-left: -1000px;background: #a3acb5;content: ""}

.detail-tab {position: relative;display: block;overflow: hidden;width: 1200px;margin: 0 auto}
.tab-nav {float: left;overflow: hidden}
.tab-nav li {float: left;margin-right: 10px;}
.tab-nav li:last-child {margin-right: 0}
.tab-nav li a {display: block;padding: 0 25px;line-height: 40px;height: 40px;font-size: 18px;color: #fff;border-radius: 40px}
.tab-nav li a small {font-size: 15px}
.tab-nav li.active a {background: #858f9a}

.tab-btn {opacity: 0;position: relative;float: right;margin-top: 3px;transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.tab-btn a {display: inline-block;vertical-align: top;text-align: center;height: 38px;font-size: 15px;border: 1px solid #084e99;border-radius: 3px;letter-spacing: -0.05em;}
.tab-btn a small {font-size: 14px;margin-left: 3px;color: rgba(255,255,255,0.7)}
.tab-btn .btn-cart {width: 120px;color: #084e99;line-height: 38px;background: #fff;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}
.tab-btn .btn-cart .fe {line-height: 38px}
.tab-btn .btn-buy {width: 180px;background: #084e99;color: #fff;line-height: 38px;margin-left: 5px;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}
@media only screen and (min-width:1025px) {
    .tab-btn .btn-buy:hover {border: 1px solid #ca1921;background: #ca1921;}
}

.view-bottom-tab-wrap.scrollFixed {position: fixed;}
.view-bottom-tab-wrap.scrollFixed .tab-btn {opacity: 1;margin-top: 0}

.view-bottom-tabViw-wrap {position: relative;display: block;overflow: hidden;padding: 40px 0;}
.detail-tab-view {position: relative;display: block;line-height: 160%;font-size: 15px}
.detail-tab-view h4 {display: block;margin-bottom: 10px;font-weight: bold;color: #333;line-height: 130%;font-size: 20px}
.detail-tab-view .line {position: relative;display: block;height: 1px;background: #ddd;margin: 30px 0}

/*커리큘럼 리스트*/
.view-curriculum-list {position: relative;display: block;overflow: hidden}
.view-curriculum-list ul {display: block;overflow: hidden;}
.view-curriculum-list li {position: relative;display: block;overflow: hidden;width: 998px;border: 1px solid #d0dbe1;border-radius: 5px;margin-bottom: 10px;padding: 15px 115px 15px 85px}
.view-curriculum-list li .number {position: absolute;top: 0;left: 0;width: 65px;height: 100%;background: #f3f3f3;}
.view-curriculum-list li .number span {position: absolute;top: 50%;left: 0;width: 100%;height: 30px;line-height: 30px;margin-top: -15px;font-size: 15px;color: #333;font-weight: bold;text-align: center;}
.view-curriculum-list li .txtBox {position: relative;display: block;width: 840px;}
.view-curriculum-list li .txtBox b {display: block;font-weight: bold;color: #222;font-size: 14px;line-height: 26px}
.view-curriculum-list li .txtBox span {display: block;}
.view-curriculum-list li .timeBox {position: absolute;top: 50%;right: 150px;width: 80px;height: 30px;margin-top: -15px;font-size: 16px;text-align: center}
.view-curriculum-list li .timeBox span {float: left;line-height: 30px;}
.view-curriculum-list li .timeBox .txt {margin-left: 3px}
.view-curriculum-list li .btnBox  {position: absolute;top: 50%;right: 20px;width: 100px;height: 30px;margin-top: -15px;text-align: center}
.view-curriculum-list li .btnBox .btn-play {position: relative;display: block;background: #1f8ce6;overflow: hidden;border-radius: 3px;line-height: 30px;padding: 0 17px;}
.view-curriculum-list li .btnBox .btn-play span {float: left;line-height: 30px;font-size: 13px;color: #fff;}
.view-curriculum-list li .btnBox .btn-play .txt {margin-left: 3px}

.ui-accordion-content .view-curriculum-list li {width: 937px}

/*북 리스트*/
.lecture-book-list {position: relative;display: block;border-top: 1px solid #d0dbe1;overflow: hidden}
.lecture-book-list > ul > li {position: relative;float: left;width: 400px;padding: 30px 0 30px 200px;height: 170px;border-bottom: 1px solid #d0dbe1}
.lecture-book-list > ul > li:hover {background: #fafafa}
.lecture-book-list > ul > li .check {position: absolute;top: 50%;left: 20px;margin-top: -10px}
.lecture-book-list > ul > li .bookCoverBox {position: absolute;top: 30px;left: 60px;}
.lecture-book-list > ul > li .bookinfoText .title {display: block;height: auto;line-height: 130%}
.lecture-book-list .bookdtl li {display: block;float: none;padding: 0}
.lecture-book-list .bookdtl li:after {display: none}
.lecture-book-list .bookdtl li b {display: inline-block;vertical-align: top;width: 80px;color: #636b71}
.lecture-book-list .bookdtl li:last-child:after {display: none}

/*스프링분철*/
.spring_info {position: relative;display: block;border: 1px solid #d0dbe1;padding: 40px 0;text-align: center}
.spring_info p {position: relative;display: block;text-align: center;font-size: 20px;color: #666;line-height: 130%}
.spring_info p b {color: #222}
.spring_info p span {font-size: 16px}
.spring_info .img {position: relative;display: block;width: 450px;margin: 20px auto;background: #f3f3f3;padding: 20px 0;border-radius: 10px;}
.spring_info ul {display: inline-block;}
.spring_info li {line-height: 22px;font-size: 16px}

.spring_event {position: relative;display: block;width: 320px;line-height: 45px;border-radius: 45px;margin: 20px auto 0;background: #04935c;color: #fff;font-size: 18px}
.spring_event span {color: #fff006}

/*택배사*/
.delivery_info {position: relative;display: block;border: 1px solid #d0dbe1;padding: 40px 0;text-align: center}
.delivery_info ul {display: block;padding-bottom: 20px;border-bottom: 1px dotted #bbb;width: 600px;margin: 0 auto 20px}
.delivery_info li {display: block;font-size: 18px;color: #555;line-height: 33px}
.delivery_info li img {vertical-align: top}
.delivery_info div {width: 360px;margin: 0 auto;display: block;text-align: center;font-size: 16px;line-height: 160%;padding: 30px 0 30px 200px;background: url("/static/images/design/content/delivery_img.png") no-repeat;}

.delivery_text {position: relative;display: block;border-top: 2px solid #d0dbe1;}
.delivery_text li {position: relative;display: block;border-bottom: 1px solid #d0dbe1;padding: 25px 20px 25px 220px}
.delivery_text li .title {position: absolute;top: 50%;left: 20px;font-size: 16px;color: #333;font-weight: bold;line-height: 30px;margin-top: -15px}
.delivery_text li:last-child .title {line-height: 22px;margin-top: -21px}

@media only screen and (max-width:1024px){
    /*상세화면*/
    #view-detail-wrap {width: 100%;padding: 0 15px 20px;box-sizing: border-box;}
    .view-detail-top-wrap {padding-top: 0}
    .view-detail-top-wrap:before {display: none}
    .view-detail-top-wrap:after {display: none}

    .detail-title {padding: 15px 20px}
    .detail-title .title {font-size: 20px;line-height: 140%}

    .view-detail-top-wrap .detail-info li {padding: 10px 10px 10px 120px;}
    .view-detail-top-wrap .detail-info li .title {top: 10px;width: 100px;font-size: 14px;}
    .view-detail-top-wrap .detail-info li .price {display: inline-block;margin-right: 5px}
    .view-detail-top-wrap .detail-info .priceBtn {text-align: center}
    .view-detail-top-wrap .detail-info .priceBtn a {float: none;display: inline-block;vertical-align: top}

    .view-bottom-detail-wrap {padding-top: 60px;}
    .view-bottom-tab-wrap {height: 60px;padding: 10px 15px;box-sizing: border-box}
    .view-bottom-tab-wrap:before {width: 100%;padding: 0 15px;left: -15px;margin-left: 0}

    .detail-tab {width: 100%;}
    .tab-nav {float: none;text-align: center}
    .tab-nav li {float: none;display: inline-block;}

    .tab-btn {display: none;}

    .view-bottom-tab-wrap.scrollFixed {position: relative;}

    .view-bottom-tabViw-wrap {padding: 30px 0;}
    .detail-tab-view {font-size: 14px}
    .detail-tab-view img {max-width: 100%}

    /*커리큘럼 리스트*/
    .view-curriculum-list li {width: 100%;padding: 10px 140px 10px 85px;box-sizing: border-box}
    .view-curriculum-list li .txtBox {width: 100%;}
    .view-curriculum-list li .txtBox b {font-size: 14px;line-height: 24px}
    .view-curriculum-list li .timeBox {position: relative;display: block;top: 0;right: 0;width: 100%;height: auto;margin-top: 0;overflow: hidden}

    .ui-accordion-content .view-curriculum-list li {width: 100%}

    .lecture-book-list > ul > li {float: none;width:100%;box-sizing: border-box;height: auto}
}
@media only screen and (max-width:760px){
    /*상세화면*/
    .detail-title .title {font-size: 18px;line-height: 130%}

    .view-detail-top-wrap .detail-info li .title {font-size: 13px;}
    .view-detail-top-wrap .detail-info li .price {font-size: 15px}
    .view-detail-top-wrap .detail-info li .price b {font-size: 22px;}
    .view-detail-top-wrap .detail-info li .price .discount {font-size: 13px;}

    .view-bottom-detail-wrap {padding-top: 0;}
    .view-bottom-tab-wrap {position: relative;height: 50px;}

    .tab-nav {float: none;text-align: center}
    .tab-nav li {float: none;display: inline-block;}
    .tab-nav li a {padding: 0 20px;line-height: 30px;height: 30px;font-size: 15px;border-radius: 30px}
    .tab-nav li a small {font-size: 13px}

    /*커리큘럼 리스트*/
    .view-curriculum-list li {padding: 10px 20px 10px 65px;}
    .view-curriculum-list li .number {width: 50px;}
    .view-curriculum-list li .number span {font-size: 13px;}
    .view-curriculum-list li .txtBox b {font-size: 13px;line-height: 150%}
    .view-curriculum-list li .timeBox {font-size: 13px}
    .view-curriculum-list li .btnBox {position: relative;display: block;top: 0;right: 0;width: 100%;height: auto;margin-top: 0;overflow: hidden}
    .view-curriculum-list li .btnBox a {display: inline-block !important}

    .bookinfoText .title {font-size: 16px;}

    .lecture-book-list > ul > li {padding: 30px 0 30px 160px;}
    .lecture-book-list > ul > li .check {top: 27px;left: 10px;margin-top: 0}
    .lecture-book-list > ul > li .bookCoverBox {left: 40px}

    /*스프링분철*/
    .spring_info {padding: 30px 0;}
    .spring_info p {font-size: 18px;}
    .spring_info p span {font-size: 15px}
    .spring_info .img {width: 80%;}
    .spring_info .img img {width: 80%;}
    .spring_info li {font-size: 15px}

    .spring_event {width: 300px;font-size: 15px}
    .spring_event span {color: #fff006}

    /*택배사*/
    .delivery_info {padding: 30px 0;}
    .delivery_info ul {width: 100%}
    .delivery_info li {font-size: 16px;line-height: 26px}
    .delivery_info li img {margin-bottom: 5px}
    .delivery_info div {width: 100%;font-size: 14px;padding: 120px 20px 0 ;background: url("/static/images/design/content/delivery_img.png?211224") no-repeat center top;box-sizing: border-box}

    .delivery_text li {padding: 20px 15px}
    .delivery_text li .title {position: relative;top: 0;left: 0;margin-top: 0;margin-bottom: 5px;line-height: 130%}
    .delivery_text li:last-child .title {line-height: 130%;margin-top: 0}
    .delivery_text li:last-child .title br {display: none}

}
@media only screen and (max-width:640px){
    /*상세화면*/
    .detail-title {background: none;padding: 15px 0;overflow: inherit;height: auto;}
    .detail-title:after {position: absolute;top: 0;left: -15px;width: 100%;height: 100%;background: #c6cbd1;padding: 0 15px;content: "";z-index: 0}
    .detail-title .title {position: relative;display: inline-block;float: none;font-size: 17px;line-height: 140%;z-index: 10}
    .detail-title .txt_type {position: relative;display: inline-block;float: none;margin: 3px 0 0 5px;z-index: 10}

    .tab-nav li a {padding: 0 15px;}

    .bookinfoText .title {font-size: 15px;line-height: 150%}
    .bookinfoText .title .ev_txt {font-size:11px;line-height: 18px;margin-top: 3px}

    .lecture-book-list > ul > li {padding: 20px 0 20px 110px;}
    .lecture-book-list > ul > li .check {top: 18px;}
    .lecture-book-list > ul > li .bookCoverBox {top: 20px}

    .detail-tab-view h4 {font-size: 17px}
}
@media only screen and (max-width:480px){
    .detail-title .title {font-size: 15px;}
    .detail-title .txt_type {margin: 1px 0 0 5px;}

    .view-detail-top-wrap .detail-info .priceBtn .btn-cart {width: 100px;}
    .view-detail-top-wrap .detail-info .priceBtn .btn-buy {width: 140px;}

    .view-bottom-tab-wrap {padding: 0}
    .view-bottom-tab-wrap:before {background: #ddd;}

    .tab-nav {display: block;width: 100%;}
    .tab-nav li {width: 25%;margin-right: 0;float: left;}
    .tab-nav li a {position: relative;padding: 0;line-height: 50px;height: 50px;font-size: 14px;border-radius: 0;color: #666}
    .tab-nav li.active a {background: none;color: #494d52;font-weight: bold}
    .tab-nav li.active a:after {position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: #494d52;content: ""}

    /*스프링분철*/
    .spring_info {padding: 20px  15px;}
    .spring_info p {font-size: 16px;}
    .spring_info p span {font-size: 14px}
    .spring_info li {font-size: 14px}

    .spring_event {width: 260px;font-size: 14px;line-height: 35px;height: 35px}
    .spring_event span {color: #fff006}

    /*택배사*/
    .delivery_info {padding: 20px 15px;}
    .delivery_info li {font-size: 14px;line-height: 22px}
    .delivery_info li img {width: 150px}
    .delivery_info div br {display: none}

    .delivery_text li {font-size: 13px}
}
@media only screen and (max-width:370px){
    .detail-title .title {font-size: 14px;}
    .detail-title .txt_type {margin: 0 0 0 5px;}
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	상세뷰_상단 강의영역
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.detail-lecture-topCont {position: relative;display: block;padding: 40px;overflow: hidden;z-index: 10}
.detail-topCont-left {float: left;width: 436px;}
.detail-topCont-right {float: right;width: 645px;}

.detail-lecture-topCont .detail-thumbnail{position: relative;display: block;}
.detail-lecture-topCont .detail-thumbnail img {width: 436px;height: 370px;}


.review-rating {position: relative;display: block;overflow: hidden;text-align: center;background: #ecf1f5;padding: 12px 0;height: 25px}
.review-rating .title {display: inline-block;vertical-align: top;font-size: 16px;color: #333;font-weight: bold;line-height: 25px;margin-right: 10px}
.review-rating .rating i {color: #a1a9b3}
.review-rating .rating i.on {color: #084e99}

.detail-cont {position: relative;display: block;padding: 0 40px 40px;overflow: hidden;z-index: 10}
.detail-cont .area-title {position: relative;display: block;overflow: hidden;line-height: 30px;margin-bottom: 10px}
.detail-cont .area-title span {position: relative;display: inline-block;float: left;font-weight: bold;color: #222;font-size: 20px;line-height: 130%}
.detail-cont .area-title span:after {position: absolute;bottom: 5px;right: -8px;width: 6px;height: 6px;border-radius: 50%;background: #084e99;content: ""}
.detail-cont .area-title small {float: left;margin-left: 15px;font-size: 13px;}

.detail-cont .lecture-item {position: relative;display: block;overflow: hidden;border: 1px solid #d0dbe1;background: #fafafa}
.detail-cont .lecture-item .article {position: relative;display: block;padding: 25px 20px 25px 150px;border-bottom: 1px dotted #ccc;overflow: hidden}
.detail-cont .lecture-item .article.last {border-bottom: none;}
.detail-cont .lecture-item .tit-area {position: absolute;top: 50%;left: 40px;width: 100px;margin-top: -15px;overflow: hidden}
.detail-cont .lecture-item .tit-area .fe {float: left;font-size: 20px;font-weight: 600;color: #333;line-height: 30px;}
.detail-cont .lecture-item .tit-area .txt {float: left;font-size: 18px;font-weight: bold;color: #333;line-height: 30px;margin-left: 5px}

.detail-cont .lecture-item .txt-area {position: relative;float: left;}
.detail-cont .lecture-item .txt-area li {display: block;font-size: 14px;color: #333;margin-bottom: 5px;padding-right: 440px}
.detail-cont .lecture-item .txt-area li:last-child {margin-bottom: 0}

.detail-cont .lecture-item .price-area {position: absolute;top: 50%;right: 0;margin-top: -13px;height: 26px;width: 165px;padding: 0 120px 0 180px;line-height: 150%}
.detail-cont .lecture-item .price-area.discount-add {height: 48px;margin-top: -24px;}
.detail-cont .lecture-item .price-area .date {position: absolute;display: block;top: 50%;left:0;width: 155px;height: 26px;font-size: 14px;line-height: 26px;margin-top: -13px;overflow: hidden}
.detail-cont .lecture-item .price-area .point {position: absolute;display: block;top: 50%;right: 0;width: 100px;margin-top: -13px;}
.detail-cont .lecture-item .price-area .del {display: block;font-size: 16px;color: #888;}
.detail-cont .lecture-item .price-area .price {display: block;font-size: 16px;color: #1f8ce6;line-height: 26px}
.detail-cont .lecture-item .price-area .price b {font-size: 20px;font-weight: bold;}
.detail-cont .lecture-item .price-area .price .discount {display: inline-block;font-size: 14px;color: #084e99;margin-left: 5px}

.detail-cont .lecture-item .option-area {position: relative;display: block;overflow: hidden}
.detail-cont .lecture-item .option-area li {position: relative;display: block;overflow: hidden;min-height: 48px;font-size: 15px;color: #333;padding: 20px 440px 20px 0;border-bottom: 1px dotted #ccc}
.detail-cont .lecture-item .option-area li:first-child {margin-top: -20px}
.detail-cont .lecture-item .option-area li:last-child {margin-bottom: 0;border-bottom: none}
.detail-cont .lecture-item .option-area .option-group {position: relative;overflow: hidden;display: block;}
.detail-cont .lecture-item .option-area .price-area {right: -20px;padding: 0 120px 0 0;}
.detail-cont .lecture-item .option-area .option-group select {width: 100%;max-width: 230px;margin-top: 5px}

.detail-cont .gift-item {position: relative;display: block;overflow: hidden;border: 1px solid #d0dbe1;background: #fafafa}
.detail-cont .gift-item .article {position: relative;display: block;padding: 20px 20px 20px 150px;border-bottom: 1px dotted #ccc;overflow: hidden;}
.detail-cont .gift-item .article.last {border-bottom: none;}
.detail-cont .gift-item .article.soldout:after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);content: "";z-index: 10}
.detail-cont .gift-item .article.soldout:before {position: absolute;top: 50%;left: 50%;width: 150px;height: 40px;border-radius: 40px;background: #084e99;color: #fff;text-align: center;margin: -20px 0 0 -75px;
    font-size: 18px;line-height: 40px;content: "품절";z-index: 11}
.detail-cont .gift-item .chek-area {position: absolute;top: 50%;left: 20px;height: 20px;margin-top: -10px;}
.detail-cont .gift-item .chek-area label {font-size: 15px;color: #222;font-weight: 600;padding-left: 3px}
.detail-cont .gift-item .gift-title {display: block;font-size: 13px;font-weight: 600;color: #333;line-height: 130%}
.detail-cont .gift-item .gift-img {display: block;overflow: hidden;margin-top: 10px}
.detail-cont .gift-item .gift-img img { max-height: 120px; }

.detail-total-price {position: relative;display: block;overflow: hidden;border: 1px solid #d0dbe1;background: #f6f6f6;padding: 30px;width: 1058px;margin: 0 auto 30px;z-index: 10}
.detail-total-price .total-title {float: left;font-size: 20px;font-weight: bold;color: #222;line-height: 40px}
.detail-total-price .total-price {float: right;}
.detail-total-price .total-price li {position: relative;float: left;font-size: 18px;color: #222;line-height: 40px;padding-left: 50px;}
.detail-total-price .total-price li b {font-weight: bold}
.detail-total-price .total-price li:after {position: absolute;top: 0;left: 10px;width: 30px;height: 40px;line-height: 40px;color: #bbb;content: "+";text-align: center;font-weight: bold;}
.detail-total-price .total-price li:first-child {padding-left: 0}
.detail-total-price .total-price li:first-child:after {display: none}
.detail-total-price .total-price li.total {font-size: 20px;font-weight: bold;line-height: 40px;color: #1f8ce6}
.detail-total-price .total-price li.total b {display: inline-block;font-size: 30px;font-weight: bold;}
.detail-total-price .total-price li.total:after {content: "=";}

.detail-buy-btn {position: relative;display: block;overflow: hidden;padding: 0 40px 40px;text-align: center;z-index: 10}
.detail-buy-btn a {display: inline-block;vertical-align: top;text-align: center;height: 50px;width: 200px;font-size: 17px;border: 1px solid #084e99;border-radius: 5px;letter-spacing: -0.05em;}
.detail-buy-btn .btn-cart {color: #084e99;line-height: 50px;background: #fff;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}
.detail-buy-btn .btn-cart .fe {line-height: 38px}
.detail-buy-btn .btn-buy {background: #084e99;color: #fff;line-height: 50px;margin-left: 5px;transition:all 0.1s; -webkit-transition:all 0.1s; -moz-transition:all 0.1s;}


@media only screen and (max-width:1024px){
    .detail-lecture-topCont {padding: 30px 0;}
    .detail-topCont-left {width: 42%;}
    .detail-topCont-right {width: 55%;}
    .detail-lecture-topCont .detail-thumbnail img {width: 100%;height: auto}

    .detail-cont {padding: 0 0 30px;}

    .detail-cont .lecture-item .article {padding: 20px;}
    .detail-cont .lecture-item .tit-area {position: relative;top: 0;left: 0;width: 100%;margin-top: 0;margin-bottom: 10px}

    .detail-cont .lecture-item .txt-area {float: none;}
    .detail-cont .lecture-item .txt-area li {padding-right: 0}

    .detail-cont .lecture-item .price-area {position: relative;top: 0;right: 0;margin-top: 10px;height: auto;width: auto;padding: 0;}
    .detail-cont .lecture-item .price-area.discount-add {height: auto;margin-top:0;}
    .detail-cont .lecture-item .price-area .date {display: none;}
    .detail-cont .lecture-item .price-area .point {position: relative;display: block;float: left;top: 0;right: 0;margin-top: 0;margin-left: 7px;}
    .detail-cont .lecture-item .price-area .del {float: left;margin-right: 5px;line-height: 26px}
    .detail-cont .lecture-item .price-area .price {float: left;}
    .detail-cont .lecture-item .price-area .price b {line-height: 26px}

    .detail-cont .lecture-item .option-area li {padding-right: 0;}
    .detail-cont .lecture-item .option-area .price-area {padding: 0;right: 0}

    .detail-cont .gift-item .article {padding: 20px 20px 20px 130px}
    .detail-cont .gift-item .gift-img img {max-width: 100%}

    .detail-total-price {padding: 25px;width: 100%;box-sizing: border-box}
    .detail-total-price .total-price li {font-size: 16px;padding-left: 30px;}
    .detail-total-price .total-price li:after {left: 3px;width: 25px;}
    .detail-total-price .total-price li.total {font-size: 17px}
    .detail-total-price .total-price li.total b {font-size: 26px;}
}
@media only screen and (max-width:760px){
    .detail-topCont-left {width: 100%;margin-bottom: 20px;float: none}
    .detail-topCont-right {width: 100%;float: none}

    .detail-cont {padding: 0 0 30px;}
    .detail-cont .area-title span {font-size: 17px;}
    .detail-cont .area-title span:after {right: -7px;width: 5px;height: 5px;}
    .detail-cont .area-title small {font-size: 12px;}

    .detail-cont .lecture-item .txt-area {float: none;margin-bottom: 10px}
    .detail-cont .lecture-item .txt-area select {max-width: 200px}

    .detail-cont .gift-item .gift-img {display: none}
    .detail-cont .gift-item .article.soldout:before {width: 120px;height: 30px;border-radius: 30px;margin: -15px 0 0 -60px;font-size: 15px;line-height: 30px;}

    .detail-total-price {padding: 10px 20px 10px 160px;}
    .detail-total-price .total-title {position: absolute;top: 50%;left: 20px;line-height: 30px;height: 30px;margin-top: -15px;float: none;font-size: 18px;}
    .detail-total-price .total-price {float: none;display: block;}
    .detail-total-price .total-price li {display: block;width: 100%;float: none;padding-left: 0;text-align: right;border-bottom: 1px dotted #ccc}
    .detail-total-price .total-price li:last-child {border-bottom: none}
    .detail-total-price .total-price li:after {display: none}

    .detail-buy-btn {padding: 0 0 30px}
    .detail-buy-btn a {height: 40px;width: 150px;font-size: 17px;}
    .detail-buy-btn .btn-cart {line-height: 40px}
    .detail-buy-btn .btn-cart .fe {line-height: 28px}
    .detail-buy-btn .btn-buy {line-height: 40px;}
}
@media only screen and (max-width:640px){
    .detail-cont .lecture-item .article {padding: 15px;margin-bottom: -1px}
    .detail-cont .lecture-item .chek-area {top: 20px;left: 10px;margin-top: 0;}
    .detail-cont .lecture-item .tit-area {position: relative;top: 0;left: 0;width: 100%;margin-top: 0;margin-bottom: 5px}
    .detail-cont .lecture-item .tit-area .fe {font-size: 18px}
    .detail-cont .lecture-item .tit-area .txt {font-size: 16px;}
    .detail-cont .lecture-item .txt-area {font-size: 13px;}
    .detail-cont .lecture-item .price-area .date {font-size: 14px;}
    .detail-cont .lecture-item .price-area .del {font-size: 13px;}
    .detail-cont .lecture-item .price-area .price {font-size: 14px;float: left;}
    .detail-cont .lecture-item .price-area .price b {font-size: 16px;}
    .detail-cont .lecture-item .price-area .price .discount {font-size: 13px}

    .detail-cont .lecture-item .radio label, .detail-cont .lecture-item .checkbox label {font-size: 13px}

    .detail-cont .gift-item .article {padding: 15px;margin-bottom: -1px}
    .detail-cont .gift-item .chek-area {position: relative;top: 0;left: 0;margin-top: 0;margin-bottom: 10px}

    .detail-cont .gift-item .gift-title {color: #666}
}
@media only screen and (max-width:480px){
    .detail-cont .area-title small {width: 100%;line-height: 20px;display: block;margin-left: 0}

    .detail-total-price {padding: 10px 20px 10px 120px;}
    .detail-total-price .total-title {font-size: 16px;}
    .detail-total-price .total-price li {font-size: 14px;}
    .detail-total-price .total-price li.total {font-size: 15px;}
    .detail-total-price .total-price li.total b {font-size: 20px;}

    .detail-buy-btn a {width: 120px;font-size: 15px;}
}
@media only screen and (max-width:370px){
    .detail-cont .lecture-item .article {padding: 15px 10px;}
    .detail-cont .lecture-item .chek-area {position: relative;top: 0;left: 0;margin-left: -3px;margin-bottom: 5px}

    .detail-total-price {padding: 5px 20px 5px 120px;}
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	상세뷰_상단 교재영역
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.detail-book-topCont {position: relative;display: block;padding: 40px;overflow: hidden;z-index: 10}

.book-topCont-left {position: relative;display: block;padding-left: 230px;width: 520px;min-height: 288px;float: left;}
.book-topCont-right {position: relative;display: block;width: 350px;float: right;}

.book-topCont-left .bookCoverBox {position: absolute;top: 0;left: 0;}
.book-topCont-left .bookCoverBox:hover .book a:after {display: none}
.book-topCont-left .bookCoverBox:hover .book a:before {display: none}

.detail_bookinfo {position: relative;display: block;overflow: hidden;padding: 10px 0}

.detail_bookinfo .title_box {position: relative;display: block;}
.detail_bookinfo .title_box h3 {display: block;font-size: 25px;color: #222;letter-spacing: -0.03em;line-height: 120%;}
.detail_bookinfo .title_box p {display: block;font-size: 15px;color: #777;margin-top: 5px}

.detail_bookinfo .rating_box {position: relative;display: block;overflow: hidden;margin-top: 15px}
.detail_bookinfo .rating_box span {display: inline-block;vertical-align: top;line-height: 25px;font-size: 12px;}
.detail_bookinfo .rating_box a {display: inline-block;vertical-align: top;line-height: 23px;border: 1px solid #d0dbe1;padding: 0 5px;font-size: 12px;}
.detail_bookinfo .rating_box a:hover {border: 1px solid #f44336;color: #f44336}

.detail_bookinfo .book_info_text {position: relative;display: block;overflow: hidden;margin: 20px 0 25px}
.detail_bookinfo .book_info_text ul {display: block;overflow: hidden}
.detail_bookinfo .book_info_text li {position: relative;display: inline-block;color: #666;line-height: 28px;float: left;padding-right: 10px;margin-right: 10px;font-size: 13px}
.detail_bookinfo .book_info_text li:after {position: absolute;top: 50%;right: 0;width: 1px;height: 10px;margin-top: -5px;background: #bbb;content: ""}
.detail_bookinfo .book_info_text li:last-child {margin-right: 0;padding-right: 0;}
.detail_bookinfo .book_info_text li:last-child:after {display: none}
.detail_bookinfo .book_info_text li b {display: inline-block;color: #333;font-weight: 600}

.book-topCont-right .detail-info li {padding: 12px 10px 12px 80px}
.book-topCont-right .detail-info li .title { width: 60px}


@media only screen and (max-width:1024px){
    .detail-book-topCont {padding: 30px 0;}
    .book-topCont-left {width: 100%;float: none;box-sizing: border-box;}
    .book-topCont-right {width: 100%;float: none;margin-top: 30px;}

    .detail_bookinfo .title_box h3 {font-size: 22px;}
    .detail_bookinfo .title_box p {font-size: 14px}

    .detail_bookinfo .rating_box {margin-top: 5px}

    .detail_bookinfo .book_info_text {margin: 5px 0 0}
    .detail_bookinfo .book_info_text li {display:block;line-height: 22px;float: none;padding-right: 0;margin-right: 0;}
    .detail_bookinfo .book_info_text li:after {display: none}

}
@media only screen and (max-width:760px){
    .book-topCont-left {min-height: 100px}
    .book-topCont-left {padding-left: 140px;}

    .detail_bookinfo {padding: 0}
    .detail_bookinfo .title_box h3 {font-size: 20px;}
    .detail_bookinfo .title_box p {font-size: 13px}
}
@media only screen and (max-width:640px){
    .book-topCont-left {padding-left: 110px;}
    .book-topCont-right .detail-info li {padding: 12px 10px 12px 60px}
    .book-topCont-right .detail-info li .title { width: 40px}

    .detail_bookinfo .title_box h3 {font-size: 17px;}
}
@media only screen and (max-width:400px){
    .book-topCont-left {padding-left: 90px;}
    .detail_bookinfo .title_box h3 {font-size: 16px;}
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	장바구니 및 결재
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.order-area-wrap {position: relative;display: block;overflow: hidden;width: 1200px;margin: 0 auto;padding: 50px 0}
.order-title {position: relative;display: block;overflow: hidden;margin-bottom: 15px}
.order-title h3 {float: left;font-size: 30px;color: #222;line-height: 35px;letter-spacing: -0.05em;}
.order-title .stxt {float: left;font-size: 16px;line-height: 35px;margin-left: 10px}
.order-asbtn {position: absolute;top: 40px;right: 0;overflow: hidden}
.order-asbtn li {float: left;}
.order-asbtn li .checkbox {margin: 7px 10px 0 0}

.order-list {position: relative;display: block;overflow: hidden;}
.order-list .item {position: relative;display: block;overflow: hidden;border: 1px solid #d0dbe1;border-top: 2px solid #98a6ad;padding: 0 15px;margin-bottom: 15px}
.order-list li {position: relative;display: block;overflow: hidden;padding: 15px 0;border-bottom: 1px dotted #ccc;}
.order-list li:last-child {border-bottom: none}
.order-list li .title {display: block;overflow: hidden;font-size: 15px;color: #222}
.order-list li .checkbox {overflow: hidden}
.order-list li .checkbox label {display: block;}

.order-list li .price-area {position: absolute;top: 50%;right: 10px;margin-top: -13px;height: 26px;}
.order-list li .price-area div {float: left;line-height: 26px}
.order-list li .price-area .del {display: block;font-size: 16px;color: #888;}
.order-list li .price-area .price {display: block;font-size: 16px;color: #1f8ce6;line-height: 26px;margin-left: 5px}
.order-list li .price-area .price b {font-size: 20px;font-weight: bold;}
.order-list li .price-area .price .discount {display: inline-block;font-size: 14px;color: #084e99;margin-left: 5px}
.order-list li .price-area .point {margin-left: 10px}

.orderSub {position: relative;display: inline-block;overflow: hidden;background: #f2f5f7;border-radius: 5px;padding: 10px 20px;margin-top: 7px}
.orderSub li {position: relative;display: block;margin-bottom: 3px;padding: 0 0 0 10px;border-bottom: none;}
.orderSub li:last-child {margin-bottom: 0}
.orderSub li:after {position: absolute;top: 5px;left: 0;width: 1px;height: 8px;background: #98a6ad;content: ""}
.orderSub li:before {position: absolute;top: 12px;left: 0;width: 7px;height: 1px;background: #98a6ad;content: ""}

.option_group {position: relative;display: block;overflow: hidden;margin-top: 10px}
.option_group li {float: left;padding: 0;border-bottom: none;margin-left: 10px;}
.option_group li:first-child {margin-left: 0}

.cart-total-wrap {position: relative;display: block;border: 1px solid #d0dbe1;background: #fafafa;padding: 30px 30px 30px 180px;overflow: hidden}
.cart-total-wrap .title {position: absolute;top: 50%;left: 0;line-height: 40px;font-size: 20px;color: #222;width: 150px;text-align: center;border-right: 1px solid #d0dbe1;font-weight: bold;margin-top: -20px}
.cart-total-wrap ul {display: block;overflow: hidden;float: right}
.cart-total-wrap li {position: relative;float: left;font-size: 17px;padding-left: 50px;line-height: 40px}
.cart-total-wrap li b {font-weight: bold;color: #222;font-size: 20px}
.cart-total-wrap li.total {color: #084e99;}
.cart-total-wrap li.total b {color: #084e99;font-size: 27px}
.cart-total-wrap li:after {position: absolute;top: 0;left: 10px;width: 30px;height: 40px;line-height: 40px;color: #bbb;content: "+";text-align: center;font-weight: bold;}
.cart-total-wrap li:first-child {padding-left: 0}
.cart-total-wrap li:first-child:after {display: none}
.cart-total-wrap li.total:after {content: "=";}

.order-cont {position: relative;display: block;overflow: hidden;}
.order-cont ul {display: block;overflow: hidden;border-top: 2px solid #98a6ad;}
.order-cont li {position: relative;padding: 10px 10px 10px 145px;border-bottom: 1px solid #d0dbe1;font-size: 15px;min-height: 34px;line-height: 34px}
.order-cont li .title {position: absolute;top: 0;left: 0;width: 125px;height: 100%;/*background: #f2f5f7*/}
.order-cont li .title span {position: absolute;top: 50%;left: 0;width: 110px;height: 30px;line-height: 30px;margin-top: -15px;color: #222;font-size: 15px;padding-left: 15px}

.order-cont li .price {font-size: 17px;color: #222;font-weight: bold}
.order-cont li .total-price {font-size: 23px;color: #084e99;font-weight: bold}

.order-form {position: relative;display: block;overflow: hidden;margin: 4px 0}
.order-form.phone select {width: 100px;float: left;}
.order-form.phone input[type=text] {width: 100px;float: left;}
.order-form .btn {line-height: 30px;height: 30px;padding: 0 10px}
.order-form-text {float: left;line-height: 34px;margin: 0 10px;color: #888}

.order-complete {position: relative;display: block;border: 1px solid #d0dbe1;width: 800px;margin: 0 auto;padding-bottom: 40px}
.order-complete .order-cont {padding: 40px 70px}
.order-complete .complete-title {position: relative;display: block;overflow: hidden;text-align: center;font-size: 30px;color: #222;padding: 40px 20px;background: #f2f5f7;border-bottom: 1px solid #d0dbe1}
.order-complete .complete-title div {display: inline-block}
.order-complete .complete-title b {display: inline-block;line-height: 40px;float: left;font-weight: normal}
.order-complete .complete-title .fe {font-size: 30px;line-height: 38px;float: left;margin-right: 7px;color: #084e99}

@media only screen and (max-width:1024px){
    .order-area-wrap {width: 100%;padding: 40px 15px;box-sizing: border-box}
    .order-asbtn {right: 15px;}

    .order-list li .price-area {position: relative;top: 0;right: 0;margin-top: 10px;}

    .cart-total-wrap {padding: 10px 20px 10px 180px;}
    .cart-total-wrap .title {border-right: none;}
    .cart-total-wrap ul {width: 100%;}
    .cart-total-wrap li {display: block;float: none;font-size: 15px;padding-left: 0;line-height: 50px;text-align: right;border-top: 1px dotted #ccc}
    .cart-total-wrap li b {font-size: 18px}
    .cart-total-wrap li.total b {font-size: 25px}
    .cart-total-wrap li:after {display: none}
    .cart-total-wrap li:first-child {border-top: none}

    .order-complete {width: 100%;max-width: 700px}
    .order-complete .order-cont {padding: 40px}

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

    .order-title h3 {font-size: 25px;}
    .order-title .stxt {font-size: 15px;}

    .order-list li .title {font-size: 14px;}

    .order-list li .price-area .del {font-size: 14px;}
    .order-list li .price-area .price {font-size: 15px;}
    .order-list li .price-area .price b {font-size: 18px;}
    .order-list li .price-area .price .discount {font-size: 13px;}

    .orderSub li {font-size: 13px}

    .order-cont li .price {font-size: 17px;color: #222;font-weight: bold}
    .order-cont li .total-price {font-size: 23px;color: #084e99;font-weight: bold}

    .order-form {position: relative;display: block;overflow: hidden;margin: 4px 0}
    .order-form.phone select {width: 100px;float: left;}
    .order-form.phone input[type=text] {width: 100px;float: left;}
    .order-form .btn {line-height: 30px;height: 30px;padding: 0 10px}
    .order-form-text {float: left;line-height: 34px;margin: 0 10px;color: #888}

    .order-complete .complete-title {font-size: 25px;padding: 20px 20px;}
    .order-complete .complete-title .fe {font-size: 25px;}

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

    .order-title {margin-bottom: 5px}
    .order-title h3 {font-size: 20px;}
    .order-title .stxt {font-size: 14px;}
    .order-asbtn {position: relative;top: 0;right: 0;margin-bottom: 10px}

    .order-list li .title {font-size: 14px;}

    .cart-total-wrap {padding: 10px 20px 10px 130px;}
    .cart-total-wrap .title {width: 100px;}
    .cart-total-wrap li {font-size: 13px;line-height: 40px;}
    .cart-total-wrap li b {font-size: 16px}
    .cart-total-wrap li.total b {font-size: 20px}

    .order-cont li {padding: 10px 10px 10px 120px;}
    .order-cont li .title span {font-size: 14px;}

    .order-cont li .price {font-size: 15px}
    .order-cont li .total-price {font-size: 18px}

    .order-form.phone select {width: 26%;}
    .order-form.phone input[type=text] {width: 26%;}

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

    .order-area-wrap {padding: 30px 15px;}

    .order-list .item {padding: 0 10px;}

    .cart-total-wrap {padding: 10px 20px 10px 100px;}
    .cart-total-wrap .title {width: 80px;font-size: 15px}

    .order-cont li {padding: 15px 0;font-size: 13px;line-height: 150%}
    .order-cont li .title {position: relative;width: 100%;height:auto;background: none;margin-bottom: 5px}
    .order-cont li .title span {position: relative;top: 0;height: auto;line-height: 25px;margin-top: 0;text-align: left;font-size: 15px;padding-left: 0}

    .order-cont li .price {font-size: 17px;color: #222;font-weight: bold}
    .order-cont li .total-price {font-size: 23px;color: #084e99;font-weight: bold}

    .order-complete .complete-title {font-size: 20px;padding: 15px;}
    .order-complete .complete-title .fe {font-size: 20px;}
    .order-complete .order-cont {padding: 20px !important}

}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	나의 포인트
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.myPoint-top {position: relative;display: block;overflow: hidden;border: 1px solid #d0dbe1;background: #fafafa;padding: 30px;text-align: center;margin-bottom: 20px}
.myPoint-top .btxt {display: inline-block;font-size: 20px;color: #222;font-weight: bold;line-height: 30px;margin-bottom: 5px}
.myPoint-top .btxt .point {font-size: 20px;line-height: 30px;font-weight: bold;color: #084e99;padding-left: 23px}
.myPoint-top .btxt .point:before {background: #084e99;width: 20px;height: 20px;font-size: 15px;line-height: 22px}
.myPoint-top .stxt {display: block;font-size: 16px}

.point-responsiveTbl {position: relative;display: block;overflow: hidden;}
.point-responsiveTbl .head {position: relative;display: block;padding: 12px 0;border: 1px solid #d0dbe1;background: #fafafa}
.point-responsiveTbl .head ul {display: block;overflow: hidden}
.point-responsiveTbl .head li {float: left;text-align: center;line-height: 26px;color: #151515;font-size: 15px}
.point-responsiveTbl .item {position: relative;display: block;padding: 12px 0;border: 1px solid #d0dbe1;margin-top: -1px}
.point-responsiveTbl .item ul {display: block;overflow: hidden}
.point-responsiveTbl .item li {float: left;text-align: center;line-height: 26px;}
.point-responsiveTbl .item li b {display: none}

.point-responsiveTbl .col1 {width: 14%}
.point-responsiveTbl .col2 {width: 30%}
.point-responsiveTbl .col3 {width: 20%}
.point-responsiveTbl .col4 {width: 18%}
.point-responsiveTbl .col5 {width: 18%}

.point-responsiveTbl .col80 {width: 79%}
.point-responsiveTbl .col20 {width: 20%}

@media only screen and (max-width:1024px){
    .myPoint-top {padding: 20px;}
    .myPoint-top .btxt {font-size: 17px;}
    .myPoint-top .btxt .point {font-size: 17px;}
    .myPoint-top .stxt {font-size: 15px}
}
@media only screen and (max-width:760px){
    .myPoint-top {padding: 20px;}
    .myPoint-top .btxt {font-size: 16px;}
    .myPoint-top .btxt .point {font-size: 16px;}
    .myPoint-top .stxt {font-size: 13px}

    .point-responsiveTbl .head {display: none;}

    .point-responsiveTbl .item {padding: 5px 15px;margin-top: 0;margin-bottom: 10px}
    .point-responsiveTbl .item li {float: none;width: 100% !important;padding: 5px 0;text-align: right;border-bottom: 1px dotted #ccc}
    .point-responsiveTbl .item li:last-child {margin-bottom: 0;border-bottom: none;}
    .point-responsiveTbl .item li b {display: inline-block;float: left;width: 120px;text-align: left}
}
@media only screen and (max-width:400px){
    .point-responsiveTbl .item li {font-size: 13px}
    .point-responsiveTbl .item li b {width: 110px}
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	회원탈퇴
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.withdraw-wrap {position: relative;display: block;overflow: hidden}
.withdraw-top {position: relative;display: block;padding-bottom: 34px;background: url("/static/images/design/content/pattern01.png") repeat-x bottom;}
.withdraw-top .title {display: block;font-size: 25px;font-weight: bold;color: #222;margin-bottom: 15px}
.withdraw-top .title i {font-style: italic;font-weight: bold;}

.withdraw-cntr {position: relative;display: block;padding: 30px 0}

.withdraw-chek {position: relative;display: block;overflow: hidden;border: 1px solid #d0dbe1;background: #fafafa;padding: 30px}
.withdraw-chek li {float: left;width: 33.33%}


@media only screen and (max-width:640px){
    .withdraw-chek {padding: 20px}
    .withdraw-chek li {width: 50%}
}
@media only screen and (max-width:400px){
    .withdraw-chek li {font-size: 13px}
}
@media only screen and (max-width:360px){
    .withdraw-chek {padding: 15px}
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	구매내역 상세
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.order-detail-box {position: relative;display: block;padding-bottom: 34px;margin-bottom: 30px;background: url("/static/images/design/content/pattern01.png") repeat-x bottom;}
.order-detail-title {position: relative;display: block;overflow: hidden;margin-bottom: 10px;font-size: 20px;color: #222;font-weight: bold;}
.order-detailTbl {position: relative;display: block;overflow: hidden;border-top: 2px solid #98a6ad}
.order-detailTbl ul {overflow: hidden;display: table;width: 100%;}
.order-detailTbl li {position: relative;border-bottom: 1px solid #d0dbe1;vertical-align: middle;}
.order-detailTbl li .odtl-title {position: absolute;top: 0;left: 0;display: block;text-align: center;font-size: 15px;color: #222;background: #fafafa;padding: 10px 0}
.order-detailTbl li .odtl-text {position: relative;display: block;padding: 10px 0;}

.order-detailTbl.horizontal li {display: table-cell;padding: 45px 10px 0 10px}
.order-detailTbl.horizontal li:after {position: absolute;top: 0;right: 0;width: 1px;height: 100%;background: #ddd;content: ""}
.order-detailTbl.horizontal li .odtl-title {width: 100%;border-bottom: 1px solid #d0dbe1;}
.order-detailTbl.horizontal li .odtl-text {text-align: center;}
.order-detailTbl.horizontal li.full {width: 100%;display: table-caption;box-sizing: border-box}
.order-detailTbl.horizontal li.full:after,
.order-detailTbl.horizontal li:last-child:after {display: none}

.order-detailTbl.vertical li {display: block;padding: 0 0 0 200px;}
.order-detailTbl.vertical li .odtl-title {width: 180px;border-right: 1px solid #d0dbe1;height: 100%;padding: 0}
.order-detailTbl.vertical li .odtl-title span {position: absolute;top: 50%;left: 0;width: 100%;height: 26px;line-height: 26px;margin-top: -13px;}
.order-detailTbl.vertical li .odtl-text {text-align: left;}
.order-detailTbl.vertical li,
.order-detailTbl.vertical li .odtl-text {min-height: 26px;line-height: 26px;}

.order-detailTbl .order-list li {padding: 10px 0 !important}
.order-detailTbl .order-list .item {border-top: 1px solid #d0dbe1}
.order-detailTbl .order-list .item:last-child  {margin-bottom: 0}
.order-detailTbl .order-list .item .title {line-height: 20px;font-size: 15px}
.order-detailTbl .order-list .orderSub {padding: 5px 15px}
.order-detailTbl .order-list .orderSub li {padding: 0 0 0 10px !important;border-bottom: none;font-size: 13px;min-height: 22px;line-height: 22px}

.order-detailTbl .price-area {position: relative !important;top: 0 !important;right: 0 !important;margin-top: 0 !important;display: block;}



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

    .order-detailTbl li .odtl-title span {position: absolute;top: 50%;left: 0;width: 100%;height: 26px;line-height: 26px;margin-top: -13px;}

    .order-detailTbl.horizontal li {display: block;padding: 0 0 0 200px;}
    .order-detailTbl.horizontal li:after {display: none}
    .order-detailTbl.horizontal li .odtl-title {width: 180px;border-right: 1px solid #d0dbe1;height: 100%;padding: 0;border-bottom: none;}
    .order-detailTbl.horizontal li .odtl-text {text-align: left;}
}
@media only screen and (max-width:760px){
    .order-detailTbl.horizontal li,
    .order-detailTbl.vertical li {padding: 0 0 0 135px;}
    .order-detailTbl.horizontal li .odtl-title,
    .order-detailTbl.vertical li .odtl-title {width: 120px;font-size: 14px}
}
@media only screen and (max-width:640px){

    .order-detailTbl li.product {padding: 0}
    .order-detailTbl li.product .odtl-title {display: none !important}

}
@media only screen and (max-width:400px){
    .order-detailTbl.horizontal li,
    .order-detailTbl.vertical li {padding: 10px;}
    .order-detailTbl.horizontal li .odtl-title,
    .order-detailTbl.vertical li .odtl-title {position: relative;display: block;width: 100%;font-size: 14px;background: none;text-align: left;border-right: none}
    .order-detailTbl.horizontal li .odtl-title span,
    .order-detailTbl.vertical li .odtl-title span {position: relative;display: block;height: auto;top: 0;left: 0;margin-top: 0;line-height: 30px;font-weight: bold}
    .order-detailTbl li .odtl-text {padding: 0}

    .order-detailTbl .order-list .item .title {font-size: 13px}
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	나의 강의실
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mylecture-list {position: relative;display: block;overflow: hidden}
.mylecture-list .item {position: relative;display: block;border: 1px solid #ddd;padding: 85px 15px 15px 200px;margin-bottom: 15px;}
.mylecture-list .item:last-child {margin-bottom: 0}
.mylecture-list .item .thumbnail {position: absolute;top: 85px;left: 15px;width: 165px;}
.mylecture-list .item .thumbnail img {width: 100%;}
.mylecture-list .item .title {position: absolute;display: block;top: 0;left: 0;width: 543px;height: 70px;line-height: 70px;padding: 0 360px 0 15px;border-bottom: 1px solid #ddd;color: #222;font-size: 15px;background: #fafafa}
.mylecture-list .item .title a {display: inline-block;color: #222;font-weight: bold;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;max-width: 100%;}
.mylecture-list .item .item-text {position: relative;display: block;overflow: hidden}
.mylecture-list .item .item-text li {float: left;width: 50%;min-height: 30px;line-height: 30px;font-size: 14px;overflow: hidden}
.mylecture-list .item .item-text li b {position: relative;color: #222;float: left;width: 100px;padding-left: 10px;}
.mylecture-list .item .item-text li b:after {position: absolute;top: 12px;left: 0;width: 3px;height: 3px;border-radius: 50%;overflow: hidden;content: "";background: #888}
.mylecture-list .item .item-text li span {float: left;}
.mylecture-list .item .curriculum {width: 100% !important;}
.mylecture-list .item .curriculum b {display: block;width: 100% !important;float: none !important;}
.mylecture-list .item .sub-curriculum {position: relative;display: block;background: #f6f6f6;border: 1px solid #e3e3e3;padding: 5px 15px;border-radius: 5px;overflow: hidden}
.mylecture-list .item .sub-curriculum li {width: 100% !important;display: block;float: none !important;border-bottom: 1px dotted #bbb;padding: 6px 0;overflow: hidden}
.mylecture-list .item .sub-curriculum li:last-child {border-bottom: none}
.mylecture-list .item .sub-curriculum li .txt {display: block;width: calc(100% - 105px);text-overflow: ellipsis;overflow: hidden;white-space: nowrap;line-height: 30px;height: 25px;padding-left: 10px;background: url("/static/images/design/content/list_ico.png") no-repeat left 12px}
.mylecture-list .item .sub-curriculum li .btn {margin: 4px 0;vertical-align: middle;float: right}

.mylecture-list .item .btnWrap {position: absolute;top: 0;right: 0;}
.mylecture-list .item .btnWrap a {position: relative;float: left;width: 80px;height: 58px;padding-top: 12px;text-align: center}
.mylecture-list .item .btnWrap a span {height: 20px;line-height: 20px;}
.mylecture-list .item .btnWrap a .fe {display: inline-block;font-size: 21px;}
.mylecture-list .item .btnWrap a .txt {display: block;font-size: 13px}
.mylecture-list .item .btnWrap a:last-child {width: 100px;}
.mylecture-list .item .btnWrap a:hover {color: #084e99}

.progress-area {position: relative;display: block;overflow: hidden;padding: 10px 60px;background: #ebeef1;border-radius: 10px;margin-top:10px}
.progress-area .progressTit {position: absolute;top: 10px;left: 15px;line-height: 20px;}
.progress-area .progress {position: relative;display: block;height: 20px;background: #fff;overflow: hidden;border-radius: 20px}
.progress-area .progress .progress-bar {position: relative;display: block;overflow: hidden;height: 20px;animation: progress-bar-stripes 1s linear infinite;-webkit-animation: progress-bar-stripes 1s linear infinite;
    background-color: #689f38!important;background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size: 1rem 1rem;border-radius: 20px}
.progress-area .progressNum {position: absolute;top: 10px;right: 15px;line-height: 20px;text-align: right}


@media only screen and (max-width:1024px){
    .mylecture-list .item .title {width: 100%;box-sizing: border-box}
    .mylecture-list .item .item-text li {font-size: 14px;}
}
@media only screen and (max-width:840px){
    .mylecture-list .item {padding: 65px 15px 85px 200px;}
    .mylecture-list .item .thumbnail {top: 65px;}
    .mylecture-list .item .title {height: 50px;line-height: 50px;padding: 0 15px;}
    .mylecture-list .item .title a {display: inline-block;color: #222;}
    .mylecture-list .item .item-text li {float: none;width: 100%;}

    .mylecture-list .item .btnWrap {position: absolute;top: auto;bottom: 0;left: 0;width: 100%;overflow: hidden;background: #f6f6f6;text-align: center}
    .mylecture-list .item .btnWrap a {float: none;display: inline-block;vertical-align: top;width: 70px;font-size: 13px;}
    .mylecture-list .item .btnWrap a:last-child {width: 85px;}
}
@media only screen and (max-width:540px){

    .mylecture-list .item {padding: 65px 15px 85px 15px;}
    .mylecture-list .item .thumbnail {position: relative;top: 0;left: 0;width: 100%;}
    .mylecture-list .item .thumbnail img  {width: 100%;height: auto;max-height: 100% !important}
    .mylecture-list .item .item-text {padding: 15px 0}
    .mylecture-list .item .item-text li {font-size: 13px;}
    .mylecture-list .item .item-text li b {width: 80px;}
    .progress-area {margin-top:0;font-size: 13px}

}
@media only screen and (max-width:400px){
    .order-detailTbl.horizontal li,
    .order-detailTbl.vertical li {padding: 10px;}
    .order-detailTbl.horizontal li .odtl-title,
    .order-detailTbl.vertical li .odtl-title {position: relative;display: block;width: 100%;font-size: 14px;background: none;text-align: left;border-right: none}
    .order-detailTbl.horizontal li .odtl-title span,
    .order-detailTbl.vertical li .odtl-title span {position: relative;display: block;height: auto;top: 0;left: 0;margin-top: 0;line-height: 30px;font-weight: bold}
    .order-detailTbl li .odtl-text {padding: 0}

    .order-detailTbl .order-list .item .title {font-size: 13px}
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	리스트 테이블
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.list-responsiveTbl {position: relative;display: block;overflow: hidden;}
.list-responsiveTbl ul {display: table;overflow: hidden;width: 100%;}
.list-responsiveTbl li {position: relative;display: table-cell;vertical-align: middle;line-height: 150%;text-align: center;padding: 10px}
.list-responsiveTbl li .mtit {display: none}

.list-responsiveTbl .head {position: relative;display: block;border-top: 2px solid #98a6ad;border-bottom: 1px solid #d0dbe1;background: #fafafa}
.list-responsiveTbl .head li {color: #151515;font-size: 15px;text-align: center !important;padding: 15px 10px}
.list-responsiveTbl .item {position: relative;display: block;border-bottom: 1px solid #d0dbe1;}
.list-responsiveTbl .title a {display: inline;color: #151515;}
.list-responsiveTbl .number a {display: inline;color: #888;}

.list-responsiveTbl.order .col1 {width: 12%}
.list-responsiveTbl.order .col2 {width: 42%;text-align: left;}
.list-responsiveTbl.order .col3 {width: 12%}
.list-responsiveTbl.order .col4 {width: 12%}
.list-responsiveTbl.order .col5 {width: 12%}
.list-responsiveTbl.order .col6 {width: 12%}

.list-responsiveTbl.refund .col1 {width: 12%}
.list-responsiveTbl.refund .col2 {width: 42%;text-align: left;}
.list-responsiveTbl.refund .col3 {width: 12%}
.list-responsiveTbl.refund .col4 {width: 12%}
.list-responsiveTbl.refund .col5 {width: 12%}
.list-responsiveTbl.refund .col6 {width: 12%}

.list-responsiveTbl.lecture .col1 {width: 15%}
.list-responsiveTbl.lecture .col2 {width: 55%;text-align: left;}
.list-responsiveTbl.lecture .col3 {width: 15%}
.list-responsiveTbl.lecture .col4 {width: 15%}

.list-responsiveTbl.pause .col1 {width: 45%}
.list-responsiveTbl.pause .col2 {width: 15%}
.list-responsiveTbl.pause .col3 {width: 15%}
.list-responsiveTbl.pause .col4 {width: 25%}

@media only screen and (max-width:900px){
    .list-responsiveTbl .item {border: 1px solid #d0dbe1}
    .list-responsiveTbl ul {display: block;padding: 54px 15px 10px;box-sizing: border-box}
    .list-responsiveTbl li {display: block;width: 100% !important;box-sizing: border-box;overflow: hidden;text-align: left;padding: 0;}
    .list-responsiveTbl li.top {position: absolute;top: 0;left: 0;border-bottom: 1px solid #d0dbe1;background: #fafafa;padding: 10px 15px;}
    .list-responsiveTbl li .mtit {display: inline-block;width: 70px}

    .list-responsiveTbl .head {display: none}
    .list-responsiveTbl .item {margin-top: 0;margin-bottom: 15px;overflow: hidden}
    .list-responsiveTbl .item .date {float: left;}
    .list-responsiveTbl .item .btn-r {float: right}

    .list-responsiveTbl.order .col2 {margin-bottom: 10px}
    .list-responsiveTbl.order .col5 {position: absolute;bottom: 10px;right: 15px;width: auto !important}

    .list-responsiveTbl.refund .col2 {margin-bottom: 10px}
    .list-responsiveTbl.refund .col6 {position: absolute;bottom: 10px;right: 15px;width: auto !important}
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	나의강의실 상세
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.lecture-view-title {position: relative;display: block;border-radius: 5px;padding: 15px 20px;background: #eee;margin-bottom: 20px}
.lecture-view-title span {position: relative;display: inline-block;padding-left: 10px;font-weight: bold;font-size: 18px;color: #222;line-height: 130%;}
.lecture-view-title span:after {position: absolute;top: 5px;left: 0;width: 4px;height: 18px;background: #084e99;content: ""}

.lecture-view-topCont {position: relative;display: block;overflow: hidden;margin-bottom: 30px}
.lecture-topCont-left {position: relative;width: 260px;float: left;}
.lecture-topCont-right {position: relative;width:630px;float: right;}

.lecture-topCont-left .detail-thumbnail {position: relative;display: block;}
.lecture-topCont-left .detail-thumbnail img {width: 260px;height: 220px;}

.continue-view {position: relative;display: block;overflow: hidden;background: #eef5ff;padding: 20px;text-align: center}
.continue-view .text {display: block;line-height: 130%;font-weight: bold;color: #222;height: 38px;}
.continue-view .btns {display: block;margin-top: 15px;}

.lecture-topCont-right .lecture-info {position: relative;display: block;margin-bottom: 20px}
.lecture-topCont-right .lecture-info ul {display: block;overflow: hidden}
.lecture-topCont-right .lecture-info li {position: relative;display: block;padding: 8px 10px 8px 120px;min-height: 25px;border-bottom: 1px dotted #c9d3e2;line-height: 25px;font-size: 13px;color: #666}
.lecture-topCont-right .lecture-info li:last-child {border-bottom: none}
.lecture-topCont-right .lecture-info li .title {position: absolute;top: 8px;left: 10px;width: 100px;color: #222;font-weight: bold}
.lecture-topCont-right .lecture-info li .delivery {font-size: 15px;display: inline-block;margin-right: 3px;vertical-align: top;line-height: 22px;}
.lecture-topCont-right .lecture-info li .delivery.free {color: #f44336}
.lecture-topCont-right .lecture-info li del {display: inline-block;font-size: 15px;color: #777}
.lecture-topCont-right .lecture-info li .price {display: block;font-size: 16px;color: #1f8ce6;margin: 3px 0;font-family: AritaDotum;line-height: 130%}
.lecture-topCont-right .lecture-info li .price b {display: inline-block;font-size: 25px;font-weight: bold;}
.lecture-topCont-right .lecture-info li .price .discount {display: inline-block;font-size: 14px;color: #084e99;font-weight: normal}
.lecture-topCont-right .lecture-info li select {width: 100%;max-width: 230px}
.lecture-topCont-right .lecture-info li .block {display: block !important}

/*탭*/
.curriculum-tab {position: relative;display: block;overflow: hidden;margin-bottom: 20px}
.curriculum-tab ul {overflow: hidden}
.curriculum-tab li {display: block;width: 459px;float: left;padding: 1px 1px 0 0;}
.curriculum-tab li a {display: block;text-align: center;background: #ebeef1;height: 45px;line-height: 45px;font-size: 15px;color: #333;}
.curriculum-tab li.active a {background: #084e99;color: #fff;}

/*커리큘럼 리스트*/
.lecture-curriculum-list {position: relative;display: block;overflow: hidden}
.lecture-curriculum-list ul {display: block;overflow: hidden;}
.lecture-curriculum-list li {position: relative;display: block;border: 1px solid #d0dbe1;border-radius: 5px;margin-bottom: 10px;padding: 10px 115px 10px 70px}
.lecture-curriculum-list.chek li {width: 703px;padding: 10px 115px 10px 70px;margin-left: 30px}
.lecture-curriculum-list li .number {position: absolute;top: 0;left: 0;width: 55px;height: 100%;background: #f3f3f3;}
.lecture-curriculum-list li .number span {position: absolute;top: 50%;left: 0;width: 100%;height: 30px;line-height: 30px;margin-top: -15px;font-size: 13px;color: #333;font-weight: bold;text-align: center;}
.lecture-curriculum-list li .txtBox {position: relative;display: block;width: 580px;}
.lecture-curriculum-list li .txtBox b {display: block;font-weight: bold;color: #222;line-height: 26px;}
.lecture-curriculum-list li .txtBox span {display: block;}
.lecture-curriculum-list li .timeBox {position: relative;display: inline-block;margin-top: 5px;border-radius: 4px;background: #eee;padding: 5px 15px;clear: both}
.lecture-curriculum-list li .timeBox ul {overflow: hidden;}
.lecture-curriculum-list li .timeBox li {float: left;width: auto;padding: 0;border: none;margin: 0 15px 0 0;border-radius: 0}
.lecture-curriculum-list li .timeBox li b {color: #222;}
.lecture-curriculum-list li .btnWrap {display: block}
.lecture-curriculum-list li .fileBox {position: relative;width: 100px;height: 30px;font-size: 16px;text-align: center;display: inline-block;vertical-align: top}
.lecture-curriculum-list li .downBox {position: relative;width: 100px;height: 30px;font-size: 16px;text-align: center;display: inline-block;vertical-align: top}
.lecture-curriculum-list li .btnBox  {position: absolute;top: 50%;right: 10px;width: 120px;height: 30px;margin-top: -15px;text-align: center}
.lecture-curriculum-list li .btnBox .btn-play {position: relative;display: block;background: #1f8ce6;overflow: hidden;border-radius: 3px;line-height: 30px;padding: 0 17px;}
.lecture-curriculum-list li .btnBox .btn-play span {float: left;line-height: 30px;font-size: 14px;color: #fff;}
.lecture-curriculum-list li .btnBox .btn-play .txt {margin-left: 3px}

.lecture-curriculum-list.chek li .chek {position: absolute;top: 50%;left: -30px;margin-top: -20px}

.detail-cont.lecture-curriculum-list li {width: 933px;}

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

    .lecture-topCont-left {width: 100%;float: none;}
    .lecture-topCont-right {width:100%;float: none;}

    .lecture-topCont-left .detail-thumbnail {display: none;}

    .continue-view {padding: 20px 120px 20px 20px;border-radius: 5px}
    .continue-view .text {height: auto;text-align: left}
    .continue-view .btns {position: absolute;top: 50%;right: 20px;margin-top: -19px;}

    .lecture-topCont-right .lecture-info {margin: 15px 0}

    /*탭*/
    .curriculum-tab li {width: 50%;box-sizing: border-box}
    .curriculum-tab li a {font-size: 14px;}

    /*커리큘럼 리스트*/
    .lecture-curriculum-list li {width: 100%;padding: 10px 140px 10px 85px;box-sizing: border-box}
    .lecture-curriculum-list.chek li {width: calc(100% - 30px);padding: 10px 140px 10px 85px;}
    .lecture-curriculum-list li .txtBox {width: 100%;}
    .lecture-curriculum-list li .txtBox b {line-height: 150%}
    .lecture-curriculum-list li .timeBox {margin-bottom: 10px}

    .detail-cont.lecture-curriculum-list li {width: 100%;}
}
@media only screen and (max-width:760px){

    .lecture-view-title {padding: 12px 20px;}
    .lecture-view-title span {font-size: 18px;}
    .lecture-view-title span:after {top: 5px;height: 14px;}

    .curriculum-tab li a {font-size: 13px;}

    /*커리큘럼 리스트*/
    .lecture-curriculum-list li {padding: 10px 10px 10px 60px;}
    .lecture-curriculum-list.chek li {padding: 10px 10px 10px 60px;}
    .lecture-curriculum-list li .number {width: 50px;}
    .lecture-curriculum-list li .number span {font-size: 13px;}
    .lecture-curriculum-list li .txtBox span {font-size: 13px;}
    .lecture-curriculum-list li .timeBox {font-size: 14px;width: 100%;box-sizing: border-box}
    .lecture-curriculum-list li .fileBox {display: inline-block;width: auto;height: auto;margin-bottom: 3px}
    .lecture-curriculum-list li .downBox {display: inline-block;width: auto;height: auto;margin-bottom: 3px}
    .lecture-curriculum-list li .btnBox {position: relative;display: inline-block;width: auto;top: 0;right: 0;margin-top: 0;height: auto;overflow: hidden;text-align: left;vertical-align: top;margin-bottom: 3px}
    .lecture-curriculum-list li .btnBox a {display: inline-block !important}

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

    .lecture-view-title {padding: 12px 15px;}
    .lecture-view-title span {font-size: 16px;}
    .lecture-view-title span:after {top: 4px;height: 13px;}

    .continue-view {padding: 12px 100px 12px 20px;}
    .continue-view .text {font-size: 13px;}
    .continue-view .btns {margin-top: -15px}
    .continue-view .btn {padding: 3px 10px;font-size: 13px}

    .curriculum-tab li {width: 100%;padding: 0;margin-bottom: 1px }
    .curriculum-tab li a {font-size: 13px;}

    .lecture-curriculum-list li .txtBox b {font-size: 13px;}
    .lecture-curriculum-list li .timeBox {font-size: 13px;}
    .lecture-curriculum-list li .btn {font-size: 12px}

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


    /*커리큘럼 리스트*/
    .lecture-curriculum-list li .txtBox span {line-height: 140%}
    .lecture-curriculum-list li .timeBox li {margin-right: 10px}
    .lecture-curriculum-list li .timeBox b .tTipBox {display: none}

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

    .lecture-curriculum-list li .btn {font-size: 11px;padding: 0 7px;}

}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	수강확인증
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.lecture_print_wrap {position: relative;display: block;border: 15px solid #2f3b4d;width: 100%;box-sizing: border-box;height: 700px;padding: 60px 50px;margin: 0 auto;overflow: hidden}
.lecture_print_title {position: relative;display: block;text-align: center;font-size: 35px;color: #111;line-height: 130%;font-weight: 600;margin-bottom: 30px;z-index: 10}
.lecture_print_box {position: relative;display: block;z-index: 10}
.lecture_print_box .title {display: block;font-size: 17px;color: #222;line-height: 120%;margin-bottom: 10px;font-weight: 600;}

.lecture_printTbl {position: relative;display: block;background: #fff;}
.lecture_printTbl table {border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%;clear: both;text-align: center;border-top: 1px solid #ccc;}
.lecture_printTbl th {border: 1px solid #ccc;word-wrap: break-word;padding: 10px 15px;font-weight: 600;color: #333;background: #eaeef0;text-align: center}
.lecture_printTbl td {border: 1px solid #ccc;word-wrap: break-word;padding: 10px 15px;text-align: left;}
.lecture_print_text {position: relative;display: block;margin-top: 10px;text-align: center;color: #333}
.lecture_print_date {position: relative;display: block;margin: 20px 0;text-align: center;color: #333;font-weight: 600;font-size: 15px}

.lecture_print_logo {position: relative;display: block;width: 200px;margin: 0 auto;}
.lecture_print_logo img {width: 100%;}

.lecture_print_bg {position: absolute;top: 0;left: 0;}

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

    .lecture_print_wrap {padding: 40px 20px;}
    .lecture_print_title {font-size: 25px;}
    .lecture_print_box .title {font-size: 15px;}

    .mSize {width: 100px !important;}

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

    .mSize {width: 80px !important;}
    .lecture_printTbl th {padding: 10px;font-size: 13px}
    .lecture_printTbl td {padding: 10px;font-size: 13px}

    .lecture_print_logo img  {width: 180px}

}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	플레이어
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.lecture_player_wrap {position: relative;display: block;overflow: hidden;width: 100%;margin: 0 auto;}
.lecture_player_head {position: relative;display: block;overflow: hidden;height: 30px;background: #fff;padding: 15px 20px;border-bottom: 1px solid #e3e3e3;}
.lecture_player_head .title {position: relative;display: block;height: 30px;line-height: 30px;font-size: 20px;color: #222;font-weight: 600;letter-spacing: -0.08em;padding-left: 10px;}
.lecture_player_head .title:after {position: absolute;top: 9px;left: 0;width: 4px;height: 16px;background: #084e99;content: ""}
.lecture_player_head .logo {position: absolute;top: 50%;right: 20px;width: 120px;margin-top: -10px}
.lecture_player_head .logo img {width: 100%;}

.lecture_player_cont {position: relative;display: block;overflow: hidden;padding-right: 300px;height: 100%;}
.playerArea {position: relative;display: block;overflow: hidden;width: 100%;height: 100%;background: #000;}

.lecture_player_details {position: fixed;display: block;overflow: hidden;top: 61px;right: 0;width: 300px;height: calc(100% - 61px); background: #fff;}
.lecture_player_details .tabArea {position: relative;display: block;overflow: hidden;background: #fff;}
.lecture_player_details .tabArea li {position: relative;width: 50%;float: left;}
.lecture_player_details .tabArea li:after {position: absolute;top: 0;left: 0;width: 1px;height: 100%;background: #ddd;content: ""}
.lecture_player_details .tabArea li:first-child:after {display: none}
.lecture_player_details .tabArea li a {display: block;text-align: center;line-height: 35px;height: 35px;font-size: 14px;font-weight: 600;color: #333;background: #eee;border-bottom: 1px solid #ddd}
.lecture_player_details .tabArea li.active a {background: #fff;color: #084e99;border-bottom: 1px solid #fff}

.lecture_player_details .tabViwArea {position: relative;display: block;height: calc(100% - 68px);overflow-y: auto;padding: 15px}

.player_curriculum_list {position: relative;display: block;overflow: hidden;border-top: 1px solid #ddd}
.player_curriculum_list li {position: relative;display: block;overflow: hidden;padding: 8px 0 8px 60px;font-size: 12px;border-bottom: 1px solid #ddd;line-height: 150%}
.player_curriculum_list li .number {position: absolute;top: 0;left: 0;width: 50px;height: 100%;background: #f3f3f3;}
.player_curriculum_list li .number span {position: absolute;top: 50%;left: 0;width: 100%;height: 30px;line-height: 26px;margin-top: -13px;text-align: center;}
.player_curriculum_list li .title {display: block;font-weight: 600;color: #333}
.player_curriculum_list li .btns {display: block;margin-top: 3px}
.player_curriculum_list li .btn {height: 18px;line-height: 18px;padding: 0 3px;font-size: 11px;float: left;margin: 0 4px 0 0}

.lecture_player_info {position: relative;display: block;border: 1px solid #c9d3e2;background: #f5f9ff;padding: 8px 10px}
.lecture_player_info ul {display: block}
.lecture_player_info li {position: relative;display: block;padding: 10px 10px 10px 70px;min-height: 18px;border-bottom: 1px dotted #c9d3e2;line-height: 140%;font-size: 12px;color: #666}
.lecture_player_info li:last-child {border-bottom: none}
.lecture_player_info li .title {position: absolute;top: 10px;left: 10px;width: 60px;color: #222;font-weight: bold}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	인사말
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.greet_btit {position: relative;display: block;overflow: hidden;text-align: center;font-size: 30px;font-weight: 600;color: #151515;line-height: 140%;padding-bottom: 20px;margin-bottom: 20px;letter-spacing: -0.08em}
.greet_btit:after {position: absolute;bottom: 0;left: 50%;width: 50px;height: 2px;margin-left: -25px;background: #084e99;content: ""}
.greet_txt {position: relative;display: block;overflow: hidden;font-size: 16px;text-align: center}
.greet_img {display: block;}
.greet_sign {display: block;margin-top: 30px;text-align: center}
.greet_sign span {display: inline-block;font-weight: 600;color: #222;line-height: 140%}
.greet_sign span b {font-size: 25px;}

@media only screen and (max-width:1024px){
    .greet_btit {font-size: 25px;padding: 0 15px 20px;box-sizing: border-box}
    .greet_txt {font-size: 14px;}
    .greet_txt .enter {display: inline}
    .greet_img img {width: 100%}
    .greet_sign span b {font-size: 22px;}
}
@media only screen and (max-width:640px){
    .greet_btit {font-size: 22px;}
    .greet_txt {font-size: 13px;}
    .greet_sign span b {font-size: 20px;}
}
@media only screen and (max-width:460px){
    .greet_btit {font-size: 18px;}
}
@media only screen and (max-width:400px){
    .greet_btit {font-size: 16px;}
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	교수소개
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.prof_tabViw {position: relative;display: none;overflow: hidden;margin-top: 40px;padding-left: 410px;min-height: 420px}
.prof_tabViw.active {display: block;}

.prof_tabViw .prof_img {position: absolute;top: 0;left: 0;}
.prof_tabViw .prof_textBox {position: relative;display: block;}
.prof_tabViw .prof_stxt {display: block;font-size: 20px;color: #084e99;font-weight: 600;line-height: 140%;letter-spacing: -0.08em}
.prof_tabViw .prof_btit {display: block;font-size: 26px;color: #151515;font-weight: 600;line-height: 140%;letter-spacing: -0.08em}
.prof_tabViw .prof_name {position: relative;display: block;margin: 20px 0 0;}
.prof_tabViw .prof_name:before {position: absolute;top: 0;left: -50px;width: 100%;height: 100%;background: #084e99;padding: 0 0 0 50px;content: "";z-index: 0}
.prof_tabViw .prof_name.red:before {background: #e8342f}
.prof_tabViw .prof_name .neme {position: relative;display: inline-block;color: #fff;font-size: 20px;line-height: 50px;z-index: 10}
.prof_tabViw .prof_name .neme b {display: inline-block;font-size: 30px;font-weight: normal}
.prof_tabViw .prof_name .neme span {position: absolute;top: 15px;right: -125px;display: inline-block;color: rgba(255,255,255,0.3);font-size: 15px;font-weight: 600;letter-spacing: 0.5em;line-height: 24px;}

.prof_tabViw .prof_list {position: relative;display: block;margin-top: 25px;}
.prof_tabViw .prof_list .tit {display: inline-block;width: 100px;text-align: center;border-radius: 35px;line-height: 35px;color: #fff;background: #182538;font-weight: 600;font-size: 15px}
.prof_tabViw .prof_list .txtLst {margin-top: 15px}
.prof_tabViw .prof_list .txtLst b {color: #151515}



@media only screen and (max-width:1024px){
    .prof_tabViw {padding-left: 35%;}
    .prof_tabViw .prof_img {width: 35%}
    .prof_tabViw .prof_img img {width: 100%;}
    .prof_tabViw .prof_textBox {width: calc(100% - 30px);margin-left: 30px}
    .prof_tabViw .prof_stxt {font-size: 17px;}
    .prof_tabViw .prof_btit {font-size: 22px;}
    .prof_tabViw .prof_name .neme {font-size: 18px;line-height: 45px;}
    .prof_tabViw .prof_name .neme b {font-size: 25px;}
    .prof_tabViw .prof_name .neme span {right: -115px;font-size: 14px;}

    .prof_tabViw .prof_list .tit {width: 90px;border-radius: 30px;line-height: 30px;font-size: 14px}
}
@media only screen and (max-width:640px){
    .prof_tabViw {padding-left: 0;}
    .prof_tabViw .prof_img {position: relative;margin-bottom: 30px;width: 100%;text-align: center}
    .prof_tabViw .prof_img img {width: 100%;max-width: 250px}
    .prof_tabViw .prof_textBox {width: 100%;margin-left: 0}
    .prof_tabViw .prof_stxt {font-size: 15px;}
    .prof_tabViw .prof_btit {font-size: 18px;}
    .prof_tabViw .prof_name .neme {font-size: 15px;line-height: 40px;padding-left: 20px;box-sizing: border-box;}
    .prof_tabViw .prof_name:before {left:0;background: #084e99;padding: 0;}
    .prof_tabViw .prof_name .neme b {font-size: 22px;}
    .prof_tabViw .prof_name .neme span {top: 11px;right: -105px;font-size: 13px;}

    .prof_tabViw .prof_list .tit {font-size: 13px}
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	시설안내
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


.facility-slider {position: relative;display: block;overflow: hidden;margin-top: 30px}
.facility-slider .slick-arrow {position: absolute;top: 50%;width: 50px;height: 70px;margin-top: -60px;display: block;border: none;text-indent: -99999px;z-index: 100 }
.facility-slider .slick-prev { left: 0;background: url("/static/images/design/content/facility-prev.png") no-repeat}
.facility-slider .slick-next { right: 0;background: url("/static/images/design/content/facility-next.png") no-repeat}

.facility-slider .slick-dots {position: relative;display: block;overflow: hidden;margin-top: 10px;width: 940px;margin-left: -10px}
.facility-slider .slick-dots li {position: relative;float: left;width: 72px;margin: 0 3px}
.facility-slider .slick-dots li img {width: 100%;}
.facility-slider .slick-dots li a {cursor: pointer;display: block}
.facility-slider .slick-dots li:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: "";background: rgba(0,0,0,0.7)}
.facility-slider .slick-dots li.slick-active:before {display: none;}

@media only screen and (max-width:1024px){
    .facility-slider .slick-slide img {width: 100%}
    .facility-slider .slick-arrow {position: absolute;top: 50%;width: 50px;height: 70px;margin-top: -60px;display: block;border: none;text-indent: -99999px;z-index: 100 }
    .facility-slider .slick-prev { left: 0;background: url("/static/images/design/content/facility-prev.png") no-repeat}
    .facility-slider .slick-next { right: 0;background: url("/static/images/design/content/facility-next.png") no-repeat}

    .facility-slider .slick-dots {width: 100%;margin-left: 0;text-align: center}
    .facility-slider .slick-dots li {display: inline-block;vertical-align: top;float: none;width: calc(13% - 2px);margin: 0 2px}
}
@media only screen and (max-width:640px){

}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	오시는길
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.map {position: relative;display: block;overflow: hidden;border: 1px solid #ddd;box-sizing: border-box}
.map_info {position: relative;display: block;overflow: hidden;background: #2464bf;padding: 20px 30px;}
.map_info .addr {display: block;color: #fff;font-size: 15px;}
.map_info .btn {position: absolute;top: 50%;right: 30px;margin-top: -20px}

.map_infoTxt {position: relative;display: block;overflow: hidden;margin-top: 30px}
.map_infoTxt .titBox {display: block;overflow: hidden;}
.map_infoTxt .titBox .tit {float: left;font-weight: 600;font-size: 22px;color: #222;margin-right: 10px;line-height: 40px;}
.map_infoTxt .titBox .stxt {float: left;line-height: 40px;}
.map_infoTxt .infoTxt {position: relative;display: block;overflow: hidden;border-top: 2px solid #555;}
.map_infoTxt .infoTxt li {position: relative;display: block;padding: 15px 15px 15px 115px;border-bottom: 1px solid #ddd}
.map_infoTxt .infoTxt li .stit {position: absolute;top: 0;left: 0;width: 100px;height: 100%;background: #eff3f8;text-align: center;}
.map_infoTxt .infoTxt li .stit span {position: absolute;display: block;top: 50%;left: 0;width: 100%;margin-top: -31px;padding-top: 35px;font-weight: 600;color: #2464bf}
.map_infoTxt .infoTxt li .stit span:before {position: absolute;font-family: FontAwesome,LineAwesome,'Feather';top: 0;left: 0;width: 100%;height: 35px;font-weight: normal;font-size: 35px;line-height: 35px;color: #2464bf}
.map_infoTxt .infoTxt li .stit span.bus:before {content: "\f158"}
.map_infoTxt .infoTxt li .stit span.subway:before {content: "\f329"}
.map_infoTxt .infoTxt li .stit span.clock:before {content: "\e939";font-size: 25px;}
.map_infoTxt .infoTxt li .stit span.tel:before {content: "\e9a8";font-size: 25px;}
.map_infoTxt .infoTxt li .txtLst b {color: #222}


@media only screen and (max-width:1024px){
    .map_info {padding: 15px 20px;}
    .map_info .addr {font-size: 14px;}
    .map_info .btn {right: 20px;margin-top: -16px;padding: 4px 10px}
}
@media only screen and (max-width:840px){
}
@media only screen and (max-width:640px){
    .map_infoTxt .titBox .tit {font-size: 18px;}
    .map_infoTxt .infoTxt li {padding: 10px 10px 10px 85px;}
    .map_infoTxt .infoTxt li .stit {width: 70px;}
    .map_infoTxt .infoTxt li .stit span {margin-top: -23px;padding-top: 25px;}
    .map_infoTxt .infoTxt li .stit span:before {height: 25px;font-size: 23px;line-height: 25px}
    .map_infoTxt .infoTxt li .stit span.clock:before {font-size: 19px;}
    .map_infoTxt .infoTxt li .stit span.tel:before {font-size: 19px;}
    .map_infoTxt .infoTxt li .txtLst {font-size: 13px}
}
@media only screen and (max-width:460px){
    .map_info {text-align: center}
    .map_info .addr {font-size: 13px;display: block;}
    .map_info .btn {position: relative;top: 0;right: 0;margin: 10px auto 0;}

    .map_infoTxt .titBox .tit {font-size: 16px;}
    .map_infoTxt .titBox .stxt {font-size: 13px;}
}

.agreement-box {position: relative;display: block;overflow: hidden;border: 1px solid #ddd;margin-bottom: 10px;padding: 15px;height: 150px;overflow-y: scroll}
.agreement-chek {position: relative;display: block;text-align: center;margin-bottom: 20px }

@media only screen and (max-width:460px){
    .agreement-box {font-size: 13px;}
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	연혁
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.historyBox {position: relative;display: block;overflow: hidden}
.historyBox .box {position: relative;display: block;overflow: hidden;margin-bottom: 30px;padding-bottom: 30px;border-bottom: 1px dotted #ccc;}
.historyBox .box:last-child {margin-bottom: 0;border-bottom: none;padding-bottom: 0}
.historyBox .box .year {display: block;margin-bottom: 10px;color: #222;font-size: 17px;font-weight: 600;line-height: 150%}
.historyBox .box .year b {display: block;font-size: 22px;color: #2464bf;line-height: 150%}
.historyBox .box .txtLst li {position: relative;padding-left: 70px !important;}
.historyBox .box .txtLst li b {position: absolute;display: block;top: 0;left: 10px;color: #333;}

.marine_position {position: relative;display: block;overflow: hidden;}
.marine_position li {display: block;overflow: hidden;padding: 30px 0;border-bottom: 1px dotted #ccc}
.marine_position li:last-child {padding-bottom: 0;border-bottom: 0}
.marine_position li .img {display: block;float: left;width: 240px}
.marine_position li .txtBox {position: relative;display: block;overflow: hidden;float: left;width: 680px}
.marine_position li .txtBox b {position: relative;display: block;overflow: hidden;line-height: 26px;font-size: 18px;color: #084e99;font-weight: 600;margin-bottom: 5px;padding-left: 10px;letter-spacing: -0.05em}
.marine_position li .txtBox b:after {position: absolute;top: 11px;left: 0;width: 5px;height: 5px;border-radius: 50%;background: #084e99;content: "";}

@media only screen and (max-width:2014px){
    .marine_position li .img {float: none;margin-bottom: 15px}
    .marine_position li .txtBox {float: none;width: 100%}
}

@media only screen and (max-width:680px){
    .historyBox .box {margin-bottom: 25px;padding-bottom: 25px}
    .historyBox .box .year {font-size: 14px}
    .historyBox .box .year b {font-size: 18px;}
    .historyBox .box .txtLst li {padding-left: 65px !important;}


    .marine_position li {padding: 25px 0;}
    .marine_position li .txtBox {font-size: 13px}
    .marine_position li .txtBox b {line-height: 24px;font-size: 15px;}


}


/*----------------------------------------------------------------*/



.popwin_body {background: #f6eded}
#popwin_doc {display: block;padding: 30px;}

.openBox {position: relative;display: block;background: #fff;border-radius: 10px;min-height: 300px;padding: 50px 30px;text-align: center}
.openBox .img {display: block;margin-bottom: 30px}
.openBox .btit {display: block;font-size: 35px;font-weight: 600;color: #222;letter-spacing: -0.06em;line-height: 140%}
.openBox .txt { width: 96%;max-width: 700px;margin: 10px auto 0;display: block;font-size: 18px;color: #222;letter-spacing: -0.06em;line-height: 160%;padding: 25px;box-sizing: border-box;background: #f6eded;border-radius: 10px}
.openBox .btn_box {padding: 30px 0 10px}
.openBox .btn {padding: 15px 40px;font-size: 20px;font-weight: 600;border-radius: 80px;box-shadow: 0 0 7px 0 rgba(239 61 88 / 50%)}

.popwin_wrap {position: relative;display: block;}
.popwin_tit {display: block;font-weight: 600;font-size: 35px;text-align: center;line-height: 150%;color: #222;letter-spacing: -0.06em;margin-bottom: 10px}
.popwin_step {display: block;overflow: hidden}
.popwin_step li {position: relative;float: left;width: 33.33%;text-align: center;padding: 15px 0;background: #fbf9f9;margin-top: 15px;z-index: 0}
.popwin_step li .stxt {display: inline-block;background: #b5adad;color: #fff;line-height: 30px;font-size: 14px;padding: 0 20px;border-radius: 30px}
.popwin_step li .txt {display: block;margin-top: 5px;font-weight: 600;color: #b5adad;font-size: 20px;line-height: 150%}
.popwin_step li.active {background: #fff;border-top-right-radius: 10px;border-top-left-radius: 10px;margin-top: 0;padding: 30px 0 15px 0;box-shadow: 5px 0 10px 0 rgba(90 68 68 / 10%);z-index: 5}
.popwin_step li.active .stxt {background: #ef3d58}
.popwin_step li.active .txt {color: #ef3d58}

.popwin_cont {position: relative;display: block;background: #fff;padding: 30px;}

.popwin_tbl {border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%;clear: both;text-align: center;border-top: 1px solid #e9e0e0;}
.popwin_tbl th, .popwin_tbl td {position: relative;border: 1px solid #e9e0e0;word-wrap: break-word;line-height: 130%;font-size: 16px}
.popwin_tbl th {padding: 7px 5px;}
.popwin_tbl td {padding: 10px 15px;}
.popwin_tbl thead th {color: #333;background: #f9f4f4;border-bottom: 2px solid #e9e0e0;font-weight: 600}
.popwin_tbl thead th small {color: #666}
.popwin_tbl .foot {background: #7e2533;font-weight: 600;color: #fff}
.popwin_tbl .minw {min-width: 55px}
.popwin_tbl.sm {width: 400px;margin: 20px auto;}

.popwin_cont .result_txt {position: relative;width: 580px;display: block;font-size: 25px;color: #222;letter-spacing: -0.06em;line-height: 140%;text-align: center;margin: 0 auto}
.popwin_cont .result_txt:before {position: absolute;top: 8px;left: 0;width: 23px;height: 20px;content: "";background: url("/static/images/design/content/sub_timg1.png") no-repeat center top;}
.popwin_cont .result_txt:after {position: absolute;top: 8px;right: 0;width: 23px;height: 20px;content: "";background: url("/static/images/design/content/sub_timg2.png") no-repeat center top;}
.popwin_cont .result_txt .rtx {position: relative;}
.popwin_cont .result_txt .rtx:after {position: absolute;bottom: 3px;left: 0;width: 100%;height: 12px;background: #f7c8cf;content: ""}
.popwin_cont .result_txt .rtx b {position: relative;z-index: 10}

@keyframes click-wave {
    0% { height: 25px;width: 25px;opacity: 0.35;position: relative;}
    100% { height: 50px;width: 50px;margin-left: -12px;margin-top: -12px;opacity: 0;}
}

.option-input {-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;-o-appearance: none;appearance: none;
    position: relative;top: 50%;height: 25px;width: 25px;transition: all 0.15s ease-out 0s;
    background: #eee7e7;border: none;color: #fff;cursor: pointer;display: inline-block;margin-right: 0.5rem;outline: none;z-index: 1000;
}
.option-input:hover { background: #cbaeae;}
.option-input:checked {background: #ef3d58;}
.option-input:checked::before { height: 25px;width: 25px;position: absolute;font-family: 'Feather' !important;content: "\e92b";
    display: inline-block;font-size: 17px;text-align: center;line-height: 25px;
}
.option-input:checked::after {   -webkit-animation: click-wave 0.65s;-moz-animation: click-wave 0.65s;animation: click-wave 0.65s;background: #ce9999;content: '';display: block;position: relative;z-index: 100;}
.option-input.radiocs {border-radius: 50%;}
.option-input.radiocs::after {border-radius: 50%;}

.input_group_icon {float: left;border-radius: 4px;background: #e9ecef;width: 38px;text-align: center;height: 32px;line-height: 31px;font-size: 16px;color: #495057;border:1px solid #d9e3e9;border-top-right-radius: 0;border-bottom-right-radius: 0;}


@media only screen and (max-width: 980px){
    .openBox .txt { font-size: 16px;}
}

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

    #popwin_doc {padding: 20px;}

    .openBox {padding: 40px 20px;}
    .openBox .img {margin-bottom: 20px}
    .openBox .img img {max-width: 380px;width: 70%}
    .openBox .btit {font-size: 30px;}
    .openBox .txt { padding: 20px;font-size: 15px;}
    .openBox .txt br {display: none;}
    .openBox .btn_box {padding: 25px 0 10px}
    .openBox .btn {padding: 10px 30px;font-size: 18px;border-radius: 70px;}

    .popwin_tit {font-size: 30px;}
    .popwin_step li .stxt {line-height: 28px;font-size: 13px;padding: 0 15px;}
    .popwin_step li .txt {font-size: 17px;}

    .popwin_cont {padding: 25px;}

    .popwin_tbl th, .popwin_tbl td {font-size: 14px}
    .popwin_tbl th {padding: 5px 3px;}
    .popwin_tbl td {padding: 7px 10px;}
    .popwin_tbl.sm {width: 280px;}

    .popwin_cont .result_txt {width: 415px;font-size: 18px;}
    .popwin_cont .result_txt:before {top: 3px;background-size: 15px;}
    .popwin_cont .result_txt:after {top: 3px;background-size: 15px;}

}

@media only screen and (max-width: 480px){
    #popwin_doc {padding: 15px;}

    .openBox {padding: 30px 15px;}
    .openBox .img {margin-bottom: 15px}
    .openBox .btit {font-size: 25px;}
    .openBox .txt { padding: 15px;font-size: 14px}
    .openBox .btn_box {padding: 20px 0 10px}
    .openBox .btn {font-size: 16px;}

    .popwin_tit {font-size: 25px;}
    .popwin_step li .stxt {line-height: 26px;font-size: 12px;padding: 0 12px;}
    .popwin_step li .txt {font-size: 15px;}

    .popwin_tbl .minw {min-width: 43px}

    .popwin_cont {padding: 20px;}

    .popwin_tbl th, .popwin_tbl td {font-size: 13px}


    .popwin_tbl.sm {width: 240px;}

    .popwin_cont .result_txt {width: 220px;font-size: 15px;}
    .popwin_cont .result_txt .mblock {display: block}
    .popwin_cont .result_txt .rtx:after {height: 5px;}


    .option-input {height: 18px;width: 18px;}
    .option-input:checked::before { height: 18px;width: 18px;font-size: 12px;line-height: 18px;}

    @keyframes click-wave {
        0% { opacity: 0}
        100% { opacity: 0}
    }

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

    .popwin_step li .txt {font-size: 14px;}

    .last .btn_green {margin-top: 5px}

}



.page-tab {min-height:60px;background-color:#f8fafb;margin-bottom: 20px}
.page-tab::after{content:'';display:block;clear:both}
.page-tab li {float:left;position:relative;width:20%}
.page-tab li>a{display:block;height:60px;line-height:60px;padding:0 25px;font-size:16px;color:#222;text-align:center}
.page-tab li>a::after{content:'';position:absolute;top:22px;left:0;width:1px;height:16px;background-color:#d2d2d2}
.page-tab li:first-child>a::after{display:none}
.page-tab li:nth-child(6)>a::after{display:none}
.page-tab li.active>a{background-color:#084e99;color:#fff;box-shadow:0 3px 15px 0 rgba(8,78,153,0.3)}
.page-tab li.active>a::after{display:none}

.page-tab2 {padding: 15px 0;border: 1px solid #e3e3e3;background: #f9f9f9;overflow: hidden;margin-bottom: 20px}
.page-tab2 li {position:relative;float:left;padding:0 25px;}
.page-tab2 li::after{content:'';position:absolute;top:5px;left:0;width:1px;height:16px;background-color:#d2d2d2}
.page-tab2 li:first-child:after {display: none;}
.page-tab2 li>a{display:block;font-size:16px;color:#222;}
.page-tab2 li.active>a{color:#084e99;font-weight: 600}

@media only screen and (max-width:640px) {
    .page-tab {}
    .page-tab li {width: 33.333%;}
    .page-tab li>a{height:50px;line-height:50px;padding:0 20px;font-size:15px;}
    .page-tab li>a::after{top:18px;height:14px;}
    .page-tab li:nth-child(6)>a::after{display:block}
    .page-tab li.active>a{box-shadow:0 2px 10px 0 rgba(8,78,153,0.3)}

    .page-tab2 {padding: 10px 0;}
    .page-tab2 li {padding:0 20px;}
    .page-tab2 li>a{font-size:14px;}
}