@charset "utf-8";

.board--card--list .obj .thm--box, .board--card--list.type2 .obj .thm--box{padding-top:195px;}
.board--card--list.type2 .obj .thm--box .inner img{max-height:none;max-width:none;width:100%; }
.board--card--list .obj .card--body, .board--card--list.type2 .obj .card--body{border:none;padding:20px;}
.board--card--list .col .inner-box > a .item .thm--box:before, .board--card--list .col .inner-box > button .item .thm--box:before, .board--card--list.type2 .col .inner-box > a .item .thm--box:before, .board--card--list.type2 .col .inner-box > button .item .thm--box:before,
.board--card--list .col .inner-box > a .item .thm--box:after,
.board--card--list .col .inner-box > button .item .thm--box:after,
.board--card--list.type2 .col .inner-box > a .item .thm--box:after,
.board--card--list.type2 .col .inner-box > button .item .thm--box:after{display:none;}
.board--card--list .col .inner-box > a .item:before,
.board--card--list .col .inner-box > button .item:before,
.board--card--list.type2 .col .inner-box > a .item:before,
.board--card--list.type2 .col .inner-box > button .item:before{content: "";position: absolute;z-index: 6;top: -36px;left: 50%;margin-left: -16px;background-color: rgba(232,52,33,0.8);height: 32px;width: 32px;border-radius: 32px;transform: scale(1);transform-origin: 50% 50%;transition: transform 0.25s ease-out;}
.board--card--list .col .inner-box > a:hover .item:before,
.board--card--list .col .inner-box > button:hover .item:before,
.board--card--list.type2 .col .inner-box > a:hover .item:before,
.board--card--list.type2 .col .inner-box > button:hover .item:before{transform: scale(31);}
.board--card--list .col .inner-box > a .item:after,
.board--card--list .col .inner-box > button .item:after,
.board--card--list.type2 .col .inner-box > a .item:after,
.board--card--list.type2 .col .inner-box > button .item:after{content: "";position: absolute;z-index: 7;top:50%;left: 50%;margin-left: -28px;margin-top: -25px;height: 57px;width: 57px;transform: scale(0);transform-origin: 50% 50%;opacity: 0;transition: transform 0.25s ease-out,opacity 0.25s ease-out;transition-delay: 0.25s;background: #fff url(/pcms/common/images/prog/card__more.png)no-repeat center / cover;border-radius: 50%;}
.board--card--list .col .inner-box > a:hover .item:after,
.board--card--list .col .inner-box > button:hover .item:after,
.board--card--list.type2 .col .inner-box > a:hover .item:after,
.board--card--list.type2 .col .inner-box > button:hover .item:after{transform: scale(1);opacity:1;}
#ajaxLayer {background-color:rgba(0,0,0,0.6)}
#ajaxLayer .modal-content{border: 5px solid #3a3d56;border-radius: 0;}
#ajaxLayer .modal-content .modal-top {padding: 13px 16px 4px 16px;min-height: 73px;background-color:#27293e;}
#ajaxLayer .modal-content .modal-top .h2 { color: #fff; font-size: 27px; margin: 0; padding: 0;}
#ajaxLayer .modal-content .modal-top .h2 span{position:relative;margin-top: 0;display: inline-block;}
#ajaxLayer .modal-content .modal-top .h2 span:after{content:''; display:inline-block; width:5px; height:5px; background-color:#e93421; border-radius:50%; position:relative;top:-25px; margin-left:5px}
#ajaxLayer .modal-content .modal-top .h2 .sub {display: block; font-size: 15px;}
#ajaxLayer .modal-content .modal-top .h2 .sub.tit {color: #ffbdb6;padding: 0;padding-bottom: 6px;font-size: 13px;}
#ajaxLayer .modal-content .modal-top .h2 .sub.dsc { color: #eaeaec; padding: 4px 0; line-height: 1.3; letter-spacing: -2px; word-break: break-word;}
#ajaxLayer .photo_wrap.typeB .inner{padding-left:340px;border: none;padding: 17px;padding-left: 300px;min-height: 252px;border-bottom: 1px dashed #ddd;}
#ajaxLayer .photo_wrap.typeB .thumb{position:absolute;top:0;left:0;width:100%; max-width:270px; height: 203px;right: auto;bottom: auto;}
#ajaxLayer .photo_wrap.typeB .thumb span{display:block; position:relative; overflow: hidden; height:100%; width:100%}
#ajaxLayer .photo_wrap.typeB .thumb span img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

#ajaxLayer .modal-dialog{max-width:900px; width:100%; max-height:100%; margin: 0;}
#ajaxLayer .photo_wrap.typeB{padding:50px;margin-top:0;}
#ajaxLayer  .photo_wrap .info_box h3{font-size:22px; color:#180e0d; margin: 29px 0 20px 0; font-weight:bold; font-family: 'score'; word-break: break-all; letter-spacing: -2px;}
#ajaxLayer  .photo_wrap .info_box .text_box{padding-top:27px; position:relative}
#ajaxLayer  .photo_wrap .info_box .text_box:before{content:''; display:block; position:absolute;  top:0; left:0; width:95%; height:1px; background-color:#c4cbd2}
#ajaxLayer  .photo_wrap .info_box .text_box p{font-size:16px;color:#666}
#ajaxLayer   .photo_wrap .btn.btn-outline{position:absolute;top: -123px; right:0; padding: 9px;padding-left: 11px;min-width: 120px;border:2px solid #e93421;text-align: left;color:#e93421;border-radius: 0;font-size: 13px;font-weight: bold;}
#ajaxLayer   .photo_wrap .btn.btn-outline:after { content: ''; display: block;position: absolute; width: 25px; height: 25px; border-top: 2px solid #e93421;  border-left: 2px solid #e93421; background-color: #fff; transform: rotate(-45deg); right: -14px;  top: 11.5%;}


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

    #ajaxLayer .modal-dialog{width:100%; max-width:900px; margin: 10px 0 0 0;}  
    
}

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

    #ajaxLayer .photo_wrap.typeB .inner{padding:17px}
    #ajaxLayer .photo_wrap.typeB .thumb{position:relative;  margin: 0 auto;}  
    #ajaxLayer .photo_wrap .btn.btn-outline{top: -329px;left: auto; right: -47px;}
    #ajaxLayer .photo_wrap .info_box .text_box{padding-bottom:30px}
}


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

    #ajaxLayer .photo_wrap .btn.btn-outline{position:relative; top:20px;left:0; width: 100%;}
     
 }
 
 @media screen and (max-width:450px) {
 
    #ajaxLayer .photo_wrap .info_box h3{font-size: 20px;}
   
     
 }


 @media screen and (max-width:400px) {
     
    #ajaxLayer .photo_wrap.typeB {padding: 50px 20px;}

 }

 /* /prog/mooc/ctl/sub03_02_03/list.do */
