@font-face { font-family: 華康儷粗圓; src: url("../fonts/華康儷粗圓.TTC"); } @font-face { font-family: century; src: url("../fonts/CENTURY.TTF"); } body { animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ -o-animation: fadein 2s; /* Opera */ font-size: 1rem; font-family: "Roboto-Regular", sans-serif; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { /* Opera */ from { opacity: 0; } to { opacity: 1; } } .h4, h4 { font-size: 1.2rem; margin-bottom: 20px; } .h1, h1 { font-size: 4rem; } .mainSlider { position: relative; z-index: 10; margin: 60px auto; } .waveArea { padding: 50px; background-color: #eebad1; } .waveSection { width: 100%; margin-top: -155px; z-index: 9; position: relative; } .waveItem { bottom: 0; width: 100%; position: relative; } .wave1 { position: absolute; width: 100%; bottom: 0; } .roate180 { transform: rotate(180deg); } .wave2 { position: absolute; width: 100%; transform: rotate(0deg); bottom: 20px; opacity: 0.2; } .wave { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; } .wave + .wave { z-index: 2; } .h2, h2 { font-size: 2.4rem; } a { color: #4c4c4c; font-size: 1rem; } a:hover { color: #e377a7; text-decoration: underline; } .whiteFont, .whiteFont a { color: #fff !important; } .yellowFont { color: #fff71d; } .grayFont { color: #858585 !important; } .grayLightFont { color: #cdcdcd; } .errorFont { color: #c91f1f; } .successFont { color: #00b124; } .primaryColor { color: #e377a7; } .greenFont { color: #4bafb7; } .blackFont { color: #212529; } .deepBlueFont { color: #08376b; } .blueFont { color: #0e9496 !important; } .orangeFont { color: #e28801; } .orangeBgColor { background-color: #ffc46b; } .blackBgColor { background-color: #212529; } .yellowBgColor { background-color: #fffbd5; } .blueDeepBgColor { background-color: #08376b; } .whiteBgColor { background-color: #fff; } .blueBgColor { background-color: #88c7d9 !important; } .blueLightBgColor { background-color: #fffeee !important; } .yellowLightBgColor { background-color: #f2ffff !important; } .grayBgColor { background-color: #f9f9f9; } .btn-primary { background: rgb(249, 205, 240); background: linear-gradient( 106deg, rgba(249, 205, 240, 1) 0%, rgba(208, 154, 255, 1) 95% ); } .btn-primary:hover { text-decoration: none; color: #e9078b; border-color: #fff; } .btn-outline-primary { color: #e377a7; border-color: #e377a7; } .btn-outline-primary:hover { color: #fff; background-color: #e377a7; border-color: #e377a7; } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: #e377a7; border-color: #e377a7; } .grayDeepBgColor { background-color: #aaaaaa; } .textBg { background-position: 50% 50%; background-size: cover; } .greenBtn { color: #fff; background-color: #4bafb7; } .glassBg { position: relative; background-size: cover; } .imgWrap img { border-radius: 10px; } .rowCardsDetail { padding: 10px 20px; } .responsibilityWrap .block { padding: 20px; border-radius: 10px; text-align: center; box-shadow: 4px 7px 23px rgb(34 35 58 / 10%); } /* .glassBg .glassImg::before{ content: ""; position: absolute; top: 0px; bottom: 0; left: 0; right: 0;/* apply the blur backdrop-filter: blur(5px); pointer-events: none; background-image: url(/tea/assets/images/bg2.jpg); }*/ .js-smooth-image { margin-top: 25%; } .img-full { width: 100%; } /* .glassImg::before{ height: 188px; content: ""; position: absolute; top: 88px; width: 100%; z-index: 15; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,196,107,1) 100%); } .glassImg::after{ height: 188px; content: ""; position: absolute; bottom: 0px; left: 0; width: 100%; z-index: 15; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,196,107,1) 100%); }*/ /* .glassBg .glassImg::after { content: ''; position: absolute; top: -20px; bottom: 0; left: 0; right: 0; background-size: cover; background-position:center; background: url(/tea/assets/images/bg2.jpg); filter: blur(10px); }*/ .map2Btn::before,.map1Btn::before{ content: "\f3c5"; font-family: 'Font Awesome 5 Free'; font-weight: 600; position: absolute; left: 0; top: 0px; } .map2Btn,.map1Btn{ position: relative; padding-left: 20px; margin-bottom: 20px; display: block; } .blueBtn { color: #fff; background-color: #36b4e5; } .kv { min-height: 914px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; position: relative; overflow: hidden; height: 100vh; } .kvBall { background-color: #fff; border: 12px solid #eebad1; border-radius: 50%; /* padding: 41px; */ padding: 10px; padding-top: 25px; text-align: center; width: 160px; height: 160px; } .kvText { position: absolute; top: 40%; left: 30%; z-index: 100; width: 500px; transform: translate(-50%, -20%) rotateX(10deg); } .leftTitle { z-index: 99; padding: 20px; top: 300px; left: -95px; font-size: 1.4rem; color: #cdcdcd; position: fixed; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* Box */ .kvbox { z-index: 10; position: relative; height: 100%; top: 50%; left: 70%; perspective: 9999px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(10deg); transition: 2s cubic-bezier(0.2, 0.9, 0.3, 1.3); /* Layers */ } .kvbox .layer { position: absolute; top: 55%; left: 50%; /* background: #FFFFFF;*/ /* box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.4);*/ animation: load 1.4s forwards; opacity: 0; } .kvTitle { font-family: "華康儷粗圓", "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-size: 5rem; line-height: 1.1; margin-top: 0; margin-bottom: 2rem; text-transform: uppercase; } .kvDec { color: #e377a7; font-size: 2rem; font-family: "century", Arial, Helvetica, sans-serif; } .layer:nth-child(1) { padding: 120px; transform: translate(-50%, -50%) rotateZ(0deg) translateZ(10px); /* border-radius: 15%;*/ animation-delay: 0.2s; } .layer:nth-child(2) { padding: 105px; z-index: 1; transform: translate(-50%, -50%) rotateZ(0deg) translateZ(50px); border-radius: 20%; animation-delay: 0.4s; } .layer:nth-child(3) { padding: 90px; transform: translate(-116%, -78%) rotateZ(0deg) translateZ(110px); border-radius: 25%; animation-delay: 0.6s; } .layer:nth-child(4) { padding: 75px; transform: translate(-50%, -50%) rotateZ(15deg) translateZ(140px); border-radius: 30%; animation-delay: 0.8s; } .layer:nth-child(5) { padding: 60px; transform: translate(-50%, -50%) rotateZ(15deg) translateZ(170px); border-radius: 35%; animation-delay: 1s; } .layer:nth-child(6) { padding: 45px; transform: translate(-50%, -50%) rotateZ(15deg) translateZ(200px); border-radius: 40%; animation-delay: 1.2s; } .layer:nth-child(7) { padding: 30px; transform: translate(-50%, -50%) rotateZ(15deg) translateZ(230px); border-radius: 45%; animation-delay: 1.4s; } .layer:nth-child(8) { padding: 15px; transform: translate(-50%, -50%) rotateZ(15deg) translateZ(260px); border-radius: 50%; animation-delay: 1.6s; } /* Load animation */ @keyframes load { to { opacity: 1; } } .testimonCard { height: 100%; margin-bottom: -60px; background: linear-gradient(to bottom, #12899a 0%, #c4d700 100%); border-radius: 10px; position: relative; text-align: center; padding: 5px; box-shadow: 0 7px 25px -4px rgb(0 0 0 / 20%); margin-top: 62px; box-sizing: border-box; } .testimonCardDetailName { position: absolute; right: 20px; bottom: 10px; } .row-flex { display: flex; flex-wrap: wrap; } .testimonCardWrap { margin-bottom: 100px; } .testimonCardDetail { position: relative; padding: 20px; height: 100%; border-radius: 10px; background-color: #fff; } .testimonCardDetailText span { padding-left: 170px; } .testimonCardDetailText { text-align: left; margin-bottom: 30px; margin-top: -12px; } .testimonCardImg { box-shadow: 0 1px 13px -4px rgb(0 0 0 / 44%); margin-top: -85px; width: 150px; height: 100%; background: linear-gradient(to bottom, #12899a 0%, #c4d700 100%); border-radius: 100%; position: relative; padding: 5px; box-sizing: border-box; } .testimonCardImg img { border-radius: 50%; width: 100%; } .deleteBtn { padding: 10px; } .bold { font-weight: bold; } .bigger { font-size: 3rem; } .cardImgTeam{ max-width: 82px; } .small { font-size: 0.8rem !important; } .marginAuto { margin: 0px auto; } .imgCard { border-radius: 10px; position: relative; /* background: rgb(255,218,217); background: linear-gradient(9deg, rgba(255,218,217,1) 0%, rgba(255,203,244,1) 100%); */ } .langFundContent{ display: none; } .langFundContent:first-child{ display: block; } .imgCard .imgCardMedia { position: absolute; bottom: -20px; display: flex; width: 100%; -ms-flex-pack: center !important; justify-content: center !important; } .imgCardName { font-size: 1.2rem; font-weight: bold; margin: 40px 10px; text-align: center; } .map { overflow: hidden; min-height: 450px; height: 100%; border-radius: 10px; } .imgCard .imgCardMediaBtn { margin: 0px 4px; -ms-flex-align: center !important; align-items: center !important; -ms-flex-pack: center !important; justify-content: center !important; text-align: center; border-radius: 50% !important; width: 50px; height: 50px; font-size: 1.5rem; color: #e377a7; background-color: #fff; display: flex; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .imgCard .imgCardMediaBtn:hover { text-decoration: none; color: #4c4c4c; margin-top: -10px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .imgCard .imgCardItem { overflow: hidden; position: relative; padding-bottom: 115%; } .imgCard .imgCardItem .over { position: absolute; top: 50%; /* position the top edge of the element at the middle of the parent */ left: 50%; /* position the left edge of the element at the middle of the parent */ width: 100%; transform: translate(-50%, -50%); } .btn-outline-gray { color: #4c4c4c; border: 1px solid #cdcdcd !important; } .btn-outline-gray:hover { color: #4c4c4c; background-color: #cdcdcd; } .btn-outline-light { color: #fff; border: 2px solid #fff !important; } .btn-outline-.responsiveTable:not(:disabled):not(.disabled):active, .btn-outline-.responsiveTable:not(:disabled):not(.disabled).active, .show > .btn-outline-.responsiveTable.dropdown-toggle { color: #fff; background-color: #e377a7; border-color: #e377a7; } .rowMargin { margin-bottom: 100px; } .btn-outline-light:hover { color: #36b4e5; background-color: #fff; } .btn-outline-.responsiveTable { color: #e377a7; border: 1px solid #e377a7 !important; } .btn-outline-.responsiveTable:hover { color: #e377a7; background-color: #eaeaea; } .garyBtn { color: #fff; background-color: #989898; } .mainVideoDetail { margin: 40px 0; } .mainVideo { position: relative; } .mainVideo::after { content: ""; background-color: #d5d5d5; width: 100%; top: 26px; z-index: 1; height: 100%; border-radius: 20px; position: absolute; left: 22px; box-shadow: 4px 13px 30px 1px rgb(63 1 50 / 20%); } .videoWrapper { z-index: 10; position: relative; padding-bottom: 56.25%; height: 0; border-radius: 20px; overflow: hidden; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btn-.responsiveTable { border: 0 !important; background: rgb(249, 205, 240); background: linear-gradient( 106deg, rgba(249, 205, 240, 1) 0%, rgba(208, 154, 255, 1) 95% ); } .btn-.responsiveTable:hover { color: #e9078b; background-color: #ffffff; } .shardowBtn { box-shadow: 4px 13px 30px 1px rgb(63 1 50 / 20%); } .btn-.responsiveTable:not(:disabled):not(.disabled):active, .btn-.responsiveTable:not(:disabled):not(.disabled).active, .show > .btn-.responsiveTable.dropdown-toggle { color: #fff; background-color: #0e9496; border-color: #0e9496; } .btn-.responsiveTable:focus, .btn-.responsiveTable.focus { color: #fff; background-color: #0e9496; border-color: #0e9496; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } .btn { border-radius: 0px; border: 0px; } .big { font-size: 22px !important; } .noborder { border: 0px !important; } .mobileFilterBtn { display: none; } .owl-carousel .owl-item { padding: 0px 60px; } .swiperTextContainer { padding: 0 4%; } .mb-30 { margin-bottom: 30px; } .benefitBoxItem { margin: 10px; } .benefitBoxImg { width: 25%; } .benefitBoxDetail { width: 75%; } .subscribe { width: 70%; } .payBtn, .loginBtn { background: #36b4e5; padding: 13px 20px; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 18px; line-height: 24px; min-width: 400px; display: inline-block; text-align: center; border-radius: 0; border: 0; transition-property: background-color; transition-duration: 0.5s; width: 100%; cursor: pointer; } .leftmenu { box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 24px 0px; } .pageContent { padding: 20px; } .leftmenu a { text-decoration: none; color: #4c4c4c; padding: 20px; display: block; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .owl-carousel { z-index: 11; } .owl-nav { display: block !important; } .owl-carousel .owl-nav button.owl-prev { position: absolute; left: 0px; } .owl-carousel .owl-nav button.owl-next { position: absolute; right: 0px; } .owl-carousel .owl-stage-outer { z-index: 12; } .owl-nav { position: absolute; display: block !important; z-index: 15; position: absolute; top: 50%; transform: translate(0%, -50%); width: 100%; /* You can specify ANY width values here */ } .leftmenu a:hover { background-color: #cdcdcd; padding-left: 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .leftmenuTitle { padding: 20px; } .leftmenuDetail { margin: 0; padding: 0; } .benefitWrap { padding: 40px; margin-top: -110px; z-index: 10; background-color: #fff; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 24px 0px; border-radius: 10px; } .shardowBox { padding: 40px; background-color: #fff; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 24px 0px; border-radius: 10px; } .border-radius { border-radius: 10px; } .offersCard { border-radius: 10px; padding: 40px 20px; box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2); } .spcat { border-left: 0px solid #36b4e5 !important; } .spcat a.active { background-color: #36b4e5; color: #fff !important; } .leftmenu a.active { background-color: #36b4e5; color: #fff !important; } .leftmenuDetail li { list-style: none; border-left: 4px solid #36b4e5; } .list { padding: 0px; margin: 0px; padding-left: 15px; } .content-up { margin-top: 0px !important; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .missionDetail { z-index: 10; position: relative; } .missionWrap { overflow: hidden; position: relative; background-size: cover; background-attachment: fixed; background-image: 50% 50%; } .missionWrap::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; opacity: 0.8; background: rgb(38, 42, 138); background: linear-gradient( 218deg, rgba(38, 42, 138, 1) 0%, rgba(53, 192, 237, 1) 50% ); } .csmContent { min-height: 500px; } .ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ellipsis3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .offerDetail { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; height: 115px; -webkit-box-orient: vertical; margin: 20px 0px; } .custonBtn { padding: 20px 10px; width: 100%; text-align: center; border: 0px; display: block; } .tabNav{ margin: 0; padding: 0; } .btn a { color: #4c4c4c; } .btn:hover a{ text-decoration: none; color: #fff; } .active a{ color: #fff; } .tabNav li{ list-style: none; display: inline-block; } .table tr.active { border: 2px solid #38bd14; } footer { background-color: #e377a7; } .footerLogo { width: 200px; } .table-bordered thead th, .table-bordered thead td { border-bottom-width: 0px; } .serviceMenu { padding: 0; margin: 0; list-style: none; display: inline-block; } .serviceMenu li { margin-right: 14px; display: inline-block; } .newTab { position: absolute; bottom: 0; height: 30px; background: rgb(0, 0, 0); background: linear-gradient( 360deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); width: 100%; } .teamImg { width: 30%; } .teamCard { border-radius: 10px; background-color: #fff; box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2); } .teamDes { width: 70%; padding: 20px; } .owl-dots { text-align: center; } .teamImg img { border-radius: 10px 0px 0px 10px; } .logoGroup { padding: 20px 5%; } .owl-dots .owl-dot.active { text-align: center; background-color: #36b4e5; } .teamBanner { background-size: cover; background-position: 50% 50%; } .owl-dots { display: none !important; } .teamDetail { position: relative; padding: 40px; background: rgb(33, 132, 180); background: linear-gradient( 41deg, rgba(33, 132, 180, 1) 28%, rgba(22, 101, 187, 1) 82%, rgba(21, 100, 187, 1) 86% ); } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { width: 50px; background: #fff; color: #f87f04; font-size: 2rem; border: 1px solid #fe6a05; margin: 0px 6px; border-radius: 50px; height: 50px; } .serviesCard .card-title { display: -webkit-box; font-size: 1.2rem; font-weight: 600; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 24px; } .card-title { color: #4c4c4c; display: -webkit-box; font-size: 1rem; font-weight: 600; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 24px; } .searchWrap { width: 166px; position: relative; } .mediaDownlaod:hover { color: #36b4e5; } .card-textAll { color: #858585; line-height: 24px; } /* .card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 24px; } */ .resourceCard { padding: 25% 20px; border-radius: 10px; border: 1px dotted #4c4c4c; } .titlelineHeight { line-height: 40px; } .iconList { margin: 0; padding: 0; padding-left: 30px; } .iconList li { position: relative; padding: 6px 0px; list-style: none; } .iconList i { left: -26px; top: 10px; position: absolute; } .mainBtn { background-color: #36b4e5; color: #fff; } .tabMenu { display: flex; } .tabMenu a { margin-right: 1px; padding: 20px; color: #fff; background-color: #cdcdcd; } .tabMenu a:hover { text-decoration: none; } #pormotionModal .modal-body { padding: 60px 20px; background-position: 50% 50%; background-size: cover; } .annualTab { font-size: 0.8rem; padding: 10px; color: #fff; background-color: #1e2088; } .modal-body .close { right: 0px; color: #fff; font-size: 3rem; top: 0px; position: absolute; /* background-color: #fff; */ border-radius: 50px; padding: 10px 15px; opacity: 1; box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2); } .modal-content { overflow: hidden; border-radius: 10px; border: 0 solid rgba(0, 0, 0, 0.2); box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2); } .modal-body { padding: 20px; } .modal-footer { justify-content: flex-start; padding: 0 20px 20px; border-top: 0 solid #dee2e6; } .modal { background-color: rgba(255, 255, 255, 0.5); } .datetimepicker table { margin: 10px; } .datetimepicker td, .datetimepicker th { padding: 5px; } .enrollmentlist { border-bottom: 1px solid #cdcdcd; } .enrollmentMember { font-size: 0.9rem; padding: 10px; border-bottom: 1px dotted #cdcdcd; } .glyphicon-arrow-left::after { content: "<"; } .glyphicon-arrow-right::after { content: ">"; } .dateRang { position: relative; } .dateRang::after { content: "To"; position: absolute; top: 12px; font-size: 0.8rem; right: -8px; } .input-group { position: relative; } .meidaTab { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: linear-gradient( 360deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); width: 100%; } .mediaDownlaod { position: absolute; bottom: 10px; right: 0; font-size: 2rem; } .searchInput { position: relative; } .fontUppercase { text-transform: uppercase; } .floorPlan { position: relative; } .zoomBtn { color: #4c4c4c; bottom: 10px; right: 10px; position: absolute; padding: 6px 10px; background-color: #fff; border: 1px solid #cdcdcd; border-radius: 50px; } .newsDate { font-weight: 600; color: #b8b8b8; font-style: italic; } .serachIconBtn { color: #cdcdcd; position: absolute; right: 22px; top: 6px; border: 0; background: transparent; } ul.member { padding-left: 30px; } ul.member li { position: relative; list-style: none; line-height: 28px; } ul.member li i { color: #cdcdcd; position: absolute; left: -26px; top: 5px; } .newsItem .date { color: #b1b1b1; white-space: nowrap; } .newsItem .newDes { text-align: left; } .newsItem { margin-bottom: 20px; padding: 20px; border-radius: 10px; width: 100%; border: 0; display: flex; background-color: #fff; box-shadow: 4px 7px 23px rgb(34 35 58 /10%); } .newsItem:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; color: #e377a7; } .sbutton { color: #fff; padding: 5px 10px; font-size: 0.8rem; border-radius: 10px; } .calendarWrap { padding: 100px; overflow: hidden; background-color: #f8f8f8; } .mainSliderWrap { padding-left: 118px; padding-right: 73px; margin-bottom: 140px; } .memberCard { padding: 20px; border: 1px solid #cdcdcd; border-radius: 10px; } .tabContent { padding: 30px; border: 1px solid #cdcdcd; } .accordionWrap { border-bottom: 1px dotted #cdcdcd; } .accordionTitle { position: relative; padding: 10px 20px; cursor: pointer; } .accordionTitleBtn::before { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 10px; } .roateIcon .accordionTitleBtn::before { transform: rotate(90deg); } .accordionBody { margin-bottom: 10px; padding: 10px 20px; } .blueOutlineBtn { color: #1e2088 !important; border: 1px solid #1e2088 !important; background-color: #fff; } .grayOutlineButton { color: #4c4c4c !important; border: 1px solid #cdcdcd !important; background-color: #fff; } .tabMenu a.active { background-color: #4bafb7; } .roateIcon .fa-stack { transform: rotate(90deg); } .button { padding: 10px 40px; border-radius: 50px; border: 0; } .mapDetailWrap { position: relative; } .sbutton:hover { background-color: #e377a7; color: #fff; } .tabs { display: flex; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; margin-bottom: 20px; } .tabs a { border-radius: 10px; display: block; padding: 10px 20px; } .tabs a.active { background-color: #e377a7; color: #fff; } .nav-tabs { width: 100%; display: flex; margin-bottom: 0 !important; box-shadow: 0 1px 24px -8px hsla(0, 0%, 70%, 0) !important; } .nav-tabs .nav-item { text-align: center; width: 50%; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #1e2088; font-weight: bold; background-color: #fff; } .nav-tabs .nav-link { font-size: 1.5rem; color: #fff; font-weight: bold; padding: 20px; background-color: #cdcdcd; border: 0 solid transparent; border-top-left-radius: 0; border-top-right-radius: 0; } .modal-header { padding: 2rem; border-bottom: 0px solid #dee2e6; } .bigIcon { width: 70px; height: 70px; } .loginWrap { max-width: 500px; } .radioText.active { font-weight: bold; color: #35c0ed; } .form-control:focus { border-color: #cdcdcd; outline: 0; box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.25); } select:required:invalid { color: #cdcdcd; } select:required:invalid > option:not(:first-child), optgroup { color: initial; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .selecter { padding-right: 30px !important; } select { background: transparent; -webkit-appearance: none; } .selectionSelecter { position: relative; } .selectionSelecter::after { top: 30%; font-size: 0.6rem; position: absolute; right: 12px; color: #cdcdcc; content: "\f078"; font-family: "Font Awesome\ 5 Free"; font-weight: 600; } .table { overflow: hidden; border-radius: 10px; font-size: 1rem; } a.whiteLink { color: #fff; } .cmsContent { padding: 60px 0px; } a.whiteLink:hover { text-decoration: underline; } .subscribeBtn { border: 0 !important; } .subscribeBtn:hover { background-color: #cdcdcd; } .btn { padding: 10px 20px; height: calc(2em + 0.75rem + 2px); border-radius: 30px; border: 1px solid; } :focus { outline: none; } .newslist a:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 0 2px 14px 0px rgba(0, 0, 0, 0.3); } .newslist a { margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.3); } .searchInput { position: relative; } .searchInput input { padding-right: 30px; } .searchInput a { position: absolute; right: 10px; top: 12px; } .serviceMenuItem { border: 1px solid #f1fbff; } .serviceMenuItem.active { background-color: #0e9496 !important; color: #fff !important; border: 1px solid #0e9496 !important; box-shadow: 0 2px 14px 0px rgba(0, 0, 0, 0.3); } .ui-accordion-content-active { border-bottom: 1px solid #cdcdcd; margin-bottom: 20px; } .ui-state-default { padding-bottom: 10px; border-bottom: 1px solid #cdcdcd; } .ui-accordion-header-active { padding-bottom: 10px; border-bottom: 0px solid #cdcdcd; } .ui-icon, .ui-widget-content .ui-icon { padding: 0px 10px; margin-right: 10px; background-repeat: no-repeat; background-image: url(../images/icon/caret-right-solid.svg); } .ui-state-active .ui-icon, .ui-button:active .ui-icon { padding: 0px 10px; margin-right: 10px; background-repeat: no-repeat; background-image: url(../images/icon/caret-down-solid.svg); } .roundBtn { padding: 10px 20px; border-radius: 50px; border: 1px solid; } .roundBtn:hover { border: 1px solid; } .form-control { padding: 0px 20px; border-radius: 10px; height: calc(2em + 0.75rem + 2px); } .quickSearchForm { margin-right: -5px; margin-left: -5px; } .quickSearchForm .form-group { padding: 0px 5px; margin-bottom: 10px; } .quickSearchForm .form-control { border: 0; } .toggle-button { display: inline-block; background-color: #f3f3f3; color: #4c4c4c; padding: 10px 30px; border-radius: 10px; cursor: pointer; } .srotPackGroupBtn { padding: 0px 10px; } .modalFooter { padding: 20px 0px; } .containersForm { display: none; } .weightGroupWrap { width: 40%; } .toggle-button.active, .toggle-group.merged .toggle-button:hover { background: #35c0ed; color: #fff; } .input-field-upper-label { width: inherit; height: 17px; font-size: 11px; font-weight: 500; line-height: 1.55; color: #717585; margin-left: 5px; margin-bottom: 4px; display: inline-flex; } input.shipping[type="radio"]:checked + label { color: #36b4e5; } .shippingItem.active { color: #36b4e5; fill: #36b4e5 !important; box-shadow: 0 0 0 2pt #36b4e5 !important; } .shippingItem { padding: 10px; border: 1px solid #cdcdcd; border-radius: 10px; } .nowrap { white-space: nowrap; } .silderTitle { font-size: 4rem; } .silderTextWrap { width: 50%; padding-left: 10%; } .silderDetail { text-align: justify; line-height: 30px; } .form-control::-webkit-input-placeholder { color: #cdcdcd; } .form-group label, .label { font-size: 0.9rem; } .leftImg { position: relative; padding-top: 5%; } .leftImg::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054"; font-size: 1.4rem; padding: 8px; top: 40%; right: -26px; position: absolute; z-index: 1; color: #4c4c4c; background-color: #fff; border-radius: 50px; width: 50px; height: 50px; } .card-img, .card-img-top { border-top-left-radius: 0; border-top-right-radius: 0; } .card { border-radius: 0; } .roate { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .joinUsDes { position: relative; padding: 40px 20px; } .buttonWrap { margin: 50px 20px; } .centerRecaptcha { width: 300px; margin: 0px auto; } .hidden { display: none; } .group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #cdcdcd; } .memberItem i { cursor: pointer; position: absolute; right: -20px; top: 0px; padding: 10px; } .memberItem { margin-top: 20px; position: relative; padding: 10px 30px 10px 10px; border-radius: 10px; border: 1px solid #cdcdcd; } .mainSearch { position: relative; background-position: 50%; background-size: cover; padding-top: 80px; overflow: hidden; } .quickSearch { padding: 80px 15px 200px 15px; z-index: 2; position: relative; } .searchBox { height: auto; font-size: 0.6rem; border-radius: 0px; padding: 16px 8px; padding-right: 15px; border: 0px; border-right: 1px solid #cdcdcd; } .mainSearch::after { content: ""; z-index: 1; width: 100%; top: 0; position: absolute; height: 100%; background-color: rgba(8, 76, 107, 0.8); } .methodItem { margin: 40px; cursor: pointer; border: 1px solid #cdcdcd; padding: 40px; border-radius: 10px; } .hide { display: none !important; } .table th, .table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #fff; } .table th { color: #fff; background-color: #e377a7 !important; } .table td:last-child, .table th:last-child { border-right: 0px solid #cdcdcd; } .table tr:nth-child(odd) { background-color: #f8f8f8; } .table tr:nth-child(even) { background-color: #f8f8f8; } .methodItem.active { border: 1px solid #1e2088; } .lborderYellow { border-left: 6px solid #ffe665; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle{ color: #fff; background-color: #eebad1; border-color: #df1986; } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus{ box-shadow: 0 0 0 0.2rem rgb(255 38 229 / 50%); } .btn-primary:focus, .btn-primary.focus { color: #fff; background-color: #eebad1; border-color: #df1986; box-shadow: 0 0 0 0.2rem rgb(255 38 229 / 50%); } .close { position: absolute; right: 20px; top: 6px; font-size: 3rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.5; } .boxInDetail { padding: 20% 20px; margin: 20px; background-color: #fff; } #map2, #map1 { overflow: hidden; border-radius: 10px; height: 900px; } .mapDetail { position: absolute; background-color: rgba(255, 255, 255, 0.8); right: 20px; top: 4%; padding: 20px; border-radius: 20px; overflow: hidden; z-index: 99; max-width: 300px; } .mapWrap { position: relative; } .mapDetail { display: none; } .boxWrap { border-radius: 10px; background-color: #fff; border: 1px solid #cdcdcd; padding: 20px; height: 100%; } .videoIframe { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .videoIframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .searchResultsDetail { padding: 20px; } .srotPackGroupWrap .toggle-button { width: 100%; } .srotPackGroupWrap label { text-align: center; width: 25%; line-height: 28px; } .joinBtn { padding: 10px 40px; } .shippingLabel { cursor: pointer; } .unbold { font-weight: 400 !important; } .listRow { margin-bottom: 20px !important; padding: 20px; background-color: #f8f8f8; } .backgroundImg { background-size: cover; background-position: 50% 50%; } .subWrapper { background-position: 50% 50%; background-size: cover; padding-top: 100px; padding-bottom: 60px; } .quickSubSearch { padding: 0px 50px 40px 50px; } .tag { display: inline-block; border-radius: 20px; padding: 5px 15px; font-size: 0.8rem; } .tagbig { display: inline-block; border-radius: 20px; font-size: 1rem; padding: 10px 20px; } .tagBtn { padding: 5px; font-size: 0.8rem; background-color: #f3fcff; } .searchResultsItem { margin-bottom: 20px; border-radius: 10px; } .searchResultsPrice { background-color: #eef6ff; text-align: center; padding: 20px; border-radius: 0px 10px 10px 0px; } .sliderMask::after { content: ""; position: absolute; width: 100%; top: 0; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .boxOutLine { margin: 20px; border: 2px solid #fff; background: transparent; } .joinBox { box-shadow: 2px 5px 36px -14px hsla(0, 0%, 70%, 0.7); } .joinUs { background-size: cover; background-position: 50% 50%; } .cardItemBtn { width: 100%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .cardItemBtn .cardImg { height: 260px; position: relative; background-size: cover; overflow: hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .card { border: 0; } .cardItemBtn:hover { text-decoration: none; color: #cdcdcd !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3); } .joinUs::after { position: absolute; content: ""; width: 0; top: 42%; height: 0; left: 0; border-style: solid; border-width: 25px 0 25px 26px; border-color: transparent transparent transparent #fff; } .cardItemBtn .rightArrow { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .cardItemBtn:hover .rightArrow { padding-left: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .cardItemBtn .cardImg::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; transition: inherit; } .cardItemBtn:hover .cardImg::before { transform: scale(1.2); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .numberInput { width: 50%; } .feeBox { margin: 20px; padding: 60px 20px; } .greenBorder { border: 1px solid #4bafb7; } .blueBorder { border: 1px solid #1e2088; } .fullWidth { width: 100%; } .halfWidth { width: 50%; height: auto; } .fullCourse { color: #cdcdcd; } .fullCourse input { color: #cdcdcd; } .yellowBtn { font-size: 0.8rem; padding: 10px 30px; border: 0; background-color: #ffe665; color: #4c4c4c; } .yellowBtn:hover { background-color: #fff2ae; } .yellowLine { width: 100px; background-color: #ffe665; height: 6px; } .link { font-weight: 500; color: #e377a7; } .linkActive { font-weight: 500; text-decoration: underline; } .link:hover { color: #e9078b; text-decoration: underline; } .with-errors { color: #c91f1f; font-size: 0.9rem; } .headerTitle { font-weight: bold; color: #e377a7; position: relative; } .headerTitle::after { content: ""; width: 100px; height: 4px; bottom: -8px; position: absolute; background-color: #e377a7; left: 0; } .linkWhite { font-weight: 500; color: #fff; } .linkWhite:hover { color: #cdcdcd; } .colPadding { padding: 0px 60px; margin-bottom: 20px; } .mainVideoWrap { padding: 100px 0px 140px 0px; } .mainWrap { margin: 60px 0px; } .mainSmallWrapper { position: relative; background-position: 50% 0%; padding: 60px 10%; z-index: 10; background-size: 100%; } .mainWrapper { position: relative; padding: 140px 10%; z-index: 10; } .serviesCard { text-align: center; background-color: transparent; } .newsCard .card-text { font-size: 0.9rem; } .newsCard { margin-bottom: 20px; } .newsCard .card-body { padding: 10px; } .newsSubCard:hover { text-decoration: none; } .newsCard .cardImg { position: relative; overflow: hidden; padding-bottom: 62%; border-radius: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .cardImgWrap .tag { position: absolute; bottom: -12px; color: #fff; right: 30px; } .bgpurple { background-color: #8445bc; } .bgred { background-color: #d2136f; } .bgblue { background-color: #1488d2; } .bggreen { background-color: #0f940c; } .bgorange { background-color: #e37914; } .bgdark { background-color: #171a8c; } .bgyellow { background-color: #a6940f; } .bglightgreen { background-color: #45bca3; } .bgdeepred { background-color: #b53535; } .bgbrown { background-color: #814100; } .newsCard .cardImgWrap { position: relative; } .newsCard:hover { text-decoration: none; color: #e9078b; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .newsCard .cardImgOver { position: absolute; width: 100%; left: 0; top: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .newsCard:hover .cardImg img { transform: scale(1.1); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .mainIcon { border-radius: 50%; width: 145px; margin: 20px auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .iconCard { display: block; text-align: center; } .iconCard .iconCardDes { opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .iconCard:hover { text-decoration: none; } .iconCard:hover .mainIcon { box-shadow: 4px 7px 23px rgb(34 35 58 / 10%); transform: translate(0px, -10px); } .iconCard:hover .iconCardDes { opacity: 1; transform: translate(0px, 10px); } .blod { font-weight: 800; } .breadcrumbWrapper { padding: 40px 50px; margin: 0px auto; } .contentHearder { margin-bottom: 20px; } .contentTitle { font-weight: bold; font-size: 2rem; } .newRow { padding: 20px; border-bottom: 1px dotted #cdcd; } .newRow:hover { background-color: #fffae1; } .listTableHead { font-weight: bold; padding: 10px; background-color: #f8f8f8; } .listTableRow { padding: 10px 25px; } .bigFont { font-size: 4rem; } .breadcrumbLink a, .breadcrumbLink { z-index: 2; font-size: 0.8rem; } .bold { font-weight: bold; } .lab_video_text_overlay { margin-top: 174px; z-index: 1; } .sliderStar { position: absolute; right: -560px; top: 25px; } .breadcrumb { background-position: 50% 50%; background-size: cover; position: relative; border-radius: 0px; background-color: #fff; padding: 0 1rem; margin-bottom: 0px; padding-top: 88px; } .footerMenu { display: flex; } footer a { color: #212529; } .footerMenu a { padding: 10px; font-size: 2rem; } .footerMedia a { font-size: 1.6rem; padding: 10px; } .footerPrivacy a { position: relative; padding: 10px; } .footerPrivacy a:first-child::after { content: "|"; position: absolute; right: 0; } .footerPrivacy a:last-child::before { content: "|"; position: absolute; left: 0; } .filterLink { color: #4c4c4c; font-size: 1.25rem; } .filter { font-size: 1.25rem; } .filterLink.active, .filterLink:active { color: #36b4e5; font-size: 1.25rem; } .mainDesItem { padding: 20px 60px; } .scrollToTop { z-index: 200; position: fixed; bottom: 40px; right: 20px; color: #4c4c4c; background: rgba(255, 255, 255, 0.7); padding: 14px 18px; width: 50px; height: 50px; display: block; text-decoration: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; box-shadow: 0 4px 25px -3px rgba(0, 0, 0, 0.2); } .ci { margin-top: 40px; border-radius: 10px; padding: 10px 20px; } .mobileBorderTop { padding: 0; border-top: 0px solid #cdcdcd; } .titleList { position: relative; padding-left: 28px; } .titleList01::before { content: "1."; position: absolute; left: 0px; } .titleList02::before { content: "2."; position: absolute; left: 0px; } .titleList03::before { content: "3."; position: absolute; left: 0px; } .mapBtnWrap { margin: 40px 0px; } .titleList04::before { content: "4."; position: absolute; left: 0px; } .newsContent { margin-bottom: 40px; } .boxshardow { overflow: hidden; border-radius: 10px; box-shadow: 4px 7px 23px rgb(34 35 58 / 10%); } .prevBtn { color: #4c4c4c; padding: 10px 20px; text-decoration: none; } .boxText { overflow: hidden; border-radius: 10px; } .filterItem { display: block; } .nameTable { margin: 20px 0px; } .bgfixed { background-repeat: no-repeat; background-position: center; background-attachment: fixed; } .nameTable .nameTd { padding: 10px; border: 1px solid #efefef; } .nameTable .nameTd:nth-of-type(odd) { background-color: #f1fbff; } .nameTable .nameTd:nth-of-type(even) { background-color: #f9f9f9; } .tableWrap { overflow-x: auto; } .rotate { transform: rotate(-90deg); /*transform: rotate(180deg);*/ transition: 0.3s; }