﻿@charset "utf-8";
/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , "微軟正黑體";}
button{cursor:pointer;}

body{font-family:arial , "微軟正黑體";}
#all{}
#all.active{position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden;}

/* header */
#header{padding:20px 3%; background:#003366; overflow:hidden;}
#logo{float:left; display:block; width:250px; height:57px; background:url(../images/logo.png); text-indent:-9999px;}
#header .function{float:right; margin-top:15px;}
#header .function form{position:relative; display:inline-block; width:200px;}
#header .function form input{display:block; width:100%; height:30px; padding:10px 30px 10px 5px; border:none; box-sizing:border-box;}
#header .function form button{position:absolute; right:5px; top:6px; width:20px; height:18px; background:url(../images/search.jpg) no-repeat; border:none; text-indent:-9999px; cursor:pointer;}
#header .function .lang{display:inline-block; width:30px; height:30px; margin-left:10px; background:#FFF; border-radius:50%; font-size:16px; color:#333; line-height:30px; text-align:center; font-weight:bold;}

/* navigation */
#navigation{position:relative;}
#navigation:after{content:""; display:block; clear:both;}
#navigation > li{float:left; width:12.5%; background:#336699;}
#navigation > li.l-nav{ width:37.5%;}
#navigation > li > a{display:block; font-size:18px; color:#FFF; line-height:50px; font-weight:bold; text-align:center;}
#navigation > li:hover{background:#FFF;}
#navigation > li:hover > a{color:#336699;}
#navigation > li:hover .sub-menu{display:block;}
#navigation .sub-menu{position:absolute; left:0; top:100%; display:none; width:100%; padding:2% 5%; overflow:hidden; box-sizing:border-box; z-index:1}
#navigation .sub-menu.movie{background:rgba(0,0,0,.8);}
#navigation .sub-menu.literature{background:rgba(12,84,84,.8);}
#navigation .sub-menu.performance{background:rgba(186,53,26,.8);}
#navigation .sub-menu.art{background:rgba(0,0,0,.7);}
#navigation .sub-menu .list{float:left; width:25%;}
#navigation .sub-menu .list h2{padding-bottom:10px; font-size:16px;}
#navigation .sub-menu .list h2:before{content:""; display:inline-block; width:10px; height:10px; margin-right:5px;}
#navigation .sub-menu.movie .list h2{color:#f33;}
#navigation .sub-menu.movie .list h2:before{background:#f33;}
#navigation .sub-menu.literature .list h2{color:#cff;}
#navigation .sub-menu.literature .list h2:before{background:#cff;}
#navigation .sub-menu.performance .list h2{color:#000;}
#navigation .sub-menu.performance .list h2:before{background:#000;}
#navigation .sub-menu.art .list h2{color:#b08afc;}
#navigation .sub-menu.art .list h2:before{background:#b08afc;}

#navigation .sub-menu .list > ul > li:before{content:""; position:relative; top:-2px; display:inline-block; width:4px; height:4px; margin:0 7px 0 3px; border-radius:50%;}
#navigation .sub-menu.movie .list > ul > li:before{background:#f33;}
#navigation .sub-menu.literature .list > ul > li:before{background:#33ffcc;}
#navigation .sub-menu.performance .list > ul > li:before{background:#000;}
#navigation .sub-menu.art .list > ul > li:before{background:#9966ff;}

#navigation .sub-menu .list > ul > li > a{font-size:16px; color:#FFF; line-height:24px; text-shadow:1px 1px 1px #999;}
#navigation .sub-menu.movie .list > ul > li > a:hover{color:#f63; text-shadow:1px 1px 1px #000;}
#navigation .sub-menu.literature .list > ul > li > a:hover{color:#33ffcc; text-shadow:1px 1px 1px #000;}
#navigation .sub-menu.performance .list > ul > li a:hover{color:#444; text-shadow:1px 1px 1px #000;}
#navigation .sub-menu.art .list > ul > li > a:hover{color:#96f; text-shadow:1px 1px 1px #000;}

#navigation .third-menu{margin-left:17px;}
#navigation .third-menu > li:before{content:""; position:relative; top:-2px; display:inline-block; width:4px; height:4px; background:#000; margin:0 7px 0 3px; border-radius:50%;}
#navigation .third-menu > li > a{font-size:16px; color:#FFF; line-height:24px; text-shadow:1px 1px 1px #999;}

#navigation .four-menu{display:none; margin-left:17px;}
#navigation .four-menu li:before{content:""; position:relative; top:-2px; display:inline-block; width:4px; height:4px; background:#000; margin:0 7px 0 3px; border-radius:50%;}
#navigation .four-menu li a{font-size:16px; color:#FFF; line-height:24px; text-shadow:1px 1px 1px #999;}

/* mobile */
#mobi-btn{position:relative; float:right; display:none; width:40px; height:40px; background:#FFF; border-radius:50%;}
#mobi-btn:before ,
#mobi-btn:after ,
#mobi-btn hr{content:""; position:absolute; left:8px; display:block; width:25px; height:4px; margin:0; background:#35a3eb; border:none;}
#mobi-btn:before{top:10px;}
#mobi-btn hr{top:18px;}
#mobi-btn:after{top:26px;}
#mask{position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:1}
#mobile{position:absolute; left:-250px; top:0; width:250px; min-height:100%; background:#FFF; z-index:2}
#mobile a ,
#mobile h2{display:block; padding:15px 10px; border-bottom:1px dashed #EEE; font-size:18px; color:#333; line-height:25px; font-weight:normal; cursor:pointer; box-sizing:border-box;}
#mobile .close{display:block; background:#336699; font-size:18px; color:#FFF; line-height:45px; font-weight:normal; text-align:center; cursor:pointer;}
#mobile .sub-menu ,
#mobile .sub-menu .list > ul ,
#mobile .third-menu ,
#mobile .four-menu{position:absolute; left:0; top:0; display:none; width:100%; min-height:100%; background:#FFF;}

/* container */
#container{width:96%; max-width:1200px; margin:0 auto; padding-top:20px;}
#container:after{content:""; display:block; clear:both;}
#container > .left{float:left; width:71%; padding:0 20px 20px 0; font-size:100%; box-sizing:border-box;}
#container.small{font-size:90% !important;}
#container.normal{font-size:100% !important;}
#container.large{font-size:110% !important;}
#container .gradient{background:url(../images/left_bg.jpg) left top repeat-x #FFF;}
#container > .right{position:relative; float:right; width:29%; background:url(../images/right_bg_rx.jpg) left top repeat-x #FFF;}

