@charset "utf-8";

/* 공통 */
#atc02{position:relative;width:100%;height:1060px;padding:220px 15px 0;margin-top:-125px;background:url(./inc02_bg.jpg) center no-repeat;background-size:cover}
#atc02 .swiper-wrapper { height: auto; }
#atc02 button{border:none}
#atc02 b {font-weight:normal}
#atc02 .inner{display:flex;flex-wrap:wrap;max-width:1400px;margin:0 auto}
#atc02 .tit_area{width:100%;margin-bottom:60px;text-align:center;color:#fff;font-family:'EstablishRetrosans'}
#atc02 .tit_area span{font-size:18px}
#atc02 .tit_area p {margin-top:22px;font-size:30px;line-height:1.4;white-space:pre-line}
#atc02 .tit_area p b{color:var(--second)}

/* 강사소개 */
#atc02 .gall_box{width:330px}
#atc02 .gall_box .tit{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
#atc02 .gall_box .tit p{font-size:24px;color:#fff;font-family:'EstablishRetrosans'}
#atc02 .gall_box ul li{width:330px}
#atc02 .gall_box ul li .img{height:355px;border-radius:15px;background:center no-repeat;background-size:cover}
#atc02 .gall_box ul li .cont{opacity:0;font-size:17px;margin-top:25px;text-align:center;color:#fff}
#atc02 .gall_box ul li .cont span{margin-left:15px;font-size:15px;color:rgba(255, 255, 255, .4)}
#atc02 .gall_box .swiper-slide-active .cont{opacity:1}
/* 컨트롤러 */
#atc02 .control{display:flex;align-items:center;position:relative;margin-left:auto;font-size:25px}
#atc02 .control span{width:30px;text-align:center;cursor:pointer;color:#fff}
#atc02 .control span+span{margin-left:20px}
#atc02 .control:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:11px;content:'';background:rgba(255,255,255,.4)}

/* 강의소개 */
#atc02 .video_area{width:calc(100% - 330px);margin-top:60px;padding-left:65px}
#atc02 .video_area ul{overflow:hidden;width:100%}
#atc02 .video_area ul li{width:590px;height:100%}
#atc02 .video_area ul li:first-child{overflow:hidden;float:left;height:355px;margin-right:25px;border-radius:15px}
#atc02 .video_area ul li:first-child .gall_img_info{position:absolute;width:100% !important;bottom:0;padding:45px 0 45px 40px;font-size:20px !important;background:linear-gradient( to bottom , transparent,black)}
#atc02 .video_area ul li:first-child .gall_img_info span{display:none !important}
#atc02 .video_area ul li:first-child .gall_img_info:before{position:absolute;right:50px;bottom:35px;width:50px;height:50px;padding-left:3px;font-size:15px;border-radius:100%;text-align:center;line-height:50px;background:#fff;color:var(--primary-r);content:'\f04b';transition:all .2s;font-family:'fontawesome'}
#atc02 .video_area ul li .gall_img{display:flex;justify-content:space-between;align-items:center;position:relative;height:100%}
#atc02 .video_area ul li .gall_img .gall_img_info{width:calc(100% - 225px);cursor:pointer;word-break:keep-all;font-size:16px;line-height:24px;font-weight:600;color:#fff}
#atc02 .video_area ul li .gall_img .gall_img_info span{display:block;margin-top:15px;font-size:15px;font-weight:400;opacity:.4}
#atc02 .video_area ul li .gall_img button{overflow:hidden;width:100%;height:100%;border-radius:15px}
#atc02 .video_area ul li .gall_img button img{width:100%;height:100%}
#atc02 .video_area ul li:not(:first-child){float:left;width:380px;height:130px;margin-bottom:20px}
#atc02 .video_area ul li:not(:first-child) button{width:200px;margin-right:20px;transition:all .2s}
#atc02 .video_area ul .video_plus{float:left;margin-left:75px;display:block;width:50px;height:50px;text-align:center;font-size:30px;line-height:43px;border:1px solid #fff;border-radius:100%;opacity:.4;color:#fff;transition:all .2s}

/* fkxptmxm */
#atc02 .la_box{position:absolute;left:50%;transform:translateX(-50%);width:100%;bottom:0;background:rgba(28,30,35,.65)}
#atc02 .la_box .la_wrap{display:flex;align-items:center;width:100%;max-width:1400px;height:110px;margin:0 auto;font-size:16px}
#atc02 .la_box a{color:#fff}
#atc02 .la_box .latest{display:flex;align-items:center;width:50%}
#atc02 .la_box .latest .tit{margin-right:15px;padding:5px 20px;border-radius:30px;font-size:14px;font-weight:600;background:var(--primary)}
#atc02 .la_box .latest ul{width:calc(100% - 155px)}
#atc02 .la_box .latest ul li a{display:flex;justify-content:space-between;font-weight:500}
#atc02 .la_box .latest ul li a .date{font-size:14px;color:rgba(255,255,255,.5)}

#video_view{display:none;position:fixed;left:0;top:0;right:0;bottom:0;z-index:1001;font-size:15px;color:#777;letter-spacing:-.2px;line-height:1.6;background:rgba(0,0,0,0.7);font-family:'Noto Sans KR'}
#video_view .inner{opacity:0;overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;padding:20px 15px 40px 20px;margin-top:40px;border-radius:16px;background-color:#fff;transition:all .4s .1s}
#video_view.on .inner{opacity:1;margin-top:0}
#video_view iframe{width:100%}
#video_view .close{position:absolute;right:20px;top:20px;width:40px;height:40px;border:none;background:none}
#video_view .close:before, #video_view .close:after{display:block;content:"";position:absolute;top:15px;left:7px;transform:rotate(45deg);width:26px;height:2px;background-color:#222}
#video_view .close:after{transform:rotate(-45deg)}
#video_view .tit_area{padding-right:60px;margin-bottom:15px}
#video_view .tit_area p{font-size:18px;color:#222;font-family:'Noto Sans KR';font-weight:500}
#video_view .tit_area span+span{margin-left:10px}
#video_view .scr_area{overflow-y:scroll;max-height:75vh}
#video_view .scr_area::-webkit-scrollbar{width:5px}
#video_view .scr_area::-webkit-scrollbar-thumb{border-radius:5px;background-color:#b1b1b1}
#video_view .cont img{max-width:100%}