.board--card--list.mooc_card .inner-box{min-height:285px}
.board--card--list.mooc_card .obj .thm--box .inner img{transform: translate(-50%,-50%) ; width:auto; height:100%}
.board--card--list.mooc_card .obj .card--body .tit,.board--card--list.mooc_card .obj .card--body .tit em{letter-spacing:-1px; line-height: 1.1; }
.board--card--list.mooc_card .obj .card--body .tit em{display:block;font-size:15px;margin-top: 14px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;text-overflow: ellipsis;overflow: hidden; font-weight: 500; color:#aaa;}
.board--card--list.mooc_card .obj .card--body .pt{margin-bottom: 10px;}

/* search */
.program--search .search_inner.float-md-right .fieldset{white-space:normal;}
.program--search .search--btn .btn--submit{width:95px}

/* layer-popup */
#mooc_pop{width:100%; height:100%; position: relative;}
#mooc_pop .modal-dialog{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%)}
#mooc_pop .detail-btn{}
#mooc_pop .photo_wrap .info_box em{display:block; font-size: 18px; font-weight: 500; margin-top: 10px;}

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

    .sub03_02_03 .program--search .search_inner.float-md-right .fieldset{white-space: nowrap;}
    .sub03_02_03 .program--search .search_inner.float-md-right .fieldset > div{margin-bottom: 2px; margin-left: 0}
    .sub03_02_03 .program--search .search_inner.float-md-right .fieldset > div, .program--search .search_inner.float-md-right .fieldset > div span{display:block; width:100%; max-width: 100%;}
    .sub03_02_03 .program--search .search--btn button{margin-top: 3px; width:100%; background: #fff}
    
}