/* path */
#path{font-size:16px;}
#path a{color:#3c0203;}
#path a:hover{text-decoration:underline;}
#path .home{position:relative; top:-5px; display:inline-block; width:24px; height:31px; background:url(../images/path_home.png); text-indent:-9999px;}
#path span{position:relative; top:4px; display:inline-block; width:7px; height:9px; margin:0 5px; background:url(../images/path_arrow.png); text-indent:-9999px;}

/* main-title */
#main-title{padding:15px 0; font-size:25px; color:#333; line-height:33px;}
.other-link{ display:inline-block; font-size:20px; font-weight:bold; color:#000; background:url(../images/other_link.jpg) no-repeat 20px #f7f7f7; padding:5px 20px 5px 50px; margin:0 0 0 20px; border-radius:15px; border:1px solid #eee;}

/* article-function */
#article-function{padding-bottom:10px;}
#article-function li{display:inline-block; font-size:14px; color:#333;}
#article-function .share a{display:inline-block; margin-right:10px;}
#article-function .share a:before{content:""; position:relative; top:2px; display:inline-block; width:14px; height:14px; margin-right:3px; background:url(../images/share.jpg);}
#article-function .share .print:before{background-position:left top;}
#article-function .share .forward:before{background-position:right top;}

#article-function .social a{position:relative; top:0; display:inline-block; width:15px; height:15px; margin-right:5px; background:url(../images/social.jpg); text-indent:-9999px;}
#article-function .social .fb{background-position:left top;}
#article-function .social .twitter{background-position:-15px top;}
#article-function .social .plurk{background-position:-30px top;}
#article-function .social .google{background-position:right top;}

#article-function .font a{position:relative; top:-2px; display:inline-block; width:17px; height:20px; margin-right:5px; background:url(../images/font.jpg); text-indent:-9999px;}
#article-function .font .small{background-position:left top;}
#article-function .font .normal{background-position:center top;}
#article-function .font .large{background-position:right top;}

/* article-bottom */
#article-bottom{margin:0 15px; padding:15px 0; border-top:1px solid #CCC; overflow:hidden;}
#article-bottom .back{float:left; display:inline-block; padding:0 35px; background:#EEE; border-radius:20px; font-size:13px; color:#f63; line-height:25px; font-weight:bold;}
#article-bottom .back:before{content:""; position:relative; top:2px; display:inline-block; width:16px; height:14px; margin-right:5px; background:url(../images/back.jpg);}
#article-bottom .info{float:right; margin-top:5px; font-size:12px; color:#333;}
#article-bottom .info span{padding-left:10px;}

/* tab-block */
.tab-block .tab-content > li{display:none;}

/* about */
#about{padding:1.813em;}
#about h2{padding:1.19em 0; font-size:1em;}
#about p{padding-left:3.4em; font-size:1em; line-height:1.75em;}

#about .tab-block{}
#about .tab-block .tabs{margin-bottom:20px; padding:20px 0; background:url(../images/title_line.png) left bottom repeat-x; overflow:hidden;}
#about .tab-block .tabs li{float:left; display:inline-block; padding:0 10px; border-right:2px solid #CCC; font-size:1em; color:#333; line-height:20px; cursor:pointer;}
#about .tab-block .tabs li:last-child{border:none;}
#about .tab-block .tabs li:hover{text-decoration:underline;}
#about .tab-block .tabs li.active{ font-weight:bold;}
#about .tab-block .tab-content li{font-size:15px; color:#000; line-height:22px;}
#about .tab-block .tab-content li p{padding-bottom:20px; padding-left:0;}
#about .tab-block .tab-content li p a{color:#f63;}
#about .tab-block .tab-content li p a:hover{text-decoration:underline;}


#overview .slider{position:relative; width:100%;}
#overview .slider .item a{display:block;}
#overview .slider .item a img{display:block; width:100%; height:auto;}
#overview .slider .item .media{position:relative; padding-bottom:52.65%;}
#overview .slider .item .media iframe{position:absolute; left:0; top:0; width:100%; height:100%;}
#overview .slider .owl-buttons div{position:absolute; top:50%; width:25px; height:39px; margin-top:-20px; background:url(../images/slide_arrow.png); text-indent:-9999px;}
#overview .slider .owl-buttons .owl-prev{left:10px; background-position:left top;}
#overview .slider .owl-buttons .owl-next{right:10px; background-position:right top;}
#overview .slider .owl-pagination{position:absolute; left:0; bottom:10px; width:100%; text-align:center;}
#overview .slider .owl-pagination .owl-page{display:inline-block; width:8px; height:8px; margin:0 3px; background:#FFF; border:1px solid #f1f1f1; border-radius:50%;}
#overview .slider .owl-pagination .owl-page.active{background:#336699;}

#overview .tab-block{}
#overview .tab-block .tabs{margin-bottom:20px; padding:20px 0; background:url(../images/title_line.png) left bottom repeat-x; overflow:hidden;}
#overview .tab-block .tabs li{float:left; display:inline-block; padding:0 10px; border-right:2px solid #CCC; font-size:20px; color:#CCC; line-height:20px; cursor:pointer;}
#overview .tab-block .tabs li:last-child{border:none;}
#overview .tab-block .tabs li:hover{text-decoration:underline;}
#overview .tab-block .tabs li.active{color:#333;}
#overview .tab-block .tab-content li{/*font-size:15px;*/ color:#000; line-height:22px;}
#overview .tab-block .tab-content li p{/*padding-bottom:20px;*/}
#overview .tab-block .tab-content li p a{color:#f63;}
#overview .tab-block .tab-content li p a:hover{text-decoration:underline;}

#overview .list{}
#overview .list .title{margin-bottom:20px; padding:20px 10px; background:url(../images/title_line.png) left bottom repeat-x; font-size:24px; color:#333;}
#overview .list .wrap{position:relative; margin:30px auto; padding:0 10px; background:#EEE;}
#overview .list .wrap:before ,
#overview .list .wrap:after{content:""; position:absolute; left:0; display:block; width:100%; height:25px; background-repeat:repeat-x;}
#overview .list .wrap:before{top:-25px; background-image:url(../images/paper_top.jpg);}
#overview .list .wrap:after{bottom:-25px; background-image:url(../images/paper_bottom.jpg);}
#overview .list .wrap dl{position:relative; min-height:130px; margin:10px auto; padding:5px 5px 5px 245px; background:#FFF; box-shadow:0 0 5px rgba(153,153,153,.6); box-sizing:border-box;}
#overview .list .wrap dt{position:absolute; left:5px; top:5px; width:225px;}
#overview .list .wrap dt a{display:block;}
#overview .list .wrap dt a img{display:block; width:100%; height:auto;}
#overview .list .wrap dd{padding-right:5px;}
#overview .list .wrap dd a{display:inline-block; margin-bottom:10px; font-size:20px; color:#999; font-weight:bold;}
#overview .list .wrap dd p{font-size:15px; color:#000; line-height:22px;}
#overview .list .wrap dl:hover dd a{color:#f63; text-decoration:underline;}

/* map */
.map{ clear:both; display:block; position: relative; overflow: hidden; margin:20px 0; background:#f7f7f7;}
.map:after{ padding-top: 45%; content:""; display: block;}
.map iframe{  position: absolute; top:0; bottom:0; right:0; left:0; max-width: 100%; height: 100%; margin:auto;}

/* overview-movie */
#overview-movie {}
#overview-movie .tab-block{}
#overview-movie .tab-block .tabs{margin-bottom:20px; padding:20px 0; background:url(../images/title_line.png) left bottom repeat-x; overflow:hidden;}
#overview-movie .tab-block .tabs li{float:left; display:inline-block; padding:0 10px; border-right:2px solid #CCC; font-size:20px; color:#CCC; line-height:20px; cursor:pointer;}
#overview-movie .tab-block .tabs li:last-child{border:none;}
#overview-movie .tab-block .tabs li:hover{text-decoration:underline;}
#overview-movie .tab-block .tabs li.active{color:#333;}
#overview-movie .tab-block .tab-content li{font-size:15px; color:#000; line-height:22px;}
#overview-movie .tab-block .tab-content li p{padding-bottom:20px;}
#overview-movie .tab-block .tab-content li p a{color:#f63;}
#overview-movie .tab-block .tab-content li p a:hover{text-decoration:underline;}

#overview-movie .list{}
#overview-movie .list .title{margin-bottom:20px; padding:20px 10px; background:url(../images/title_line.png) left bottom repeat-x; font-size:24px; color:#333;}
#overview-movie .list .wrap{position:relative; margin:30px auto; padding:0 10px; background:#EEE;}
#overview-movie .list .wrap:before ,
#overview-movie .list .wrap:after{content:""; position:absolute; left:0; display:block; width:100%; height:25px; background-repeat:repeat-x;}
#overview-movie .list .wrap:before{top:-25px; background-image:url(../images/paper_top.jpg);}
#overview-movie .list .wrap:after{bottom:-25px; background-image:url(../images/paper_bottom.jpg);}
#overview-movie .list .wrap dl{position:relative; min-height:130px; margin:10px auto; padding:5px 5px 5px 245px; background:#FFF; box-shadow:0 0 5px rgba(153,153,153,.6); box-sizing:border-box;}
#overview-movie .list .wrap dt{position:absolute; left:5px; top:5px; width:225px;}
#overview-movie .list .wrap dt a{display:block;}
#overview-movie .list .wrap dt a img{display:block; width:100%; height:auto;}
#overview-movie .list .wrap dd{padding-right:5px;}
#overview-movie .list .wrap dd a{display:inline-block; margin-bottom:10px; font-size:20px; color:#999; font-weight:bold;}
#overview-movie .list .wrap dd p{font-size:15px; color:#000; line-height:22px;}
#overview-movie .list .wrap dl:hover dd a{color:#f63; text-decoration:underline;}

/* movie-search */
#movie-search{position:relative; margin-bottom:8%; padding:0 20px;}
#movie-search .title{padding:20px; font-size:20px; color:#333; text-align:center; font-weight:bold;}
#movie-search dl{padding-bottom:7%;}
#movie-search dt{font-size:12px; color:#333; font-weight:bold;}
#movie-search dt input{display:block; width:100%; height:22px; padding:3px; box-sizing:border-box;}
#movie-search dd{padding-top:5px;}
#movie-search dd button{display:inline-block; width:115px; height:24px; margin-right:10px; background:url(../images/search_search.jpg); border:1px solid #000; color:#FFF;}
#movie-search dd a{display:inline-block; font-size:12px; color:#333; line-height:24px; font-weight:bold;}
#movie-search li{position:relative; padding:10px 55px 10px 0;}
#movie-search li select{display:block; width:100%; height:24px; padding:3px; background:url(../images/select_arrow.jpg) right top no-repeat #FFF; -webkit-appearance:none; appearance:none; box-sizing:border-box;}
#movie-search li button{position:absolute; right:0; top:10px; display:block; width:43px; height:24px; background:url(../images/search_go.jpg); border:1px solid #000; color:#FFF;}

/* movie-link */
#movie-link{padding:0 20px;}
#movie-link a{display:block; margin-bottom:20px; /*background:#336699;*/ background: #9F0A0E; border-radius:5px; font-size:15px; color:#FFF; line-height:40px; text-align:center; transition:all .3s;}
#movie-link a:before{content:""; position:relative; top:5px; display:inline-block; width:21px; height:26px; margin-right:10px; background:url(../images/movie_link.png);}
#movie-link .calendar:before{background-position:left top;}
#movie-link .apply-form:before{background-position:right top;}
#movie-link a:hover{background:#003366;}

/* movie-book */
#movie-book{padding:20px;}
#movie-book .title{padding-bottom:20px; font-size:20px; color:#000;}
#movie-book dl{padding:10px 0; border-top:1px solid #dad3c3; overflow:hidden;}
#movie-book dt{float:left; width:40%;}
#movie-book dt a{display:block;}
#movie-book dt a img{display:block; width:100%; height:auto;}
#movie-book dd{float:right; width:55%; font-size:13px; color:#333; line-height:18px; font-weight:bold;}

/* topic-list */
#topic-list .main{margin:30px auto; padding:30px 30px 30px 150px; border:2px solid #ccc; overflow:hidden;}
#topic-list .cinema{ background:url(../images/topic_list_icon.jpg) 45px center no-repeat;}
#topic-list .book{ background:url(../images/topic_list_book.jpg) 30px center no-repeat;}
#topic-list .performing{ background:url(../images/topic_list_performing.jpg) 30px center no-repeat;}
#topic-list .finearts{ background:url(../images/topic_list_finearts.jpg) 40px center no-repeat;}

#topic-list .main dt{float:right; width:33%}
#topic-list .main dt img{display:block; max-width:100%; height:auto;margin: auto;}
#topic-list .main dd{float:left; width:63%;}
#topic-list .main dd h2{margin-bottom:10px; padding-bottom:15px; background:url(../images/title_line.png) left bottom repeat-x; font-family:"標楷體"; font-size:25px; color:#333; line-height:33px;}
#topic-list .main dd p{font-size:15px; color:#000; line-height:22px;}
#topic-list .main dd p a{color:#f63;}
#topic-list .main dd p a:hover{text-decoration:underline;}
#topic-list .list{margin-bottom:20px;}
#topic-list .list .title{margin:10px 0; font-size:25px; color:#333; font-weight:bold;}
#topic-list .list .wrap{position:relative; padding:0 1%; background:#EEE;}
#topic-list .list .wrap:before ,
#topic-list .list .wrap:after{content:""; display:block; width:100%; height:25px; background-repeat:repeat-x;}
#topic-list .list .wrap:before{background-image:url(../images/paper_top.jpg);}
#topic-list .list .wrap:after{clear:both; background-image:url(../images/paper_bottom.jpg);}
#topic-list .list dl{position:relative; margin:10px 0; padding:20px; background:#FFF; overflow:hidden; box-shadow:0 0 5px rgba(153,153,153,.6); box-sizing:border-box}
#topic-list .list dt{float:left; width:40%;}
#topic-list .list dt a{ display:block; position:relative; overflow:hidden; background:#f7f7f7;}
#topic-list .list dt a img{position:absolute; top:0; bottom:0; right:0; left:0; max-width:100%; max-height:100%; margin:auto;}
#topic-list .list dt a:after{padding-top: 52%; content:""; display: block;}
#topic-list .list dd{float:right; width:58%;}
#topic-list .list dd > a{display:inline-block; margin-bottom:10px; font-size:20px; color:#999; line-height:25px; font-weight:bold;}
#topic-list .list dd a:hover{text-decoration:underline;}
#topic-list .list dd p{font-size:15px; color:#000; line-height:22px;}
#topic-list .list dd p a{color:#f63;}
#topic-list .list dl:hover dd a{color:#f63;}

/* topic-info */
#topic-info .img img{display:block; width:100%; height:auto;}
#topic-info .info{padding:10px 0;}
#topic-info .info .title{margin:10px 0; padding:15px 10px; background:url(../images/title_line.png) left bottom repeat-x; font-size:20px; color:#333;}
#topic-info .info p{font-size:1em; color:#000; line-height:1.375em;}
#topic-info .info .hide{display:none;}
#topic-info .info a{color:#f63;}
/*#topic-info .info a:before{content:"... ("; color:#000;}
#topic-info .info a:after{content:")"; color:#000;}*/
#topic-info .list{position:relative; margin:30px 20px 30px 10px; padding:30px 20px; background:#EEE;}
#topic-info .list:before ,
#topic-info .list:after{content:""; position:absolute; left:0; display:block; width:100%; height:25px; background-repeat:repeat-x;}
#topic-info .list:before{top:0; background-image:url(../images/paper_top.jpg);}
#topic-info .list:after{bottom:0; background-image:url(../images/paper_bottom.jpg);}
#topic-info .list table{width:100%; font-size:1em; color:#000;}
#topic-info .list table td{padding:0.563em; border-top:1px solid #FFF; border-bottom:1px solid #FFF; vertical-align:middle;}
#topic-info .list table .left-col{width:30%; padding-right:1.188em; text-align:right;}
#topic-info .list table .right-col{width:70%; padding-left:1.188em;}

/* movie-media */
#movie-media{position:relative; padding:40px 20px; box-sizing:border-box;}
#movie-media .title{padding:25px 0 20px 0; background:url(../images/clips_bg.png) right bottom no-repeat; font-size:20px;color: #fff;font-weight: bold;background-size: 100% 100%;}
#movie-media .wrap{position:relative;}
#movie-media .wrap video{width:100%; height:239px;}

/* movie-album */
#movie-album{padding:20px;}
#movie-album .title{padding-bottom:20px; font-size:20px; color:#333; font-weight:bold;}
#movie-album li{display:none; padding-bottom:5px;}
#movie-album li.cover{display:block;}
#movie-album li a{display:block;}
#movie-album li a img{display:block; width:100%; height:auto;}

/* score */
#score{clear:both; max-width:430px; margin:0 auto;}
#score table{width:100%; font-size:12px; color:#000;}
#score td{padding:5px 0; text-align:center;}
#score td hr{width:20px; margin:0 auto; border:none;}
#score td a{color:#000;}
#score td a:hover{text-decoration:underline;}
#score .next{display:block; width:89px; height:19px; margin:20px auto; background:url(../images/next.png) center top; font-size:12px; color:#FFF; text-align:center;}
#score .next:hover{background-position:center bottom; text-decoration:underline;}

/* search */
#search{min-height:500px; margin-bottom:20px; padding:20px; background:#f1f1f1;}
#search form{max-width:520px; margin:0 auto;}
#search .wrap{overflow:hidden;}
#search .wrap ul{float:left; width:49%; margin-right:1%;}
#search .wrap li{padding:5px 0; font-size:12px; color:#333;}
#search input{display:block; width:100%; height:27px; padding:3px; border-left:2px solid #9a9a9a; border-top:2px solid #9a9a9a; box-sizing:border-box;}
#search select{display:block; width:100%; height:27px; padding:3px; background:url(../images/select_arrow.jpg) right top no-repeat #FFF; border-left:2px solid #9a9a9a; border-top:2px solid #9a9a9a; -webkit-appearance:none; appearance:none; box-sizing:border-box;}
#search .range{padding:5px 0; overflow:hidden; text-align:center; line-height:27px;}
#search .range input{width:45%;}
#search .range input.r1{float:left;}
#search .range input.r2{float:right;}
#search .btn{padding:10px 0; text-align:center;}
#search .btn button{display:inline-block;}
#search .btn button[type="submit"]{display:inline-block; width:115px; height:24px; margin-right:10px; background:url(../images/search_search.jpg); border:1px solid #000; color:#FFF;}
#search .btn button[type="reset"]{border:none; background:none; color:#333; text-decoration:underline;}

/* apply-form */
#apply-form{margin-bottom:20px; padding:20px; background:#f1f1f1;}
#apply-form form{}
#apply-form form ul{ overflow:hidden;}
#apply-form form li{padding:10px 0; font-size:15px; color:#333; width:48%; margin-right:2%; float:left;}
#apply-form form li.long{ clear:both; float:none; width:100%;}
#apply-form form li input ,
#apply-form form li select{display:block; width:100%; height:34px; margin-top:10px; padding:5px 10px; background:#FFF; border:1px solid #CCC; border-radius:5px; font-size:15px; color:#666; box-sizing:border-box;}
#apply-form form li input[type="checkbox"]{position:relative; top:3px; display:inline-block; width:15px; height:15px; margin-right:10px; padding:0; box-sizing:inherit;}
#apply-form form li textarea{display:block; width:100%; height:150px; margin-top:10px; padding:5px 10px; background:#FFF; border:1px solid #CCC; border-radius:5px; font-size:15px; color:#666; box-sizing:border-box;}
#apply-form .btn{padding:10px 0; text-align:center;}
#apply-form .btn button{display:inline-block; padding:10px 20px; margin:0 5px; background:#000; border:1px solid #000; font-size:15px; color:#FFF;}

#apply-form .add-movie{margin:30px auto; padding:30px; background:#DDD;}
#apply-form .add-movie h3{ color:#333;}
#apply-form .add-movie ul{margin-bottom:30px; padding-bottom:30px; border-bottom:1px dashed #FFF; overflow:hidden;}
#apply-form .add-movie li{float:left; display:inline-block; margin-right:1%;}
#apply-form .add-movie li span{display:block;}
#apply-form .add-movie li.name{width:25%;}
#apply-form .add-movie li.format{width:12%;}
#apply-form .add-movie li.format input[type="radio"]{position:relative; top:3px; display:inline-block; width:15px; height:15px; margin-right:10px; padding:0; box-sizing:inherit;}
#apply-form .add-movie li.material{width:15%;}
#apply-form .add-movie li.material input[type="checkbox"]{display:inline-block;}
#apply-form .add-movie li.date{width:14%;}
#apply-form .add-movie li.location{width:20%;}
#apply-form .add-movie li.frequency{width:8%; margin:0;}
#apply-form .add-movie .add{display:block; width:120px; margin:0 auto; background:#000; font-size:13px; color:#FFF; line-height:40px; text-align:center; transition:all .3s;}
#apply-form .add-movie .add:hover{opacity:.6;}

/* calendar */ 
.calendar{margin:0 auto 20px auto; box-shadow:0 0 5px rgba(153,153,153,.6);}
.calendar .date{padding:15px; overflow:hidden; font-size:20px; color:#000; text-align:center; background:#c6c6c6; border-top:1px solid #fff;}
.calendar .date a{display:block; width:16px; height:23px; background:url(../images/calender_arrow.png); text-indent:-9999px; cursor:pointer;}
.calendar .date .prev{float:left; background-position:left top;}
.calendar .date .next{float:right; background-position:right top;}
.calendar table{width:100%; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #fff;}
.calendar table thead{color:#000; font-weight:bold; background:#ddd; border-right:1px solid #ccc; border-left:1px solid #ccc; border-bottom:1px solid #ccc;} 
.calendar table thead td{ font-size:15px;font-weight:bold; }
.calendar table thead td span{font-size:15px;}
.calendar table tbody { border-left:1px solid #aaa;}
.calendar table tbody td{ border-right:1px solid #aaa; border-bottom:1px solid #aaa; vertical-align:text-top;}
.calendar table td{position:relative; width:12.3%; }
.calendar table td > span{display:block; width:30px; padding:5px 0; height:30px; margin:0 auto; border-radius:50%; line-height:30px; text-align:center; font-size:15px;}
.calendar table td span.past{color:#dadada;}
.calendar table td a{ display:block; padding:5px; box-sizing:border-box; color:#fff; margin:2px auto; text-align:center; width:95%; border-radius:3px; font-size:12px; line-height:18px;}
.calendar table td a b{ display:block;}
.calendar table td a.open1{background:rgba(12,84,84,.8);}
.calendar table td a.open2{background:rgba(186,53,26,.8);}
.calendar table td a.open3{background:#6da326;}
.calendar table td a.open4{background:#2b598d;}
.calendar table td a.open5{background:#558cbf;}
.calendar table td a:hover{background:#666;}

/* popup-con */
.popup-con{position:fixed; left:50%; top:10%; display:none; width:470px; height:80%; margin-left:-225px; padding:10px; box-sizing:border-box; z-index:103;}
.popup-con .close{position:absolute; right:-19px; top:-19px; display:block; width:37px; height:37px; background:url(../images/close.png) center center no-repeat rgba(186,53,26,1); border-radius:50%; text-indent:-9999px; cursor:pointer; transition:all .3s; -webkit-transition:all .3s; z-index:1;}
.popup-con .wrap{position:absolute; left:0; top:0; width:100%; height:100%;}
.popup-con .close:hover{background-color:#000;}
#popup-mask{position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:1}

/* calender-list */
#calender-list dl{ padding:5px; line-height:25px; overflow:hidden; border-bottom:1px solid #ccc; box-sizing:border-box; background:#fff;}
#calender-list dl dt, #calender-list dl dd{ font-size:15px;  padding:5px 10px; }
#calender-list dl dt{float:left; background:#eee; text-align:center; margin:0 5px 0 0; font-weight:bold;}
#calender-list dl dd{ overflow:hidden;}
#calender-list dl dd a{ display:block; color:#f63; }
#calender-list dl dd a:hover{ text-decoration:underline;  }
.mCSB_container{margin-right:0;}

/*send*/
#send .send_wrap{ background:#fff; padding:10px;}
#send h1{ font-size:18px; margin:0 0 10px 0}
#send dl{ width:100%; margin:0 0 10px 0; overflow:hidden;}
#send dl dt{ font-size:16px; color:#333; margin:0 0 5px 0}
#send dl dt span{ color:#C30;}
#send dl dd{}
#send dl dd input,textarea{ width:100%; height:34px; padding:5px 10px; background:#FFF; border:1px solid #CCC; font-size:15px; color:#666; box-sizing:border-box;}
#send dl dd input[type="checkbox"]{ width:15px; height:15px; vertical-align:-2px;}
#send dl dd .note{ color:#002b64; display:block; font-size:14px;}
#send dl dd .code_num{ width:100px; float:left;}
.code_img{ margin:0  0 0 10px; float:left;}
.code_img a{ color:#06F; font-size:14px; line-height:38px; margin:0 0 0 10px; cursor:pointer;}
#send .btn{padding:10px 0; text-align:center;}
#send .btn button{display:inline-block;}
#send .btn button[type="submit"]{display:inline-block; width:115px; height:24px; margin-right:10px; background:url(../images/search_search.jpg); border:1px solid #000; color:#FFF;}
#send .btn button[type="reset"]{border:none; background:none; color:#333; text-decoration:underline;}

/* database */
#database{padding:20px 10px; background:#f1f1f1;}
#database .filter{max-width:640px; margin:10px auto; padding-bottom:15px; background:url(../images/title_line.png) left bottom repeat-x; overflow:hidden;}
#database .filter a{float:left; display:block; width:19%; margin:.5%; border-radius:5px; font-size:16px; color:#333; line-height:30px; font-weight:bold; text-align:center;}
#database .filter a:hover{background:url(../images/filter_bg.png) center center repeat-x; color:#FFF; text-decoration:underline;}
#database > .wrap{overflow:hidden;}
#database table{width:100%; max-width:640px; margin:0 auto;}
#database thead td{padding:0 15px; background:#003366; font-size:16px; color:#FFF; line-height:37px;}
#database tbody tr:hover td{background:#efefef;}
#database tbody tr:hover td a{color:#f63;}
#database tbody td{padding:5px 15px; border-top:1px solid #efefef; font-size:14px; color:#222;}
#database tbody td a{color:#222;}
#database tbody td a:hover{text-decoration:underline;}
#database .col-1{width:140px;}
#database .col-2{width:110px;}
#database .col-3{width:140px;}
#database .col-4{width:80px;}
#database .col-5{}
#database #page ,
#database #article-bottom{max-width:640px; margin:0 auto;}

/* art_view */
#art_view{padding:20px 10px; background:#f1f1f1;}
#art_view .filter{max-width:640px; margin:10px auto; padding-bottom:15px; background:url(../images/title_line.png) left bottom repeat-x; overflow:hidden;}
#art_view .filter select{display:block; width:318px; height:27px; padding:3px; background:url(../images/select_arrow.jpg) right top no-repeat #FFF; border-left:2px solid #9a9a9a; border-top:2px solid #9a9a9a; -webkit-appearance:none; appearance:none; box-sizing:border-box;}
#art_view > .wrap{overflow:hidden;}
#art_view table{width:100%; max-width:640px; margin:0 auto;}
#art_view thead td{padding:0 15px; background:#003366; font-size:16px; color:#FFF; line-height:37px;}
#art_view tbody tr:hover td{background:#efefef;}
#art_view tbody tr:hover td a{color:#b08afc;}
#art_view tbody td{padding:5px 15px; border-top:1px solid #efefef; font-size:14px; color:#222;}
#art_view tbody td a{color:#222;}
#art_view tbody td a:hover{text-decoration:underline;}
#art_view .col-1{width:140px;}
#art_view .col-2{width:110px;}
#art_view .col-3{width:80px;}
#art_view .col-4{width:80px;}
#art_view .col-5{}
#art_view #page ,
#art_view #article-bottom{max-width:640px; margin:0 auto;}

/* page */
#page{padding:20px 10px; overflow:hidden;}
#page span{font-size:12px; color:#333;}
#page span select{display:inline-block; width:80px; height:27px; margin:0 10px; padding:3px; background:url(../images/select_arrow.jpg) right top no-repeat #FFF; border-left:2px solid #9a9a9a; border-top:2px solid #9a9a9a; -webkit-appearance:none; appearance:none; box-sizing:border-box;}
#page .wrap{float:right;}
#page .wrap a{display:inline-block; width:21px; margin:3px 0; font-size:13px; color:#333; line-height:19px; text-align:center;}
#page .wrap a:hover ,
#page .wrap a.active{background:#333; color:#FFF;}
#page .wrap .prev ,
#page .wrap .next{width:89px; background:url(../images/next.png) center top; color:#FFF;}
#page .wrap .prev:hover ,
#page .wrap .next:hover{background-position:left bottom;}

/* footer */
#footer{padding:20px; background:#003366; font-size:14px; color:#FFF; line-height:25px; text-align:center;}
#footer .wrap{max-width:960px; margin:0 auto;}
#footer .link{color:#336699;}
#footer .link a{color:#FFF;}
#footer .link a:hover{color:#000;}

/* download */
.download {margin:1.5em 0 0 0;}
.download span{padding-left:3.4em; font-size:1em; line-height:1.5em; font-weight:bold;}
.download a{display:inline-block; padding:3px 0; font-size:1em; color:#1f8fdb; line-height:1.5em; transition:all .3s;}
.download a:before{content:""; position:relative; top:2px; display:inline-block; width:20px; height:20px; margin-right:0.56em; background:url(../images/dl_icon.png) left top;}
.download a.pdf:before{background-position:-20px top;}
.download a.xls:before{background-position:-40px top;}
.download a.xlsx:before{background-position:-60px top;}
.download a.doc:before{background-position:-80px top;}
.download a.docx:before{background-position:right top;}
.download a.ppt:before{background-position:left -20px;}
.download a.pptx:before{background-position:-20px -20px;}
.download a.zip:before{background-position:-40px -20px;}
.download a.rar:before{background-position:-60px -20px;}
.download a.jpg:before{background-position:-90px -20px;}
.download a.tiff:before{background-position:right -20px;}
.download a.png:before{background-position:left -40px;}
.download a.gif:before{background-position:-20px -40px;}
.download a.wmv:before{background-position:-40px -40px;}
.download a.txt:before{background-position:-60px -40px;}
.download a.text:before{background-position:-90px -40px;}
.download a.opt:before{background-position:right -40px;}
.download a.odt:before{background-position:left bottom;}
.download a.ods:before{background-position:-20px bottom;}
.download a.odp:before{background-position:-40px bottom;}
.download a.odf:before{background-position:-60px bottom;}
.download a.odg:before{background-position:-90px bottom;}
.download a.odb:before{background-position:right bottom;}
.download a:hover{opacity:.6;}

/* gallery */
.gallery{padding:20px 0; overflow:hidden;}
.gallery dl{float:left; width:33.3%; padding:2% 1%; box-sizing:border-box;}
.gallery dt{position:relative; display:block; overflow:hidden; margin:0; border:1px solid #ccc;}
.gallery dt:after {padding-top:56.25%; content:""; display: block;}
.gallery dt a{ display:block;}
.gallery dt a img{display:block; height:auto; transition:all .3s;position:absolute; top:0; bottom:0; right:0; left:0; max-width:100%; max-height:100%; margin:auto;}
.gallery dt a:hover img{opacity:.5;}
.gallery dt a:hover:after{display:block;}
.gallery dd{padding:0.5em 0; font-size:1em; color:#333; line-height:2.125em; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* question */
#question{margin-bottom:20px; padding:20px; background:#f1f1f1;}
#question .tabs{margin-bottom:30px;}
#question .tabs li{display:inline-block; padding:5px 10px; background:#336699; border-radius:5px; font-size:15px; color:#FFF; cursor:pointer; transition:all .3s;}
#question .tabs li:hover ,
#question .tabs li.active{background:#003366;}
#question .tab-content > li{display:none;}
#question .tab-content dl{margin-bottom:20px; border:1px solid #CCC;}
#question .tab-content dt{padding:15px; background:#666;  color:#FFF; cursor:pointer;}
#question .tab-content dd{display:none; padding:15px; border-top:1px solid #CCC; font-size:15px; color:#333; line-height:22px;}
#question .tab-content dd a{color:#F30;}
#question .tab-content dd a:hover{color:#F60;}

/* book */
#book{margin-bottom:20px; padding:20px; background:#f1f1f1; font-size:16px; color:#333; line-height:25px;}
#book a{color:#333;}
#book a:hover{text-decoration:underline;}

/* book-info */
#book-info{padding:20px; font-size:1em; color:#333; line-height:1.75em;}
#book-info img{display:block; max-width:100%; height:auto; margin:0 auto;}

/* links */
#links{padding:20px; background:#f1f1f1;}
#links > .wrap{overflow:hidden;}
#links h2{ font-size:20px; color:rgba(186,53,26,.8); margin:0 0 10px 0;}
#links table{width:100%; max-width:640px; margin:0 auto 20px auto;}
#links thead td{padding:0 15px; font-size:16px; font-weight:bold; color:#333; line-height:37px; text-align:center;}
#links tbody td{padding:5px 15px; font-size:14px; color:#222;}
#links tbody td a{color:#222;}
#links tbody .col-1{width:140px; font-weight:bold; color:#333; text-align:center;}
#links tbody .col-2{width:250px;}
#links tbody .col-3,
#links tbody .col-4{ text-align:center;}
#links #page ,
#links #article-bottom{max-width:640px; margin:0 auto;}

/* resources */
#resources{padding:20px; background:#f1f1f1;}
#resources > .wrap{overflow:hidden;}
#resources .tabs{margin-bottom:30px;}
#resources .tabs li{display:inline-block; padding:5px 10px; background:#336699; border-radius:5px; font-size:15px; cursor:pointer; transition:all .3s;}
#resources .tabs li a{ color:#FFF;}
#resources .tabs li:hover ,
#resources .tabs li.active{background:#003366;}
#question .tab-content > li{display:none;}
#resources ul.content { overflow:hidden; margin-bottom:20px;}
#resources ul.content li {width:30%; float:left; margin:0.8%; padding:10px; box-sizing:border-box; height:85px; background:#ddd;}
#resources ul.content li a{ display:block; line-height:25px; color:#333; font-weight:bold; text-align:center;}
#resources ul.content li a span{ display:block; color:#666; font-weight:normal; font-size:15px; line-height:20px;}
#resources ul.content li a:hover{ text-decoration:underline; color:#003366;}
#resources ul.content li a:hover span{ color:#003366;}

/* tab-block */
#tab-block{}
#tab-block .tabs{overflow:hidden; margin:0 0 20px 0; background:url(../images/title_line.png) left bottom repeat-x; }
#tab-block .tabs a{float:left; display:inline-block; padding:10px 20px; font-size:18px; color:#999; line-height:30px; letter-spacing:.6px; text-align:center; cursor:pointer;}
#tab-block .tabs a.active{color:#000;}
#tab-block .contents dl{padding:10px 0; border-bottom:1px solid #bcbcbc; overflow:hidden;}
#tab-block .contents dl:nth-child(2n+2){ background:#f7f7f7;}
#tab-block .contents dl:nth-child(2n+1){ background:#eee;}
#tab-block .contents dt{font-size:16px; color:#042d58; margin:0 10px 0 0; padding:0 10px; box-sizing:border-box; float:left;}
#tab-block .contents dd{ overflow:hidden; padding:0 10px; box-sizing:border-box;}
#tab-block .contents dd a{display:block; font-size:16px; color:#666;}
#tab-block .contents dd a:hover{color:#000;}
#tab-block .contents dl.con-title{background:#003366;}
#tab-block .contents dl.con-title dt, #tab-block .contents dl.con-title dd{font-size:18px;color:#fff; font-weight:bold; text-align:center;}
#tab-block .contents dl.con-title dt{width:100px;}

/* fast-search */
#fast-search{position:fixed; right:-228px; top:200px; padding-left:45px; z-index:1;}
#fast-search .toggle{position:absolute; left:0; top:0; display:block; width:45px; padding:10px 0; background:#333; border:7px solid #EEE; border-right:none; border-radius:20px 0 0 20px; font-size:20px; color:#FFF; font-weight:bold; text-align:center; box-sizing:border-box;}
#fast-search .wrap{padding:30px 10px; background:#d2d5da; border:7px solid #EEE;}
#fast-search .wrap h2{margin-bottom:20px; font-size:15px; color:#000;}
#fast-search .wrap li{padding:5px 0; font-size:13px; color:#333;}
#fast-search .wrap li input ,
#fast-search .wrap li select{width:45px; height:24px; margin:5px 0; border:1px solid #999;}
#fast-search .wrap li input{display:block; width:145px;}
#fast-search .wrap li select{width:140px; margin-right:10px;}
#fast-search .wrap li button{display:inline-block; width:45px; height:24px; background:url(../images/search_search.jpg); border:1px solid #000; color:#FFF; box-sizing:border-box;}
#fast-search .wrap li.main button{width:110px; margin-right:10px;}
#fast-search .wrap li.main a{font-size:13px; color:#000;}
#fast-search .wrap li.main a:hover{text-decoration:underline;}

/* timeline */
#timeline{position:relative; padding:25px 0;}
#timeline:before ,
#timeline:after{content:""; display:block; position:absolute; left:0; display:block; width:100%; height:25px;}
#timeline:before{top:0; background:url(../images/paper_top.jpg) left top}
#timeline:after{bottom:0; background:url(../images/paper_bottom.jpg) left top}
#timeline .wrap{position:relative; padding:5% 20px; background:#EEE;}
#timeline .wrap:before{content:""; position:absolute; left:50%; top:0; width:4px; height:100%; background:#CCC;}
#timeline .wrap dl{position:relative; margin-bottom:5%; overflow:hidden;}
#timeline .wrap dl:before{content:""; position:absolute; left:50%; top:47px; display:block; width:35px; height:35px; margin-left:-16px; background:#666; border:3px solid #CCC; border-radius:50%; box-sizing:border-box;}
#timeline .wrap dt{width:46%; padding-top:50px; font-size:20px; color:#666; font-weight:bold;}
#timeline .wrap dd{position:relative; width:45%; padding:20px; background-repeat:repeat-y; box-sizing:border-box;}
#timeline .wrap dd:before{content:""; position:absolute; top:50px; display:block; width:0; height:0; border-style:solid;}
#timeline .wrap dd h2{width:100%; max-width:350px; margin-bottom:10px; padding-bottom:15px; background:url(../images/title_line.png) left bottom repeat-x; font-size:18px; color:#666;}
#timeline .wrap dd li{padding:2px 0; overflow:hidden;}
#timeline .wrap dd li a{font-size:13px; color:#000; line-height:20px;}
#timeline .wrap dd li a:hover{text-decoration:underline;}
#timeline .wrap dd li a b{font-size:13px; color:#333;}
#timeline .wrap dd li span{display:inline-block; margin:0 10px; padding:0 5px; border-radius:3px; font-size:13px; color:#FFF;}
#timeline .wrap dd li span.tag-1{background:#399;}
#timeline .wrap dd li span.tag-2{background:#96f;}
#timeline .wrap dd li span.tag-3{background:#333;}
#timeline .wrap dd li span.tag-4{background:#f33;}

#timeline .wrap dl.left dt{float:left; text-align:right;}
#timeline .wrap dl.left dd{float:right; background-image:url(../images/list_bg_odd.jpg); background-position:left top;background-size:100%;}
#timeline .wrap dl.left dd:before{right:100%; border-width:14px 15px 14px 0; border-color:transparent #FFF transparent transparent;}
#timeline .wrap dl.left dd li{text-align:left;}
#timeline .wrap dl.left dd li a *{float:left;}

#timeline .wrap dl.right dt{float:right;}
#timeline .wrap dl.right dd{float:left; background-image:url(../images/list_bg_even.jpg); background-position:right top;background-size:100%;}
#timeline .wrap dl.right dd h2{float:right; text-align:right;}
#timeline .wrap dl.right dd:before{left:100%; border-width:14px 0 14px 15px; border-color:transparent transparent transparent #FFF;}
#timeline .wrap dl.right dd ul{clear:both;}
#timeline .wrap dl.right dd li{text-align:right;}
#timeline .wrap dl.right dd li a *{float:right;}



/* RWD */
@media screen and (max-width:1200px){
/* resources */
#resources ul.content li{width:48.4%;}
}
@media screen and (max-width:768px){
/* header */
#header .function{margin-top:10px;}
#header .function form input{height:40px;}
#header .function form button{top:11px;}
#header .function .lang{width:40px; height:40px; margin:0 10px; font-size:18px; line-height:40px;}
/* navigation */
#navigation{display:none;}
/* mobile */
#mobi-btn{display:block;}
/* container */
#container > .left{float:none; width:100%; padding:0;}
#container > .right{float:none; width:100%; min-height:auto !important; background:#EEE;}
#container > .right:before{display:none;}
/* about */
#about{padding:20px;}
#about p{padding:0 !important;}
/* map */
.map:after{ padding-top: 36%;}
.map iframe{ width:510px !important;}
/* overview */
#overview .tab-block{margin:0;}
#overview .list{margin:0;}
/* overview-movie */
#overview-movie .tab-block{margin:0;}
#overview-movie .list{margin:0;}
#movie-link{ padding:0 20px 20px 20px; }
/* movie-search */
#movie-search .title ,
#movie-search dt ,
#movie-search dd a{color:#333;}
/* movie-book */
#movie-book{overflow:hidden;}
#movie-book dl{float:left; width:48%; margin:1%;}
/* topic-list */
#topic-list .main{padding:20px; background:#FFF;}
#topic-list .main dt{width:45%;}
#topic-list .main dd{width:52%;}
/* movie-media */
#movie-media{height:auto; padding:0 20px;}
#movie-media .title{padding:20px 0; background:none; color:#333; text-align:center;}
#movie-media .wrap{}
#movie-media .wrap video{width:100%; height:100%;}
/* movie-album */
#movie-album li.cover{display:none;}
#movie-album li.cover:first-child{display:block;}
/* score */
#score{margin-top:5%;}
/* page */
#page span{display:block; margin-bottom:10px; text-align:center;}
#page .wrap{float:none; text-align:center;}
/* apply-form */
#apply-form .add-movie li{float:none; width:100% !important; margin:0;}
#apply-form .add-movie li span{height:auto !important;}
/* database */
#database .col-1 ,
#database .col-3{display:none;}
#database .col-2{width:48%;}
#database .col-4 ,
#database .col-5{width:26%;}
/* art_view */
#art_view .col-1{display:none;}
#art_view .col-2{width:40%;}
#art_view .col-3{width:25%;}
#art_view .col-4{width:35%;}
#art_view .col-5{display:none;}
/* resources */
#resources ul.content li{width:98.4%; height:auto; float:none; margin:0 0 10px 0;}
/* timeline */
#timeline .wrap:before{display:none;}
#timeline .wrap dt ,
#timeline .wrap dd{float:none; width:100%; text-align:left;}
#timeline .wrap dt{display:none;}
#timeline .wrap dd{background:#FFF !important;}
#timeline .wrap dd h2{float:none !important; width:100%; max-width:100%; text-align:left !important;}
#timeline .wrap dd li{text-align:left !important;}
#timeline .wrap dd li a *{float:none !important;}
}

@media screen and (max-width:640px){
/* topic-list */
#topic-list .list dt ,
#topic-list .list dd{float:none; width:100%;}
#topic-list .list dt{margin-bottom:20px;}
/* database */
#database .filter a{width:32%;}
}

@media screen and (max-width:600px){
/* header */
#header{padding:15px 3%;}
#logo{float:none; margin:0 auto;}
#header .function{float:none; width:295px; margin:5px auto;}
#header .function .lang{margin:0 5px;}
/* article-bottom */
#article-bottom{text-align:center;}
#article-bottom .info ,
#article-bottom .back{float:none;}
#article-bottom .back{margin-top:10px;}
/* map */
.map:after{ padding-top: 34%;}
.map iframe{ width:260px !important;}
/* movie-album */
#movie-album li{width:33%;}
/* gallery */
.gallery dl{width:50%;}
/* apply-form */
#apply-form form li{ width:100%; margin-right:0; float:none;}
}

@media screen and (max-width:480px){
/* overview */
#overview .list .wrap dl{padding:10px;}
#overview .list .wrap dt{position:static; width:100%; margin-bottom:10px;}
/* overview-movie */
#overview-movie .list .wrap dl{padding:10px;}
#overview-movie .list .wrap dt{position:static; width:100%; margin-bottom:10px;}
/* movie-book */
#movie-book dl{float:none; width:100%; margin:10px auto;}
/* topic-list */
#topic-list .main{padding:10px;}
#topic-list .main dt ,
#topic-list .main dd{float:none; width:100%;}
#topic-list .main dt{margin-bottom:10px;}
/* topic-info */
#topic-info .list{ margin:30px 0;}
#topic-info .list table .left-col{ text-align:left; padding-right:0;}
/* movie-album */
#movie-album li{float:none; width:100%; height:auto !important;}
/* search */
#search .wrap ul{float:none; width:100%;}
/* apply-form */
#apply-form .wrap ul li{float:none; width:100%;}
/* calendar */
.calendar table td a{ padding:5px 1%;}
/* calender-list */
.popup-con{left:5%; width:90%; margin:0;}
#calender-list dl.site_link dt, #calender-list dl.site_link dd{ float:none;}
#calender-list dl.site_link dt{ display:inline-block;}
#calender-list dl.site_link dd{ padding:5px 0;}
#calender-list dl dt{ text-align:center; margin:0;}
/* gallery */
.gallery dl{width:100%;}
/* fast-search */
#fast-search{display:none;}
}

@media screen and (max-width:400px){
/* database */
#database .filter a{width:49%;}
}
@media screen and (max-width:375px){
/* map */
.map:after{ padding-top: 35%;}
.map iframe{ width:270px !important;}

}

