@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400&display=swap');
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
   /*  -webkit-user-select: none;  */                 /* prevent copy paste, to allow, change 'none' to 'text' */
}
html{
  touch-action: manipulation !important;
  -ms-touch-action: manipulation !important;
}
body{
  -webkit-overflow-scrolling: touch;  
}
a{  -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;}
a:hover{text-decoration: none;}
.rent li a{font-weight: 400}
.rent li:hover a,.rent li:hover i{color:#67accc !important; color: var(--main) !important}
.table th{background-color:#67accc;background-color: var(--main);color: #fff}
.table td, .table th{padding: .75rem .5rem}
#footer p,#footer a:not(.btn){font-size:17px;color: rgb(255 255 255 / .6);margin-bottom: 0;}
#footer ul.links li{display: inline-block;list-style: none;}
#footer ul.links li a{padding: 0px 8px; border-right:1px solid rgb(255 255 255 / .3);color: rgb(255 255 255 / .6);}
#footer ul.links li:first-child a{border-left:1px solid rgb(255 255 255 / .3);}
.header-nav-top .nav >li{position: relative;padding:5px 10px }
.header-nav-top .nav >li:before{
    content: '';
    position: absolute;
    height: 20px;
    border-right: 1px solid #eee;
    right: 5px;
    top: 13px;
}
.language_btn{
    position: relative;
    z-index: 1;
    /* margin-left: 10px;
    width: 118px; */
}
#header .header-nav-top .nav > li > a{color: #666 !important; }
.language_btn > a{
  display: block;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 1px;
  color: #666 !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 37px 5px 16px;
  text-transform: uppercase;
}
.language_btn ul {
  position: absolute;
  top: 110%;
  width: 118px;
  opacity: 0;
  padding-left: 0;
  font-weight: 300;
  letter-spacing: 1px;
  pointer-events: none;
  transition: all .5s;
}
.language_btn.show ul {
  top: 100%;
  opacity: 1;
  pointer-events: auto;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(0 0 0 /0.06);
}
.language_btn ul a {
  display: block;
  padding: 8px 5px;
  text-align: center;
  color: #666 !important;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2
}
.language_btn.show li:hover a{color:var(--main) !important;}
.language_btn ul li{
  list-style: none;
}
.visible-x5{display: none !important}
.hidden-x5{display: block !important}
.titlewithline{position: relative;}
.titlewithline:before {
    content: '';
    position: absolute;
    border-top: 1px solid #53585e;
    width: calc(100% - 150px);
    left: 120px;
    top: 20px;
}
.titlewithline>span{
    position: absolute;
    display: block;
    top: 0px;
    right: 15px;
    font-size: 20px;
    background-color: #021824;
    padding: 5px 8px 
}
.infoBox em {
    font-size: 16px;
    font-weight: bold;
    color: #67accc;
    color: var(--main);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 2px;
    justify-content: center;
}
.left.infoBox em{
    justify-content: flex-start;
}

.infoBox em:after {
    content: '';
    display: inline-block;
    width: 87px;
    height: 1px;
    background-color: #67accc;
    background-color: var(--main);
    color: var(--main);
    margin-left: 14px
}

.infoBox h2 {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    line-height: 44px;
    margin-top: 15px;
    letter-spacing: 2.5px
}
.d-lg-flex.custom-post-event .post-event-date{position: relative;}
.classLink li,ul.nav-list.classLink li {
    position: relative;
    width: 100%;
    /* margin: 0 7px 7px; */
    list-style: none;
    border: 1px solid #fff;
}
.classLink li > a,ul.nav-list.classLink li a{
    position: relative;
    display: block;
    width: 100%;
    color: #444;
    line-height: 24px;
    padding: 10px 60px 10px 20px;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .12em;
    border: 1px solid #ebebeb;
}
.classLink li > a:after,.nav-tabs.research li a:after{
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 7px;
  border-color: transparent transparent transparent #555;
}
.classLink li.active,.classLink li:hover,ul.nav-list.classLink li a.active,ul.nav-list.classLink li:hover a{
    border: 1px solid #67accc;
    border: 1px solid var(--main);
    background-color: #67accc;
    background-color: var(--main)

}
.nav-tabs.research{max-width:255px}
.nav-tabs.research li{
  margin: 0 7px 7px;
  position: relative
}
.nav-tabs.research li a.nav-link{
  position: relative;
  display: block;
  width: 100%;
  color: #444 ;
  line-height: 24px;
  padding: 10px 60px 10px 20px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .12em;
  background-color: #fff;
  border: 1px solid #ebebeb !important;
}
.nav-tabs.research li.active a,.nav-tabs.research li:hover a,.nav-tabs.research li.active a:hover,.nav-tabs.research li.active a:focus{color: #fff !important;background-color: #67accc;}
.classLink li.active > a,.classLink li:hover > a,ul.nav-list.classLink li a.active,ul.nav-list.classLink li:hover a{ color: #fff;}
.classLink li.active > a:after ,.classLink li:hover > a:after,ul.nav-list.classLink li a.active:after,ul.nav-list.classLink li:hover a:after,
.nav-tabs.research li.active a:after,.nav-tabs.research li:hover a:after{border-color: transparent transparent transparent #fff;}
ul.nav-list.classLink li a:before{content: none}
.border-bottom.primary{border-color:#67accc !important;border-color:var(--main) !important }
.testimonial.testimonial-style-5 .testimonial-author {
    border-top: none;
    border-bottom: 2px solid #dbe6eb;
    padding: 6px 0 12px;
}
.file_download{color: #7a7a7a;padding: 0px 10px; border-right: 1px solid #c8c5c5;}
p .file_download:first-child {padding-left: 0px}
p .file_download:last-child{border:none;}
.file_download i{font-size:20px}
ul.rent li:after{
    content: '';
    position: absolute;
    border-right: 1px solid #eee;
    display: block;
    height: 74px;
    top: -19px;
}
ul.rent li:first-child:after{
    content: none;
}
.title_line{    
    text-align: center;
    margin: 25px 0 15px;
    padding: 10px;
    font-size: 15px;
    border-top: 2px solid #67accc;
    border-bottom: 2px solid #67accc;
    font-weight: 600;
    letter-spacing: 2px;
}
.calendar_box{position: relative; padding-bottom: 80%;margin-bottom: 60px;}
.calendar_box iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}  
ol.mapping li,ol.mapping li:before,.graduation ol li{color: #777;}
.graduation ol{border-left: 1px solid #eaeaea;counter-reset: custom-counter;list-style-type:none;padding-left: 20px;margin-bottom: 30px}
.graduation ol li{position: relative;padding-left: 35px; margin-bottom: 15px;}
.graduation ol li:before{
    position: absolute;
    top: 2px;
    left: 0;
    content: counter(custom-counter);
    counter-increment: custom-counter;
    background-color: #777;    
    color: #FFF;
    border: 0;
    min-width: 24px;
    padding: 0;
    text-align: center;
    border-radius: 100%;

}
.right-line:before{
    content: '';
    height: 70%;
    border-right: 1px solid #eee;
    position: absolute;
    right: 10%;
}
.honor-list .row.border-bottom-light{min-height: 157.5px}
.toggle label{margin-bottom: 0;padding-left: 16px;}
.toggle-content{padding: 10px 20px;background-color: #f0f5f8}
a:hover .bg-color-tertiary{
    background-color:#67accc !important;background-color: var(--main) !important;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
a:hover .bg-color-tertiary p,a:hover .bg-color-tertiary i{color: #fff !important;}
.post-image img{width: 100%}
.site_title{
    border-bottom: 1px solid #ddd;
    color: #000;
    font-size: 16px;
    display: block;
    font-weight: 500;
    margin-bottom: 15px;
    position: relative;
}
.site_title p{
    margin-bottom: 0;
    margin-top: 25px;
    padding-bottom: 15px;
}
.site_title:before {
    content: "";
    width: 10px;
    height: 1px;
    background-color: #000;
    display: block;
    position: absolute;
    right: 0;
    top: 9px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.site_title:after {
    content: "";
    width: 10px;
    height: 1px;
    background-color: #000;
    display: block;
    position: absolute;
    right: 0;
    top: 16px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
ul.custom{list-style: none}
ul.custom li{position: relative;padding-left: 20px;margin-bottom: 5px;}
ul.custom li a{color: #656565}
ul.custom li a:hover{color: #67accc;color: var(--main)}
ul.custom li:before{
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #656565;
    position: absolute;
    top: 12px;
    left: 0;
}
.video-cover {
    padding-top: 53.7%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}
.play-btn {
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background-color:transparent;
  border:0;
  background-color: #67accc;
  background-color: var(--main);
  width: 6rem;
  height: 6rem;
  border-radius: 50px;
  box-shadow: 0 0 0px 4px #67accc;
  border: 3px solid #fff;
}
.play-btn i{font-size: 1.8rem;line-height: 5.8rem;color:#fff;}
.play-btn:hover,.video_box .thumb-info {
  cursor:pointer;
}
.post_date p{
  padding: 15px 2px;
  margin-bottom: 0px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  letter-spacing: 1.5px;
  font-weight: 500;
  color: #999;
}
.post_date p.tagname{color:#086ea8;color: var(--main);border-top:2px solid #086ea8;border-top: 2px solid var(--main);
  font-size: 20px;letter-spacing: 2px}
.post_date a{color: #999;font-size: 16px;}
.post_date a:hover{color:#67accc ;color: var(--main)}
.post_date_back{padding: 25px 2px;}
.icon_close{
    background-color: #999;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    margin-right: 12px;
    color: #fff;
    font-size: 24px;
}
.border-bottom-light.border-top-light{border-bottom-width:2px !important;border-top-width:2px !important;}
.breadcrumb li{
    padding: 5px 12px 5px 12px;
    /* border-right: 1px solid #e5e4e4; */
    line-height: 1;
    letter-spacing: 2px;
    position: relative;
}
.breadcrumb li:before{
    content: '\f105';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    color: #c2c0c0;
    position:absolute;
    right: -7px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.breadcrumb li:last-child:before{
  content: none;
}
.crumb.border-bottom-light{
    position: relative;
    border-bottom: 1px solid rgb(103 172 204 / .4) !important;
}
.crumb.border-bottom-light:after{
    content: '';
    position: absolute;
    border-bottom: 1px solid rgb(103 172 204 / .3);
    opacity: .7;
    display: block;
    width: 97%;
    left: 1.5%;
    bottom: -8px;
}
.form-control-lg{font-size: 1.1rem}
.sport span,.sport p,.sport h1,.sport h2,.sport h3,.sport h4,.sport h5,.sport h6{
  font-family: var(--font) !important;
}
.min-height{
   min-height:calc(100vh - 443px) ;
}
.thumb-info-caption-text a{min-height: 56px}
.list-icons-style-3 li a{word-break: break-all;}
.simple-search input{
  min-height: 50px;
  border-radius: 25px 0 0 25px !important;
}
.simple-search .input-group-append.bg-light{border-radius: 0 25px 25px 0 !important}
.enterdata{
    background: #eee;
    padding: 3px 10px;
    border-radius: 25px;
}
.event_lineh{
  line-height: 6.5;
  flex: 0 0 20%;
}
.modal-header .close{position: absolute; right: 10px; top: 10px;}
.modal-body h5{font-weight: 400;line-height: 1.6;}
.uploadfile{
  width: 0.1px; 
  height: 0.1px; 
  opacity: 0; 
  overflow: hidden; 
  position: absolute; 
  z-index: -1;
}
.uploadfile + label {
    width: calc(100%);
    font-size: 1.2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    color: #727272;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    margin-bottom: 0px;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    align-items: flex-end;
    justify-content: center;

}
.uploadfile + label span{
  width: 100%;margin-bottom: 20px
}
.upload_area .card-body{
  border: 2px dashed #eee;
  padding: 2rem 15px;
}
.upload_area img{
  opacity: .3;
  width: 80px;
  display: block;
  margin: 7px auto;
}
.form-control:disabled, .form-control[readonly]{
  background-color: #f7f7f7;
  opacity: 1;
  color: #999;
}
.member_bg-color{background-color: #f6f9fe !important}
.min-vh{
  min-height: calc(100vh - 236px)
}
.min-100{min-height: 100%}
.language_btn a.hidden-x5{padding-left: 0}
.header-nav-top .nav >li.member_nav:before{content: none;}
#header .header-nav-top .nav >li.member_nav a{
  border: 1px solid #67accc;border: 1px solid var(--main);
  padding: 3px 10px;
  border-radius: 25px !important;
  color: #67accc !important;color: var(--main) !important;
  margin-top: 2px;
}
.btn-check{
  font-size: 16px;
  color: #fff;
  background-color: #6baecd;
  border-radius: 4px
}
.btn-check:hover{
  color: #fff !important;
  background-color: #3b90b8;
}
.table.work th{
  height: 60px;
  font-weight: 600;
  background-color: #fff;
  color: #788f9f;
  font-size: 20px;
  padding: 6px 12px; 
  vertical-align: middle;
  border-top: none;
}
.table.work td{
  vertical-align: middle;
  padding: 6px 12px;
  height: 60px
}
.min-vh .member_nav{
  background-color: #6baecd;
}
.member_nav .nav li a{color: rgb(255 255 255 / 0.6);font-weight: 600;font-size: 18px;padding: 16px;
-webkit-transition: all 0.4s ease;  -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.member_nav ul.nav-list li a:before{right: 12px; left: auto; top: 16px;}
.member_nav .nav li a.active,.member_nav .nav li:hover a{color: #fff !important;font-weight: 700;font-size: 19px;}
.work_data{padding-left: 0}
.work_data li{
  position: relative;
  display: inline-block;
  font-size: 18px;
  padding: 5px 20px
}
.work_data li:before{
  content: '';
  position: absolute;
  border-right: 1px solid #eee;
  height: 30px;
  left: 0px;
}
.work_data li:last-child:after{
  content: '';
  position: absolute;
  border-right: 1px solid #eee;
  height: 30px;
  right: 0px;
}
.btn-2{font-size: 16px; background-color: #d87235;border-color: #d87235;color: #fff}
.btn-2:hover{background-color: #cc6425;border-color: #cc6425;color: #fff!important}
.btn-3{font-size: 16px; background-color: #3677a5;border-color: #3677a5;color: #fff}
.btn-3:hover{background-color:#296793;border-color:#296793;color: #fff !important}
.main-video iframe{
  max-width: 100%;
}
.post-event-content .d-lg-flex a{flex:0 0 20%;}















:root{
    --font:-apple-system,'Noto Sans TC', "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    --main:#67accc;
    /* --maindark:;
    --maindlight:;
    --second:;
    --seconddark:;
    --seconddlight:; */
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 6px;
}

::-webkit-scrollbar:horizontal {
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .3);
    border-radius: 10px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent; 
}

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (min-width: 1440px){
  .container {
    max-width: 1240px;
  }
}

@media (max-width: 1367px) {}


@media (max-width: 1025px) {
  .header-logo img{width: 200px}
}

@media screen and (max-width: 1025px) and (min-width: 770px){
  #header .header-nav-main nav > ul > li > a{font-size: 15px}
}

@media (max-width: 769px) {
    .btn.album{position: relative;z-index: 10}
    table.table{min-width: 900px}
    .event_lineh{flex: 0 0 25%;line-height: 10.5}
}


 /*iphone plus*/
@media (max-width: 415px) {
    .cover.w200.h60,.custom-post-event .cover.w200{width: 100%; }
    .d-lg-flex.custom-post-event .post-event-date{position: absolute;}
    .totop.contain.h60.w200{width: 130px}
    .custom-section-padding-1{padding: 70px 0 50px !important}
    .page-header.page-header-modern.page-header-background.page-header-background-sm{padding: 30px}
    .post-image img{width: 70%}
    .enterdata{margin-top:5px} 
    .event_lineh{line-height: 3;width: 100%;}
    #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span{padding: 6px 4px !important}
    #header .header-nav-top .nav >li.member_nav a{padding: 2px 6px !important;}
    .main-video iframe{max-height: 190px}
    .member_nav{overflow: hidden;}
    .member_nav .flex-sm-column{display: flex; overflow-x: scroll; flex-wrap: nowrap;}
    .member_nav .flex-sm-column li{display: inline-block;white-space: nowrap}
    .member_nav .flex-sm-column li a{display: inline-block;padding: 18px 10px;} 
    .member_nav ul.flex-sm-column li a:before{
      content: '';
      border-right: 1px solid #c6dfeb;
      height: 20px;
      right: 0 !important;
      top: 20px;
    }
    .work_data li{padding:5px 20px 5px 0px }
    .work_data li:before,.work_data li:last-child:after{content: none;}
}


/*iphone: 7px*/
@media (max-width: 376px) {}



/*iphone 5*/
@media (max-width: 321px) {
  .visible-x5{display: block !important}
  .hidden-x5{display: none !important}
  .header-top .container{padding: 0 10px}
  #header .header-nav-top .nav > li > a{font-size: 13px}
  .header-nav-top .nav >li{padding: 5px 8px}

}


/*iPhone XR*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { 



}

/*iPhone XS*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

}

/*iPhone XS Max*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { 


}
/*橫拿*/
@media screen and  (orientation:landscape) {}
/*縱拿*/
@media screen and (orientation:portrait) {}
/*設備寬高比*/
@media screen and (device-aspect-ratio: 16/9) {}