@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;max-width: 100%}
ol, ul{list-style:none;}
a{text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , "微軟正黑體";}
button{padding:0; cursor:pointer;}

body{font-family:arial , "微軟正黑體";}

/* header */
#header{position:relative; max-width:110em; margin:0 auto; padding:0 250px 0 359px; border:5px solid #000; box-sizing:border-box;}
#logo{position:absolute; left:0; top:0; display:inline-block; border-right:5px solid #000;}
#logo img{display:block; max-width:100%; height:auto;}
#navigation{width:100%; background:#f4f4f4; overflow:hidden;}
#navigation li{float:left; width:25%; border-right:5px solid #000; box-sizing:border-box;}
#navigation li a{display:block; padding:20px 0; font-size:1.875em; color:#000; letter-spacing:1.2px; font-weight:bold; text-align:center; transition:all .3s;}
#navigation li a:hover{background:#FFF;}
#navigation li a:before{content:""; display:block; width:83px; height:74px; margin:0 auto 5px auto; background:url(../images/navigation.png);}
#navigation li.btn-1 a:before{background-position:left top;}
#navigation li.btn-2 a:before{background-position:-83px top;}
#navigation li.btn-3 a:before{background-position:-166px top;}
#navigation li.btn-4 a:before{background-position:right top;}
#font-resize{position:absolute; right:0; top:0; width:250px; padding:20px 0; background:#FFF; text-align:center;}
#font-resize a{display:inline-block;margin:0 3px;padding:2px 5px;background: #002566;font-size:2.8125em;color:#FFF;font-weight:bold;}
#font-resize a.active{background:#000;}
#font-resize span{display:block; padding-top:15px; font-size:1.875em; color:#000; font-weight:bold;}

/* footer */
#footer{padding:3% 0; background:#000;}
#footer .wrap{width:90%; max-width:103.75em; margin:0 auto;}
#footer .wrap:after{content:""; display:block; clear:both;}
#footer .wrap .info{float:left; font-size:1.5625em; color:#FFF; line-height:1.75em; letter-spacing:1.2px; font-weight:bold; text-shadow:2px 2px 2px rgba(0,0,0,.8)}
#footer .wrap .other{float:right;}
#footer .wrap .other:after{content:""; display:block; clear:both;}
#footer .wrap .other a{float:left; transition:all .3s;}
#footer .wrap .other a:hover{opacity:.6;}
#footer .wrap .other .mail{position:relative; top:-10px; display:inline-block; margin-right:30px; font-size:1.5625em; color:#FFF; letter-spacing:1.2px; font-weight:bold; text-shadow:2px 2px 2px rgba(0,0,0,.8)}
#footer .wrap .other .mail:before{content:""; display:block; width:77px; height:59px; margin:10px auto; background:url(../images/footer_mail.png);}
#footer .wrap .other .accessibility{display:inline-block; width:88px; height:31px; background:url(../images/accessibility.jpg); text-indent:-9999px;/*margin-top: 70px;*/}
#path {display: block;font-size: 1.5em;color: #000;line-height: 2em;margin-left: 250px;position: relative;max-width: 73.5em;margin: 0 auto;}
#path a{color:#000;}
#path a:hover{color: #ccc;}

/* gotop */
#gotop{position:fixed; right:6%; bottom:25%; display:block; width:75px; height:75px; background:url(../images/gotop.png); text-indent:-9999px;}

/* overview */
#overview{margin-top:5%; overflow:hidden;}
#overview li{float:left; width:48%; margin:1%; padding:5%; box-sizing:border-box;}
#overview li h2{position:relative; display:inline-block; margin-bottom:10%; padding:20px 0; font-size:7.375em; color:#FFF; letter-spacing:.5px; text-align:center; overflow:hidden;}
#overview li h2:before{content:""; display:inline-block; width:181px; height:173px; margin-right:5px; background:url(../images/overview.png); vertical-align:middle;}
#overview li h2:after{content:""; position:absolute; left:195px; bottom:20px; display:block; width:100%; height:15px; background:#FFF;}
#overview li .wrap{max-width:38.44em; margin:0 auto;}
#overview li .wrap a{display:inline-block; margin:1%; padding:5%; background:#fffc00; font-size:2.8125em; color:#000; letter-spacing:.5px; transition:all .3s;}
#overview li .wrap a:hover{background:#CCC;}
#overview li.section-1{background:#001B6F;}
#overview li.section-1 h2:before{background-position:left top;}
#overview li.section-2{background:#AF0035;}
#overview li.section-2 h2:before{background-position:-181px top;}
#overview li.section-3{background:#5E3C05;}
#overview li.section-3 h2:before{background-position:-362px top;}
#overview li.section-4{background:#084600;}
#overview li.section-4 h2:before{background-position:right top;}

