@charset "utf-8";

#visual{position:relative;}
#visual .visu_s li{height:600px; background-size:cover !important}
#visual .visu_s li img{display:none;}
#visual .visu_s li.visual_01{background:url('../images/main/visual_01.jpg') no-repeat 50% 0}
#visual .visu_s li.visual_02{background:url('../images/main/visual_02.jpg') no-repeat 50% 0}
#visual .visu_s li.visual_03{background:url('../images/main/visual_03.jpg') no-repeat 50% 0}
#visual .visu_s li.visual_04{background:url('../images/main/visual_04.jpg') no-repeat 50% 0}
#visual .bx-controls{position:absolute; left:0; bottom:30px; width:100%; text-align:center; z-index:55;}
#visual .bx-controls .bx-pager div{display:inline-block; padding:0 6px;}
#visual .bx-controls .bx-pager div a{display:block; width:12px; height:12px; border-radius:12px; background:#fff; text-indent:-99999px}
#visual .bx-controls .bx-pager div a.active{background-color:#019dd8}
#visual .slogan{position:absolute; top:100px; left:0; width:100%; text-align:center; z-index:55; box-sizing:border-box; padding:0 10px;}
#visual .slogan *{letter-spacing:-0.5px; position:relative; top:20px; opacity:0; cursor:pointer;}
#visual .slogan p{color:#fff; font-size:38px; font-weight:800; line-height:55px;}
#visual .slogan strong{color:#fff; display:block; font-size:38px; font-weight:800; line-height:55px;}
#visual .slogan span{color:#fff; display:block; font-size:38px; font-weight:800; line-height:55px;}
#visual .slogan a{display:inline-block; line-height:55px; color:#fff; font-size:20px; font-weight:700; width:250px; border-radius:3px; background:#2d8cbe; margin-top:40px;}
#visual .slogan:hover p{text-decoration:underline; opacity:0.8 !important}
#visual .slogan:hover strong{text-decoration:underline; opacity:0.8 !important}
#visual .slogan:hover span{text-decoration:underline; opacity:0.8 !important}

#m_content{display:table; width:100%;}
#m_content .notice{display:table-cell; width:50%; background:url('../images/main/notice_bg.jpg') no-repeat 100% 0 #ff9f17; background-size:cover; vertical-align:middle; box-sizing:border-box; padding:15px 0 15px 40px; position:relative;}
#m_content .notice.add{ padding:0 0 0 40px;}
#m_content .notice *{letter-spacing:-0.5px;}
#m_content .notice h3{color:#fff; font-size:36px; font-weight:700}
#m_content .notice ul{padding-top:10px;}
#m_content .notice ul li{line-height:34px; position:relative; padding-left:14px;}
#m_content .notice ul li:before{content:''; position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:5px; background:#fff; margin-top:-1px}
#m_content .notice ul li a{display:inline-block; color:#fff; font-size:18px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:400px; vertical-align:middle;}
#m_content .notice ul li a:hover{text-decoration:underline;}
#m_content .notice > a{position:absolute; top:50px; right:40px; display:inline-block; width:21px; height:21px; text-indent:-99999px; background:url('../images/main/btn_more.png') no-repeat 0 0}
#m_content .movie{display:table-cell; width:50%; vertical-align:middle; background:url('../images/main/movie.jpg') no-repeat 50% 50%; background-size:cover; position:relative;}
#m_content .movie a img{max-width:80%}
#m_content .movie > img{display:none;}

.movie_w{position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; background:rgba(0,0,0,0.7); display:none;}
.movie_w .box{width:940px; height:480px; background:#e16a33; position:absolute; top:50%; left:50%; margin-top:-240px; margin-left:-470px;}
.movie_w .box .mv iframe{width:854px; height:480px;}
.movie_w .box button{position:absolute; top:24px; right:24px; width:38px; height:38px; text-indent:-99999px; background:url('../images/btn/btn_close.png') no-repeat 0 0; cursor:pointer; padding:0; margin:0;}


/* PC */
@media all and (min-width:1025px){
	
}

@media all and (max-width:1200px){
	#visual .slogan p{font-size:42px; line-height:60px;}
	#visual .slogan strong{font-size:42px; line-height:60px;}
	#visual .slogan span{font-size:42px; line-height:60px;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	#visual .visu_s li img{width:100%}
	#visual .visu_s li{height:350px;}
	#visual .bx-controls{bottom:10px;}
	#visual .bx-controls .bx-pager div{padding:0 3px;}
	#visual .bx-controls .bx-pager div a{width:6px; height:6px;}
	#visual .slogan{top:20%; padding:0 20px;}
	#visual .slogan p{font-size:25px; line-height:32px;}
	#visual .slogan strong{font-size:35px; line-height:38px; padding:10px 0}
	#visual .slogan span{font-size:25px; line-height:32px;}
	#visual .slogan a{line-height:42px; font-size:16px; width:185px; margin-top:22px;}
	/* #visual .visu_s li img.visu_t{display:block;} */

	#m_content{display:block;}
	#m_content .notice{display:block; width:100%; background-image:url('../images/main/notice_bg_m.jpg'); padding:7% 15px;}
	#m_content .notice.add{ padding:7% 15px;}
	#m_content .notice h3{font-size:20px;}
	#m_content .notice ul{padding-top:10px;}
	#m_content .notice ul li{line-height:21px; padding-left:14px;}
	#m_content .notice ul li:before{width:3px; height:3px; border-radius:3px; margin-top:-1px}
	#m_content .notice ul li a{font-size:12px;}
	#m_content .notice > a{top:22%; right:15px; width:13px; height:13px; background-size:13px; max-width:500px;}

	#m_content .movie{display:block; width:100%; vertical-align:middle; /*background:none;*/ position:relative;}
	#m_content .movie a img{max-width:100%}

	.movie_w .box{width:90%; background:#e16a33; position:absolute; top:50%; left:5%; margin-left:0; height:340px; margin-top:-170px;}
	.movie_w .box .mv iframe{width:88%; height:340px;}
	.movie_w .box button{top:12px; right:12px; width:12px; height:12px; background-size:12px;}
}

@media all and (max-width:768px){
	#visual .visu_s li img.visu_t{display:none;}
	#visual .visu_s li img.visu_m{display:block;}
	#visual .slogan p{font-size:18px; line-height:24px;}
	#visual .slogan strong{font-size:28px; line-height:35px;}
	#visual .slogan span{font-size:18px; line-height:24px;}
	#visual .slogan a{line-height:31px; font-size:12px; width:143px; margin-top:22px;}

	#m_content .notice ul li a{max-width:220px;}
}

@media all and (max-width:767px){
	#m_content .notice{padding:9% 15px;}

	#m_content .movie{background:none;}
	#m_content .movie a{text-indent:-99999px; width:100%; height:100%; position:absolute; top:0; left:0;}
	#m_content .movie a img{display:none;}
	#m_content .movie > img{display:block; width:100%}

	.movie_w .box{height:166px; margin-top:-83px;}
	.movie_w .box .mv iframe{height:166px;}
}

@media all and (max-width:500px){
	#visual .slogan p{font-size:14px; line-height:20px;}
	#visual .slogan strong{font-size:25px; line-height:32px;}
	#visual .slogan span{font-size:14px; line-height:18px;}
}