nfu-ctld/assets/stylesheets/template/layout/addcss.scss

7876 lines
182 KiB
SCSS

@charset "utf-8";
@import "../initial";
.svg-inline--fa {
width: 1em;
}
@media screen and (max-width: 767px) {
.photo-bx {
width: calc(100% - 20px);
margin: 0 10px 20px 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.photo-bx {
width: calc(50% - 20px);
margin: 0 10px 20px 10px;
float: left;
}
}
@media screen and (min-width: 1440px) {
.photo-bx {
width: calc(50% - 20px);
margin: 0 10px 20px 10px;
float: left;
}
}
section, article, aside, footer, header, nav, h2 {
display: block;
}
img {
border: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
ul.num {
padding: 0;
margin: 0 0 0 16px;
list-style: decimal;
display: block;
}
ul.num li {
padding: 0;
margin: 0;
}
#page-num {
clear: both;
width: 100%;
}
#page-num ul.page {
padding: 0;
margin: 40px 0;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#page-num ul.page li {
padding: 0;
margin: 0 5px;
font-size: 0.9em;
}
#page-num ul.page li a {
padding: 0 5px;
color: #414141;
border: 1px #414141 solid;
border-radius: 6px;
text-decoration: none;
display: block;
}
#page-num ul.page li a:hover {
color: #414141;
background-color: #eee;
}
#page-num ul.page li a.sel {
color: #414141;
font-weight: bolder;
background-color: #eee;
}
@media screen and (min-width: 1440px) {
/******** header for pc ********/ header#mo {
display: none;
}
header#pc {
width: 100%;
}
header#pc .header-top-bar {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #5d686e;
}
header#pc .header-top-bar .title-bx {
width: 260px;
}
header#pc .header-top-bar .title-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
}
header#pc .header-top-bar .title-bx ul li {
padding: 0;
margin: 0 10px;
}
header#pc .header-top-bar .title-bx ul li a {
color: #fff;
font-size: 0.8em;
letter-spacing: 0.2em;
text-decoration: none;
}
header#pc .header-top-bar .title-bx ul li a:hover {
color: #fdd900;
}
header#pc .header-top-bar .search-bx {
width: 270px;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #fff;
}
header#pc .header-top-bar .search-bx input[type=search] {
width: calc(90% - 40px);
padding: 10px;
color: #000;
font: 1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial;
box-sizing: border-box;
border: 0;
background-color: #fff;
}
header#pc .header-top-bar .search-bx input[type=button] {
width: 40px;
height: 31px;
box-sizing: border-box;
background-color: #fff;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
border-top: 0;
border-left: 0;
border-bottom: 0;
border-right: 2px #a1a5a6 solid;
cursor: pointer;
}
header#pc .title-nav-bx {
width: 1400px;
height: 120px;
margin: 0 auto;
}
header#pc .title-nav-bx .sub-title-bx {
width: 330px;
padding: 30px 0 0 0;
float: left;
}
header#pc .title-nav-bx nav#pc {
width: calc(100% - 330px);
float: right;
}
header#pc .title-nav-bx nav#pc ul {
padding: 0;
margin: 35px 0 0 0;
list-style: none;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
header#pc .title-nav-bx nav#pc ul li {
padding: 0;
margin: 0 0 0 50px;
line-height: 1.4em;
text-align: center;
position: relative;
}
header#pc .title-nav-bx nav#pc ul li a {
color: #676664;
text-decoration: none;
cursor: pointer;
}
header#pc .title-nav-bx nav#pc ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
header#pc .title-nav-bx nav#pc ul li a font.en {
font-size: 0.8em;
}
header#pc .title-nav-bx nav#pc ul li a .icon-home {
width: 100%;
height: 23px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_home.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-home {
background-image: url("../images/nav_icon_home_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-home.sel {
background-image: url("../images/nav_icon_home_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-about {
width: 100%;
height: 27px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_about.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-about {
background-image: url("../images/nav_icon_about_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-about.sel {
background-image: url("../images/nav_icon_about_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-infor {
width: 100%;
height: 24px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_infor.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-infor {
background-image: url("../images/nav_icon_infor_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-infor.sel {
background-image: url("../images/nav_icon_infor_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-regu {
width: 100%;
height: 28px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_regulation.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-regu {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-regu.sel {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-dw {
width: 100%;
height: 26px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_download.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-dw {
background-image: url("../images/nav_icon_download_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-dw.sel {
background-image: url("../images/nav_icon_download_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-manage {
width: 100%;
height: 23px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_mag_sys.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-manage {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-manage.sel {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#pc .title-nav-bx nav#pc ul li ul.popup {
width: 170px;
padding: 0;
margin: 0;
list-style: none;
display: block;
position: absolute;
top: 84px;
left: 0;
z-index: 999;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li {
width: 100%;
padding: 0;
margin: 0;
text-align: left;
letter-spacing: 0.1em;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a {
width: 100%;
padding: 10px 20px;
color: #fff;
text-decoration: none;
background-color: rgba(79,89,95,0.8);
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a:hover {
background-color: rgba(79,89,95,1)
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a .checked {
width: 25px;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a .text {
width: calc(100% - 25px);
}
/******** banner ********/
.banner-text-full {
width: 100%;
position: relative;
}
.banner-text-full .banner-bx {
width: 100%;
height: 26vw;
overflow: hidden;
position: relative;
}
.banner-text-full .banner-bx ul li a {
text-decoration: none;
display: block;
}
.banner-text-full .banner-bx ul li .pic {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.banner-text-full .banner-bx ul li .pic img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .bg-sq {
width: 41vw;
text-align: right;
position: absolute;
top: -3.1vw;
right: 0;
z-index: 10;
}
.banner-text-full .banner-bx ul li .bg-sq img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .text-bx {
display: none;
}
/******** section ********/
section {
max-width: 1400px;
margin: 0 auto;
}
/******** aside ********/
aside {
width: 350px;
padding: 0;
margin: 0;
float: right;
}
aside .menu-bx {
width: 100%;
height: 730px;
padding: 25px 0 0 0;
margin: 0;
background-color: #fdd900;
}
aside .menu-bx .aside-icon {
display: none;
}
aside .menu-bx dl#panel {
width: 100%;
padding: 0;
margin: 0;
border-top: 1px #fff solid;
}
aside .menu-bx dl#panel dt {
width: 100%;
padding: 20px 0 20px 30px;
margin: 0;
font-size: 1.1em;
letter-spacing: 0.1em;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px #fff solid;
box-sizing: border-box;
cursor: pointer;
}
aside .menu-bx dl#panel dt:hover {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt.sel {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt .icon {
width: 70px
}
aside .menu-bx dl#panel dt .text {
width: calc(100% - 70px);
color: #363531;
font-size: 1.1em;
line-height: 1em;
}
aside .menu-bx dl#panel dt .text font.en {
font-size: 0.6em;
letter-spacing: normal;
}
aside .menu-bx dl#panel dd {
width: 100%;
padding: 0;
margin: 0;
border-bottom: 1px #fff solid;
box-sizing: border-box;
display: none;
}
aside .menu-bx dl#panel dd ul {
width: calc(100% - 30px);
padding: 0;
margin: 0;
list-style: none;
display: block;
float: right;
}
aside .menu-bx dl#panel dd ul li {
width: 100%;
padding: 0;
margin: 0;
}
aside .menu-bx dl#panel dd ul li a {
width: 100%;
padding: 10px 10px 10px 20px;
margin: 0;
color: #fff;
font-size: 0.9em;
text-decoration: none;
border-bottom: 1px #fff solid;
background-color: #6e756b;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
aside .menu-bx dl#panel dd ul li a:hover {
background-color: #50595c;
}
aside .menu-bx dl#panel dd ul li a .checked {
width: 30px;
}
aside .menu-bx dl#panel dd ul li a .text {
width: calc(100% - 30px);
}
aside .menu-bx dl#panel dd ul li:last-child a {
border: 0;
}
aside .data-num-bx {
width: 100%;
padding: 20px 20px 0 20px;
color: #585757;
font-size: 0.8em;
letter-spacing: 0.1em;
box-sizing: border-box;
}
aside .data-num-bx font.num {
font-size: 1.6em;
font-weight: 500;
}
/******** content #hp ********/
.main-content .hp-menu {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .hp-menu .icon {
width: 50px;
}
.main-content .hp-menu .news-tabs-bx {
width: calc(100% - 50px);
}
.main-content .hp-menu .news-tabs-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .hp-menu .news-tabs-bx ul li {
padding: 0;
margin: 0;
line-height: 1em;
text-align: center;
}
.main-content .hp-menu .news-tabs-bx ul li a {
width: 115px;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .hp-menu .news-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .hp-menu .news-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .news-list-bx {
width: 100%;
padding: 30px 20px;
box-sizing: border-box;
}
.main-content .news-list-bx .list-bx {
clear: both;
width: 100%;
padding: 0 0 15px 0;
}
.main-content .news-list-bx .list-bx .date {
width: 100px;
padding: 5px 0;
margin: 0 20px 0 0;
color: #485157;
font-size: 0.8em;
font-weight: 500;
line-height: 1em;
text-align: center;
background-color: #ffd900;
float: left;
}
.main-content .news-list-bx .list-bx .title {
width: calc(100% - 120px);
font-size: 0.9em;
letter-spacing: 0.1em;
float: left;
}
.main-content .news-list-bx .list-bx .title a {
color: #485157;
text-decoration: none;
}
.main-content .news-list-bx .list-bx .title a:hover {
text-decoration: underline;
}
.main-content .news-list-bx .more {
clear: both;
width: 100%;
padding: 20px 20px 0 0;
box-sizing: border-box;
text-align: right;
}
.main-content .news-list-bx .more a {
color: #485157;
font-size: 0.9em;
text-decoration: none;
}
.main-content .news-list-bx .more a:hover {
text-decoration: underline;
}
.main-content .hp-title {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
position: relative;
}
.main-content .hp-title .icon {
width: 50px;
}
.main-content .hp-title .title {
width: calc(100% - 50px);
padding: 10px 0 0 0;
color: #545e64;
font-size: 1.1em;
line-height: 1em;
letter-spacing: 0.1em;
}
.main-content .hp-title .more {
width: 40px;
font-size: 0.9em;
text-align: right;
position: absolute;
top: 20px;
right: 10px;
}
.main-content .hp-title .more a {
color: #414141;
text-decoration: none;
}
.main-content .hp-title .more a:hover {
text-decoration: underline;
}
.main-content ul#spot-list-bx {
clear: both;
width: 100%;
padding: 0;
margin: 0 0 30px 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content ul#spot-list-bx li {
width: calc(100% / 3 - 20px);
margin: 20px 10px;
background-color: #fff;
position: relative;
}
.main-content ul#spot-list-bx li:hover {
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
}
.main-content ul#spot-list-bx li a {
width: 100%;
text-decoration: none;
display: block;
}
.main-content ul#spot-list-bx li .pic {
width: 100%;
height: 10vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.main-content ul#spot-list-bx li .pic img.v {
width: 100%;
height: auto;
}
.main-content ul#spot-list-bx li .pic img.h {
width: auto;
height: 100%;
}
.main-content ul#spot-list-bx li .text {
width: 100%;
padding: 15px;
margin: 0 0 30px 0;
line-height: 1.2em;
box-sizing: border-box;
background-color: #fff;
}
.main-content ul#spot-list-bx li .text font.sub-date {
padding: 2px 10px;
color: #555e60;
font-size: 0.8em;
background-color: #ffd900;
}
.main-content ul#spot-list-bx li .text .title {
clear: both;
width: 100%;
margin: 15px 0 10px 0;
color: #555e60;
font-size: 1.1em;
letter-spacing: 0.1em;
font-weight: 500;
}
.main-content ul#spot-list-bx li .text .intro {
width: 100%;
color: #555e60;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content ul#spot-list-bx li .more {
clear: both;
width: calc(100% - 15px);
margin: 10px 0 0 0;
color: #555e60;
font-size: 0.8em;
text-align: right;
position: absolute;
bottom: 15px;
left: 0;
}
.main-content #spot-news {
width: 1100px;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: 100px;
left: 0;
z-index: 9999;
display: none;
}
.main-content #spot-news .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #spot-news .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #spot-news .content-bx {
width: 100%;
padding: 30px 50px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .source-date {
font-size: 0.8em;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content #spot-news .content-bx .source-date .date {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #spot-news .content-bx .source-date .source {
margin: 0 0 0 15px;
}
.main-content #spot-news .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #spot-news .content-bx .content {
width: 100%;
padding: 0 30px;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .content a {
color: #3E3A39;
border-bottom: 1px #666 dashed;
text-decoration: none;
}
.photo-bx {
width: calc(50% - 20px);
margin: 0 10px 20px 10px;
float: left;
}
.photo-bx:nth-child(odd) {
clear: both;
}
.photo-bx .pic {
width: 100%;
}
.photo-bx .pic img {
width: 100%;
height: auto;
}
.photo-bx .text {
width: 100%;
padding: 10px 0 0 0;
font-size: 0.9em;
line-height: 1.4em;
text-align: center;
}
.main-content ul.qk-link-bx {
width: 100%;
padding: 0;
margin: 20px 0;
list-style: none;
display: flex;
justify-content: center;
align-items: stretch;
}
.main-content ul.qk-link-bx li {
width: 25%;
padding: 0;
margin: 0;
}
.main-content ul.qk-link-bx li .icon-bx {
width: 85px;
height: 85px;
margin: 0 auto;
border-radius: 100%;
border: 2px #485157 solid;
display: flex;
justify-content: center;
align-items: center;
}
.main-content ul.qk-link-bx li .text-1 {
clear: both;
width: 90%;
margin: 5px auto;
color: #485157;
letter-spacing: 0.1em;
font-weight: 500;
line-height: 1em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 {
clear: both;
width: 90%;
margin: 0 auto;
color: #000;
font-size: 0.8em;
letter-spacing: 0.1em;
line-height: 1.4em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 a {
color: #485157;
text-decoration: none;
}
.main-content ul.qk-link-bx li .text-2 a:hover {
text-decoration: underline;
}
/******** content #news content ********/
.main-content .breadcrumb-bx {
width: 100%;
margin: 0 0 30px 0;
color: #231815;
font-size: 0.9em;
letter-spacing: 0.1em;
}
.main-content .breadcrumb-bx a {
color: #231815;
text-decoration: none;
}
.main-content .breadcrumb-bx a:hover {
text-decoration: underline;
}
.main-content .news-content-bx {
width: 100%;
padding: 0 30px 30px 50px;
word-break: break-all;
box-sizing: border-box;
}
.main-content .news-content-bx .title {
width: 100%;
margin: 0 0 20px 0;
color: #231815;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content {
width: 100%;
color: #231815;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content a {
color: #231815;
text-decoration: none;
}
.main-content .news-content-bx .content a:hover {
text-decoration: underline;
}
ul.bignum {
padding: 0 0 0 30px;
margin: 0;
box-sizing: border-box;
list-style-type: cjk-ideographic;
display: block;
}
ul.bignum li {
padding: 0;
margin: 0;
}
.main-content .gotop {
clear: both;
width: 60px;
margin: 30px 0 0 0;
color: #332c2a;
float: right;
cursor: pointer;
}
/******** content #member intro ********/
.main-content .page-menu {
width: 100%;
margin: 0 0 30px 0;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .page-menu .icon {
width: 50px;
}
.main-content .page-menu .menu-tabs-bx {
width: calc(100% - 50px);
}
.main-content .page-menu .menu-tabs-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .page-menu .menu-tabs-bx ul li {
padding: 0;
margin: 0;
line-height: 1em;
text-align: center;
}
.main-content .page-menu .menu-tabs-bx ul li a {
width: 115px;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .page-menu .menu-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .page-menu .menu-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .mem-list-bx {
clear: both;
width: 90%;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .mem-list-bx .mem-bx {
width: calc(100% / 3 - 20px);
margin: 10px 10px 60px 10px;
position: relative;
}
.main-content .mem-list-bx .mem-bx .pic {
width: 145px;
height: 145px;
margin: 0 auto;
border-radius: 100%;
border: 5px #fff solid;
background-color: #efefef;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
position: absolute;
top: 0;
left: calc(50% - 72px);
z-index: 99;
}
.main-content .mem-list-bx .mem-bx .pic img {
width: auto;
height: 100%;
}
.main-content .mem-list-bx .mem-bx .box {
width: 100%;
height: 100%;
padding: 140px 20px 0 20px;
margin: 30px 0 0 0;
border: 1px #e9e9e7 solid;
background-color: #fff;
box-sizing: border-box;
z-index: 9;
}
.main-content .mem-list-bx .mem-bx .box .name {
width: 100%;
color: #485157;
font-size: 0.9em;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-1 {
width: 100%;
color: #0081a3;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-2 {
width: 100%;
color: #342e2c;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .job {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .contact {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
.main-content .title-line {
clear: both;
width: 90%;
margin: 30px auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .title-line .title-1 {
width: 80px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-1 {
width: calc(100% - 80px);
}
.main-content .title-line .title-2 {
width: 220px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-2 {
width: calc(100% - 220px);
}
.main-content .title-line .title-3 {
width: 120px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-3 {
width: calc(100% - 120px);
}
.main-content .title-line .line-1 hr, .line-2 hr, .line-3 hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
/******** content #meeting list ********/
.main-content .mt-list-bx {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .mt-list-bx .title-bx {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .mt-list-bx .title-bx .icon {
width: 35px;
}
.main-content .mt-list-bx .title-bx .text {
width: 160px;
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .title-bx .year {
width: calc(100% - 195px);
color: #798388;
font-size: 1em;
text-align: right;
}
.main-content .mt-list-bx .title-bx .year a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .title-bx .year a.sel {
text-decoration: underline;
}
.main-content .mt-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .mt-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .mt-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
display: flex;
justify-content: flex-start;
align-items: baseline;
}
.main-content .mt-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .mt-list-bx .list-bx .column .col-1 .text {
width: calc(100% - 110px);
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .mt-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #regulation list ********/
.main-content .rg-list-bx {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .rg-list-bx .title-bx {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .title-bx .icon {
width: 50px;
}
.main-content .rg-list-bx .title-bx .text {
width: calc(100% - 50px);
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .rg-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .rg-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
display: flex;
justify-content: flex-start;
align-items: baseline;
}
.main-content .rg-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .rg-list-bx .list-bx .column .col-1 .text {
width: calc(100% - 110px);
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .rg-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .rg-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #higher project intro ********/
.main-content .higher-pj-content {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .higher-pj-content .pic {
width: 90%;
margin: 0 auto 30px auto;
color: #3f3b3a;
font-size: 0.9em;
letter-spacing: 0.1em;
text-align: center;
}
.main-content .higher-pj-content .pic img {
width: 100%;
height: auto;
}
.main-content .higher-pj-content .text {
clear: both;
width: 100%;
color: #3f3b3a;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .higher-pj-content .text font.title {
font-size: 1.1em;
font-weight: 600;
}
/******** content #higher project framework ********/
.main-content .higher-fw-content {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
}
.main-content .higher-fw-content .content-full {
width: 100%;
margin: 0 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.main-content .higher-fw-content .content-img-full {
width: 100%;
text-align: center;
}
.main-content .higher-fw-content .content-img-full img {
max-width: 100%;
height: auto;
}
.main-content .higher-fw-content .content-img-text-full {
width: 100%;
margin: 15px 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
text-align: center;
letter-spacing: 0.1em;
}
/******** content #higher project result ********/
.main-content .higher-rs-content {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .higher-rs-content .higher-rs-ebook-bx {
width: calc(100% / 3 - 30px);
margin: 15px;
background-color: #fff;
-moz-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
-webkit-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-sizing: border-box;
position: relative;
}
.main-content .higher-rs-content .higher-rs-ebook-bx a {
width: 100%;
padding: 30px 0;
box-sizing: border-box;
text-decoration: none;
display: block;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title {
width: 100%;
margin: 0 0 30px 0;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title span {
padding: 5px 15px;
color: #414141;
font-size: 0.9em;
background-color: #ffd900;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic {
clear: both;
width: 100%;
text-align: center;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic img.ebook {
width: 80%;
height: auto;
}
.main-content .higher-rs-content .over-mask {
width: 100%;
height: 100%;
padding: 0 0 80px 0;
color: #fff;
font-size: 1.2em;
font-weight: 500;
background-color: rgba(0,0,0,0.4);
box-sizing: border-box;
display: none;
justify-content: center;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.main-content #ebook-content {
width: 1200px;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: 100px;
left: 0;
z-index: 9999;
display: none;
}
.main-content #ebook-content .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #ebook-content .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #ebook-content .content-bx {
width: 100%;
padding: 30px 50px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .source-date {
font-size: 0.8em;
}
.main-content #ebook-content .content-bx .source-date span {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #ebook-content .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #ebook-content .content-bx .content {
width: 100%;
padding: 0 30px;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .content img {
width: 100%;
height: auto;
}
.main-content #ebook-content .content-bx .content iframe.iframe-ebook {
width: 100%;
height: 800px;
border: 0;
}
/******** content #center strategic ********/
.main-content .center-strategic-content {
width: 100%;
padding: 30px 30px 30px 50px;
color: #3f3b3a;
font-size: 0.9em;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content .center-strategic-content .text-1 {
width: 100%;
margin: 0 0 15px 0;
font-size: 1.2em;
font-weight: 600;
}
.main-content .center-strategic-content img {
max-width: 100%;
height: auto;
}
/******** error 404 ********/
.error-bx {
clear: both;
width: 100%;
padding: 50px 0;
background-color: #ffd900;
display: flex;
justify-content: center;
align-items: center;
}
.error-bx .pic {
width: 600px;
}
.error-bx .pic img {
width: 100%;
height: auto;
}
.error-bx .text {
width: 600px;
padding: 0 0 0 40px;
box-sizing: border-box;
}
.error-bx .text font.text1 {
color: #3f3b3a;
font-size: 3.4em;
line-height: 1em;
font-weight: 600;
}
.error-bx .text font.text2 {
color: #004256;
font-size: 3.4em;
font-weight: 200;
}
.error-bx .text font.text3 {
color: #004256;
font-size: 1.6em;
line-height: 1em;
font-weight: 200;
}
.error-bx .text font.text4 {
color: #004256;
font-size: 2.4em;
font-weight: 500;
}
.error-bx .text .goback-bt {
width: 440px;
height: 39px;
margin: 30px 0 0 0;
color: #fff;
font-size: 0.9em;
font-weight: 600;
text-align: center;
border-radius: 6px;
background: url(/assets/error_bt_bg.png);
background-repeat: repeat-x;
overflow: hidden;
}
.error-bx .text .goback-bt a {
width: 100%;
padding: 8px 0 0 0;
color: #fff;
text-decoration: none;
box-sizing: border-box;
display: block;
}
.footer-error {
width: 1400px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.footer-error .column-lt {
width: calc(100% - 120px);
padding: 30px 0 50px 0;
color: #545e64;
font-size: 0.8em;
line-height: 2em;
letter-spacing: 0.1em;
}
.footer-error .column-rt {
width: 120px;
padding: 30px 0 0 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
/******** site map ********/
.sitemap-content {
width: 100%;
padding: 90px 60px;
box-sizing: border-box;
}
.sitemap-content .title {
width: 100%;
margin: 0 0 40px 0;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx {
width: 100%;
padding: 0 0 0 100px;
margin: 0;
list-style: none;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.sitemap-content .column-bx .column {
width: calc(100% / 3);
}
.sitemap-content .column-bx .column ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li {
padding: 0;
margin: 0 0 30px 0;
font-size: 1em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li a {
color: #000;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li a:hover {
text-decoration: underline;
}
.sitemap-content .column-bx .column ul li ul.snd {
width: 100%;
padding: 0;
margin: 10px 0 0 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li ul.snd li {
padding: 0;
margin: 0;
color: #545e64;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li ul.snd li a {
color: #545e64;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li ul.snd li a:hover {
text-decoration: underline;
}
/******** site map ********/
.main-content .google-map {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
}
.main-content .google-map iframe {
width: 100%;
height: 600px;
}
/******** footer ********/
footer {
clear: both;
width: 100%;
background-image: url("../images/footer_bg_pic.jpg");
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(79,90,96,1);
overflow: hidden;
position: relative;
}
footer .footer-content {
width: 100%;
padding: 30px 0;
margin: 0 auto;
color: #fff;
font-size: 0.8em;
letter-spacing: 0.1em;
background-color: rgba(79,90,96,0.9);
display: flex;
justify-content: center;
align-items: stretch;
}
footer .footer-content .left-col {
width: 1050px;
}
footer .footer-content .left-col .address {
width: 100%;
}
footer .footer-content .left-col .footer-menu {
width: 100%;
margin: 40px 0 0 0;
}
footer .footer-content .left-col .footer-menu a {
color: #fff;
text-decoration: none;
}
footer .footer-content .left-col .footer-menu a:hover {
text-decoration: underline;
}
footer .footer-content .right-col {
width: 350px;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
footer .footer-content .right-col .footer-menu {
width: 300px;
}
footer .footer-content .right-col .footer-menu ul {
width: 100%;
padding: 30px 0 0 25px;
margin: 0;
list-style: disc;
display: block;
box-sizing: border-box;
}
footer .footer-content .right-col .footer-menu ul li {
padding: 0 0 0 10px;
margin: 0 0 2px 0;
}
footer .footer-content .right-col .footer-menu ul li a {
color: #fff;
text-decoration: none;
}
footer .footer-content .right-col .footer-menu ul li a:hover {
text-decoration: underline;
}
footer .footer-content .right-col .map-icon {
width: 50px;
padding: 0 0 10px 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
/******** header for pc ********/ header#mo {
display: none;
}
header#pc {
width: 100%;
}
header#pc .header-top-bar {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #5d686e;
}
header#pc .header-top-bar .title-bx {
width: 260px;
}
header#pc .header-top-bar .title-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
}
header#pc .header-top-bar .title-bx ul li {
padding: 0;
margin: 0 10px;
}
header#pc .header-top-bar .title-bx ul li a {
color: #fff;
font-size: 0.8em;
letter-spacing: 0.2em;
text-decoration: none;
}
header#pc .header-top-bar .title-bx ul li a:hover {
color: #fdd900;
}
header#pc .header-top-bar .search-bx {
width: 270px;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #fff;
}
header#pc .header-top-bar .search-bx input[type=search] {
width: calc(90% - 40px);
padding: 10px;
color: #000;
font: 1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial;
box-sizing: border-box;
border: 0;
background-color: #fff;
}
header#pc .header-top-bar .search-bx input[type=button] {
width: 40px;
height: 31px;
box-sizing: border-box;
background-color: #fff;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
border-top: 0;
border-left: 0;
border-bottom: 0;
border-right: 2px #a1a5a6 solid;
cursor: pointer;
}
header#pc .title-nav-bx {
width: 96%;
margin: 20px auto 0 auto;
}
header#pc .title-nav-bx .sub-title-bx {
width: 330px;
padding: 0 0 15px 0;
float: left;
}
header#pc .title-nav-bx nav#pc {
clear: both;
width: 100%;
margin: 0 0 5px 0;
}
header#pc .title-nav-bx nav#pc ul {
padding: 0;
margin: 35px 0 0 0;
list-style: none;
display: flex;
justify-content: center;
align-items: flex-end;
}
header#pc .title-nav-bx nav#pc ul li {
padding: 0;
margin: 0 0 0 50px;
line-height: 1.4em;
text-align: center;
position: relative;
}
header#pc .title-nav-bx nav#pc ul li a {
color: #676664;
text-decoration: none;
cursor: pointer;
}
header#pc .title-nav-bx nav#pc ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
header#pc .title-nav-bx nav#pc ul li a font.en {
font-size: 0.8em;
}
header#pc .title-nav-bx nav#pc ul li a .icon-home {
width: 100%;
height: 23px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_home.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-home {
background-image: url("../images/nav_icon_home_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-home.sel {
background-image: url("../images/nav_icon_home_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-about {
width: 100%;
height: 27px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_about.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-about {
background-image: url("../images/nav_icon_about_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-about.sel {
background-image: url("../images/nav_icon_about_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-infor {
width: 100%;
height: 24px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_infor.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-infor {
background-image: url("../images/nav_icon_infor_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-infor.sel {
background-image: url("../images/nav_icon_infor_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-regu {
width: 100%;
height: 28px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_regulation.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-regu {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-regu.sel {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-dw {
width: 100%;
height: 26px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_download.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-dw {
background-image: url("../images/nav_icon_download_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-dw.sel {
background-image: url("../images/nav_icon_download_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-manage {
width: 100%;
height: 23px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_mag_sys.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-manage {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-manage.sel {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#pc .title-nav-bx nav#pc ul li ul.popup {
width: 170px;
padding: 0;
margin: 0;
list-style: none;
display: block;
position: absolute;
top: 83px;
left: 0;
z-index: 999;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li {
width: 100%;
padding: 0;
margin: 0;
text-align: left;
letter-spacing: 0.1em;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a {
width: 100%;
padding: 10px 20px;
color: #fff;
text-decoration: none;
background-color: rgba(79,89,95,1);
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a:hover {
background-color: rgba(79,89,95,1)
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a .checked {
width: 25px;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a .text {
width: calc(100% - 25px);
}
/******** banner ********/
.banner-text-full {
width: 100%;
position: relative;
}
.banner-text-full .banner-bx {
width: 100%;
height: 26vw;
overflow: hidden;
position: relative;
}
.banner-text-full .banner-bx ul li a {
text-decoration: none;
display: block;
}
.banner-text-full .banner-bx ul li .pic {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.banner-text-full .banner-bx ul li .pic img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .bg-sq {
width: 41vw;
text-align: right;
position: absolute;
top: -3.1vw;
right: 0;
z-index: 10;
}
.banner-text-full .banner-bx ul li .bg-sq img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .text-bx {
display: none;
}
/******** section ********/
section {
width: 100%;
margin: 0 auto;
}
/******** aside ********/
aside {
width: 250px;
padding: 0;
margin: 0;
float: right;
}
aside .menu-bx {
width: 100%;
height: 730px;
padding: 25px 0 0 0;
margin: 0;
background-color: #fdd900;
}
aside .menu-bx .aside-icon {
display: none;
}
aside .menu-bx dl#panel {
width: 100%;
padding: 0;
margin: 0;
border-top: 1px #fff solid;
}
aside .menu-bx dl#panel dt {
width: 100%;
padding: 20px 0 20px 10px;
margin: 0;
font-size: 1.1em;
letter-spacing: 0.1em;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px #fff solid;
box-sizing: border-box;
cursor: pointer;
}
aside .menu-bx dl#panel dt:hover {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt.sel {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt .icon {
width: 60px
}
aside .menu-bx dl#panel dt .text {
width: calc(100% - 60px);
color: #363531;
font-size: 1.1em;
line-height: 1em;
}
aside .menu-bx dl#panel dt .text font.en {
font-size: 0.6em;
line-height: 1em;
letter-spacing: normal;
}
aside .menu-bx dl#panel dd {
width: 100%;
padding: 0;
margin: 0;
border-bottom: 1px #fff solid;
box-sizing: border-box;
display: none;
}
aside .menu-bx dl#panel dd ul {
width: calc(100% - 30px);
padding: 0;
margin: 0;
list-style: none;
display: block;
float: right;
}
aside .menu-bx dl#panel dd ul li {
width: 100%;
padding: 0;
margin: 0;
}
aside .menu-bx dl#panel dd ul li a {
width: 100%;
padding: 10px;
margin: 0;
color: #fff;
font-size: 0.9em;
text-decoration: none;
border-bottom: 1px #fff solid;
background-color: #6e756b;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
aside .menu-bx dl#panel dd ul li a:hover {
background-color: #50595c;
}
aside .menu-bx dl#panel dd ul li a .checked {
width: 30px;
}
aside .menu-bx dl#panel dd ul li a .text {
width: calc(100% - 30px);
}
aside .menu-bx dl#panel dd ul li:last-child a {
border: 0;
}
aside .data-num-bx {
width: 100%;
padding: 20px 20px 0 20px;
color: #585757;
font-size: 0.8em;
letter-spacing: 0.1em;
box-sizing: border-box;
}
aside .data-num-bx font.num {
font-size: 1.6em;
font-weight: 500;
}
/******** content #hp ********/
.main-content .hp-menu {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .hp-menu .icon {
width: 50px;
}
.main-content .hp-menu .news-tabs-bx {
width: calc(100% - 50px);
}
.main-content .hp-menu .news-tabs-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .hp-menu .news-tabs-bx ul li {
padding: 0;
margin: 0;
line-height: 1em;
text-align: center;
}
.main-content .hp-menu .news-tabs-bx ul li a {
width: 115px;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .hp-menu .news-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .hp-menu .news-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .news-list-bx {
width: 100%;
padding: 30px 20px;
box-sizing: border-box;
}
.main-content .news-list-bx .list-bx {
clear: both;
width: 100%;
padding: 0 0 15px 0;
}
.main-content .news-list-bx .list-bx .date {
width: 100px;
padding: 5px 0;
margin: 0 20px 0 0;
color: #485157;
font-size: 0.8em;
font-weight: 500;
line-height: 1em;
text-align: center;
background-color: #ffd900;
float: left;
}
.main-content .news-list-bx .list-bx .title {
width: calc(100% - 120px);
font-size: 0.9em;
letter-spacing: 0.1em;
float: left;
}
.main-content .news-list-bx .list-bx .title a {
color: #485157;
text-decoration: none;
}
.main-content .news-list-bx .list-bx .title a:hover {
text-decoration: underline;
}
.main-content .news-list-bx .more {
clear: both;
width: 100%;
padding: 20px 20px 0 0;
box-sizing: border-box;
text-align: right;
}
.main-content .news-list-bx .more a {
color: #485157;
font-size: 0.9em;
text-decoration: none;
}
.main-content .news-list-bx .more a:hover {
text-decoration: underline;
}
.main-content .hp-title {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
position: relative;
}
.main-content .hp-title .icon {
width: 50px;
}
.main-content .hp-title .title {
width: calc(100% - 50px);
padding: 10px 0 0 0;
color: #545e64;
font-size: 1.1em;
line-height: 1em;
letter-spacing: 0.1em;
}
.main-content .hp-title .more {
width: 40px;
font-size: 0.9em;
text-align: right;
position: absolute;
top: 20px;
right: 10px;
}
.main-content .hp-title .more a {
color: #414141;
text-decoration: none;
}
.main-content .hp-title .more a:hover {
text-decoration: underline;
}
.main-content ul#spot-list-bx {
clear: both;
width: 100%;
padding: 0;
margin: 0 0 30px 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content ul#spot-list-bx li {
width: calc(100% / 3 - 20px);
margin: 20px 10px;
background-color: #fff;
position: relative;
}
.main-content ul#spot-list-bx li:hover {
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
}
.main-content ul#spot-list-bx li a {
width: 100%;
text-decoration: none;
display: block;
}
.main-content ul#spot-list-bx li .pic {
width: 100%;
height: 14vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.main-content ul#spot-list-bx li .pic img.v {
width: 100%;
height: auto;
}
.main-content ul#spot-list-bx li .pic img.h {
width: auto;
height: 100%;
}
.main-content ul#spot-list-bx li .text {
width: 100%;
padding: 15px;
margin: 0 0 30px 0;
line-height: 1.2em;
box-sizing: border-box;
background-color: #fff;
}
.main-content ul#spot-list-bx li .text font.sub-date {
padding: 2px 10px;
color: #555e60;
font-size: 0.8em;
background-color: #ffd900;
}
.main-content ul#spot-list-bx li .text .title {
clear: both;
width: 100%;
margin: 15px 0 10px 0;
color: #555e60;
font-size: 1.1em;
letter-spacing: 0.1em;
font-weight: 500;
}
.main-content ul#spot-list-bx li .text .intro {
width: 100%;
color: #555e60;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content ul#spot-list-bx li .more {
clear: both;
width: calc(100% - 15px);
margin: 10px 0 0 0;
color: #555e60;
font-size: 0.8em;
text-align: right;
position: absolute;
bottom: 15px;
left: 0;
}
.main-content #spot-news {
width: 110%;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: 100px;
left: 10px;
z-index: 9999;
display: none;
}
.main-content #spot-news .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #spot-news .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #spot-news .content-bx {
width: 100%;
padding: 30px 50px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .source-date {
font-size: 0.8em;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content #spot-news .content-bx .source-date .date {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #spot-news .content-bx .source-date .source {
margin: 0 0 0 15px;
}
.main-content #spot-news .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #spot-news .content-bx .content {
width: 100%;
padding: 0 30px;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .content a {
color: #3E3A39;
border-bottom: 1px #666 dashed;
text-decoration: none;
}
.photo-bx {
width: calc(50% - 20px);
margin: 0 10px 20px 10px;
float: left;
}
.photo-bx:nth-child(odd) {
clear: both;
}
.photo-bx .pic {
width: 100%;
}
.photo-bx .pic img {
width: 100%;
height: auto;
}
.photo-bx .text {
width: 100%;
padding: 10px 0 0 0;
font-size: 0.9em;
line-height: 1.4em;
text-align: center;
}
.main-content ul.qk-link-bx {
width: 100%;
padding: 0;
margin: 20px 0;
list-style: none;
display: flex;
justify-content: center;
align-items: stretch;
}
.main-content ul.qk-link-bx li {
width: 25%;
padding: 0;
margin: 0;
}
.main-content ul.qk-link-bx li .icon-bx {
width: 85px;
height: 85px;
margin: 0 auto;
border-radius: 100%;
border: 2px #485157 solid;
display: flex;
justify-content: center;
align-items: center;
}
.main-content ul.qk-link-bx li .text-1 {
clear: both;
width: 90%;
margin: 5px auto;
color: #485157;
letter-spacing: 0.1em;
font-weight: 500;
line-height: 1em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 {
clear: both;
width: 90%;
margin: 0 auto;
color: #000;
font-size: 0.8em;
letter-spacing: 0.1em;
line-height: 1.4em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 a {
color: #485157;
text-decoration: none;
}
.main-content ul.qk-link-bx li .text-2 a:hover {
text-decoration: underline;
}
/******** content #news content ********/
.main-content .breadcrumb-bx {
width: 100%;
margin: 0 0 30px 0;
color: #231815;
font-size: 0.9em;
letter-spacing: 0.1em;
}
.main-content .breadcrumb-bx a {
color: #231815;
text-decoration: none;
}
.main-content .breadcrumb-bx a:hover {
text-decoration: underline;
}
.main-content .news-content-bx {
width: 100%;
padding: 30px 30px 30px 50px;
word-break: break-all;
box-sizing: border-box;
}
.main-content .news-content-bx .title {
width: 100%;
margin: 0 0 20px 0;
color: #231815;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content {
width: 100%;
color: #231815;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content a {
color: #231815;
text-decoration: none;
}
.main-content .news-content-bx .content a:hover {
text-decoration: underline;
}
ul.bignum {
padding: 0 0 0 30px;
margin: 0;
box-sizing: border-box;
list-style-type: cjk-ideographic;
display: block;
}
ul.bignum li {
padding: 0;
margin: 0;
}
.main-content .gotop {
clear: both;
width: 60px;
margin: 30px 0 0 0;
color: #332c2a;
float: right;
cursor: pointer;
}
/******** content #member intro ********/
.main-content .page-menu {
width: 100%;
margin: 0 0 30px 0;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .page-menu .icon {
width: 50px;
}
.main-content .page-menu .menu-tabs-bx {
width: calc(100% - 50px);
}
.main-content .page-menu .menu-tabs-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .page-menu .menu-tabs-bx ul li {
padding: 0;
margin: 0;
line-height: 1em;
text-align: center;
}
.main-content .page-menu .menu-tabs-bx ul li a {
width: 115px;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .page-menu .menu-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .page-menu .menu-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .mem-list-bx {
clear: both;
width: 90%;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .mem-list-bx .mem-bx {
width: calc(100% / 3 - 20px);
margin: 10px 10px 60px 10px;
position: relative;
}
.main-content .mem-list-bx .mem-bx .pic {
width: 145px;
height: 145px;
margin: 0 auto;
border-radius: 100%;
border: 5px #fff solid;
background-color: #efefef;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
position: absolute;
top: 0;
left: calc(50% - 72px);
z-index: 99;
}
.main-content .mem-list-bx .mem-bx .pic img {
width: auto;
height: 100%;
}
.main-content .mem-list-bx .mem-bx .box {
width: 100%;
height: 100%;
padding: 140px 20px 0 20px;
margin: 30px 0 0 0;
border: 1px #e9e9e7 solid;
background-color: #fff;
box-sizing: border-box;
z-index: 9;
}
.main-content .mem-list-bx .mem-bx .box .name {
width: 100%;
color: #485157;
font-size: 0.9em;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-1 {
width: 100%;
color: #0081a3;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-2 {
width: 100%;
color: #342e2c;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .job {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .contact {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
.main-content .title-line {
clear: both;
width: 90%;
margin: 30px auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .title-line .title-1 {
width: 80px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-1 {
width: calc(100% - 80px);
}
.main-content .title-line .title-2 {
width: 220px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-2 {
width: calc(100% - 220px);
}
.main-content .title-line .line-1 hr, .line-2 hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
/******** content #meeting list ********/
.main-content .mt-list-bx {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .mt-list-bx .title-bx {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .mt-list-bx .title-bx .icon {
width: 35px;
}
.main-content .mt-list-bx .title-bx .text {
width: 160px;
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .title-bx .year {
width: calc(100% - 195px);
color: #798388;
font-size: 1em;
text-align: right;
}
.main-content .mt-list-bx .title-bx .year a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .title-bx .year a.sel {
text-decoration: underline;
}
.main-content .mt-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .mt-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .mt-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
display: flex;
justify-content: flex-start;
align-items: baseline;
}
.main-content .mt-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .mt-list-bx .list-bx .column .col-1 .text {
width: calc(100% - 110px);
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .mt-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #regulation list ********/
.main-content .rg-list-bx {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .rg-list-bx .title-bx {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .title-bx .icon {
width: 50px;
}
.main-content .rg-list-bx .title-bx .text {
width: calc(100% - 50px);
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .rg-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .rg-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
display: flex;
justify-content: flex-start;
align-items: baseline;
}
.main-content .rg-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .rg-list-bx .list-bx .column .col-1 .text {
width: calc(100% - 110px);
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .rg-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .rg-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #higher project intro ********/
.main-content .higher-pj-content {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .higher-pj-content .pic {
width: 90%;
margin: 0 auto 30px auto;
color: #3f3b3a;
font-size: 0.9em;
letter-spacing: 0.1em;
text-align: center;
}
.main-content .higher-pj-content .pic img {
width: 100%;
height: auto;
}
.main-content .higher-pj-content .text {
clear: both;
width: 100%;
color: #3f3b3a;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .higher-pj-content .text font.title {
font-size: 1.1em;
font-weight: 600;
}
/******** content #higher project framework ********/
.main-content .higher-fw-content {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
}
.main-content .higher-fw-content .content-full {
width: 100%;
margin: 0 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.main-content .higher-fw-content .content-img-full {
width: 100%;
text-align: center;
}
.main-content .higher-fw-content .content-img-full img {
max-width: 100%;
height: auto;
}
.main-content .higher-fw-content .content-img-text-full {
width: 100%;
margin: 15px 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
text-align: center;
letter-spacing: 0.1em;
}
/******** content #higher project result ********/
.main-content .higher-rs-content {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .higher-rs-content .higher-rs-ebook-bx {
width: calc(100% / 3 - 30px);
margin: 15px;
background-color: #fff;
-moz-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
-webkit-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-sizing: border-box;
position: relative;
}
.main-content .higher-rs-content .higher-rs-ebook-bx a {
width: 100%;
padding: 30px 0;
box-sizing: border-box;
text-decoration: none;
display: block;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title {
width: 100%;
margin: 0 0 30px 0;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title span {
padding: 5px 15px;
color: #414141;
font-size: 0.8em;
background-color: #ffd900;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic {
clear: both;
width: 100%;
text-align: center;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic img.ebook {
width: 80%;
height: auto;
}
.main-content .higher-rs-content .over-mask {
width: 100%;
height: 100%;
padding: 0 0 80px 0;
color: #fff;
font-size: 1.2em;
font-weight: 500;
background-color: rgba(0,0,0,0.4);
box-sizing: border-box;
display: none;
justify-content: center;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.main-content #ebook-content {
width: 110%;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: 100px;
left: 10px;
z-index: 9999;
display: none;
}
.main-content #ebook-content .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #ebook-content .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #ebook-content .content-bx {
width: 100%;
padding: 30px 50px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .source-date {
font-size: 0.8em;
}
.main-content #ebook-content .content-bx .source-date span {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #ebook-content .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #ebook-content .content-bx .content {
width: 100%;
padding: 0 30px;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .content img {
width: 100%;
height: auto;
}
.main-content #ebook-content .content-bx .content iframe.iframe-ebook {
width: 100%;
height: 800px;
border: 0;
}
/******** content #center strategic ********/
.main-content .center-strategic-content {
width: 100%;
padding: 30px 30px 30px 50px;
color: #3f3b3a;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content .center-strategic-content .text-1 {
width: 100%;
margin: 0 0 15px 0;
font-size: 1.2em;
font-weight: 600;
}
.main-content .center-strategic-content img {
max-width: 100%;
height: auto;
}
/******** error 404 ********/
.error-bx {
clear: both;
width: 100%;
padding: 50px 0;
background-color: #ffd900;
display: flex;
justify-content: center;
align-items: center;
}
.error-bx .pic {
width: 45%;
}
.error-bx .pic img {
width: 100%;
height: auto;
}
.error-bx .text {
width: 45%;
padding: 0 0 0 40px;
box-sizing: border-box;
}
.error-bx .text font.text1 {
color: #3f3b3a;
font-size: 3.4em;
line-height: 1em;
font-weight: 600;
}
.error-bx .text font.text2 {
color: #004256;
font-size: 3.4em;
font-weight: 200;
}
.error-bx .text font.text3 {
color: #004256;
font-size: 1.6em;
line-height: 1em;
font-weight: 200;
}
.error-bx .text font.text4 {
color: #004256;
font-size: 2.4em;
font-weight: 500;
}
.error-bx .text .goback-bt {
width: 400px;
height: 39px;
margin: 30px 0 0 0;
color: #fff;
font-size: 0.9em;
font-weight: 600;
text-align: center;
border-radius: 6px;
background: url(/assets/error_bt_bg.png);
background-repeat: repeat-x;
overflow: hidden;
}
.error-bx .text .goback-bt a {
width: 100%;
padding: 8px 0 0 0;
color: #fff;
text-decoration: none;
box-sizing: border-box;
display: block;
}
.footer-error {
width: 96%;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.footer-error .column-lt {
width: calc(100% - 120px);
padding: 30px 0 50px 0;
color: #545e64;
font-size: 0.8em;
line-height: 2em;
letter-spacing: 0.1em;
}
.footer-error .column-rt {
width: 120px;
padding: 30px 0 0 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
/******** site map ********/
.sitemap-content {
width: 100%;
padding: 90px 60px;
box-sizing: border-box;
}
.sitemap-content .title {
width: 100%;
margin: 0 0 40px 0;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx {
width: 100%;
padding: 0 0 0 100px;
margin: 0;
list-style: none;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.sitemap-content .column-bx .column {
width: calc(100% / 3);
}
.sitemap-content .column-bx .column ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li {
padding: 0;
margin: 0 0 30px 0;
font-size: 1em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li a {
color: #000;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li a:hover {
text-decoration: underline;
}
.sitemap-content .column-bx .column ul li ul.snd {
width: 100%;
padding: 0;
margin: 10px 0 0 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li ul.snd li {
padding: 0;
margin: 0;
color: #545e64;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li ul.snd li a {
color: #545e64;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li ul.snd li a:hover {
text-decoration: underline;
}
/******** site map ********/
.main-content .google-map {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
}
.main-content .google-map iframe {
width: 100%;
height: 600px;
}
/******** footer ********/
footer {
clear: both;
width: 100%;
background-image: url("../images/footer_bg_pic.jpg");
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(79,90,96,1);
overflow: hidden;
position: relative;
}
footer .footer-content {
width: 100%;
padding: 30px 0;
margin: 0 auto;
color: #fff;
font-size: 0.8em;
letter-spacing: 0.1em;
background-color: rgba(79,90,96,0.9);
display: flex;
justify-content: center;
align-items: stretch;
}
footer .footer-content .left-col {
width: calc(96% - 250px);
}
footer .footer-content .left-col .address {
width: 100%;
}
footer .footer-content .left-col .footer-menu {
width: 100%;
margin: 40px 0 0 0;
}
footer .footer-content .left-col .footer-menu a {
color: #fff;
text-decoration: none;
}
footer .footer-content .left-col .footer-menu a:hover {
text-decoration: underline;
}
footer .footer-content .right-col {
width: 250px;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
footer .footer-content .right-col .footer-menu {
width: 250px;
}
footer .footer-content .right-col .footer-menu ul {
width: 100%;
padding: 30px 0 0 25px;
margin: 0;
list-style: disc;
display: block;
box-sizing: border-box;
}
footer .footer-content .right-col .footer-menu ul li {
padding: 0 0 0 10px;
margin: 0 0 2px 0;
}
footer .footer-content .right-col .footer-menu ul li a {
color: #fff;
text-decoration: none;
}
footer .footer-content .right-col .footer-menu ul li a:hover {
text-decoration: underline;
}
footer .footer-content .right-col .map-icon {
width: 50px;
padding: 0 0 10px 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/******** header for pc ********/ header#mo {
display: none;
}
header#pc {
width: 100%;
}
header#pc .header-top-bar {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #5d686e;
}
header#pc .header-top-bar .title-bx {
width: 260px;
}
header#pc .header-top-bar .title-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
}
header#pc .header-top-bar .title-bx ul li {
padding: 0;
margin: 0 10px;
}
header#pc .header-top-bar .title-bx ul li a {
color: #fff;
font-size: 0.8em;
letter-spacing: 0.2em;
text-decoration: none;
}
header#pc .header-top-bar .title-bx ul li a:hover {
color: #fdd900;
}
header#pc .header-top-bar .search-bx {
width: 270px;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #fff;
}
header#pc .header-top-bar .search-bx input[type=search] {
width: calc(90% - 40px);
padding: 10px;
color: #000;
font: 1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial;
box-sizing: border-box;
border: 0;
background-color: #fff;
}
header#pc .header-top-bar .search-bx input[type=button] {
width: 40px;
height: 31px;
box-sizing: border-box;
background-color: #fff;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
border-top: 0;
border-left: 0;
border-bottom: 0;
border-right: 2px #a1a5a6 solid;
cursor: pointer;
}
header#pc .title-nav-bx {
width: 96%;
margin: 20px auto 0 auto;
}
header#pc .title-nav-bx .sub-title-bx {
width: 330px;
padding: 0 0 15px 0;
float: left;
}
header#pc .title-nav-bx nav#pc {
clear: both;
width: 100%;
margin: 0 0 5px 0;
}
header#pc .title-nav-bx nav#pc ul {
padding: 0;
margin: 35px 0 0 0;
list-style: none;
display: flex;
justify-content: center;
align-items: flex-end;
}
header#pc .title-nav-bx nav#pc ul li {
padding: 0;
margin: 0 0 0 30px;
line-height: 1.4em;
text-align: center;
position: relative;
}
header#pc .title-nav-bx nav#pc ul li a {
color: #676664;
text-decoration: none;
cursor: pointer;
}
header#pc .title-nav-bx nav#pc ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
header#pc .title-nav-bx nav#pc ul li a font.en {
font-size: 0.8em;
}
header#pc .title-nav-bx nav#pc ul li a .icon-home {
width: 100%;
height: 23px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_home.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-home {
background-image: url("../images/nav_icon_home_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-home.sel {
background-image: url("../images/nav_icon_home_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-about {
width: 100%;
height: 27px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_about.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-about {
background-image: url("../images/nav_icon_about_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-about.sel {
background-image: url("../images/nav_icon_about_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-infor {
width: 100%;
height: 24px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_infor.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-infor {
background-image: url("../images/nav_icon_infor_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-infor.sel {
background-image: url("../images/nav_icon_infor_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-regu {
width: 100%;
height: 28px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_regulation.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-regu {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-regu.sel {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-dw {
width: 100%;
height: 26px;
margin: 0 auto 5px auto;
background-image: url("../images/nav_icon_download.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-dw {
background-image: url("../images/nav_icon_download_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-dw.sel {
background-image: url("../images/nav_icon_download_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-manage {
width: 100%;
height: 23px;
margin: 0 auto 7px auto;
background-image: url("../images/nav_icon_mag_sys.png");
background-position: center;
background-repeat: no-repeat;
display: block;
}
header#pc .title-nav-bx nav#pc ul li:hover > a .icon-manage {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#pc .title-nav-bx nav#pc ul li a .icon-manage.sel {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#pc .title-nav-bx nav#pc ul li ul.popup {
width: 170px;
padding: 0;
margin: 0;
list-style: none;
display: block;
position: absolute;
top: 83px;
left: 0;
z-index: 999;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li {
width: 100%;
padding: 0;
margin: 0;
text-align: left;
letter-spacing: 0.1em;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a {
width: 100%;
padding: 10px 20px;
color: #fff;
text-decoration: none;
background-color: rgba(79,89,95,1);
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a:hover {
background-color: rgba(79,89,95,1)
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a .checked {
width: 25px;
}
header#pc .title-nav-bx nav#pc ul li ul.popup li a .text {
width: calc(100% - 25px);
}
/******** banner ********/
.banner-text-full {
width: 100%;
position: relative;
}
.banner-text-full .banner-bx {
width: 100%;
height: 26vw;
overflow: hidden;
position: relative;
}
.banner-text-full .banner-bx ul li a {
text-decoration: none;
display: block;
}
.banner-text-full .banner-bx ul li .pic {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.banner-text-full .banner-bx ul li .pic img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .bg-sq {
width: 41vw;
text-align: right;
position: absolute;
top: -3.1vw;
right: 0;
z-index: 10;
}
.banner-text-full .banner-bx ul li .bg-sq img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .text-bx {
display: none;
}
/******** section ********/
section {
width: 100%;
margin: 0 auto;
}
/******** aside ********/
aside {
width: 100%;
padding: 0;
margin: 0;
border-bottom: 2px #909a9f solid;
}
aside .menu-bx {
width: 100%;
padding: 25px 0 0 0;
margin: 0;
background-color: #fdd900;
}
aside .menu-bx .aside-icon {
width: 100%;
padding: 0 0 25px 0;
display: flex;
justify-content: center;
align-items: center;
}
aside .menu-bx .aside-icon img {
margin: 0 20px;
}
aside .menu-bx dl#panel {
width: 100%;
padding: 0 0 25px 0;
border-top: 1px #fff solid;
display: none;
}
aside .menu-bx dl#panel dt {
width: 100%;
padding: 20px 0 20px 30px;
margin: 0;
font-size: 1.1em;
letter-spacing: 0.1em;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px #fff solid;
box-sizing: border-box;
cursor: pointer;
}
aside .menu-bx dl#panel dt:hover {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt.sel {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt .icon {
width: 70px
}
aside .menu-bx dl#panel dt .text {
width: calc(100% - 70px);
color: #363531;
font-size: 1.1em;
line-height: 1em;
}
aside .menu-bx dl#panel dt .text font.en {
font-size: 0.6em;
line-height: 1em;
letter-spacing: normal;
}
aside .menu-bx dl#panel dd {
width: 100%;
padding: 0;
margin: 0;
border-bottom: 1px #fff solid;
box-sizing: border-box;
display: none;
}
aside .menu-bx dl#panel dd ul {
width: calc(100% - 30px);
padding: 0;
margin: 0;
list-style: none;
display: block;
float: right;
}
aside .menu-bx dl#panel dd ul li {
width: 100%;
padding: 0;
margin: 0;
}
aside .menu-bx dl#panel dd ul li a {
width: 100%;
padding: 10px;
margin: 0;
color: #fff;
font-size: 0.9em;
text-decoration: none;
border-bottom: 1px #fff solid;
background-color: #6e756b;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
aside .menu-bx dl#panel dd ul li a:hover {
background-color: #50595c;
}
aside .menu-bx dl#panel dd ul li a .checked {
width: 30px;
}
aside .menu-bx dl#panel dd ul li a .text {
width: calc(100% - 30px);
}
aside .menu-bx dl#panel dd ul li:last-child a {
border: 0;
}
aside .data-num-bx {
width: 100%;
padding: 20px;
color: #585757;
font-size: 0.8em;
letter-spacing: 0.1em;
box-sizing: border-box;
}
aside .data-num-bx font.num {
font-size: 1.6em;
font-weight: 500;
}
/******** content #hp ********/
.main-content {
width: 96%;
padding: 30px 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.main-content .hp-menu {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .hp-menu .icon {
width: 50px;
}
.main-content .hp-menu .news-tabs-bx {
width: calc(100% - 50px);
}
.main-content .hp-menu .news-tabs-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .hp-menu .news-tabs-bx ul li {
padding: 0;
margin: 0;
line-height: 1em;
text-align: center;
}
.main-content .hp-menu .news-tabs-bx ul li a {
width: 115px;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .hp-menu .news-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .hp-menu .news-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .news-list-bx {
width: 100%;
padding: 30px 20px;
box-sizing: border-box;
}
.main-content .news-list-bx .list-bx {
clear: both;
width: 100%;
padding: 0 0 15px 0;
}
.main-content .news-list-bx .list-bx .date {
width: 100px;
padding: 5px 0;
margin: 0 20px 0 0;
color: #485157;
font-size: 0.8em;
font-weight: 500;
line-height: 1em;
text-align: center;
background-color: #ffd900;
float: left;
}
.main-content .news-list-bx .list-bx .title {
width: calc(100% - 120px);
font-size: 0.9em;
letter-spacing: 0.1em;
float: left;
}
.main-content .news-list-bx .list-bx .title a {
color: #485157;
text-decoration: none;
}
.main-content .news-list-bx .list-bx .title a:hover {
text-decoration: underline;
}
.main-content .news-list-bx .more {
clear: both;
width: 100%;
padding: 20px 20px 0 0;
box-sizing: border-box;
text-align: right;
}
.main-content .news-list-bx .more a {
color: #485157;
font-size: 0.9em;
text-decoration: none;
}
.main-content .news-list-bx .more a:hover, a:active {
text-decoration: underline;
}
.main-content .hp-title {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
position: relative;
}
.main-content .hp-title .icon {
width: 50px;
}
.main-content .hp-title .title {
width: calc(100% - 50px);
padding: 10px 0 0 0;
color: #545e64;
font-size: 1.1em;
line-height: 1em;
letter-spacing: 0.1em;
}
.main-content .hp-title .more {
width: 40px;
font-size: 0.9em;
text-align: right;
position: absolute;
top: 20px;
right: 10px;
}
.main-content .hp-title .more a {
color: #414141;
text-decoration: none;
}
.main-content .hp-title .more a:active {
text-decoration: underline;
}
.main-content ul#spot-list-bx {
clear: both;
width: 100%;
padding: 0;
margin: 0 0 30px 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content ul#spot-list-bx li {
width: calc(100% / 3 - 20px);
margin: 20px 10px;
background-color: #fff;
position: relative;
}
.main-content ul#spot-list-bx li:hover {
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
}
.main-content ul#spot-list-bx li a {
width: 100%;
text-decoration: none;
display: block;
}
.main-content ul#spot-list-bx li .pic {
width: 100%;
height: 18vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.main-content ul#spot-list-bx li .pic img.v {
width: 100%;
height: auto;
}
.main-content ul#spot-list-bx li .pic img.h {
width: auto;
height: 100%;
}
.main-content ul#spot-list-bx li .text {
width: 100%;
padding: 15px;
margin: 0 0 30px 0;
line-height: 1.2em;
box-sizing: border-box;
background-color: #fff;
}
.main-content ul#spot-list-bx li .text font.sub-date {
padding: 2px 10px;
color: #555e60;
font-size: 0.8em;
background-color: #ffd900;
}
.main-content ul#spot-list-bx li .text .title {
clear: both;
width: 100%;
margin: 15px 0 10px 0;
color: #555e60;
font-size: 1.1em;
letter-spacing: 0.1em;
font-weight: 500;
}
.main-content ul#spot-list-bx li .text .intro {
width: 100%;
color: #555e60;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content ul#spot-list-bx li .more {
clear: both;
width: calc(100% - 15px);
margin: 10px 0 0 0;
color: #555e60;
font-size: 0.8em;
text-align: right;
position: absolute;
bottom: 15px;
left: 0;
}
.main-content #spot-news {
width: 96%;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: -200px;
left: 10px;
z-index: 9999;
display: none;
}
.main-content #spot-news .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #spot-news .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #spot-news .content-bx {
width: 100%;
padding: 30px 50px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .source-date {
font-size: 0.8em;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content #spot-news .content-bx .source-date .date {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #spot-news .content-bx .source-date .source {
margin: 0 0 0 15px;
}
.main-content #spot-news .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #spot-news .content-bx .content {
width: 100%;
padding: 0 30px;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .content a {
color: #3E3A39;
border-bottom: 1px #666 dashed;
text-decoration: none;
}
.photo-bx {
width: calc(50% - 20px);
margin: 0 10px 20px 10px;
float: left;
}
.photo-bx:nth-child(odd) {
clear: both;
}
.photo-bx .pic {
width: 100%;
}
.photo-bx .pic img {
width: 100%;
height: auto;
}
.photo-bx .text {
width: 100%;
padding: 10px 0 0 0;
font-size: 0.9em;
line-height: 1.4em;
text-align: center;
}
.main-content ul.qk-link-bx {
width: 100%;
padding: 0;
margin: 20px 0;
list-style: none;
display: flex;
justify-content: center;
align-items: stretch;
}
.main-content ul.qk-link-bx li {
width: 25%;
padding: 0;
margin: 0;
}
.main-content ul.qk-link-bx li .icon-bx {
width: 85px;
height: 85px;
margin: 0 auto;
border-radius: 100%;
border: 2px #485157 solid;
display: flex;
justify-content: center;
align-items: center;
}
.main-content ul.qk-link-bx li .text-1 {
clear: both;
width: 90%;
margin: 5px auto;
color: #485157;
letter-spacing: 0.1em;
font-weight: 500;
line-height: 1em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 {
clear: both;
width: 90%;
margin: 0 auto;
color: #000;
font-size: 0.8em;
letter-spacing: 0.1em;
line-height: 2em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 a {
color: #485157;
text-decoration: none;
}
.main-content ul.qk-link-bx li .text-2 a:hover {
text-decoration: underline;
}
/******** content #news content ********/
.main-content .breadcrumb-bx {
width: 100%;
margin: 0 0 30px 0;
color: #231815;
font-size: 0.9em;
letter-spacing: 0.1em;
}
.main-content .breadcrumb-bx a {
color: #231815;
text-decoration: none;
}
.main-content .breadcrumb-bx a:hover {
text-decoration: underline;
}
.main-content .news-content-bx {
width: 100%;
padding: 30px 30px 30px 50px;
word-break: break-all;
box-sizing: border-box;
}
.main-content .news-content-bx .title {
width: 100%;
margin: 0 0 20px 0;
color: #231815;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content {
width: 100%;
color: #231815;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content a {
color: #231815;
text-decoration: none;
}
.main-content .news-content-bx .content a:hover {
text-decoration: underline;
}
ul.bignum {
padding: 0 0 0 30px;
margin: 0;
box-sizing: border-box;
list-style-type: cjk-ideographic;
display: block;
}
ul.bignum li {
padding: 0;
margin: 0;
}
.main-content .gotop {
clear: both;
width: 60px;
margin: 30px 0 0 0;
color: #332c2a;
float: right;
cursor: pointer;
}
/******** content #member intro ********/
.main-content .page-menu {
width: 100%;
margin: 0 0 30px 0;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .page-menu .icon {
width: 50px;
}
.main-content .page-menu .menu-tabs-bx {
width: calc(100% - 50px);
}
.main-content .page-menu .menu-tabs-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .page-menu .menu-tabs-bx ul li {
padding: 0;
margin: 0;
line-height: 1em;
text-align: center;
}
.main-content .page-menu .menu-tabs-bx ul li a {
width: 115px;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .page-menu .menu-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .page-menu .menu-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .mem-list-bx {
clear: both;
width: 90%;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .mem-list-bx .mem-bx {
width: calc(100% / 3 - 20px);
margin: 10px 10px 60px 10px;
position: relative;
}
.main-content .mem-list-bx .mem-bx .pic {
width: 145px;
height: 145px;
margin: 0 auto;
border-radius: 100%;
border: 5px #fff solid;
background-color: #efefef;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
position: absolute;
top: 0;
left: calc(50% - 72px);
z-index: 99;
}
.main-content .mem-list-bx .mem-bx .pic img {
width: auto;
height: 100%;
}
.main-content .mem-list-bx .mem-bx .box {
width: 100%;
height: 100%;
padding: 140px 20px 0 20px;
margin: 30px 0 0 0;
border: 1px #e9e9e7 solid;
background-color: #fff;
box-sizing: border-box;
z-index: 9;
}
.main-content .mem-list-bx .mem-bx .box .name {
width: 100%;
color: #485157;
font-size: 0.9em;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-1 {
width: 100%;
color: #0081a3;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-2 {
width: 100%;
color: #342e2c;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .job {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .contact {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
.main-content .title-line {
clear: both;
width: 90%;
margin: 30px auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .title-line .title-1 {
width: 80px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-1 {
width: calc(100% - 80px);
}
.main-content .title-line .title-2 {
width: 220px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-2 {
width: calc(100% - 220px);
}
.main-content .title-line .line-1 hr, .line-2 hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
/******** content #meeting list ********/
.main-content .mt-list-bx {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .mt-list-bx .title-bx {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .mt-list-bx .title-bx .icon {
width: 35px;
}
.main-content .mt-list-bx .title-bx .text {
width: 160px;
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .title-bx .year {
width: calc(100% - 195px);
color: #798388;
font-size: 1em;
text-align: right;
}
.main-content .mt-list-bx .title-bx .year a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .title-bx .year a.sel {
text-decoration: underline;
}
.main-content .mt-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .mt-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .mt-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
display: flex;
justify-content: flex-start;
align-items: baseline;
}
.main-content .mt-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .mt-list-bx .list-bx .column .col-1 .text {
width: calc(100% - 110px);
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .mt-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #regulation list ********/
.main-content .rg-list-bx {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .rg-list-bx .title-bx {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .title-bx .icon {
width: 50px;
}
.main-content .rg-list-bx .title-bx .text {
width: calc(100% - 50px);
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .rg-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .rg-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
display: flex;
justify-content: flex-start;
align-items: baseline;
}
.main-content .rg-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .rg-list-bx .list-bx .column .col-1 .text {
width: calc(100% - 110px);
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .rg-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .rg-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #higher project intro ********/
.main-content .higher-pj-content {
width: 100%;
padding: 0 30px 30px 50px;
box-sizing: border-box;
}
.main-content .higher-pj-content .pic {
width: 90%;
margin: 0 auto 30px auto;
color: #3f3b3a;
font-size: 0.9em;
letter-spacing: 0.1em;
text-align: center;
}
.main-content .higher-pj-content .pic img {
width: 100%;
height: auto;
}
.main-content .higher-pj-content .text {
clear: both;
width: 100%;
color: #3f3b3a;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .higher-pj-content .text font.title {
font-size: 1.1em;
font-weight: 600;
}
/******** content #higher project framework ********/
.main-content .higher-fw-content {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
}
.main-content .higher-fw-content .content-full {
width: 100%;
margin: 0 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.main-content .higher-fw-content .content-img-full {
width: 100%;
text-align: center;
}
.main-content .higher-fw-content .content-img-full img {
max-width: 100%;
height: auto;
}
.main-content .higher-fw-content .content-img-text-full {
width: 100%;
margin: 15px 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
text-align: center;
letter-spacing: 0.1em;
}
/******** content #higher project result ********/
.main-content .higher-rs-content {
width: 100%;
padding: 30px 30px 30px 50px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .higher-rs-content .higher-rs-ebook-bx {
width: calc(100% / 2 - 30px);
margin: 15px;
background-color: #fff;
-moz-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
-webkit-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-sizing: border-box;
position: relative;
}
.main-content .higher-rs-content .higher-rs-ebook-bx a {
width: 100%;
padding: 30px 0;
box-sizing: border-box;
text-decoration: none;
display: block;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title {
width: 100%;
margin: 0 0 30px 0;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title span {
padding: 5px 15px;
color: #414141;
font-size: 0.9em;
background-color: #ffd900;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic {
clear: both;
width: 100%;
text-align: center;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic img.ebook {
width: 80%;
height: auto;
}
.main-content .higher-rs-content .over-mask {
width: 100%;
height: 100%;
padding: 0 0 80px 0;
color: #fff;
font-size: 1.2em;
font-weight: 500;
background-color: rgba(0,0,0,0.4);
box-sizing: border-box;
display: none;
justify-content: center;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.main-content #ebook-content {
width: 96%;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: -200px;
left: 10px;
z-index: 9999;
display: none;
}
.main-content #ebook-content .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #ebook-content .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #ebook-content .content-bx {
width: 100%;
padding: 30px 50px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .source-date {
font-size: 0.8em;
}
.main-content #ebook-content .content-bx .source-date span {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #ebook-content .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #ebook-content .content-bx .content {
width: 100%;
padding: 0 30px;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .content img {
width: 100%;
height: auto;
}
.main-content #ebook-content .content-bx .content iframe.iframe-ebook {
width: 100%;
height: 800px;
border: 0;
}
/******** content #center strategic ********/
.main-content .center-strategic-content {
width: 100%;
padding: 30px 30px 30px 50px;
color: #3f3b3a;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content .center-strategic-content .text-1 {
width: 100%;
margin: 0 0 15px 0;
font-size: 1.2em;
font-weight: 600;
}
.main-content .center-strategic-content img {
max-width: 100%;
height: auto;
}
/******** error 404 ********/
.error-bx {
clear: both;
width: 100%;
padding: 50px 0;
background-color: #ffd900;
display: flex;
justify-content: center;
align-items: center;
}
.error-bx .pic {
width: 45%;
}
.error-bx .pic img {
width: 100%;
height: auto;
}
.error-bx .text {
width: 45%;
padding: 0 0 0 40px;
box-sizing: border-box;
}
.error-bx .text font.text1 {
color: #3f3b3a;
font-size: 3.4em;
line-height: 1em;
font-weight: 600;
}
.error-bx .text font.text2 {
color: #004256;
font-size: 3.4em;
font-weight: 200;
}
.error-bx .text font.text3 {
color: #004256;
font-size: 1.6em;
line-height: 1em;
font-weight: 200;
}
.error-bx .text font.text4 {
color: #004256;
font-size: 2.4em;
font-weight: 500;
}
.error-bx .text .goback-bt {
clear: both;
width: 80%;
height: 39px;
margin: 30px 0 0 0;
color: #fff;
font-size: 0.9em;
font-weight: 600;
text-align: center;
border-radius: 6px;
background: url(/assets/error_bt_bg.png);
background-repeat: repeat-x;
overflow: hidden;
}
.error-bx .text .goback-bt a {
width: 100%;
padding: 8px 0 0 0;
color: #fff;
text-decoration: none;
box-sizing: border-box;
display: block;
}
.footer-error {
width: 96%;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.footer-error .column-lt {
width: calc(100% - 120px);
padding: 30px 0 50px 0;
color: #545e64;
font-size: 0.8em;
line-height: 2em;
letter-spacing: 0.1em;
}
.footer-error .column-rt {
width: 120px;
padding: 30px 0 0 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
/******** site map ********/
.sitemap-content {
width: 100%;
padding: 90px 60px;
box-sizing: border-box;
}
.sitemap-content .title {
width: 100%;
margin: 0 0 40px 0;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx {
width: 100%;
padding: 0 0 0 50px;
margin: 0;
list-style: none;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.sitemap-content .column-bx .column {
width: calc(100% / 3);
}
.sitemap-content .column-bx .column ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li {
padding: 0;
margin: 0 0 30px 0;
font-size: 1em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li a {
color: #000;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li a:hover {
text-decoration: underline;
}
.sitemap-content .column-bx .column ul li ul.snd {
width: 100%;
padding: 0;
margin: 10px 0 0 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li ul.snd li {
padding: 0;
margin: 0;
color: #545e64;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li ul.snd li a {
color: #545e64;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li ul.snd li a:hover {
text-decoration: underline;
}
/******** site map ********/
.main-content .google-map {
width: 100%;
padding: 30px;
box-sizing: border-box;
}
.main-content .google-map iframe {
width: 100%;
height: 400px;
}
/******** footer ********/
footer {
clear: both;
width: 100%;
background-image: url("../images/footer_bg_pic.jpg");
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(79,90,96,1);
overflow: hidden;
position: relative;
}
footer .footer-content {
width: 100%;
padding: 30px 0;
margin: 0 auto;
color: #fff;
font-size: 0.8em;
letter-spacing: 0.1em;
background-color: rgba(79,90,96,0.9);
display: flex;
justify-content: center;
align-items: stretch;
}
footer .footer-content .left-col {
width: calc(96% - 180px);
}
footer .footer-content .left-col .address {
width: 100%;
}
footer .footer-content .left-col .footer-menu {
width: 100%;
margin: 40px 0 0 0;
}
footer .footer-content .left-col .footer-menu a {
color: #fff;
text-decoration: none;
}
footer .footer-content .left-col .footer-menu a:hover {
text-decoration: underline;
}
footer .footer-content .right-col {
width: 180px;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
footer .footer-content .right-col .footer-menu {
width: 180px;
}
footer .footer-content .right-col .footer-menu ul {
width: 100%;
padding: 30px 0 0 25px;
margin: 0;
list-style: disc;
display: block;
box-sizing: border-box;
}
footer .footer-content .right-col .footer-menu ul li {
padding: 0 0 0 10px;
margin: 0 0 2px 0;
}
footer .footer-content .right-col .footer-menu ul li a {
color: #fff;
text-decoration: none;
}
footer .footer-content .right-col .footer-menu ul li a:hover {
text-decoration: underline;
}
footer .footer-content .right-col .map-icon {
width: 50px;
padding: 0 0 10px 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
}
@media screen and (max-width: 767px) {
/******** header for mo ********/ header#pc {
display: none;
}
header#mo {
width: 100%;
}
header#mo .header-top-bar {
width: 100%;
padding: 5px;
background-color: #5d686e;
box-sizing: border-box;
}
header#mo .header-top-bar .title-bx {
width: 100%;
}
header#mo .header-top-bar .title-bx ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: center;
}
header#mo .header-top-bar .title-bx ul li {
padding: 0;
margin: 0 10px;
}
header#mo .header-top-bar .title-bx ul li a {
color: #fff;
font-size: 0.8em;
letter-spacing: 0.2em;
text-decoration: none;
}
header#mo .header-top-bar .title-bx ul li a:active {
color: #fdd900;
}
header#mo .title-nav-bx {
width: 100%;
margin: 20px 0 0 0;
position: relative;
}
header#mo .title-nav-bx .sub-title-bx {
width: 330px;
margin: 0 auto;
text-align: center;
}
header#mo .title-nav-bx #nav-icon {
clear: both;
width: 50px;
margin: 10px auto;
color: #475055;
font-size: 3em;
cursor: pointer;
}
header#mo .title-nav-bx nav#mo {
width: 100%;
padding: 30px 0;
border-top: 1px #909a9f solid;
border-bottom: 1px #909a9f solid;
background-color: #eee;
position: absolute;
top: 150px;
left: 0;
z-index: 999;
}
header#mo .title-nav-bx nav#mo ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: block;
}
header#mo .title-nav-bx nav#mo ul li {
width: 100%;
padding: 0 0 0 20px;
margin: 30px 0;
line-height: 1.4em;
box-sizing: border-box;
position: relative;
}
header#mo .title-nav-bx nav#mo ul li a {
color: #676664;
text-decoration: none;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
}
header#mo .title-nav-bx nav#mo ul li a .text {
width: calc(100% - 40px);
line-height: 1em;
}
header#mo .title-nav-bx nav#mo ul li a .text font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
header#mo .title-nav-bx nav#mo ul li a .text font.en {
font-size: 0.8em;
}
header#mo .title-nav-bx nav#mo ul li a .icon-home {
width: 40px;
height: 23px;
background-image: url("../images/nav_icon_home.png");
background-position: left;
background-repeat: no-repeat;
display: block;
}
header#mo .title-nav-bx nav#mo ul li:active > a .icon-home {
background-image: url("../images/nav_icon_home_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-home.sel {
background-image: url("../images/nav_icon_home_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-about {
width: 40px;
height: 27px;
background-image: url("../images/nav_icon_about.png");
background-position: left;
background-repeat: no-repeat;
display: block;
}
header#mo .title-nav-bx nav#mo ul li:active > a .icon-about {
background-image: url("../images/nav_icon_about_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-about.sel {
background-image: url("../images/nav_icon_about_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-infor {
width: 40px;
height: 24px;
background-image: url("../images/nav_icon_infor.png");
background-position: left;
background-repeat: no-repeat;
display: block;
}
header#mo .title-nav-bx nav#mo ul li:active > a .icon-infor {
background-image: url("../images/nav_icon_infor_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-infor.sel {
background-image: url("../images/nav_icon_infor_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-regu {
width: 40px;
height: 28px;
background-image: url("../images/nav_icon_regulation.png");
background-position: left;
background-repeat: no-repeat;
display: block;
}
header#mo .title-nav-bx nav#mo ul li:active > a .icon-regu {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-regu.sel {
background-image: url("../images/nav_icon_regulation_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-dw {
width: 40px;
height: 26px;
background-image: url("../images/nav_icon_download.png");
background-position: left;
background-repeat: no-repeat;
display: block;
}
header#mo .title-nav-bx nav#mo ul li:active > a .icon-dw {
background-image: url("../images/nav_icon_download_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-dw.sel {
background-image: url("../images/nav_icon_download_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-manage {
width: 40px;
height: 23px;
background-image: url("../images/nav_icon_mag_sys.png");
background-position: left;
background-repeat: no-repeat;
display: block;
}
header#mo .title-nav-bx nav#mo ul li:active > a .icon-manage {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#mo .title-nav-bx nav#mo ul li a .icon-manage.sel {
background-image: url("../images/nav_icon_mag_sys_over.png");
}
header#mo .title-nav-bx nav#mo ul li ul.popup {
width: calc(100% - 20px);
padding: 0;
margin: 20px 0 0 0;
list-style: none;
display: block;
}
header#mo .title-nav-bx nav#mo ul li ul.popup li {
width: 100%;
padding: 0;
margin: 0;
text-align: left;
letter-spacing: 0.1em;
}
header#mo .title-nav-bx nav#mo ul li ul.popup li a {
width: 100%;
padding: 20px;
color: #fff;
text-decoration: none;
background-color: rgba(79,89,95,0.8);
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
}
header#mo .title-nav-bx nav#mo ul li ul.popup li a:active {
background-color: rgba(79,89,95,1)
}
header#mo .title-nav-bx nav#mo ul li ul.popup li a .checked {
width: 25px;
}
header#mo .title-nav-bx nav#mo ul li ul.popup li a .text {
width: calc(100% - 25px);
}
header#mo .title-nav-bx nav#mo .search-bx {
width: 90%;
margin: 40px auto 20px auto;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #eee;
}
header#mo .title-nav-bx nav#mo .search-bx input[type=search] {
width: calc(100% - 50px);
padding: 10px;
color: #000;
font: 1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial;
box-sizing: border-box;
border: 1px #a1a5a6 solid;
background-color: #fff;
}
header#mo .title-nav-bx nav#mo .search-bx input[type=button] {
width: 50px;
height: 31px;
box-sizing: border-box;
border: 0;
background-color: #eee;
background-image: url("../images/search_icon.png");
background-position: right;
background-repeat: no-repeat;
cursor: pointer;
}
/******** banner ********/
.banner-text-full {
width: 100%;
}
.banner-text-full .banner-bx {
width: 100%;
height: 26vw;
overflow: hidden;
position: relative;
}
.banner-text-full .banner-bx ul li a {
text-decoration: none;
display: block;
}
.banner-text-full .banner-bx ul li .pic {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.banner-text-full .banner-bx ul li .pic img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .bg-sq {
width: 41vw;
text-align: right;
position: absolute;
top: -3.1vw;
right: 0;
z-index: 10;
}
.banner-text-full .banner-bx ul li .bg-sq img {
width: 100%;
height: auto;
}
.banner-text-full .banner-bx ul li .text-bx {
display: none;
}
/******** section ********/
section {
width: 100%;
margin: 0 auto;
}
/******** aside ********/
aside {
clear: both;
width: 100%;
padding: 0;
margin: 0;
border-bottom: 2px #909a9f solid;
}
aside .menu-bx {
width: 100%;
padding: 25px 0 0 0;
margin: 0;
background-color: #fdd900;
}
aside .menu-bx .aside-icon {
width: 100%;
padding: 0 0 25px 0;
display: flex;
justify-content: center;
align-items: center;
}
aside .menu-bx .aside-icon img {
margin: 0 20px;
}
aside .menu-bx dl#panel {
width: 100%;
padding: 0 0 25px 0;
border-top: 1px #fff solid;
display: none;
}
aside .menu-bx dl#panel dt {
width: 100%;
padding: 20px 0 20px 30px;
font-size: 1.1em;
letter-spacing: 0.1em;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px #fff solid;
box-sizing: border-box;
cursor: pointer;
}
aside .menu-bx dl#panel dt:hover {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt.sel {
background-color: #ffe35e;
}
aside .menu-bx dl#panel dt .icon {
width: 70px
}
aside .menu-bx dl#panel dt .text {
width: calc(100% - 70px);
color: #363531;
font-size: 1.1em;
line-height: 1em;
}
aside .menu-bx dl#panel dt .text font.en {
font-size: 0.6em;
line-height: 1em;
letter-spacing: normal;
}
aside .menu-bx dl#panel dd {
width: 100%;
padding: 0;
margin: 0;
border-bottom: 1px #fff solid;
box-sizing: border-box;
}
aside .menu-bx dl#panel dd ul {
width: calc(100% - 30px);
padding: 0;
margin: 0;
list-style: none;
display: block;
float: right;
}
aside .menu-bx dl#panel dd ul li {
width: 100%;
padding: 0;
margin: 0;
}
aside .menu-bx dl#panel dd ul li a {
width: 100%;
padding: 10px;
margin: 0;
color: #fff;
font-size: 0.9em;
text-decoration: none;
border-bottom: 1px #fff solid;
background-color: #6e756b;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
}
aside .menu-bx dl#panel dd ul li a:hover {
background-color: #50595c;
}
aside .menu-bx dl#panel dd ul li a .checked {
width: 30px;
}
aside .menu-bx dl#panel dd ul li a .text {
width: calc(100% - 30px);
}
aside .menu-bx dl#panel dd ul li:last-child a {
border: 0;
}
aside .data-num-bx {
width: 100%;
padding: 20px;
color: #585757;
font-size: 0.8em;
letter-spacing: 0.1em;
box-sizing: border-box;
}
aside .data-num-bx font.num {
font-size: 1.6em;
font-weight: 500;
}
/******** content #hp ********/
.main-content {
width: 96%;
padding: 30px 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.main-content .hp-menu {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .hp-menu .icon {
width: 50px;
}
.main-content .hp-menu .news-tabs-bx {
width: calc(100% - 50px);
}
.main-content .hp-menu .news-tabs-bx ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .hp-menu .news-tabs-bx ul li {
width: calc(100% / 3 - 20px);
padding: 0;
margin: 5px 10px;
line-height: 1em;
text-align: center;
}
.main-content .hp-menu .news-tabs-bx ul li a {
width: 100%;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .hp-menu .news-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .hp-menu .news-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .hp-menu .news-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .news-list-bx {
width: 100%;
padding: 30px 20px;
box-sizing: border-box;
}
.main-content .news-list-bx .list-bx {
clear: both;
width: 100%;
padding: 0 0 15px 0;
}
.main-content .news-list-bx .list-bx .date {
width: 100px;
padding: 5px 0;
margin: 0 20px 10px 0;
color: #485157;
font-size: 0.8em;
font-weight: 500;
line-height: 1em;
text-align: center;
background-color: #ffd900;
}
.main-content .news-list-bx .list-bx .title {
width: 100%;
font-size: 0.9em;
letter-spacing: 0.1em;
}
.main-content .news-list-bx .list-bx .title a {
color: #485157;
text-decoration: none;
}
.main-content .news-list-bx .list-bx .title a:hover {
text-decoration: underline;
}
.main-content .news-list-bx .more {
clear: both;
width: 100%;
padding: 20px 20px 0 0;
box-sizing: border-box;
text-align: right;
}
.main-content .news-list-bx .more a {
color: #485157;
font-size: 0.9em;
text-decoration: none;
}
.main-content .news-list-bx .more a:active {
text-decoration: underline;
}
.main-content .hp-title {
width: 100%;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
position: relative;
}
.main-content .hp-title .icon {
width: 50px;
}
.main-content .hp-title .title {
width: calc(100% - 50px);
padding: 10px 0 0 0;
color: #545e64;
font-size: 1.1em;
line-height: 1em;
letter-spacing: 0.1em;
}
.main-content .hp-title .more {
width: 40px;
font-size: 0.9em;
text-align: right;
position: absolute;
top: 20px;
right: 10px;
}
.main-content .hp-title .more a {
color: #414141;
text-decoration: none;
}
.main-content .hp-title .more a:active {
text-decoration: underline;
}
.main-content ul#spot-list-bx {
clear: both;
width: 100%;
padding: 0;
margin: 0 0 30px 0;
list-style: none;
display: block;
}
.main-content ul#spot-list-bx li {
width: calc(100% - 20px);
margin: 20px 10px;
background-color: #fff;
position: relative;
}
.main-content ul#spot-list-bx li:hover {
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
}
.main-content ul#spot-list-bx li a {
width: 100%;
text-decoration: none;
display: block;
}
.main-content ul#spot-list-bx li .pic {
width: 100%;
}
.main-content ul#spot-list-bx li .pic img.v {
width: 100%;
height: auto;
}
.main-content ul#spot-list-bx li .pic img.h {
width: 100%;
height: auto;
}
.main-content ul#spot-list-bx li .text {
width: 100%;
padding: 15px;
margin: 0 0 20px 0;
line-height: 1.2em;
box-sizing: border-box;
background-color: #fff;
}
.main-content ul#spot-list-bx li .text font.sub-date {
padding: 2px 10px;
color: #555e60;
font-size: 0.8em;
background-color: #ffd900;
}
.main-content ul#spot-list-bx li .text .title {
clear: both;
width: 100%;
margin: 15px 0 10px 0;
color: #555e60;
font-size: 1.1em;
letter-spacing: 0.1em;
font-weight: 500;
}
.main-content ul#spot-list-bx li .text .intro {
width: 100%;
color: #555e60;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content ul#spot-list-bx li .more {
clear: both;
width: calc(100% - 30px);
padding: 0 0 20px 0;
color: #555e60;
font-size: 0.8em;
text-align: right;
}
.main-content #spot-news {
width: 96%;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: -150px;
left: 10px;
z-index: 9999;
display: none;
}
.main-content #spot-news .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #spot-news .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #spot-news .content-bx {
width: 100%;
padding: 10px 30px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .source-date {
width: 100%;
font-size: 0.8em;
}
.main-content #spot-news .content-bx .source-date .date {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #spot-news .content-bx .source-date .source {
clear: both;
width: 100%;
margin: 10px 0 0 0;
}
.main-content #spot-news .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #spot-news .content-bx .content {
width: 100%;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #spot-news .content-bx .content a {
color: #3E3A39;
border-bottom: 1px #666 dashed;
text-decoration: none;
}
.photo-bx {
width: calc(100% - 20px);
margin: 0 10px 20px 10px;
}
.photo-bx .pic {
width: 100%;
}
.photo-bx .pic img {
width: 100%;
height: auto;
}
.photo-bx .text {
width: 100%;
padding: 5px 0 20px 0;
font-size: 0.9em;
line-height: 1.4em;
text-align: center;
}
.main-content ul.qk-link-bx {
width: 96%;
padding: 0;
margin: 20px auto;
list-style: none;
display: flex;
justify-content: center;
align-items: stretch;
}
.main-content ul.qk-link-bx li {
width: calc(100% / 3);
padding: 0;
margin: 0;
}
.main-content ul.qk-link-bx li .icon-bx {
width: 85px;
height: 85px;
margin: 0 auto;
border-radius: 100%;
border: 2px #485157 solid;
display: flex;
justify-content: center;
align-items: center;
}
.main-content ul.qk-link-bx li .text-1 {
clear: both;
width: 90%;
margin: 5px auto;
color: #485157;
letter-spacing: 0.1em;
font-weight: 500;
line-height: 1em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 {
clear: both;
width: 90%;
margin: 0 auto;
color: #000;
font-size: 0.8em;
letter-spacing: 0.1em;
line-height: 2em;
text-align: center;
}
.main-content ul.qk-link-bx li .text-2 a {
color: #485157;
text-decoration: none;
}
.main-content ul.qk-link-bx li .text-2 a:hover {
text-decoration: underline;
}
/******** content #news content ********/
.main-content .breadcrumb-bx {
width: 100%;
margin: 0 0 30px 0;
color: #231815;
font-size: 0.9em;
letter-spacing: 0.1em;
}
.main-content .breadcrumb-bx a {
color: #231815;
text-decoration: none;
}
.main-content .breadcrumb-bx a:hover {
text-decoration: underline;
}
.main-content .news-content-bx {
width: 100%;
padding: 20px;
word-break: break-all;
box-sizing: border-box;
}
.main-content .news-content-bx .title {
width: 100%;
margin: 0 0 20px 0;
color: #231815;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content {
width: 100%;
color: #231815;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .news-content-bx .content a {
color: #231815;
text-decoration: none;
}
.main-content .news-content-bx .content a:hover {
text-decoration: underline;
}
ul.bignum {
padding: 0 0 0 30px;
margin: 0;
box-sizing: border-box;
list-style-type: cjk-ideographic;
display: block;
}
ul.bignum li {
padding: 0;
margin: 0;
}
.main-content .gotop {
clear: both;
width: 60px;
margin: 30px 0 0 0;
color: #332c2a;
float: right;
cursor: pointer;
}
/******** content #member intro ********/
.main-content .page-menu {
width: 100%;
margin: 0 0 30px 0;
border-bottom: 1px #768186 solid;
display: flex;
justify-content: flex-start;
}
.main-content .page-menu .icon {
width: 50px;
}
.main-content .page-menu .menu-tabs-bx {
width: calc(100% - 50px);
}
.main-content .page-menu .menu-tabs-bx ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .page-menu .menu-tabs-bx ul li {
width: 80px;
padding: 0;
margin: 0 10px;
line-height: 1em;
text-align: center;
}
.main-content .page-menu .menu-tabs-bx ul li a {
width: 100%;
padding: 5px 0;
color: #545e64;
text-decoration: none;
border-bottom: 5px #fbfaf6 solid;
box-sizing: border-box;
display: block;
}
.main-content .page-menu .menu-tabs-bx ul li a:hover {
border-bottom: 5px #6a7277 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a.sel {
border-bottom: 5px #485157 solid;
box-sizing: border-box;
}
.main-content .page-menu .menu-tabs-bx ul li a font.ch {
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .page-menu .menu-tabs-bx ul li a font.en {
font-size: 0.6em;
}
.main-content .mem-list-bx {
clear: both;
width: 90%;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .mem-list-bx .mem-bx {
clear: both;
width: calc(100% - 20px);
margin: 10px;
position: relative;
}
.main-content .mem-list-bx .mem-bx .pic {
width: 145px;
height: 145px;
margin: 0 auto;
border-radius: 100%;
border: 5px #fff solid;
background-color: #efefef;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
-moz-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
position: absolute;
top: 0;
left: calc(50% - 72px);
z-index: 99;
}
.main-content .mem-list-bx .mem-bx .pic img {
width: auto;
height: 100%;
}
.main-content .mem-list-bx .mem-bx .box {
width: 100%;
padding: 140px 20px 20px 20px;
margin: 30px 0 0 0;
border: 1px #e9e9e7 solid;
background-color: #fff;
box-sizing: border-box;
z-index: 9;
}
.main-content .mem-list-bx .mem-bx .box .name {
width: 100%;
color: #485157;
font-size: 0.9em;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-1 {
width: 100%;
color: #0081a3;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .title-2 {
width: 100%;
color: #342e2c;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .job {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box .contact {
width: 100%;
color: #342e2c;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mem-list-bx .mem-bx .box hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
.main-content .title-line {
clear: both;
width: 90%;
margin: 30px auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .title-line .title-1 {
width: 80px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-1 {
width: calc(100% - 80px);
}
.main-content .title-line .title-2 {
width: 220px;
color: #545e64;
font-size: 1.1em;
letter-spacing: 0.1em;
}
.main-content .title-line .line-2 {
width: calc(100% - 220px);
}
.main-content .title-line .line-1 hr, .line-2 hr {
width: 100%;
margin: 15px 0;
border: 1px #d8d8d9 solid;
}
/******** content #meeting list ********/
.main-content .mt-list-bx {
width: 100%;
padding: 0 20px 30px 20px;
box-sizing: border-box;
}
.main-content .mt-list-bx .title-bx {
width: 100%;
}
.main-content .mt-list-bx .title-bx .icon {
width: 35px;
float: left;
}
.main-content .mt-list-bx .title-bx .text {
width: 160px;
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
float: left;
}
.main-content .mt-list-bx .title-bx .year {
clear: both;
width: 100%;
color: #798388;
font-size: 1em;
text-align: right;
}
.main-content .mt-list-bx .title-bx .year a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .title-bx .year a.sel {
text-decoration: underline;
}
.main-content .mt-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .mt-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .mt-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .mt-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
}
.main-content .mt-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .mt-list-bx .list-bx .column .col-1 .text {
clear: both;
width: 100%;
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .mt-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .mt-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
display: flex;
justify-content: center;
align-items: flex-end;
}
.main-content .mt-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .mt-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #regulation list ********/
.main-content .rg-list-bx {
width: 100%;
padding: 0 20px 30px 20px;
box-sizing: border-box;
}
.main-content .rg-list-bx .title-bx {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .title-bx .icon {
width: 50px;
}
.main-content .rg-list-bx .title-bx .text {
width: calc(100% - 50px);
color: #798388;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx {
clear: both;
width: 100%;
margin: 30px 0;
}
.main-content .rg-list-bx .list-bx .caption {
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-1 {
width: calc(100% - 40px);
color: #798388;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.1em;
display: flex;
align-items: center;
}
.main-content .rg-list-bx .list-bx .caption .cap-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column {
clear: both;
width: 100%;
margin: 0 0 15px 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main-content .rg-list-bx .list-bx .column .col-1 {
width: calc(100% - 40px);
}
.main-content .rg-list-bx .list-bx .column .col-1 .date {
width: 100px;
margin: 0 10px 0 0;
color: #798388;
font-size: 0.8em;
text-align: center;
letter-spacing: 0.1em;
background-color: #ffd900;
}
.main-content .rg-list-bx .list-bx .column .col-1 .text {
clear: both;
width: 100%;
color: #798388;
font-size: 0.8em;
letter-spacing: 0.1em;
}
.main-content .rg-list-bx .list-bx .column .col-1 .space {
width: 100px;
margin: 0 10px 0 0;
font-size: 0.8em;
display: block;
}
.main-content .rg-list-bx .list-bx .column .col-2 {
width: 40px;
color: #798388;
font-size: 0.9em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
display: flex;
justify-content: center;
align-items: flex-end;
}
.main-content .rg-list-bx .list-bx .column .col-2 a {
color: #798388;
text-decoration: none;
}
.main-content .rg-list-bx .list-bx hr {
width: 100%;
margin: 20px 0;
border: 1px #d8d8d9 solid;
}
/******** content #higher project intro ********/
.main-content .higher-pj-content {
width: 100%;
padding: 0 20px 30px 20px;
box-sizing: border-box;
}
.main-content .higher-pj-content .pic {
width: 100%;
margin: 0 auto 30px auto;
color: #3f3b3a;
font-size: 0.9em;
letter-spacing: 0.1em;
text-align: center;
}
.main-content .higher-pj-content .pic img {
width: 100%;
height: auto;
}
.main-content .higher-pj-content .text {
clear: both;
width: 100%;
color: #3f3b3a;
font-size: 0.9em;
line-height: 1.8em;
letter-spacing: 0.1em;
}
.main-content .higher-pj-content .text font.title {
font-size: 1.1em;
font-weight: 600;
}
/******** content #higher project framework ********/
.main-content .higher-fw-content {
width: 100%;
padding: 30px 20px 30px 20px;
box-sizing: border-box;
}
.main-content .higher-fw-content .content-full {
width: 100%;
margin: 0 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.main-content .higher-fw-content .content-img-full {
width: 100%;
text-align: center;
}
.main-content .higher-fw-content .content-img-full img {
max-width: 100%;
height: auto;
}
.main-content .higher-fw-content .content-img-text-full {
width: 100%;
margin: 15px 0 30px 0;
color: #3f3b3a;
font-size: 0.9em;
font-weight: normal;
text-align: center;
letter-spacing: 0.1em;
}
/******** content #higher project result ********/
.main-content .higher-rs-content {
width: 100%;
padding: 30px 20px 30px 20px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
.main-content .higher-rs-content .higher-rs-ebook-bx {
width: calc(100% - 30px);
margin: 15px;
background-color: #fff;
-moz-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
-webkit-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.3);
box-sizing: border-box;
position: relative;
}
.main-content .higher-rs-content .higher-rs-ebook-bx a {
width: 100%;
padding: 30px 0;
box-sizing: border-box;
text-decoration: none;
display: block;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title {
width: 100%;
margin: 0 0 30px 0;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-title span {
padding: 5px 15px;
color: #414141;
font-size: 0.9em;
background-color: #ffd900;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic {
clear: both;
width: 100%;
text-align: center;
}
.main-content .higher-rs-content .higher-rs-ebook-bx .ebook-pic img.ebook {
width: 80%;
height: auto;
}
.main-content .higher-rs-content .over-mask {
width: 100%;
height: 100%;
padding: 0 0 80px 0;
color: #fff;
font-size: 1.2em;
font-weight: 500;
background-color: rgba(0,0,0,0.4);
box-sizing: border-box;
display: none;
justify-content: center;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.main-content #ebook-content {
width: 96%;
border-radius: 10px;
background-color: #fff;
-webkit-box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow: 4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-sizing: border-box;
position: absolute;
top: -150px;
left: 10px;
z-index: 9999;
display: none;
}
.main-content #ebook-content .close-bar {
width: 100%;
padding: 5px 20px;
color: #475055;
font-size: 2em;
text-align: right;
border-bottom: 1px #cdcfce solid;
box-sizing: border-box;
}
.main-content #ebook-content .close-bar .icon-colse {
width: 50px;
cursor: pointer;
float: right;
}
.main-content #ebook-content .content-bx {
width: 100%;
padding: 30px 10px;
color: #3E3A39;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .source-date {
font-size: 0.8em;
}
.main-content #ebook-content .content-bx .source-date span {
padding: 2px 10px;
color: #555e60;
text-align: center;
background-color: #ffd900;
}
.main-content #ebook-content .content-bx .title {
clear: both;
width: 100%;
padding: 20px 0;
font-size: 1.2em;
font-size: 600;
}
.main-content #ebook-content .content-bx .content {
width: 100%;
padding: 0;
font-size: 0.9em;
line-height: 1.8em;
box-sizing: border-box;
}
.main-content #ebook-content .content-bx .content img {
width: 100%;
height: auto;
}
.main-content #ebook-content .content-bx .content iframe.iframe-ebook {
width: 100%;
height: 600px;
border: 0;
}
/******** content #center strategic ********/
.main-content .center-strategic-content {
width: 100%;
padding: 30px 20px 30px 20px;
color: #3f3b3a;
letter-spacing: 0.1em;
box-sizing: border-box;
}
.main-content .center-strategic-content .text-1 {
width: 100%;
margin: 0 0 15px 0;
font-size: 1.2em;
font-weight: 600;
}
.main-content .center-strategic-content img {
max-width: 100%;
height: auto;
}
/******** error 404 ********/
.error-bx {
clear: both;
width: 100%;
padding: 50px 0;
background-color: #ffd900;
}
.error-bx .pic {
width: 90%;
margin: 0 auto 30px auto;
}
.error-bx .pic img {
width: 100%;
height: auto;
}
.error-bx .text {
clear: both;
width: 80%;
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
.error-bx .text font.text1 {
color: #3f3b3a;
font-size: 3.4em;
line-height: 1em;
font-weight: 600;
}
.error-bx .text font.text2 {
color: #004256;
font-size: 3.4em;
font-weight: 200;
}
.error-bx .text font.text3 {
color: #004256;
font-size: 1.6em;
line-height: 1em;
font-weight: 200;
}
.error-bx .text font.text4 {
color: #004256;
font-size: 2.4em;
font-weight: 500;
}
.error-bx .text .goback-bt {
clear: both;
width: 100%;
height: 39px;
margin: 30px 0 0 0;
color: #fff;
font-size: 0.9em;
font-weight: 600;
text-align: center;
border-radius: 6px;
background: url(/assets/error_bt_bg.png);
background-repeat: repeat-x;
overflow: hidden;
}
.error-bx .text .goback-bt a {
width: 100%;
padding: 8px 0 0 0;
color: #fff;
text-decoration: none;
box-sizing: border-box;
display: block;
}
.footer-error {
width: 96%;
padding: 30px 0 50px 0;
margin: 0 auto;
}
.footer-error .column-lt {
width: 100%;
margin: 0 0 20px 0;
color: #545e64;
font-size: 0.8em;
line-height: 2em;
letter-spacing: 0.1em;
}
.footer-error .column-rt {
width: 100%;
text-align: center;
}
/******** site map ********/
.sitemap-content {
width: 100%;
padding: 90px 40px;
box-sizing: border-box;
}
.sitemap-content .title {
width: 100%;
margin: 0 0 40px 0;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx {
width: 100%;
padding: 0 0 0 30px;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.sitemap-content .column-bx .column {
width: 100%;
}
.sitemap-content .column-bx .column ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li {
padding: 0;
margin: 0 0 30px 0;
font-size: 1em;
font-weight: 600;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li a {
color: #000;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li a:hover {
text-decoration: underline;
}
.sitemap-content .column-bx .column ul li ul.snd {
width: 100%;
padding: 0;
margin: 10px 0 0 0;
list-style: none;
display: block;
}
.sitemap-content .column-bx .column ul li ul.snd li {
padding: 0;
margin: 0;
color: #545e64;
font-size: 0.9em;
font-weight: normal;
letter-spacing: 0.1em;
}
.sitemap-content .column-bx .column ul li ul.snd li a {
color: #545e64;
text-decoration: none;
}
.sitemap-content .column-bx .column ul li ul.snd li a:hover {
text-decoration: underline;
}
/******** site map ********/
.main-content .google-map {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.main-content .google-map iframe {
width: 100%;
height: 400px;
}
/******** footer ********/
footer {
clear: both;
width: 100%;
background-image: url("../images/footer_bg_pic.jpg");
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(79,90,96,1);
overflow: hidden;
position: relative;
}
footer .footer-content {
width: 100%;
padding: 30px 0;
margin: 0 auto;
color: #fff;
font-size: 0.8em;
letter-spacing: 0.1em;
background-color: rgba(79,90,96,0.9);
}
footer .footer-content .left-col {
width: 96%;
margin: 0 auto;
}
footer .footer-content .left-col .address {
width: 100%;
}
footer .footer-content .left-col .footer-menu {
width: 100%;
margin: 40px 0 0 0;
line-height: 2em;
}
footer .footer-content .left-col .footer-menu a {
color: #fff;
text-decoration: none;
}
footer .footer-content .left-col .footer-menu a:hover {
text-decoration: underline;
}
footer .footer-content .right-col {
width: 96%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: stretch;
}
footer .footer-content .right-col .footer-menu {
width: 180px;
}
footer .footer-content .right-col .footer-menu ul {
width: 100%;
padding: 30px 0 0 30px;
margin: 0;
list-style: disc;
display: block;
box-sizing: border-box;
}
footer .footer-content .right-col .footer-menu ul li {
padding: 0 0 0 10px;
margin: 0 0 2px 0;
}
footer .footer-content .right-col .footer-menu ul li a {
color: #fff;
text-decoration: none;
}
footer .footer-content .right-col .footer-menu ul li a:hover {
text-decoration: underline;
}
footer .footer-content .right-col .map-icon {
width: 50px;
padding: 0 0 10px 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
}