@charset "utf-8";

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');

/* 스포한스 */
@font-face {
    font-family: 'SpoqaHanSansNeo-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root{
    --blue:#014694;
    --blue-2:#004794;
    --blue-3:#1083FF;
    --skyblue:#15B3CC;
    --gray:#E6E6E6;
    --gray-9:#999999;
}

/* Margin, Padding */
.mt100{margin-top:100px !important;}
.mt90{margin-top:90px !important;}
.mt80{margin-top:80px !important;}
.mt70{margin-top:70px !important;}
.mt60{margin-top:60px !important;}
.mt50{margin-top:50px !important;}
.mt40{margin-top:40px !important;}
.mt30{margin-top:30px !important;}
.mt25{margin-top:25px !important;}
.mt20{margin-top:20px !important;}
.mt15{margin-top:15px !important;}
.mt10{margin-top:10px !important;}
.mt05{margin-top:5px !important;}
.mt0{margin-top:0 !important;}

.mr0{margin-right:0px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}
.mr40{margin-right:40px !important;}
.mr50{margin-right:50px !important;}
.mr60{margin-right:60px !important;}
.mr70{margin-right:70px !important;}
.mr80{margin-right:80px !important;}
.mr90{margin-right:90px !important;}
.mr100{margin-right:100px !important;}

.mb100{margin-bottom:100px !important;}
.mb90{margin-bottom:90px !important;}
.mb80{margin-bottom:80px !important;}
.mb70{margin-bottom:70px !important;}
.mb60{margin-bottom:60px !important;}
.mb50{margin-bottom:50px !important;}
.mb40{margin-bottom:40px !important;}
.mb30{margin-bottom:30px !important;}
.mb20{margin-bottom:20px !important;}
.mb10{margin-bottom:10px !important;}
.mb5{margin-bottom:5px !important;}
.mb0{margin-bottom:0 !important;}

.ml0{margin-left:0 !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;}
.ml60{margin-left:60px !important;}
.ml70{margin-left:70px !important;}
.ml80{margin-left:80px !important;}
.ml90{margin-left:90px !important;}
.ml100{margin-left:100px !important;}

.m0{margin:0 !important;}
.m5{margin:5px !important;}
.m10{margin:10px !important;}
.m20{margin:20px !important;}
.m30{margin:30px !important;}
.m40{margin:40px !important;}

.pt0{padding-top:0 !important;}
.pt10{padding-top:10px !important;}
.pt20{padding-top:20px !important;}
.pt30{padding-top:30px !important;}
.pt40{padding-top:40px !important;}
.pt50{padding-top:50px !important;}
.pt60{padding-top:60px !important;}
.pt70{padding-top:70px !important;}
.pt80{padding-top:80px !important;}
.pt90{padding-top:90px !important;}
.pt100{padding-top:100px !important;}

.pr0{padding-right:0px !important;}
.pr10{padding-right:10px !important;}
.pr20{padding-right:20px !important;}
.pr30{padding-right:30px !important;}
.pr40{padding-right:40px !important;}
.pr50{padding-right:50px !important;}
.pr60{padding-right:60px !important;}
.pr70{padding-right:70px !important;}
.pr80{padding-right:80px !important;}
.pr90{padding-right:90px !important;}
.pr100{padding-right:100px !important;}

.pb0{padding-bottom:0px !important;}
.pb10{padding-bottom:10px !important;}
.pb20{padding-bottom:20px !important;}
.pb30{padding-bottom:30px !important;}
.pb40{padding-bottom:40px !important;}
.pb50{padding-bottom:50px !important;}
.pb60{padding-bottom:60px !important;}
.pb70{padding-bottom:70px !important;}
.pb80{padding-bottom:80px !important;}
.pb90{padding-bottom:90px !important;}
.pb100{padding-bottom:100px !important;}

.pl0{padding-left:0px !important;}
.pl10{padding-left:10px !important;}
.pl20{padding-left:20px !important;}
.pl30{padding-left:30px !important;}
.pl40{padding-left:40px !important;}
.pl50{padding-left:50px !important;}
.pl60{padding-left:60px !important;}
.pl70{padding-left:70px !important;}
.pl80{padding-left:80px !important;}
.pl90{padding-left:90px !important;}
.pl100{padding-left:100px !important;}

.p0{padding:0px !important;}
.p5{padding:5px !important;}
.p10{padding:10px !important;}
.p20{padding:20px !important;}
.p30{padding:30px !important;}
.p40{padding:40px !important;}


/* Skip */
#skip {position:absolute;top:0;height:0px;width:100%;z-index:2020;}
#skip a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;text-align:center;color:#fff;white-space:nowrap;}
#skip a:focus,
#skip a:active {display:block;top:0;width:100%;height:30px;line-height:30px;background:#1c7915;}

