/****************************************
*										*
*		section: .slider;				*
*										*
*****************************************/
section.slider { width: 100%; height: auto; padding: 100px 0px 0px; }
section.slider #slider_list,
section.slider #slider_list .slider_item,
section.slider #slider_list .slider_item .img,
section.slider #slider_list .slider_item .img img{ width: 100%; height: auto; }

section.slider #slider_list.slick-dotted.slick-slider { margin-bottom: 35px; }
section.slider #slider_list .slick-dots { bottom: -35px; }
section.slider #slider_list .slick-dots li { width: 68px; height: 8px; background: #BEBEBE; }
section.slider #slider_list .slick-dots li button { display: none;}
section.slider #slider_list .slick-dots li.slick-active { background: #00C3FF; } 

section.slider #slider_list .slider_item .img{ 
	background-color: #9c9c9c;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

section.slider #slider_list .slider_item .info{ 
	position: absolute; top: 0px; right: 0px;
	width: 666px; height: 100%;
	background: rgba(9, 9, 9, 0.80);
	padding: 0px 100px 95px 88px;

    display: grid;
    align-items: end;
    align-content: end;
}

section.slider #slider_list .slider_item .title{ 
	width: 100%; height: 2.2em; line-height: 1.1;

	color: #FFF;
	font-size: 60px; font-weight: 600;

	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-word;
	cursor: pointer;

	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
}

section.slider #slider_list .slider_item .more{ 
	width: 100%; height: auto; line-height: 1;
	
	color: #FFF;
	font-size: 20px; font-weight: 600;
	cursor: pointer;

	margin-top: 60px;
}




/****************************************
*										*
*		section: .media;				*
*										*
*****************************************/
section.media { width: 100%; height: auto; padding: 150px 0px 160px; }
section.media .containner .contents { width: 100%; height: auto; }
section.media .sec_title {
	width: 100%; height: auto; line-height: 1;
	color: #000; text-align: center;
	font-size: 32px;
}

section.media .category_box {
	width: 100%; height: auto;
	margin-top: 70px;
	display: flex;
	justify-content: center; 
	align-items: center;
	align-content: center;
	gap: 78px;
}

