@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Varela+Round&family=Monoton&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;  
}
select{
    -webkit-appearance: none;
    padding: 3px 26px 3px 10px;
    border: 1px solid #d9d9d9;
    min-height: 46px;
    width: 100%;
    font-size: 16px;
}
select+span{
    display: block;
    position: absolute;
    bottom: 20px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    right: 13px;
    border-color: #CCC;
    border-top: 1px solid;
    border-right: 1px solid;
    width: 8px;
    height: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
a{cursor: pointer}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:last-child{border-top:1px solid #e1e1e1;}
.sticky-header-active .header-body{box-shadow: 0 0 15px rgba(0 0 0 /.04);}
.header-btn-collapse-nav .icon-menu:before{transition: all .3s ease;}
.pos_r{position: relative;}
.pos_a{position: absolute;}
input.header_search{max-width: 200px;}
.header-logo img{width: 120px;height: auto;margin-right: 10px;}
.header-logo ~ form .input-group,.xs-header-search .input-group{width: auto}
.header-logo ~ form .input-group .pos_r select,.xs-header-search .input-group .pos_r select{border-radius: 25px 0 0 25px;padding-left: 13px;border-right:0;min-height: 40px;font-size: 14px;background-color: #fff;}
.header-logo ~ form .input-group .pos_r~input,.xs-header-search .input-group .pos_r~input,.insight_search input{border-right:0;}
.insight_search input{border-radius: 25px}
.bg-primary,#header .header-nav.header-nav-links nav > ul > li > a.bg-primary{background: var(--main) !important;color: #fff}
.input-group .btn-secondary{border-radius: 0 4px 4px 0}
.header-logo ~ form .input-group [type="submit"],.xs-header-search form .input-group [type="submit"],.insight_search [type="submit"],.insight_search [type="submit"]:active{border:1px solid #d9d9d9; background-color: #fff !important; border-radius: 0 25px 25px 0; border-left: 0;color: #6c757d !important; }
/* .input-group .btn-secondary:hover,.btn.bg-light:hover{background-color: #e8e7e7 !important; border-color: #e8e7e7 !important;} */
.item_data{padding: 0 12px}
.dropdown.user:after{
    content: "\f107";
    position: absolute;
    font-family: "Line Awesome Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    right: -3px; top: 42%;
    font-size: 14px;
    color: #444;
    font-weight: 900;
}
.dropdown .dropdown-menu{padding-top: 0 !important;}
.dropdown.user:hover:after{color: #1f7399; color: var(--main);}
#header .header-nav.header-nav-dropdowns-dark nav > ul > li.dropdown .dropdown-menu{
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0 0 0 ,0.1)
}
.d-flex .item_data:first-child{padding-left: 0;min-width: 7%;}
.d-flex .item_data:nth-child(2) .from p,.d-flex .item_data:nth-child(6) .from p{
    width: 135px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.publish .d-flex .item_data:nth-child(2) .from p,.publish .d-flex .item_data:nth-child(6) .from p{width: 200px;}
.font-weight-500{font-weight: 500!important}
article.timeline-box{cursor: pointer}
.btn{font-size: 14px;}
.section-background-half-primary-half-secondary .card{min-height: 243px;}
img.view{width: 25px}
.thumb-info .cover{transition: all .3s ease;}
.thumb-info:hover .cover{transform: scale(1.1,1.1);}
.vlr.topics{
    position: absolute;
    left: 50px;
    color: #d7d3c6;
    /* font-weight: 700; */
    opacity: .3;
    font-size: 70px !important;
    font-family: 'Archivo Black', Arial, 'Noto Sans TC', Heiti TC, sans-serif;
}
.topics .border{border-radius:8px;min-height: 288px;border-color:#e5e2ce !important;transition: .3s all ease;}
.topics .border:hover{background-color: #fff;transform: translateY(-10px);
    box-shadow: 0 10px 25px 0 rgb(0 0 0 / 10%);}
.insight{
    position: absolute;
    font-weight: 700;
    opacity: .07;
    left: 0%;
    bottom: 40%;
    font-size: 120px;
    font-family: 'Archivo Black', Arial, 'Noto Sans TC', Heiti TC, sans-serif;
}
.insight+.insight{
    position: absolute;
    font-weight: 700;
    opacity: .07;
    left: 6%;
    bottom: 19%;
    font-size: 100px;
    font-family: 'Archivo Black', Arial, 'Noto Sans TC', Heiti TC, sans-serif;
}
.play-btn {
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background-color:transparent;
  border:0;
  background-color: #cfb08b;
  /* background-color: var(--second); */
  width: 6rem;
  height: 6rem;
  border-radius: 50px;
  box-shadow: 0 0 0px 4px #c8ab89;
  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;
}
.video-cover {
    padding-top: 54%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}
ul.social li{padding: 0 5px}
ul.social li i{font-size: 18px; color: #fff}
footer#footer{padding-bottom: 40px;}
footer ul.list-unstyled.cate li{position: relative;padding-left: 20px;}
footer ul.list-unstyled.cate li:before{
    content: '－';
    position: absolute;
    left: 2px
}
footer#footer ul.list-unstyled.footer_about li a:not(.btn){color: #fff}
#footer a:not(.btn):hover,footer ul.list-unstyled.cate li:hover a{color: #3c3c3c} 
#footer .note{
    position: absolute;top: 25px;color: #9f9f9f;
}
#footer.border-0{border-top: 1px solid rgb(49 64 74 / 15%) !important;}
#footer{
    background: -webkit-gradient(linear, left top, right top, color-stop(31.8%, #31404a), color-stop(31.8%, #F7F7F7));
    background: linear-gradient(to right, #31404a 31.8%, #ffffff 31.8%);
}
.istitle{
    font-size: 20px;
    font-weight: bold;
    color: #499abc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 2px;
}
.istitle:after{
    content: '';
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #499abc;
    margin-left: 14px;
}
.istitle.bewhite:before{border-left:5px solid rgb(255 255 255 / .6);}
.istitle+p{font-size: 1.5rem;line-height: 1.8}
time{color: #868686}
.news_cate{
    display: flex;
    position: relative;
    align-items: center;
}
.news_cate a:after{
    content: '';
    width: 1px;
    height: 14px;
    background-color: #a1a1a1;
    margin: 0 15px;
}
.slick-prev:before, .slick-next:before{
    background-color: #1f7399;
    width: 40px;
    height: 40px;
    display: block;
    line-height: 40px;
}
.slick-slide > div{padding-left: 20px;}
.data-content{
    position: relative;
    transform: translateY(-150px);
    padding: 30px 40px;
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 12px #0000001f;
    box-shadow: 1px 1px 12px #0000001f;
    border-radius: 8px;
    z-index: 2;
}
.data-content.calc{padding: 0;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15) !important;}
.data-content.calc .msg_history{padding:25px 15px;border-radius: 8px;box-shadow: rgb(0 0 0 / 5%) 0px 0px 15px 0px inset}
.data-content.calc button[type=submit],.data-content.calc button[type=button]{    
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 1px solid #31404a;
    transform: rotate(45deg);
    padding: 16px 7px;
    text-align: center;
}
.data-content.calc button i{font-size: 21px;color: #31404a;}
.data-content.calc button[type=submit]:hover,.data-content.calc button[type=button]:hover{  background-color: #31404a;}
.data-content.calc button[type=submit]:hover i,.data-content.calc button[type=button]:hover i{color:#fff;}
.ex>span{
    position: relative;
    font-family: 'Archivo Black', Arial, 'Noto Sans TC', Heiti TC, sans-serif;
    font-size: 80px;
    opacity: .05;
    color: #314049;
    color: var(--second);
    top: 30px;
    left: -15px;
}
.ex h3{padding-left: 30px;}
.ex p{font-size:16px;line-height: 1.7}
.testimonial-author .cover{width: 70px;height: 70px;margin:5px auto 15px;}
.items_hide_login{
    background-image: url('../img/high_price_area3.png');
    display: flex;
    height: 800px;
    align-items: center;
    justify-content: center
}
.items_hide_login2{
    background-image: url('../img/high_price_area2.png');
    display: flex;
    height: 604px;
    align-items: center;
    justify-content: center
}
.breadcrumb-item+.breadcrumb-item::before{content: '|';}
.page_type li{
    padding: 5px 15px;
    position: relative;
}
.page_type li h4{margin-bottom: 0;}
.page_type li:before{
    content: '';
    position: absolute;
    border-right: 1px solid #ebe8e8;
    height: 40px;
    right: 0;
    top: 13px;
}
.page_type li:last-child:before{content: none}
.page_title{background-color: #314049;background-color: var(--second) ;padding: 12px;color:#fff;}
.feature-box.feature-box-style-2 h4{margin-bottom: 0;font-size: 14px;color:#8b8b8b}
.feature-box-info p{color:#212529;}
.high-light{
    background-color: #eaf2fa;
    border-top: 3px solid var(--main);
    align-items: center;
    padding: .2rem .8rem;
    margin:0 
}
html .list-primary.list-icons li > [class*="la-"]:first-child{
    padding: 5px;
    border: 1px solid #1f7399;
    border-radius: 2px;
    margin-right: 10px;
    display: inline-block;
}
.testimonial-author .cover.saler{width:70px;height: 70px;}
.shadow-0{box-shadow: none !important}
.modal-header .close{
    position: absolute;
    right: 10px;
    top: 10px;
}
.social_link{
    padding-left: 0;
}
.social_link li{ margin-right: 8px;}
.social_link a{
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    display: table-cell;
    background-color: #314049;
    color: #fff !important;
    text-align: center;
    border-radius: 25px;
    vertical-align: middle;
}
.social_link img{
    width: 21px;
    -webkit-filter: invert(100%); /* Safari/Chrome */ 
    filter: invert(100%); 
}
#piechart{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.anychart-credits-text,.anychart-credits-logo{display: none;}
.cost_table th,.cost_table td{border:1px solid rgba(0, 0, 0, 0.1);}
.cost_table tr:last-child {
    border-top: 4px double #cecece;
}
.cost_table tr:last-child td{
    font-size: 18px;
    font-weight: 600;
    border: none;
}
.case_hide{
    position: relative;
    display: flex;
    padding-bottom: 20%;
    justify-content: center;
}
.case_hide:before{
    content: '';
    width: 100%;
    position: absolute;
    background-position: center;
    background-image: url(../img/case_mask.png);
    align-items: center;
    filter: blur(5px);
    background-size: cover;
    height: 100%;
    margin: 0 auto;
}
.case_hide.author{padding-bottom: 100%;}
.case_hide.author:before{background-image: url(../img/case_mask_author.png);}
.case_hide.pie{padding-bottom: 100%;}
.case_hide.pie:before{background-image: url(../img/case_mask_pie.png);}
.case_hide .case_hide_text{position: absolute;top: 20%;margin-bottom: 0;text-align: center;}
.case_hide_text h3{margin-bottom: 0;}
.case_hide.pie .case_hide_text{top: 33%;}
.else_case .owl-carousel.show-nav-title .owl-nav button[class*="owl-"],.else_case .owl-carousel.show-nav-title .owl-nav button[class*="owl-"]:hover,.else_case .owl-carousel.show-nav-title .owl-nav button[class*="owl-"].hover{    
    color: #314049;
    color: var(--second);

}
.else_case .owl-carousel.show-nav-title .owl-nav button[class*="owl-"],.else_case .owl-carousel.show-nav-title .owl-nav button[class*="owl-"]:hover,.else_case .owl-carousel.show-nav-title .owl-nav button[class*="owl-"]:active{
    font-size: 13px;
    background: #fff !important;
    border-radius: 25px;
    width: 30px;
    height: 30px;
    line-height: 31px;
    border: 1px solid #eee;
}
.else_case .owl-carousel.show-nav-title .owl-nav button.owl-prev{left: -70px}
.have_list{padding-left: 50px;}
.have_list li{
    border: 1px solid #999;
    position: relative;
    display: inline-block;
    padding: 3px 16px 3px 30px;
    border-radius: 25px;
    color: #999;
    font-weight: 500;
    margin: 3px 3px 3px 0;
}
.have_list li:before{
    position: absolute;
    content: "\f00c";
    font-family: 'Line Awesome Free';
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    top: 30%;
    left: 10px;
    color: #999;
}
.device_table th{
    background-color: #314049;
    background-color: var(--second);
    color: #fff;
}
.device_table th:first-child{border-right: 1px solid #60686e}
.cost{
    font-size: 1.2rem;
    padding: 6px 12px;
    background-color: #ebf0f3;
    text-align: center;
    margin-left: 3rem!important;
    border-radius: 8px;
}
.nda_content p{font-size: 16px;line-height: 1.8}
.scroll_box{
    overflow-y: scroll;
    max-height: 500px;
    background-color: #f8f7f7;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
}
.scroll_box h3{margin-bottom: 10px;}
.scroll_box hr{background: rgb(0 0 0 / 10%);}
.custom-control{padding-left: 2rem;margin-bottom: 5px;}
.custom-control-input:focus~.custom-control-label::before{box-shadow: 0 0 0 0.2rem rgb(31 115 153 / 20%)}
.custom-control-label::before,.custom-control-label::after{width: 1.4rem;height: 1.4rem;left:-1.8rem; border-color: #d9d9d9;}
.custom-file-label,.input-group-text{min-height: 45px;line-height: 32px;}
.custom-file-label::after{display: none}
#signature{background-color:#eee;height:300px;-webkit-overflow-scrolling:touch}
.btn-goolge{
    background-color: #f4715b;
    border-color: transparent;
    color: #fff;
}
.btn-goolge:hover,.btn-goolge:active{
    background-color: #f38774;
    border-color: transparent;
    color: #fff;
}
.divider p{
    border-radius: 50px;
    color: #a9a9a9;
    display: inline-block;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    position: absolute;
    text-align: center;
    width: 50px;
    font-size: 16px;
    margin: 0 auto 0 -25px;
    top: -25px;
    left: 50%;
    z-index: 1;
}
.custom-control-label::before,.custom-control-label::after{top: .15rem;/* left: -2.2em; */}
.btn-gray{
    background-color: #eee;
}
.btn-gray:hover{
    background-color: #dfdfdf;
}
ul.member_sidebar{padding-left: 0;margin-top: 20px;}
ul.member_sidebar li{
    list-style: none;
    border-bottom: 1px solid #f3f3f3;
    padding: 15px 10px;
    position: relative;
}
ul.member_sidebar li a{color: #3a3a3a;display: flex; align-items: center;}
ul.member_sidebar li a > i{margin-right: 8px;font-size: 20px}
ul.member_sidebar li:hover a,ul.member_sidebar li.active a{color:#1f7399;color: var(--main);font-weight: 600;}
ul.member_sidebar li a .new,.dropdown.user .new{
    position: absolute;
    right: 10px;
    background-color: #cdac81;
    color: #fff;
    text-align: center;
    width: 24px;
    height: 24px;
    line-height: 25px;
    border-radius: 24px;
    margin-left: 5px;
    font-size: 14px;
}
.bg-gold{background-color: #cdac81;}
.dropdown.user .new{bottom:9px;}
ul.tab{padding-left: 0;margin-bottom: 0}
ul.tab li{
    display: inline-block;
    padding: 0 18px;
}
ul.tab li:first-child{padding-left: 0;}
ul.tab li a{ color:#3a3a3a;font-size: 16px}
ul.tab li.active a{position: relative;}
ul.tab li.active a:before{
    content: '';
    position: absolute;
    border-bottom: 3px solid #1f7399;
    border-bottom: 3px solid var(--main);
    width: 110%;
    bottom: -15px;
    left: -5%;
}
ul.tab li.active a,ul.tab li:hover a{
    color:#1f7399;color: var(--main);
    font-weight: 400;
}
.badge.badge-pill.badge-primary{padding: 7px 15px; font-size: 12px;font-weight: 400;}
html .unread{    
    padding: 7px 15px;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #999;
    font-size: 12px;
}
html .unread:hover{
    background-color: #1f7399;background-color: var(--main);
    border-color: #1f7399;border-color: var(--main);
    color: #fff !important;
}
.note_list .shadow-sm{transition: .3s all ease;}
.note_list .d-sm-flex>p{flex: 0 0 125px;}
#off input[type=radio] {
  display: none;
}
#off input[type=radio]:checked + .box {
  background-color: #1f7399;background-color: var(--main);
}
#off input[type=radio]:checked + .box span {
  color: #fff;
  transform: translateY(50px);
}
#off input[type=radio]:checked + .box span:before {
  transform: translateY(-10px);
  color: #fff;
  opacity: 1;
}
#off .box {
  width: 150px;
  height: 150px;
  background-color: #e3e3e3;
  transition: all 250ms ease;
  will-change: transition;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-weight: 900;
  border-radius: 8px;
  margin: 0 5px;
}
#off .box:active {
  transform: translateY(10px);
}
#off .box span {
  position: absolute;
  transform: translate(0, 50px);
  left: 0;
  right: 0;
  transition: all 300ms ease;
  font-size: 1.5em;
  user-select: none;
  font-weight: 400;
  color: #868686;
  margin: 0 10px;
}
#off .box span:before {
  font-size: 1.2em;
  font-family: "Font Awesome 5 Free";
  display: block;
  transform: translateY(-10px);
  opacity: 0;
  transition: all 300ms ease-in-out;
  font-weight: 900;
  color: #c4c4c4;
  opacity: 1;
}
#off .front-end span:before {
  content: "\f00c";
}
#off .back-end span:before {
  content: "\f00d";
}
#off .q2  .front-end span:before,#off .q2 .back-end span:before{content: none}
#off .q2 .box span{font-size: 1.3em;line-height: 1.7}
.q2,.q3,.q4,.q5{display: none}
.table.plan_table th,.table.plan_table td{text-align: center;vertical-align: middle;}
.payment_table th,.payment_table td{text-align: center;}
.payment_table th:first-child,.payment_table td:first-child{text-align: left;}

[for=mycover]{border-radius: 100px;width: 150px; height: 150px;margin: 0 auto;overflow: hidden;}
.profile-image-change-text{display: none;}
.profile-image-change-text {
    position: relative;
    background: rgba(0,0,0,.5);
    bottom: 0;
    color: #fff;
    display: none;
    height: 40px;
    line-height: 32px;
    right: 0;
    top: -40px;
    width: 100%;
    z-index: 3;   
}
[for=mycover]:hover .profile-image-change-text{display: block;text-align: center}
.f16.list.list-icons li > [class*="fa-"]{top: 12px;}
.large_img_btn{
    background-color: #314049;
    border-radius: 10px
}
.large_img_btn img{filter: invert(1);}
.tags li{
    border-radius: 2px;
    text-align: center;
    width: calc(100% / 5.2);
    padding: 5px 15px;
    background-color: #314049;
    margin-bottom: 5px;
    color: #fff;
}
#chart{height: 200px}
.input-group-text{
    border-radius: 0 0.25rem .25rem 0;
    border-left: 0;
}
.buyplan~label::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -10px;
    right: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 24px;
    transition-duration: 0.4s;
    transform: scale(0);
}
.buyplan:checked+label::before {
    content:"\f00c";
    font-family: 'Font Awesome 5 Free';
    background-color: #207399;
    background-color: var(--main);
    transform: scale(1);
    border-color: #207399;
    border-color: var(--main);
    display: block;
    opacity: 0;
    transition: all 300ms ease-in-out;
    font-weight: 900;
    color: #fff;
    opacity: 1;
}
.text-box{
    padding: 30px 10px;
    background-color: #eff5fa;
    border-radius: 5px;
    vertical-align: middle;
    border: 2px solid #eaf0f3;
}
.buyplan:checked+label.text-box{
    border:2px solid #207399;
    border:2px solid var(--main);
}
/* .hover .testimonial{display: none}
.hover:hover .testimonial{display: block} */
.testimonial .testimonial-arrow-up{
    margin-left: 20px;
    margin: 5px 0px -7px 45px;
    background-color: #fff;
    border-color: #ffffff;
    border-top: 1px solid #e7e6e6;
    border-right: 1px solid #e7e6e6;
    width: 15px;
    height: 15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate( -45deg);
    z-index: 2;
    position: relative;
}
.testimonial.testimonial-style-3 blockquote.no_quote{background-color: #fff !important;
    border: 1px solid #e7e6e6;min-height: 191px;}
blockquote.no_quote:before{content: none}
.preview_box{
    position: relative;
    padding: 20px 15px;
    text-align: center;
    background-color: #ffe6da;
    font-size: 18px;
    color: #934b4b;
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 25px;
}
.preview_box:before{
    content: '';
    position: absolute;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border: 2px solid  #ffe6da;
    border-radius: 6px;
}
.note_box{
    border:2px solid #ffe6da; 
    padding: 35px 15px 15px;
    margin-top: 30px;
    position: relative;
}
.note_title{
    position: absolute;
    background-color: #ffe6da;
    padding: 10px;
    color:  #934b4b;
    top: -20px;
    font-size: 16px;
}
.estate,.estate_else,.forhere{
    background-color: #f7fafc !important;
    display: none;
    padding: 20px 20px 15px;
    margin-bottom: 10px;
}
.card.value{height: 230px;}
.img_icon{
    width: 70px;
    margin: 20px auto;
}
.inbox_people {
  background: #f8f8f8 none repeat scroll 0 0;
  float: left;
  overflow: hidden;
  width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
  border: 1px solid #c4c4c4;
  clear: both;
  overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}


.recent_heading {float: left; width:40%;}
.srch_bar {
  display: inline-block;
  text-align: right;
  width: 60%; padding:
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}

.recent_heading h4 {
  color: #05728f;
  font-size: 21px;
  margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  padding: 0;
  color: #707070;
  font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}

.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
  float: left;
  width: 11%;
}
.chat_ib {
  float: left;
  padding: 0 0 0 15px;
  width: 88%;
}

.chat_people{ overflow:hidden; clear:both;}
.chat_list {
  border-bottom: 1px solid #c4c4c4;
  margin: 0;
  padding: 18px 16px 10px;
}
.inbox_chat { height: 550px; overflow-y: scroll;}

.active_chat{ background:#ebebeb;}

.incoming_msg_img {
  display: inline-block;
  width: 6%;
}
.received_msg {
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: top;
  width: 92%;
 }
 .received_withd_msg a{
    border: 1px solid #eee;
    width: 100%;
    display: block;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 1px 15px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 4%);
 }
 .received_withd_msg a h5{margin-bottom: 5px;color:#fff;}
 .received_withd_msg p {
  background: #fff none repeat scroll 0 0;
  border-radius: 0 10px 10px 10px;
  color: #646464;
  font-size: 16px;
  margin:0 0 8px 0;
  padding: 10px 10px 10px 12px;
  width: 100%;
  box-shadow: 0 1px 15px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 4%);
}
.time_date {
  color: #747474;
  display: block;
  font-size: 12px;
  margin:0 0 25px;
}
.received_withd_msg { width: 57%;}
.mesgs {
  float: left;
  padding: 30px 15px 0 25px;
  width: 60%;
}

.sent_msg p {
  background: #117399 none repeat scroll 0 0;
  border-radius: 10px 0 10px 10px;
  font-size: 16px;
  margin: 0;
  color: #fff;
  padding: 10px 10px 10px 12px;
  width: 100%;
  box-shadow: 0 1px 15px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 4%);
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
  float: right;
  width: 46%;
}
.input_msg_write input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: #4c4c4c;
  font-size: 15px;
  min-height: 48px;
  width: 100%;
}

.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
  background: #05728f none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  height: 33px;
  position: absolute;
  right: 0;
  top: 11px;
  width: 33px;
}
.case_bg{background-color: #b9b3af}
.messaging { padding: 0 0 50px 0;}
.msg_history {
  height: 516px;
  padding: 20px;
  overflow-y: auto;
}
.fix_message{
    background-color: #fff;
}
.message_shadow{box-shadow: 9px -3px 8px rgb(0 0 0 / 5%)}
.message_shadow button{
    height: 100%;
    width: 100%;
}
.message_shadow button i{transform: rotate(-45deg);font-size: 16px}
.service-box {
    padding: 30px;
    border-radius: 10px;
    position: relative;
    z-index: 3;
}
.service-box:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    -webkit-transform: translate3d(-5px, -5px, 0);
    -moz-transform: translate3d(-5px, -5px, 0);
    -ms-transform: translate3d(-5px, -5px, 0);
    -o-transform: translate3d(-5px, -5px, 0);
    transform: translate3d(-5px, -5px, 0);
    border:1px solid #dadce0;
}
.service-box:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transform: translate3d(5px, 5px, 0);
    -moz-transform: translate3d(5px, 5px, 0);
    -ms-transform: translate3d(5px, 5px, 0);
    -o-transform: translate3d(5px, 5px, 0);
    transform: translate3d(5px, 5px, 0);
    border: 1px solid #dadce0;
}
section.onpage_bg{background:#E6ECF3 !important }
.q_cate{margin-bottom: 35px;}
.q_cate li{
    display: inline-block;
    margin: 5px;
    color: #444;
}
.q_cate li a{display: block;color: #444; padding:6px 16px;background-color: #EDEDED; border-radius: 25px;    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.q_cate li.active a,.q_cate li:hover a{color: #fff;background-color: #314049;}
.content_text p,.content_box p {font-size: 16px;line-height: 1.8}
.service-box p{margin-bottom: 10px;}
.service-box h4 {margin-top: 30px;}
.service-box .content-grid-item .cover{width: 150px;}
#footer .footer_logo{filter: invert(1) brightness(5);margin-bottom: 35px; width: 140px;}
.insight_gride .col-lg-4{ border-right: 1px solid #eee;}
.insight_gride .col-lg-4:nth-child(3n){border-right: none}
.post_date p{
  padding: 15px 2px;
  margin-bottom: 0px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  letter-spacing: 1.2px;
  font-weight: 500;
  color: #999;
}
.post_date p.tagname{color:#086ea8;color: var(--main);border-top:3px solid #086ea8;border-top: 3px solid var(--main);
  font-size: 20px;letter-spacing: 2px}
.post_date a{color: #868686;font-size: 16px;}
.post_date a:hover{color:#67accc ;color: var(--main)}
.post_date p.page_tag a,.page_tag a{color:#868686;display:inline-block;background-color: #efefef;font-size: 13px; padding: 1px 6px; border-radius: 15px;margin: 2px;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.post_date p.page_tag a:hover,.page_tag a:hover{ color: #fff; background-color: #314049;}
.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;
}
.radio-group{margin-left: 10px;}
.radio-group .btn_message {
  border: 3px solid #117399;
  display: inline-block;
  padding: 10px;
  position: relative;
  text-align: center;
  color: #117399;
  transition: background 600ms ease, color 600ms ease;
  border-radius: 50px;
}

.radio-group input[type=radio].toggle {
  display: none;
}
.radio-group input[type=radio].toggle + label {
  cursor: pointer;
  min-width: 60px; 
  /* border-right: none; */
  margin-left: 10px;
}
/*
.radio-group input[type=radio].toggle + label:hover {
  background: none;
  color: #117399;
}
.radio-group input[type=radio].toggle + label:after {
  background: #117399;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
*/
.radio-group input[type=radio].toggle:first-child + label {
  /* border-right: 0; */
}
.radio-group .btn_message:last-child{border-right:3px solid #117399 !important;}
.radio-group input[type=radio].toggle:first-child + label:after {
  left: 100%;
}
.radio-group input[type=radio].toggle:last-child + label {
  margin-left: -5px;
  background-color: #f7fafc;
}
.radio-group input[type=radio].toggle:last-child + label:after {
  left: -100%;
}
.radio-group input[type=radio].toggle:checked + label {
  cursor: default;
  background-color: #117399;
  color: #fff;
  transition: color 200ms;
}
.radio-group input[type=radio].toggle:checked + label:after {
  left: 0;
}
textarea.form-control:focus,input.form-control:focus{box-shadow: none}
.filter_cate{max-height: 300px;overflow-y: scroll;overflow-x: hidden;}
.page-header:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url(../img/dot.png);
    pointer-events: none;
}
.side_search input{border-right: none;border-radius:25px 0 0 25px;}
.side_search button{border-radius:0 25px 25px 0;border:1px solid #d9d9d9; border-left: 0}
html aside .toggle-primary .toggle label.custom-control-label,html .modal .toggle-primary .toggle label.custom-control-label{color:#686868;}
html aside .toggle-primary .toggle > label{border-color:#f0f0f0 !important}
html .col-xl-2 aside{min-height: 800px}
.filter_icon .cover{width: 22px;height: 22px;margin: calc((45px - 22px) / 2) calc((91% - 22px) / 2);}
.filter_icon .col-2{background-color: #196182;height: 45px;}
.filter_icon .row{height: 45px;}
.bussiness_card img{
    display: block;
    height: 200px !important;
    margin: 0 auto 
}
.partnet_re{display: none}
label ~ .custom-checkbox .custom-control-label::before, label +.custom-control-label::after{left: -1.8em;}
.qna_xs{background-color: #314049; color: #fff;}
.qna_xs +span{color: #fff}
form.shadow{box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.05)!important;margin-bottom: 30px;position: relative;z-index: 3}
.form_title{
    background: #5ca2c2;
    color: #fff;
    font-size: 20px;
    padding: 12px;
    width: 70%;
    position: relative;
    left: -50px;
    margin-bottom: 30px;
    border-radius: 6px 0 0px 6px;
}
.form_title:before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #5ca2c2 transparent transparent transparent;
    bottom: 0;
    right: -50px;
}
section.publish_section .process-step-circle{background-color: #f4f6fa}
section.publish_section .testimonial.testimonial-style-3 blockquote,section.publish_section .vip .secret{background:#eaedf1 !important; }
section.publish_section .testimonial.testimonial-style-3 .testimonial-arrow-down{border-top: 10px solid #eaedf1 !important;}
section.publish_section .post-image .cover{border:4px solid #fff;}
section.publish_section .testimonial.testimonial-style-3 blockquote.no_quote.bg-white{background-color: #fff !important;}
.line_contact{
    position: fixed;
    right: 0px;
    bottom: 40%;
    border-radius: 8px 0 0 8px;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    padding: 15px 0px 25px;
    background-color: #37cd00;
    font-size: 16px;
    z-index: 9999;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    transition: .3s all ease;
}
.line_contact a{
    color: #fff !important;
    align-items: center;
    display: flex;
    letter-spacing: 3px;
    transition: .3s all ease;
}
.line_contact img{
    width:50px;
    height:50px;
    margin-bottom: 5px;
}

.line_contact .tips{
    width: 150px;
    position: absolute;
    background-color: #000000b8;
    right: 60px;
    top: 32%;
    color: #fff;
    writing-mode: horizontal-tb;
    padding: 5px 10px;
    text-align: center;
    font-size: 14px;
    border-radius: 10px;
    display: none;
}
.line_contact .tips:before{
    content: "";
    position: absolute;
    bottom: 30%;
    right: -11px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0px 8px 8px;
    border-color: transparent transparent transparent  #474747;
}
.line_contact:hover .tips{display: block;}
/* .sticky-header-active .line_contact img{
    bottom: 70px;
} */




























/*---------------
custom-timeline
---------------*/

section.custom-timeline {
    width: calc(100%);
    margin: 0 0 0 0px;
    padding: 0; 
}
section.custom-timeline .from{color:#8b8b8b;display: grid;}
section.custom-timeline .from p{color:#212529 !important;font-weight: 500;margin-bottom: 0px;font-size: 16px}
/* section.custom-timeline .from p.secret{margin-bottom: 0;} */
section.custom-timeline:after, section.custom-timeline:before {content: none; }
section.custom-timeline .timeline-body:after {
    content: '';
    display: block;
    clear: both; 
}
section.custom-timeline .timeline-bar {
    position: absolute;
    background: #1e1e1e;
    width: 3px;
    left: -3.6%;
    z-index: 0; 
}
section.custom-timeline .timeline-box {
    position: relative;
    margin: 10px 0 !important;
    width: 100%;
    margin: 0;
    padding: 0;
    transition: .3s all ease;
}
section.custom-timeline .timeline-box:hover,.note_list .shadow-sm:hover{
    transform: translateY(-10px);
    box-shadow: 0 10px 25px 0 rgb(0 0 0 / 0.1);
}
.vip .cover{
    overflow: hidden;
    position: relative;
}
.vip .secret{
    background-color: #ebf0f3;
    padding: 5px 10px;
    border-radius: 7px;
    display: inline-block;
    /* text-align: center; */
}
.vip .secret.title-1{padding: 5px 25px}
.vip .cover:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(5px);
    /* z-index: -1; */
}
.vip .cover.type_1:before{
    background:url('../img/demo1.png') center/cover
}
.vip .cover.type_2:before{
    background:url('../img/demo2.png') center/cover
}
.vip .cover.type_3:before{
    background:url('../img/demo3.png') center/cover
}
.vip .cover.type_4:before{
    background:url('../img/demo4.png') center/cover
}
.vip .cover.type_5:before{
    background:url('../img/demo5.png') center/cover
}
.vip .cover.type_6:before{
    background:url('../img/demo6.png') center/cover
}
.vip .cover.type_7:before{
    background:url('../img/demo7.png') center/cover
}
.vip .cover.type_8:before{
    background:url('../img/demo8.png') center/cover
}
.vip .cover.type_9:before{
    background:url('../img/demo9.png') center/cover
}
.vip .cover.type_10:before{
    background:url('../img/demo10.png') center/cover
}
.vip .cover.type_11:before{
    background:url('../img/demo11.jpg') center/cover
}
.vip .cover.type_12:before{
    background:url('../img/demo12.png') center/cover
}
.vip .cover.type_13:before{
    background:url('../img/demo13.jpg') center/cover
}
.vip .cover.type_14:before{
    background:url('../img/demo14.jpg') center/cover
}
.vip .cover.type_15:before{
    background:url('../img/demo15.png') center/cover
}
section.custom-timeline .timeline-box.right {max-width: 100%; }
section.custom-timeline .btn-outline{background-color: #fff;}
section.custom-timeline .timeline-box.right:before {
    top: 50%;
    left: -3.8%;
    background: #1e1e1e !important;
    box-shadow: 0 0 0 3px #ecf1f7, 0 0 0 6px #1e1e1e !important;
    margin-top: 0;
    transform: translateY(-50%); 
    display: none
}
section.custom-timeline .timeline-box.right:after {
    top: 50%;
    left: -22px;
    background: #FDD55C;
    border: none;
    transform: translateY(-50%) rotate(45deg);
}
section.custom-timeline .timeline-box .experience-info, section.custom-timeline .timeline-box .experience-description {padding: 25px; }
section.custom-timeline.publish.inmember .timeline-box .experience-info, section.custom-timeline.publish.inmember .timeline-box .experience-description{padding: 15px 25px 5px;}
section.custom-timeline .timeline-box .experience-info p {
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 11px; 
}
section.custom-timeline .timeline-box .experience-info .from, section.custom-timeline .timeline-box .experience-info .to {
    display: inline-block;
    width: 49%;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.3; 
}
section.custom-timeline .timeline-box .experience-info .from > span, section.custom-timeline .timeline-box .experience-info .to > span {
    display: block;
    text-transform: none;
    font-size: 16px;
 }
section.custom-timeline .timeline-box .experience-info .company {font-size: 18px; }
section.custom-timeline .timeline-box .experience-info .company > span {
    display: block;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 11px; 
}
@media (max-width: 1199px) {
    section.custom-timeline {
        width: calc(100% - 60px);
        margin: 0 0 0 60px; 
    }
    section.custom-timeline .timeline-bar { left: -5.1%; }
    section.custom-timeline .timeline-box.right:before {left: -5.5%; }
 }
@media (max-width: 991px) {
    section.custom-timeline {width: calc(100% - 30px);margin: 0 0 0 20px; }
    section.custom-timeline .timeline-bar {left: -6.7%; }
    section.custom-timeline .timeline-box:before, section.custom-timeline .timeline-box:after {display: block !important; }
    section.custom-timeline .timeline-box.right {float: right; }
    section.custom-timeline .timeline-box.right:before {left: -7%; } 
}
@media (max-width: 767px) {
    section.custom-timeline {
        width: 100%;
        margin: 0;
        padding-left: 15px;
        padding-right: 15px;
     }
    section.custom-timeline .timeline-bar { display: none; }
    section.custom-timeline .timeline-box:before, section.custom-timeline .timeline-box:after { display: none !important; }
}
@media (max-width: 575px) {
    section.custom-timeline {
        padding-left: 0;
        padding-right: 0; 
    }
}
section.section-light article.timeline-box{border:1px solid #dfdfdf !important;}

section.custom-timeline .timeline-box  a.mask_link:after{
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}
section.custom-timeline .experience-description .pos_a{
    bottom: 32%;
    right: 25px;
}
:root{
    --font:"Varela Round",Circular,-apple-system,BlinkMacSystemFont, "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:#1f7399;
    --maindark:#107197;
    --maindlight:#41aad9;
    --second:#314049;
    /* --seconddark:; */
    --seconddlight:#5d6f7a;
    --gold: #cdac81;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

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

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

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

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

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (min-width: 1200px){
    .container {
        max-width: 1240px;
    }
}
@media (max-width: 1441px) {
    section.custom-timeline .experience-description .pos_a{bottom: 27%;width: 150px;flex-wrap: wrap;}
    .publish .d-flex .item_data:nth-child(2) .from p,.d-flex .item_data:nth-child(6) .from p{width: 130px;}
    #footer.border-0{
        border-top: 1px solid rgb(49 64 74 / 15%) !important;
        background: -webkit-gradient(linear, left top, right top, color-stop(25.8%, #31404a), color-stop(25.8%, #ffffff));
        background: linear-gradient(to right, #31404a 25.8%, #ffffff 25.8%);
    }
    .custom-checkbox.d-inline-block+.d-inline-block.divelse{width: 65%}
    .fluid-pad{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .filter_cate{max-height: 200px}
}
@media (max-width: 1367px) {}


@media (max-width: 1025px) {    
    .header-logo ~ form .input-group{max-width: 300px;}
    #header .hidden-xs.btn-rounded.btn-outline.f14{font-size: 12px !important}
    #header .header-nav-main.header-nav-main-font-md nav > ul > li > a{font-size: .9rem}
    .tags li{min-height: 66px;display: inline-flex;justify-content: center;}    
    .page-header.page-header-modern.page-header-background.page-header-background-sm{padding: 0}
    section.custom-timeline{margin:0 ;width:calc(100%);}
    aside .testimonial-author .cover{width:40px;height: 40px}
    .vlr.topics{left: 10px}
    .sticky-active .testimonial-author .cover,.message_top .testimonial-author .cover{width:40px;height: 40px;margin-bottom: 0}
    .experience-description .d-flex{display: block !important}
    .experience-description .item_data{width: 24%;display: inline-block}
    .inmember.off .experience-description .item_data{width: auto;}
    .experience-description h4,.experience-description .d-flex .item_data:first-child{padding-left: 15px}
    .publish .d-flex .item_data:nth-child(2) .from p,.publish.inmember .d-flex .item_data:nth-child(6) .from p{width:100%;}
    .inmember .timeline-box .row{align-items: start !important;}
    .inmember .timeline-box .row .p-3{padding: 10px 0 0 10px !important}
    .inmember .experience-description.col-sm-7> a>p{padding-left: 15px;}
    section.custom-timeline.inmember  .experience-description .pos_a{bottom:auto;top:0px;width:auto;}
    table.plan_table{width:750px}
    .plan_table.cart{width: 1000px}
    .index-data .text-left.f16{height: 104px}
}


@media (max-width: 769px) {

    #header .header-nav-main.header-nav-main-font-md nav > ul > li > a{font-size: 1rem}
    .mobile-menu-opened button.header-btn-collapse-nav .icon-menu:before{
        content: '\f00d';
        font-family: 'Line Awesome Free';
        font-weight: 900;
        font-size: 24px;
    }
    #header .header-body{background-color: transparent;margin-left: -1px;width: calc(100vw + 2px);}
    .sticky-header-active #header .header-body{background-color:#fff}
    .dropdown.user:after,.dropdown.user:hover:after{color:#fff;right: 10px;top: 14px;}
    .bg-primary, #header .header-nav.header-nav-links nav > ul > li > a.bg-primary{background-color: transparent!important;color:#fff;}
    #header .header-nav-main nav > ul li a.dropdown-toggle .fa-chevron-down{opacity:0;z-index: 2}
    #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li .dropdown-menu > li{border-color:#fff;}
    #header.header-no-border-bottom .header-nav.header-nav-links nav > ul > li.user > a,#header.header-no-border-bottom .header-nav.header-nav-line nav > ul > li.user > a{border-radius: 8px 8px 0 0 !important}
    #header .header-nav.header-nav-dropdowns-dark nav > ul > li.dropdown.user .dropdown-menu{border-radius:0 0 8px 8px}
    #header .header-nav-main nav > ul li.user a.dropdown-toggle .fa-chevron-down{width:100%;}
    .page-header h2{font-size: 28px;}
    .page-header h2+p,.page-header .breadcrumb > li{font-size: 14px !important;}
    section.custom-timeline .timeline-box.right{float: none}
    section.timeline .timeline-box.right:before{content: none}
    section.custom-timeline .timeline-box .experience-info, section.custom-timeline .timeline-box .experience-description{padding: 10px 25px}
    .index_slick .slick-prev,.index_slick .slick-next{top: 53%}
    .index_slick .slick-prev:before,.index_slick .slick-next:before{width: 30px;}
    .index_slick .slick-next{right:-5px;}
    .page-header.page-header-modern.page-header-background.page-header-background-md{padding: 20px 0 120px}
    .ex h3{padding-left: 0}
    .tags li{min-height: auto;display: inline-flex;justify-content: center;} 
    #filter.modal .modal-dialog{max-width: 100vw;min-height: 100vh;background-color: #fff}
    #filter.modal .modal-dialog{margin: 0; } 
    #filter.modal .close{
        color: #fff;
        border-radius: 0;
        background-color: #1f7399 ;
        background-color: var(--main);
        opacity: 1;
    }
    #filter.modal .modal-content{border-radius: 0}
    #filter.modal .btn-primary[type="submit"]{
        position: fixed;
        border-radius: 0;
        left: 0;bottom: 0;
        width: 100vw;
        height: 46px;
    }
    .experience-description .d-flex{display: block !important}
    .experience-description .item_data{width: 32%;}
    .publish .d-flex .item_data:nth-child(2) .from p, .d-flex .item_data:nth-child(6) .from p{width:100%;}
    section.custom-timeline .experience-description .pos_a{bottom: 20px;text-align: right;}
    .filter_icon .cover{width: 22px;height: 22px;margin: calc((45px - 22px) / 2) calc((85% - 22px) / 2);}
    section.custom-timeline.publish.inmember .timeline-box .experience-description{padding-top: 70px;}
    /* .payment-way .testimonial .testimonial-arrow-up{position: absolute;left: -52px;top: 10px;-webkit-transform: rotate(225deg);transform: rotate( 225deg);} */
    section.custom-timeline.inmember .vip .secret.title-1{margin-left: 15px;width: calc(100% - 30px);}
    #off .box{width: 130px;height: 130px}
    #off .q2 .box span{transform: translate(0, 35px);}
    .td.vmid.f16{font-size: 13px !important;}    
    .index-data h4{height:55px} 
    .index-data .text-left.f16{height: 130px}
    .line_contact img{
        width: 45px;
        height: 45px;
    }
    html .scroll-to-top {right:10px;}



    
}


 /*iphone plus*/
@media (max-width: 430px) {
    h2{font-size: 1.8em}
    #header .header-btn-collapse-nav{
        margin: 0 0 0 1rem;
    }
    .slick-slide > div{padding: 0 15px;}
    .slick-prev, .slick-next{top:37%;}
    .slick-next {right: 5px;}
    .slick-prev {left: -15px;}
    .card.value{height: auto;}
    .vlr.topics{left: 6px}
    .topics .border{padding: 20px !important;min-height: 180px; }
    footer#footer{padding-bottom: 0}
    #footer.border-0{ background: linear-gradient(to top, #31404a 37%, #ffffff 37%)}
    .d-flex .item_data:first-child{padding-left: 15px;}
    .experience-description>a h4{padding: 0 15px}
    .list-unstyled.footer_about li,.service_list li{display: inline-block;padding: 5px;min-width: calc(100% / 3.1)}
    .service_list li{display: inline-block;width: calc(100% / 2.1);padding: 5px}
    .process-step-circle .process-step-circle-content i.text-5{font-size: 1.0em !important}
    .process .process-step-circle{width:55px;height: 55px;}
    .process .process-step{padding: 0 5px}
    .process.my-5{margin-top:1.5rem  !important;margin-bottom:2rem  !important;}
    .process .process-step:before{top: 27px;}
    .process-step-content p{font-size: 16px !important}
    .tags li{min-height:66px;width: calc(100% / 4.3);padding: 5px 8px;}
    .custom-control-label::before, .custom-control-label::after{left: -1.75em}
    .d-inline-block.divelse{width:100%;margin-bottom:8px;}
    .payment-way .testimonial.testimonial-style-3 blockquote.no_quote{padding:0 10px 10px}
    .payment-way .text-box{height: calc(100% - 20px)}
    .table td, .table th{padding: .75rem .5rem}
    .xs-f15{font-size: 15px !important}
    .ad-list .custom-control + p ,.ad-list .f16.my-2 + p{flex:0 0 100px;}
    .set_total h4{font-size: 20px}
    .set_total h4.text-primary{flex:0 0 50%;text-align: right}
    .case_hide{padding-bottom: 45%;}
    .case_hide:before{background-size: contain;opacity: .7}
    .case_hide.case_data .case_hide_text{top: 10%}
    .note_title{font-size: 15px}
    .cost span.text-primary{display: block;}
    .incoming_msg_img{width: 10%}
    .received_msg{width:88%;}
    .received_withd_msg{width: 100%}
    .sent_msg{width:85%;}
    .message_list .testimonial-author{flex-wrap: wrap;}
    .message_list .testimonial-author .cover{width: 46px;height: 46px;}
    .message_list .testimonial-author .d-flex + p{margin-bottom: 5px;padding-left: 55px; transform: translateY(-14px); font-size: 13px; }
    .experience-description .item_data{width:48%;}
    .experience-description .d-flex a.btn{width:125px;margin-right: 15px}
    ul.tab li{padding: 0 10px}
    section.custom-timeline.inmember .experience-description .pos_a{left: 40px;right: 20px;}
    section.bg-white.p25.shadow-sm.round-sm .form-row.px-3{padding:0px !important}
   .td.vmid.f16{font-size: 14px !important;text-align: left;}
   .form_title{left: -30px}
   .featured-boxes-modern-style-1 .featured-box .box-content{padding: 10px;}
   .featured-icon.featured-icon-style-2{width: 4em; height: 4em;line-height: 4em;}
   section.section.section-height-3{padding: .6153846154rem 0}
   .index-data .text-left.f16{min-height: auto;}
    .line_contact{font-size: 15px;}
     
}


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



/*iphone 5*/
@media (max-width: 321px) {
    #footer.border-0{ background: linear-gradient(to top, #31404a 39%, #ffffff 39%)}
    ul.tab li { padding: 0 10px;}
    ul.tab li a{font-size: 14px}
}


/*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) {}



/* common */
.ribbon {
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 2;
}
.ribbon div {
    position: absolute;
    top: 32px;
    left: 32px;
    padding: 30px 77px 10px 21px;
    border: 2px solid gold;
    border-radius: 10px;
    transform: rotate(344deg);
}
.ribbon span {
    position: absolute;
    display: block;
    padding: 6px 12px;
    font-size: 16px;
    letter-spacing: 2px;
    border-radius: 10px;
    background-color: goldenrod;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* top left*/
.ribbon-top-left {
    top: -30px;
    left: -30px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}
.ribbon-top-left::before {
    top: 0;
    right: 0;
}
.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}
.ribbon-top-left span {
    left: 35px;
    top: 35px;
    transform: rotate(344deg);
}
.recommend-tag {
    font-family: var(--font);
    font-size: 12px;
    color: white;
    letter-spacing: 2px;
    background-color: #FFBD59;
    padding: 5px 10px;
    border-radius: 25px;
}