@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,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{
  transition: background 1s ease;
  -webkit-overflow-scrolling: touch;  
  padding-top: constant(safe-area-inset-top);   /* 針對ios APP */
  padding-right: constant(safe-area-inset-right);  /* 針對ios APP */
  padding-bottom: constant(safe-area-inset-bottom); /* 針對ios APP */
  padding-left: constant(safe-area-inset-left); /* 針對ios APP */
}
.font-size28-80{
    --min-size: 28;
    --max-size: 80;
    --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.enfont{
  font-family: "Bona Nova SC", serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.font-weight-medium{
    font-weight: 400;
}
.z-index-2{
    z-index: 2
}
.p-relative{
    position: relative;
}
.opacity-7{
    opacity: .7;
}
.text-primary{
    color: var(--brand_color2) !important;
}
.right-nav.login{
    margin-left: 40px;
    position: relative;
}
.right-nav.login:before{
    content: '';
    border-left: 1px solid #fff4;
    height: 20px;
    position: absolute;
    left: -20px;
    top: calc((100% - 20px) / 2);
}
.navbar form,.mobile_nav_wrapper form{position: relative;}
.navbar form button,.mobile_nav_wrapper form button{
    position: absolute;
    top: 0;
    right: 0;
}
.navbar form button:focus,.navbar form button:hover,
.mobile_nav_wrapper form button:focus,.mobile_nav_wrapper form button:hover,
.forum-right-sidebar-widget form.widget-content button:hover,.forum-right-sidebar-widget form.widget-content button:focus,
.user-details-widget form button:focus,.user-details-widget form button:hover{
    border:none;
    box-shadow:none;
}
form.widget-content button,.user-details-widget form button:not(.action_btn){
    position: absolute;
    top: 38%;
    right: 0;
}
.dark_menu .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link,.dark_menu .menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link,
.menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link{color:#fff;}
.dark_menu .menu > .nav-item.submenu .dropdown-menu .nav-item .nav-link:before,.menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link:before{background: #fff;bottom:-5px;}
.side_menu .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link:before{width: 30%;}
.banner-area-6{background: rgb(40 61 90) url(../img/banner1.jpg) 25% / cover;}
.banner-area-9 .banner-shapes .shape,.footer-shapes .shape{
    filter: invert(1);
}
.arrow_carrot-down_alt2.mobile_dropdown_icon{width: 100%;}
.arrow_carrot-down_alt2:before{
    width: 100%;
    display: block;
    text-align: right;
}
 .menu > .nav-item:hover > i.mobile_dropdown_icon{color:#fff;}
 .side_menu .dropdown-menu li a{width: 100%;}
.deco_turtle{
    filter: hue-rotate(162deg) saturate(1) contrast(1.2) grayscale(.2) invert(16%);margin-top: -80px;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.index .banner-shapes .shape{
    filter: invert(1);
}
.newsInfoBox{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #333333;
    padding-right: 20px;
}
.newsInfoBox .day {
    font-size: 40px;
    font-weight: 500;
    margin-right: 8px;
}
.newsInfoBox .year {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.cover16_9{
    aspect-ratio:16/9;
    overflow: hidden;
    object-fit:cover;
    border-radius: 10px;
}
.resources_cate li{
    display: inline-block;
    margin-right: 8px;
}
.resources_cate li a{
    padding: 8px 25px;
    background-color: #fff;
    border-radius: 4px;
    display: block;
    text-align: center;
    width: 125px;
    border: 2px solid rgb(218 228 240);
}
.resources_cate li a.active,.resources_cate li a:hover{
    border: 2px solid rgb(218 228 240);
    background-color: var(--brand_color);
    color: #fff;
}
.resources_cate.index{
    /*background: #fff;*/
    padding: 10px 0px;
    border-radius: 50px;
    width: 90%;
    /*display: flex;*/
    /*justify-content: space-evenly;*/
    /*gap:15px;*/

}
.resources_cate.index li{
    padding: 10px;   
    display: flex;
    align-items: center;
    border-bottom: 1px dashed;
    justify-content: space-between; 
    /*border-radius: 50px;*/
    /*width: calc(100% / 4);*/
    /*text-align: center;*/
    font-size: 18px;
    list-style: none;
    /*display: inline-block;*/
    transition: all 0.3s ease-in-out;
}
/*.resources_cate li.active,.resources_cate li:hover{
    color: var(--brand_color2);
    font-weight: 600;
}*/
.resources_cate.index li.active a,.resources_cate.index li:hover a,.resources_cate.index li.active i,.resources_cate.index li:hover i{
    color:var(--brand_color2);
    font-weight: 600;
    background-color: transparent;
}

.resources_cate.index li a{
    color:#444;
    width: 100%;
    border:none;
    text-align: left;
}
.cate_box{
    margin: 5px 0 15px;
}
.card{
    border-radius: 10px;
    border-color:#e4e2e2;
    margin-bottom: 25px;
    transition: all 0.3s ease-in-out;
}
.card h4{
    position: relative;
    font-size: 18px;
    z-index: 2;
}
.custom-sidebar-btn .icon_pencil{
    display: inline-block;
    transform: scaleX(-1);
}
.navbar-nav .nav-item{
    position: relative;
}
/*.navbar-nav .nav-item::before {
    content: attr(data-storke);
    position: absolute;
    z-index: -1;
    -webkit-text-stroke: 4px #192341;
    text-stroke: 4px #192341;
}*/
.user,.user-index{
    display: flex;
    align-items: center;
}
.user img{
    width: 50px;
    height: 50px;
}
.border-left-light{
    border-left: 1px solid #eee;
}
.banner_animal{
    background: linear-gradient(to top, #001b35, transparent);
    margin-top: -6%;
}
.deco_pattern{
   /* background: linear-gradient(54deg, rgb(0 26 128 / 55%) 14%, rgb(66 11 153 / 38%) 32%, rgb(58 134 196 / 27%) 71%);
    height: 100%;
    width: 100vw;
    position: absolute;
    top: 0;*/
/*    position: absolute;
    width: 50%;
    height: 100vh;
    background-image: url(../img/deco_banner4.png);
    background-position: center;
    background-size: cover;
    right: 0;
    bottom:0;*/
}
.icon_cate{
    position: relative;
    height: 135px;
    overflow: hidden;
}
.icon_cate:before{
    content: '';
    position: absolute;
    width: 45%;
    max-width: 130px;
    aspect-ratio:1/1;
    background-size: cover;
    right: -20px;
    bottom: -18%;
    opacity: .06;
    /*transition: all 0.3s ease-in-out;*/

}
.icon_cate.v1:before{
    background-image: url(../img/icon/wave.png)
}
.icon_cate.v2:before{
    background-image: url(../img/icon/dolphin.png);
}
.icon_cate.v3:before{
    background-image: url(../img/icon/reels.png);
    transform: scale(.8);
}
.icon_cate  span{
    background-color: #eee;
    padding: 5px 12px;
    border-radius: 25px;
    border: 1px solid #ddd;
    color: #444;
    font-size: 14px;
}
.re_cate{
    display: inline-block;
    background-color: #eee;
    padding: 0px 12px;
    border-radius: 25px;
    border: 1px solid #ddd;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}
.widget-content .icon_cate{
    height: auto;
}
.resources_list li{
    display: block !important;
    border-bottom:1px solid #eee;
    padding-bottom: 10px ;
    margin-bottom: 10px;
}
.resources_list li a{
    display: block;
}
.card:hover{
    transform: translateY(-10px);
    box-shadow: 0 0 15px rgba(0,0,0,5%);
}
.card:hover,.card:hover span{
    border-color:  #bed0f0;
}
.card:hover span{
    background-color:  #ecf3ff;
}
.card:hover span,.card:hover >h4{
    color: var(--brand_color2);
}
.card .title-1{
    position: relative;
    z-index: 2;
}
.icon_cate:hover:before{
    filter:invert(70%) sepia(28%) saturate(457%) hue-rotate(191deg) brightness(108%) contrast(96%);
    opacity: .3;
}
.index-question-area{
    background: linear-gradient(to top, #acd8eeb8 0%, #e6ecf3 100%), url(../img/deco/bg_noise.jpg) !important;
}
.waves {
    position: absolute;
    width: 100%;
    height: 15vh;
    top: -15vh;
    margin-bottom: -7px;
    /* 修复 Safari 等浏览器下方空隙 */
    min-height: 100px;
    max-height: 150px;
  }

  /* 动画 */
  .parallax>use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  }

  .parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }

  .parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }

  .parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }

  .parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }

  @keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }

    100% {
      transform: translate3d(85px, 0, 0);
    }
  }
  .deco_fish{
    background-image: url(../img/deco/deco_schollfish.png);
    width: 30vw;
    aspect-ratio: 30 / 26;
    position: absolute;
    background-size: cover;
    filter: invert(1);
    z-index: 0;
    opacity: .2;
    transform: translate(-25% ,5%) scale(.75);
  }

.latest-news-area .container-xl{
    position: relative;
    z-index: 3;
}
.latest-news-area:before{
    content: '';
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
    background: linear-gradient(to bottom, #011b35 20%, #326281 70%, #122b4300 120%);
}
.page-svg svg{
   position: absolute;
}
.btn-line{
    padding: 9px 24px;
    border:1px solid var(--brand_color);
    color: var(--brand_color);  

}
.btn-line:hover{
    background-color: #e1f1ff;
    border-color: #00428e00;
    color: var(--brand_color); 
    box-shadow:0px 7px 20px 0 rgb(226 240 252) !important;
}
.modal-header,.modal-footer{border:0;}
.form-control{height: 60px;}
.signup_area .form-group{
    margin-bottom: 15px;
}
.btn:hover, a:hover,.sign_inner p a:hover {
    color: var(--link);
}
.signup_inner img{
    max-width: 350px;
}
.breadcrumb {
    background: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.breadcrumb > li {
    display: inline-block;
    font-size:15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: none;
}

.breadcrumb > li + li:before {
    color: inherit;
    opacity: 0.5;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: "\f105";
    padding: 0 7px 0 5px;
}

.breadcrumb.breadcrumb-dividers-no-opacity > li + li:before {
    opacity: 1;
}

.breadcrumb.breadcrumb-style-2 > li + li:before {
    content: "/";
}

.breadcrumb.breadcrumb-block {
    background: var(--dark);
    display: inline-block !important;
    padding: 7.2px 19.2px;
    padding: .45rem 1.2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.breadcrumb.breadcrumb-light {
    color: var(--light);
}

.breadcrumb.breadcrumb-light a {
    color: var(--light);
}

.breadcrumb.breadcrumb-light .active {
    opacity: 0.7;
}
.breadcrumb a i{
    font-size: 20px;
}
.banner-area-9 .bgwave,.index-question-area .bgwave{
    pointer-events: none;
    position: absolute;
    z-index: 4;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 130px;
    background-image: url(../img/deco/banner_ripple.png);
    background-repeat: repeat-x;
    background-position-y: center;
    -webkit-animation: 35s wave linear infinite;
    animation: 35s wave linear infinite;
}
.index-question-area .bgwave{
    top:-100px;
}
@keyframes  wave{
    0% {
    background-position-x: -2099px;
    }
    100% {
        background-position-x: 2099px;
    }
}
.main_area{
    background-color: #e6ecf3;
}
.main_area .single-news-widget{
    margin:0 0 25px 0;
}
.shareBox .link {
  display: inline-block;
  font-size: 2.2rem;
  line-height: 1;
  padding: 4px 8px;
  color: var(--brand_color2);
  position: relative;
  border-radius: 50px;
  border: 1px solid var(--link);
  margin-left: 10px;
}
.shareBox .link .icon {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: baseline;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter:  invert(50%) sepia(65%) saturate(773%) hue-rotate(161deg) brightness(127%) contrast(51%);
    transition: all 280ms ease;
    position: relative;
    top: 2px;
}
.shareBox .link .icon.icon-fb {
    background-image: url(../img/icon/fb.svg);
}
.shareBox .link .icon.icon-line {
    background-image: url(../img/icon/line.svg);
}
.shareBox .link::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background-color:var(--brand_color2);
    transition: all 280ms ease;
}
.shareBox .link:hover .icon {
    filter: none;
}
.shareBox .link:hover::before {
    width: 50px;
    height: 50px;
}
.bg-pageTop{
    background: url(../img/pagetop.jpg)  right/cover no-repeat; 
}
.blog_single_item h1{
    /*border-bottom: solid 3px #ddd;*/
    /*padding-bottom: 15px;*/
    /*color: var(--brand_color);*/
    position: relative;
     --min-size: 24;
    --max-size: 30;
    --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
/*.blog_single_item h1:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}*/
.blog_single_item .newsInfoBox{
    justify-content: end;
}
.blog_related_post .single-news-widget{
    box-shadow: none;
}
.blog_related_post .row .col-lg-4:not(:first-child) .single-news-widget{
   position: relative;
}
.blog_related_post .row .col-lg-4:not(:first-child) .single-news-widget:before{
    content: '';
    position: absolute;
    border-left: 1px solid #efefef;
    left: -10px;
    height: 80%;
    top: 10%;
}
.blog_related_post .newsInfoBox{
    padding-right: 10px;
}
.blog_related_post .newsInfoBox .day{
    font-size: 30px;
}
.blog_related_post .single-news-widget .news-content{
    padding: 15px 10px 5px 10px;
}
.blog_related_post .single-news-widget .news-content h5{
    margin: 5px 0;
}
.blog_data{
    background-color: #fff;
    position: relative;
    margin: 2em 0;
    padding: 1em 1em .5em;
    border: solid 1px #57b8e9;
    border-radius: 5px;
}
.blog_data .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #57b8e9;
    font-weight: bold;
}
.blog_data p {
    margin: 0; 
    padding: 0;
}
.blog_data table td,.blog_data table td a,.detail_content table td,.detail_content table td a{
    border:0;
    width: 33.33%;
    color: #666;
    letter-spacing: 1px;
}
.blog_data table td a:hover,.detail_content table td a:hover{
    color: #57b8e9;
}
.blog_data table th,.detail_content table th{
    position: relative;
    font-size: 18px;
     border:0;
     line-height: 1;
    color:#0d87c4;
}
.title_sub{
    position: relative;
    padding-left: 2rem
}
.title_sub:before{
    content: '';
    position: absolute;
    border-left: 1px solid #444;
    left: 8px;
    transform: rotate(36deg);
    height: 50px;
    top: -12px;
}
.detail_content iframe{
    width: 100%;
    aspect-ratio:16/9;
    display: block;
}

@media (min-width: 1200px) {
    .detail_content iframe{ 
        width: 83.3333333333%;
        margin: 0 auto 20px;
    }
}
.like_btn{
    background-color: #efefef;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid #eee;
    color: #c0bfbf;
    font-size: 16px;
    width: 60px;
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.like_btn:hover,.like_btn:active{
    color: #fff;
    background-color: #ed8b83;
}
.like_btn.add{
    font-size: 17px;
    color: #fff;
    background-color: #ed8b83;
    /*border-radius: 50px;*/
}
.comment_scroll{
    position: relative;
    max-height: 600px;
    overflow-y: scroll;
}
.fix_bottom{
    position: relative;
    bottom:0;
    width: 100%;   
    /*padding: 15px;*/
    height: auto;

}
/*.fix_bottom .input-group .btn{
   height: 100%;
    font-size: 22px;
    position: absolute;
    right: 4px;
    border: 0;
}*/
.widget-header h4{
    margin-bottom: 0;
}
.forum-post-btm.blog_social:after,.d-flex.blog_social:after{
    content:none;
}
.share_drop .dropdown-item{
    color:#777;
    letter-spacing: 1px;
    font-size: 15px;
}
.share_drop .dropdown-item i{
    font-size: 18px;
}
.dropdown.share_drop  .dropdown-toggle::after{
    content:none;
}
.btn_more.rotate-0{
    transform: rotate(0deg);
}
.btn_more{
    width: 40px;
    aspect-ratio: 1 / 1;
    line-height: 40px;
    background-color: #eee;
    text-align: center;
    transform: rotate(45deg);
    border-radius: 50px;
    margin: 0 10px;
}
.btn_more:hover ,.card:hover .btn_more{
    background-color:var(--link);
    color:#fff;
}
.btn_more::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: var(--link);
}   
.btn_more:hover::after ,.card:hover .btn_more::after{
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: scale 1.5s ease-in-out infinite;
    animation: scale 1.5s ease-in-out infinite;
}
.d-flex .btn_more{
    flex-shrink: 0;
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.3);
            transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.3;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.8);
            transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}
@keyframes scale {
  0% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.3);
            transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.3;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.8);
            transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}
.resources_list .resources_item .card{
    aspect-ratio:1.5/1;
    height: auto;
}
.resources_more_link{
    position: absolute;
    display: flex;
    align-items: center;
    bottom:20px;
}
.navLinkBox {
    padding-right: 10px;
}
.navLinkBox .navLink {
    display: block;
    padding: 16px;
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 600;
    background-color: rgb(255 255 255);
    margin-bottom: 24px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #a2bcda;
    transition: all 0.1s ease;
}
.navLinkBox .navLink:hover,
.navLinkBox .navLink.active {
    background-color: var(--brand_color);
    border: 3px solid #a4bbe6;
    color: #fff;
}

.navLinkBox .navLink .title {
    display: block;
    color: var(--brand_color2);
    transition: inherit;
}
.navLinkBox .navLink .subtitle {
    font-size: 0.8em;
    font-weight: 500;
    display: block;
    margin-bottom: 0;
    color: #78a9e3;
    transition: inherit;
}
.navLinkBox .navLink:hover .subtitle,
.navLinkBox .navLink:hover .title,
.navLinkBox .navLink.active .subtitle,
.navLinkBox .navLink.active .title {
    color: #fff;
}
.user-details-widget .all-question-widget-2 .single-question-widget-2:nth-child(1),.all-question-widget-2 .single-question-widget-2:nth-child(1){
    margin-top: 0;
}
.login_form .form-group textarea.form-control{
    min-height: 200px;
}
ul.ks-cboxtags {
  list-style: none;
  padding: 20px; 
}
ul.ks-cboxtags li {
    display: inline-block; 
    position: relative;
   width: calc(100% / 4.1);
}
ul.ks-cboxtags li label {
  display: inline-block;
  color: #333333;
  background-color: #fbfcfd;
  font-size: 18px;
  border: 1px solid #e3e8ea;
  border-radius: 8px;
  white-space: nowrap;
  margin: 0 0 10px 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  display: block; 
}
ul.ks-cboxtags li label {
  padding: 10px 20px;
  cursor: pointer; }
ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 24px;
    padding: 0;
    margin-right: 15px;
    content: "\f1db";
    color: rgba(0, 0, 0, 0.2);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    position: absolute;
    right: 0px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }

