@charset "UTF-8";
/* icon */
@import url(font-awesome4.7/css/font-awesome.min.css);
@import url(kyicon/style.css);
/* plugins */
@import url(plugins_lib.css);
/* ui */
@import url(color.css);
@import url(button.css);
@import url(form.css);
@import url(table.css);
@import url(nav.css);
@import url(footer.css);
@import url(title.css);
/* main */
body{}
body,html{font-family:"Helvetica","sans-serif","Arial","Open Sans","微軟正黑體";padding:0;margin:0;font-weight:400;font-size:clamp(.9rem, 2vw, 1rem)}
a{text-decoration:none;color:#336699;transition:all linear 0.2s}
a:hover,a:focus{text-decoration:none;color:#dc0032}
.link-underline{text-decoration: underline;text-underline-offset: 3px;color: rgb(var(--kycolor-primary));}
.wrapper{display:grid;width:100%;grid-template-areas:"main" "footer";grid-template-rows:1fr auto;min-height:calc(100vh - 75px)}
/* modal */
.modal-header{border-bottom:none;padding-bottom:0;position:relative}
.modal-header .btn-close{position:absolute;right:10px;top:10px;margin:0;font-size:1.25rem}
.modal-body{padding:0 1rem 1rem 1rem}
.modal-footer{border-top:none}
.modal-footer .btn{min-width:120px}
.modal-title{border-bottom:1px solid #ddd;flex:1 1 auto;padding-bottom:1rem;font-weight:700}
.alert-modal .modal-header{display:flex;justify-content:center;flex-direction:column;align-items:center}
.alert-modal .modal-header img{width:100px}
.alert-modal .modal-header h5{border-bottom:1px solid #999}
.alert-modal .modal-body{text-align:center}
.alert-modal .modal-footer{justify-content:center}
.modal-action{display:flex;margin-top:15px;margin-bottom:15px;justify-content:flex-end}
.modal-action .item + .item{padding-left:5px}
.modal-action .btn-search-item{padding-left:5px}
/* tabs */
.nav-tabs > li{white-space:nowrap}
.nav-tabs > li > a.active,.nav-tabs > li > a.active:focus,.nav-tabs > li > a.active:hover{border:none;border-radius:0;border-bottom:3px solid #d92017}
.nav-tabs > li > a:focus,.nav-tabs > li > a:hover{border-radius:0;border-bottom:3px solid #d92017}
.nav-tabs > li > a{font-size:0.9rem;padding:16px 18px;color:#000;border-bottom:3px solid transparent;display:block}
.nav-tabs.l2{justify-content:center;background-color:#f9f9f9}
.nav-tabs.l2 .nav-link{border:none;border-bottom:3px solid transparent;padding:1rem 1.25rem}
.nav-tabs.l2 .nav-link.active{background-color:transparent;border:none;border-bottom:3px solid #a3b6cc}
.nav-tabs.cus-tabs{position:relative;justify-content:center;background-color:rgb(var(--kycolor-grey-3));overflow:hidden;width:100%;display:grid}
.nav-tabs.cus-tabs::before{content:"";position:absolute;z-index:0;width:90%;height:10px;bottom:-20px;left:5%;border-radius:50%;box-shadow:0 0 30px 10px rgba(0, 0, 0, 0.2)/* background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 20%); */}
.nav-tabs.cus-tabs .nav-link{border-color:transparent;border-radius:0;border-bottom:3px solid #C8C8C8;color:#777;white-space:nowrap}
.nav-tabs.cus-tabs .nav-item.show .nav-link,.nav-tabs.cus-tabs .nav-link.active{border-bottom:3px solid rgb(var(--kycolor-primary));color:#252525}
.nav-tabs.cus-tabs .swiper{max-width:100%}
.nav-tabs.cus-tabs .swiper .swiper-slide{width:auto}
/* color picker */
.form-input .drawrpallete-wrapper{width:100%}
.drawrpallete-wrapper button.form-control{border:1px solid #ddd !important;height:38px !important;width:100% !important;background-image:none !important}
.drawrpallete-canvas + div > button{border:none;border-radius:6px;background-color:#fff}
.color-picker-group .color-display{border-radius:0.25rem;border:1px solid #ddd;height:38px}
.color-picker-group .color-display .bcPicker-picker{border-radius:0.25rem}
.color-picker-group .color-display .bcPicker-palette{top:38px}
/* sortable */
.sort-list-container{display:flex}
.sort-list-container .sort-content{flex:1 1 auto;height:394px;overflow:auto}
.sort-list-container .scroll-control{max-width:60px;flex:0 0 60px;display:flex;justify-content:center;align-items:flex-end;flex-direction:column}
.sort-list-container .scroll-control .btn{border-radius:3px;margin:10px 0;font-size:1.2rem;padding:0.5rem 0.6rem;display:flex;align-items:center;justify-content:center}
.sort-list{list-style:none;padding:0;margin:0}
.sort-list > li{display:flex;border:1px solid #ddd;background-color:#fff}
.sort-list > li.selected{background-color:rgb(221, 255, 202)}
.sort-list > li .shandle{width:40px;padding:0.75rem 1rem}
.sort-list > li + li{margin-top:-1px}
.sort-list > li .text{padding:0.75rem 0.5rem}
.sort-content{border:1px solid #ddd}
.sort-content .sort-list{margin-left:-1px;margin-top:-1px}
/* text */
.color-black{color:#333 !important}
.color-blue{color:#445f94 !important}
.color-green{color:#258340 !important}
.color-orange{color:#ff8a01 !important}
.color-red{color:#e70d41 !important}
.color-grey{color:#999 !important}
.fw-900{font-weight: 900;}
/* loading */
.loading-animation{position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2)}
.loading-animation .loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.loading-animation .loading-wrapper .circle{display:inline-block;margin:0 3px;width:10px;height:10px;background-color:#fe6309;border-radius:50%;animation:loading 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;transform-origin:bottom center;position:relative}
.loading-animation .loading-wrapper .circle-1{animation-delay:0.1s}
.loading-animation .loading-wrapper .circle-2{animation-delay:0.2s}
.loading-animation .loading-wrapper .circle-3{animation-delay:0.3s}
.loading-animation .loading-wrapper .circle-4{animation-delay:0.4s}
.loading-animation .loading-wrapper .circle-5{animation-delay:0.5s}
.loading-animation .loading-wrapper .circle-6{animation-delay:0.6s}
.loading-animation .loading-wrapper .circle-7{animation-delay:0.7s}
.loading-animation .loading-wrapper .circle-8{animation-delay:0.8s}
@keyframes loading{
0%{transform:translateY(0px);background-color:#fff}
50%{transform:translateY(50px);background-color:#26c9c1}
100%{transform:translateY(0px);background-color:#fe6309}
}
.s-tag{background-color:#00c12b;color:#fff;border-radius:50px;padding:0.375rem 0.75rem}
.s-tag.s-orange{background-color:#ff7300}
.s-tag.s-grey{background-color:#c4c4c4}
.s-tag.s-darkgrey{background-color:#606064}
.s-tag.s-red{background-color:#fd0e47}
.s-tag.s-blue{background-color:#0e91fd}
/* ol , ul*/
ul.list-dots{padding-left:2rem;margin-bottom:30px;list-style:none}
ul.list-dots > li{position:relative}
ul.list-dots > li + li{margin-top:15px}
ul.list-dots > li::before{content:"";position:absolute;top:0.7rem;left:-1.25rem;width:5px;height:5px;border-radius:40%;background-color:#fff}
.order-ch{list-style:none;padding-left:2rem;counter-reset:counter1}
.order-ch > li{position:relative}
.order-ch > li::before{content:counter(counter1, simp-chinese-informal) "、";counter-increment:counter1 1;position:absolute;right:100%;top:2px;font-size:0.9rem}
/* home */
body.home .wrapper{height:calc(100vh - 75px)}
body.home .content-frame{display:grid;grid-template-columns:55% 1fr}
.home-banner{min-width:100%;position:relative}
.banner-frame{width:100%;height:100%}
.home-banner .swiper{width:100%;height:100%}
.home-banner .swiper .swiper-slide .img{width:100%;height:100%;position:relative}
.home-banner .swiper .swiper-slide .img img{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center 33%}
.home-banner .swiper-nav{position:absolute;left:30px;bottom:30px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
.home-banner .swiper-nav > *{position:relative;top:auto;left:auto;right:auto;margin-top:0;border:1px solid #fff;width:50px;height:50px;background-color:rgba(0, 0, 0, 0.4);transition:all ease-in 0.15s;box-shadow:0 0 0 0 rgba(0, 0, 0, 0.05);backdrop-filter:blur(2px)}
.home-banner .swiper-button-prev:after,.home-banner .swiper-rtl .swiper-button-next:after,.home-banner .swiper-button-next:after,.home-banner .swiper-rtl .swiper-button-prev:after{font-size:0.7rem;color:#fff}
.home-banner .swiper-nav > *:hover{background-color:rgb(var(--kycolor-primary));border-color:rgb(var(--kycolor-primary));box-shadow:5px 5px 15px 5px rgba(0, 0, 0, 0.2)}
.home-banner .banner-info{position:absolute;z-index:10;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.7);backdrop-filter:blur(2px);color:#fff;padding:20px 30px;width:350px}
.home-banner .banner-info #close-bi{position:absolute;right:0;top:0;background-color:transparent;border:none;color:#fff;width:40px;height:40px;font-size:.8rem}
.home-banner .banner-info .text{font-size:1.05rem;margin-bottom:10px}
.home-banner .banner-info .more{display:inline-flex;color:#fff;padding:8px 0px 8px 15px;border:1px solid #fff;align-items:center}
.home-banner .banner-info .more span{display:block;font-size:.7rem;padding:0 5px;margin-left:15px;border-left:1px solid #fff}
.home-nav{background-color:rgb(var(--kycolor-primary))}
.home-nav .scroll-container .scroll-content{height:100%}
.home-nav-frame{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:10px;padding:10px 10px 0 10px;min-height:100%}
.home-nav-frame .nav-item{position:relative;overflow:hidden}
.home-nav-frame .nav-item>a{display:block;height:100%}
.home-nav-frame .nav-item>a .link{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background-color:rgba(0,0,0,.2);color:#fff;padding:15px;height:100%}
.home-nav-frame .nav-item>a .link-icon{font-size:3.5rem;position:absolute;right:50%;top:50%;transform:translate(50%,-50%);z-index:2;color:#fff;transition:all ease-in-out .4s}
.home-nav-frame .nav-item>a .link .title{width:100%;display:grid;grid-template-columns:1fr 18px}
.home-nav-frame .nav-item>a .link .title i{margin-top:5px}
.home-nav-frame .nav-item>a .intro{position:absolute;top:100%;left:0;width:100%;height:100%;opacity:0;transition:all ease-in-out 0.5s;background-color:#fff;padding:10px;font-size:.8rem}
.home-nav-frame .nav-item>a:hover .intro{display:block;top:0;opacity:1;color:#252525}
.home-nav-frame .nav-item>a:hover .link-icon{color:rgb(var(--kycolor-primary));top:10px;right:10px;transform:translate(0%,0%);font-size:2rem;font-weight:bold}
.home-nav-frame .nav-item>a .intro h5{display:grid;grid-template-columns:1fr 32px;font-weight:bold;position:relative;padding-bottom:18px;font-size:1rem}
.home-nav-frame .nav-item>a .intro h5 i{color:rgb(var(--kycolor-primary));font-size:2rem;font-weight:bold}
.home-nav-frame .nav-item>a .intro h5::after{content:"";position:absolute;bottom:0;left:0;height:3px;width:100%;z-index:0;background:rgb(0,135,220);background:linear-gradient(90deg, rgba(0,135,220,1) 0%, rgba(0,135,220,1) 64%, rgba(100,215,215,1) 64%, rgba(100,215,215,1) 82%, rgba(185,235,95,1) 82%)}
/* content */
.content-frame{grid-area:main;width:100%}
.customer-logo{background-size:contain;background-position:center;background-repeat:no-repeat;width:240px;height:50px;float:right;margin-top:20px;margin-right:20px}
.dropdown-menu{border-radius:10px;border:none;list-style:none;box-shadow:0 0 10px 8px rgba(0, 0, 0, 0.07);padding:0;overflow:hidden}
.dropdown-menu a{padding:10px 1.25rem}
.dropdown-menu a:hover{color:#333 !important}
.dropdown-menu a:focus{background-color:#f9f9f9}
.page-title{display:flex;width:100%;padding:10px 25px 10px 25px}
.page-action{display:flex;margin-top:10px}
.page-action > div.col{white-space:nowrap}
.page-action .form-control,.page-action .form-select{border:none;border-radius:0}
.page-action .form-select:focus{box-shadow:none}
.page-action .form-control.sm{width:130px}
.page-action .form-control.lg{width:180px}
.page-action .pa-left{background-color:rgba(255, 255, 255, 1);border-radius:50px;box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.07);display:flex;padding:8px 8px 8px 25px}
.page-action .pa-left .pal-input{align-items:center;position:relative;overflow:visible;display:flex;flex-wrap:wrap;padding-right:40px}
.page-action .pa-left .pal-input .item-label{margin:0;color:#777;padding:0 0.75rem}
.page-action .pa-left .pal-input .btn-search-item{position:absolute;width:38px;height:38px;right:0;top:50%;transform:translateY(-50%)}
.page-action .pa-left .pal-input .btn-search{flex:0 0 38px;font-size:1.5rem;position:absolute;right:0px;top:0px;padding:0;border-radius:50%;height:38px;width:38px;display:flex;justify-content:center;align-items:center;background-color:#bfbfbf;color:#fff}
.page-action .pa-left .pal-input .item{position:relative;display:flex;align-items:center}
.page-action .pa-left .pal-input .item + .item::before{content:"";position:absolute;left:0;top:10px;height:20px;width:1px;background-color:#ddd}
.page-action .pa-left .pal-input .item.noborder::before{content:none}
.page-action .pa-left .pal-toggle .btn{padding:5px 30px 5px 10px;font-size:1.5rem;line-height:0;height:38px}
.page-action .pa-left .pal-toggle .btn:hover{background-color:transparent;color:#fe5c00}
.page-action .pa-left.show .pal-toggle{display:none}
.page-action .pa-left .dt-input{border:none}
.page-action .pa-left .dt-input::after{background-color:transparent}
.page-action .pa-left .dt-input input{width:120px;border-bottom:2px solid #e5e5e5}
.page-action .pa-left .form-radio{padding-right:5px;margin-right:5px}
.page-action .pa-right{display:flex;padding-left:15px;justify-content:flex-end;flex:1 1 auto}
.page-action .pa-right .btn{height:54px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 0 10px 3px rgba(0, 0, 0, 0.1);white-space:nowrap}
.page-action .pa-right .btn + .btn{margin-left:5px}
.page-action .pa-right .btn i{margin-right:5px}
.pagination-frame{width:100%;margin:15px 0;display:inline-block;text-align:center}
.pagination-frame button{border-color:#ccc;margin-right:0}
.pagination-frame > div{display:inline-block;margin-left:-3px}
.pagination-frame .pagenav{width:34px;padding:0 2px}
.pagination-frame .pagenav-xl{width:34px}
.pagination-frame .page-control{width:calc(100% - 136px);text-align:center;max-width:700px;vertical-align:middle}
.pagination-frame .page-txt{display:inline-block}
.pagination-frame .pagination{vertical-align:middle;margin:0 20px}
.pagination-frame .pagination > li > a,.pagination-frame .pagination > li > span{border:none;border-radius:0;border-bottom:2px solid transparent;line-height:24px;color:#333;background-color:transparent}
.pagination-frame .pagination > li > a:focus,.pagination-frame .pagination > li > a:hover,.pagination-frame .pagination > li > span:focus,.pagination-frame .pagination > li > span:hover{background-color:transparent;border-bottom:2px solid #000}
.pagination-frame .pagination > .active > a,.pagination-frame .pagination > .active > a:focus,.pagination-frame .pagination > .active > a:hover,.pagination-frame .pagination > .active > span,.pagination-frame .pagination > .active > span:focus,.pagination-frame .pagination > .active > span:hover{border:none;border-radius:0;border-bottom:2px solid #000;line-height:24px;color:#333}
.pagination-frame.type-s .page-control{width:calc(100% - 68px);text-align:center}
.pagination-frame.type-s .pagination{display:none}
.pagination-frame.type-s div.pagenav-lx{display:none}
.breadcrumb{background-color:transparent;border-radius:0;padding:0px 25px}
.breadcrumb-item + .breadcrumb-item::before{content:"\e900";font-family:"kyicon";speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:rgba(0, 0, 0, 0.7);font-size:0.9rem;margin-top:4px}
.breadcrumb-item:first-child::before{content:"\e904";font-family:"kyicon";speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:rgba(0, 0, 0, 0.7);font-size:0.9rem;margin-right:5px}
.breadcrumb a{color:rgba(0, 0, 0, 0.7);font-weight:700}
.breadcrumb a:hover{color:rgba(255, 255, 255, 0.75)}
.breadcrumb .breadcrumb-item{color:rgba(0, 0, 0, 0.7);font-weight:700}
.panel-container{background-color:#fff;border-radius:20px;box-shadow:0 0 10px 3px rgba(0, 0, 0, 0.05)}
.form-action .btn{min-width:150px;border-width:2px}
.form-action .btn + .btn{margin-left:20px}
.acc-item{box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.07);border-radius:10px}
.acc-item + .acc-item{margin-top:10px}
.acc-item .item-header .title{background-color:#fff;display:flex;align-items:flex-start;border-radius:10px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px solid #ddd}
.acc-item .item-header .title h6{padding:1.25rem 0.75rem;display:flex;margin-bottom:0;flex:1 1 auto}
.acc-item .item-header .title h6 i{color:#ff7300;display:block;margin-right:18px;transform:rotate(0deg);transition:all ease-in-out 0.15s}
.acc-item .item-header .title.collapsed{border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-bottom:none}
.acc-item .item-header .title.collapsed h6 i{transform:rotate(-90deg);color:#333}
.acc-item .item-body{background-color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:15px 15px 15px 15px}
.note{width:100%}
.note .title{text-align:center;padding-bottom:15px;position:relative;color:#666;font-weight:700}
.note .title::after{content:"";position:absolute;width:60px;height:4px;border-radius:5px;background-color:#0a9048;left:50%;transform:translateX(-50%);bottom:0}
.form-ah-from .form-group:last-child{border-left:1px solid #ddd}
.sub-action{display:flex}
.page-banner{display:grid;grid-template-columns:65% auto;position:relative;width:100%}
.page-banner .img{height:500px;overflow:hidden;position:relative;background-size:cover;background-repeat:no-repeat;background-position:center 20%}
.page-banner .img img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.page-banner .intro{background-color:rgb(var(--kycolor-primary));color:#fff;margin-left:-70px;z-index:1;position:relative;clip-path:polygon(100% 0, 100% 100%, 8% 100%, 0 90%, 0 0);padding:20px 100px 20px 60px}
.page-banner .intro::before{content:"";position:absolute;right:0;top:0;background-image:url(../img/page-banner-deco-01.png);background-position:right top;background-repeat:no-repeat;width:50%;height:100%;opacity:.2;background-size:contain;z-index:-1}
.page-banner .intro h2{padding:5px 15px 5px 20px;border-left:2px solid #fff;font-size:clamp(1.5rem, 2vw, 2rem);font-weight:bold}
.page-banner .intro h2 span{display:block;font-size:1.1rem;margin-top:10px}
.page-banner .intro p{margin-bottom:0;line-height:1.5}
.page-banner .intro p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.text-content-p{line-height:2}
.text-content-p a{color:rgb(var(--kycolor-primary));text-underline-offset:3px;text-decoration:underline}
.text-content-p a:hover{color:rgb(var(--kycolor-secondary))}
.grid-2-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* smooth scroll */
.scroll-container{height:100%}
.scrollbar-track{background-color:rgba(0, 0, 0, 0.1)}
.scrollbar-track-y{width:6px !important}
.scrollbar-track-x{height:6px !important}
.scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2)}
.scrollbar-thumb-x{height:6px !important}
.scrollbar-thumb-y{width:6px !important}
/* sly */
.slywrap{display:inline-block;width:100%;position:relative;background-color:#fff}
.tabslycontrol{display:inline-block;width:100%;float:left}
.tabslycontrol .btn.prevPage{position:absolute;bottom:0;left:0;height:100%;border-radius:0;padding:8px 8px;background-color:rgba(0, 0, 0, 0.21)}
.tabslycontrol .btn.nextPage{position:absolute;bottom:0;right:0;height:100%;border-radius:0;padding:8px 8px;background-color:rgba(0, 0, 0, 0.21)}
.tabslycontrol .btn.disabled{display:none}
/* tooltip */
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,.bs-tooltip-bottom .arrow::before{border-bottom-color:#fff}
.bs-tooltip-auto[x-placement^="top"] .arrow::before,.bs-tooltip-top .arrow::before{border-top-color:#fff}
.bs-tooltip-auto[x-placement^="left"] .arrow::before,.bs-tooltip-left .arrow::before{border-left-color:#fff}
.bs-tooltip-auto[x-placement^="right"] .arrow::before,.bs-tooltip-right .arrow::before{border-right-color:#fff}
.tooltip-inner{background-color:#fff;box-shadow:0 0 15px 5px rgba(0, 0, 0, 0.07);color:#000}
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{border-top-color:#fff}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{border-bottom-color:#fff}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,.bs-tooltip-left .tooltip-arrow::before{border-left-color:#fff}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,.bs-tooltip-right .tooltip-arrow::before{border-right-color:#fff}
/* slides */
.swiper-pagination-bullet{border-radius:0}
.slides-card{background-color:#fff}
.slides-card .text{padding:30px;position:relative;height:220px;overflow-wrap: break-word;word-wrap: break-word;}
.slides-card .text::after{content:"";position:absolute;right:5px;bottom:5px;width:15px;height:15px;clip-path:polygon(100% 0, 0% 100%, 100% 100%);background-color:rgb(var(--kycolor-grey-3))}
.slides-card .img img{width:100%;height:auto}
.slides-card .text p{font-size:.8rem}
.slides-card.l2{border-top:3px solid rgb(var(--kycolor-primary))}
.slides-card.l2 .text::after{content:none}
.cus-swiper{width:100%;position:relative;display:grid}
.cus-swiper .swiper{width:100%}
.cus-swiper .swiper-nav > *{background-color:rgba(var(--kycolor-grey-1),.5);color:#fff;transition:all ease-in-out .2s;width:40px}
.cus-swiper .swiper-nav > *::after{font-size:1rem}
.cus-swiper .swiper-nav > *:hover{background-color:rgb(var(--kycolor-primary))}
.cus-swiper .swiper-nav .swiper-button-prev{left:0px}
.cus-swiper .swiper-nav .swiper-button-next{right:0px}
.cus-swiper .swiper-pagination{position:relative;margin-top:20px}
/* section */
section{overflow:hidden}
/* page service */
.serv-slider-01{padding:0 50px}
.service-card-container{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px}
.service-card-container.l2{grid-template-columns:1fr 1fr 1fr}
.sc-card{display:flex;flex-direction:column;align-items:center;background-color:#D8E5EE;padding:40px}
.sc-card .icon{width:50px;height:50px;border-radius:50%;background-color:rgb(var(--kycolor-primary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:15px}
.sc-card .title{font-size:1.15rem;font-weight:bold}
.sc-card p{margin-bottom:0;color:#252525}
.text-card{background-color:#fff;padding:25px 20px;position:relative;box-shadow:-5px 2px 20px 12px rgba(0,0,0,.05)}
.text-card::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%;z-index:0;background:rgb(0,135,220);background:linear-gradient(90deg, rgba(0,135,220,1) 0%, rgba(0,135,220,1) 64%, rgba(100,215,215,1) 64%, rgba(100,215,215,1) 82%, rgba(185,235,95,1) 82%)}
.text-card .deco-icon{position:absolute;right:30px;top:30px;height:50px;width:50px;background-image:url(../img/1-service/pic-03.png);background-position:center;background-repeat:no-repeat;background-size:contain}
.text-card .title{margin-bottom:20px;font-weight:bold}
.text-card .title-icon{margin-bottom:20px;font-weight:bold;display:grid;grid-template-columns:80px 1fr;align-items:center}
.text-card .title-icon .h5{padding-left:10px}
.text-card p{line-height:2;font-size:.8rem}
.serv-sec-04-img{padding:0 120px}
/* page base */
.page-banner.map{background-color:#EBEBEB}
.page-banner.map .img{padding-right:70px;position:relative}
.page-banner.map .img svg{width:100%;height:100%;object-fit:contain;object-position:center}
.map-nav{position:sticky;top:75px;left:0;width:100%;z-index:10}
.base-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;list-style:none;padding:0;margin:0}
.base-item{background-color:#fff;padding:30px;position:relative;min-height:280px}
.base-item .tag{position:absolute;top:0;left:-10px;background-color:rgb(var(--kycolor-primary));color:#fff;padding:2px 10px}
.base-item .tag::before{content:"";position:absolute;width:10px;height:10px;left:0;bottom:-10px;clip-path:polygon(0 0, 100% 100%, 100% 0);background-color:rgb(var(--kycolor-blue-1))}
.base-item .title{margin-bottom:10px;font-weight:bold;font-size:1.25rem}
.base-item .address{padding-left:20px;position:relative;margin-bottom:10px;color:rgb(var(--kycolor-grey-2))}
.base-item .address::before{content:"\e976";font-family:'kyicon' !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;left:0;top:5px;font-size:.9rem}
.base-item .contact{position:relative;padding-left:20px;color:rgb(var(--kycolor-grey-2))}
.base-item .contact::before{content:"\e975";font-family:'kyicon' !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;left:0;top:5px;font-size:.9rem}
.base-item .contact ul{list-style:none;padding-left:0px;margin:0}
.map-tooltip{position:absolute;background:rgba(0, 0, 0, 0.75);color:white;padding:5px 10px;font-size:1rem;display:none;pointer-events:none}
/* page training  */
.training-list .text-card{height:100%}
.training-map-container{display:grid;grid-template-columns:350px 1fr}
.training-map-container .map-col{order:2;position:relative}
.training-map-container .map-col::before{content:"";position:absolute;left:0;top:50%;width:100%;height:0%;box-shadow:0 0 200px 100px rgba(var(--kycolor-primary),.2);z-index:0}
.training-map-container .slider-col{order:1}
.training-map-container  .map-container{position:relative;z-index:1}
.slider-tab-content .stc-item{display:none}
.slider-tab-content .stc-item.show{display:block}
.stc-item .text-card{padding:60px 20px}
.training-mobile-map-nav{display:grid;width:100%}
.ts-title{position:absolute;left:0;top:10px;width:100%;padding-left:15px}
.st-slider{height:500px}
.st-slider.cus-swiper .swiper-button-prev:hover,.st-slider.cus-swiper .swiper-button-next:hover{background-color:rgba(var(--kycolor-primary),.9)}
.st-slider.cus-swiper .swiper-button-prev.swiper-button-disabled,.st-slider.cus-swiper .swiper-button-next.swiper-button-disabled{background-color:rgba(var(--kycolor-grey-1),.8)}
.stpic-card{position:relative;height:100%}
.stpic-card .title{position:absolute;left:0;bottom:0;background-color:#fff;margin-bottom:0;font-size:.9rem;padding:2px 5px 2px 25px}
.stpic-card .title::before{content:"";position:absolute;left:5px;top:8px;width:10px;height:10px;background-color:rgb(var(--kycolor-primary));border-radius:50%;box-shadow:0 0 0 5px rgba(var(--kycolor-primary),.2)}
.stpic-card .img{display:flex;justify-content:center;align-items:center;height:100%}
.stpic-card .img img{height:100%;width:100%;object-fit:cover}
/* page support */
.support-list{display:grid;grid-template-columns:repeat(5, 1fr);gap:5px}
/* page platform */
.bg-platform-01{background-image:url(../img/6-platform/platform-bg-01.svg);background-size:cover;background-position:center}
.platform-circle-container{position:relative;margin-top:20px}
.circle-nav .nav-tabs{border-bottom:none;display:flex;justify-content:center}
.circle-nav .nav-tabs .circle-item{width:160px;height:160px;background-image:url(../img/6-platform/iconCircle.png);background-position:center;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;align-items:center}
.circle-nav .nav-tabs .circle-item .nav-link{width:100px;height:100px;background-color:#fff;border:none;border-radius:50%;display:flex;justify-content:center;align-items:center;text-align:center;color:#252525;font-size: .8rem;}
.circle-nav .nav-tabs .circle-item .nav-link.active,.circle-nav .nav-tabs .circle-item .nav-link:hover{background-color:rgb(var(--kycolor-primary));color:#fff}
.platform-circle-container .bg-img{position:relative}
.platform-circle-container .bg-img .circle-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;background-color:#fff;border-radius:50%;box-shadow:inset 0px 0px 8px 4px rgba(0, 0, 0, 0.2)}
.platform-circle-container .bg-img .circle-content .circle-card{background-color:#fff;width:350px;height:350px;border-radius:50%;box-shadow:inset 5px 5px 8px 4px rgba(0, 0, 0, 0.2);display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding: 0 15px;}
.platform-circle-container .bg-img .circle-content .circle-card .title{color:rgb(var(--kycolor-primary));font-size:1.2rem}
.platform-circle-container .bg-img .circle-content .circle-card .title h5{font-weight:bold}
.platform-circle-container .bg-img .circle-content .circle-card .text{font-size:.8rem}
.img-map-container{position:relative}
.platform-serv-container .row > div:first-child{border-right:1px solid #ddd}
.img-map-container .map-1{position:absolute;left:33%;bottom:20%;width:32%;height:12%}
.img-map-container .map-2{position:absolute;left:33%;bottom:5%;width:32%;height:12%}
@media (min-width: 768px){
.training-mobile-map-nav{display:none}
.st-slider.cus-swiper .swiper-button-prev{left:50%;top:-20px;transform:translateX(-50%) rotate(90deg);background-color:rgba(var(--kycolor-primary),1);margin-top:0;opacity:1}
.st-slider.cus-swiper .swiper-button-next{left:50%;right:auto;top:auto;bottom:-20px;transform:translateX(-50%) rotate(90deg);background-color:rgba(var(--kycolor-primary),1);margin-top:0;opacity:1}
}
@media (min-width: 1024px){
.circle-nav{padding-top:0}
.circle-nav .nav-tabs .circle-item{position:absolute;z-index:2}
.circle-nav .nav-tabs .circle-item:nth-child(1){left:50%;top:0%;transform:translate(-50%,0)}
.circle-nav .nav-tabs .circle-item:nth-child(2){left:23%;top:12%}
.circle-nav .nav-tabs .circle-item:nth-child(3){right:23%;top:12%}
.circle-nav .nav-tabs .circle-item:nth-child(4){left:17%;top:50%;transform:translate(0,-50%)}
.circle-nav .nav-tabs .circle-item:nth-child(5){right:17%;top:50%;transform:translate(0,-50%)}
.circle-nav .nav-tabs .circle-item:nth-child(6){left:23%;bottom:12%}
.circle-nav .nav-tabs .circle-item:nth-child(7){right:23%;bottom:12%}
.circle-nav .nav-tabs .circle-item:nth-child(8){left:50%;bottom:0%;transform:translate(-50%,0)}
}
@media (min-width: 1280px){

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

}
@media (max-width: 1365px){
body,html{font-size:clamp(.9rem, 1.2vw, 1rem)}
.training-map-container{grid-template-columns:280px 1fr}
.st-slider{height:400px}
}
@media (max-width: 1023px){
.wrapper{min-height:calc(100vh - 60px)}
body.home .wrapper{height:auto}
body.home .content-frame{display:block;grid-template-columns:none}
body.home .content-frame .home-banner{width:100vw;height:55vh;min-height:500px}
.home-nav-frame .nav-item>a{min-height:180px}
.home-banner .swiper .swiper-slide .img img{position:relative;object-position:center center}
.home-nav-frame{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;padding:10px}
.page-banner .img{height:100%}
.page-banner .intro{padding:40px 30px}
.sc-card{padding:20px}
.grid-2-col{grid-template-columns:1fr}
.serv-2col{grid-template-columns:1fr 220px}
.map-nav{top:60px}
.base-list{grid-template-columns:1fr 1fr}
.text-card{padding:15px}
.support-list{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width: 991px){

}
@media (max-width: 767px){
.user-center-dropdown{margin-left:50px;margin-top:5px}
body.home .content-frame .home-banner{height:400px;min-height:0px}
.home-nav-frame{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.home-nav-frame .nav-item>a{min-height:120px}
.home-nav-frame .nav-item>a .link-icon{font-size:2.5rem}
.home-nav-frame .nav-item>a:hover .link-icon{color:#fff;right:50%;top:50%;transform:translate(50%,-50%) scale(1.7)}
.home-nav-frame .nav-item>a .intro,.home-nav-frame .nav-item>a:hover .intro{display:none}
.home-banner .banner-info{width:250px;padding:10px 30px}
.home-banner .swiper-nav > *{width:30px;height:30px}
.page-banner{grid-template-columns:1fr}
.page-banner .img{order:2;margin-top:-30px;position:relative;width:100%;height:250px}
.page-banner .img img{width:120%;height:auto}
.page-banner .intro{margin-left:0}
.service-card-container{grid-template-columns:1fr 1fr}
.grid-2-col{grid-template-columns:1fr}
.serv-sec-04-img{padding:20px 0}
.page-banner.map .img{padding-right:0;padding-top:50px}
.base-list{grid-template-columns:1fr}
.training-map-container{display:block}
.st-slider{height:200px}
.slider-tab-content .text-card{padding:0}
.st-slider.cus-swiper .swiper-button-prev{left:-10px;background-color:rgba(var(--kycolor-primary),1);opacity:1}
.st-slider.cus-swiper .swiper-button-next{right:-10px;background-color:rgba(var(--kycolor-primary),1);opacity:1}
.slides-card .text{padding: 15px;}
.support-list{grid-template-columns:repeat(2, 1fr)}
.circle-nav{position:relative;z-index:2}
.circle-nav .nav-tabs .circle-item{width:auto;height:auto;padding:5px}
.circle-nav .nav-tabs .circle-item .nav-link{width:80px;height:80px;font-size:.7rem}
.platform-circle-container .bg-img{height:400px;width:100%}
.platform-circle-container .bg-img img{position:absolute;top:0;left:0;height:100%;width:100%!important;object-fit:cover;object-position:center center;transform:scale(2.2)}
.platform-circle-container .bg-img .circle-content .circle-card{width:310px;height:310px}
.platform-serv-container{background-color:rgb(var(--kycolor-grey-3))}
.platform-serv-container .row > div:first-child{border-right:none}
}