/* 모바일 호버 X */
@media (hover: hover) {
#atc02 .video_area ul li:first-child:hover .gall_img_info:before{color:#fff;background:var(--primary)}
#atc02 .video_area ul li:not(:first-child):hover button{opacity:.75}
#atc02 .video_area ul .video_plus:hover{opacity:1}
}

/* 반응형 [s] */
@media (max-width:1430px){
#atc02{padding:220px 50px 0}
#atc02 .gall_box .gall_slide{margin-left:15px}
#atc02 .video_area{padding-left:40px}
#atc02 .video_area ul li{width:calc(100% - 360px)}
#atc02 .video_area ul li:not(:first-child){width:335px}
#atc02 .video_area ul li:not(:first-child) button{width:180px;margin-right:15px}
#atc02 .video_area ul li .gall_img .gall_img_info{width:calc(100% - 195px)}
#atc02 .video_area ul li:first-child .gall_img_info{padding:45px 0 45px 20px}
#atc02 .video_area ul li:first-child .gall_img_info:before{right:20px}
#atc02 .video_area ul .video_plus{margin-left:69px}
}
@media (max-width:1230px){
#atc02{height:1186px}
#atc02 .video_area ul li{width:100%}
#atc02 .video_area ul li:first-child{margin:0 0 15px}
#atc02 .video_area ul li:not(:first-child){width:calc(100% - 100px)}
#atc02 .video_area ul li:nth-child(3){display:none}
#atc02 .video_area ul .video_plus{margin:40px 0 0 15px}
}
@media (max-width:1024px){
#atc02{height:auto;margin-top:0;padding:75px 15px 207px}
#atc02 .gall_box{width:300px}
#atc02 .video_area{width:calc(100% - 300px)}
#atc02 .video_area ul li:not(:first-child){width:calc(100% - 65px)}
#atc02 .video_area ul li:first-child .gall_img_info{font-size:18px !important}
#atc02 .la_box .la_wrap{display:block;height:auto}
#atc02 .la_box .latest{width:100%;padding:20px 15px}
#atc02 .la_box .latest+.latest{border-top:1px solid rgba(255,255,255,.2)}
#atc02 .la_box .latest .tit{min-width:75px;text-align:center}
#atc02 .la_box .latest ul li a .date{margin-left:10px}
}
@media (max-width:768px){
#atc02{padding:55px 15px 187px}
#atc02 .inner{display:block}
#atc02 .tit_area p{font-size:25px}
#atc02 .gall_box{width:100%}
#atc02 .gall_box .tit{margin-bottom:30px}
#atc02 .gall_box .gall_slide{width:330px;margin:0 auto}
#atc02 .video_area{width:100%;margin-top:50px;padding-left:0}
#atc02 .video_area ul li{float:none !important;width:100%}
#atc02 .video_area ul li:first-child{height:auto;margin:0 0 15px}
#atc02 .video_area ul li:not(:first-child){width:100%}
#atc02 .video_area ul li:nth-child(3){display:block}
	#atc02 .video_area ul li .gall_img { height: auto; }
#atc02 .video_area ul li .gall_img .gall_img_info{font-size:15px}
#atc02 .video_area ul li .gall_img .gall_img_info span{font-size:14px}
#atc02 .video_area ul .video_plus{float:none;clear:both;width:45px;height:45px;margin:30px auto 0;font-size:20px;line-height:40px}
#atc02 .la_box .la_wrap{font-size:15px}
#atc02 .la_box .latest{padding:17px 15px}
#atc02 .la_box .latest ul{width:calc(100% - 95px)}
#atc02 .la_box .latest ul li a .subj{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media (max-width:480px){
#atc02{padding:55px 15px 165px}
#atc02 .tit_area p{white-space:normal;word-break:keep-all}
#atc02 .gall_box .tit p{font-size:20px}
#atc02 .video_area{margin-top:50px}
#atc02 .video_area ul li:not(:first-child){margin-bottom:15px}
#atc02 .video_area ul li:first-child .gall_img_info{padding:25px 0 25px 15px;font-size:17px !important}
#atc02 .video_area ul li:first-child .gall_img_info:before{right:15px;bottom:15px;width:45px;height:45px;line-height:45px;font-size:13px}
#atc02 .la_box .la_wrap{font-size:14px}
#atc02 .la_box .latest .tit{min-width:73px;font-size:13px}
}
@media (max-width:380px){
#atc02 .gall_box .tit p{font-size:18px}
#atc02 .gall_box .gall_slide{width:260px}
#atc02 .video_area ul li:not(:first-child){height:110px}
#atc02 .video_area ul li:not(:first-child) button{width:50%;margin-right:0}
#atc02 .video_area ul li .gall_img .gall_img_info{width:50%;padding:15px 0 15px 15px;font-size:15px !important}
#atc02 .video_area ul li:first-child .gall_img_info:before{bottom:11px;width:35px;height:35px;line-height:35px;font-size:9px}
#atc02 .la_box .latest ul li a .date{display:none}
}
/* 반응형 [e] */