/**************************************************
*   2.1 - main banner
**************************************************/
@media (min-width:0) { 	
    #mainBanner { position:relative; }
    #mainBanner .sliderWrap { position:relative; }
    #mainBanner .bxslider { position:relative; overflow:hidden; height:320px; }
	#mainBanner .bxslider li { position:relative; height: 100%; }
    #mainBanner .bxslider li .imgbox { background-position:center; background-size:cover; background-repeat:no-repeat; width:100%; height:100%; }
	#mainBanner .bxslider li iframe { width:100%; height:100%; min-height:320px; }
    
	#mainBanner .bxslider li .txtbox_wrap { position:absolute; top:50%; left:0; right:0; width:calc(100% - 60px); text-align:center; margin:0 auto; }
	#mainBanner .bxslider li .txtbox_wrap .txtbox { color:#ffffff; line-height:1.4; }
	#mainBanner .bxslider li .txtbox_wrap .txtbox .tx1 { font-size:24px; }
	#mainBanner .bxslider li .txtbox_wrap .txtbox .tx2 { font-size:17px; }
    
	#mainBanner .dotsset { position:absolute; left:30px; bottom:30px; width:100%; }
    #mainBanner .dotsset ul { display:block; width:100%; text-align:left; }
    #mainBanner .dotsset li { display:inline-block; margin:0 3px; }
    #mainBanner .dotsset li button { font-size:0; text-indent:-9999px; display:block; width:12px; height:12px; border-radius:15px; background-color:#fff; border:1px solid #5282c3; cursor:pointer; }
    #mainBanner .dotsset li.slick-active button { width:24px; background-color:#5282c3; }

	#mainBanner .slick-arrow { font-size:0; height:30px; position:absolute; text-indent:-9999px; top:50%; transition:all 0.5s; width:30px; z-index:55; cursor:pointer; }
	#mainBanner .slick-prev { background:rgba(0,0,0,0.4) url("/images/contents/btn_prev_01.png") no-repeat center; background-size:60%; left:0; }
	#mainBanner .slick-next { background:rgba(0,0,0,0.4) url("/images/contents/btn_next_01.png") no-repeat center; background-size:60%; right:0; }
	#mainBanner:hover .slick-arrow { background-color:rgba(0,0,0,1); }
}
@media (min-width:480px) { 	
    #mainBanner .bxslider li .txtbox_wrap .txtbox .tx1 { font-size:30px; }
	#mainBanner .bxslider li .txtbox_wrap .txtbox .tx2 { font-size:20px; }
}
@media (min-width:768px) { 	
    #mainBanner .bxslider { height:450px; }
    #mainBanner .bxslider li .imgbox { /*height:450px;*/ }
	#mainBanner .bxslider li iframe { min-height:450px; }
}
@media (min-width:992px) { 	
    #mainBanner .bxslider { height:540px; }
    #mainBanner .bxslider li .imgbox { /*height:540px;*/ }
	#mainBanner .bxslider li iframe { min-height:540px; }
    
    /*#mainBanner .bxslider li .txtbox_wrap { width:400px; right:inherit; left:50%; margin-left:-450px; }*/
}
@media (min-width:1024px) { 	
    #mainBanner .bxslider { height:620px; }
    #mainBanner .bxslider li .imgbox { /*height:620px;*/ }
	#mainBanner .bxslider li iframe { min-height:620px; }
}
@media (min-width:1280px) { 	
    #mainBanner .bxslider { height:720px; }
    #mainBanner .bxslider li .imgbox { /*height:720px;*/ }
	#mainBanner .bxslider li iframe { min-height:720px; }
    
    /*#mainBanner .bxslider li .txtbox_wrap { width:600px; margin-left:-550px; }*/
    #mainBanner .bxslider li .txtbox_wrap .txtbox .tx1 { font-size:40px; }
	#mainBanner .bxslider li .txtbox_wrap .txtbox .tx2 { font-size:30px; }
    
	#mainBanner .slick-arrow { height:40px; margin-top:-20px; width:40px; }
    #mainBanner .slick-prev { left:10px; margin-left:0px; }
	#mainBanner .slick-next { margin-right:0px; right:10px; }
}
@media (min-width:1440px) { 	
    /*#mainBanner .bxslider li .txtbox_wrap { margin-left:-600px; }*/
    #mainBanner .bxslider li .txtbox_wrap .txtbox .tx1 { font-size:45px; }
}