section.media .category_box .category_btn.on { color: #00C3FF; }
section.media .category_box .category_btn {
	width: auto; height: auto; line-height: 1.2;
	color: #000;
	font-size: 22px; font-weight: 700;
	background-color: rgba(0,0,0,0); border: 0px;
	cursor: pointer;
}

section.media .contents_list {
	width: 100%; height: auto; 
	margin-top: 48px;
}

section.media .contents_list > div {
	width: 100%; height: auto;
}

section.media .contents_list .contents_item {
	width: calc(33.333% - 17px); height: auto;
	margin-bottom: 17px;
	background-color: #9c9c9c;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

section.media .contents_list .contents_item .bg{
	width: 100%; height: auto;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

section.media .contents_list .contents_item .bg img{ width: 100%; height: auto; }

section.media .contents_list .contents_item .gradient{
	position: absolute; bottom: 0px; left: 0px;
	width: 100%; height: 368px; max-height: 100%;
	background: linear-gradient(180deg, rgba(24, 43, 93, 0.00) 0%, rgba(24, 43, 93, 0.80) 59.41%);
	z-index: 1;
}

section.media .contents_list .contents_item .info{
	position: absolute; bottom: 0px; left: 0px;
	width: 100%; height: auto;
	padding: 40px 60px 60px 40px;
	z-index: 2;
}

section.media .contents_list .contents_item .info .contents_cagegory {
	width: 100%; height: auto; line-height: 1.1;
	color: #00C3FF;
	font-size: 20px; font-weight: 500;
}

section.media .contents_list .contents_item .info .contents_title {
	width: 100%; height: auto; max-height: 80px; line-height: 40px;
	color: #FFF;
	font-size: 30px; font-weight: 700;
	margin-top: 33px;
}
section.media .contents_list .contents_item:hover:not(.video) .info{
	bottom: auto; top: 0px;
	height: 100%;
	background: #00C3FF;
}
section.media .contents_list .contents_item:hover:not(.video) .info .contents_cagegory { color: #fff; }
section.media .contents_list .contents_item:hover:not(.video) .info .contents_title {
	max-height: 320px;

	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-word;

	display: -webkit-box;
	-webkit-line-clamp: 8; 
	-webkit-box-orient: vertical;
}

section.media .contents_list .contents_item:not(:hover) .info .contents_title {
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-word;

	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
}

section.media .contents_list .contents_item:hover:not(.video) .btn{
	position: absolute; bottom: 20px; right: 24px;
	width: 40px; height: 40px;

	background-image: url(../images/more_icon.svg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	z-index: 2;
}

section.media .contents_list .contents_item.video .btn{
	position: absolute; top: 50%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

	width: 90px; height: 90px;

	background-image: url(../images/video_icon.svg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
}



section.media .contents_more {
	width: 100%; height: auto; 
	margin-top: 70px;
}

section.media .contents_more button {
	width: 292px; height: 73px; 
	border: 0px;
	border-radius: 10px;
	background: #00C3FF;
	
	color: #FFF; text-align: center;
	font-size: 18px; font-weight: 700;

	cursor: pointer;

	left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}


section.media .contents_paging { margin-top: 60px; }








/****************************************
*										*
*		section: .view;					*
*										*
*****************************************/
section.view { width: 100%; height: auto; padding: 200px 0px 160px; }
section.view .containner .contents { width: 100%; height: auto; }
section.view .category {
	width: 100%; height: auto; line-height: 1;
	color: #00C3FF; text-align: center;
	font-size: 35px; font-weight: 700;
}

section.view .title_box {
	width: 100%; height: auto;
	margin-top: 45px;
	padding: 70px 0px 0px;
	
	border-top: 1px solid #333;
}


section.view .desc {
	width: 100%; height: auto; line-height: 1.4;
	margin-top: 90px; 
	padding: 70px 0px 100px;
	
	color: #000;
	font-size: 32px; font-weight: 400;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}

section.view .desc *{
	max-width: 100%; height: auto;
}

section.view .btn_box {
	width: 100%; height: auto;
	margin-top: 70px;
	display: flex;
	justify-content: center;
	gap: 15px;
}


section.view .btn_box button {
	width: 230px; height: 73px;
	border: 0px; background-color: #00C3FF;
	border-radius: 10px;
	cursor: pointer;

	color: #FFF; text-align: center;
	font-size: 25px; font-weight: 700;
}






















@media (max-width: 479px){ 
	/****************************************
	*										*
	*		section: .slider;				*
	*										*
	*****************************************/
	section.slider { padding: calc((30 / 480)* 100vw) 0px 0px; }

	section.slider #slider_list .slider_item .info {
		width: 50%;
		padding: 0px calc((15 / 480)* 100vw) calc((50 / 480)* 100vw) calc((15 / 480)* 100vw);
	}
	section.slider #slider_list .slider_item .title { font-size: calc((24 / 480)* 100vw); }
	section.slider #slider_list .slider_item .more { margin-top: calc((20 / 480)* 100vw); font-size: calc((14 / 480)* 100vw); }
	section.slider #slider_list .slick-dots li { width: calc((42 / 480)* 100vw); height: calc((6 / 480)* 100vw); }


	/****************************************
	*										*
	*		section: .media;				*
	*										*
	*****************************************/
	section.media { padding: calc((70 / 480)* 100vw) 0px calc((90 / 480)* 100vw); }

	section.media .category_box { 
		margin-top: calc((0 / 480)* 100vw); 
		display: -webkit-box;
		overflow-x: auto;
		gap: 0px;
	}

	section.media .category_box::-webkit-scrollbar { top: 0px; right: 0px; width: 0px; height: 0px; border: 0px solid #ffffff00; }
	section.media .category_box::-webkit-scrollbar-button { opacity: 0; }
	section.media .category_box::-webkit-scrollbar-button:start:decrement, section.media .category_box::-webkit-scrollbar-button:end:increment {display: block; height: 0px; background: #efefef00; }
	section.media .category_box::-webkit-scrollbar-button:start:decrement, section.media .category_box::-webkit-scrollbar-button:end:increment {display: block; height: 0px; background: #efefef00; }
	section.media .category_box::-webkit-scrollbar-track { background: #efefef00; -webkit-border-radius: 0px; border-radius:0px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.0); }
	section.media .category_box::-webkit-scrollbar-thumb { height: 0px; width: 0px; background: rgba(0,0,0,.0); -webkit-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.0); }
    
	section.media.max_width .containner .contents { padding-right: calc(30px - 15px); }


	section.media .category_box .category_btn:nth-child(1) { margin-left: 0px; }
	section.media .category_box .category_btn {
		margin-left: calc((10 / 480)* 100vw);
	}

	section.media .sec_title { font-size: calc((24 / 480)* 100vw); }
	section.media .category_box .category_btn {
		font-size: calc((18 / 480)* 100vw); 
		padding: calc((7 / 480)* 100vw) calc((14 / 480)* 100vw);
		border-radius: calc((40 / 480)* 100vw);
		background-color: #E4E4E7;
		color: #8F8F8F;
	}


	section.media .category_box .category_btn.on {
		background-color: #00C3FF;
		color: #fff;	
	}




	section.media .contents_list { margin-top: calc((30 / 480)* 100vw); }
	section.media .contents_list .contents_item.video { width: calc(100% - ((13 / 480)* 100vw)); }
	section.media .contents_list .contents_item.video .bg img { height: calc((480 / 480)* 100vw); }


	section.media .contents_list .contents_item {
		width: calc(50% - ((15 / 480)* 100vw));
		margin-bottom: calc((15 / 480)* 100vw);

	}
	section.media .contents_list .contents_item .info .contents_cagegory { font-size: calc((16 / 480)* 100vw); }
	section.media .contents_list .contents_item .info .contents_title {
		margin-top: calc((10 / 480)* 100vw); 
		font-size: calc((18 / 480)* 100vw);
		line-height: calc((20 / 480)* 100vw); max-height: calc((40 / 480)* 100vw);
	}
	section.media .contents_list .contents_item:hover:not(.video) .btn { bottom: calc((20 / 480)* 100vw); right: calc((24 / 480)* 100vw); width: calc((30 / 480)* 100vw); height: calc((30 / 480)* 100vw); }
	section.media .contents_list .contents_item:hover:not(.video) .info .contents_title { max-height: calc((80 / 480)* 100vw); }
	section.media .contents_list .contents_item .info { padding: calc((30 / 480)* 100vw) calc((20 / 480)* 100vw); }
	section.media .contents_list .contents_item.video .btn {
		width: calc((45 / 480)* 100vw); height: calc((45 / 480)* 100vw);
	}

	section.media .contents_more button {
		width: calc((200 / 480)* 100vw); height: calc((65 / 480)* 100vw);
		font-size: calc((18 / 480)* 100vw); 
	}

	section.media .contents_more { margin-top: calc((45 / 480)* 100vw); }
	section.media { padding: calc((80 / 480)* 100vw) 0px calc((75 / 480)* 100vw); }



	/****************************************
	*										*
	*		section: .view;					*
	*										*
	*****************************************/
	section.view { padding: calc((70 / 480)* 100vw) 0px calc((90 / 480)* 100vw); }
	section.view .category { font-size: 18px; }

	section.view .title_box {
		width: 100%; height: auto;
		margin-top: calc((15 / 480)* 100vw);
		padding: calc((25 / 480)* 100vw) 0px 0px;
		
		border-top: 1px solid #333;
	}
	section .title_box .title { font-size: calc((30 / 480)* 100vw); }

	section.view .desc {
		margin-top: calc((20 / 480)* 100vw); 
		padding: calc((10 / 480)* 100vw) 0px calc((50 / 480)* 100vw);
		font-size: calc((18 / 480)* 100vw); 
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}

	section.view .desc *{
		max-width: 100%; height: auto;
	}

	section.view .btn_box {
		margin-top: calc((40 / 480)* 100vw);
	}


	section.view .btn_box button {
		width: calc((150 / 480)* 100vw); height: calc((60 / 480)* 100vw);
		font-size: calc((20 / 480)* 100vw); 
	}


}

@media (max-width: 749px) and (min-width: 480px) { 
	/****************************************
	*										*
	*		section: .slider;				*
	*										*
	*****************************************/
	section.slider { padding: 45px 0px 0px; }

	section.slider #slider_list .slider_item .info {
		width: 50%;
		padding: 0px 15px 50px 15px;
	}
	section.slider #slider_list .slider_item .title { font-size: 24px; }
	section.slider #slider_list .slider_item .more { margin-top: 20px; font-size: 14px; }
	section.slider #slider_list .slick-dots li { width: 42px; height: 6px; }





	/****************************************
	*										*
	*		section: .media;				*
	*										*
	*****************************************/
	section.media { padding: 70px 0px 90px; }

	section.media .category_box { 
		margin-top: 0px; 
		display: -webkit-box;
		overflow-x: auto;
		gap: 0px;
	}

	section.media .category_box::-webkit-scrollbar { top: 0px; right: 0px; width: 0px; height: 0px; border: 0px solid #ffffff00; }
	section.media .category_box::-webkit-scrollbar-button { opacity: 0; }
	section.media .category_box::-webkit-scrollbar-button:start:decrement, section.media .category_box::-webkit-scrollbar-button:end:increment {display: block; height: 0px; background: #efefef00; }
	section.media .category_box::-webkit-scrollbar-button:start:decrement, section.media .category_box::-webkit-scrollbar-button:end:increment {display: block; height: 0px; background: #efefef00; }
	section.media .category_box::-webkit-scrollbar-track { background: #efefef00; -webkit-border-radius: 0px; border-radius:0px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.0); }
	section.media .category_box::-webkit-scrollbar-thumb { height: 0px; width: 0px; background: rgba(0,0,0,.0); -webkit-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,.0); }
    
	section.media.max_width .containner .contents { padding-right: calc(30px - 15px); }


	section.media .category_box .category_btn:nth-child(1) { margin-left: 0px; }
	section.media .category_box .category_btn {
		margin-left: 10px;
	}

	section.media .sec_title { font-size: 24px; }
	section.media .category_box .category_btn { 
		font-size: 20px; 
		padding: 7px 14px;
		background-color: #E4E4E7;
		color: #8F8F8F;
		border-radius: 40px;

	}

	section.media .category_box .category_btn.on {
		background-color: #00C3FF;
		color: #fff;	
	}



	section.media .contents_list { margin-top: 30px; }
	section.media .contents_list .contents_item.video { width: calc(100% - 13px); }
	section.media .contents_list .contents_item.video .bg img { height: 480px; }
	section.media .contents_list .contents_item {
		width: calc(50% - 15px);
	}
	section.media .contents_list .contents_item .info .contents_cagegory { font-size: 16px; }
	section.media .contents_list .contents_item .info .contents_title {
		margin-top: 10px; 
		font-size: 18px;
		line-height: 20px; max-height: 40px;
	}
	section.media .contents_list .contents_item:hover:not(.video) .btn { width: 30px; height: 30px; }
	section.media .contents_list .contents_item:hover:not(.video) .info .contents_title { max-height: 80px; }
	section.media .contents_list .contents_item .info { padding: 30px 20px; }
	section.media .contents_list .contents_item.video .btn {
		width: 45px; height: 45px;
	}

	section.media .contents_more button {
		width: 200px; height: 65px;
	}

	section.media .contents_more { margin-top: 45px; }




	/****************************************
	*										*
	*		section: .view;					*
	*										*
	*****************************************/
	section.view { padding: 70px 0px 90px; }
	section.view .category { font-size: 18px; }

	section.view .title_box {
		width: 100%; height: auto;
		margin-top: 15px;
		padding: 25px 0px 0px;
		
		border-top: 1px solid #333;
	}
	section .title_box .title { font-size: 30px; }

	section.view .desc {
		margin-top: 20px; 
		padding: 10px 0px 50px;
		font-size: 18px; 
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}

	section.view .desc *{
		max-width: 100%; height: auto;
	}

	section.view .btn_box {
		margin-top: 40px;
	}


	section.view .btn_box button {
		width: 150px; height: 60px;
		font-size: 20px; 
	}

}

@media (max-width: 1023px) and (min-width: 750px) { 

	/****************************************
	*										*
	*		section: .slider;				*
	*										*
	*****************************************/
	section.slider { padding: 60px 0px 0px; }
	section.slider #slider_list .slider_item .info {
		width: 300px;
		padding: 0px 30px 60px 30px;
	}
	section.slider #slider_list .slider_item .title { font-size: 32px; }
	section.slider #slider_list .slider_item .more { margin-top: 32px; font-size: 16px; }
	section.slider #slider_list .slick-dots li { width: 42px; height: 6px; }



	/****************************************
	*										*
	*		section: .media;				*
	*										*
	*****************************************/
	section.media { padding: 85px 0px 90px; }
	section.media .category_box { gap: 30px; margin-top: 0px; }
	section.media .sec_title { font-size: 26px; }
	section.media.max_width .containner .contents { padding-right: calc(40px - 17px); }


	section.media .category_box .category_btn { font-size: 20px; }

	section.media .contents_list { margin-top: 30px; }
	section.media .contents_list .contents_item .info .contents_cagegory { font-size: 16px; }
	section.media .contents_list .contents_item .info .contents_title {
		margin-top: 20px; 
		font-size: 18px;
		line-height: 20px; max-height: 40px;
	}
	section.media .contents_list .contents_item:hover:not(.video) .btn { width: 30px; height: 30px; }
	section.media .contents_list .contents_item:hover:not(.video) .info .contents_title { max-height: 80px; }
	section.media .contents_list .contents_item .info { padding: 30px 20px; }
	section.media .contents_list .contents_item.video .btn {
		width: 60px; height: 60px;
	}

	section.media .contents_more button {
		width: 200px; height: 65px;
	}

	section.media .contents_more { margin-top: 45px; }






	/****************************************
	*										*
	*		section: .view;					*
	*										*
	*****************************************/
	section.view { padding: 85px 0px 90px; }
	section.view .category { font-size: 26px; }

	section.view .title_box {
		width: 100%; height: auto;
		margin-top: 30px;
		padding: 60px 0px 0px;
		
		border-top: 1px solid #333;
	}
	section .title_box .title {
		font-size: 52px;
	}

	section.view .desc {
		margin-top: 60px; 
		padding: 60px 0px 90px;
		font-size: 26px; 
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}

	section.view .desc *{
		max-width: 100%; height: auto;
	}

	section.view .btn_box {
		margin-top: 60px;
	}


	section.view .btn_box button {
		width: 200px; height: 60px;
		font-size: 25px; 
	}






}


@media (max-width: 1279px) and (min-width: 1024px) { 
	/****************************************
	*										*
	*		section: .slider;				*
	*										*
	*****************************************/
	section.slider #slider_list .slider_item .info {
		width: 400px;
		padding: 0px 45px 95px 45px;
	}
	section.slider #slider_list .slider_item .title { font-size: 45px; }
	section.slider #slider_list .slider_item .more { margin-top: 45px; }


	/****************************************
	*										*
	*		section: .media;				*
	*										*
	*****************************************/
	section.media .contents_list .contents_item .info .contents_cagegory { font-size: 18px; }
	section.media .contents_list .contents_item .info .contents_title {
		margin-top: 20px; 
		font-size: 24px;
		line-height: 30px; max-height: 60px;
	}
	section.media .contents_list .contents_item:hover:not(.video) .info .contents_title { max-height: 120px; }
	section.media .contents_list .contents_item .info { padding: 40px 30px; }
	section.media .contents_list .contents_item.video .btn {
		width: 70px; height: 70px;
	}
	section.media.max_width .containner .contents { padding-right: calc(40px - 17px); }


}



/*
	@media (max-width: 479px){ 

	}

	@media (max-width: 749px) and (min-width: 480px) { 

	}

	@media (max-width: 1023px) and (min-width: 750px) { 

	}


	@media (max-width: 1279px) and (min-width: 1024px) { 

	}
*/