@media (prefers-reduced-motion: reduce) {
      ul.ks-cboxtags li label::before {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } 
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label{
    background-color: var(--link);
    color: #fff;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
  content: "\f058";
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: -webkit-transform .3s ease-in-out;
  -o-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
  color: #fff; 
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s; }

ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute; 
}

ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0; 
}
.publish_box{
    background: url(../img/ask_bg.png) center/cover;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 25px;
    margin: 20px 15px 15px;
    border-radius: 15px;
    box-shadow: 0px 11px 11px rgb(21 103 162 / 15%);
}
.publish_box .custom-sidebar-btn{
    background: #fff !important;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: inline-block;
    color: var(--brand_color);
}

.en-title{
    font-size: 8em;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1.5px;
    white-space: nowrap;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    position: absolute;
    right: 18%;
    top: 3%;

}
.user-index img{width: 50px;}
.widget-content .user-index img{width: 30px;}
.author-avatar img{width: 40px;}
.login_form{
    position: relative;
    z-index: 99;
}
.deco_ani{
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    background-position: center;
    background-size: contain;;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0
}
.deco_ani.s1{
    width: 12rem;
    aspect-ratio: 8 / 10;
    top:30%;
    left:0;
}

.deco_ani.s2{
    width: 10rem;
    right: 0;
    left: auto;
    aspect-ratio: 68 / 53;
    /* z-index:3; */
}