/**************************************************
*   2.1 - main video
**************************************************/
@media (min-width:0) {
    #mainBanner .bgbox { background-color:rgba(0,0,0,0.6); color:#fff; height:30px; line-height:30px; position:relative; text-align:center; width:100%; box-sizing:border-box; }
    #mainBanner .bgbox .txt { font-size:12px; box-sizing:border-box; }
    
    #mainBanner .videobox { margin:20px auto; position:relative; width:320px; height:180px; }
    #mainBanner .video { background:url("/images/contents/img_frame.png") no-repeat 0 0; background-size:100% 100%; width:100%; height:100%; position:absolute; z-index:44; }
    #mainBanner .video iframe { position:absolute; left:50%; top:50%; width:217px; height:140px; margin-top:-75px; margin-left:-109px; }
    
    #mainBanner .notice { background-color:#164d95; position:relative; color:#fff; height:40px; line-height:40px; width:100%; overflow:hidden; }
    #mainBanner .notice .inner { height:40px; line-height:40px; }
    #mainBanner .notice em { background-color:#f00; font-style:normal; display:inline-block; width:25%; text-align:center; transform:skew(-20deg); font-size:12px; overflow:hidden; white-space:nowrap; float:left; }
    #mainBanner .notice em b { display:block; transform:skew(20deg); font-weight:normal; }
    #mainBanner .notice a { display:inline-block; font-size:12px; padding-left:3%; width:55%; box-sizing:border-box; float:left; height:40px; line-height:40px; }
    #mainBanner .notice .date { font-size:11px; float:left; width:20%; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (min-width:480px) {
    #mainBanner .videobox { width:420px; height:220px; }
    #mainBanner .video iframe { width:287px; height:175px; margin-left:-145px; margin-top:-95px; }
}
@media (min-width:768px) {
    #mainBanner .bgbox { height:40px; line-height:40px; }
    #mainBanner .bgbox .txt { font-size:14px; }
    #mainBanner .videobox { width:500px; height:260px; }
    #mainBanner .video iframe { width:342px; height:205px; margin-left:-172px; margin-top:-110px; }
    #mainBanner .notice em { font-size:14px; }
    #mainBanner .notice a  { font-size:14px; }
}
@media (min-width:992px) {
    #mainBanner .bgbox { position:absolute; right:50%; bottom:23%; width:700px; padding-right:60px; text-align:right; margin-right:-5%; }
    #mainBanner .videobox { position:absolute; right:0; bottom:5%; width:560px; height:280px; z-index:49; margin:0 auto; }
    #mainBanner .video iframe { width:385px; height:225px; margin-left:-194px; margin-top:-122px; }
    #mainBanner .notice { position:absolute; left:0; bottom:15%; }
    #mainBanner .notice em { width:15%; }
    #mainBanner .notice a { width:28%; padding-left:5px; }
    #mainBanner .notice .date { font-size:13px; }
}
@media (min-width:1024px) {
    #mainBanner .bgbox { bottom:22%; margin-right:-12%; padding-right:100px; }
}
@media (min-width:1220px) {
    #mainBanner .bgbox { margin-right:-22%; padding-right:150px; }
    #mainBanner .notice a { width:35%; }
}
@media (min-width:1440px) {
    #mainBanner .bgbox { margin-right:-10%; padding-right:150px; }
    #mainBanner .videobox { width:720px; height:360px; }
    #mainBanner .video iframe { width:495px; height:286px; margin-left:-250px; margin-top:-152px; }
    #mainBanner .notice a { width:29%; }
}
@media (min-width:1600px) {
    #mainBanner .bgbox { width:800px; margin-right:-10%; padding-right:150px; }
    #mainBanner .videobox { right:6%; }
    #mainBanner .notice em { width:10%; }
    #mainBanner .notice a { width:35%; }
}
@media (min-width:1800px) {
    #mainBanner .bgbox { width:800px; margin-right:-9%; padding-right:150px; }
    #mainBanner .videobox { right:13%; }
}

/**************************************************
*   mainBanner banner_menu
**************************************************/
@media (min-width:0) { 	
	#mainBanner .banner_menu { display:none; position:absolute; bottom:10%; width:100%; font-size:0; padding:15px 0; border-top:1px solid rgba(255,255,255,.4); }
	#mainBanner .banner_menu a{ display:inline-block; width:20%; font-size:14px; padding:10px; color:#fff; text-align:center; }
}
@media (min-width:640px) { 	
	#mainBanner .banner_menu { display:block; }
}
@media (min-width:820px) { 	
	#mainBanner .banner_menu{ width:800px; bottom:15%; left:50%; margin-left:-400px; padding:20px 0;  }
}

@media (min-width:992px) { 	
	#mainBanner .banner_menu a{ font-size:18px; }
}

@media (min-width:0) { 	
    #mainBanner .qr_cs { width:100%; padding:20px; box-shadow:0 0 5px rgba(50,50,50,.5); }
    #mainBanner .qr_cs .top{ overflow:hidden; padding:0 0 20px 0; border-bottom:1px solid #ccc; }
    #mainBanner .qr_cs .top img{ display:none; float:left; width:70px; height:70px; }
    #mainBanner .qr_cs .top .txtbox{ padding-left:10px; padding-top:15px; }
    #mainBanner .qr_cs .top .txtbox p{ font-weight:bold; }
    #mainBanner .qr_cs .top .txtbox .tx1{ font-size:16px; }
    #mainBanner .qr_cs .top .txtbox .tx2{ font-size:18px; margin-top:8px; }
	
    #mainBanner .qr_cs .bot{ padding:30px 0; }
    #mainBanner .qr_cs .bot .tx1{ line-height:1.4; }
}

@media (min-width:1024px) { 	
    #mainBanner .qr_cs { float:left; width:280px; height:100%; height:550px; padding:30px; box-shadow:0 1px 5px rgba(50,50,50,.5);  }

    #mainBanner .qr_cs .top img{ display:block; float:left; width:70px; height:70px; }
    #mainBanner .qr_cs .top .txtbox{ float:left; width:calc( 100% - 70px); padding-left:10px; padding-top:15px; font-weight:normal; }
    #mainBanner .qr_cs .top .txtbox p{ font-weight:normal; }

}