/* media */
#media{position:relative; width:90%; max-width:97.5em; margin:5% auto; border:5px solid #000; box-sizing:border-box;}
#media:before{content:""; display:block; width:100%; /*padding-bottom:52.65%;*/}
/*#media iframe{position:absolute; left:0; top:0; width:100%; height:100%;}*/
#media p{display:none;}

/* container */
#container{margin:5% auto;}
#main-title{padding:2% 5%;overflow:hidden;font-size:5.9375em;color: #000;letter-spacing:.5px;}
#main-title .print{float:right;display:inline-block;margin-top:20px;padding:15px;background: #000;font-size:0.5em;color:#FFF;transition:all .3s;}
#main-title .print:before{content:""; display:inline-block; width:56px; height:56px; background:url(/accessibility-page/v2/image/print-solid.svg); margin-right:10px; vertical-align:middle; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(82deg) brightness(103%) contrast(106%);}
#sub-menu{padding:1% 5%;}
#sub-menu a{display:inline-block;margin-right:5%;padding:10px 0;border-bottom: 5px solid #fff;font-size:2.8125em;color: #fff;letter-spacing:.5px;font-weight:bold;transition:all .3s;}


#container.visit #main-title{background: #ddd;}
#container.visit #sub-menu{background: #000;}
#container.activity #main-title{background: #ddd;}
#container.activity #sub-menu{background: #000;}
#container.other #main-title{background: #ddd;}

#container.small{font-size:90%;}
#container.medium{font-size:100%;}
#container.large{font-size:110%;}

#container .section{padding: 60px 100px 20px 100px;}
#container .section h2{margin-bottom: 15px;font-size:2.9167em;letter-spacing:.5px;}
#container .section h2:before{content:""; display:inline-block; width:14px; height:14px; margin-right:2%; vertical-align:middle;}
#container .section .wrap{overflow:hidden;border-bottom: 1px solid #000;margin-top: 25px; display: flex;}
#container .section .wrap .left{float:left;width:75%;}
#container .section .wrap .left h3{margin: 2% 0 2% 0;font-size:2em;color:#000;letter-spacing:.2px;}
#container .section .wrap .left p{margin-bottom: 3%;font-size:1.3333em;color:#000;line-height: 1.45em;letter-spacing: 0.2px;}
#container .section .wrap .left a{color:#c50000; font-weight:bold;}

#container .section .wrap .left a:hover{color:#0038E6;}
#container .section .wrap .left .signup{display:inline-block; margin-bottom:5%; padding:20px 30px; background:#000; font-size:2.813em; color:#FFF; letter-spacing:.5px; font-weight:bold; transition:all .3s;}
#container .section .wrap .left .signup:hover{background:#ff0000; text-decoration:none;}
#container .section .wrap .right{float:right; width:300px;}
#container .section .wrap .right .img{margin-bottom:10%;}
#container .section .wrap .right .img .imgmedia{width:100%;text-align: center;}
#container .section .wrap .right .img .imgmedia img{width: 86%;display:block;height:auto;border:2px solid #000;padding:17.5px; border-radius: 10px; margin-bottom: 3%;}
#container .section .wrap .right .img p{padding:2% 1%;font-size:1.3333em;; color:#000;text-align:left;}
#container .section .wrap .right .img .loupe{background: #000;width: 104px; border-radius: 10px;}
#container .section .wrap .right .img .loupe a{font-size:1.3333em;;font-weight: 900;margin-left: 10px;color: #fff;}
#container .section .wrap .right .media img{width: 100%;}
#container .section .wrap .right .media p{width:240px;font-size:1.3333em;;}

#container.visit .section h2{color:#000;}
#container.visit .section h2:before{background:#000;}
#container.visit .section .wrap .right .img p{background:#fff;font-size:1.3333em;}
#container.activity .section h2{color:#000;}
#container.activity .section h2:before{background:#000;}
#container.visit .section .wrap .right .img p{background:#fff;font-size:1.3333em;}

/* help */
#help{padding:5%;font-size:1.5em;color:#000;line-height: 2em;letter-spacing:.3px;}


