html{width:100%; height:100%; padding:0; overflow: auto;word-break: keep-all;}
body{padding:0; min-height:100%; position:relative; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; font-size:11px; }

/*컬러*/
.blue {color:#007bff;}
.indigo {color:#6610f2;}
.purple {color:#6f42c1;}
.pink {color:#e83e8c;}
.red {color:#dc3545;}
.orange {color:#fd7e14;}
.yellow {color:#ffc107;}
.green {color:#28a745;}
.teal {color:#20c997;}
.cyan{color:#17a2b8;}
.white {color:#fff;}
.gray {color:#6c757d;}
.gray-dark {color:#343a40;}
.primary {color:#007bff;}
.secondary {color:#6c757d;}
.success {color:#28a745;}
.info {color:#17a2b8;}
.warning {color:#ffc107;}
.danger {color:#dc3545;}
.light {color:#f8f9fa;}
.dark {color:#343a40;}
.black{color:#000 !important;}

.secondary:hover {color:#6c757d;}
.clear{clear:both;}
.clear-after::after{content:""; display:block; clear:both; height:0;}

.left{text-align: left !important;}
.center{text-align: center !important;}
.right{text-align: right !important;}
.right_tx{text-align: right !important;}
.right_tx2{text-align: right !important;}
.right_tx2 span {padding-left: 16px;}

.mAuto{margin:0 auto !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}
.mb200{margin-bottom:200px;}

.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mt70{margin-top:70px !important;}
.mt75{margin-top:75px !important;}
.mt80{margin-top:80px !important;}
.mt100{margin-top:100px !important;}

.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr20{margin-right:20px !important;}
.mr50{margin-right:50px !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;}

.pdR5{padding-right:5px !important;}
.pdR10{padding-right:10px !important;}
.pdR30{padding-right:30px !important;}

.pdT10{padding-top:10px !important;}
.pdT20{padding-top:20px !important;}
.pdT30{padding-top:30px !important;}
.pdT35{padding-top:35px !important;}
.pdT40{padding-top:40px !important;}
.pdT50{padding-top:50px !important;}
.pdT60{padding-top:60px !important;}
.pdT70{padding-top:70px !important;}
.pdT80{padding-top:80px !important;}

.pdB10{padding-bottom:10px !important;}
.pdB20{padding-bottom:20px !important;}
.pdB30{padding-bottom:30px !important;}
.pdB50{padding-bottom:50px !important;}

.pt5 {padding-top: 5px !important;}

.pd5{padding:5px !important;}

.fl{float: left;}
.fr{float: right;}

a.none{color:#354168;}
a.none:hover{color:#354168; text-decoration:none;}

.pointer{cursor:pointer;}

input, select, textarea{vertical-align:middle; background:#fff; border:1px solid #dee2e6; border-radius:3px; font-size:13px; letter-spacing:-0.5px; padding:.375rem .75rem;}

.pop-con{width:100%; margin:0 auto; padding:20px;}

.border{border:1px solid #eee;}

.normal{font-weight:300;}

.b_bar{border-bottom:1px solid #efefef;}

.cancle-line{text-decoration: line-through;}

.border_none{border:none !important;}

.bold700{font-weight:700;}

.letter0{letter-spacing: 0 !important;}

.opa05{opacity:0.5;}

.disblock {display: block;}
.dis-inblock {display: inline-block;}

.w-100per {
    width: 100% !important;
}
.w-70per {
    width: 70% !important;
}
.w-50per {
    width: 50% !important;
}
.w-48per {
    width: 48% !important;
}
.w-45per {
    width: 45% !important;
}
.w-40per {
    width: 40% !important;
}
.w-30per {
    width: 30% !important;
}
.h-100px {
    height: 100px !important;
}
.h-200px {
    height: 200px !important;
}
.h-300px {
    height: 300px !important;
}
.h-400px {
    height: 400px !important;
}

.preline {
    white-space: pre-line;
}


.loader-layer-imooc {
    position: relative;
    width: 100%;
    min-height: 600px;
}

.loader-imooc {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #dee2e6;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}