@charset "utf-8";

/**************************************************
	Layout CSS Document
	IEETU Web Standardization Team
	2022-07-05
**************************************************/


/**************************************************
	Common
**************************************************/
#header{border-bottom:none;}
.cont_main > div > .inr{max-width:1260px; margin:0 auto;}

/* 배너존 */
.ms_banner .dots_wrap{position:absolute; bottom:65px; left:72px;}
.ms_banner .nav .pause_play{margin-left:10px;}
.ms_banner .nav button{border:none;}
.ms_banner .item img{border-radius:40px;}
.ms_banner .slickwrap .nav .prev,
.ms_banner .slickwrap .nav .next{width:48px; height:48px; top:50%; margin-top:-24px; border-radius:50%; box-shadow:0px 10px 10px 0px rgba(0, 0, 0, 0.15);}
.ms_banner .slickwrap .nav .prev{background:url(../images/main/prev_banzone.png); left:-75px;}
.ms_banner .slickwrap .nav .next{background:url(../images/main/next_banzone.png); right:-75px;}
.ms_banner .slickwrap .nav .prev:after,
.ms_banner .slickwrap .nav .next:after{display:none;}
.ms_banner .slickwrap .nav .slick-dots li:first-child{padding-left:0;}
.ms_banner .slickwrap .nav .slick-dots button{background:#fff;}
.ms_banner .slickwrap .nav .slick-dots .slick-active button{background:#000;}

/* 검색 */
.ms_search{position:relative; z-index:1; max-width:834px; height:84px; margin:-40px auto 78px; border-radius:12px; border:2px solid transparent; background-image:linear-gradient(#fff, #fff), linear-gradient(135deg, #e4007f 40%, #5444b3); background-origin:border-box; background-clip:content-box, border-box; box-shadow:0px 5px 20px 5px rgba(0, 0, 0, 0.15);}
.ms_search form{height:100%;}
.ms_search label{position:absolute; top:50%; left:30px; font-size:17px; color:#666; transform:translateY(-50%); transition:all .4s;}
.ms_search.on label{visibility:hidden; opacity:0;}
.ms_search .word{font-size:17px; width:100%; height:100%; margin:0; padding:0 80px 0 30px; border:0; background:transparent;}
.ms_search .word::placeholder{font-size:17px; color:#666;}
.ms_search .btn_srch{text-indent:-999999px; position:absolute; top:22px; right:32px; width:37px; height:37px; background:url(../images/main/ico_srch_btn.png);}

/* 퀵메뉴 */
.ms_quick{margin:0 0 80px 0;}
.ms_quick .inr ul{display:flex; flex-wrap:wrap; gap:18px;}
.ms_quick .inr ul li{width:calc(16.6666% - 15px);  background:#f4f5fa; border:2px solid #f4f5fa; border-radius: 10px; transition: border-color 0.3s ease-in-out;}
.ms_quick .inr ul li:hover,
.ms_quick .inr ul li:focus{background:linear-gradient(#f4f5fa, #f4f5fa) padding-box, linear-gradient(135deg, #e4007f 40%, #5444b3 ) border-box; border:2px solid transparent;}
.ms_quick .inr ul li a{font-size:17px; font-weight:700; display:flex; align-items:center; min-height:112px; padding:10px 10px 10px 25px; transition:transform .3s; word-break:keep-all;}
.ms_quick .inr ul li a:before{content:""; display:block; flex:0 0 auto; width:50px; height:50px; margin:0 10px 0 0; background:url(../images/main/sp_quick.png);}
.ms_quick .inr ul li.n02 a:before{background-position:-50px 0;}
.ms_quick .inr ul li.n03 a:before{background-position:-100px 0;}
.ms_quick .inr ul li.n04 a:before{background-position:-150px 0;}
.ms_quick .inr ul li.n05 a:before{background-position:-200px 0;}
.ms_quick .inr ul li.n06 a:before{background-position:-250px 0;}
.ms_quick .inr ul li.n07 a:before{background-position:-300px 0;}
.ms_quick .inr ul li.n08 a:before{background-position:-350px 0;}
.ms_quick .inr ul li.n09 a:before{background-position:-400px 0;}
.ms_quick .inr ul li.n10 a:before{background-position:-450px 0;}
.ms_quick .inr ul li.n11 a:before{background-position:-500px 0;}
.ms_quick .inr ul li.n12 a:before{background-position:-550px 0;}

/* 추천강좌 */
.ms_recom{position:relative; overflow:hidden; margin:0 0 75px; height:500px;}
.ms_recom:before{content:""; position:absolute; top:26px; bottom:0; left:0; right:calc(50% - 630px); background:#f1f7ff url(../images/main/bg_recom.png) no-repeat 100% 0;}
.cont_main .ms_recom > .inr{position:relative; max-width:initial; left:calc(50% - 630px);}
.ms_recom .tit{font-size:36px;}
.ms_recom .slider-for{position:relative; max-width:1260px; padding:30px 0 0;}
.ms_recom .slider-for .item > .inr{display:flex; max-width:1160px;}
.ms_recom .slider-for .item .slr_img{width:592px; margin:0 65px 0 0; padding:0 0 20px 0; flex:0 0 auto;}
.ms_recom .slider-for .item .slr_img img{border-radius:20px 20px 20px 80px; box-shadow:10px 10px 20px 0px rgba(0, 0, 0, 0.08); height:370px;}
.ms_recom .slider-for .slick-prev,
.ms_recom .slider-for .slick-next{display:flex; align-items:center; justify-content:center; position:absolute; left:487px; bottom:20px; width:52px; height:52px; background:#fff; z-index:30; border-radius:10px 0 0 0; font-size:0; color:transparent;}
.ms_recom .slider-for .slick-next{left:540px; border-left:1px solid #b2b2b2; border-radius:0 0 10px 0;}
.ms_recom .slider-for .slick-prev:before,
.ms_recom .slider-for .slick-next:before{content:""; display:block; width:9px; height:15px; background:url(../images/base/sp_slick.png); background-position:0 -125px;}
.ms_recom .slider-for .slick-next:before{transform:rotate(180deg);}
.ms_recom .details{margin:20px 0 0; width:calc(100% - 657px); max-width:420px;}
.ms_recom .details .sort{display:inline-block; padding:3px 10px; border-radius:15px; font-size:15px; border-radius:4px; color:#004098; border:1px solid #004098;}
.ms_recom .details .con_tit{font-size:24px; font-weight:700; margin:15px 0 20px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ms_recom .details .lst1{display:flex; flex-wrap:wrap; gap:10px 25px; margin:0 0 25px; padding:0 0 25px; border-bottom:1px solid #ccc;}
.ms_recom .details .lst1 li{display:flex; align-items:center; color:#555; line-height:1;}
.ms_recom .details .lst1 li:last-child{margin-right:0;}
.ms_recom .details .lst1 li:before{content:""; display:block; width:20px; height:16px; margin:0 5px 0 0; background:url(../images/main/sp_recom_ico.png); flex:0 0 auto;}
.ms_recom .details .lst1 li.ico02:before{background-position:-20px 0;}
.ms_recom .details .lst1 li.ico03:before{background-position:-40px 0;}
.ms_recom .details .lst2{display:flex; flex-wrap:wrap; margin:0 0 40px 0;}
.ms_recom .details .lst2 li{margin:0 0 5px 0; display:flex; align-items:center; width:100%;}
.ms_recom .details .lst2 li:before{content:""; display:block; width:30px; height:30px; margin:0 5px 0 0; background:url(../images/main/sp_period.png); flex:0 0 auto;}
.ms_recom .details .lst2 li:nth-child(2):before{background-position:-40px 0;}
.ms_recom .details .lst2 li .txt_l{margin:0 5px 0 0; flex:0 0 auto; line-height:1; font-weight:700; color:#004098;}
.ms_recom .details .btn_recom{display:flex;}
.ms_recom .details .btn_recom a{position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden; font-weight:700; width:160px; height:50px; margin:0 10px 0 0; border-radius:25px; line-height:1;}
.ms_recom .details .btn_recom a.cart{background:#fff; border:1px solid #7c7c82;}
.ms_recom .details .btn_recom a.cart:hover{background:#f0f0f0;}
.ms_recom .details .btn_recom a.apply{background:#e6007e; color:#fff;}
.ms_recom .details .btn_recom a.apply:hover{background:#d00072;}
.ms_recom .details .btn_recom a:before{content:""; display:block; width:24px; height:21px; margin:0 8px 0 0;}
.ms_recom .details .btn_recom a.cart:before{background:url(../images/main/ico_cart_blk.png);}
.ms_recom .details .btn_recom a.apply:before{background:url(../images/main/ico_apply.png);}
.ms_recom .slider-nav{position:absolute; left:1150px; bottom:30px; max-width:1000px; margin-left:8px;}
.ms_recom .slider-nav .item{position:relative; padding:0 12px; cursor:pointer;}
.ms_recom .slider-nav .item img{border-radius:10px 10px 10px 40px;}
.ms_recom .slider-nav .nav_tit{display:flex; justify-content:center; align-items:center; flex-direction:column; position:absolute; width:calc(100% - 24px); height:100%; background:rgba(41,55,120,0.9); border-radius:10px 10px 10px 40px; text-align:center; color:#fff; line-height:1.5; padding:10px 30px; transition:opacity 0.3s ease-in-out;}
.ms_recom .slider-nav .nav_tit:before{content:""; display:block; width:1px; height:17px; margin:-15px 0 15px; background:rgba(255,255,255,0.85);}
.ms_recom .slider-nav .item:hover .nav_tit{opacity:0;}
.ms_recom .slider-nav .slick-prev,
.ms_recom .slider-nav .slick-next{position:absolute; top:50%; margin-top:-18px; display:block; z-index:10; text-indent:-999999px; width:36px; height:36px;}
.ms_recom .slider-nav .slick-prev{left:-8px; background:url(../images/main/prev_recom.png);}
.ms_recom .slider-nav .slick-next{right:-8px; background:url(../images/main/next_recom.png);}
.ms_recom .nav{position:absolute; top:25px; padding:0 40px 0 0; max-width:1260px; width:100%; text-align:right;}
.ms_recom .nav .count{font-size:16px; letter-spacing:0; line-height:1;}
.ms_recom .nav .count em{font-weight:700; font-size:24px;}

/* 인기강좌 */
.ms_popular{margin:0 0 80px;}
.ms_popular .tit{font-size:36px;}
.ms_popular .inr{position:relative;}
.ms_popular .tab_lst{display:flex; justify-content:flex-end; gap:8px; margin:-38px 0 25px; overflow-x: auto;}
.ms_popular .tab_lst li{display:flex;}
.ms_popular .tab_lst li a{flex:0 0 auto; display:block; width:max-content; border:1px solid #ccc; border-radius:4px; padding:7px 15px; text-align:center; color:#666;}
.ms_popular .tab_lst li a:hover,
.ms_popular .tab_lst li a.active{border-color:#000; font-weight:700; color:#000;}
.ms_popular .tab_box{display:none;}
.ms_popular .tab_box.active{display:block;}
.ms_popular .slickwrap{margin:0 -10px; padding:0 0 55px;}
.ms_popular .slider .item{padding:0 10px;}
.ms_popular .slider .thum_wrap{position:relative; border-radius:20px; overflow:hidden; margin:0 0 20px 0; background:#f2f2f2; padding-top:56.45%;}
.ms_popular .slider .thum_wrap > img{position:absolute;	top:0; left:0; width:100%; height:100%; transition:transform .3s;}
.ms_popular .slider .item a:hover .thum_wrap > img{transform:scale(1.1);}
.ms_popular .slider .thum_wrap .btn_cart{position:absolute; bottom:11px; right:11px; width:40px; height:40px; border-radius:50%; text-indent:-999999px; background:url(../images/content/ico_cart.png); cursor:pointer;}
.ms_popular .slider .r_txt{color:#e4007f; border:1px solid #f4accc; border-radius:4px; font-size:15px; padding:2px 8px;}
.ms_popular .slider .con_tit{font-size:20px; font-weight:700; margin:12px 0 22px 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all;}
.ms_popular .slider .lst li{display:flex; align-items:center; margin:0 0 10px 0;}
.ms_popular .slider .lst li .txt_l{padding:3px 7px; background:#ececec; border-radius:3px; margin:0 10px 0 0;}
.ms_popular .slickwrap .nav .dots_wrap{position:absolute; left:50%; bottom:0; transform:translateX(-50%); gap:10px;}
.ms_popular .slickwrap .nav .prev,
.ms_popular .slickwrap .nav .next{position:absolute; top:65px; width:40px; height:40px; background:#fff; border:1px solid #e4e4e4; border-radius:50%; box-shadow:0px 10px 10px 0px rgba(0, 0, 0, 0.15);}
.ms_popular .slickwrap .nav .prev{left:-10px;}
.ms_popular .slickwrap .nav .next{right:-10px;}
.ms_popular .slickwrap .nav .prev:after,
.ms_popular .slickwrap .nav .next:after{content:""; display:block; width:9px; height:15px; background:url(../images/base/sp_slick.png); background-position:0 -125px;}
.ms_popular .slickwrap .nav .next:after{transform:rotate(180deg);}

.ms_popular .btn_more{position:absolute; right:0; top:-5px; display:block; width:46px; height:46px; border:1px solid #ccc; border-radius:50%; text-indent:-9999999px;}
.ms_popular .btn_more:before,
.ms_popular .btn_more:after{content:""; display:block; position:absolute; top:50%; left:50%; background:#383535;}
.ms_popular .btn_more:before{width:15px; height:3px; margin: -1px 0 0 -7px;}
.ms_popular .btn_more:after{width:3px; height:15px; margin: -7px 0 0 -1px;}

/* 1260px ~ 1459px */
@media all and (max-width:1459px){

	/* 배너존 */
	.ms_banner .slickwrap .nav .prev{left:-15px;}
	.ms_banner .slickwrap .nav .next{right:-15px;}

}

/* Tablet ~ 1259px */
@media all and (max-width:1259px){

	/**************************************************
		Common
	**************************************************/
	.cont_main > div > .inr{margin:0 24px;}
	
	/* 배너존 */
	.cont_main > .ms_banner > .inr{margin:0 24px;}
	.ms_banner .slickwrap .nav .prev, 
	.ms_banner .slickwrap .nav .next{width:40px; height:40px; background-size:40px; margin-top:-20px;}

	/* 퀵메뉴 */
	.ms_quick .inr ul li a{padding-left:10px;}

	/* 추천강좌 */
	.cont_main .ms_recom > .inr{margin:0; padding:0 24px; left:0;}
	.ms_recom{height:auto; padding:0 0 50px;}
	.ms_recom:before{right:24px; background-size:cover;}
	.ms_recom .slider-for .item > .inr{max-width:initial; align-items:center;}
	.ms_recom .slider-for .item .slr_img{margin:0 40px 0 0;}
	.ms_recom .slider-nav{position:initial; max-width:initial; margin:20px 20px 0 0;}
	.ms_recom .nav{padding:0; right:20px;}

	/* 인기강좌 */
	.ms_popular .slickwrap .nav .prev, 
	.ms_popular .slickwrap .nav .next{top:calc(50% - 140px);}

}

/* Tablet 768px ~ 1023px */
@media all and (max-width:1023px){

	/**************************************************
		Common
	**************************************************/

	/* 배너존 */
	.ms_banner .dots_wrap{left:53px;}
	.ms_banner .slickwrap .nav .prev{background:url(../images/main/prev_banzone_m.png); background-size:40px;}
	.ms_banner .slickwrap .nav .next{background:url(../images/main/next_banzone_m.png); background-size:40px;}

	/* 검색 */
	.ms_search{margin:-30px 80px 40px; max-width:initial; height:60px;}
	.ms_search label{font-size:15px; left:15px;}
	.ms_search .word{padding:0 50px 0 15px; font-size:16px;}
	.ms_search .word::placeholder{font-size:16px;}
	.ms_search .btn_srch{width:28px; height:28px; top:14px; right:15px; background:url(../images/main/ico_srch_btn_x2.png); background-size:28px;}

	/* 퀵메뉴 */
	.ms_quick{margin:0 0 40px 0;}
	.ms_quick .inr ul{gap:10px;}
	.ms_quick .inr ul li{width:calc(33.3333% - 7px);}
	.ms_quick .inr ul li a{min-height:90px; font-size:16px;}

	/* 추천강좌 */
	.ms_recom{padding:0; margin:0 0 50px;}
	.ms_recom:before{border-radius:0 20px 160px 0; background-image:none;}
	.ms_recom .tit{font-size:28px;}
	.ms_recom .slider-for{padding:50px 0 0;}
	.ms_recom .slider-for .item > .inr{flex-direction:column; width:calc(100% - 24px);}
	.ms_recom .slider-for .item .slr_img{margin:0; padding:0; width:100%;}
	.ms_recom .slider-for .item .slr_img img{height:auto;}
	.ms_recom .details{width:100%; height:360px; margin:40px 0 0; max-width:600px;}
	.ms_recom .slider-nav{display:none;}
	.ms_recom .slider-for .slick-prev, 
	.ms_recom .slider-for .slick-next{left:initial; right:24px; bottom:400px;}
	.ms_recom .slider-for .slick-prev{right:76px;}
	.ms_recom .nav{top:10px;}

	/* 인기강좌 */
	.ms_popular .tit{font-size:28px;}

}

/* Mobile ~ 767px */
@media all and (max-width:767px){
	.cont_main > div > .inr{margin:0 16px;}

	/* 배너존 */
	.cont_main > .ms_banner > .inr{margin:0 16px;}
	.ms_banner .dots_wrap{left:30px; bottom:45px;}
	.ms_banner .slickwrap .nav .prev{left:-10px;}
	.ms_banner .slickwrap .nav .next{right:-10px;}

	/* 검색 */
	.ms_search{margin-left:50px; margin-right:50px;}

	/* 퀵메뉴 */
	.ms_quick .inr ul li{width:calc(33.333% - 7px);}
	.ms_quick .inr ul li a:before{background:url(../images/main/sp_quick_x2.png); background-size:800px;}

	/* 추천강좌 */
	.ms_recom{margin:0 0 40px;}
	.ms_recom:before{right:16px; background:#f1f7ff url(../images/main/bg_recom_m.png) no-repeat 100% 100%; background-size:cover;}
	.cont_main .ms_recom > .inr{padding:0 16px;}
	.ms_recom .nav{right:16px;}
	.ms_recom .nav .count{font-size:15px; margin-top:2px;}
	.ms_recom .nav .count em{font-size:21px;}
	.ms_recom .slider-for{padding-top:30px;}
	.ms_recom .slider-for .item > .inr{width:calc(100% - 16px); padding:0 10px;}
	.ms_recom .details{height:310px; max-width:initial;}
	.ms_recom .details .con_tit{font-size:20px;}
	.ms_recom .details .lst1{margin:0 0 15px; padding:0 0 18px;}
	.ms_recom .details .lst1 li{margin-right:10px;}
	.ms_recom .details .lst2{margin:0 0 15px 0;}
	.ms_recom .details .lst2 li:before{background:url(../images/main/sp_period_x2.png); background-size:100px auto;}
	.ms_recom .details .btn_recom{justify-content:center;}
	.ms_recom .details .btn_recom a{width:140px;}
	.ms_recom .details .btn_recom a.cart:before{background:url(../images/main/ico_cart_blk_x2.png); background-size:24px auto;}
	.ms_recom .details .btn_recom a.apply:before{background:url(../images/main/ico_apply_x2.png); background-size:24px auto;}
	.ms_recom .slider-for .slick-prev, 
	.ms_recom .slider-for .slick-next{width:42px; height:42px; bottom:350px; right:26px;}
	.ms_recom .slider-for .slick-prev{right:68px;}
	.ms_recom .slider-for .slick-prev:before,
	.ms_recom .slider-for .slick-next:before{background-image:url(../images/base/sp_slick_m.png); background-size:400px 400px;}

	/* 인기강좌 */
	.ms_popular{margin:0 0 40px;}
	.ms_popular .tab_lst{margin-top:20px; justify-content:flex-start;}
	.ms_popular .tab_lst li a{padding:7px 10px;}
	.ms_popular .slider .con_tit{font-size:18px;}
	.ms_popular .slider .lst li{flex-wrap:wrap;}
	.ms_popular .slider .thum_wrap .btn_cart{background:url(../images/content/ico_cart_x2.png); background-size:40px;}
	.ms_popular .slickwrap .nav .prev{left:-5px;}
	.ms_popular .slickwrap .nav .next{right:-5px;}

}

@media all and (max-width:639px){

}

@media all and (max-width:537px){

	/* 추천강좌 */
	.ms_recom .details{height:320px; margin-top:30px;}
	.ms_recom .details .lst1 li,
	.ms_recom .details .lst2 li{font-size:15px;}
	.ms_recom .slider-for .slick-prev, 
	.ms_recom .slider-for .slick-next{bottom:350px;}

	/* 인기강좌 */
	.ms_popular .slider .lst li{font-size:15px;}
	.ms_popular .slider .lst li .txt_l{margin:0 5px 0 0;}

	/* 퀵메뉴 */
	.ms_quick .inr ul li a{flex-direction:column; text-align:center;}
	.ms_quick .inr ul li a:before{margin:0 0 5px 0;}

}

@media all and (max-width:430px){

	/* 추천강좌 */
	.ms_recom .details .lst1{margin:0 0 10px; padding:0 0 15px;}
	.ms_recom .details .lst2{margin:0 0 10px;}
	.ms_recom .details .con_tit{margin:10px 0 15px;}

	/* 인기강좌 */
	.ms_popular .slider .lst li{align-items:flex-start; flex-direction:column;}
	.ms_popular .slider .lst li .txt_l{margin-bottom:5px;}
	.ms_popular .slickwrap .nav .prev, 
	.ms_popular .slickwrap .nav .next{top:calc(50% - 160px); width:35px; height:35px;}

}