/* search */
#search{width:90%; max-width:93.75em; margin:5% auto;}
#search form{position:relative; margin-bottom:5%; padding:60px 390px 60px 90px; background:#FFF;}
#search form input{display:block; width:100%; height:180px; padding:0 60px; border:2px solid #000; font-size:4.375em;}
#search form button{position:absolute; right:90px; top:60px; display:block; width:170px; height:184px; background:url(../images/search.png) center center no-repeat #000; border:none; text-indent:-9999px; transition:all .3s;}
#search .result h2{margin-bottom:20px; padding-bottom:20px; border-bottom:4px solid #000; overflow:hidden; font-size:3.75em; color:#000;}
#search .result h2 span{float:right; display:inline-block; margin-top:20px; font-size:2.188rem;}
#search .result h2 span:before{content:""; display:inline-block; width:11px; height:11px; margin-right:15px; background:#363636; vertical-align:middle;}
#search .result li{padding:2.813em 0; border-bottom:1px solid #000; font-weight:bold;}
#search .result li a{display:block;font-size:2.813em;color: #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#search .result li a:hover{color:#000;}
#search .result li p{font-size:2.188em;color: #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#search .page{padding-top:5%; font-size:2.1875em; font-weight:bold; text-align:center;}
#search .page a{display:inline-block;margin:0 5px;padding:5px 15px;background: #666;color:#FFF;}
#search .page a.active{background: #000;}


/* image */
div{padding:0;margin:0;border:0;}
.bloc_info_seul, .bloc_info, .table, .tableZoomMedia{border-color: #000;}
.bloc_info_seul div.mediaZoom{text-align: center;}
.bloc_info_seul{clear:both;margin: 45px 70px;padding: 0;border: 6px solid;}
.mediaZoom img {border:none !important; padding:0 !important; }
.mediaZoom img.imgMedia {}
.mediaZoom h4 {padding: 2em 0 0 0;}
.mediaZoom p {margin:0;padding: 2em 0 0 0;}
.bloc_info_seul .mediaZoom p{float: none;padding:20px 0;font-size: 1.8em;}
.bloc_info_seul .mediaZoom p.legende{font-weight:500;float: none;clear: both;margin:0;padding:20px 0;font-size: 1.8em;color:#000;}
.bloc_info_seul .mediaZoom{}
.hautpage{float:right;padding:0;border:0;margin:5px 0 10px 0;}

/* custom */
#container .section .wrap .left p strong {
    font-size: 2rem;
}

.about-txt {
    margin-bottom: 6% !important;
}

.appendix-txt {
    margin-bottom: 3%;
    font-size: 1.3333em;
    color: #CC6E58 !important;
    line-height: 1.45em;
    letter-spacing: 0.2px;
}

.appendix-txt:last-child {
    margin-bottom: 3% !important;
}

.connection-area {
    margin: 3% 0;
    font-size: 1.3333em;
}

#container .section .wrap .left .response-list {
    margin-bottom: 0;
}

.org-info {
    margin-bottom: 3%;
}

/* RWD */
@media screen and (max-width:1760px){
/* overview */
#overview li{padding:5% 2%;}
#overview li h2{display:block; padding:0; font-size:4.375em; text-align:left; overflow:visible;}
#overview li h2:before{width:100px; height:95px; background-size:400px auto;}
#overview li h2:after{display:none;}
#overview li .wrap{max-width:none;}
#overview li .wrap a{font-size:1.875em;}
#overview li.section-2 h2:before{background-position:-100px top;}
#overview li.section-3 h2:before{background-position:-200px top;}
}

@media screen and (max-width:1500px){
/* footer */
#footer .wrap .info{float:none; width:100%; text-align:center;}
#footer .wrap .other{float:none; width:406px; margin:20px auto 0 auto; text-align:center;}
}

@media screen and (max-width:1300px){
/* search */
#search form{padding:30px 209px 30px 40px;}
#search form input{height:100px; padding:0 30px; font-size:2.5em;}
#search form button{right:40px; top:30px; width:105px; height:104px; background-size:50px auto;}
}

