@charset "utf-8"; /*비대면교육 상세보기 페이지 css*/

.cont-01{position:relative; padding-bottom:46px; background:#ffffff;}
.cont-01 strong{font-weight:bold;}
.cont-01 h3 a{display:block; width:100%; height:120px; padding:24px; background:#7b7fa2; color:#ffffff; font-size:20px; font-weight:300; line-height:25px; letter-spacing:-1px; text-align:center;}
.cont-01 h3 a p{font-size:12px; font-weight:500;}
.cont-01 h3 a p img{display:inline-block; width:11px; height:11px; margin:8px 0 0 5px;}

.cont-01-in{margin:37px 20px 0;}
.cont-01-tab li{float:left; height:53px; margin-bottom:23px; border:1px solid #909090; border-left:none; border-bottom:none; background:#f7f7f7; line-height:18px; text-align:center; cursor:pointer}
.cont-01-tab .tab-introduction{width:26%; border-left:1px solid #909090;}
.cont-01-tab .tab-leadership{width:22%;}
.cont-01-tab .tab-improve-competency{width:30%;}
.cont-01-tab .tab-activate-org{width:22%;}
.cont-01-tab li .tablet{display:none;}
.cont-01-tab li .mobile{display:inline-block; width:100%; height:53px; padding-top:7px; color:#909090; font-size:14px;}
.cont-01-tab .active{border:2px solid #000000; border-bottom:none; background:#ffffff;}
.cont-01-tab .active .mobile{color:#000000; font-weight:bold;}

.cont-01-contents{clear:both;}
.cont-01-contents > div .cont-01-img{width:100%; height:auto; margin-bottom:27px;}
.cont-01-contents > div .cont-01-img img{width:100%; height:auto;}
.cont-01-contents > div > h4{font-size:24px; font-weight:bold;}
.cont-01-contents > div .cont-01-txt{margin:15px 0; font-size:14px; line-height:20px; letter-spacing:-1px;}
.cont-01-contents > div .cont-01-txt p{margin-bottom:10px;}

.cont-01-contents > div .hashtag{margin-bottom:20px;}
.cont-01-contents > .cont-introduction .hashtag{margin-bottom:455px;}
.cont-01-contents > .cont-activate-org .hashtag{margin-bottom:342px;}
.cont-01-contents > div .hashtag span{display:inline-block; height:23px; padding:1px 6px; margin:3px 3px 3px 0; border:1px solid #747474; border-radius:25px; color:#747474; font-size:12px;}

.cont-01-contents > div .circle{position:absolute; bottom:0; left:0; width:100%; height:482px; padding:35px 20px; background:#f6f7f9; text-align:center;}
.cont-01-contents > .cont-activate-org .circle{height:371px;}
.cont-01-contents > div .circle .circle-tit{margin-bottom:28px; font-size:15px; letter-spacing:-1px; line-height:23px;}
.cont-01-contents > div .circle .circle-txt{width:100%; height:315px; margin:0 auto; text-align:center;}
.cont-01-contents > div .circle .circle-txt .circle-txt-in{width:318px; height:100%; margin:0 auto;}
.cont-01-contents > div .circle > div > div > div{overflow:hidden; float:left; width:150px; height:150px; border-radius:50%; background:#ff8a70; color:#ffffff; text-align:center;}
.cont-01-contents > .cont-activate-org .circle > div > div > div{background:#5e479f;}
.cont-01-contents > div .circle > div > div > div.first{margin-right:18px; margin-bottom:15px;}
.cont-01-contents > div .circle > div > div > div.second{margin-bottom:15px;}
.cont-01-contents > div .circle > div > div > div.third{margin-right:18px;}
.cont-01-contents > .cont-activate-org .circle > div > div > div.first, .cont-01-contents > .cont-activate-org .circle > div > div > div.second{margin-bottom:0;}
.cont-01-contents > .cont-activate-org .circle > div > div > div.third{margin-left:27%;}
.cont-01-contents > div .circle > div > div > div > h5{display:inline-block; padding-top:40px; font-size:18px; font-weight:bold;}
.cont-01-contents > div .circle > div > div > div.third h5{padding-top:33px;}
.cont-01-contents > div .circle > div > div > div > p{font-size:13px; font-weight:300; line-height:16px;}
.cont-01-contents > .cont-activate-org .circle > div > div > div > p{width:90%; margin:0 auto; font-size:12px; letter-spacing:-0.5px;}
.cont-01-contents > div .circle > div > div > div img{width:90px;}
.cont-01-contents > .cont-activate-org .circle > div > div > div.third img{padding-top:10px;}
.cont-01-contents > div .circle > div > div > div.last img{padding-top:5px;}

.cont-01-contents > div .program-table{overflow:auto; position:relative;}
.cont-01-contents > div .program-table p{position:absolute; top:0; left:0; z-index:250; width:100%; height:100%; background:rgba(0,0,0,0.2);}
.cont-01-contents > div .program-table .program-table-img-01, .cont-01-contents > div .program-table .program-table-img-02{width:100%; padding-top:15px; text-align:center;}
.cont-01-contents > div .program-table .btn-img-view-01, .cont-01-contents > div .program-table .btn-img-view-02{position:absolute; bottom:6px; right:8px; z-index:300;}

@media screen and (max-width:347px){
    .cont-01-tab li .mobile{padding-top:8px; font-size:12px; line-height:17px;}
    .cont-01-tab .active .mobile{padding-top:8px; font-size:13px; line-height:17px;}
    .cont-01-contents > div .circle > div > div > div{width:130px; height:130px;}
    .cont-01-contents > div .circle > div > div > div.first{margin-right:15px;}
    .cont-01-contents > .cont-activate-org .circle > div > div > div.third{margin-left:22%;}
}

@media screen and (min-width:768px){
    .cont-01-tab li{height:63px;}
    .cont-01-tab .tab-introduction{width:30%;}
    .cont-01-tab .tab-leadership{width:18%;}
    .cont-01-tab .tab-improve-competency{width:34%;}
    .cont-01-tab .tab-activate-org{width:18%;}
    .cont-01-tab li .mobile{display:none;}
    .cont-01-tab li .tablet{display:inline-block; width:100%; height:63px; padding-top:21px; color:#909090; font-size:19px;}
    .cont-01-tab .active .tablet{color:#000000; font-weight:bold;}
    
    .cont-01-contents > div .cont-01-img{float:left; width:45%; height:auto; margin-right:20px; margin-bottom:286px;}
    .cont-01-contents > .cont-leadership .cont-01-img, .cont-01-contents > .cont-improve-competency .cont-01-img{margin-bottom:90px;}
    .cont-01-contents > .cont-activate-org .cont-01-img{margin-bottom:233px;}
    .cont-01-contents > div > h4{padding:10px 0; font-size:28px;}
    .cont-01-contents > div .cont-01-txt{margin:20px 0; font-size:16px; line-height:24px;}
    .cont-01-contents > div .cont-01-txt p{margin-bottom:17px;}
    
    .cont-01-contents > .cont-introduction .hashtag, .cont-01-contents > .cont-activate-org .hashtag{margin-bottom:0;}
    .cont-01-contents > div .hashtag span{height:25px; padding:1px 7px; margin:4px 4px 4px 0; font-size:13px;}
    
    .cont-01-contents > div .circle{height:283px;}
    .cont-01-contents > .cont-activate-org .circle{height:230px;}
    .cont-01-contents > div .circle .circle-tit{font-size:16px;}
    .cont-01-contents > div .circle .circle-txt .circle-txt-in{width:672px;}
    .cont-01-contents > .cont-activate-org .circle .circle-txt .circle-txt-in{width:486px;}
    .cont-01-contents > div .circle > div > div > div.second{margin-right:18px;}
    .cont-01-contents > .cont-activate-org .circle > div > div > div.third{margin:0;}
    
    .cont-01-contents > div .program-table p, .cont-01-contents > div .program-table .btn-img-view-01, .cont-01-contents > div .program-table .btn-img-view-02{display:none;}
    .cont-01-contents > div .program-table{width:100%;}
    .cont-01-contents .program-table .inactivate{pointer-events:none;}
}

@media screen and (min-width:1280px){
    .cont-01 h3 a{height:280px; padding:57px; font-size:55px; line-height:70px;}
    .cont-01 h3 a p{font-size:16px; letter-spacing:0; line-height:51px;}
    .cont-01 h3 a p img{width:18px; height:18px; margin:17px 0 0 9px;}
    .cont-01-in{width:1280px; padding-top:102px; margin:0 auto;}
    .cont-01-tab li{height:120px; margin-bottom:54px;}
    .cont-01-tab li .tablet{height:120px; padding-top:50px; font-size:32px;}
    .cont-01-tab .active .tablet{font-size:36px;}
    
    .cont-01-contents > div .cont-01-img{margin-right:46px; margin-bottom:492px;}
    .cont-01-contents > .cont-activate-org .cont-01-img{margin-bottom:398px;}
    .cont-01-contents > div > h4{padding:10px 0 20px; font-size:50px; line-height:60px;}
    .cont-01-contents > div .cont-01-txt{margin:15px 0; font-size:24px; line-height:33px;}
    .cont-01-contents > div .cont-01-txt p{margin-bottom:25px;}
    
    .cont-01-contents > div .hashtag span{height:44px; padding:11px 16px; margin:5px 8px 5px 0; font-size:20px;}
    
    .cont-01-contents > div .circle{height:472px; padding:64px 0 0;}
    .cont-01-contents > .cont-activate-org .circle{height:378px;}
    .cont-01-contents > div .circle .circle-tit{margin-bottom:62px; font-size:26px;}
    .cont-01-contents > div .circle .circle-txt .circle-txt-in{width:1054px;}
    .cont-01-contents > .cont-activate-org .circle .circle-txt .circle-txt-in{width:778px;}
    .cont-01-contents > div .circle > div > div > div{width:226px; height:226px;}
    .cont-01-contents > div .circle > div > div > div.first{margin-right:50px;}
    .cont-01-contents > div .circle > div > div > div.second{margin-right:50px;}
    .cont-01-contents > div .circle > div > div > div.third{margin-right:50px;}
    .cont-01-contents > div .circle > div > div > div.last{margin-right:0;}
    .cont-01-contents > div .circle > div > div > div > h5{padding-top:70px; font-size:28px; line-height:36px;}
    .cont-01-contents > div .circle > div > div > div.third h5{padding-top:52px;}
    .cont-01-contents > .cont-activate-org .circle > div > div > div.third h5{padding-top:70px;}
    .cont-01-contents > div .circle > div > div > div > p{font-size:16px; line-height:20px;}
    .cont-01-contents > .cont-activate-org .circle > div > div > div > p{font-size:14px;}
    .cont-01-contents > div .circle > div > div > div img{width:120px; padding-top:2px;}
    .cont-01-contents > div .circle > div > div > div.last img{padding-top:8px;}
    .cont-01-contents > .cont-activate-org .circle > div > div > div img{padding-top:7px;}
}