.deco_ani.s3{
    top: 70%;
    width: 20rem;
    aspect-ratio: 8 / 10;
    right: -3%;
     /* z-index:3; */
}

.deco_ani.s4{
    top: 50%;
    width: 12rem;
    aspect-ratio: 5 / 4;
    left: 2%;
     /* z-index:3; */
}

.preview-outter {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 15px;
    position: relative;
}
.preview-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/upload.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e9eaea;
}
.article_slider .single-news-widget{
    box-shadow: none;
    margin: 0;
}
.article_slider .user-index img{
    width: 35px;
}
.article_slider .tag_box{
    height: 64px;
    max-height: 64px;
    overflow-y: hidden;
}
.article_slider .slick-slide{
    padding: 10px;
}
.article_slider .slick-slide>div{
    margin-bottom: 20px;
}
.article_content{
    flex: 1 0 83%;
}
.article_cover{
    margin-left: 8px;
    width: 80%;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
}
.article_cover img{
    width: 100%;
    height: 90%;
    border-radius: 10px;
    margin-bottom: 10px;
    object-fit: cover;
    object-position: center;
}
.article .single-question-widget-2{
    padding: 20px 15px 30px 15px;
}

.forum-statistics .statistics-widget img{
    width: 40%;
    filter: hue-rotate(35deg) opacity(1) drop-shadow(2px 4px 6px #3cc4e0);
}
.forum-statistics .round-sm{
    background:#000;
    color: #fff;
    position: relative;
}
.forum-statistics .round-sm::before{
    content: '';
    background:linear-gradient(81deg, #4b85ae, #244691);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.forum-statistics .action_btn{
    background:white;
    border-color: white;
    color: var(--brand_color);
}
.forum-statistics .action_btn:hover,.forum-statistics .action_btn:focus{
    background: #a5bbe8;
    border-color: #a5bbe8;
    color: #fff;
}
.forum-statistics .border-left-light{
    border-color: #698cb6;
}
.forum-post-content > .img-fluid{
    display: block;
    max-width: 80%;
    height: auto;
    margin: 10px auto;
}
.delupImg{
    position: absolute;
    background-color: #fff;
    border-radius: 20px;
    z-index: 2;
    width: 31px;
    height: 31px;
    right: -5px;
    top: 18px;
    display: none;
}
.delupImg i{
    text-shadow: none;
    top: 0px;
    right: 0px;
}
.filter_btn{
    margin: 2rem 0 -20px 15px;
}
.filter_btn .btn-secondary {
    color: #686868;
    background-color: #ebeaea;
    border-color: #ebeaea;
}
.filter_btn .dropdown-menu li a{
    color:var(--brand_color);
    position: relative;
}
.filter_btn .dropdown-menu li a.active{
    background-color: #eff5f8;
}
.filter_btn .dropdown-menu li a.active:before{
    color:var(--brand_color);
    position: absolute;
    content:'\4e';
    font-family: 'ElegantIcons';
    font-size: 16px;
    right: 8px;

}











:root{
    --font:'Microsoft JhengHei',-apple-system, "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;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

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

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

::-webkit-scrollbar-thumb {
    background-color:#00428e;
    border-radius: 10px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: #e5f0fc; 
    border-radius: 
}

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (max-width: 1441px) {
    .deco_ani.s1{
        top:10%;
        left:-6%;
    }

    .deco_ani.s2{    
        top: 7%;
        right:-2%;
    }

    .deco_ani.s3{
        right: -10%;
    }

    .deco_ani.s4{
        top: 50%;
        left: -6%;
    }
    .en-title{
        right: 18%;
    }
    .sign_left {
        width: calc(72% - 0px);
        padding: 50px 45px 0;
        height: 100vh;
        position: fixed;
        transform: translateX(0px);

    }
    .sign_right {
        width: calc(28% + 0px);
        margin-left: 70%;
        transform: translateX(-100px);
    }
}


@media (max-width: 1181px) {
    .deco_ani{display: none;}
    .navbar .search-input{margin-left: 0rem;width: 160px;}
    .waves {top: -97px; height: 80px;}
    .en-title { right: 44%;}
    .sign_left{width: 80%;}
    .signup_area{height: 100vh;}
    .sign_right {
        margin-left: 59%;
    }
    .banner-area-6 .banner-text{
        font-weight: 600;
        text-shadow: 0 0 10px rgb(1, 43, 83);
    }
    .banner_animal .col-xl-4{transform: scale(1.3) translate(10% ,-20%)}
    .deco_fish{width: 60vw;}
    ul.ks-cboxtags li{    width: calc(100% / 2.1);}
    .article_cover img{width: 100px;height: 100px;}
    /*.nav-item.m-login{
        background-color: #fff;
        border-radius: 10px;
        margin-top: 16px;
        color: var(--brand_color);
        text-align: center;
        padding: 10px;
    }
    .nav-item.m-login a{
        color: var(--brand_color3) !important;
        font-size: 15px;
    }*/
    /*.sign_left{
        width: 100%;
        position: relative;
        height: 38vh;
    }*/
}


@media (max-width: 821px) {
    .forum-right-sidebar-widget .single-widget-box.related-topic ul li span{        
        width: 30px;
        line-height: 1.3;
        flex-shrink: 0;
        height: 30px;}
    .sign_left {
        width: 67%;
    }
    .sign_right {
         overflow-x: hidden;
    }    
    .banner_animal{margin-top: -22%;}
    .banner_animal > .col-xl-4{transform:scale(1.5) translateY(-36%);}
    .deco_stingray{
        position: relative;
        left: 18%;
    }
    .deco_turtle{
        margin-top: 40px;
    }
    .deco_fish{width: 60vw;}
    .article_cover img{width: 70px;height: 70px;}
    .user-details-widget .widget-body{padding: 15px}
    .user-details-widget .all-question-widget-2 .single-question-widget-2{padding: 20px 5px;}
}
@media(max-width:600px){
    .header_search_form-4 .input-wrapper .custom-select{width: 80px;}
    .nice-select .option{padding: 0 10px;}
    .deco_stingray{
        /*left: 22%;*/
        top: -20px;
        transform: scale(1.5);
    }
    .deco_turtle{
        z-index: 0;
        margin-top: 22px;
    }
    .deco_fish {
        transform: translateX(-15px);
    }
    .resources_cate.index{width: 100%;}
    .resources_cate.index li{ display: inline-flex; width: 46%; margin: 0 5px; }
    .waves{height: 10vh;top: -100px;}
    .sec_pad,.blog_area{padding-top: 50px;}
    .xs-flex-wrap{flex-wrap: wrap;}
    .d-flex.xs-flex-wrap{display: block !important;}
    .d-flex.xs-flex-wrap > div:not(.forum-post-top){text-align: right;}
    .blog_single_item .newsInfoBox{justify-content: start;}
    .blog_related_post .row .col-lg-4:not(:first-child) .single-news-widget:before{content: none}
    .blog_social.text-center{text-align: left !important}
    .resources_cate li{margin-right: 0;}
    .icon_cate span{font-size:18px;}
    .card h4{font-size: 20px;}
    .resources_list .resources_item .card{max-height: 220px; width: 100%;}
    .contact-tb th{display: none;}
    .contact-tb td{display: block;position: relative;width: 100% !important}
    .contact-tb td:before{
        content: attr(data-th) " : ";
        font-weight: bold;
        width: auto;
        display: inline-block;
    }
    .navScrollbox {
        overflow-x: auto;
        margin-bottom: 16px;
        /*margin-right: -15px;*/
    }
    .navLinkBox {
        padding-right: 0;
        /*display: flex;*/
        width: auto;
        white-space: nowrap;

    }
    .navLinkBox .navLink{
        display: inline-block;
        vertical-align: text-top;
        padding: 12px 15px;
        margin-right: 8px;
        font-size: 1rem;
        min-height: 70px;
        margin-bottom: 16px;
        flex: 1;
    }
    .signup_left,.signin_left{
        width: 100%;
        height: auto;
        aspect-ratio: 20 / 13;
        position: relative;
    }
    .en-title {
        right: 7%;
        font-size: 5rem;
    }
    .sign_right {
        width: 90%;
        margin-left: 1%;
        transform: translateX(0px);
    }
    .signup_area{height: auto;}
    .sign_left img{display: none;}
    .forum-statistics .statistics-widget img{width: 30%;margin-left: 25px}
    .forum-statistics .statistics-widget div{
        flex: 0 0 60%;
        text-align: center;
    }
    ul.ks-cboxtags li {
        width: calc(100%);
    }
    .resources_cate li a{
        padding: 8px 12px;
        width: auto;
    }
    .forum-post-content > .img-fluid{max-width: 100%;}
    .forum-statistics .border-left-light{border:none;}
    .fix_bottom form{
        position: relative;
        z-index: 2;
        padding: 15px;
        overflow: hidden;
        background-color: #fff;}
    .fix_bottom:before{
        content: "";
        position: absolute;
        top: 0%;
        left: 10px;
        right: 10px;
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
        webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
        box-shadow: 0 0 15px rgb(0 0 0 / 32%);
        height: 50px;
        width: 80%;
        margin: 0 auto;
    }
    .col-xl-4.border-left-light{border-left: 0}
    .blog_single_info.p-3{padding: 0px !important}
    .banner-area-7.pb-80{padding-bottom: 50px;}
    .banner-area-7 .pt-70.gy-3{padding-top: 10px;}
    .article_content {
        flex: 1 0 75%;
    }
}

 /*iphone plus*/
@media (max-width: 430px) {
     
}


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



/*iphone 5*/
@media (max-width: 321px) {}


/*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 (max-width: 1181px) {
        .sign_left {
            width: 54%;
        }
        .en-title {
            right: 32%;
        }
    }
}
/*縱拿*/
@media screen and (orientation:portrait) {}
/*設備寬高比*/
@media screen and (device-aspect-ratio: 16/9) {}