@media screen and (max-width:1200px){
/* header */
#header{padding:0 160px 0 230px;}
#logo{width: 214px;}
#navigation li a{padding:13px 0; font-size:1.125em;}
#navigation li a:before{width:50px; height:43px;}
#navigation li.btn-2 a:before{background-position:-50px top;}
#navigation li.btn-3 a:before{background-position:-100px top;}
#navigation li.btn-4 a:before{background-position:right top;}
#font-resize{width:160px; padding:10px 0;}
#font-resize a{font-size:1.875em;}
#font-resize span{padding-top:7px; font-size:1.25em;}
/* container */
#main-title{font-size:3.4375em;}
#main-title .print{margin-top:10px; font-size:1.25em;}
#main-title .print:before{width:30px; height:30px; background-size:100%;}
#sub-menu a{font-size:1.5625em; padding:5px 0; border-bottom:2px solid #000;}
#container .section{padding: 3%;margin-right:18px;}
#container .section h2{font-size:2.5em}
#container .section h2:before{width:8px; height:8px;}
#container .section .wrap .left h3{}
#container .section .wrap .left p ,
#container .section .wrap .left ul ,
#container .section .wrap .left{float:left;width: 80%;}
#container .section .wrap .about-txt-appendix p { float: none; }
#container .section .wrap .right{float:right; width:18%;}
#container .section .wrap .right .img .imgmedia img{width: 76%;}
#container .section .wrap .left .signup{padding:15px; }

/* help */
#help{font-size:1.563em; line-height:2.188em;}
/* search */
#search form{padding:20px 153px 20px 20px;}
#search form input{height:70px; padding:0 30px; font-size:1.5625em;}
#search form button{right:20px; top:20px; width:70px; height:74px; background-size:30px auto;}
#search .result h2{font-size:2.1875em;}
#search .result h2 span{margin-top:5px; font-size:1.5625em;}
#search .result li{padding:20px 0;}
#search .result li a{font-size:1.563em; line-height:2.188em;}
#search .result li p{font-size:1.563em; line-height:1.25em;}
}

@media screen and (max-width:1000px){
/* overview */
#overview li{float:none; width:100%; height:auto !important; margin:0 auto;}
#overview li h2{margin-bottom:5%; text-align:center;}
#overview li h2:before{display:none;}
#overview li .wrap{text-align:center;}
#overview li .wrap a{width:48%; margin:1%; padding:10px; box-sizing:border-box;}
}

@media screen and (max-width:768px){
/* header */
#header{padding:0; border:none; text-align:center;}
#logo{position:static; display:block; width:100%; background-size:200px auto; border:none;}
#navigation{border:3px solid #333; border-bottom:none; box-sizing:border-box;}
#navigation li{border-right-width:3px;}
#navigation li.btn-4{border:none;}
#font-resize{position:static; width:100%; border:3px solid #333; box-sizing:border-box;}
/* footer */
#footer .wrap .other{width:257px;}
#footer .wrap .info{font-size:1.125em; line-height:1.56em; text-shadow:none;}
#footer .wrap .other .mail{top:-20px; font-size:1.125em;}
#footer .wrap .other .mail:before{width:45px; height:34px; background-size:100% auto;}
#footer .wrap .other .accessibility{margin-top: 25px;}
/* gotop */
#gotop{width:50px; height:49px; background-size:100% auto;}
/* container */
#container .section .wrap { display: block; }
#container .section .wrap .left ,
#container .section .wrap .right{float:none; width:100%;}

#logo{text-align:-webkit-center;}
#container .section .wrap .right .img .imgmedia img{width: 93%;}

}

@media screen and (max-width:480px){
#logo{text-align:-webkit-center;}
/* header */
#navigation{border-width:1px;}
#navigation li{width:50%; border:1px solid #333 !important;}
#font-resize{border-width:2px;}
/* overview */
#overview li h2{font-size:3.125em;}
#overview li .wrap a{width:100%; margin:10px 0;}
/* container */
#container .section .wrap .left p{float:left;width: 100%;}
#container #main-title{font-size:2.5em; text-align:center;}
#container #main-title .print{float:none; display:block; width:150px; margin:10px auto; padding:5px 10px;}
#sub-menu a{font-size:1.25em;}
#container .section .wrap .right .img .imgmedia img{width:85%;}
#container .section .wrap .right .img .loupe{margin-left:10px;}

/*image*/
.bloc_info_seul{clear:both;margin: 20px 0px;padding: 0;border: 2px solid;}
.mediaZoom img {width:100%;}
}


@media screen and (max-width:375px){
#logo{text-align:-webkit-center;}
#container .section .wrap .right .img .loupe{margin-left:6px;}
}