﻿@media screen and (max-width:1040px) {
	
.activity_area{ width:calc(100% - 20px);}
.container .screen{ position:static}
.logo{ padding:0px;}
#poster_area{  width:100%; margin:30px 0;}

.screen{ min-width:280px; max-width:1023px; padding:0px 10px !important;}
.header{ height:auto; min-height:auto; background:#fff; position:relative;}
.header .logo_img img { max-height:84px; width:auto;}
.banner_area_border { max-width:none}
.header .logo_txt { margin:0 0 0 5px;}
.logo_tc{ font-size:20px; color:#f08300}
.logo_en { font-size:14px; line-height:20px;  color:#333333 }

.right_home_b{ width:100%; padding:0}

.idea p{ line-height:38px;}
	.cd-top { display:none; }
	.header .logo_area {  }
	.latest_new ul { max-height:100% !important; overflow-y: unset}

	.logo_footer .logo_img img { width: auto;}
.header .logo_area { padding:15px 5px;}
.header .logo_img img { max-height:60px; width:auto;}



.latest_new , .main_info { width:100%; margin:0;}



.more_area{  }
.more_area a{ letter-spacing:2px; font-size:14px;  padding:4px 12px   }

.main_info .title , .latest_new .title, .main_calenadr .title { font-size:23px; padding:20px 0 20px 30px;  }

.main_info .title::before , .latest_new .title::before, .main_calenadr .title::before {   
 font-size:30px; position:absolute; left:5px; top:18px;}
.contact_main{ padding:10px 0;}
.container .screen { padding:0 10px;}
.main_info ul { padding:0px 0 0 0;}
.contact_main ul li{ margin:5px 10px;}
.footer .screen, #contact_info .screen { padding:0 15px;}
.inner_area , .inner_area_b, .inner_area_c { padding:20px 0;}
.home_bottom_menu ul li a{ font-size:15px; padding:5px 10px;}
.Userful_link_inside , .home_bottom_menu{ padding:20px 0;}
.main_events_area{ min-height:250px ;}
.footer_area{ padding:15px 0;}
.latest_new ul li { padding:5px}
html,body {    font-size:15px; line-height:23px;}
.container{  line-height:23px; font-size:15px;  }
.main_calenadr { width:100%;}
#login_area{ width:98%; margin-top:20px;}
#contact_info .logo_footer { width:100%  }
#contact_info .contactinforamtion { width:100%;  }
#contact_info .socialmedia { width:100% ; }
.footer .copyright , .footer .power { width:100%; text-align:center;}

.home_video .title_video{ position:relative; text-align: center; margin:0; padding:0; top:0}
.home_video .title_video img{ max-width:100%;}

.home_video .home_video { width:100%; padding:0; float: left; margin:0;}
.latest_gallery .main_events_area { padding:20px 0 0 0}
.home_video .home_video iframe { height:380px;}
.home_video { padding:30px 0;}

.Album .title { margin:0;} 
.inner_banner{  padding:50px 0 30px 0; background-size:cover; min-height:100px; margin:0; }
.inner_banner h1{  font-size:21px;  line-height:24px; padding: 10px 20px;  }

#media{ min-height:100px; text-align:  center ; padding:0; }
#media  h1{  margin:0px 0; padding:50px 0; background:none; }

.inner_banner h1::before{ font-size:40px; position:absolute; left:15px; top:9px; }
.area_selected{ float: right; margin-top:0px; width: auto; position:relative; z-index:0 }
.area_selected ul { list-style:none; margin:0; padding:10px 5px; background:#fff;}
.area_selected ul li { float:right; margin:0 0 0 15px  }
#top-search{ margin:3px 0 0 0; float:right; width:25%;}
#top-search-key{ float:left; width: auto;}
.left_talk span { float:right; width:100%; }
.audio-container { float: left;  width: 100%; margin-bottom:15px; }
.audio-container audio {
 width: 98%; margin:0px; padding:5px 1% 0 1%; }
 
 
.brief{position: relative ; top:0;}
 
.area_selected ul li{ width:100%; margin:5px 0}
.area_selected select{ width:100%; padding:6px 0 ;}

.sidebar-nav{ width:100%}
.information .date span { padding:5px 0 5px 30px; margin:0; }
#info_type_B .information ul li .news_title{ font-size:19px; margin-bottom:5px; line-height:21px;} 
#info_type_B .information ul li .description { font-size:15px; line-height:19px;}
.main_info ul li .date { position:relative; right:0; margin:0 0 5px 0;}

#Media_Album .information ul li { width:48%; margin:0 0 15px 2%;}
.Userful_link_inside ul li { width:48%; margin:0 0 10px 2% }
.Userful_link_inside ul  { margin:0 0 0 -2% }

#Media_Video .information ul li { width:48%; margin:0 0 15px 2%}

#Media_Video .information ul li:nth-child(2n+1) { clear:both; }

.inner_content .main_content{ margin:0 0 10px 0; padding:0 0px; line-height:28px;width: 100% !important;} 
.inner_content { width:100%; padding: 0px 0 3d0px 0;}

.map_area #info .left{ width:100%; margin-bottom:0}
.map_area #info .right { width:100%; margin:0}
 
.Album .title{ font-size:19px; line-height:23px;  margin-bottom:15px;border-left-width:5px; }

h1{ font-size:28px; line-height:33px;  }
h2{ font-size:23px; line-height:38px; }
h3{ font-size:21px; margin:5px 0;  }
h4{ font-size:21px; margin:5px 0;  }
h5{ font-size:19px; margin:0px; }
h6{ font-size:17px; line-height:23px; }
#inside_full { padding:45px 0 0 0;}
.nevigation{ padding:5px 0;}
.main_info ul li { width:100% !important; float: none !important; margin:0 0 15px 0 !important;}
#Inner_Type_A ul{ margin:20px 0 0 0%;  }
#Inner_Type_A li{ float:left; width:100%; margin:0 0 15px 0%; }
#Inner_Type_C li .title_des{ width:100%; }
#Inner_Type_C li .right_desc{ width:100%;}

.download_area ul{ margin:0px 0 0 0%; padding:0px;}
.download_area ul li{ width: auto; float:none; margin:0 0 15px 20px }
.inner_content_full .main_content{ padding:5px 10px 20px 10px; min-height:200px; }
.year_box{ right:0 ;top:0; position: relative;}
.year_box select{ width:100%}

#info_type_A .information .date{ float:left; width:100%;  }
#info_type_A .information p{ float:left; width:100%; }

#info_type_B .information ul{  margin:0 0 0 0%; }
#info_type_B .information ul li{ width:100%; margin:0 0 15px 0;}

#info_type_C .information ul{  margin:0 0 0 0%;  }
#info_type_C .information ul li{ width:100%; margin:0 0 15px 0; }

#MediaA .information ul{  margin:0 0 0 0%;  }
#MediaA .information ul li{ width:100%; margin:0 0 15px 0%; }

#MediaB .information ul{  margin:0 0 0 0%;  }
#MediaB .information ul li{  width:100%; margin:0 0 15px 0; }

.btn_back a{font-size: 15px;  line-height: 21px;}

#notice .information ul .title_area { display:none;}
#notice .information .date{ float:left; width:75%;  padding:5px 5px 5px 0px; }
#notice .information .date span{ padding:0 0 0px 30px; background:url(../images/icon/icon_date.png) no-repeat; background-size:21px 21px; background-position:0px 50%;}
#notice .information .number{ float:left; width:75%;  }
#notice .information .title{ float:left; width:75%;   }

.youtube_video{ width:100%; box-shadow:0 5px 10px rgba(0,0,0,.5); background:#000; padding:0px; border:0px solid #fff; margin-top:30px;}
.youtube_video iframe{ width:100%; height:320px;}
.youtube_video video{ width:100%; height:320px;}
.footer_information ul li { width:50%; margin:10px 0;}
.footer_information ul li span { height:35px; display:block}
.latest_new_box span { font-size:14px;}

.b_left { float:left; width:100%; position:relative; }
.b_right { float: right; width:100%; position:relative; }

.latest_upcomingevents , .main_info{ width:100%; }
.main_info ul li span { background-position:13px 5px;}
.latest_new ul li{  width:100% }

.footer_info ul li{ font-size:13px; line-height:16px;}

h5 a { background-size: 30px 30px }

#right_poster{ width:100%}
.inner_content #full table{ width:100%; margin:0px auto;}

.information ul li { width:48%; }

#info_type_B .information p{ width:100%;}
.sub_category ul li{ margin-right:5px; margin-top:10px;}
.sub_category ul li a{ padding:5px 10px;  font-size:14px; }

#Information_detail { padding:0px 0 20px 0 ;}
#Information_detail iframe { width:100%; height:auto; min-height:350px; margin:0; }

.C{ margin:0 0 0 -2%; padding:0; list-style: none;}
.C li{ text-align: center;  width:48%; margin:0 0 15px 2%;  float:left; }
.C li img{ width:100% !important; height:  auto !important; left: 0 !important; margin-left: 0px !important;}
.C li a{ display:block}
.C li:nth-child(2n+1 ) { clear:both;}

.contactus .info, .contactus .location{ width:100%;}
#Information_detail #Inner_Type_A li{ width:100%; margin:0 0 15px 0%; }
#Information_detail #Inner_Type_A li img{ max-width:100%; max-height:1080px;}
#info_type_A .information ul .title_area { display:none}
.arrowlistmenu{ width:100%; }
.latest_new_box .content p { font-size:17px; line-height:21px;}
#latest_new_inside .latest_new_box { width:100%; margin:0 0 15px 0;}


.header nav {    display: block;    padding: 20px;    position: absolute;    right: 0;}
#banner {padding: 20px 10px;
width: calc(100% - 20px);}
.idea { margin-bottom:0}

.button ul li { margin-top:0 !important;}	

.intro{ width:calc(100% - 20px);}

.button_serve ul li, .button_serve ul li+li, .button_serve ul li + li + li + li , .button_serve ul li + li + li + li + li , .button_serve ul li + li + li + li + li + li { margin-top:0!important;;}

.serve{ padding:150px 0 0 0;}
.idea{ margin-top:20px;}

.button_serve ul { display: grid;grid-template-columns: auto auto auto;gap: 80px 0px;}
.button { width:100%}

.button ul li span { font-size:26px; line-height:32px;}
.button ul li a { margin:20px 0 0 0}

.header .logo_area { font-size:25px}
.header .logo_area span {    font-size: 15px; }

.latest_gallery { padding:0}
.latest_gallery .title { margin:0}

figure { margin:0}

.latest_gallery .main_events_area {
    width: 100%;
}


.stellarnav li { width:100% !important}

.stellarnav.dark li a:hover { background:none !important}
.stellarnav.dark li ul li a {
    color: #fff;
}

.date_activity, .time_activity, .location_activity, .price_activity {width: calc(50% - 1% - 20px); margin:0 0.5% 10px 0.5%} 
.title_activity .title p, .intro_activity .title p, .date_activity .title p, .time_activity .title p, .location_activity .title p, .price_activity .title p, .remark_activity .title p, .inquire_activity .title p, .object_activity .title p, .content_activity .title p{ width:65px;} 


#template_C .information ul li {width: calc(100% - 2% - 6px - 20px) !important;}


.banner_slider { width:100%}
}

@media screen and (max-width:930px) {
.button ul li { width: calc(100% - 6px);
margin-bottom: 20px;
margin-left: 0;
margin-right: 0;}	
.button ul li span{ top:35%}
.sch_info_area ul li { display:block; width:100%; font-size: 20px;}


.sch_info_area ul li+li {  width:100%; float: left;TEXT-ALIGN: CENTER !important;
text-align: left; margin-top:30px}
.sch_info_area ul { padding:120px 0 50px 0 ; grid-template-columns: 33% 33% 33%;}
	}

@media screen and (max-width:800px) {
	.locations_area {
		width: 100%;
		margin-bottom: 16px;
	}
	.map_area {
		width: 100%;
	}
	
.left_brand{ float:left; width:100%; text-align:center}
 
.right_desc { float:right; width:100%;}
}
@media screen and (max-width:530px) {
.button_serve ul { grid-template-columns: auto auto;}	
.header .logo_area { font-size:20px}
.header .logo_area span {    font-size: 12px; line-height:15px;}
.date_activity, .time_activity, .location_activity, .price_activity, .object_activity, .content_activity {width: calc(100% - 1% - 20px);} 
	}
	
	
	
@media screen and (max-width:400px) {
.button ul li span {    top: 15%;}	
.button ul li a { width:140px; padding:5px 0 5px 20px}

.button ul li a::before { background-size: 60%;top: -16px; left:0}
.button ul li+li a::before { background-size: 60%;top: -23px;left: -5px;}
	}