/* skip ----------------------------------------------*/
#accessibility {position:absolute; top:0; left:0; width:100%; z-index:9999;}
#accessibility a {font-size:14px; position:absolute; top:-9999px;}
#accessibility a:hover, #accessibility a:active, #accessibility a:focus {display:inline-block; top:0; width:100%; padding:10px 0; color:white; font-weight:bold; text-align:center; background-color:black;}

/* 숨김(처리) */
.blind {position:absolute;left:-9999px;width:0;height:0;overflow:hidden;font-size:0;line-height:0;z-index:-1;}
.hide {position:absolute;left:-9999px;width:0;height:0;overflow:hidden;font-size:0;line-height:0;z-index:-1;}
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}
/* 익스 부트스트랩 인식 버그*/
.visually-hidden {position: absolute!important;width: 1px!important;height: 1px!important;padding: 0!important;margin: -1px!important;overflow: hidden!important;clip: rect(0,0,0,0)!important;white-space: nowrap!important;border: !important;}

/* 정렬 */
.fr {float:right;}
.fl {float:left;}
.clear {clear:both;}

/* 텍스트정렬 */
.tac {text-align:center !important;}
.tal {text-align:left !important;}
.tar {text-align:right !important;}

input::placeholder {font-size:0.93rem; color:#999; font-weight:300;}
input::-webkit-input-placeholder {font-size:0.93rem; color:#999; font-weight:300;}
input:-ms-input-placeholder {font-size:0.93rem; color:#999; font-weight:300;}
select::-ms-expand { display: none; }

textarea::placeholder {font-size:0.93rem; color:#999; font-weight:300;}
textarea::-webkit-input-placeholder {font-size:0.93rem; color:#999; font-weight:300;}
textarea:-ms-input-placeholder {font-size:0.93rem; color:#999; font-weight:300;}

/* clearfix */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}

/* 글자 색상들 */
.green {color:#196BEF !important;}
.red {color:#c00000 !important;}
.orange {color:#ff661b !important;}

.fbold {font-weight:700;}
.fbold2 {font-weight:500;}

/* 가로 크기 */
.width_8 {width:8%;}
.width_10 {width:10%;}
.width_12 {width:12%;}
.width_15 {width:15%;}
.width_25 {width:25%;}
.width_30 {width:30%;}
.width_35 {width:35%;}
.width_48 {width:48%;}
.width_50 {width:50%;}
.width_75 {width:75%;}
.width_100 {width:100%;}


/* tablet */
@media only screen and (max-width : 1230px){



}
/* mobile */
@media only screen and (max-width : 992px){

    input::placeholder {font-size:16px;}
}
@media only screen and (max-width : 767px){

    input::placeholder {font-size:15px;}

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



}

div .inline-block {
    display: inline-block;
}

.text-ellipsis {
    width: 70px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebook-intro {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.layer_type1 {display:none; width:600px; padding:40px; overflow-y:auto; background-color:#fff;}
.layer_type1 .tit {margin-bottom:0px; padding-bottom:30px;font-size:1.6em; font-weight:500; text-align:center;}
.layer_type1 .con {padding:30px 0;  border-top:1px solid #dbdbdb;}
.layer_type1 .con .txt {margin-bottom:20px; line-height:1.3em;}
.layer_type1 .box {border:1px solid #dbdbdb; padding:20px; background-color:#f8f8f8;}
.layer_type1 .box .s_tit {margin-top:0px; margin-bottom:15px; font-size:1.0em; font-weight:500;}
.layer_type1 .box p {font-size:0.86em; color:#666; line-height:1.3em;}
.layer_type1 .close_btn {border:none; padding:0 50px; height:50px; font-size:1.13em; color:#fff; border-radius:5px; background-color:#00c2ea; }

.layer_pop {overflow:hidden; background:#fff; }
.layer_pop .btns_con {overflow:hidden; position:absolute; bottom:0px; left:0px; width:100%; padding:10px 15px; background:#000;}
.layer_pop .btns_con span {display:inline-block; font-size:0.83rem; color:#ccc; }
.layer_pop .btns_con i {vertical-align:middle; color:#fff; }
.layer_pop .btns_con .checkbox_btn {float:left; }
.layer_pop .btns_con .close_btn {float:right; }


/* 이미지 세팅 */
.thumbnail-wrap {display: inline-block;/*border: 1px solid #000;*/ }
.thumbnail {position: relative; padding-top: 56.25%; /* 16:9 */  overflow: hidden;}
.thumbnail img {position: absolute; top:0; left: 0; z-index:5;}

/*
2:1 : padding-top: 50%
1:2 : padding-top: 200%
4:3 : padding-top: 75%
16:9 : padding-top: 56.25%
*/

.thumbnail .centered  {position: absolute;  top: 0; left: 0;  right: 0;  bottom: 0; z-index:5;
    -webkit-transform: translate(50%,50%);
    -ms-transform: translate(50%,50%);
    transform: translate(50%,50%);}
.thumbnail .centered img {
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);}

.thumbnail img.portrait {width:100%;max-width:none;height:auto;}
.thumbnail img.landscape {width:auto;max-width:none;height:100%;}


/* 플렉스 설정-가로 균등*/
.flex-container {
    /* flex */
    -webkit-appearance:none;
    /* 플렉스 컨테이너 생성 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    /* 플렉스 감싸기(줄바꿈) 금지 설정 */
    -webkit-box-lines: single;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    /* 플렉스 주축 row 설정*/
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;

    /* 플렉스 아이템 교차축 baseline 정렬*/
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}
.flex-container .flex-item {-webkit-appearance:none;
    /* 플렉스 확장 지수 설정*/
    -webkit-box-flex: 1;
    -ms-flex: 1;
}
.flex-containe .grow1 {flex-grow: 1;}
.flex-container .auto {flex: auto; /* flex: 1 1 auto; */}


/* 유저 알림 공통 CSS */
.alarm_box_area {display:none;}

.alarm_box {position:absolute; width:480px; border:1px solid #ddd; background-color:#fff; z-index:102;}
.alarm_title_box {padding:20px; border-bottom:1px solid #ddd; font-size:16px; font-weight:700;}

.alarm_box ul {list-style: none; padding: 0; overflow-y:auto; max-height:calc(100vh - 200px);}

.alarm_box li a {position:relative; display: flex;padding:20px; border-bottom:1px solid #ededed; color:#3E3E3E;}
.alarm_box li a:hover {background-color:#f8f8f8;}
.alarm_box li a:after, .alarm_box li a:before {display:none; content:""; position:absolute; width:10px; height:2px; background-color:#000; right:20px; }
.alarm_box li a:after {transform:rotate(45deg);  top:calc(50% - 3px); -webkit-transform:rotate(45deg);}
.alarm_box li a:before {transform:rotate(-45deg);top:calc(50% + 3px); -webkit-transform:rotate(-45deg);}
.alarm_box li a:hover:after, .alarm_box li a:hover:before {display:block;}

.alarm_img_box div {display:none; position:relative; width:45px; height:45px; background-color:#ddd; border-radius:100%;}
.alarm_img_box div.arv {background-color:#5A8E44;}
.alarm_img_box div.new:after {content:""; display:block; position:absolute; width:5px; height:5px; background-color:#DB0100; right:0; top:0; border-radius:100%;}
.alarm_text_box {width:calc(100%); padding-left:20px;}
.alarm_text_box dt {margin-bottom:10px; font-size:14px; font-weight:400;}
.alarm_text_box dd {font-size:12px;}

.alarm_close {position:absolute; top:15px; right:15px; font-size:0; text-indent:-9999px; width:30px; height:30px; padding:0; border:0; background-color:#fff;}
.alarm_close:after, .alarm_close:before {content:""; position:absolute; width:25px; height:2px; background-color:#000; right:0px; }
.alarm_close:after {transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.alarm_close:before {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}

.alarm_show.new:before {content:""; display:block; position:absolute; width:5px; height:5px; background-color:#DB0100; left: 65px; top:12px; border-radius:100%;}
.alarm_show img {width:16px; margin-right:5px;}

.alarm_bubble {background: #ddd url(/common/img/alarm/bubble.png) center no-repeat;}
.alarm_heart {background: #ddd url(/common/img/alarm/heart.png) center no-repeat;}
.alarm_present {background: #ddd url(/common/img/alarm/present.png) center no-repeat;}
.alarm_general {background: #5A8E44 url(/common/img/alarm/logo.png) center no-repeat !important;}

@media (min-width: 992px){
    .alarm_box {top:130px; right:0px;}

    .alarm_box li:nth-last-child(1) a {border-bottom:0;}
    .alarm_close {display:none;}
}

@media (max-width: 992px){
    .alarm_box {position:fixed; right:0; top:0; height:100%;}
    .alarm_box ul{height: calc(100vh - 67px); max-height:100vh;}

    .alarm_box_area .md_bg {display:block; position:fixed; left:0; top:0; width:100vh; height:100vh; background-color:rgba(0,0,0,0.15); z-index:101;}
    .alarm_show.new:before {left: 70px;}
}

@media (max-width: 576px){
    .alarm_box {width:100%;}
    .alarm_text_box {padding-right:5px;}
}

.code { font-size: .875em; color: #d63384;word-wrap: break-word;}

.swal-overlay {
    z-index: 100005 !important;
}

#my-spinner { width: 100%; height: 100%; top: 0; left: 0; display: none; opacity: .6; background: silver; position: absolute; z-index: 2; }
#my-spinner div { width: 100%; height: 100%; display: table; }
#my-spinner span { display: table-cell; text-align: center; vertical-align: middle; }
#my-spinner img { background: white; padding: 1em; border-radius: .7em; }