/*
Theme Name: BetterPi
Theme URI: https://www.betterpi.com
Author: Better Pi Limited
Author URI: https://www.betterpi.com
Version: 1.0.1
Requires at least: 4.4
Requires PHP: 5.2.4
Text Domain: betterpi
*/

/*--------------------------------------------------------------
general
--------------------------------------------------------------*/
html {
    width: 100%;
    overflow-x: hidden;
}
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
#page {
    height: 100%;
    width: 100%;
}

/*----- Util Class -----*/
.no-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}
.text-orange {
    color: #FF931C;
}

.bg-orange {
    background-color: #FF931C;
    color: #FFFFFF;
}
.bg-white {
    background-color: #FFFFFF;
    color: #FF931C;
}

.more-btn {
    display: inline-blick;
    padding: 14px 30px;
    border-radius: 50rem;
    transition: all .2s ease-in-out;
}
.more-btn:focus {
    box-shadow: unset;
}
.more-btn:hover {
    transform: scale(.9);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
    .more-btn {
        padding: 18px 43px;
    }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

/*----- Font Setting -----*/
body {
    font-family: 'Roboto', sans-serif;
    color: #023047;
    letter-spacing: 0.15em;
}
:lang(zh) body {
    font-family: 'Noto Sans TC', sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: 0.15em;
    position: relative;
    z-index: 10;
}
h1 {
    font-size: 24px;
    line-height: 33px;
}
h2 {
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
}
h3 {
    font-size: 20px;
    line-height: 23px;
}
p {
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.15em;
    position: relative;
    z-index: 10;
    max-width: 100%;
}
a {
    color: #FF931C;
    position: relative;
    z-index: 10;
    letter-spacing: 0.15em;
}
a:hover {
    color: #FF931C;
}

@media (min-width: 768px) {
    h1 {
        font-size: 44px;
        line-height: 60px;
    }
    h2 {
        font-size: 38px;
        line-height: 45px;
        text-align: center;
    }
    h3 {
        font-size: 36px;
        line-height: 42px;
    }
    p {
        font-size: 20px;
        line-height: 30px;
    }
}

@media (min-width: 1200px) {
    h2 {
        font-size: 48px;
        line-height: 56px;
        text-align: center;
    }
    h3 {
        font-size: 36px;
        line-height: 42px;
    }
    p {
        font-size: 24px;
        line-height: 35px;
    }
}
@media (min-width: 1680px) {
    h1 {
        font-size: 64px;
        line-height: 87px;
    }
}

/*----- item-circle -----*/
.item-circle-container {
    text-align: center;
}
.item-circle-container a {
    text-decoration: none;
}
.item-circle-container .item-circle {
    display: block;
}
.item-circle-container .item-circle .item-icon {
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65%, cover;
    border-radius: 50%;
    width: 110px;
    max-width: 100%;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.05);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 11px;
    position: relative;
}
.item-circle-container .item-circle .item-icon img {
    width: 60%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.item-circle-container .item-circle .item-icon::before {
    padding-top: 100%;
    content: "";
    display: table;
}
.item-circle-container .item-circle .item-title {
    color: #023047;
    line-height: 20px;
}
.item-circle-container .item-circle:hover .item-title,
.item-circle-container .item-circle:active .item-title {
    color: #FF931C;
}
@media (min-width: 768px) {
    .item-circle-container .item-circle .item-icon {
        margin-bottom: 15px;
        width: 165px;
    }
    .item-circle-container .item-circle .item-title {
        font-size: 20px;
        line-height: 35px;
        min-height: 105px;
    }
}
@media (min-width: 1200px) {
    .item-circle-container .item-circle .item-title {
        font-weight: bold;
    }
}

/*----- contact form 7 -----*/
div.wpcf7 .ajax-loader {
    vertical-align: middle;
    background-image: url('images/loading.gif');
    background-size: cover;
}
div.wpcf7 .wpcf7-not-valid-tip {
    color: #FF931C;
    font-size: 12px;
    text-align: left;
    line-height: 1;
}
div.wpcf7 .wpcf7-response-output {
    color: #FF931C;
    margin: unset;
    padding: unset;
    border: unset;
}
.recaptcha {
    font-size: 12px;
    line-height: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
    margin-bottom: 0;
    color: #999999;
    font-weight: 300;
    display: block;
    text-align: center;
}


/*----- decoration -----*/

/* background deco */
.bg-c1,
.bg-c2,
.bg-c3,
.bg-c4,
.bg-c5,
.bg-c6,
.bg-c7,
.bg-c8,
.bg-c9,
.bg-c10,
.bg-c11,
.bg-c12,
.bg-c13,
.bg-te1,
.bg-te2,
.bg-te3,
.bg-te4,
.bg-me1,
.bg-me2,
.bg-me3,
.bg-me4,
.bg-e1,
.bg-e2,
.bg-e3,
.bg-e4 {
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 1;
}
.bg-c1::before,
.bg-c2::before,
.bg-c3::before,
.bg-c4::before,
.bg-c5::before,
.bg-c6::before,
.bg-c7::before,
.bg-c8::before,
.bg-c9::before,
.bg-c10::before,
.bg-c11::before,
.bg-c12::before,
.bg-c13::before,
.bg-te1::before,
.bg-te2::before,
.bg-te3::before,
.bg-te4::before,
.bg-me1::before,
.bg-me2::before,
.bg-me3::before,
.bg-me4::before,
.bg-e1::before,
.bg-e2::before,
.bg-e3::before,
.bg-e4::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.bg-c1 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='white'/%3E%3C/svg%3E%0A");
    opacity: .1;
}
.bg-c2 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='49.5' stroke='white'/%3E%3C/svg%3E%0A");
    opacity: .2;
}
.bg-c3 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='49.5' stroke='%23FFB703'/%3E%3C/svg%3E%0A");
}
.bg-c4 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23FFB703'/%3E%3C/svg%3E%0A");
}
.bg-c5 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='49.5' stroke='%23FB8501'/%3E%3C/svg%3E%0A");
}
.bg-c6 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='24.5' y1='8' x2='77.5' y2='93.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF841C'/%3E%3Cstop offset='1' stop-color='%23FFB703'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}
.bg-c7 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23FB8501'/%3E%3C/svg%3E%0A");
}
.bg-c8 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23FFB703'/%3E%3C/svg%3E%0A");
}
.bg-c9 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234E5A66' opacity='0.5'/%3E%3C/svg%3E%0A");
}
.bg-c10 {
    background-image: url('images/bg/bg-c10.svg');
}
.bg-c11 {
    background-image: url('images/tvp/hero-bg-1.svg');
}
.bg-c12 {
    background-image: url('images/tvp/hero-bg-2.svg');
}
.bg-c13 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='99.5' stroke='%23C4C4C4'/%3E%3C/svg%3E");
}
.bg-te1 {
    background-image: url('images/bg/top-element-1.png');
}
.bg-te2 {
    background-image: url('images/bg/top-element-2.png');
}
.bg-te3 {
    background-image: url('images/bg/top-element-3.png');
}
.bg-te4 {
    background-image: url('images/bg/top-element-4.png');
}
.bg-me1 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='49.5' cy='49.5' r='47.5' fill='white' fill-opacity='0.1'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M56.3433 40.7278C55.3983 40.7278 54.6069 41.5224 54.6069 42.4506V70.1733C54.6069 71.1015 55.3983 71.8961 56.3433 71.8961H70.0248C70.9698 71.8961 71.7612 71.1015 71.7612 70.1733V42.4506C71.7612 41.5224 70.9698 40.7278 70.0248 40.7278H56.3433ZM52.6069 42.4506C52.6069 40.4085 54.3031 38.7278 56.3433 38.7278H70.0248C72.065 38.7278 73.7612 40.4085 73.7612 42.4506V70.1733C73.7612 72.2154 72.065 73.8961 70.0248 73.8961H56.3433C54.3031 73.8961 52.6069 72.2154 52.6069 70.1733V42.4506Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.2388 29.4555C26.2388 27.6609 27.6862 26.2278 29.4776 26.2278H59.5771C61.3685 26.2278 62.8159 27.6609 62.8159 29.4555V36.3862C62.8159 36.9385 62.3682 37.3862 61.8159 37.3862C61.2636 37.3862 60.8159 36.9385 60.8159 36.3862V29.4555C60.8159 28.7748 60.2733 28.2278 59.5771 28.2278H29.4776C28.7814 28.2278 28.2388 28.7748 28.2388 29.4555V69.1832C28.2388 69.8639 28.7814 70.411 29.4776 70.411H50.3731C50.9254 70.411 51.3731 70.8587 51.3731 71.411C51.3731 71.9632 50.9254 72.411 50.3731 72.411H29.4776C27.6862 72.411 26.2388 70.9778 26.2388 69.1832V29.4555Z' fill='%23FDFDFD'/%3E%3Cpath d='M63.3086 68.4405C64.0642 68.4405 64.6768 67.831 64.6768 67.0792C64.6768 66.3273 64.0642 65.7178 63.3086 65.7178C62.553 65.7178 61.9404 66.3273 61.9404 67.0792C61.9404 67.831 62.553 68.4405 63.3086 68.4405Z' fill='%23FDFDFD'/%3E%3Cpath d='M44.5273 68.4405C45.283 68.4405 45.8955 67.831 45.8955 67.0792C45.8955 66.3273 45.283 65.7178 44.5273 65.7178C43.7717 65.7178 43.1592 66.3273 43.1592 67.0792C43.1592 67.831 43.7717 68.4405 44.5273 68.4405Z' fill='%23FDFDFD'/%3E%3C/svg%3E%0A");
}
.bg-me2 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='49.5' cy='49.5' r='47.5' fill='white' fill-opacity='0.1'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.6301 61.9601C21.0542 61.9601 19 64.0023 19 66.4801C19 68.9578 21.0542 71 23.6301 71C26.2059 71 28.2601 68.9578 28.2601 66.4801C28.2601 64.0023 26.2059 61.9601 23.6301 61.9601ZM17 66.4801C17 62.8607 19.9871 59.9601 23.6301 59.9601C27.273 59.9601 30.2601 62.8607 30.2601 66.4801C30.2601 70.0995 27.273 73 23.6301 73C19.9871 73 17 70.0995 17 66.4801Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.6432 38.0406C36.0674 38.0406 34.0132 40.0828 34.0132 42.5606C34.0132 45.0383 36.0674 47.0805 38.6432 47.0805C41.2191 47.0805 43.2733 45.0383 43.2733 42.5606C43.2733 40.0828 41.2191 38.0406 38.6432 38.0406ZM32.0132 42.5606C32.0132 38.9412 35.0003 36.0406 38.6432 36.0406C42.2862 36.0406 45.2733 38.9412 45.2733 42.5606C45.2733 46.18 42.2862 49.0805 38.6432 49.0805C35.0003 49.0805 32.0132 46.18 32.0132 42.5606Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M61.1638 54.6008C58.5879 54.6008 56.5337 56.643 56.5337 59.1208C56.5337 61.5986 58.5879 63.6408 61.1638 63.6408C63.7396 63.6408 65.7938 61.5986 65.7938 59.1208C65.7938 56.643 63.7396 54.6008 61.1638 54.6008ZM54.5337 59.1208C54.5337 55.5014 57.5208 52.6008 61.1638 52.6008C64.8067 52.6008 67.7938 55.5014 67.7938 59.1208C67.7938 62.7402 64.8067 65.6408 61.1638 65.6408C57.5208 65.6408 54.5337 62.7402 54.5337 59.1208Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M74.3005 27C71.7247 27 69.6704 29.0422 69.6704 31.52C69.6704 33.9978 71.7247 36.04 74.3005 36.04C76.8763 36.04 78.9305 33.9978 78.9305 31.52C78.9305 29.0422 76.8763 27 74.3005 27ZM67.6704 31.52C67.6704 27.9006 70.6575 25 74.3005 25C77.9435 25 80.9305 27.9006 80.9305 31.52C80.9305 35.1394 77.9435 38.04 74.3005 38.04C70.6575 38.04 67.6704 35.1394 67.6704 31.52Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M70.9599 36.1299C71.4629 36.3579 71.6858 36.9505 71.4578 37.4535L63.9511 54.0135C63.7231 54.5165 63.1304 54.7394 62.6274 54.5114C62.1244 54.2834 61.9015 53.6908 62.1295 53.1877L69.6362 36.6278C69.8643 36.1248 70.4569 35.9018 70.9599 36.1299Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M43.4991 45.6071C43.8485 45.1794 44.4785 45.116 44.9062 45.4654L56.1663 54.6654C56.594 55.0149 56.6574 55.6449 56.308 56.0725C55.9585 56.5002 55.3286 56.5637 54.9009 56.2142L43.6408 47.0142C43.2131 46.6648 43.1496 46.0348 43.4991 45.6071Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M35.3941 47.2157C35.8713 47.4938 36.0327 48.1061 35.7546 48.5832L28.2478 61.4635C27.9697 61.9407 27.3575 62.102 26.8803 61.8239C26.4031 61.5459 26.2418 60.9336 26.5199 60.4564L34.0266 47.5762C34.3047 47.099 34.917 46.9376 35.3941 47.2157Z' fill='%23FDFDFD'/%3E%3C/svg%3E%0A");
}
.bg-me3 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='49.5' cy='49.5' r='47.5' fill='white' fill-opacity='0.1'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.041 24.5386C18.041 23.9863 18.4887 23.5386 19.041 23.5386H80.9594C81.5117 23.5386 81.9594 23.9863 81.9594 24.5386V36.6411C81.9594 37.1934 81.5117 37.6411 80.9594 37.6411H19.041C18.4887 37.6411 18.041 37.1934 18.041 36.6411V24.5386ZM20.041 25.5386V35.6411H79.9594V25.5386H20.041Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.041 40.1794C19.5933 40.1794 20.041 40.6272 20.041 41.1794V73.4615H79.9594V41.1794C79.9594 40.6272 80.4071 40.1794 80.9594 40.1794C81.5117 40.1794 81.9594 40.6272 81.9594 41.1794V74.4615C81.9594 75.0138 81.5117 75.4615 80.9594 75.4615H19.041C18.4887 75.4615 18.041 75.0138 18.041 74.4615V41.1794C18.041 40.6272 18.4887 40.1794 19.041 40.1794Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.5713 41.1794C22.5713 40.6272 23.019 40.1794 23.5713 40.1794H44.7141C45.2664 40.1794 45.7141 40.6272 45.7141 41.1794V66.8974C45.7141 67.4497 45.2664 67.8974 44.7141 67.8974H23.5713C23.019 67.8974 22.5713 67.4497 22.5713 66.8974V41.1794ZM24.5713 42.1794V65.8974H43.7141V42.1794H24.5713Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M49.7554 47.2307C49.7554 46.6784 50.2031 46.2307 50.7554 46.2307H74.9186C75.4709 46.2307 75.9186 46.6784 75.9186 47.2307C75.9186 47.783 75.4709 48.2307 74.9186 48.2307H50.7554C50.2031 48.2307 49.7554 47.783 49.7554 47.2307Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M49.7554 54.7949C49.7554 54.2426 50.2031 53.7949 50.7554 53.7949H74.9186C75.4709 53.7949 75.9186 54.2426 75.9186 54.7949C75.9186 55.3472 75.4709 55.7949 74.9186 55.7949H50.7554C50.2031 55.7949 49.7554 55.3472 49.7554 54.7949Z' fill='%23FDFDFD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M49.7554 63.8718C49.7554 63.3195 50.2031 62.8718 50.7554 62.8718H74.9186C75.4709 62.8718 75.9186 63.3195 75.9186 63.8718C75.9186 64.4241 75.4709 64.8718 74.9186 64.8718H50.7554C50.2031 64.8718 49.7554 64.4241 49.7554 63.8718Z' fill='%23FDFDFD'/%3E%3Cpath d='M25.0815 32.1025C25.9156 32.1025 26.5917 31.4252 26.5917 30.5897C26.5917 29.7542 25.9156 29.0769 25.0815 29.0769C24.2474 29.0769 23.5713 29.7542 23.5713 30.5897C23.5713 31.4252 24.2474 32.1025 25.0815 32.1025Z' fill='%23FDFDFD'/%3E%3Cpath d='M32.6328 32.1025C33.4668 32.1025 34.143 31.4252 34.143 30.5897C34.143 29.7542 33.4668 29.0769 32.6328 29.0769C31.7987 29.0769 31.1226 29.7542 31.1226 30.5897C31.1226 31.4252 31.7987 32.1025 32.6328 32.1025Z' fill='%23FDFDFD'/%3E%3Cpath d='M40.1835 32.1025C41.0176 32.1025 41.6937 31.4252 41.6937 30.5897C41.6937 29.7542 41.0176 29.0769 40.1835 29.0769C39.3495 29.0769 38.6733 29.7542 38.6733 30.5897C38.6733 31.4252 39.3495 32.1025 40.1835 32.1025Z' fill='%23FDFDFD'/%3E%3C/svg%3E%0A");
}
.bg-me4 {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='49.5' cy='49.5' r='47.5' fill='white' fill-opacity='0.1'/%3E%3Cpath d='M50.4501 74.7H49.183C48.7079 74.7 48.3911 75.0272 48.3911 75.5181C48.3911 76.009 48.7079 76.3363 49.183 76.3363H50.4501C50.9253 76.3363 51.242 76.009 51.242 75.5181C51.242 75.0272 50.8461 74.7 50.4501 74.7Z' fill='white'/%3E%3Cpath d='M49.183 24.2182H50.4501C50.9253 24.2182 51.242 23.8909 51.242 23.4C51.242 22.9091 50.9253 22.5818 50.4501 22.5818H49.183C48.7079 22.5818 48.3911 22.9091 48.3911 23.4C48.3911 23.8909 48.7079 24.2182 49.183 24.2182Z' fill='white'/%3E%3Cpath d='M75 52.9364C75 50.9727 73.4953 49.4182 71.5947 49.4182H69.0606V44.9182L69.1397 44.8364C69.5357 44.3455 69.6941 43.6909 69.6941 43.0364C69.6941 42.3818 69.4565 41.7273 69.0606 41.2364V27.9818V24.5455C69.0606 20.9455 66.2096 18 62.7252 18H36.9084C33.4239 18 30.573 20.9455 30.573 24.5455V27.9818V30.5182C26.8509 31.1727 24 34.5273 24 38.5364C24 42.5455 26.8509 45.9 30.573 46.5545V70.8545V74.4545C30.573 78.0545 33.4239 81 36.9084 81H62.8043C66.2888 81 69.1397 78.0545 69.1397 74.4545V70.8545V66.0273C70.1693 65.3727 70.882 64.3091 71.1196 63L72.1491 56.3727C72.8618 56.2909 73.5745 55.9636 74.1289 55.3909C74.6832 54.7364 75 53.8364 75 52.9364ZM49.3416 54.8182H49.104C48.0745 54.8182 47.2826 54 47.2826 52.9364C47.2826 52.4455 47.441 51.9545 47.837 51.5455C48.1537 51.2182 48.6289 50.9727 49.1832 50.9727H55.8354C55.7562 51.1364 55.7562 51.2182 55.677 51.3818C55.5978 51.6273 55.5978 51.7909 55.5186 52.0364C55.5186 52.1182 55.5186 52.1182 55.5186 52.2C55.5186 52.4455 55.4394 52.6909 55.4394 52.8545C55.4394 53.1 55.4394 53.3455 55.5186 53.5091C55.5186 53.5909 55.5186 53.5909 55.5186 53.6727V53.7545C55.5978 54 55.5978 54.2455 55.677 54.4909C55.677 54.5727 55.677 54.5727 55.7562 54.6545C55.7562 54.6545 55.7562 54.7364 55.8354 54.7364H49.3416V54.8182ZM67.7143 42.0545C68.0311 42.3 68.1102 42.6273 68.1102 43.0364C68.1102 43.2818 68.0311 43.6091 67.8727 43.7727L65.8137 46.4727L63.7547 49.2545C63.6755 49.1727 63.5171 49.0909 63.4379 49.0091C63.2795 48.9273 63.1211 48.7636 63.0419 48.6818C62.8835 48.6 62.8043 48.5182 62.646 48.4364C62.5668 48.3545 62.4876 48.3545 62.4084 48.2727C62.3292 48.1909 62.25 48.1909 62.1708 48.1909C62.0916 48.1909 62.0916 48.1091 62.0124 48.1091C61.9332 48.1091 61.854 48.0273 61.7748 48.0273H61.6956L66.1304 42.2182C66.2888 41.9727 66.6056 41.8091 66.9224 41.7273C67.0807 41.7273 67.3975 41.8091 67.7143 42.0545ZM59.3199 49.6636C59.3199 49.6636 59.3991 49.6636 59.4783 49.6636C59.5575 49.6636 59.6366 49.6636 59.7158 49.5818C59.795 49.5818 59.8742 49.5818 59.9534 49.5H60.0326C60.1118 49.5 60.191 49.5 60.191 49.5C60.191 49.5 60.191 49.5 60.2702 49.5C60.4286 49.5 60.5078 49.5 60.7453 49.5C60.8245 49.5 60.9037 49.5 61.0621 49.5818C61.1413 49.5818 61.1413 49.5818 61.2205 49.6636C61.2997 49.6636 61.3789 49.6636 61.3789 49.7455C61.3789 49.7455 61.3789 49.7455 61.4581 49.7455H61.5373C61.6165 49.7455 61.6165 49.7455 61.6956 49.8273C61.6956 49.8273 61.7748 49.8273 61.7748 49.9091C61.854 49.9091 61.854 49.9909 61.9332 49.9909C62.0124 49.9909 62.0916 50.0727 62.1708 50.1545C62.25 50.2364 62.3292 50.2364 62.4084 50.3182C62.4876 50.4 62.5668 50.4818 62.646 50.4818C62.7252 50.5636 62.8835 50.7273 62.9627 50.8091C63.0419 50.8909 63.1211 51.0545 63.2003 51.1364C63.2003 51.2182 63.2795 51.2182 63.2795 51.3C63.3587 51.3818 63.3587 51.5455 63.4379 51.6273C63.4379 51.7091 63.5171 51.7091 63.5171 51.7909C63.5171 51.8727 63.5963 52.0364 63.5963 52.1182C63.5963 52.2 63.5963 52.2 63.5963 52.2818C63.5963 52.4455 63.6755 52.6091 63.6755 52.8545C63.6755 53.0182 63.6755 53.2636 63.5963 53.4273C63.5963 53.5909 63.5171 53.7545 63.4379 53.9182C63.4379 53.9182 63.4379 54 63.3587 54C63.2795 54.1636 63.2003 54.3273 63.1211 54.4091C63.1211 54.4091 63.1211 54.4909 63.0419 54.4909C62.9627 54.6545 62.8835 54.7364 62.8043 54.9L62.7252 54.9818C62.5668 55.1455 62.4084 55.3091 62.25 55.4727C62.0916 55.6364 61.854 55.7182 61.6956 55.8C61.4581 55.8818 61.2997 55.9636 61.0621 56.0455C61.0621 56.0455 61.0621 56.0455 60.9829 56.0455C60.7453 56.1273 60.5078 56.1273 60.2702 56.1273C60.0326 56.1273 59.795 56.1273 59.5575 56.0455C59.5575 56.0455 59.5575 56.0455 59.4783 56.0455C59.2407 55.9636 59.0823 55.8818 58.8447 55.8H58.7655C58.5279 55.7182 58.3696 55.5545 58.2112 55.3909C58.0528 55.2273 57.8944 55.0636 57.736 54.9L57.6568 54.8182C57.5776 54.7364 57.4984 54.6545 57.4984 54.5727C57.4193 54.4909 57.3401 54.3273 57.3401 54.2455C57.3401 54.1636 57.2609 54.1636 57.2609 54.0818C57.2609 54.1636 57.2609 54.0818 57.1817 54C57.1817 53.9182 57.1817 53.9182 57.1025 53.8364C57.0233 53.5909 56.9441 53.2636 56.9441 52.9364C56.9441 52.6091 57.0233 52.2818 57.1025 52.0364C57.1025 51.9545 57.1025 51.9545 57.1025 51.8727C57.1025 51.7909 57.1817 51.6273 57.2609 51.5455C57.2609 51.4636 57.3401 51.4636 57.3401 51.3818C57.4193 51.3 57.4193 51.2182 57.4984 51.0545C57.5776 50.9727 57.6568 50.8909 57.6568 50.7273C57.736 50.5636 57.8944 50.4818 57.9736 50.4C58.0528 50.3182 58.132 50.2364 58.2112 50.1545C58.2904 50.0727 58.3696 50.0727 58.4488 49.9909C58.4488 49.9909 58.4488 49.9909 58.5279 49.9909C58.6071 49.9091 58.6863 49.9091 58.7655 49.9091H58.8447C58.9239 49.9091 59.0031 49.8273 59.0823 49.8273C59.0823 49.8273 59.1615 49.8273 59.1615 49.7455C59.2407 49.6636 59.3199 49.6636 59.3199 49.6636ZM67.4767 46.8818V49.3364H65.5761L67.4767 46.8818ZM36.9084 19.6364H62.8043C65.4177 19.6364 67.5559 21.8455 67.5559 24.5455V27.1636H32.1568V24.5455C32.1568 21.8455 34.2158 19.6364 36.9084 19.6364ZM25.5839 38.5364C25.5839 35.0182 28.3556 32.0727 31.7609 32.0727C31.8401 32.0727 31.8401 32.0727 31.9193 32.0727C32.5528 32.0727 33.1863 32.1545 33.8199 32.4C36.354 33.2182 38.2547 35.6727 38.2547 38.6182C38.2547 39.3545 38.0963 40.0909 37.9379 40.7455C37.0668 43.2818 34.7702 45.0818 31.9984 45.0818C28.4348 45.0818 25.5839 42.1364 25.5839 38.5364ZM62.7252 79.3636H36.9084C34.295 79.3636 32.1568 77.1545 32.1568 74.4545V71.6727H67.5559V74.4545C67.4767 77.1545 65.3385 79.3636 62.7252 79.3636ZM67.4767 66.6V70.0364H32.1568V46.7182C32.3152 46.7182 32.3944 46.7182 32.5528 46.7182C32.632 46.7182 32.7112 46.7182 32.7904 46.7182C32.9488 46.7182 33.1863 46.6364 33.3447 46.6364C33.4239 46.6364 33.5031 46.6364 33.5823 46.6364C33.7407 46.5545 33.9783 46.5545 34.1366 46.4727C34.2158 46.4727 34.295 46.4727 34.295 46.3909C34.4534 46.3091 34.691 46.2273 34.8494 46.2273C34.9286 46.2273 35.0078 46.1455 35.0078 46.1455C35.1661 46.0636 35.3245 45.9818 35.4829 45.9C35.5621 45.9 35.5621 45.8182 35.6413 45.8182C35.7997 45.7364 35.9581 45.6545 36.1165 45.4909C36.1957 45.4909 36.1957 45.4091 36.2748 45.4091C36.4332 45.3273 36.5916 45.1636 36.75 45.0818C36.8292 45 36.8292 45 36.9084 44.9182C37.0668 44.8364 37.146 44.6727 37.3043 44.5091C37.3835 44.4273 37.3835 44.4273 37.4627 44.3455C37.6211 44.1818 37.7003 44.1 37.7795 43.9364C37.8587 43.8545 37.8587 43.8545 37.9379 43.7727C38.0171 43.6091 38.1755 43.5273 38.2547 43.3636C38.3338 43.2818 38.3339 43.2 38.413 43.1182C38.4922 42.9545 38.5714 42.8727 38.6506 42.7091C38.7298 42.6273 38.7298 42.5455 38.809 42.4636C38.8882 42.3 38.9674 42.2182 39.0466 42.0545C39.1258 41.9727 39.1258 41.8909 39.205 41.8091C39.2842 41.6455 39.2842 41.5636 39.3634 41.4C39.3634 41.3182 39.4425 41.1545 39.4425 41.0727C39.5217 40.9091 39.5217 40.7455 39.5217 40.6636C39.5217 40.5818 39.6009 40.4182 39.6009 40.3364C39.6009 40.1727 39.6801 40.0091 39.6801 39.8455C39.6801 39.7636 39.6801 39.6 39.7593 39.5182C39.7593 39.2727 39.7593 39.0273 39.7593 38.7818V38.7C39.7593 38.4545 39.7593 38.1273 39.6801 37.8818C39.6801 37.8 39.6801 37.8 39.6801 37.7182C39.6801 37.4727 39.6009 37.3091 39.6009 37.0636C39.6009 36.9818 39.6009 36.9 39.5217 36.8182C39.4425 36.6545 39.4425 36.4091 39.3634 36.2455C39.3634 36.1636 39.2842 36.0818 39.2842 36C39.205 35.8364 39.205 35.6727 39.1258 35.5091C39.1258 35.4273 39.0466 35.3455 39.0466 35.2636C38.9674 35.1 38.8882 34.9364 38.809 34.7727C38.7298 34.6909 38.7298 34.6091 38.6506 34.5273C38.5714 34.3636 38.4922 34.2 38.413 34.1182C38.3339 34.0364 38.3338 33.9545 38.2547 33.8727C38.1755 33.7091 38.0963 33.6273 37.9379 33.4636C37.8587 33.3818 37.7795 33.3 37.7795 33.2182C37.7003 33.1364 37.5419 32.9727 37.4627 32.8909C37.3835 32.8091 37.3043 32.7273 37.2252 32.7273C37.146 32.6455 36.9876 32.4818 36.9084 32.4C36.8292 32.3182 36.75 32.2364 36.6708 32.2364C36.5124 32.1545 36.4332 32.0727 36.2748 31.9909C36.1957 31.9091 36.1165 31.9091 36.0373 31.8273C35.8789 31.7455 35.7997 31.6636 35.6413 31.5818C35.5621 31.5 35.4829 31.5 35.3245 31.4182C35.1661 31.3364 35.087 31.2545 34.9286 31.2545C34.8494 31.1727 34.691 31.1727 34.6118 31.0909C34.4534 31.0091 34.3742 31.0091 34.2158 30.9273C34.1366 30.9273 33.9783 30.8455 33.8991 30.8455C33.7407 30.8455 33.6615 30.7636 33.5031 30.7636C33.3447 30.7636 33.2655 30.6818 33.1071 30.6818C32.9488 30.6818 32.8696 30.6 32.7112 30.6C32.5528 30.6 32.4736 30.6 32.3152 30.6C32.236 30.6 32.1568 30.6 32.0776 30.6V29.0455H67.4767V40.4182C67.3975 40.4182 67.3183 40.4182 67.2391 40.4182C67.1599 40.4182 67.1599 40.4182 67.0807 40.4182C66.9224 40.4182 66.764 40.4182 66.6056 40.4182C65.8929 40.5 65.1801 40.9091 64.7842 41.4818L59.7158 48.1091C59.6366 48.1091 59.4783 48.1091 59.3991 48.1909C59.2407 48.1909 59.1615 48.2727 59.0823 48.2727C59.0031 48.2727 58.9239 48.3545 58.8447 48.3545C58.7655 48.3545 58.6863 48.4364 58.6071 48.4364C58.4488 48.5182 58.3696 48.5182 58.2112 48.6C58.0528 48.6818 57.9736 48.7636 57.8152 48.8455C57.6568 48.9273 57.4984 49.0909 57.4193 49.1727C57.2609 49.2545 57.1817 49.3364 57.1025 49.5C57.0233 49.5818 57.0233 49.5818 56.9441 49.6636H49.2624C48.3121 49.6636 47.5202 50.0727 46.8075 50.7273C46.0947 51.3818 45.778 52.2818 45.778 53.2636C45.778 53.5091 45.7779 53.7545 45.8571 53.9182C45.8571 54 45.9363 54.0818 45.9363 54.1636C45.9363 54.3273 46.0155 54.4909 46.0947 54.5727C46.0947 54.6545 46.1739 54.7364 46.1739 54.8182C46.2531 54.9 46.2531 55.0636 46.3323 55.1455C46.4115 55.2273 46.4115 55.3091 46.4907 55.3909C46.5699 55.4727 46.6491 55.5545 46.7283 55.7182C46.8075 55.8 46.8866 55.8818 46.8866 55.8818C46.9658 55.9636 47.045 56.0455 47.2034 56.1273C47.2826 56.2091 47.3618 56.2091 47.441 56.2909C47.5202 56.3727 47.6786 56.4545 47.7578 56.4545C47.837 56.5364 47.9161 56.5364 47.9953 56.5364C48.0745 56.6182 48.2329 56.6182 48.3121 56.6182C48.3913 56.6182 48.4705 56.7 48.6289 56.7C48.7081 56.7 48.7081 56.7 48.7873 56.7L49.8168 63.2455C50.1335 65.3727 51.8758 66.9273 54.014 66.9273H67.0015C67.0807 66.6818 67.3183 66.6818 67.4767 66.6ZM69.4565 62.7545C69.2981 63.7364 68.7438 64.4727 67.8727 64.8C67.7143 64.8818 67.6351 64.8818 67.4767 64.9636H67.3975C67.2391 64.9636 67.0807 65.0455 66.8432 65.0455H53.8556C52.5885 65.0455 51.4798 64.0636 51.2422 62.7545L50.2919 56.4545H56.8649L56.9441 56.5364L57.0233 56.6182C57.1025 56.7 57.2609 56.8636 57.3401 56.8636C57.4193 56.8636 57.4193 56.9455 57.4984 56.9455C57.5776 57.0273 57.6568 57.0273 57.736 57.1091C57.8152 57.1909 57.8944 57.1909 57.8944 57.1909C57.9736 57.2727 58.0528 57.2727 58.132 57.3545C58.2112 57.3545 58.2112 57.4364 58.2904 57.4364C58.3696 57.4364 58.4488 57.5182 58.5279 57.5182C58.6071 57.5182 58.6863 57.6 58.6863 57.6C58.6863 57.6 58.6863 57.6 58.7655 57.6H58.8447C58.9239 57.6 58.9239 57.6 59.0031 57.6C59.0823 57.6 59.1615 57.6 59.1615 57.6818H59.2407C59.3199 57.6818 59.3199 57.6818 59.3991 57.6818C59.4783 57.6818 59.6366 57.6818 59.7158 57.7636H59.795C59.9534 57.7636 60.1118 57.7636 60.3494 57.7636C60.5078 57.7636 60.6661 57.7636 60.7453 57.7636H60.8245C60.9037 57.7636 60.9037 57.7636 60.9829 57.7636C61.0621 57.7636 61.2205 57.7636 61.2997 57.6818H61.3789C61.4581 57.6818 61.4581 57.6818 61.5373 57.6818C61.5373 57.6818 61.5373 57.6818 61.6165 57.6818C61.6957 57.6818 61.7748 57.6818 61.854 57.6C61.854 57.6 61.9332 57.6 61.9332 57.5182H62.0124C62.0124 57.5182 62.0124 57.5182 62.0916 57.5182C62.1708 57.5182 62.25 57.4364 62.3292 57.4364C62.4084 57.4364 62.4876 57.3545 62.4876 57.3545C62.5668 57.2727 62.646 57.2727 62.7252 57.1909C62.8043 57.1909 62.8043 57.1091 62.8835 57.1091C62.9627 57.1091 62.9627 57.0273 63.0419 57.0273C63.0419 57.0273 63.0419 57.0273 63.1211 57.0273C63.2003 56.9455 63.2795 56.9455 63.2795 56.8636C63.2795 56.8636 63.3587 56.8636 63.3587 56.7818L63.4379 56.7C63.5171 56.6182 63.5963 56.6182 63.5963 56.5364L63.6755 56.4545L63.7547 56.3727H70.3276L69.4565 62.7545ZM72.8618 54.2455C72.545 54.5727 72.0699 54.8182 71.5155 54.8182H71.278H64.8633V54.7364C64.8633 54.7364 64.8633 54.7364 64.8633 54.6545V54.5727C64.8633 54.5727 64.8634 54.4909 64.9425 54.4909C64.9425 54.4091 64.9425 54.4091 65.0217 54.3273C65.1009 54.1636 65.1009 54 65.1009 53.9182C65.1009 53.8364 65.1009 53.8364 65.1009 53.7545C65.1009 53.7545 65.1009 53.7545 65.1009 53.6727C65.1009 53.5909 65.1009 53.4273 65.1801 53.3455C65.1801 53.1818 65.1801 52.9364 65.1801 52.7727C65.1801 52.6091 65.1801 52.4455 65.1801 52.3636C65.1801 52.2818 65.1801 52.2818 65.1801 52.2C65.1801 52.1182 65.1801 52.0364 65.1801 52.0364C65.1801 51.9545 65.1801 51.9545 65.1801 51.8727C65.1801 51.7909 65.1801 51.7909 65.1801 51.7091C65.1801 51.5455 65.1009 51.4636 65.1009 51.3818C65.1009 51.3818 65.1009 51.3818 65.1009 51.3C65.1009 51.2182 65.1009 51.2182 65.1009 51.1364C65.1009 51.1364 65.1009 51.1364 65.1009 51.0545C65.1009 50.9727 65.0217 50.8909 65.0217 50.8909V50.8091H68.3478H71.6739C72.7034 50.8091 73.4953 51.6273 73.4953 52.6909C73.4161 53.4273 73.2578 53.9182 72.8618 54.2455Z' fill='white'/%3E%3Cpath d='M32.157 42.4637V41.8091C32.4738 41.8091 32.7113 41.7273 32.9489 41.6455C33.1865 41.5637 33.4241 41.4 33.5825 41.2364C33.7408 41.0728 33.8992 40.8273 34.0576 40.6637C34.1368 40.4182 34.216 40.1728 34.216 39.8455C34.216 39.4364 34.1368 39.1091 33.8992 38.7819C33.6617 38.5364 33.3449 38.291 32.9489 38.2091L32.0778 37.9637V36.5728C32.2362 36.5728 32.4738 36.6546 32.6321 36.6546C32.7905 36.7364 32.9489 36.8182 33.1073 36.9L33.9784 35.8364C33.7408 35.5909 33.4241 35.5091 33.1073 35.4273C32.7905 35.3455 32.4738 35.2637 32.157 35.2637V34.6091H31.6026V35.2637C31.3651 35.2637 31.1275 35.3455 30.8899 35.4273C30.6523 35.5091 30.4148 35.6728 30.2564 35.8364C30.098 36 29.9396 36.1637 29.7812 36.4091C29.702 36.6546 29.6228 36.9 29.6228 37.1455C29.6228 37.6364 29.702 37.9637 29.9396 38.2091C30.1772 38.4546 30.4939 38.7 30.9691 38.7819L31.6026 38.9455V40.5C31.3651 40.5 31.1275 40.4182 30.8899 40.3364C30.6523 40.2546 30.4939 40.0909 30.3356 39.9273L29.3853 40.991C29.702 41.2364 30.0188 41.4819 30.4148 41.5637C30.8107 41.6455 31.2067 41.7273 31.5235 41.7273V42.3819H32.157V42.4637ZM32.157 39.1909L32.3154 39.2728C32.3946 39.2728 32.4738 39.3546 32.553 39.3546C32.6321 39.3546 32.7113 39.4364 32.7113 39.4364C32.7905 39.5182 32.7905 39.5182 32.8697 39.6C32.8697 39.6819 32.9489 39.7637 32.9489 39.8455C32.9489 39.9273 32.9489 40.0091 32.8697 40.0909C32.7905 40.1728 32.7905 40.2546 32.7113 40.2546C32.6321 40.2546 32.553 40.3364 32.4738 40.4182C32.3946 40.4182 32.3154 40.5 32.2362 40.5V39.1909H32.157ZM31.4443 37.7182C31.3651 37.7182 31.2859 37.6364 31.2067 37.6364C31.1275 37.5546 31.0483 37.5546 31.0483 37.4728C30.9691 37.3909 30.9691 37.3091 30.9691 37.1455C30.9691 36.9819 31.0483 36.8182 31.1275 36.7364C31.2859 36.6546 31.3651 36.5728 31.5235 36.5728V37.8C31.6026 37.8 31.5235 37.7182 31.4443 37.7182Z' fill='white'/%3E%3Cpath d='M59.4785 35.9999H60.112C60.5871 35.9999 60.9039 35.6726 60.9039 35.1817C60.9039 34.6908 60.5871 34.3635 60.112 34.3635H59.4785C59.0033 34.3635 58.6865 34.6908 58.6865 35.1817C58.6865 35.6726 59.0825 35.9999 59.4785 35.9999Z' fill='white'/%3E%3Cpath d='M45.6196 35.9999H56.2314C56.7065 35.9999 57.0233 35.6726 57.0233 35.1817C57.0233 34.6908 56.7065 34.3635 56.2314 34.3635H45.6196C45.1444 34.3635 44.8276 34.6908 44.8276 35.1817C44.8276 35.6726 45.2236 35.9999 45.6196 35.9999Z' fill='white'/%3E%3Cpath d='M57.9736 40.9092C57.9736 40.4183 57.6568 40.0911 57.1817 40.0911H45.6196C45.1444 40.0911 44.8276 40.4183 44.8276 40.9092C44.8276 41.4002 45.1444 41.7274 45.6196 41.7274H57.1817C57.6568 41.7274 57.9736 41.4002 57.9736 40.9092Z' fill='white'/%3E%3Cpath d='M42.6102 53.9182H36.2748C35.7997 53.9182 35.4829 54.2455 35.4829 54.7364C35.4829 55.2273 35.7997 55.5546 36.2748 55.5546H42.6102C43.0854 55.5546 43.4022 55.2273 43.4022 54.7364C43.4022 54.2455 43.0062 53.9182 42.6102 53.9182Z' fill='white'/%3E%3Cpath d='M42.6102 58.991H36.2748C35.7997 58.991 35.4829 59.3182 35.4829 59.8092C35.4829 60.3001 35.7997 60.6273 36.2748 60.6273H42.6102C43.0854 60.6273 43.4022 60.3001 43.4022 59.8092C43.4022 59.3182 43.0062 58.991 42.6102 58.991Z' fill='white'/%3E%3C/svg%3E%0A");
}
.bg-e1 {
    background-image: url('images/bg/bg-e1.svg');
}
.bg-e2 {
    background-image: url('images/bg/bg-e2.svg');
}
.bg-e3 {
    background-image: url('images/bg/bg-e3.svg');
}
.bg-e4 {
    background-image: url('images/bg/bg-e4.svg');
}
@media (min-width: 768px) {
    .bg-c3 {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='99.5' stroke='%23FFB703' stroke-width='1px'/%3E%3C/svg%3E%0A");
    }
    .bg-c2 {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='99.5' stroke='white'/%3E%3C/svg%3E%0A");
    }
    .bg-c5 {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='99.5' stroke='%23FB8501'/%3E%3C/svg%3E%0A");
    }
    .bg-c11 {
        background-image: url('images/tvp/hero-bg-1-dt.svg');
    }
}

/* icon */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    line-height: 1;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-star-filled-orange {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.52447 1.46352C7.67415 1.00287 8.32585 1.00287 8.47553 1.46353L9.68386 5.18237C9.75079 5.38838 9.94277 5.52786 10.1594 5.52786H14.0696C14.554 5.52786 14.7554 6.14767 14.3635 6.43237L11.2001 8.73075C11.0248 8.85807 10.9515 9.08375 11.0184 9.28976L12.2268 13.0086C12.3764 13.4693 11.8492 13.8523 11.4573 13.5676L8.29389 11.2693C8.11865 11.1419 7.88135 11.1419 7.70611 11.2693L4.54267 13.5676C4.15081 13.8523 3.62357 13.4693 3.77325 13.0086L4.98157 9.28976C5.04851 9.08375 4.97518 8.85807 4.79994 8.73075L1.6365 6.43237C1.24464 6.14767 1.44603 5.52786 1.93039 5.52786H5.84062C6.05723 5.52786 6.24921 5.38838 6.31614 5.18237L7.52447 1.46352Z' fill='%23FFA40D'/%3E%3C/svg%3E");
}
.icon-star-filled-grey {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.52447 1.46352C7.67415 1.00287 8.32585 1.00287 8.47553 1.46353L9.68386 5.18237C9.75079 5.38838 9.94277 5.52786 10.1594 5.52786H14.0696C14.554 5.52786 14.7554 6.14767 14.3635 6.43237L11.2001 8.73075C11.0248 8.85807 10.9515 9.08375 11.0184 9.28976L12.2268 13.0086C12.3764 13.4693 11.8492 13.8523 11.4573 13.5676L8.29389 11.2693C8.11865 11.1419 7.88135 11.1419 7.70611 11.2693L4.54267 13.5676C4.15081 13.8523 3.62357 13.4693 3.77325 13.0086L4.98157 9.28976C5.04851 9.08375 4.97518 8.85807 4.79994 8.73075L1.6365 6.43237C1.24464 6.14767 1.44603 5.52786 1.93039 5.52786H5.84062C6.05723 5.52786 6.24921 5.38838 6.31614 5.18237L7.52447 1.46352Z' fill='%23D2D2D2'/%3E%3C/svg%3E%0A");
}

ul.tick {
    padding-left: 0;
    list-style: none;
}
ul.tick li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
}

ul.tick li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    display: inline-block;

    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M0 7.5a7.5 7.5 0 1 1 15 0a7.5 7.5 0 0 1-15 0m7.072 3.21l4.318-5.398l-.78-.624l-3.682 4.601L4.32 7.116l-.64.768z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 95% 95%;
    mask-size: 95% 95%;
}
@media (min-width: 768px) {
    ul.tick li {
        margin-bottom: 20px;
        padding-left: 45px;
    }
    ul.tick li::before {
        width: 30px;
        height: 30px;
    }
}


/*--------------------------------------------------------------
header
--------------------------------------------------------------*/
#page::before {
    content: "";
    display: block;
    height: 60px;
}
#site-header {
    position: fixed;
    z-index: 1020;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.07);
    opacity: 1;
    transform: translateY(0px) !important;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
#site-header.slide-up {
    transform: translateY(-75px) !important;
    opacity: 0 !important;
}

#site-header .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

#site-header .betterpi-logo {
    height: 30px;
}

#site-header .navbar-brand {
    padding: 0;
}

#site-header .navbar {
    padding: 19px 5px;
}
#site-header #navbarNav a {
    font-size: 15px;
    line-height: 21px;
    color: #023047;
    text-align: center;
}
#site-header #navbarNav a:hover {
    color: #FF931C;
}
#site-header .wpml-ls-native {
    color: #FF931C;
}
#site-header .wpml-ls-current-language .wpml-ls-native {
    border-bottom: 1px solid #FF931C;
}

@media (min-width: 768px) {
    #site-header .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (min-width: 992px) {
    #site-header #navbarNav .menu-item {
        min-width: 100px;
        margin-right: 44px;
    }
    #site-header #navbarNav .lang-menu .menu-item {
        min-width: unset;
        margin-right: 25px;
    }
}
@media (min-width: 1200px) {
    #page::before {
        height: 75px;
    }
    #site-header {
        height: 75px;
    }

    #site-header .container {
        max-width: 1680px;
    }

    #site-header .betterpi-logo {
        height: 35px;
    }

    #site-header .navbar-brand {
        margin-right: 70px;
    }

}

/* mobile nav menu */
#site-header .navbar-toggler {
    padding: 10px;
     /* #site-header.sticky-top z-index is 1020 */
    z-index: 1021;
}
#site-header .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17.5' cy='17.5' r='16.5' fill='white' fill-opacity='0.2' stroke='%23FF931C' stroke-width='2'/%3E%3Cpath d='M9.80005 11.2002H25.2' stroke='%23FF931C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.80005 17.5H25.2' stroke='%23FF931C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.80005 23.7998H25.2' stroke='%23FF931C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
#site-header .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17.5' cy='17.5' r='16.5' fill='white' fill-opacity='0.2' stroke='%23FF931C' stroke-width='2'/%3E%3Cpath d='M9.00037 10L26.0004 27' stroke='%23FF931C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.00037 27L26.0004 10' stroke='%23FF931C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

/* tablet sliding menu */
@media (max-width: 991px) {
    html.navbar-open {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    #site-header .navbar {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #site-header #navbarNav {
        position: fixed;
        width: 100vw;
        padding-left: 35vw;
        right: 0;
        top: 0;
        z-index: 1020;
    }
    #site-header #navbarNav ul#menu-header-menu {
        padding-top: 60px;
        background-color: #FFFFFF;
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
        height: 80vh;
        width: 100%;
        padding-left: 12.5%;
    }
    #site-header #navbarNav ul#menu-header-menu-right {
        padding-top: 60px;
        background-color: #FFFFFF;
        -ms-flex-pack: distribute !important;
        justify-content: flex-start !important;
        height: 20vh;
        width: 100%;
        padding-left: 12.5%;
    }
    #site-header #navbarNav ul#menu-header-menu li a {
        font-size: 24px;
        line-height: 35px;
        text-align: left;;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        transition: all .3s;

        background-image: url("data:image/svg+xml,%3Csvg width='57' height='23' viewBox='0 0 57 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 11H55.5' stroke='%23FF931C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M46 1.5L55.5 11L46 21' stroke='%23FF931C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-position: -64px center;
        background-repeat: no-repeat;
        background-size: 54px auto;
    }
    #menu-header-menu-right li {
        margin-right: 20%;
    }
    #site-header #navbarNav ul#menu-header-menu-right li a {
        font-size: 16px;
        text-align: left;;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        transition: all .3s;
    }
    ul#menu-header-menu-right,
    ul#menu-header-menu-right-zh {
        flex-direction: row;
    }
    #site-header #navbarNav ul#menu-header-menu li.active a,
    #site-header #navbarNav ul#menu-header-menu li a:hover,
    #site-header #navbarNav ul#menu-header-menu li a:active {
        padding-left: 64px;
        color: #FF931C;
        font-weight: bold;
        background-position: left center;
    }
}
/* mobile sliding menu */
@media (max-width: 576px) {
    #site-header #navbarNav {
        padding-left: 20vw;
    }
    #site-header #navbarNav ul#menu-header-menu li a {
        font-size: 16px;
    }
}


/*--------------------------------------------------------------
footer
--------------------------------------------------------------*/
.grecaptcha-badge {
    visibility: hidden;
}

.contact-icon {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .05em;
    background-color: #FFFFFF;
    border-radius: 2em;
    padding: 12px 13px 10px 36px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    filter: drop-shadow(0px 6px 20px rgba(0, 0, 0, 0.1));
    transition: all .2s ease-in-out;
    opacity: 0;
}
:lang(zh) .contact-icon {
    padding: 10px 11px 11px 32px;
}
.contact-icon:hover {
    text-decoration: none;
    transform: scale(.9) !important;
}
.contact-icon::before {
    content: '';
    background-image: url('images/booking-icon.png');
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    width: 44px;
    height: 44px;
    left: -16px;
    top: -5px;
}

@media (min-width: 768px) {
    .contact-icon {
        font-size: 21px;
        padding: 14px 14px 15px 49px;
        right: 22px;
        bottom: 22px;
    }
    :lang(zh) .contact-icon {
        padding: 12px 14px 17px 47px;
    }
    .contact-icon::before {
        width: 62px;
        height: 62px;
        left: -20px;
        top: -8px;
    }
}

@media (min-width: 1200px) {
    .contact-icon {
        font-size: 28px;
        padding: 20px 19px 20px 65px;
        right: 43px;
        bottom: 43px;
    }
    :lang(zh) .contact-icon {
        padding: 18px 20px 22px 68px;
    }
    .contact-icon::before {
        width: 85px;
        height: 85px;
        left: -28px;
        top: -10px;
    }
}

/*------------------------------ footer call for action ------------------------------*/
#site-footer .footer-cfa {
    background-image: url('images/bg/footer-cfa.jpg');
    background-size: cover;
    background-position: center center;
    height: 190px;
}
#site-footer .footer-cfa p {
    font-size: 17px;
    line-height: 20px;
    font-weight: bold;
    text-align: center;
    color: #FAFBFB;
}

@media (min-width: 768px) {
    #site-footer .footer-cfa {
        height: 470px;
    }
    #site-footer .footer-cfa p {
        font-size: 36px;
        line-height: 42px;
    }
}

@media (min-width: 1200px) {
    #site-footer .footer-cfa p {
        font-size: 48px;
        line-height: 56px;
    }
}

/*------------------------------ footer container ------------------------------*/
#site-footer .footer-container {
    background-color: #023047;
    color: #FFFFFF;
}

#site-footer hr.footer-divider {
    border: 1px solid #FFFFFF;
    margin-left: 20px;
    margin-right: 20px;
}

/*------------------------------ footer contact ------------------------------*/
#site-footer .footer-contact {
    color: #FFFFFF;
}
#site-footer .footer-contact .container {
    padding: 55px 20px 30px;
}
#site-footer .footer-contact .section-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 28px;
    letter-spacing: .15em;
    text-align: center;
}
#site-footer .footer-contact .section-highlight {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .15em;
    text-align: center;
}

#site-footer .footer-contact .date-selector .last-week,
#site-footer .footer-contact .date-selector .next-week {
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #FFFFFF;
    transition: color .15s ease-in-out;
}
#site-footer .footer-contact .date-selector .last-week:hover,
#site-footer .footer-contact .date-selector .next-week:hover {
    color: #FF931C;
}
#site-footer .footer-contact .date-selector .last-week.disabled,
#site-footer .footer-contact .date-selector .last-week.disabled:hover {
    color: #A8A8A8;
    cursor: default;
}

#site-footer .footer-contact .date-selector .date-wrapper {
    margin: 0;
}
#site-footer .footer-contact .date-selector .date-wrapper > span {
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    letter-spacing: 0.15em;
    line-height: 1.2em;
    padding-top: 7px;
    padding-bottom: 9px;
    width: 44px;
    cursor: pointer;
    display: block;
    transition: all .15s ease-in-out;
}
#site-footer .footer-contact .date-selector input {
    opacity: 0;
    position: absolute;
}
#site-footer .footer-contact .date-selector .date-wrapper input:focus + span {
    box-shadow: 0 0 0 .1rem #FFF;
}
#site-footer .footer-contact .date-selector .date-wrapper:hover > span {
    border-color: #FF931C;
    color: #FF931C;
}
#site-footer .footer-contact .date-selector .date-wrapper.disabled > span,
#site-footer .footer-contact .date-selector .date-wrapper.disabled:hover > span {
    color: #A8A8A8;
    border-color: #A8A8A8;
    cursor: default;
}
#site-footer .footer-contact .date-selector .date-wrapper.active > span {
    color: #FF931C;
    background-color: #FFFFFF;
}
#site-footer .footer-contact .date-selector .date-wrapper .day {
    display: block;
    font-size: 10px;
    font-weight: 300;
}
#site-footer .footer-contact .date-selector .date-wrapper .date {
    display: block;
    font-size: 12px;
}

#site-footer .footer-contact form .wpcf7-form-control-wrap {
    margin-top: 17px;
    display: block;
}
#site-footer .footer-contact form p {
    margin: 0;
    font-size: 24px;
    line-height: 35px;
}

#site-footer .footer-contact form .form-control {
    margin-bottom: 7px;
    background-color: rgba(255, 255, 255, .1);
    border-color: transparent;
    color: #FFFFFF;
    height: 46px;
    font-size: 16px;
    line-height: 1.2em;
    border-radius: 5px;
}
#site-footer .footer-contact form .form-control:focus {
    box-shadow: 0 0 0 2px #FFFFFF;
}
#site-footer .footer-contact form textarea.form-control {
    padding: .7em .7em;
    height: 150px;
}
#site-footer .footer-contact form .form-control.wpcf7-not-valid {
    box-shadow: 0 0 0 2px rgb(255, 147, 28);
}

#site-footer .footer-contact form ::-webkit-input-placeholder {
    color: #A8A8A8;
}
#site-footer .footer-contact form :-moz-placeholder {
    color: #A8A8A8;
}
#site-footer .footer-contact form ::-moz-placeholder {
    color: #A8A8A8;
}
#site-footer .footer-contact form :-ms-input-placeholder {
    color: #A8A8A8;
}
#site-footer .footer-contact form ::placeholder {
    color: #A8A8A8;
}

#site-footer .footer-contact form .form-control.nickname {
    margin-top: 2px;
}

/* time */
#site-footer .footer-contact form .booking-time {
    margin-right: -17px;
}
#site-footer .footer-contact form .booking-time .wpcf7-list-item {
    margin-left: 0;
    margin-bottom: 15px;
    position: relative;
    min-width: 25%;
    padding-right: 15px;
}
#site-footer .footer-contact form .booking-time .wpcf7-list-item label {
    margin: 0;
}

#site-footer .footer-contact form .booking-time .wpcf7-list-item-label:hover {
    color: #FF931C;
}
#site-footer .footer-contact form .booking-time .wpcf7-list-item-label {
    display: inline-block;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1.3em 0;
    width: 70px;
    font-size: 12px;
    line-height: 1;
    border-radius: 5px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#site-footer .footer-contact form .booking-time input {
    opacity: 0;
    position: absolute;
}
#site-footer .footer-contact form .booking-time input.focus + .wpcf7-list-item-label,
#site-footer .footer-contact form .booking-time input:focus + .wpcf7-list-item-label {
    outline: 0;
    box-shadow: 0 0 0 .1rem #FFFFFF;
}
#site-footer .footer-contact form .booking-time :checked + .wpcf7-list-item-label {
    background-color: #FFFFFF;
    color: #FF931C;
}
#site-footer .footer-contact form .booking-time :not(:disabled):not(.disabled) + .wpcf7-list-item-label {
    cursor: pointer;
}

/* submit button */
#site-footer .footer-contact form .btn[type=submit] {
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50rem;
    border-color: #FFFFFF;
    color: #FFFFFF;
    padding: .6em 4.5em;
    font-size: 16px;
    position: relative;
    left: 12.5px;
}
#site-footer .footer-contact form .ajax-loader {
    position: relative;
    width: 25px;
    height: 25px;
    left: 20px;
}
/*------------------------------ footer contact ------------------------------*/
#site-footer .footer-contact-us {
    color: #ffffff;
}
#site-footer .footer-contact-us h3,
#site-footer .footer-contact-us p {
    text-align: left;
    color: #ffffff;
}
@media (min-width: 768px) {
    #site-footer .footer-contact .container {
        padding: 60px 130px 40px;
    }
    #site-footer .footer-contact .section-title {
        font-size: 38px;
        line-height: 45px;
        margin-bottom: 14px;
    }
    #site-footer .footer-contact .section-highlight {
        font-size: 16px;
        line-height: 19px;
        margin-bottom: 65px;
    }

    #site-footer .footer-contact .date-selector {
        position: relative;
    }
    #site-footer .footer-contact .date-selector .last-week,
    #site-footer .footer-contact .date-selector .next-week {
        position: absolute;
        font-size: 40px;
        top: 7px;
    }
    #site-footer .footer-contact .date-selector .last-week {
        left: -70px;
    }
    #site-footer .footer-contact .date-selector .next-week {
        right: -70px;
    }
    #site-footer .footer-contact .date-selector .date-wrapper > span {
        width: 67px;
    }
    #site-footer .footer-contact .date-selector .date-wrapper .day {
        font-size: 12px;
    }
    #site-footer .footer-contact .date-selector .date-wrapper .date {
        font-size: 18px;
    }

    #site-footer .footer-contact form .booking-time {
        margin-right: -4.5%;
    }
    #site-footer .footer-contact form .booking-time .wpcf7-list-item {
        width: 20%;
        padding-right: 0;
        min-width: 20%;
    }
    #site-footer .footer-contact form .booking-time .wpcf7-list-item-label {
        width: 75px;
    }
}

@media (min-width: 992px) {
    #site-footer .footer-contact form .booking-time {
        margin-right: -11%;
    }
}

@media (min-width: 1200px) {
    #site-footer .footer-contact .section-title {
        font-size: 48px;
        margin-bottom: 26px;
    }
    #site-footer .footer-contact .section-highlight {
        font-size: 24px;
        margin-bottom: 63px;
    }

    #site-footer .footer-contact .date-selector {
        margin-bottom: 26px;
    }
    #site-footer .footer-contact .date-selector .last-week,
    #site-footer .footer-contact .date-selector .next-week {
        top: 17px;
    }

    #site-footer .footer-contact .date-selector .date-wrapper > span {
        width: 138px;
    }
    #site-footer .footer-contact .date-selector .date-wrapper .day {
        font-size: 16px;
    }
    #site-footer .footer-contact .date-selector .date-wrapper .date {
        font-size: 36px;
        font-weight: 300;
        line-height: 1.2em;
    }

    #site-footer .footer-contact form {
        margin-top: 66px;
    }

    #site-footer .footer-contact form .booking-time-container {
        -ms-flex: 0 0 42%;
        flex: 0 0 42%;
        max-width: 42%;
    }
    #site-footer .footer-contact form .input-text-container {
        -ms-flex: 0 0 58%;
        flex: 0 0 58%;
        max-width: 58%;
    }

    #site-footer .footer-contact form .wpcf7-form-control-wrap {
        margin-top: 0;
    }
    #site-footer .footer-contact form .form-control {
        margin-bottom: 40px;
    }
    #site-footer .footer-contact form .form-control.wpcf7-not-valid {
        margin-bottom: 7px;
    }
    #site-footer .footer-contact form .wpcf7-not-valid-tip {
        margin-bottom: 21px;
    }
    #site-footer .footer-contact form .booking-time {
        margin-right: 0;
        margin-top: 0;
    }
    #site-footer .footer-contact form .booking-time .wpcf7-list-item {
        width: 50%;
        margin-bottom: 40px;
    }

    #site-footer .footer-contact form .booking-time .wpcf7-list-item-label {
        width: 138px;
        padding: .9em;
        font-size: 16px;
        height: 46px;
    }
    #site-footer .footer-contact form textarea.form-control {
        height: 133px;
    }

    #site-footer .footer-contact form .btn[type=submit] {
        margin-top: 120px;
        padding: 1.1em 6em
    }
    #site-footer .footer-contact form .ajax-loader {
        top: 40px;
    }
}

/*------------------------------ footer content ------------------------------*/
#site-footer .footer-content .container {
    margin-top: 43px;
    margin-bottom: 43px;
    padding-left: 40px;
    padding-right: 40px;
}
#site-footer .footer-content .footer-company,
#site-footer .footer-content .footer-menu,
#site-footer .footer-content .contact {
    min-width: 100%;
}
#site-footer .footer-content .iconify {
    font-size: 20px;
}

#site-footer .footer-content a {
    color: #FFFFFF;
}

/* footer company info */
#site-footer .footer-content .footer-company .company-name {
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
}
#site-footer .footer-content .footer-company .company-highlight {
    font-size: 10px;
    line-height: 20px;
}
#site-footer .footer-content .footer-company .social-media {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 34px;
}
#site-footer .footer-content .footer-company .social-media a {
    margin-right: 13px;
}

/* footer nav */
#site-footer .footer-content .footer-menu ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 27px;
    width: 100%;
}
#site-footer .footer-content .footer-menu ul li {
    min-width: 30%;
    margin-right: 10%;
}
#site-footer .footer-content .footer-menu ul a {
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
}
#site-footer .footer-content .footer-menu.footer-menu-right {
    margin-bottom: 7px;
}

#site-footer .footer-content .contact .contact-title {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
}
#site-footer .footer-content .contact p {
    font-size: 12px;
    text-align: justify;
    display: table;
}
#site-footer .footer-content .contact .iconify {
    margin-right: 8px;
}
#site-footer .footer-content .contact a {
    display: table-cell;
}

#site-footer .copyright {
    padding-bottom: 40px;
}
#site-footer .copyright p {
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}

@media (min-width: 768px) {
    #site-footer .footer-content .container {
        margin-top: 49px;
        margin-bottom: 19px;
        padding-left: 76px;
        padding-right: 76px;
    }

    #site-footer .footer-content .iconify {
        font-size: 25px;
    }

    #site-footer .footer-content .footer-company .company-name {
        font-size: 18px;
        line-height: 21px;
        margin-bottom: 31px;
    }
    #site-footer .footer-content .footer-company .company-highlight {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 24px;
    }
    #site-footer .footer-content .footer-company .social-media {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 49px;
    }

    #site-footer .footer-content .footer-menu ul {
        margin-bottom: 49px;
    }
    #site-footer .footer-content .footer-menu ul li {
        min-width: 20%;
    }
    #site-footer .footer-content .footer-menu ul a {
        font-size: 18px;
        line-height: 21px;
    }
    #site-footer .footer-content .footer-menu.footer-menu-right {
        margin-bottom: inherit;
    }

    #site-footer .footer-content .contact .contact-title {
        font-size: 18px;
        line-height: 21px;
        margin-bottom: 38px;
    }
    #site-footer .footer-content .contact p {
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 16px;
    }
    #site-footer .footer-content .contact .iconify {
        margin-right: 20px;
    }

    #site-footer .copyright {
        padding-bottom: 60px;
    }
    #site-footer .copyright p {
        font-size: 14px;
        line-height: 16px;
        text-align: center;
    }
}

@media (min-width: 1200px) {
    #site-footer .footer-content .container {
        max-width: 1680px;
        margin-top: 100px;
        margin-bottom: 40px;
        padding-left: 76px;
        padding-right: 76px;
    }
    #site-footer .footer-content .footer-company,
    #site-footer .footer-content .footer-menu,
    #site-footer .footer-content .contact {
        min-width: inherit;
        max-width: 25%;
    }

    #site-footer .footer-content .footer-menu ul li {
        min-width: unset;
        margin-right: unset;
        margin-bottom: 40px;
    }

    #site-footer .footer-content .contact .iconify {
        margin-right: 15px;
    }

    #site-footer .copyright {
        padding-bottom: 80px;
    }
}


/*--------------------------------------------------------------
Front Page
--------------------------------------------------------------*/
body.home #page::before {
    background-color: #FF931C;
}
body.home:not(.body-scrolled) #site-header {
    box-shadow: none;
    background-color: transparent;
}

body.home:not(.body-scrolled) #site-header .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17.5' cy='17.5' r='16.5' fill='white' fill-opacity='0.2' stroke='white' stroke-width='2'/%3E%3Cpath d='M9.79999 11.2002H25.2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.79999 17.5H25.2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.79999 23.7998H25.2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

body.home .container .section-title {
    margin-bottom: 26px;
}
body.home .container .section-highlight {
    margin-left: 25px;
    margin-right: 25px;
    text-align: justify;
}

@media (min-width: 768px) {
    body.home .container .section-title {
        margin-bottom: 40px;
    }
    body.home .container .section-highlight {
        max-width: 518px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1200px) {
    body.home .container .section-title {
        margin-bottom: 50px;
    }
    body.home .container .section-highlight {
        max-width: 885px;
        text-align: center;
    }
    body.home:not(.body-scrolled) #site-header .wpml-ls-native {
        color: #ffffff;
    }
    body.home:not(.body-scrolled) #site-header .wpml-ls-current-language .wpml-ls-native {
        border-bottom: 1px solid #FFFFFF;
    }
}

/*------------------------------ intro ------------------------------*/
body.home #intro {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    background-color: #FF931C;
    background-image: url("images/bg/circle-bottom.png");
}

/* intro-overlay */
body.home #intro-overlay {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    background-color: #023047;
    overflow: hidden;
}

body.home #intro-overlay canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
body.home #intro-overlay #ball-path {
    width: 100%;
    height: 100%;
}

/*------------------------------ hero ------------------------------*/

body.home #hero {
    height: 700px;
    overflow-x: clip;
}
body.home #hero .content-wrapper {
    position: relative;
    padding-top: 88px;
    padding-left: 5%;
    padding-right: 10%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

body.home #hero h1 {
    margin-bottom: 26px;
}
body.home #hero .section-highlight {
    font-weight: 300;
    line-height: 25px;
    margin-bottom: 26px;
}
body.home #hero .more-btn {
    margin-top: 12px;
    font-size: 12px;
    min-width: 170px;
}
body.home #hero .more-btn:hover {
    color: #FFFFFF;
}

@media (min-width: 576px) {
    body.home #hero {
        height: 1000px;
    }
    body.home #hero .section-title {
        font-size: 34px;
        line-height: 43px;
    }
    body.home #hero .section-highlight {
        font-size: 18px;
        line-height: 26px;
    }
    body.home #hero .more-btn {
        margin-top: 26px;
        font-size: 14px;
        min-width: 215px;
    }
}

@media (min-width: 768px) {
    body.home #hero {
        height: 1100px;
    }
    body.home #hero .content-wrapper {
        padding-top: 168px;
        padding-left: 10%;
        padding-right: 15%;
    }
}

@media (min-width: 1200px) {
    body.home #hero {
        height: 1300px;
    }
    body.home #hero {
        background-size: contain;
        background-position: left;
    }
    body.home #hero .content-wrapper {
        padding-top: 225px;
    }
    body.home #hero .section-highlight {
        font-size: 20px;
        line-height: 33px;
    }
}
@media (min-width: 1680px) {
    body.home #hero .content-wrapper {
        padding-left: 0;
        margin-left: auto;
        margin-right: auto;
        max-width: 1440px;
    }
}

/* background image */
body.home #hero .content-wrapper h1,
body.home #hero .content-wrapper p,
body.home #hero .content-wrapper a {
    z-index: 10;
    position: relative;
}

body.home #hero .bg-circle {
    position: absolute;
    z-index: 1;
    top: -120px;
    left: -290px;
    width: 200%;
    width: calc(100vw + 270px);
    height: 1550px;
    height: calc(100vw + 270px);
    background-color: #FF931C;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left top;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='500' viewBox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='255.154' cy='248.522' rx='242.845' ry='246.522' fill='white'/%3E%3Cpath d='M493.998 249.663C493.998 385.823 385.266 496.198 251.143 496.198C117.019 496.198 8.28672 385.823 8.28672 249.663C8.28672 113.503 117.019 3.12754 251.143 3.12754C385.266 3.12754 493.998 113.503 493.998 249.663Z' stroke='%23FF7B1C' stroke-width='0.3'/%3E%3Cpath d='M488.862 250.315C488.862 386.474 380.129 496.85 246.006 496.85C111.882 496.85 3.15 386.474 3.15 250.315C3.15 114.155 111.882 3.77915 246.006 3.77915C380.129 3.77915 488.862 114.155 488.862 250.315Z' stroke='%23FFB703' stroke-width='0.3'/%3E%3C/svg%3E%0A");
}

body.home #hero .bg-mobile-container {
    position: absolute;
    z-index: 2;
    top: 42%;
    right: -20px;
    width: 109vw;
    height: 96vw;
}
body.home #hero .bg-mobile-1,
body.home #hero .bg-mobile-2 {
    display: block;
    width: 72vw;
    height: 72vw;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    max-width: 700px;
    max-height: 700px;
}
body.home #hero .bg-mobile-1 {
    z-index: 3;
    bottom: 0;
    left: 0;
    background-image: url('images/bg/top-mobile-1.png');
}
body.home #hero .bg-mobile-2 {
    z-index: 2;
    top: 0;
    right: 0;
    background-image: url('images/bg/top-mobile-2.png');
}

@media (min-width: 576px) {
    body.home #hero .content-wrapper .bg-circle {
        top: -125px;
        left: -390px;
    }
    body.home #hero .bg-mobile-container {
        top: 32%;
    }
}

@media (min-width: 768px) {
    body.home #hero .content-wrapper .bg-circle {
        top: -160px;
        left: -350px;
    }
    body.home #hero .bg-mobile-container {
        right: -1%;
        width: 90vw;
        height: 75vw;
        max-width: 980px;
        max-height: 800px;
    }
    body.home #hero .bg-mobile-1,
    body.home #hero .bg-mobile-2 {
        width: 60vw;
        height: 60vw;
    }
}

@media (min-width: 1200px) {
    body.home #hero .content-wrapper .bg-circle {
        width: calc(100vw + 440px);
        top: -475px;
        left: -440px;
        height: 1550px;
        background-size: auto 100%;
    }
    body.home #hero .bg-mobile-container {
        top: 295px;
        right: unset;
        left: 20%;
        max-width: 1000px;
        max-height: 900px;
    }
}

@media (min-width: 1680px) {
    body.home #hero .bg-mobile-container {
        position: static;
        width: unset;
        height: unset;
    }
    body.home #hero .bg-mobile-1,
    body.home #hero .bg-mobile-2 {
        width: 650px;
        height: 650px;
        position: absolute;
    }
    body.home #hero .bg-mobile-1 {
        top: 181px;
        left: 700px;
    }
    body.home #hero .bg-mobile-2 {
        top: 365px;
        left: 980px;
    }
}

/* decoration bg */
body.home #hero .bg-lt-1 {
    display: none;
}
body.home #hero .bg-rt-1 {
    width: 163px;
    right: -84px;
    top: -140px;
}
body.home #hero .bg-rt-2 {
    width: 163px;
    right: -79px;
    top: -142px;
}
body.home #hero .bg-rt-3 {
    width: 20px;
    right: 64px;
    top: -32px;
}

body.home #hero .bg-mt-1 {
    width: 9px;
    left: 221px;
    top: 65px;
}
body.home #hero .bg-mt-2 {
    width: 25px;
    left: 280px;
    top: 160px;
}
body.home #hero .bg-mb-1 {
    width: 20px;
    left: 160px;
    top: 390px;
}
body.home #hero .bg-lb-1 {
    width: 25px;
    left: -15px;
    top: 440px;
}
/*
body.home #hero .bg-lb-2 {
    width: 10px;
    left: 30px;
    top: 90%;
    opacity: .5;
} */
body.home #hero .bg-rb-1 {
    width: 28px;
    right: 43px;
    top: 100%;
    border: 1px solid #FFB703;
    border-radius: 50%;
}
@media (min-width: 768px) {
    body.home #hero .bg-lt-1 {
        width: 38px;
        display: block;
        left: -10px;
        top: 276px;
    }
    body.home #hero .bg-rt-1 {
        width: 163px;
        right: -54px;
        top: -107px;
    }
    body.home #hero .bg-rt-2 {
        width: 163px;
        right: -49px;
        top: -109px;
    }
    body.home #hero .bg-rt-3 {
        width: 20px;
        right: 94px;
        top: 1px;
    }
    body.home #hero .bg-mt-1 {
        width: 15px;
        left: 516px;
        top: 144px;
    }
    body.home #hero .bg-mt-2 {
        width: 41px;
        left: 605px;
        top: 248px;
    }
    body.home #hero .bg-mb-1 {
        width: 35px;
        left: 400px;
        top: 620px;
    }
    body.home #hero .bg-lb-1 {
        width: 40px;
        left: 100px;
        top: 730px;
    }
    body.home #hero .bg-lb-2 {
        width: 19px;
        left: 30px;
        top: 90%;
        opacity: .5;
    }
    body.home #hero .bg-rb-1 {
        /* width: 17px;
        right: 60%;
        top: 90%; */
        display: none;
    }
}
@media (min-width: 1200px) {
    body.home #hero .bg-lt-1 {
        width: 43px;
        left: 18px;
        top: 160px;
    }
    body.home #hero .bg-rt-1 {
        width: 250px;
        right: -110px;
        top: -140px;
    }
    body.home #hero .bg-rt-2 {
        width: 250px;
        right: -100px;
        top: -150px;
    }
    body.home #hero .bg-rt-3 {
        width: 33px;
        right: 110px;
        top: 30px;
    }
    body.home #hero .bg-mt-1 {
        width: 23px;
        left: 795px;
        top: -35px;
    }
    body.home #hero .bg-mt-2 {
        width: 61px;
        left: 931px;
        top: 118px;
    }
    body.home #hero .bg-mb-1 {
        width: 50px;
        left: 625px;
        top: 672px;
    }
    body.home #hero .bg-lb-1 {
        width: 60px;
        left: 189px;
        top: 825px;
    }
    body.home #hero .bg-lb-2 {
        width: 42px;
        left: -95px;
        top: 90%;
    }
    body.home #hero .bg-rb-1 {
        display: unset;
        width: 17px;
        right: 60%;
        top: 90%;
    }
    body.home #hero .bg-rb-2 {
        width: 29px;
        right: 49px;
        top: 55%;
    }
}
@media (min-width: 1680px) {
    body.home #hero .bg-rt-1 {
        width: 532px;
        right: -363px;
        top: -308px;
    }
    body.home #hero .bg-rt-2 {
        width: 532px;
        right: -349px;
        top: -313px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='99.5' stroke='white'/%3E%3C/svg%3E%0A");
    }
    body.home #hero .bg-rt-3 {
        width: 63px;
        right: 120px;
        top: 45px;
    }
    body.home #hero .bg-lt-2 {
        width: 14px;
        left: -100px;
        top: 350px;
    }
    body.home #hero .bg-lb-3 {
        width: 20px;
        left: 554px;
        top: 947px;
    }
    body.home #hero .bg-rb-2 {
        width: 29px;
        right: -15%;
        top: 55%;
    }
}

/*------------------------------ about ------------------------------*/
body.home #about {
    color: #FFFFFF;
    background-image: url('images/bg/middle-phone.svg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 80%;
    position: relative;
    margin-top: 15vh;
}
body.home #about .container {
    padding-bottom: 350px;
    padding-top: 15vh;
    min-height: 900px;
    text-align: center;
}

body.home #about .pi-container {
    margin-bottom: 80px;
}
body.home #about .pi-container h2.section-title {
    margin-bottom: 10px;
}
body.home #about .pi-container h3.section-title {
    font-size: 18px;
}

body.home #about .video-container {
    position: relative;
    max-width: 450px;
    width: 100%;
    margin-bottom: 15vh;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}
body.home #about .video-container::before {
    content: "";
    padding-top: 100%;
    display: table;
}
body.home #about .video-container .betterpi-anim {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
body.home #about .about-us-container {
    margin-bottom: 10vh;
}

@media (max-width: 359px) {
    body.home #about .pi-container h3.section-title {
        min-height: 46px;
    }
}
@media (min-width: 576px) {
    body.home #about {
        background-size: 500px;
    }
}
@media (min-width: 768px) {
    body.home #about .betterpi-anim {
        margin-bottom: 350px;
    }
    body.home #about .pi-container h3.section-title {
        font-size: 24px;
    }
}
@media (min-width: 1200px) {
    body.home #about .pi-container h3.section-title {
        font-size: 28px;
    }
    body.home #about p.section-highlight {
        max-width: 770px;
    }
}

/* decoration bg */
/* #about .bg-c3 {
    border: 1px solid #FFB703;
    border-radius: 50%;
}
#about .bg-c5 {
    border: 1px solid #FB8501;
    border-radius: 50%;
} */
#about .bg-c1 {
    border: 1px solid #FFFFFF;
    border-radius: 50%;
}
body.home #about .bg-lc-1 {
    width: 140px;
    left: 20px;
    top: 45%;
}
body.home #about .bg-lc-2 {
    width: 8px;
    left: 16px;
    top: 54%;
    opacity: 0.1;
}
body.home #about .bg-lc-3 {
    width: 18px;
    left: 32px;
    bottom: 372px;
}
body.home #about .bg-lc-4 {
    width: 31px;
    left: 10px;
    bottom: 137px;
}
body.home #about .bg-rc-1 {
    width: 104px;
    right: -40px;
    top: 50%;
}
body.home #about .bg-rc-2 {
    width: 37px;
    right: -19px;
    bottom: 331px;
    opacity: 0.1;
}
body.home #about .bg-rc-3 {
    width: 5px;
    right: 67px;
    bottom: 247px;
    border: 1px solid #FFB703;
    border-radius: 50%;
}
@media (min-width: 768px) {
    body.home #about .bg-lc-1 {
        width: 206px;
        left: 55px;
        top: 800px;
    }
    body.home #about .bg-lc-2 {
        width: 10px;
        left: 49px;
        top: 1006px;
        opacity: 0.1;
    }
    body.home #about .bg-lc-3 {
        width: 26px;
        left: 71px;
        bottom: 562px;
    }
    body.home #about .bg-lc-4 {
        width: 46px;
        left: 39px;
        bottom: 167px;
    }
    body.home #about .bg-rc-4 {
        width: 53px;
        right: 184px;
        top: 795px;
        border: 1px solid #FFB703;
        border-radius: 50%;
    }
    body.home #about .bg-rc-1 {
        width: 185px;
        right: -92.5px;
        top: 900px;
    }
    body.home #about .bg-rc-5 {
        width: 23px;
        right: 64px;
        bottom: 551px;
    }
    body.home #about .bg-rc-2 {
        width: 65px;
        right: -32.5px;
        bottom: 362px;
    }
    body.home #about .bg-rc-3 {
        width: 9px;
        right: 106px;
        bottom: 204px;
    }
}
@media (min-width: 1680px) {
    body.home #about .bg-lc-1 {
        width: 394px;
        left: 47px;
        top: 0px;
    }
    body.home #about .bg-lc-2 {
        width: 23px;
        left: 36px;
        top: 349px;
    }
    body.home #about .bg-lc-3 {
        width: 286px;
        left: 37px;
        bottom: 903px;
    }
    body.home #about .bg-lc-5 {
        width: 33px;
        left: 466px;
        bottom: 354px;
    }
    body.home #about .bg-lc-4 {
        width: 55px;
        left: 530px;
        bottom: 167px;
    }
    body.home #about .bg-rc-1 {
        width: 394px;
        right: -150px;
        top: 118px;
    }
    body.home #about .bg-rc-2 {
        width: 139px;
        right: -69.5px;
        top: 582px;
        bottom: unset;
    }
    body.home #about .bg-rc-3 {
        width: 19px;
        right: 244px;
        bottom: 883px;
    }
    body.home #about .bg-rc-4 {
        display: none;
    }
    body.home #about .bg-rc-5 {
        width: 235px;
        right: -100px;
        bottom: 429px;
    }
    body.home #about .bg-rc-6 {
        width: 23px;
        right: 610.5px;
        top: 656px;
    }
}
/*------------------------------ wedo ------------------------------*/
body.home #wedo {
    margin-top: 68px;
    position: relative;
}
body.home #wedo .container {
    height: 100%;
}
body.home #wedo .section-highlight {
    margin-bottom: 45px;
}

/* item box */
body.home #wedo .section-content {
    margin-top: 0;
    margin-bottom: 80px;
}
body.home #wedo .item-box-container div.col {
    margin-bottom: 25px;
}

body.home #wedo .item-box {
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    text-align: center;
    height: 100%;
    min-height: 240px;
    margin-left: auto;
    margin-right: auto;
    max-width: 220px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

/* item-box title and content */
body.home #wedo .item-box .item-title,
body.home #wedo .item-box .item-content {
    width: 100%;
    height: 100%;
    background-position: center 30px;
    background-size: 95px;
    background-repeat: no-repeat;
}
body.home #wedo .item-box .item-title {
    padding-top: 170px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 19px;
}
body.home #wedo .item-box .item-content {
    padding-top: 140px;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 19px;
}
body.home #wedo .item-box .item-content {
    visibility: hidden;
}
body.home #wedo .item-box:hover .item-title,
body.home #wedo .item-box:active .item-title {
    visibility: hidden;
}
body.home #wedo .item-box:hover .item-content,
body.home #wedo .item-box:active .item-content {
    visibility: visible;
}
@media (min-width: 768px) {
    body.home #wedo .section-content {
        min-height: 750px;
        margin-bottom: 150px;
    }
    body.home #wedo .item-box .item-title,
    body.home #wedo .item-box .item-content {
        padding-top: 170px;
    }
    body.home #wedo .item-box .item-content {
        padding-bottom: 20px;
    }
}
@media (min-width: 1200px) {
    body.home #wedo {
        margin-top: 150px;
    }
}

/* commerce */
body.home #wedo .commerce {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="1" y="1" height="100%25" width="100%25" style="width:calc(100%25 - 2px);height:calc(100%25 - 2px)" rx="30" ry="30" fill="transparent" stroke="url(%23paint0_linear)" stroke-width="2"/%3E%3Cdefs%3E%3ClinearGradient id="paint0_linear" x1="80" y1="0" x2="80" y2="190" gradientUnits="userSpaceOnUse"%3E%3Cstop stop-color="%23FF931C"/%3E%3Cstop offset="1" stop-color="%23FFB703"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}
body.home #wedo .commerce:hover,
body.home #wedo .commerce:active {
    background-image: linear-gradient(180deg, #FF931C 0%, #FFB703 100%);
}
body.home #wedo .commerce .item-title {
    background-image: url('images/do-1-orange.svg');
}
body.home #wedo .commerce .item-content {
    background-image: url('images/do-1-white.svg');
}

/* mobile-app */
body.home #wedo .mobile-app {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="1" y="1" height="99%25" width="99%25" style="width:calc(100%25 - 2px);height:calc(100%25 - 2px)" rx="30" ry="30" fill="transparent" stroke="url(%23paint0_linear)" stroke-width="2"/%3E%3Cdefs%3E%3ClinearGradient id="paint0_linear" x1="80" y1="0" x2="80" y2="190" gradientUnits="userSpaceOnUse"%3E%3Cstop stop-color="%23329BFB"/%3E%3Cstop offset="1" stop-color="%2332D7FB"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}
body.home #wedo .mobile-app:hover,
body.home #wedo .mobile-app:active {
    background: linear-gradient(180deg, #329BFB 0%, #32B4FB 100%);
}
body.home #wedo .mobile-app .item-title {
    background-image: url('images/do-2-blue.svg');
}
body.home #wedo .mobile-app .item-content {
    background-image: url('images/do-2-white.svg');
}

/* web-design */
body.home #wedo .web-design {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="1" y="1" height="99%25" width="99%25" style="width:calc(100%25 - 2px);height:calc(100%25 - 2px)" rx="30" ry="30" fill="transparent" stroke="url(%23paint0_linear)" stroke-width="2"/%3E%3Cdefs%3E%3ClinearGradient id="paint0_linear" x1="80" y1="0" x2="80" y2="190" gradientUnits="userSpaceOnUse"%3E%3Cstop stop-color="%2350E2E1"/%3E%3Cstop offset="1" stop-color="%235BF5AB"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}
body.home #wedo .web-design:hover,
body.home #wedo .web-design:active {
    background-image: linear-gradient(180deg, #50E2E1 0%, #5BF5AB 100%);
}
body.home #wedo .web-design .item-title {
    background-image: url('images/do-3-green.svg');
}
body.home #wedo .web-design .item-content {
    background-image: url('images/do-3-white.svg');
}

/* digital */
body.home #wedo .digital {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="1" y="1" height="99%25" width="99%25" style="width:calc(100%25 - 2px);height:calc(100%25 - 2px)" rx="30" ry="30" fill="transparent" stroke="url(%23paint0_linear)" stroke-width="2"/%3E%3Cdefs%3E%3ClinearGradient id="paint0_linear" x1="80" y1="0" x2="80" y2="190" gradientUnits="userSpaceOnUse"%3E%3Cstop stop-color="%237019B4"/%3E%3Cstop offset="1" stop-color="%23FF60F9"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
}
body.home #wedo .digital:hover,
body.home #wedo .digital:active {
    background: linear-gradient(180deg, #7019B4 0%, #FF60F9 100%);
}
body.home #wedo .digital .item-title {
    background-image: url('images/do-4-purple.svg');
}
body.home #wedo .digital .item-content {
    background-image: url('images/do-4-white.svg');
}

/* decoration bg */
body.home #wedo .bg-rt-1 {
    width: 50px;
    right: 32px;
    top: -65px;
}
body.home #wedo .bg-rt-2 {
    width: 60px;
    right: -30px;
    top: 116px;
}
body.home #wedo .bg-rm-1 {
    width: 10px;
    right: 90px;
    top: 200px;
    z-index: -1;
    border: 1px solid #FFB703;
    border-radius: 50%;
}
body.home #wedo .bg-lm-1 {
    width: 10px;
    left: 39px;
    top: 425px;
    z-index: -1;
    border: 1px solid #FFB703;
    border-radius: 50%;
}
body.home #wedo .bg-mm-1 {
    width: 6px;
    left: 50%;
    top: 546px;
    z-index: -1;
    border: 1px solid #FFB703;
    border-radius: 50%;
}
body.home #wedo .bg-lb-1 {
    width: 51px;
    left: 10px;
    bottom: 0px;
    z-index: -1;
}
@media (min-width: 576px) {
    body.home #wedo .bg-lm-1 {
        width: 15px;
        left: 20px;
        top: 330px;
    }
    body.home #wedo .bg-mm-1 {
        width: 10px;
        left: 48%;
        top: 500px;
    }
    body.home #wedo .bg-rm-1 {
        width: 13px;
        right: 95px;
        top: 175px;
    }
}
@media (min-width: 768px) {
    body.home #wedo .bg-rt-1 {
        width: 75px;
        right: 40px;
        top: -80px;
    }
    body.home #wedo .bg-rt-2 {
        width: 90px;
        right: -45px;
        top: 100px;
    }
    body.home #wedo .bg-lm-1 {
        width: 19px;
        left: 39px;
        top: 500px;
    }
    body.home #wedo .bg-mm-1 {
        width: 12px;
        left: 45%;
        top: 700px;
    }
    body.home #wedo .bg-rm-1 {
        width: 15px;
        right: 15%;
        top: 350px;
    }
    body.home #wedo .bg-lb-1 {
        width: 99px;
    }
}
@media (min-width: 1200px) {
    body.home #wedo .bg-lm-1 {
        width: 43px;
        left: 69px;
        top: -86px;
    }
    body.home #wedo .bg-mm-1 {
        width: 26px;
        left: 38%;
        top: 300px;
    }
    body.home #wedo .bg-rm-1 {
        width: 26px;
        right: 10%;
        top: 515px;
    }
    body.home #wedo .bg-rt-1 {
        width: 136px;
        right: 55px;
        top: -175px;
    }
    body.home #wedo .bg-rt-2 {
        width: 164px;
        right: -82px;
        top: 296px;
    }
    body.home #wedo .bg-lb-1 {
        width: 226px;
        left: -113px;
        bottom: -113px;
    }
}
@media (min-width: 1680px) {

}

/*------------------------------ service ------------------------------*/
body.home #service {
    margin-bottom: 80px;
    min-height: 100vh
}
body.home #service .container {
    height: 100%;
}
body.home #service .section-highlight {
    margin-bottom: 45px;
}
@media (min-width: 768px) {
    body.home #service {
        margin-bottom: 380px;
    }
    body.home #service .section-highlight {
        margin-bottom: 150px;
    }
}

/* item circle box */
body.home #service .item-circle-container {
    margin-left: 0;
    margin-right: 0;
    z-index: 1;
}

/* salon */
body.home .item-circle .item-icon.salon {
    background-image: url('images/service-1-c.svg');
}
body.home .item-circle:hover .item-icon.salon,
body.home .item-circle:active .item-icon.salon {
    background-image: url('images/service-1-w.svg'), linear-gradient(245.01deg, #FF931C 9.75%, #FB8501 103.2%);
}

/* member */
body.home .item-circle .item-icon.member {
    background-image: url('images/service-2-c.svg');
}
body.home .item-circle:hover .item-icon.member,
body.home .item-circle:active .item-icon.member {
    background-image: url('images/service-2-w.svg'), linear-gradient(245.01deg, #FF931C 9.75%, #FB8501 103.2%);
}

/* online-shop */
body.home .item-circle .item-icon.online-shop {
    background-image: url('images/service-3-c.svg');
}
body.home .item-circle:hover .item-icon.online-shop,
body.home .item-circle:active .item-icon.online-shop {
    background-image: url('images/service-3-w.svg'), linear-gradient(245.01deg, #FF931C 9.75%, #FB8501 103.2%);
}

/* booking */
body.home .item-circle .item-icon.booking {
    background-image: url('images/service-4-c.svg');
}
body.home .item-circle:hover .item-icon.booking,
body.home .item-circle:active .item-icon.booking {
    background-image: url('images/service-4-w.svg'), linear-gradient(245.01deg, #FF931C 9.75%, #FB8501 103.2%);
}

/* accounting */
body.home .item-circle .item-icon.accounting {
    background-image: url('images/service-5-c.svg');
}
body.home .item-circle:hover .item-icon.accounting,
body.home .item-circle:active .item-icon.accounting {
    background-image: url('images/service-5-w.svg'), linear-gradient(245.01deg, #FF931C 9.75%, #FB8501 103.2%);
}

/* erp */
body.home .item-circle .item-icon.erp {
    background-image: url('images/service-6-c.svg');
}
body.home .item-circle:hover .item-icon.erp,
body.home .item-circle:active .item-icon.erp {
    background-image: url('images/service-6-w.svg'), linear-gradient(245.01deg, #FF931C 9.75%, #FB8501 103.2%);
}

/* bg decoration */
@media (min-width: 1200px) {
    body.home #service .bg-rt-1 {
        width: 81px;
        right: -304px;
        bottom: -123px;
    }
}

/*------------------------------ tailor ------------------------------*/
body.home #tailor {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='291' height='96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='146' cy='48' rx='146' ry='48' fill='%23FF931C'/%3E%3C/svg%3E%0A");
    color: #FFFFFF;
    text-align: center;
}

body.home #tailor .container {
    padding-top: 0;
    padding-bottom: 110px;
    position: relative;
}
body.home #tailor .planet-container {
    position: relative;
    width: 350px;
    height: 360px;
    margin-bottom: 90px;
    margin-left: auto;
    margin-right: auto;
    /* background-size: 185px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-image: url('images/bg/planet-logo.png'); */
}
body.home #tailor .planet-container .galaxy {
    width: 185px;
    height: auto;
}
body.home #tailor .planet-container .item-circle-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
body.home #tailor .planet-container .item-circle a {
    display: block;
}
body.home #tailor .planet-container .item-icon {
    position: absolute;
    width: 45px;
    box-shadow: none;
}
body.home #tailor .planet-container .item-icon.salon {
    left: 0;
    top: 256px;
}
body.home #tailor .planet-container .item-icon.member {
    left: 102px;
    top: 104px;
}
body.home #tailor .planet-container .item-icon.online-shop {
    right: 22px;
    top: 165px;
}
body.home #tailor .planet-container .item-icon.booking {
    left: 22px;
    top: 165px;
}
body.home #tailor .planet-container .item-icon.accounting {
    right: 102px;
    top: 104px;
}
body.home #tailor .planet-container .item-icon.erp {
    right: 0;
    top: 256px;
}

body.home #tailor .section-title {
    margin-bottom: 25px;
}
body.home #tailor .section-highlight {
    margin-bottom: 70px;
}
body.home #tailor .more-btn {
    color: #FF931C;
    background-color: #FFFFFF;
    background-image: url('images/idea.svg');
    background-repeat: no-repeat;
    background-size: 1.8em;
    background-position: 2.5em .6em;
    padding: .8em 3em .8em 5em;
}
/* bg decoration */
#tailor .c-1 {
    opacity: 0.1;
}
#tailor .c-2 {
    opacity: 0.2;
}
body.home #tailor .bg-rt-1 {
    width: 96px;
    right: -33px;
    top: -63px;
}
body.home #tailor .bg-rt-2 {
    width: 33px;
    right: -10px;
    top: 54px;
}
body.home #tailor .bg-lt-1 {
    width: 154px;
    left: -77px;
    top: -77px;
}
body.home #tailor .bg-lt-2 {
    width: 49px;
    left: 15px;
    top: 51px;
}
body.home #tailor .bg-lt-3 {
    width: 11px;
    left: 52px;
    top: 86px;
}
body.home #tailor .bg-lm-1 {
    width: 88px;
    left: -44px;
    top: 359px;
}
body.home #tailor .bg-lm-2 {
    width: 31px;
    left: 0px;
    top: 463px;
}

@media (min-width: 768px) {
    body.home #tailor .container {
        padding-top: 60px;
        padding-bottom: 170px;
    }
    body.home #tailor .planet-container {
        height: 550px;
        margin-bottom: 20px;
    }
    body.home #tailor .planet-container .galaxy {
        width: 350px;
    }
    body.home #tailor .section-title {
        margin-bottom: 40px;
    }
    body.home #tailor .section-highlight {
        margin-bottom: 80px;
        text-align: center;
    }
    body.home #tailor .bg-rt-1 {
        width: 192px;
        right: -55px;
        top: -106px;
    }
    body.home #tailor .bg-rt-2 {
        width: 68px;
        right: -50px;
        top: 120px;
    }
    body.home #tailor .bg-lt-1 {
        width: 306px;
        left: -189px;
        top: -179px;
    }
    body.home #tailor .bg-lt-2 {
        width: 97px;
        left: 20px;
        top: 76px;
    }
    body.home #tailor .bg-lt-3 {
        width: 22px;
        left: 95px;
        top: 146px;
    }
    body.home #tailor .bg-lm-1 {
        width: 196px;
        left: -98px;
        top: 447px;
    }
    body.home #tailor .bg-lm-2 {
        width: 69px;
        left: -30px;
        top: 678px;
    }
    body.home #tailor .bg-lb-1 {
        width: 10px;
        left: 0px;
        top: 882px;
    }
    body.home #tailor .bg-lb-2 {
        width: 125px;
        left: 5px;
        bottom: 13px;
    }
    body.home #tailor .bg-lb-3 {
        width: 34px;
        left: 242px;
        bottom: 104px;
        border: 1px solid #FFB703;
        border-radius: 50%;
    }
}
@media (min-width: 992px) {
    body.home #tailor .container {
        padding-top: 280px;
        padding-bottom: 240px;
    }
    body.home #tailor .section-title {
        margin-bottom: 36px;
    }
    body.home #tailor .section-highlight {
        margin-bottom: 94px;
    }
}
@media (min-width: 1200px) {
    body.home #tailor .bg-lb-1 {
        width: 16px;
        left: -170px;
        top: 1074px;
    }
    body.home #tailor .bg-lb-2 {
        width: 194px;
        left: -97px;
        bottom: -45px;
    }
    body.home #tailor .bg-lb-3 {
        width: 53px;
        left: 300px;
        bottom: 95px;
    }
}
@media (min-width: 1680px) {
    body.home #tailor .bg-rt-1 {
        width: 394px;
        right: -400px;
    }
    body.home #tailor .bg-rt-2 {
        width: 129px;
        right: -334px;
        top: 364px;
    }
    body.home #tailor .bg-lt-1 {
        width: 409px;
        left: -250px;
        top: -107px;
    }
    body.home #tailor .bg-lt-2 {
        width: 130px;
        left: 1px;
        top: 234px;
    }
    body.home #tailor .bg-lt-3 {
        width: 30px;
        left: 101px;
        top: 327px;
    }
    body.home #tailor .bg-lm-1 {
        width: 196px;
        left: -319px;
        top: 500px;
    }
    body.home #tailor .bg-lm-2 {
        width: 69px;
        left: -235px;
        top: 731px;
    }
}

/*------------------------------ project ------------------------------*/
body.home #project {
    margin-top: 90px;
    min-height: 100vh;
}
body.home #project .container {
    height: 100%;
    margin-bottom: 100px;
}
body.home #project .section-highlight {
    margin-bottom: 30px;
}

/* dual wrapper */
.dual-wrapper {
    position: relative;
    margin-bottom: 20px;
}
.dual-wrapper .col {
    margin-bottom: 50px;
}

.dual-wrapper .dual-image {
    width: 100%;
}
.dual-wrapper .dual-image img {
    width: 800px;
    max-width: 100%;
    max-height: 800px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.dual-wrapper .dual-content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
}

@media (min-width: 768px) {
    .dual-wrapper {
        margin-bottom: 130px;
    }
    .dual-wrapper .col {
        margin-bottom: 50px;
    }
    .dual-wrapper .dual-content {
        max-width: 520px;
    }
}

@media (min-width: 992px) {
    body.home #project {
        margin-top: 247px;
    }

    .dual-wrapper {
        margin-bottom: 16px;
    }
    .dual-wrapper .col {
        margin-bottom: 0;
    }
}

/* project dual wrapper */
.project-container .dual-wrapper .dual-content .project-title {
    margin-bottom: 5px;
}
.project-container .dual-wrapper .dual-content .project-subtitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 30px;
}
.project-container .dual-wrapper .dual-content .project-desc {
    margin-bottom: 30px;
}
.project-container .dual-wrapper .dual-content .project-tag {
    margin-bottom: 30px;
}
.project-container .dual-wrapper .dual-content .more-btn {
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .project-container .dual-wrapper .dual-content .project-title {
        margin-bottom: 15px;
    }
    .project-container .dual-wrapper .dual-content .project-subtitle {
        font-size: 25px;
        margin-bottom: 25px;
    }
    .project-container .dual-wrapper .dual-content .more-btn {
        font-size: 16px;
        line-height: 19px;
    }
}

@media (min-width: 992px) {
    .project-container .dual-wrapper .dual-content .project-subtitle {
        margin-bottom: 35px;
    }
}

@media (min-width: 1200px) {
    .project-container {
        max-width: 1680px;
    }
}

.project-container .rental-app .project-subtitle {
    color: #BF978B;
}
.project-container .rental-app .more-btn {
    background-color: #BF978B;
}

.project-container .massage-booking-app .project-subtitle {
    color: #AE9ABB;
}
.project-container .massage-booking-app .more-btn {
    background-color: #AE9ABB;
}

.project-container .freezee-mall .project-subtitle {
    color: #68A4FF;
}
.project-container .freezee-mall .more-btn {
    background-color: #68A4FF;
}

.project-container .ride-booking-app .project-subtitle {
    color: #FFDD00;
}
.project-container .ride-booking-app .more-btn {
    background-color: #FFDD00;
}

.project-container .clinic-booking-app .project-subtitle {
    color: #4DCCA1;
}
.project-container .clinic-booking-app .more-btn {
    background-color: #4DCCA1;
}

.project-container .luxury-e-commerce .project-subtitle {
    color: #C58677;
}
.project-container .luxury-e-commerce .more-btn {
    background-color: #C58677;
}

.project-container .beauty-booking-app .project-subtitle {
    color: #FCCAB1;
}
.project-container .beauty-booking-app .more-btn {
    background-color: #FCCAB1;
    
}
.project-container .corphub .project-subtitle {
    color: #B59C57;
}
.project-container .corphub .more-btn {
    background-color: #B59C57;
}

.project-container .maid-sis .project-subtitle {
    color: #FF805B;
}
.project-container .maid-sis .more-btn {
    background-color: #FF805B;
}

.project-container .dr-queue .project-subtitle {
    color: #05A5B5;
}
.project-container .dr-queue .more-btn {
    background-color: #05A5B5;
}

.project-container .ec-wash .project-subtitle {
    color: #5CAEE5;
}
.project-container .ec-wash .more-btn {
    background-color: #5CAEE5;
}

.project-container .all-masters-world .project-subtitle {
    color: #CB9F68;
}
.project-container .all-masters-world .more-btn {
    background-color: #CB9F68;
}

.project-container .enterprise-consultant-erp .project-subtitle {
    color: #9EDDEF;
}
.project-container .enterprise-consultant-erp .more-btn {
    background-color: #9EDDEF;
}

.project-container .pet-immigration-erp .project-subtitle {
    color: #F9CC78;
}
.project-container .pet-immigration-erp .more-btn {
    background-color: #F9CC78;
}

/*------------------------------ client ------------------------------*/
body.home #client {
    margin-bottom: 90px;
    position: relative;
}
body.home #client .section-highlight {
    margin-bottom: 38px;
}

@media (min-width: 768px) {
    body.home #client {
        margin-bottom: 100px;
    }
    body.home #client .section-highlight {
        margin-bottom: 80px;
    }
}
@media (min-width: 1200px) {
    body.home #client {
        margin-bottom: 120px;
    }
    body.home #client .section-highlight {
        margin-bottom: 100px;
    }
}

/* feedback-wrapper */
body.home #client .feedback-wrapper {
    background-position: center;
    background-size: cover;
    border-radius: 15px;
    max-width: 554px;
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 12px;
}
body.home #client .feedback-wrapper .project-content {
    background-image: url('images/feedback-quote.svg');
    background-repeat: no-repeat;
    background-position: 20px 30px;
    padding: 43px 50px 40px 50px;
}
body.home #client .feedback-wrapper .feedback-people {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}
body.home #client .feedback-wrapper .feedback-content {
    font-size: 12px;
    line-height: 15px;
}
body.home #client .feedback-wrapper .feedback-name {
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
}
body.home #client .feedback-wrapper .feedback-star {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    body.home #client .feedback-wrapper .feedback-people {
        margin-bottom: 24px;
    }
    body.home #client .feedback-wrapper .feedback-content {
        font-size: 16px;
        line-height: 30px;
    }
    body.home #client .feedback-wrapper .feedback-name {
        font-size: 14px;
        line-height: 30px;
    }
}

body.home #client .feedback-wrapper.maid-sis {
    background-image: url('images/feedback-1-bg.png');
}

/* client-logo wrapper */
body.home #client .client-logo-wrapper {
    overflow: hidden;
    white-space: nowrap;
    height: 30px;
    margin-top: 58px;
    position: relative;
}
body.home #client .client-logo-wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 5%, rgba(255,255,255,0) 95%, rgba(255,255,255,1) 100%);
}
body.home #client .client-logo-wrapper .client-logo {
    width: 80px;
    height: auto;
    margin-left: 14px;
    margin-right: 14px;
}

@media (min-width: 768px) {
    body.home #client .client-logo-container {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }
    body.home #client .client-logo-wrapper {
        margin-top: 100px;
    }
    body.home #client .client-logo-wrapper .client-logo {
        margin-left: 35px;
        margin-right: 35px;
    }
}
@media (min-width: 1200px) {
    body.home #client .container {
        max-width: 1680px;
    }
    body.home #client .client-logo-wrapper {
        white-space: normal;
        height: 700px;
        margin-top: 0;
        width: 100%;
    }
    body.home #client .client-logo-wrapper::after {
        background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0) 5%, rgba(255,255,255,0) 95%, rgba(255,255,255,1) 100%);
    }
    body.home #client .client-logo-wrapper .client-logo {
        width: 160px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 84px;
    }
}
/* bg decoration */
body.home #client .bg-lc-1 {
    width: 19px;
    left: 12px;
    top: 20%;
    opacity: 0.6;
}
body.home #client .bg-rc-1 {
    width: 8px;
    right: 19px;
    top: 75%;
    opacity: 0.6;
}
body.home #client .bg-rc-2 {
    width: 24px;
    right: 33px;
    top: 78%;
    opacity: 0.2;
}
@media (min-width: 768px) {
    body.home #client .bg-lc-1 {
        width: 40px;
        left: 47px;
    }
    body.home #client .bg-rc-1 {
        width: 15px;
        right: 26px;
        top: 70%;
    }
    body.home #client .bg-rc-2 {
        width: 45px;
        right: 61px;
        top: 75%;
    }
    body.home #client .bg-rc-3 {
        width: 14px;
        right: 27px;
        bottom: -65px;
    }
}
@media (min-width: 1680px) {
    body.home #client .bg-lc-1 {
        width: 51px;
        left: 119px;
        top: 500px;
    }
    body.home #client .bg-rc-1 {
        width: 15px;
        right: 170px;
        top: 351px;
    }
    body.home #client .bg-rc-2 {
        width: 65px;
        right: 295px;
        top: 476px;
    }
    body.home #client .bg-rc-3 {
        width: 39px;
        right: 9px;
        bottom: -42px;
    }
}
/*------------------------------ idea ------------------------------*/
body.home #idea {
    position: fixed;
    display: none;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #FF931C;
}
body.home #idea .idea-container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.home #idea .header-container {
    width: 100%;
    padding: 4px 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
body.home #idea .header-container .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;

    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

body.home #idea .betterpi-logo {
    height: 40px;
}

body.home #idea .close {
    width: 52px;
    height: 52px;
    padding: 10px;
}
body.home #idea .close .toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17.5' cy='17.5' r='16.5' fill='white' fill-opacity='0.2' stroke='white' stroke-width='2'/%3E%3Cpath d='M9.00037 10L26.0004 27' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.00037 27L26.0004 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: block;
}

body.home #idea .circle-container {
    margin-top: 60px;
    background-color: #FFFFFF;
    border-radius: 50%;
    min-width: 705px;
    min-height: 705px;
    width: 705px;
    height: 705px;
}
body.home #idea .circle-container .circle-inner {
    padding: 8% 20px;
    text-align: center;
    color: #023047;
    max-width: 100vw;
    width: 80%;
    margin: auto;
}

body.home #idea .section-title {
    margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
    line-height: 33px;
    max-width: 80%;
}
body.home #idea .section-highlight {
    margin-bottom: 28px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    line-height: 21px;
}

body.home #idea form p {
    margin: 0;
}
body.home #idea form .wpcf7-form-control-wrap {
    margin-bottom: 22px;
    display: block;
}
body.home #idea form .form-control {
    margin-bottom: 7px;
    background-color: transparent;
    border-color: #023047;
    color: #023047;
    padding-left: 2em;
    padding-right: 2em;
    font-size: 14px;
    line-height: 1.2em;
    border-radius: 10px;
    height: 41px;
}
body.home #idea form .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(2, 48, 71, .25);
}
body.home #idea form ::-webkit-input-placeholder {
    color: #A8A8A8;
}
body.home #idea form :-moz-placeholder {
    color: #A8A8A8;
}
body.home #idea form ::-moz-placeholder {
    color: #A8A8A8;
}
body.home #idea form :-ms-input-placeholder {
    color: #A8A8A8;
}
body.home #idea form ::placeholder {
    color: #A8A8A8;
}

body.home #idea form textarea.form-control {
    height: 140px;
    max-height: 140px;
    padding-top: 1.5em;
    padding-bottom: 1.3em;
}
body.home #idea form .btn[type=submit] {
    margin-top: 10px;
    background-color: #023047;
    border-radius: 50rem;
    color: #FFFFFF;
    padding: .6em 4.5em;
    font-size: 18px;
}
body.home #idea form .ajax-loader {
    position: relative;
    width: 25px;
    height: 25px;
    top: 5px;
    left: 8px;
}

body.home #idea form p.recaptcha {
    font-size: 14px;
    line-height: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #999999;
    font-weight: 300;
    display: inline-block;
}
body.home #idea form .wpcf7-not-valid-tip {
    color: #FF931C;
    font-size: 16px;
    text-align: left;
}
body.home #idea form .wpcf7-response-output {
    color: #FF931C;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    body.home #idea .header-container {
        padding: 15px 0;
    }
    body.home #idea .header-container .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    body.home #idea .betterpi-logo {
        height: 50px;
    }
    body.home #idea .close {
        width: 55px;
        height: 55px;
    }
    body.home #idea .circle-container {
        min-width: 705px;
        min-height: 705px;
        width: 705px;
        height: 705px;
        margin: auto;
    }
    body.home #idea .circle-container .circle-inner {
        padding: 8% 10%;
        width: 100%;
    }
    body.home #idea .section-title {
        margin-bottom: 20px;
        max-width: 60%;
    }
    body.home #idea .section-highlight {
        margin-bottom: 40px;
        max-width: 80%;
    }

    body.home #idea form .wpcf7-form-control-wrap {
        margin-bottom: 30px;
    }
    body.home #idea form .form-control {
        font-size: 16px;
        height: 48px;
    }
    body.home #idea form .btn[type=submit] {
        margin-top: 10px;
    }
    body.home #idea form p.recaptcha {
        max-width: 80%;
    }
}
@media (min-width: 1200px) {
    body.home #idea .header-container .container {
        max-width: 1680px;
    }
    body.home #idea .circle-container {
        min-width: 866px;
        min-height: 866px;
        width: 866px;
        height: 866px;
    }
    body.home #idea .circle-container .circle-inner {
        padding: 13% 15%;
    }
    body.home #idea .section-title {
        font-size: 38px;
        line-height: 40px;
        margin-bottom: 14px;
        max-width: 70%;
    }
    body.home #idea .section-highlight {
        font-size: 20px;
        margin-bottom: 20px;
        max-width: 100%;
        letter-spacing: 1.5px;
        line-height: 1.5rem;
    }

    body.home #idea form .form-control {
        margin-bottom: 7px;
        padding-left: 1.55em;
        padding-right: 1.55em;
        padding-top: inherit;
        padding-bottom: inherit;
        height: 58px;
        font-size: 18px;
    }
    body.home #idea form textarea.form-control {
        height: 180px;
        max-height: 180px;
        padding: 1.55em;
    }
    body.home #idea form .btn[type=submit] {
        margin-top: 11px;
    }
    body.home #idea form .ajax-loader {
        top: 5px;
    }
    body.home #idea form .wpcf7-form-control-wrap {
        margin-bottom: 32px;
        display: block;
        margin-top: 40px;
    }
}


/*--------------------------------------------------------------
Service Page
--------------------------------------------------------------*/

/*------------------------------ hero ------------------------------*/
.hero {
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}
.hero .container {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 66px;
    padding-bottom: 500px;
    background-repeat: no-repeat;
    background-position: center 300px;
    background-size: 430px;
}
.hero .content-wrapper .section-title {
    margin-bottom: 28px;
    z-index: 20;
}
.hero .content-wrapper .section-highlight {
    margin-bottom: 40px;
    font-size: 14px;
    line-height: 19px;
    font-weight: 300;
    z-index: 20px;
}
.hero .content-wrapper .more-btn {
    background-color: #FFFFFF;
    color: #FF931C;
    margin-bottom: 40px;
    min-width: 170px;
}

@media (min-width: 768px) {
    .hero .container {
        padding-left: 70px;
        padding-right: 70px;
        padding-top: 90px;
        padding-bottom: 700px;
        background-position: center 400px;
        background-size: 600px;
    }
    .hero .content-wrapper .section-title {
        margin-bottom: 40px;
    }
    .hero .content-wrapper .section-highlight {
        margin-bottom: 43px;
        font-size: 20px;
        line-height: 27px;
    }
    .hero .content-wrapper .more-btn {
        min-width: 215px;
    }
}

@media (min-width: 1200px) {
    .hero .container {
        padding-left: 70px;
        padding-right: 70px;
        padding-top: 275px;
        padding-bottom: 340px;
        background-position: right 120px;
        background-size: 550px;
    }
    .hero .content-wrapper {
        margin-left: 60px;
    }
    .hero .content-wrapper .section-title {
        margin-bottom: 55px;
    }
    .hero .content-wrapper .section-highlight {
        margin-bottom: 80px;
        font-size: 28px;
        line-height: 38px;
    }
}
@media (min-width: 1680px) {
    .hero .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 1440px;
        background-position: right 120px;
        background-size: 700px;
    }
}

body.service #hero {
    background-image: url('images/bg/service-m.svg');
    position: relative;
}
body.service #hero .container {
    background-image: url('images/service-cover.png');
}
@media (min-width: 768px) {
    body.service #hero {
        background-image: url('images/bg/service-p.svg');
    }
}
@media (min-width: 1200px) {
    body.service #hero {
        background-image: url('images/bg/service-d.svg');
    }
}
/* bg decoration */
body.service #hero .bg-lt-1 {
    width: 19px;
    left: 23px;
    top: 16px;
}
body.service #hero .bg-lb-1 {
    width: 27px;
    left: 40px;
    bottom: 106px;
}
body.service #hero .bg-rt-1 {
    width: 25px;
    right: 75px;
    top: 185px;
}
body.service #hero .bg-rb-1 {
    width: 27px;
    right: 67px;
    bottom: 46px;
}
@media (min-width: 576px) {
    body.service #hero .bg-lt-1 {
        width: 29px;
    }
    body.service #hero .bg-lb-1 {
        width: 30px;
    }
    body.service #hero .bg-rt-1 {
        width: 32px;
    }
    body.service #hero .bg-rb-1 {
        width: 30px;
    }
}
@media (min-width: 768px) {
    body.service #hero .bg-lt-1 {
        width: 36px;
        left: 36px;
        top: 31px;
    }
    body.service #hero .bg-lb-1 {
        width: 37px;
        left: 75px;
        bottom: 204px;
    }
    body.service #hero .bg-rt-1 {
        width: 40px;
        right: 88px;
        top: 325px;
    }
    body.service #hero .bg-rb-1 {
        width: 34px;
        right: 158px;
        bottom: 103px;
    }
}
@media (min-width: 1200px) {
    body.service #hero .bg-lt-1 {
        width: 53px;
        left: 20%;
        top: 88px;
    }
    body.service #hero .bg-lb-1 {
        width: 59px;
        left: 10%;
        bottom: 288px;
    }
    body.service #hero .bg-rt-1 {
        width: 61px;
        right: 20%;
        top: 48px;
    }
    body.service #hero .bg-rb-1 {
        width: 50px;
        right: 15%;
        bottom: 216px;
    }
}
/*------------------------------ service ------------------------------*/
body.service #service .dual-wrapper .col {
    margin-bottom: 0;
}

body.service #service .dual-wrapper .item-title {
    margin-bottom: 15px;
    padding-top: 230px;
}
body.service #service .dual-wrapper .item-desc {
    text-align: center;
}
body.service #service .dual-wrapper .dual-image img {
    max-width: 650px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* item icon */
body.service #service .dual-wrapper .item-title::after {
    content: "";
    display: block;
    position: absolute;
    width: 580px;
    height: 290px;
    top: 0;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

body.service #service #salon.dual-wrapper .item-title::after {
    background-image: url('images/service-number-1.svg');
}
body.service #service #member.dual-wrapper .item-title::after {
    background-image: url('images/service-number-2.svg');
}
body.service #service #online-shop.dual-wrapper .item-title::after {
    background-image: url('images/service-number-3.svg');
}
body.service #service #booking.dual-wrapper .item-title::after {
    background-image: url('images/service-number-4.svg');
}
body.service #service #accounting.dual-wrapper .item-title::after {
    background-image: url('images/service-number-5.svg');
}
body.service #service #erp.dual-wrapper .item-title::after {
    background-image: url('images/service-number-6.svg');
}

body.service #service #accounting .dual-content {
    padding-right: 40px;
}

body.service #service #member::after,
body.service #service #accounting::after {
    content: "";
    display: block;
    position: absolute;
    width: 900px;
    padding-top: 900px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -2;
}
body.service #service #member::after {
    top: -70px;
    left: -16px;
    background-image: url('images/bg/middle-ball-1.svg');
}
body.service #service #accounting::after {
    top: -65px;
    right: -20px;
    background-image: url('images/bg/middle-ball-2.svg');
}

@media (max-width: 359px) {
    body.service #service #member::after {
        top: -50px;
        left: -35%;
    }
    body.service #service #accounting::after {
        right: -100px;
    }
}

@media (min-width: 768px) {
    body.service #service .dual-wrapper {
        margin-bottom: 90px;
    }
    body.service #service .dual-wrapper .item-title {
        padding-top: 300px;
    }
    body.service #service .dual-wrapper .item-title::after {
        width: 800px;
        height: 400px;
    }
    body.service #service #member::after {
        left: 5%;
        width: 140%;
        padding-top: 140%;
    }
    body.service #service #accounting::after {
        top: 5%;
        width: 120%;
        padding-top: 120%;
        right: 40px;
    }
    body.service #service #accounting .dual-content {
        padding-right: 20px;
    }
}
@media (min-width: 992px) {
    body.service #service {
        margin-top: 45px;
    }
    body.service #service .dual-wrapper {
        margin-bottom: 210px;
    }
    body.service #service .dual-wrapper .item-title {
        text-align: left;
        margin-bottom: 25px;
    }
    body.service #service .dual-wrapper .item-desc {
        text-align: left;
    }
    body.service #service .dual-wrapper .item-title::after {
        left: 150px;
        margin-left: -410px;
        -webkit-transform: unset;
        -moz-transform: unset;
        -o-transform: unset;
        -ms-transform: unset;
        transform: unset;
    }
    body.service #service #member::after {
        width: 100%;
        padding-top: 100%;
        top: -12%;
        left: 42%;
    }
    body.service #service #accounting::after {
        width: 88%;
        padding-top: 88%;
        top: -5%;
        left: -33%;
    }
}
@media (min-width: 1680px) {
    body.service #service .container {
        max-width: 1440px;
    }
    body.service #service #member::after {
        width: 95%;
        padding-top: 95%;
        top: -23%;
        left: 48%;
    }
    body.service #service #accounting::after {
        width: 85%;
        padding-top: 85%;
        top: -20%;
        left: -31%;
    }
}

/*--------------------------------------------------------------
Project Page
--------------------------------------------------------------*/

/*------------------------------ hero ------------------------------*/
body.project #hero {
    background-image: url('images/bg/project-m.svg');
    position: relative;
}
body.project #hero .container {
    background-image: url('images/project-cover.png');
}
@media (min-width: 768px) {
    body.project #hero {
        background-image: url('images/bg/project-p.svg');
    }
}
@media (min-width: 1200px) {
    body.project #hero {
        background-image: url('images/bg/project-d.svg');
    }
}
/* bg decoration */
body.project #hero .bg-lt-1 {
    width: 26px;
    left: 40px;
    top: 17px;
}
body.project #hero .bg-lb-1 {
    width: 31px;
    left: 29px;
    bottom: 126px;
}
body.project #hero .bg-rt-1 {
    width: 28px;
    right: 29px;
    top: 103px;
}
body.project #hero .bg-rm-1 {
    width: 37px;
    right: 122px;
    top: 244px;
}
body.project #hero .bg-rb-1 {
    width: 37px;
    right: 89px;
    bottom: 80px;
}
@media (min-width: 768px) {
    body.project #hero .bg-lt-1 {
        width: 37px;
        left: 37px;
        top: 25px;
    }
    body.project #hero .bg-lb-1 {
        left: 61px;
        bottom: 180px;
    }
    body.project #hero .bg-rt-1 {
        width: 60px;
        right: 76px;
        top: 29px;
    }
    body.project #hero .bg-rm-1 {
        width: 71px;
        right: 194px;
        top: 303px;
    }
    body.project #hero .bg-rb-1 {
        width: 58px;
        right: 176px;
        bottom: 48px;
    }
}
@media (min-width: 1200px) {
    body.project #hero .bg-lt-1 {
        width: 83px;
        left: 15%;
        top: 71px;
    }
    body.project #hero .bg-lb-1 {
        width: 31px;
        left: 166px;
        bottom: 168px;
    }
    body.project #hero .bg-rt-1 {
        width: 60px;
        right: 25%;
        top: 51px;
    }
    body.project #hero .bg-rm-1 {
        width: 71px;
        right: 60%;
        top: 706px;
    }
    body.project #hero .bg-rb-1 {
        width: 58px;
        right: 20%;
        bottom: 109px;
    }
}
/*------------------------------ project ------------------------------*/
body.project #project .section-title {
    padding-top: 137px;
    padding-bottom: 85px;
    background-image: url(./images/css-bg/project-title-desktop.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 28% -40px;
}
@media (min-width: 992px) {
    body.project #project .section-title {
        background-position: 32% -40px;
    }
}
@media (min-width: 1200px) {
    body.project #project .section-title {
        background-position: 39% -40px;
    }
}
@media (min-width: 1680px) {
    body.project #project .section-title {
        background-position: 40% -40px;
    }
}

/*--------------------------------------------------------------
Parent Project Pages
--------------------------------------------------------------*/
body.parent-project .site-content h1 {
    font-size: 24px;
    line-height: 1.25em;
}
body.parent-project .site-content h2 {
    font-size: 24px;
    line-height: 1.05em;
    margin-left: auto;
    margin-right: auto;
    text-transform: unset;
}
body.parent-project .site-content p {
    font-size: 14px;
    line-height: 30px;
}

body.parent-project .section-title {
    padding-top: 26px;
    position: relative;
    line-height: 1em;
}
body.parent-project .section-title .text-back {
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;

    color: #FFFFFF;
    opacity: 0.2;
    font-size: 2em;
    line-height: 0.9em;
    letter-spacing: .15em;
    text-transform: uppercase;
}

body.parent-project .bg-project .text-back {
    text-shadow:
        -1px -1px #FFFFFF,
        1px -1px #FFFFFF,
        -1px 1px #FFFFFF,
        1px 1px #FFFFFF;
}

@media (min-width: 768px) {
    body.parent-project .site-content h1 {
        font-size: 38px;
        line-height: 1.18em;
    }
    body.parent-project .site-content h2 {
        font-size: 38px;
        line-height: 1.05em;
    }
    body.parent-project .site-content p {
        font-size: 16px;
        line-height: 35px;
    }
    body.parent-project .section-title {
        padding-top: 40px;
    }
}

@media (min-width: 1200px) {
    body.parent-project .site-content h1 {
        font-size: 48px;
        line-height: 1.45em;
    }
    body.parent-project .site-content h2 {
        font-size: 48px;
        line-height: 1.45em;
    }
    body.parent-project .site-content p {
        font-size: 16px;
        line-height: 50px;
    }

    body.parent-project .section-title {
        padding-top: 34px;
    }
    body.parent-project .section-title .text-back {
        line-height: 1.09em;
    }

    body.parent-project .site-content .container {
        max-width: 1680px;
    }
}

/*------------------------------ content section ------------------------------*/
body.parent-project .content-section {
    padding-top: 42px;
    padding-bottom: 20px;
}

body.parent-project .content-section figure {
    max-width: 100%;
    display: table;
}
body.parent-project .content-section figure img {
    margin-bottom: 12px;
}
body.parent-project .content-section figure figcaption {
    display: table-caption;
    caption-side: bottom;
}

body.parent-project .content-section .section-title {
    margin-bottom: 1.67em;
    width: 100%;
}
body.parent-project .content-section .section-content {
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 40px;
}

body.parent-project .content-section .section-one-image {
    padding-left: 5%;
    padding-right: 5%;
}
body.parent-project .content-section .section-one-image img {
    max-width: 100%;
}

body.parent-project .content-section .section-one-app-image figure {
    margin-bottom: 42px;
}
body.parent-project .content-section .section-one-app-image figure,
body.parent-project .content-section .section-one-app-image img {
    margin-left: auto;
    margin-right: auto;
    max-height: 477px;
    max-width: 100%;
}
body.parent-project .content-section .section-one-app-image img {
    display: block;
}
body.parent-project .content-section .section-one-app-image figure figcaption {
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 2.1px;
}

body.parent-project .content-section .section-five-image {
    text-align: center;
    max-width: 100%;
    margin-bottom: 20px;
}
body.parent-project .content-section .section-five-image img {
    height: auto;
    width: 25%;
    margin-left: 2%;
    margin-right: 2%;
}
@media (min-width: 768px) {
    body.parent-project .content-section {
        padding-bottom: 40px;
    }
    body.parent-project .content-section .section-content {
        padding-left: 60px;
        padding-right: 60px;
        margin-bottom: 100px;
    }

    body.parent-project .content-section .section-one-app-image figure {
        margin-bottom: 60px;
    }
    body.parent-project .content-section .section-one-app-image figure,
    body.parent-project .content-section .section-one-app-image img {
        max-height: 800px;
    }
    body.parent-project .content-section .section-one-app-image figcaption {
        padding-left: 32px;
        padding-right: 22px;
        font-size: 16px;
        letter-spacing: 2.4px;
    }

    body.parent-project .content-section .section-five-image {
        margin-bottom: 60px;
    }
    body.parent-project .content-section .section-five-image img {
        margin-left: 3%;
        margin-right: 3%;
        width: 24.5%;
    }
}
@media (min-width: 1200px) {
    body.parent-project .content-section {
        padding-top: 90px;
        padding-bottom: 100px;
    }
    body.parent-project .content-section .section-title {
        margin-bottom: 58px;
        max-width: unset;
    }
    body.parent-project .content-section .section-content {
        margin-bottom: 80px;
    }
    body.parent-project .content-section .section-five-image img {
        margin-left: 1%;
        margin-right: 1%;
        width: 16%;
    }
}

/* content-left content-right */
body.parent-project .content-section.content-left,
body.parent-project .content-section.content-right,
body.parent-project .content-section.content-five-image {
    background-color: #FBFBFB;
}
body.parent-project .content-section.content-left .section-one-image img,
body.parent-project .content-section.content-right .section-one-image img {
    width: 100%;
}

body.parent-project .content-section.content-right .section-one-image {
    z-index: 5;
    position: relative;
    text-align: right;
}
body.parent-project .content-section.content-right .section-one-image::before {
    content: "";
    display: block;
    position: absolute;
    width: 70%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
body.parent-project .content-section.content-five-image {
    padding-top: 0;
}
body.parent-project .content-section.content-left .text-back,
body.parent-project .content-section.content-right .text-back,
body.parent-project .content-section.content-five-image .text-back {
    color: #FBFBFB;
}

body.parent-project .content-section.content-right.style-corner {
    position: relative;
    padding-top: 60px;
    background-color: #FFF;
}
body.parent-project .content-section.content-right.style-corner::before {
    content: "";
    display: block;
    position: absolute;
    height: 65%;
    width: 100%;
    bottom: 0;
    left: 0;
}
body.parent-project .content-section.content-right.style-corner figcaption {
    color: #FFF;
}
body.parent-project .content-section.content-right.style-corner .content-container .section-content {
    text-align: left;
}

@media (min-width: 768px) {
    body.parent-project .content-section.content-right.style-corner {
        padding-top: 100px;
        padding-bottom: 20px;
    }
}

@media (min-width: 992px) {
    body.parent-project .content-section.content-left .content-container .section-content {
        text-align: left;
    }
    body.parent-project .content-section.content-right .content-container .section-content {
        text-align: right;
    }
    body.parent-project .content-section.content-left .section-one-image {
        padding-right: 30px;
        padding-left: 0;
    }
    body.parent-project .content-section.content-right .section-one-image {
        padding-left: 20px;
    }
    body.parent-project .content-section.content-right.style-corner::before {
        height: 70%;
    }
}

@media (min-width: 1200px) {
    body.parent-project .content-section.content-right {
        padding-top: 0;
        padding-bottom: 0;
    }
    body.parent-project .content-section.content-left .content-container,
    body.parent-project .content-section.content-right .content-container {
        max-width: 600px;
    }
    body.parent-project .content-section.content-left .content-container .section-content {
        padding-left: 40px;
        padding-right: 20px;
    }
    body.parent-project .content-section.content-right .content-container .section-content {
        padding-left: 20px;
        padding-right: 40px;
    }
    body.parent-project .content-section.content-right .section-one-image {
        padding-top: 90px;
        padding-bottom: 100px;
    }
    body.parent-project .content-section.content-left .section-one-image img,
    body.parent-project .content-section.content-right .section-one-image img {
        max-width: 840px;
    }
    body.parent-project .content-section.content-right .section-one-image::before {
        width: calc(100% - 250px);
    }

    body.parent-project .content-section.content-right.style-corner::before {
        content: "";
        display: block;
        position: absolute;
        height: 45%;
        width: 40%;
        top: 0;
        left: 0;
    }

    body.parent-project .content-section.content-five-image .container {
        max-width: 1440px;
    }

    body.parent-project .content-section.content-five-image .section-five-image img:nth-child(2n + 1) {
        padding-top: 90px;
    }
}

/*------------------------------ hero ------------------------------*/
body.parent-project #hero {
    position: relative;
}
body.parent-project #hero .hero-container {
    background-size: cover;
    background-position: center top;
}
body.parent-project #hero .hero-wrapper {
    position: relative;
    min-width: 50%;
    max-width: 85%;
}
body.parent-project #hero .hero-wrapper .container {
    z-index: 1;
    position: relative;
}
body.parent-project #hero .hero-wrapper .hero-bg-overlay {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

body.parent-project #hero .project-logo {
    margin-top: 15px;
    margin-left: 20px;
    height: 35px;
}
body.parent-project #hero .project-logo.project-logo-square {
    height: 47px;
}
body.parent-project #hero .content-wrapper {
    padding-left: 20px;
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 300px;
}
body.parent-project #hero .project-title {
    margin-bottom: 22px;
}
body.parent-project #hero .project-highlight {
    font-size: 14px;
    line-height: 20px;
}
body.parent-project #hero .project-link {
    display: none;
}
body.parent-project #hero .project-link img {
    height: 40px;
    width: auto;
}
body.parent-project #hero .project-image {
    position: relative;
    margin-top: -300px;
    height: 485px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

@media (min-width: 768px) {
    body.parent-project #hero .hero-wrapper {
        max-width: 75%;
    }
    body.parent-project #hero .content-wrapper {
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 100px;
        padding-bottom: 400px;
    }
    body.parent-project #hero .project-title {
        margin-bottom: 33px;
    }
    body.parent-project #hero .project-highlight {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 46px;
    }
    body.parent-project #hero .project-link {
        display: block;
    }
    body.parent-project #hero .project-logo {
        margin-top: 40px;
        height: 35px;
        margin-left: 60px;
    }
    body.parent-project #hero .project-image {
        margin-top: -350px;
        height: 566px;
    }
}
@media (min-width: 1200px) {
    body.parent-project #hero .hero-wrapper {
        min-height: 900px;
        max-width: 50%;
    }
    body.parent-project #hero .container {
        max-width: 840px;
        margin-right: 0;
    }
    body.parent-project #hero .content-wrapper {
        padding-left: 40px;
        padding-right: 200px;
        padding-top: 180px;
        padding-bottom: 240px;
    }
    body.parent-project #hero .project-title {
        margin-bottom: 30px;
    }
    body.parent-project #hero .project-highlight {
        font-size: 18px;
        line-height: 33px;
        margin-bottom: 50px;
    }
    body.parent-project #hero .project-link {
        display: block;
    }
    body.parent-project #hero .project-link a,
    body.parent-project #hero .project-link span {
        min-width: 105px;
        max-width: 120px;
        width: 30%;
        display: inline-block;
    }
    body.parent-project #hero .project-logo {
        margin-top: 40px;
        height: 35px;
        margin-left: 40px;
    }
    body.parent-project #hero .project-logo.project-logo-square {
        height: 80px;
    }
    body.parent-project #hero .project-image {
        top: 100px;
        height: 700px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-top: 0;
        left: 0;
        right: 0;
    }
}

/*------------------------------ feature ------------------------------*/
body.parent-project #feature .feature-title {
    padding-top: 20px;
    padding-bottom: 25px;
}
body.parent-project #feature .feature-title p {
    font-size: 14px;
    text-align: center;
}
body.parent-project #feature .feature-content p {
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
    padding-top: 70px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 55px 55px;
    margin-top: 25px;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    body.parent-project #feature .feature-title p {
        font-size: 18px;
    }
    body.parent-project #feature .feature-content p {
        font-size: 18px;
        line-height: 25px;
        padding-top: 105px;
        background-size: 90px 90px;
        margin-top: 40px;
        margin-bottom: 40px;
        min-width: 90px;
        width: 33.3%;
    }
}
@media (min-width: 1200px) {
    body.parent-project #feature .feature-title .wrapper {
        max-width: 720px;
        margin-left: auto;
        height: 100%;
        padding-left: 20px;
    }
    body.parent-project #feature .feature-content .wrapper {
        max-width: 720px;
    }
    body.parent-project #feature .feature-title p {
        font-size: 28px;
    }
}

/*------------------------------ description ------------------------------*/
body.parent-project #description {
    padding-bottom: 20px;
}

body.parent-project #description .tag-container {
    margin-bottom: 20px;
}
body.parent-project #description .tag-title {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 25px;
    margin-bottom: 0;
}
body.parent-project #description .tag-title::before {
    content: "/";
    padding-right: 5px;
}
body.parent-project #description .tag-content {
    font-weight: bold;
    line-height: 20px;
    text-align: left;
}
body.parent-project #description .tag-content span {
    margin-right: 5px;
}

body.parent-project #description .section-title {
    margin-bottom: 1em;
}

@media (min-width: 768px) {
    body.parent-project #description {
        padding-bottom: 73px;
    }
    body.parent-project #description .tag-title {
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    body.parent-project #description .tag-container {
        margin-bottom: 36px;
    }
}
@media (min-width: 1200px) {
    body.parent-project #description {
        padding-bottom: 80px;
    }
    body.parent-project #description .tag-container {
        padding-right: 60px;
    }
    body.parent-project #description .desc-container {
        padding-left: 60px;
    }
    body.parent-project #description .tag-title {
        font-size: 14px;
    }

    body.parent-project #description .section-title {
        margin-bottom: 100px;
    }
}

/*------------------------------ show case ------------------------------*/
body.parent-project #showcase {
    position: relative;
}
body.parent-project #showcase::after {
    height: 45px;
    background-size: 45px;
    bottom: -22px;
    width: 100%;
    content: "";
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: center;
}
body.parent-project #showcase::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 40%;
    background-color: #FBFBFB;
}
body.parent-project #showcase p {
    color: #FFFFFF;
}
body.parent-project #showcase .container {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
}
body.parent-project #showcase .section-image img {
    max-width: 100%;
}
body.parent-project #showcase .section-title {
    font-size: 18px;
    line-height: 25px;
    font-weight: bold;
    margin-top: 26px;
}
body.parent-project #showcase .comment-wrapper p {
    font-size: 14px;
}
body.parent-project #showcase .comment-wrapper .comment-title {
    font-weight: bold;
    margin-bottom: 0;
}
body.parent-project #showcase .comment-wrapper .comment-title::before {
    content: "//";
    padding-right: 5px;
}
body.parent-project #showcase .comment-wrapper .comment-content {
    padding-left: 17px;
}

@media (min-width: 768px) {
    body.parent-project #showcase .container {
        padding-top: 80px;
        padding-bottom: 40px;
    }
    body.parent-project #showcase .section-title {
        font-size: 24px;
        margin-bottom: 30px;
        margin-top: 40px;
    }
    body.parent-project #showcase .comment-wrapper p {
        font-size: 14px;
        display: inline-block;
        margin-bottom: 0;
    }
    body.parent-project #showcase .comment-wrapper .comment-title {
        margin-bottom: 0;
        min-width: 100px;
    }
    body.parent-project #showcase .comment-wrapper .comment-content {
        padding-left: 0;
    }
    body.parent-project #showcase::after {
        height: 42px;
        background-size: 42px;
        bottom: -21px;
    }
}
@media (min-width: 992px) {
    body.parent-project #showcase .container {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 80px;
        padding-bottom: 70px;
    }
    body.parent-project #showcase .section-content {
        margin-top: 22%;
    }
    body.parent-project #showcase .section-title {
        left: -145px;
        font-size: 38px;
        line-height: 70px;
        width: calc(100% + 145px);
        margin-bottom: 30px;
    }
    body.parent-project #showcase .comment-wrapper p {
        font-size: 16px;
        display: inline-block;
    }
    body.parent-project #showcase .comment-wrapper .comment-title {
        margin-bottom: 0;
        min-width: 100px;
    }
    body.parent-project #showcase .comment-wrapper .comment-content {
        padding-left: 0;
    }
}
@media (min-width: 1200px) {
    body.parent-project #showcase::after {
        height: 52px;
        background-size: 52px;
        bottom: -26px;
    }
    body.parent-project #showcase .container {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 150px;
        padding-bottom: 90px;
    }
    body.parent-project #showcase .section-content {
        margin-top: 28%;
    }
}

/*------------------------------ solution ------------------------------*/
body.parent-project #solution {
    position: relative;
    color: #FFFFFF;
    padding-bottom: 35px;
}
body.parent-project #solution::after {
    height: 45px;
    background-size: 45px;
    bottom: -22px;
    width: 100%;
    content: "";
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: center;
}

body.parent-project #solution .section-image {
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 34px;
}
body.parent-project #solution .section-image img {
    max-width: 100%;
}

body.parent-project #solution .section-title {
    margin-bottom: 33px;
}

body.parent-project #solution .section-content {
    text-align: justify;
    padding-left: 35px;
    padding-right: 35px;
}

@media (min-width: 768px) {
    body.parent-project #solution {
        padding-bottom: 80px;
    }
}
@media (min-width: 1200px) {
    body.parent-project #solution {
        padding-bottom: 80px;
    }
}

/*------------------------------ design ------------------------------*/
body.parent-project #design .section-content {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

body.parent-project #design .color-image {
    padding-bottom: 40px;
}
body.parent-project #design .color-image img {
    max-width: 240px;
}
@media (min-width: 768px) {
    body.parent-project #design .color-image img {
        max-width: 300px;
    }
}
@media (min-width: 1200px) {
    body.parent-project #design .section-content {
        text-align: center;
    }
    body.parent-project #design .color-image {
        padding-bottom: 12%;
    }
    body.parent-project #design .color-image img {
        max-width: 350px;
    }
}

/*------------------------------ color ------------------------------*/
body.parent-project #color {
    padding-top: 50px;
    padding-bottom: 20px;
}
body.parent-project #color .section-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
body.parent-project #color .section-five-image img {
    margin-left: 3%;
    margin-right: 3%;
    width: 20%;
}
@media (min-width: 768px) {
    body.parent-project #color .section-five-image img {
        margin-left: 1%;
        margin-right: 1%;
        width: 15%;
    }
}
@media (min-width: 1200px) {
    body.parent-project #color .section-content {
        padding-left: 0;
        padding-right: 0;
    }
    body.parent-project #color .section-five-image img {
        margin-left: 1%;
        margin-right: 1%;
        width: 12%;
    }
}

/*------------------------------ prev next project ------------------------------*/
body.parent-project #prev-project,
body.parent-project #next-project {
    position: fixed;
    z-index: 10;
    bottom: 50%;

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
body.parent-project #prev-project {
    left: -10px;
}
body.parent-project #next-project {
    right: -10px;
}

body.parent-project #prev-project a,
body.parent-project #next-project a {
    font-size: 12px;
    line-height: 12px;
    background-position: right;
    background-repeat: no-repeat;
    background-size: 18px;
    padding: 5px 32px 5px 5px;
    text-transform: uppercase;
    color: #FFFFFF;
}
body.parent-project #prev-project a {
    background-image: url('images/project/prev-pj.svg');
}
body.parent-project #next-project a {
    background-image: url('images/project/next-pj.svg');
}


@media (min-width: 768px) {
    body.parent-project #prev-project,
    body.parent-project #next-project {
        bottom: 50%;
    }
    body.parent-project #prev-project {
        left: -5px;
    }
    body.parent-project #next-project {
        right: -5px;
    }
    body.parent-project #prev-project a,
    body.parent-project #next-project a {
        font-size: 16px;
    }
}
@media (min-width: 1200px) {
    body.parent-project #prev-project,
    body.parent-project #next-project {
        top: 50%;
        bottom: unset;
    }
    body.parent-project #prev-project a,
    body.parent-project #next-project a {
        padding-right: 34px;
    }
}
@media (min-width: 1950px) {
    body.parent-project #prev-project {
        left: 73px;
    }
    body.parent-project #next-project {
        right: 73px;
    }
}

/*------------------------------ comment ------------------------------*/
body.parent-project .comment {
    padding-top: 90px;
    padding-bottom: 90px;
}

body.parent-project .comment .section-title {
    margin-bottom: 44px;
}
body.parent-project .comment .section-content {
    padding-left: 40px;
    padding-right: 40px;
}

body.parent-project .comment .comment-image {
    margin-bottom: 38px;
}

body.parent-project .comment .comment-image img {
    max-width: 100%;
}

body.parent-project .comment .comment-content p {
    margin: 0;
}
body.parent-project .comment .comment-content p b {
    font-size: 1.43em;
    font-weight: 700;
    letter-spacing: 0.15em;

    color: #FF841C;
}
body.parent-project .comment .comment-content {
    padding-bottom: 28px;
    margin-bottom: 20px;

    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FF841C;
}
body.parent-project .comment .comment-detail .commenter {
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}
body.parent-project .comment .comment-detail .company {
    margin-bottom: 5px;
}
body.parent-project .comment .comment-detail .rating {
    font-size: 19px;
    margin: 0;
    line-height: 1;
}
body.parent-project .comment .comment-detail .rating span {
    margin-right: 10px;
}

@media (min-width: 768px) {
    body.parent-project .comment {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    
    body.parent-project .comment .section-title {
        margin-bottom: 70px;
    }
    body.parent-project .comment .section-content {
        padding-left: 60px;
        padding-right: 60px;
    }
    body.parent-project .comment .comment-image {
        margin-bottom: 66px;
    }
    
    body.parent-project .comment .comment-content {
        padding-bottom: 50px;
        margin-bottom: 33px;
    }
    body.parent-project .comment .comment-detail .company {
        margin-bottom: 15px;
    }
    body.parent-project .comment .comment-detail .rating {
        font-size: 27px;
    }
    body.parent-project .comment .comment-detail .rating span {
        margin-right: 4px;
    }
}
@media (min-width: 1200px) {
    body.parent-project .comment {
        padding-top: 200px;
        padding-bottom: 215px;
    }
    body.parent-project .comment .comment-image {
        margin-bottom: 0;
    }
    body.parent-project .comment .comment-content p b {
        font-size: 1.5em;
    }

    body.parent-project .comment .comment-content {
        padding-bottom: 40px;
        margin-bottom: 24px;
    }
    body.parent-project .comment .comment-detail .rating {
        font-size: 31px;
    }
}

/*------------------------------ bottom download link ------------------------------*/
body.parent-project #download-link {
    background-color: #FBFBFB;
}
    
/*------------------------------ call for action ------------------------------*/
body.parent-project .footer-cfa {
    background-image: url('images/bg/footer-cfa.jpg');
    background-size: cover;
    background-position: center center;
    min-height: 190px;
    padding: 30px 25px;
}
body.parent-project .footer-cfa p {
    font-size: 17px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    color: #FAFBFB;
    letter-spacing: 0.16em;
    margin: 0;
}

@media (min-width: 768px) {
    body.parent-project .footer-cfa {
        height: 470px;
        padding: 30px 75px;
    }
    body.parent-project .footer-cfa p {
        font-size: 25px;
        line-height: 55px;
    }
}

@media (min-width: 1200px) {
    body.parent-project .footer-cfa p {
        font-size: 32px;
        line-height: 80px;
    }
}

/*------------------------------ Freezee Mall ------------------------------*/
body.freezee-mall .bg-project {
    background-color: #0AA5F4;
}
body.freezee-mall .comment .comment-content p b,
body.freezee-mall .text-project {
    color: #0AA5F4;
}
body.freezee-mall .text-back {
    text-shadow:
        -1px -1px #0AA5F4,
        1px -1px #0AA5F4,
        -1px 1px #0AA5F4,
        1px 1px #0AA5F4;
}
body.freezee-mall .comment .comment-content {
    border-bottom-color: #0AA5F4;
}

body.freezee-mall #hero .hero-container {
    background-image: url('images/project/freezee-mall-bg.png');
}
body.freezee-mall #feature .feature1 {
    background-image: url('images/project/freezee-mall-feature1.svg')
}
body.freezee-mall #feature .feature2 {
    background-image: url('images/project/freezee-mall-feature2.svg')
}
body.freezee-mall #feature .feature3 {
    background-image: url('images/project/freezee-mall-feature3.svg')
}
body.freezee-mall #showcase::after {
    background-image: url('images/project/freezee-mall-down.svg');
}
body.freezee-mall #hero .hero-wrapper {
    color: #FFFFFF;
}
body.freezee-mall #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(53, 73, 93, 0.5);
}
body.freezee-mall .content-section.content-right .section-one-image::before {
    background-color: #0AA5F4;
}

body.freezee-mall #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/freezee-mall-prev-pj.svg');
}
body.freezee-mall #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/freezee-mall-next-pj.svg');
}

/*------------------------------ Maid Sis ------------------------------*/
body.maid-sis .bg-project {
    background-color: #FF805B;
}
body.maid-sis .text-project {
    color: #FF805B;
}
body.maid-sis .text-back {
    text-shadow:
        -1px -1px #FF805B,
        1px -1px #FF805B,
        -1px 1px #FF805B,
        1px 1px #FF805B;
}
body.maid-sis #hero .hero-container {
    background-image: url('images/project/maid-sis-bg.png');
}
body.maid-sis #feature .feature1 {
    background-image: url('images/project/maid-sis-feature1.svg')
}
body.maid-sis #feature .feature2 {
    background-image: url('images/project/maid-sis-feature2.svg')
}
body.maid-sis #feature .feature3 {
    background-image: url('images/project/maid-sis-feature3.svg')
}
body.maid-sis #showcase::after {
    background-image: url('images/project/maid-sis-down.svg');
}
body.maid-sis #hero .hero-wrapper {
    color: #FFFFFF;
}
body.maid-sis #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(53, 73, 93, 0.5);
}
body.maid-sis .content-section.content-right .section-one-image::before {
    background-color: #FF805B;
}
body.maid-sis .content-section.content-right .section-one-image img {
    width: 100%;
    padding: 15%;
}
body.maid-sis #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/maid-sis-prev-pj.svg');
}
body.maid-sis #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/maid-sis-next-pj.svg');
}
@media (min-width: 768px) {
    body.maid-sis .content-section.content-right {
        padding-bottom: 60px;
    }
    body.maid-sis #hero .project-link a {
        width: 45%;
    }
}
@media (min-width: 1200px) {
    body.maid-sis .content-section.content-right {
        padding-bottom: 100px;
    }
    body.maid-sis .content-section.content-right .section-one-image img {
        padding-right: 10%;
    }
    body.maid-sis .content-section.content-right .content-container .section-content {
        text-align: left;
    }
}
@media (min-width: 1680px) {
    body.maid-sis .content-section.content-right .section-one-image img {
        padding-right: unset;
    }
}

/*------------------------------ Dr Queue ------------------------------*/
body.dr-queue .bg-project {
    background-color: #1EA3AE;
}
body.dr-queue .text-project {
    color: #1EA3AE;
}
body.dr-queue .text-back {
    text-shadow:
        -1px -1px #1EA3AE,
        1px -1px #1EA3AE,
        -1px 1px #1EA3AE,
        1px 1px #1EA3AE;
}
body.dr-queue #hero .hero-container {
    background-image: url('images/project/dr-queue-bg.png');
}
body.dr-queue #feature .feature1 {
    background-image: url('images/project/dr-queue-feature1.svg')
}
body.dr-queue #feature .feature2 {
    background-image: url('images/project/dr-queue-feature2.svg')
}
body.dr-queue #feature .feature3 {
    background-image: url('images/project/dr-queue-feature3.svg')
}
body.dr-queue #showcase::after {
    background-image: url('images/project/dr-queue-down.svg');
}
body.dr-queue #hero .hero-wrapper .hero-bg-overlay {
    background-color: #F7F9FB;
    opacity: 0.5;
}
body.dr-queue .content-section.content-right .section-one-image::before {
    background-color: #1EA3AE;
}
body.dr-queue #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/dr-queue-prev-pj.svg');
}
body.dr-queue #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/dr-queue-next-pj.svg');
}
@media (min-width: 768px) {
    body.dr-queue .content-section.content-right {
        padding-bottom: 60px;
    }
    body.dr-queue #hero .project-link a {
        width: 45%;
    }
}
@media (min-width: 1200px) {
    body.dr-queue .content-section.content-right {
        padding-bottom: 100px;
    }
    body.dr-queue .content-section.content-right .section-one-image img {
        padding-right: 10%;
    }
    body.dr-queue .content-section.content-right .content-container .section-content {
        text-align: left;
    }
}
@media (min-width: 1680px) {
    body.dr-queue .content-section.content-right .section-one-image img {
        padding-right: unset;
    }
}

/*------------------------------ ecWash ------------------------------*/
body.ecwash .bg-project {
    background-color: #5CAEE5;
}
body.ecwash .text-project {
    color: #3074C1;
}
body.ecwash .text-back {
    text-shadow:
        -1px -1px #5CAEE5,
        1px -1px #5CAEE5,
        -1px 1px #5CAEE5,
        1px 1px #5CAEE5;
}
body.ecwash #hero .hero-container {
    background-image: url('images/project/ecwash-bg.png');
}
body.ecwash #feature .feature1 {
    background-image: url('images/project/ecwash-feature1.svg')
}
body.ecwash #feature .feature2 {
    background-image: url('images/project/ecwash-feature2.svg')
}
body.ecwash #feature .feature3 {
    background-image: url('images/project/ecwash-feature3.svg')
}
body.ecwash #showcase::after {
    background-image: url('images/project/ecwash-down.svg');
}
body.ecwash #hero .hero-wrapper .hero-bg-overlay {
    background-color: #F7F9FB;
    opacity: 0.5;
}
body.ecwash #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/ecwash-prev-pj.svg');
}
body.ecwash #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/ecwash-next-pj.svg');
}
@media (min-width: 768px) {
    body.ecwash .content-section.content-left {
        padding-bottom: 60px;
    }
    body.ecwash #hero .project-link a {
        width: 45%;
    }
}
@media (min-width: 1200px) {
    body.ecwash .content-section.content-left {
        padding-bottom: 100px;
    }
    body.ecwash .content-section.content-right .section-one-image img {
        padding-right: 10%;
    }
}

/*------------------------------ Coupon App ------------------------------*/
body.corphub .bg-project,
body.corphub .bg-ca {
    background-color: #B59C57 !important;
}
body.corphub .text-project {
    color: #B59C57;
}
body.corphub .text-back {
    text-shadow:
        -1px -1px #B59C57,
        1px -1px #B59C57,
        -1px 1px #B59C57,
        1px 1px #B59C57;
}
body.corphub #hero .hero-container {
    background-image: url('images/project/corphub-bg.png');
}
body.corphub #feature .feature1 {
    background-image: url('images/project/corphub-feature1.svg')
}
body.corphub #feature .feature2 {
    background-image: url('images/project/corphub-feature2.svg')
}
body.corphub #feature .feature3 {
    background-image: url('images/project/corphub-feature3.svg')
}
body.corphub #showcase::after {
    background-image: url('images/project/corphub-down.svg');
}
body.corphub #hero .hero-wrapper .hero-bg-overlay {
    background-color: #F7F9FB;
    opacity: 0.5;
}
body.corphub #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/corphub-prev-pj.svg');
}
body.corphub #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/corphub-next-pj.svg');
}
@media (min-width: 768px) {
    body.corphub .content-section.content-left {
        padding-bottom: 60px;
    }
    body.corphub #hero .project-link a {
        width: 45%;
    }
}
@media (min-width: 1200px) {
    body.corphub .content-section.content-left {
        padding-bottom: 100px;
    }
    body.corphub .content-section.content-right .section-one-image img {
        padding-right: 10%;
    }
}

/*------------------------------ Tse Ka Yan Chinese Medicine Clinic Booking App ------------------------------*/
body.clinic-booking-app .bg-project,
body.clinic-booking-app .content-section.content-right.style-corner::before,
body.clinic-booking-app .content-section.content-right .section-one-image::before {
    background-color: #4DCCA1;
}
body.clinic-booking-app .text-project,
body.clinic-booking-app .comment .comment-content p b,
body.clinic-booking-app .bg-project .text-back {
    color: #4DCCA1;
}
body.clinic-booking-app .text-back {
    text-shadow:
        -1px -1px #4DCCA1,
        1px -1px #4DCCA1,
        -1px 1px #4DCCA1,
        1px 1px #4DCCA1;
}
body.clinic-booking-app .comment .comment-content {
    border-bottom-color: #4DCCA1;
}
body.clinic-booking-app #solution,
body.clinic-booking-app #feature .feature-content p,
body.clinic-booking-app .content-section.content-right.style-corner figcaption.dark {
    color: #FFFFFF;
}
body.clinic-booking-app .text-project.dark {
    color: #4DCCA1;
}
@media (min-width: 1200px) {
    body.clinic-booking-app .content-section.content-right.style-corner figcaption.dark {
        color: #4DCCA1;
    }
}

body.clinic-booking-app #hero .hero-container {
    background-image: url('images/project/tky-bg.png');
}
body.clinic-booking-app #feature .feature1 {
    background-image: url('images/project/tky-feature1.svg')
}
body.clinic-booking-app #feature .feature2 {
    background-image: url('images/project/tky-feature2.svg')
}
body.clinic-booking-app #feature .feature3 {
    background-image: url('images/project/tky-feature3.svg')
}
body.clinic-booking-app #solution::after {
    background-image: url('images/project/tky-down.svg');
}
body.clinic-booking-app #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-prev-pj.svg');
}
body.clinic-booking-app #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-next-pj.svg');
}
body.clinic-booking-app .footer-cfa {
    background-image: url('images/project/tky-cta.png');
}
body.clinic-booking-app #hero .hero-wrapper {
    color: #FFFFFF;
}
body.clinic-booking-app #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}


/*------------------------------ Hey Trip Ride Booking App ------------------------------*/
body.ride-booking-app .bg-project,
body.ride-booking-app .content-section.content-right.style-corner::before,
body.ride-booking-app .content-section.content-right .section-one-image::before {
    background-color: #FFDD00;
}
body.ride-booking-app .text-project,
body.ride-booking-app .comment .comment-content p b,
body.ride-booking-app .bg-project .text-back {
    color: #FFDD00;
}
body.ride-booking-app .text-back {
    text-shadow:
        -1px -1px #FFDD00,
        1px -1px #FFDD00,
        -1px 1px #FFDD00,
        1px 1px #FFDD00;
}
p.tag-title.text-project.heytrip {
    color: #92DDEF;
}
body.ride-booking-app .comment .comment-content {
    border-bottom-color: #FFDD00;
}
body.ride-booking-app #solution,
body.ride-booking-app #feature .feature-content p,
body.ride-booking-app .content-section.content-right.style-corner figcaption.dark {
    color: #023047;
}
body.ride-booking-app .text-project.dark {
    color: #3BBFAD;
}
@media (min-width: 1200px) {
    body.ride-booking-app .content-section.content-right.style-corner figcaption.dark {
        color: #3BBFAD;
    }
}

body.ride-booking-app #hero .hero-container {
    background-image: url('images/project/heytrip-bg.png');
}
body.ride-booking-app #feature .feature1 {
    background-image: url('images/project/heytrip-feature1.svg')
}
body.ride-booking-app #feature .feature2 {
    background-image: url('images/project/heytrip-feature2.svg')
}
body.ride-booking-app #feature .feature3 {
    background-image: url('images/project/heytrip-feature3.svg')
}
body.ride-booking-app #solution::after {
    background-image: url('images/project/heytrip-down.svg');
}
body.ride-booking-app #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/heytrip-prev-pj.svg');
}
body.ride-booking-app #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/heytrip-next-pj.svg');
}
body.ride-booking-app .footer-cfa {
    background-image: url('images/project/heytrip-cta.png');
}
body.ride-booking-app #hero .hero-wrapper {
    color: #FFFFFF;
}
body.ride-booking-app #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}

/*------------------------------ Beauty Booking App ------------------------------*/
body.beauty-booking-app .bg-project,
body.beauty-booking-app .content-section.content-right.style-corner::before,
body.beauty-booking-app .content-section.content-right .section-one-image::before {
    background-color: #FCCAB1;
}
body.beauty-booking-app .text-project,
body.beauty-booking-app .comment .comment-content p b,
body.beauty-booking-app .bg-project .text-back {
    color: #FCCAB1;
}
body.beauty-booking-app .text-back {
    text-shadow:
        -1px -1px #FCCAB1,
        1px -1px #FCCAB1,
        -1px 1px #FCCAB1,
        1px 1px #FCCAB1;
}
body.beauty-booking-app .comment .comment-content {
    border-bottom-color: #FCCAB1;
}
body.beauty-booking-app #solution,
body.beauty-booking-app #feature .feature-content p,
body.beautye-booking-app .content-section.content-right.style-corner figcaption.dark {
    color: #023047;
}
body.beauty-booking-app .text-project.dark {
    color: #F9A07B;
}
@media (min-width: 1200px) {
    body.beauty-booking-app .content-section.content-right.style-corner figcaption.dark {
        color: #F9A07B;
    }
}

body.beauty-booking-app #hero .hero-container {
    background-image: url('images/project/sj-bg.png');
}
body.beauty-booking-app #feature .feature1 {
    background-image: url('images/project/sj-feature1.svg')
}
body.beauty-booking-app #feature .feature2 {
    background-image: url('images/project/sj-feature2.svg')
}
body.beauty-booking-app #feature .feature3 {
    background-image: url('images/project/sj-feature3.svg')
}
body.beauty-booking-app #solution::after {
    background-image: url('images/project/sj-down.svg');
}
body.beauty-booking-app #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/sj-prev-pj.svg');
}
body.beauty-booking-app #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/sj-next-pj.svg');
}
body.beauty-booking-app .footer-cfa {
    background-image: url('images/project/sj-cta.png');
}
body.beauty-booking-app #hero .hero-wrapper {
    color: #FFFFFF;
}
body.beauty-booking-app #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(131, 131, 131, 0.55);
}


/*------------------------------ Rental App ------------------------------*/
body.rental-app .bg-project,
body.rental-app .content-section.content-right.style-corner::before,
body.rental-app .content-section.content-right .section-one-image::before {
    background-color: #BF978B;
}
body.rental-app .text-project,
body.rental-app .comment .comment-content p b,
body.rental-app .bg-project .text-back {
    color: #BF978B;
}
body.rental-app .text-back {
    text-shadow:
        -1px -1px #BF978B,
        1px -1px #BF978B,
        -1px 1px #BF978B,
        1px 1px #BF978B;
}
body.rental-app .comment .comment-content {
    border-bottom-color: #BF978B;
}
body.rental-app #solution,
body.rental-app #feature .feature-content p,
body.rental-app .content-section.content-right.style-corner figcaption.dark {
    color: #FFFFFF;
}
body.rental-app .text-project.dark {
    color: #BF978B;
}
@media (min-width: 1200px) {
    body.rental-app .content-section.content-right.style-corner figcaption.dark {
        color: #BF978B;
    }
}

body.rental-app #hero .hero-container {
    background-image: url('images/project/mij-bg.png');
}
body.rental-app #feature .feature1 {
    background-image: url('images/project/mij-feature1.svg')
}
body.rental-app #feature .feature2 {
    background-image: url('images/project/mij-feature2.svg')
}
body.rental-app #feature .feature3 {
    background-image: url('images/project/mij-feature3.svg')
}
body.rental-app #solution::after {
    background-image: url('images/project/mij-down.svg');
}
body.rental-app #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/mij-prev-pj.svg');
}
body.rental-app #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/mij-next-pj.svg');
}
body.rental-app .footer-cfa {
    background-image: url('images/project/mij-cta.png');
}
body.rental-app #hero .hero-wrapper {
    color: #FFFFFF;
}
body.rental-app #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}

/*------------------------------ Zen Massage Booking App ------------------------------*/
body.massage-booking-app .bg-project,
body.massage-booking-app .content-section.content-right.style-corner::before,
body.massage-booking-app .content-section.content-right .section-one-image::before {
    background-color: #AE9ABB;
}
body.massage-booking-app .text-project,
body.massage-booking-app .comment .comment-content p b,
body.massage-booking-app .bg-project .text-back {
    color: #AE9ABB;
}
body.massage-booking-app .text-back {
    text-shadow:
        -1px -1px #AE9ABB,
        1px -1px #AE9ABB,
        -1px 1px #AE9ABB,
        1px 1px #AE9ABB;
}
body.massage-booking-app .comment .comment-content {
    border-bottom-color: #AE9ABB;
}
body.massage-booking-app #solution,
body.massage-booking-app .content-section.content-right.style-corner figcaption.dark {
    color: #FFFFFF;
}
body.massage-booking-app #feature .feature-content p{
     color:  white;
}
body.massage-booking-app .text-project.dark {
    color: #AE9ABB;
}
@media (min-width: 1200px) {
    body.massage-booking-app .content-section.content-right.style-corner figcaption.dark {
        color: #AE9ABB;
    }
}

body.massage-booking-app #hero .hero-container {
    background-image: url('images/project/zm-bg.png');
}
body.massage-booking-app #feature .feature1 {
    background-image: url('images/project/zm-feature1.svg')
}
body.massage-booking-app #feature .feature2 {
    background-image: url('images/project/zm-feature2.svg')
}
body.massage-booking-app #feature .feature3 {
    background-image: url('images/project/zm-feature3.svg')
}
body.massage-booking-app #solution::after {
    background-image: url('images/project/zm-down.svg');
}
body.massage-booking-app #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-prev-pj.svg');
}
body.massage-booking-app #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-next-pj.svg');
}
body.massage-booking-app .footer-cfa {
    background-image: url('images/project/zm-cta.png');
}
body.massage-booking-app #hero .hero-wrapper {
    color: #FFFFFF;
}
body.massage-booking-app #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}

/*------------------------------ Vtholic Booking App ------------------------------*/
body.luxury-e-commerce .bg-project,
body.luxury-e-commerce .content-section.content-right.style-corner::before,
body.luxury-e-commerce .content-section.content-right .section-one-image::before {
    background-color: #F0EBE5;
}
body.luxury-e-commerce .bg-project .text-back {
    color: #F0EBE5;
}
body.luxury-e-commerce .text-project,
body.luxury-e-commerce .comment .comment-content p b {
    color: #C58677;
}
body.luxury-e-commerce .text-back {
    text-shadow:
        -1px -1px #C58677,
        1px -1px #C58677,
        -1px 1px #C58677,
        1px 1px #C58677;
}
body.luxury-e-commerce.parent-project .bg-project .text-back {
    text-shadow:
        -1px -1px #C58677,
        1px -1px #C58677,
        -1px 1px #C58677,
        1px 1px #C58677;
}
body.luxury-e-commerce .comment .comment-content {
    border-bottom-color: #F0EBE5;
}
body.luxury-e-commerce #solution,
body.luxury-e-commerce #feature .feature-content p,
body.luxury-e-commerce .content-section.content-right.style-corner figcaption.dark {
    color:#023047;
}
body.luxury-e-commerce .text-project.dark {
    color: #C58677;
}
@media (min-width: 1200px) {
    body.luxury-e-commerce .content-section.content-right.style-corner figcaption.dark {
        color: #C58677;
    }
}

body.luxury-e-commerce #hero .hero-container {
    background-image: url('images/project/vhk-bg.png');
}
body.luxury-e-commerce #feature .feature1 {
    background-image: url('images/project/vhk-feature1.svg')
}
body.luxury-e-commerce #feature .feature2 {
    background-image: url('images/project/vhk-feature2.svg')
}
body.luxury-e-commerce #feature .feature3 {
    background-image: url('images/project/vhk-feature3.svg')
}
body.luxury-e-commerce #solution::after {
    background-image: url('images/project/vhk-down.svg');
}
body.luxury-e-commerce #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-prev-pj.svg');
}
body.luxury-e-commerce #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-next-pj.svg');
}
body.luxury-e-commerce .footer-cfa {
    background-image: url('images/project/vhk-cta.png');
}
body.luxury-e-commerce #hero .hero-wrapper {
    color: #FFFFFF;
}
body.luxury-e-commerce #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}


/*------------------------------ All Masters World Online Course Platform ------------------------------*/
body.all-masters-world .bg-project,
body.all-masters-world .content-section.content-right.style-corner::before,
body.all-masters-world .content-section.content-right .section-one-image::before {
    background-color: #C89F68;
}
body.all-masters-world .text-project,
body.all-masters-world .comment .comment-content p b,
body.all-masters-world .bg-project .text-back {
    color: #C89F68;
}

@media (min-width: 1200px) {
    body.all-masters-world #hero .project-image {
        margin-left: 46%;
    }
    body.all-masters-world #hero .hero-wrapper .hero-bg-overlay {
        width: 135%;
    }
}

body.all-masters-world .content-section .section-one-app-image figure figcaption {
    padding-right: 100px;
    padding-left: 100px;
}

body.all-masters-world .content-section.content-right.style-corner::before {
    height: 37%;
}

body.all-masters-world .text-back {
    text-shadow:
        -1px -1px #C89F68,
        1px -1px #C89F68,
        -1px 1px #C89F68,
        1px 1px #C89F68;
}
p.tag-title.text-project.amw {
    color: #C89F68;
}
body.all-masters-world .comment .comment-content {
    border-bottom-color: #C89F68;
}
body.all-masters-world #solution,
body.all-masters-world #feature .feature-content p,
body.all-masters-world .content-section.content-right.style-corner figcaption.dark {
    color: #023047;
}
body.all-masters-world .text-project.dark {
    color: #C89F68;
}
@media (min-width: 1200px) {
    body.all-masters-world .content-section.content-right.style-corner figcaption.dark {
        color: #C89F68;
    }
}

body.all-masters-world #hero .hero-container {
    background-image: url('images/project/amw-bg.png');
}
body.all-masters-world #feature .feature1 {
    background-image: url('images/project/amw-feature1.svg')
}
body.all-masters-world #feature .feature2 {
    background-image: url('images/project/amw-feature2.svg')
}
body.all-masters-world #feature .feature3 {
    background-image: url('images/project/amw-feature3.svg')
}
body.all-masters-world #solution::after {
    background-image: url('images/project/amw-down.svg');
}
body.all-masters-world #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-prev-pj.svg');
}
body.all-masters-world #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-next-pj.svg');
}
body.all-masters-world .footer-cfa {
    background-image: url('images/project/amw-cta.png');
}
body.all-masters-world #hero .hero-wrapper {
    color: #FFFFFF;
}
body.all-masters-world #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}


/*------------------------------ Pet Immigration ERP System ------------------------------*/
body.pet-immigration-erp .bg-project,
body.pet-immigration-erp .content-section.content-right.style-corner::before,
body.pet-immigration-erp .content-section.content-right .section-one-image::before {
    background-color: #F9CC78;
}
body.pet-immigration-erp .text-project,
body.pet-immigration-erp .comment .comment-content p b,
body.pet-immigration-erp .bg-project .text-back {
    color: #F9CC78;
}

@media (min-width: 1200px) {
    body.pet-immigration-erp #hero .project-image {
        margin-left: 46%;
    }
    body.pet-immigration-erp #hero .hero-wrapper .hero-bg-overlay {
        width: 135%;
    }
}

body.pet-immigration-erp .content-section .section-one-app-image figure figcaption {
    padding-right: 100px;
    padding-left: 100px;
}

body.pet-immigration-erp .content-section.content-right.style-corner::before {
    height: 38%;
}

body.pet-immigration-erp .text-back {
    text-shadow:
        -1px -1px #966139,
        1px -1px #966139,
        -1px 1px #966139,
        1px 1px #966139;
}
p.tag-title.text-project.petm {
    color: #966139;
}
body.pet-immigration-erp .comment .comment-content {
    border-bottom-color: #F9CC78;
}
body.pet-immigration-erp #solution,
body.pet-immigration-erp #feature .feature-content p,
body.pet-immigration-erp .content-section.content-right.style-corner figcaption.dark {
    color: #023047;
}
body.pet-immigration-erp .text-project.dark {
    color: #966139;
}
@media (min-width: 1200px) {
    body.pet-immigration-erp .content-section.content-right.style-corner figcaption.dark {
        color: #966139;
    }
}

body.pet-immigration-erp #hero .hero-container {
    background-image: url('images/project/petm-bg.png');
}
body.pet-immigration-erp #feature .feature1 {
    background-image: url('images/project/petm-feature1.svg')
}
body.pet-immigration-erp #feature .feature2 {
    background-image: url('images/project/petm-feature2.svg')
}
body.pet-immigration-erp #feature .feature3 {
    background-image: url('images/project/petm-feature3.svg')
}
body.pet-immigration-erp #solution::after {
    background-image: url('images/project/petm-down.svg');
}
body.pet-immigration-erp #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-prev-pj.svg');
}
body.pet-immigration-erp #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-next-pj.svg');
}
body.pet-immigration-erp .footer-cfa {
    background-image: url('images/project/petm-cta.png');
}
body.pet-immigration-erp #hero .hero-wrapper {
    color: #FFFFFF;
}
body.pet-immigration-erp #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}

/*------------------------------ Enterprise Consultant ERP System ------------------------------*/
body.enterprise-consultant-erp .bg-project,
body.enterprise-consultant-erp .content-section.content-right.style-corner::before,
body.enterprise-consultant-erp .content-section.content-right .section-one-image::before {
    background-color: #92DDEF;
}
body.enterprise-consultant-erp .text-project,
body.enterprise-consultant-erp .comment .comment-content p b,
body.enterprise-consultant-erp .bg-project .text-back {
    color: #92DDEF;
}

@media (min-width: 1200px) {
    body.enterprise-consultant-erp #hero .project-image {
        margin-left: 46%;
    }
    body.enterprise-consultant-erp #hero .hero-wrapper .hero-bg-overlay {
        width: 135%;
    }
}

body.enterprise-consultant-erp .content-section .section-one-app-image figure figcaption {
    padding-right: 100px;
    padding-left: 100px;
}

body.enterprise-consultant-erp .content-section.content-right.style-corner::before {
    height: 45%;
}

body.enterprise-consultant-erp .text-back {
    text-shadow:
        -1px -1px #92DDEF,
        1px -1px #92DDEF,
        -1px 1px #92DDEF,
        1px 1px #92DDEF;
}
p.tag-title.text-project.erp {
    color: #92DDEF;
}
body.enterprise-consultant-erp .comment .comment-content {
    border-bottom-color: #92DDEF;
}
body.enterprise-consultant-erp #solution,
body.enterprise-consultant-erp #feature .feature-content p,
body.enterprise-consultant-erp .content-section.content-right.style-corner figcaption.dark {
    color: #023047;
}
body.enterprise-consultant-erp .text-project.dark {
    color: #92DDEF;
}
@media (min-width: 1200px) {
    body.enterprise-consultant-erp .content-section.content-right.style-corner figcaption.dark {
        color: #92DDEF;
    }
}

body.enterprise-consultant-erp #hero .hero-container {
    background-image: url('images/project/101-bg.png');
}
body.enterprise-consultant-erp #feature .feature1 {
    background-image: url('images/project/101-feature1.svg')
}
body.enterprise-consultant-erp #feature .feature2 {
    background-image: url('images/project/101-feature2.svg')
}
body.enterprise-consultant-erp #feature .feature3 {
    background-image: url('images/project/101-feature3.svg')
}
body.enterprise-consultant-erp #solution::after {
    background-image: url('images/project/101-down.svg');
}
body.enterprise-consultant-erp #prev-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-prev-pj.svg');
}
body.enterprise-consultant-erp #next-project a {
    color: #FFFFFF;
    background-image: url('images/project/tky-next-pj.svg');
}
body.enterprise-consultant-erp .footer-cfa {
    background-image: url('images/project/101-cta.png');
}
body.enterprise-consultant-erp #hero .hero-wrapper {
    color: #FFFFFF;
}
body.enterprise-consultant-erp #hero .hero-wrapper .hero-bg-overlay {
    background-color: rgba(0, 0, 0, 0.55);
}


/*--------------------------------------------------------------
Google Workspace Page
--------------------------------------------------------------*/

/*------------------------------ hero ------------------------------*/
body.google-workspace #hero {
    background-image: url('images/gws/bg/gws-m.svg');
    position: relative;
}
body.google-workspace #hero .container {
    background-image: url('images/gws/gws-cover.png');
    padding-top: 40px;
    padding-bottom: 350px;
    background-size: 340px;
    background-position: center 93%;
}
body.google-workspace #hero .checklist {
    font-size: 14px;
}
body.google-workspace #hero .section-highlight {
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
}
body.google-workspace #hero .section-highlight .price {
    font-size: 30px;
}
@media (min-width: 768px) {
    body.google-workspace #hero {
        background-image: url('images/gws/bg/gws-p.svg');
    }
    body.google-workspace #hero .container {
        padding-bottom: 700px;
        background-size: 650px;
    }
    body.google-workspace #hero h1 {
        font-size: 38px;
    }
    body.google-workspace #hero .checklist {
        font-size: 24px;
    }
    body.google-workspace #hero .section-highlight {
        font-size: 28px;
        line-height: 58px;
    }
    body.google-workspace #hero .section-highlight .price {
        font-size: 50px;
    }
}
@media (min-width: 1200px) {
    body.google-workspace #hero {
        background-image: url('images/gws/bg/gws-d.svg');
    }
    body.google-workspace #hero .container {
        padding-top: 110px;
        padding-bottom: 410px;
        background-position: right 80%;
        background-size: 700px;
    }
    body.google-workspace #hero .container .content-wrapper {
        margin: 0;
    }
    body.google-workspace #hero h1 {
        font-size: 55px;
    }
    body.google-workspace #hero .checklist {
        margin-bottom: 50px;
    }
    body.google-workspace #hero .section-highlight {
        margin-bottom: 50px;
    }
}
@media (min-width: 1680px) {
    body.google-workspace #hero .container {
        background-position: right 70%;
        background-size: 800px;
    }
}

/*------------------------------ price-table ------------------------------*/
body.google-workspace #price-table {
    margin-top: 83px;
    margin-bottom: 40px;
}

body.google-workspace #price-table .section-title {
    margin-bottom: 20px;
}
body.google-workspace #price-table .section-title img {
    max-width: 100%;
    width: 270px;
}
body.google-workspace #price-table .section-highlight {
    text-align: center;
    margin-bottom: 30px;
}

body.google-workspace #price-table .table-wrapper {
    padding: 30px 25px;
    border: 1px solid #C4C4C4;
    border-radius: 10px;
    margin-bottom: 40px;
    position: relative;
}
body.google-workspace #price-table .table-wrapper .table-price {
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 10px;
}
body.google-workspace #price-table .table-wrapper .table-description {
    font-size: 14px;
    font-weight: 700;
    color: #C4C4C4;
    margin-bottom: 15px;
}
body.google-workspace #price-table .table-wrapper .table-cta {
    margin-bottom: 30px;
}
body.google-workspace #price-table .table-wrapper .btn-cta {
    padding: 12px 25px;
    font-size: 14px;
}

@media (min-width: 768px) {
    body.google-workspace #price-table {
        margin-top: 120px;
        margin-bottom: 55px;
    }

    body.google-workspace #price-table .section-title {
        margin-bottom: 40px;
    }
    body.google-workspace #price-table .section-title img {
        width: 520px;
    }

    body.google-workspace #price-table .section-highlight {
        margin-bottom: 70px;
    }
    body.google-workspace #price-table .table-wrapper {
        padding: 40px 40px;
        margin-bottom: 60px;
    }
    body.google-workspace #price-table .table-wrapper .table-title {
        font-size: 25px;
        line-height: 35px;
    }
    body.google-workspace #price-table .table-wrapper .table-price {
        font-size: 50px;
        font-weight: 700;
        line-height: 1.1em;
    }
    body.google-workspace #price-table .table-wrapper .table-description {
        font-size: 20px;
        margin-bottom: 30px;
    }
    body.google-workspace #price-table .table-wrapper .btn-cta {
        padding: 20px 55px;
        font-size: 20px;
    }
    body.google-workspace #price-table .table-wrapper .checklist {
        font-size: 20px;
    }
}

@media (min-width: 1200px) {
    body.google-workspace #price-table .container {
        max-width: 1440px;
    }

    body.google-workspace #price-table {
        margin-top: 155px;
        margin-bottom: 120px;
    }

    body.google-workspace #price-table .section-title {
        margin-bottom: 36px;
    }
    body.google-workspace #price-table .section-title img {
        width: 660px;
    }
    body.google-workspace #price-table .section-highlight {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 155px;
        max-width: 870px;
    }

    body.google-workspace #price-table .table-wrapper {
        padding: 70px 32px;
        margin-bottom: 0;
        border-width: 2px;
        border-radius: 20px;
        height: 100%;
    }
    body.google-workspace #price-table .table-wrapper .table-title {
        text-align: center;
        margin-bottom: 35px;
    }
    body.google-workspace #price-table .table-wrapper .table-price {
        text-align: center;
    }
    body.google-workspace #price-table .table-wrapper .table-description {
        text-align: center;
        margin-bottom: 40px;
    }
    body.google-workspace #price-table .table-wrapper .table-description span {
        display: block;
    }
    body.google-workspace #price-table .table-wrapper .table-cta {
        margin-bottom: 70px;
        text-align: center;
    }
    body.google-workspace #price-table .table-wrapper .btn-cta {
        padding: 20px 55px;
        font-size: 20px;
    }
    body.google-workspace #price-table .table-wrapper .checklist {
        font-size: 20px;
    }
}

body.google-workspace #price-table .table-wrapper.green .table-title,
body.google-workspace #price-table .table-wrapper.green .table-price,
body.google-workspace #price-table .table-wrapper.green .btn-cta,
body.google-workspace #price-table .table-wrapper.green ul.tick li::before {
    color: #00AA47;
}
body.google-workspace #price-table .table-wrapper.green .btn-cta {
    border-color: #00AA47;
}

body.google-workspace #price-table .table-wrapper.orange .table-title,
body.google-workspace #price-table .table-wrapper.orange .table-price,
body.google-workspace #price-table .table-wrapper.orange .btn-cta,
body.google-workspace #price-table .table-wrapper.orange ul.tick li::before {
    color: #FF841C;
}
body.google-workspace #price-table .table-wrapper.orange .btn-cta {
    border-color: #FF841C;
}

body.google-workspace #price-table .table-wrapper.blue .table-title,
body.google-workspace #price-table .table-wrapper.blue .table-price,
body.google-workspace #price-table .table-wrapper.blue .btn-cta,
body.google-workspace #price-table .table-wrapper.blue ul.tick li::before {
    color: #2386FF;
}
body.google-workspace #price-table .table-wrapper.blue .btn-cta {
    border-color: #2386FF;
}

body.google-workspace #price-table .table-wrapper.popular {
    border-top-left-radius: 0;
    margin-top: 40px;
    border-width: 4px;
}
body.google-workspace #price-table .table-wrapper.popular .popular-label {
    position: absolute;
    border-radius: 6px 6px 0px 0px;

    left: -4px;
    top: -40px;
    height: 40px;
    line-height: 40px;
    min-width: 184px;
    padding: 0 15px 0;

    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

body.google-workspace #price-table .table-wrapper.orange.popular .popular-label {
    background-color: #FF841C;
    color: #FFF;
}
body.google-workspace #price-table .table-wrapper.orange.popular {
    border-color: #FF841C;
}
@media (min-width: 768px) {
    body.google-workspace #price-table .table-wrapper.popular {
        margin-top: 55px;
        border-width: 7px;
    }
    body.google-workspace #price-table .table-wrapper.popular .popular-label {
        position: absolute;
        border-radius: 6px 6px 0px 0px;

        left: -7px;
        top: -55px;
        height: 55px;
        line-height: 55px;
        min-width: 233px;
        padding: 0 20px 0;

        font-size: 25px;
    }
    body.google-workspace #price-table .table-wrapper.orange.popular {
        box-shadow: 0px 4px 20px 0px rgba(255, 147, 28, 0.25);
    }
}
@media (min-width: 1200px) {
    body.google-workspace #price-table .table-wrapper.popular {
        margin-top: 0;
    }
}

/*------------------------------ application ------------------------------*/
body.google-workspace #application {
    background: #F9F9F9;
    padding-top: 70px;
    padding-bottom: 70px;
}
body.google-workspace #application .section-title {
    text-transform: none;
    margin-bottom: 50px;
}
body.google-workspace #application .item-circle .item-title {
    color: #FF841C;
    font-weight: bold;
    margin-top: 20px;
    min-height: 55px;
    margin-bottom: 0;
}
body.google-workspace #application .hidden {
    display: none;
}
body.google-workspace #application .more-btn {
    border: 1px solid #FF841C;
    color: #FF841C;
    padding: 12px 38px;
    margin: 5px auto 0px;
}

@media (min-width: 768px) {
    body.google-workspace #application {
        padding-top: 80px;
        padding-bottom: 70px;
    }
    body.google-workspace #application .section-title {
        margin-bottom: 80px;
    }
    body.google-workspace #application .item-circle .item-title {
        min-height: 95px;
    }
}

@media (min-width: 1200px) {
    body.google-workspace #application .container {
        max-width: 1440px;
    }
    body.google-workspace #application {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    body.google-workspace #application .section-title {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*------------------------------ solution ------------------------------*/
body.google-workspace #solution {
    padding-top: 70px;
}
body.google-workspace #solution .container {
    position: relative;
}
body.google-workspace #solution .section-title {
    margin-bottom: 26px;
}
body.google-workspace #solution .section-highlight {
    margin-bottom: 70px;
    text-align: center;
    padding: 0 20px;
}

body.google-workspace #solution .dual-wrapper {
    margin-bottom: 45px;
}
body.google-workspace #solution .dual-wrapper .item-title {
    margin-bottom: 25px;
}
body.google-workspace #solution .dual-wrapper .item-desc {
    margin-bottom: 25px;
}
body.google-workspace #solution .dual-wrapper .btn-cta {
    background-color: #FF841C;
    color: #FFFFFF;
    padding: 10px 28px;
}

@media (min-width: 768px) {
    body.google-workspace #solution {
        padding-top: 120px;
    }
    body.google-workspace #solution .section-title {
        margin-bottom: 40px;
    }
    body.google-workspace #solution .section-highlight {
        margin-bottom: 120px;
    }

    body.google-workspace #solution .dual-wrapper {
        margin-bottom: 150px;
    }
    body.google-workspace #solution .dual-wrapper .item-title {
        margin-bottom: 40px;
        text-align: center;
    }
    body.google-workspace #solution .dual-wrapper .item-desc {
        margin-bottom: 40px;
        text-align: center;
    }
    body.google-workspace #solution .dual-wrapper .btn-cta {
        padding: 20px 65px;
    }
}

@media (min-width: 1200px) {
    body.google-workspace #solution {
        padding-top: 220px;
        padding-bottom: 95px;
    }
    body.google-workspace #solution .section-title {
        margin-bottom: 50px;
        text-align: left;
    }
    body.google-workspace #solution .section-title::after {
        content: "";
        display: inline-block;
        width: 382px;
        height: 427px;
        background-image: url('images/gws/bg/bg-circle-1.svg');
        background-repeat: no-repeat;
        position: absolute;
        top: -123px;
        left: -330px;
        z-index: -1;
    }
    body.google-workspace #solution .container::after {
        content: "";
        display: inline-block;
        width: 500px;
        height: 243px;
        background-image: url('images/gws/bg/bg-circle-2.svg');
        background-repeat: no-repeat;
        position: absolute;
        right: -230px;
        bottom: -282px;
        z-index: -1;
    }
    body.google-workspace #solution .section-highlight {
        padding: 0;
        margin-bottom: 136px;
        text-align: left;
        max-width: 936px;
    }

    body.google-workspace #solution .dual-wrapper {
        margin-bottom: 200px;
    }
    body.google-workspace #solution .dual-wrapper .dual-content {
        max-width: 600px;
        margin-left: auto;
        margin-right: 0;
        padding-left: 30px;
        padding-right: 0;
    }
    body.google-workspace #solution .dual-wrapper .order-lg-first .dual-content {
        margin-left: 0;
        margin-right: auto;
        padding-left: 0;
        padding-right: 30px;
    }
    body.google-workspace #solution .dual-wrapper .item-title {
        margin-bottom: 50px;
        text-align: left;
    }
    body.google-workspace #solution .dual-wrapper .item-desc {
        margin-bottom: 50px;
        text-align: left;
    }
    body.google-workspace #solution .dual-wrapper .btn-cta {
        padding: 14px 53px;
    }
}

@media (min-width: 1680px) {
    body.google-workspace #solution .container {
        max-width: 1440px;
    }
}


/*--------------------------------------------------------------
General Page
--------------------------------------------------------------*/

/*------------------------------ page Form ------------------------------*/
body.parent-form #content {
    height: 90%;
    height: calc(100vh - 60px);
    overflow: hidden;
}
body.parent-form iframe {
    border: 0;
    height: 100%;
    width: 100%;
}

@media (min-width: 1200px) {
    body.parent-form #content {
        height: 95%;
        height: calc(100vh - 75px);
    }
}


/*------------------------------ 404 Not Found ------------------------------*/
#hero-404 .hero-container {
    background-image: url('images/404-mobile-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}
#hero-404 .img-404 {
    padding-top: 45%;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
#hero-404 .img-404 img {
    width: 100%;
    margin-top: -10%;
}
#hero-404 .desc-404 {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin-bottom: 110px;
}
#hero-404 .more-btn {
    margin-bottom: 110px;
}
#content-404 h3 {
    font-size: 18px;
    letter-spacing: 0.15em;
    color: #FF931C;
    margin-bottom: 14px;
}
#content-404 p {
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #FF931C;
    margin-bottom: 5px;
}
#content-404 .container {
    padding: 33px 40px;
}
#content-404 .bg-orange {
    background: #FF841C;
}
#content-404 a {
    margin-bottom: 64px;
    margin-top: 28px;
}
@media (min-width: 768px) {
    #hero-404 .img-404 {
        padding-top: unset;
    }
    #hero-404 .desc-404 {
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 92px;
    }
    #hero-404 .more-btn {
        margin-bottom: 242px;
    }
    #content-404 .about-us {
        margin-top: 40px;
    }
    #content-404 h3 {
        font-size: 38px;
        line-height: 52px;
        margin-bottom: 21px;
    }
    #content-404 a {
        margin-top: 51px;
    }
    #content-404 p {
        font-size: 20px;
        line-height: 27px;
    }
}
@media (min-width: 1200px) {
    #hero-404 .hero-container {
        background-image: url('images/404-desktop-bg.png');
    }
    #hero-404 .desc-404 {
        font-size: 30px;
        line-height: 41px;
        margin-bottom: 78px;
    }
    #hero-404 .more-btn {
        margin-bottom: 307px;
    }
    #content-404 .container {
        padding: 32px 0px;
    }
    #content-404 h3 {
        font-size: 48px;
        line-height: 65px;
        margin-bottom: 27px;
    }
    #content-404 p {
        font-size: 24px;
        line-height: 33px;
        margin-bottom: 55px;
    }
    #content-404 .container-wrapper {
        margin: 50px;
    }
}

/*--------------------------------------------------------------
TVP Page
--------------------------------------------------------------*/

/*------------------------------ hero ------------------------------*/
body.funding h1 {
    font-size: 24px;
    letter-spacing: 0.15rem;
}
body.funding h2 {
    font-size: 14px;
    letter-spacing: 0.15rem;
    text-align: left;
}
body.funding h3 {
    font-size: 24px;
    letter-spacing: 0.15rem;
    color: #023047;
    font-weight: bold;
    text-align: center;
}
body.funding h4 {
    font-size: 24px;
    letter-spacing: 0.15rem;
    color: #FF841C;
    font-weight: bold;
    text-align: left;
    margin-bottom: 30px;
}
body.funding .background.hero {
    margin-bottom: 48px;
    background: linear-gradient(to right, #FF901C, #FF841C);
    position: relative;
}
body.funding .hero-wrapper {
    position: relative;
    max-width: 1660px;
    margin: auto;
}
body.funding .background.hero::after {
    content: " ";
    background-image: url('images/TVP/hero-arc-dt.png');
    position: absolute;
    width: 100%;
    bottom: -48px;
    background-repeat: no-repeat;
    height: 50px;
    background-position: bottom;
}
body.funding .hero-wrapper .content-wrapper {
    padding: 66px 15px;
    padding-bottom: 0;
    margin-left: 0;
}
body.funding .hero-wrapper .content-wrapper .more-btn {
    max-width: 50%;
    font-size: 14px;
    min-width: 148px;
}
/* body.funding .hero-wrapper .cover img {
    width: 110%;
    height: auto;
    max-width: 1000px
} */
body.funding .hero-wrapper .cover {
    background-image: url(images/tvp-cover-m.png);
    background-size: 110%;
    background-repeat: no-repeat;
    position: relative;
    padding-bottom: 110%;
    background-position-x: -30px;
    z-index: 5;
    width: 100%;
}
body.funding .bg-container .bg-rt-1 {
    /* width: 208px; */
    width: 50%;
    height: 100%;
    top: -40px;
    right: 0;
    background-size: cover;
    z-index: 10;
}
body.funding .bg-container .bg-lb-1 {
    /* width: 171px; */
    width: 40%;
    height: 358px;
    bottom: -40px;
    left: 0;
    z-index: 10;
}
body.funding .bg-container .bg-lt-1 {
    width: 26px;
    top: 17px;
    left: 40px;
}
body.funding .bg-container .bg-rt-2 {
    width: 28px;
    top: 103px;
    right: 29px;
    z-index: 15;
}
body.funding .bg-container .bg-mm-1 {
    width: 37px;
    top: 217px;
    right: 136px;
}
body.funding .bg-container .bg-lm-1 {
    width: 25px;
    top: 80%;
    left: 40px;
    z-index: 15;
}
body.funding .bg-container .bg-mb-1 {
    width: 34px;
    bottom: 0px;
    left: 160px;
}
body.funding .bg-title::before {
    content: " ";
    background-position: bottom;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    z-index: -5;
    background-size: contain;
}
body.funding .bg-title-1::before {
    background-image: url(images/tvp/title-bg-1.svg);
    width: 183px;
    height: 147px;
    top: -125px;
    right: 0;
}
body.funding .bg-title-2::before {
    background-image: url(images/tvp/title-bg-2.svg);
    width: 187px;
    height: 121px;
    top: -75px;
    right: 0;
}
body.funding .bg-title-3::before {
    background-image: url(images/tvp/title-bg-3.svg);
    width: 375px;
    height: 181px;
    top: -125px;
    left: -30px;
}
body.funding .tvp-intro .guideline {
    padding-top: 125px;
}
body.funding .tvp-intro .section-desc {
    margin-top: 26px;
}
body.funding .tvp-intro .section-image,
body.funding .tvp-intro .arrow {
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
    line-height: 266px;
}
body.funding .tvp-intro .pie-chart {
    background-image: url("./images/tvp/pie-chart.png");
    height: 266px;
}
body.funding .tvp-intro .d-inline {
    position: absolute;
    font-size: 14px;
}
body.funding .tvp-intro .government .d-inline {
    left: 0;
}
body.funding .tvp-intro .client .d-inline {
    right: 0;
}
body.funding .tvp-intro .help-wrapper {
    padding-top: 135px;
}
body.funding .tvp-intro .help-image {
    background-image: url('./images/TVP/help-image.png');
    height: 419px;
}
body.funding section.tvp-flow {
    margin-top: 151px;
    position: relative;
}
body.funding .tvp-flow .step-ball {
    width: 39px;
    height: 39px;
    background-color: #FE7E34;
    border-radius: 50%;
    position: absolute;
    top: 179px;
    left: -19.5px;
    text-align: center;
    line-height: 39px;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    z-index: 10;
}
body.funding section.tvp-flow .flow-container {
    position: relative;
}
marquee .section-title {
    margin-bottom: 30px;
}
body.funding .tvp-flow .flow-wrapper {
    position: relative;
    padding-top: 30px;
    border-left: 3px solid #FF931C;
    padding-bottom: 30px;
}
body.funding .tvp-flow .flow-wrapper::after {
    content: " ";
    position: absolute;
    width: 100%;
    top: 35px;
    background-repeat: no-repeat;
    height: 248px;
    background-position: center;
    background-size: contain;
    z-index: -5;
    opacity: 0.25;
}
body.funding .tvp-flow .flow-wrapper::before {
    content: " ";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FE7E34;
    position: absolute;
    top: 189px;
    left: -11px;
}
body.funding .tvp-flow .step-desc {
    padding-top: 159px;
    position: relative;
}
body.funding .tvp-flow .flow-wrapper:last-child {
    padding-bottom: 100px;
}
body.funding .tvp-flow .step-1::after {
    background-image: url('images/TVP/step-1.png');
}
body.funding .tvp-flow .step-2::after {
    background-image: url('images/TVP/step-2.png');
}
body.funding .tvp-flow .step-3::after {
    background-image: url('images/TVP/step-3.png');
}
body.funding .tvp-flow .step-4::after {
    background-image: url('images/TVP/step-4.png');
}
body.funding .tvp-flow .step-5::after {
    background-image: url('images/TVP/step-5.png');
}
body.funding .tvp-flow .step-6::after {
    background-image: url('images/TVP/step-6.png');
}
body.funding .tvp-flow .flow-wrapper .sub-list {
    list-style-type: disc;
}
body.funding .tvp-flow .flow-wrapper li {
    font-size: 12px;
}
body.funding .tvp-flow .scroll-down {
    width: 100%;
    height: 48px;
    position: relative;
}
body.funding .tvp-flow a.down-btn {
    background-image: url("images/tvp/scroll-down.svg");
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: -7px;
}
body.funding .tvp-apply {
    padding-top: 135px;
    padding-bottom: 137px;
}
body.funding .tvp-apply .slogan {
    margin-bottom: 60px;
}
body.funding .tvp-apply .btn {
    min-width: 142px;
    max-width: 352px;
}
body.funding .tvp-apply .apply-btn {
    display: block;
    margin: auto;
    padding: 10px;
    background-color: #FF931C;
    color: #ffffff;
    border-radius: 20px;
    width: 40%;
}
body.funding .contact-us {
    background-color: #FF841C;
    position: relative;
    padding-bottom: 41px;
    padding-top: 40px;
}
body.funding .contact-us::before {
    content: "";
    background-image: url("images/tvp/contact-us-top-arc.png");
    background-repeat: no-repeat;
    position: absolute;
    top: -47px;
    width: 100%;
    height: 50px;
    background-size: cover;
    background-position: center;
}
body.funding .contact-us .title-wrapper {
    margin-bottom: 20px;
}
body.funding .contact-us h3.slogan {
    font-size: 18px;
    color: #ffffff;
    line-height: unset;
}
body.funding .contact-us .form-title {
    font-size: 16px;
    color: #ffffff;
    text-align: center;
}
body.funding .contact-us .form-control {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-color: #ffffff;
    background-color: transparent;
}
body.funding .contact-us .input-box {
    height: 40px;
}
body.funding .contact-us .form-control::placeholder {
    color: #ffffff;
}
body.funding .contact-us .btn-wrapper {
    text-align: center;
    margin-top: 48px;
}
body.funding .contact-us .btn-wrapper .login-btn {
    width: 40%;
    background-color: #ffffff;
    border-color: #ffffff;
    color: #FF931C;
    padding: 10px;
    border-radius: 50px;
}
@media (min-width: 576px) {
    body.funding .tvp-intro .arrow-left {
        right: 30px;
        width: 90%;
    }
    body.funding .tvp-intro .section-image {
        width: 60%;
        margin: auto;
    }
}
@media (min-width: 768px) {
    body.funding h1 {
        font-size: 44px;
    }
    body.funding h2 {
        font-size: 20px;
        line-height: auto;
    }
    body.funding h3 {
        font-size: 38px;
    }
    body.funding h4 {
        font-size: 30px;
    }
    body.funding .hero-wrapper .cover {
        background-position-x: unset;
        padding-bottom: 60%;
        max-width: 1000px;
        margin-top: 132px;
        z-index: 15;
    }
    body.funding .hero .content-wrapper .more-btn  {
        min-width: 236px;
    }
    body.funding .hero-wrapper .content-wrapper {
        align-self: center;
        padding-top: unset;
        margin-left: 90px;
    }
    body.funding  .bg-container .bg-lb-1 {
        width: 171px;
        bottom: 25%;
        left: -100px;
        background-size: 100%;
        background-position: right;
    }
    body.funding  .bg-container .bg-lt-2 {
        width: 53px;
        top: 5%;
        left: 59px;
    }
    body.funding  .bg-container .bg-rt-2 {
        width: 40px;
        top: 5%;
        right: 30%;
    }
    body.funding  .bg-container .bg-lt-1 {
        width: 38px;
        top: 40%;
        left: 45%;
    }
    body.funding  .bg-container .bg-mm-1 {
        width: 51px;
        top: 75%;
        right: 60%;
    }
    body.funding  .bg-container .bg-mb-1 {
        width: 38px;
        bottom: 0px;
        left: unset;
        right: 30%;
    }
    span.bg-c6.d-none.d-md-block.bg-mt-1 {
        width: 60px;
        top: 45px;
        left: 40%;
        transform: rotate(200deg);
    }
    span.bg-c6.d-none.d-md-block.bg-mb-2 {
        width: 100px;
        bottom: 10px;
        left: 25%;
        transform: rotate(270deg);
    }
    body.funding .tvp-intro .guideline .section-desc {
        max-width: 800px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    body.funding .bg-title-1::before {
        top: -110px;
        left: 150px;
    }
    body.funding .tvp-flow .step-desc {
        padding-top: 76px;
        align-self: center;
    }
    body.funding .tvp-flow .image-wrapper {
        padding-top: 76px;
        position: relative;
    }
    img.step-image {
        display: block;
        margin: auto;
    }
    body.funding .tvp-flow .flow-wrapper ol li {
        font-size: 16px;
    }
    body.funding .contact-us {
        padding-top: 44px;
        padding-bottom: 121px;
    }
    body.funding .contact-us::before {
        top: -140px;
        height: 150px;
    }
    body.funding .bg-title-3::before {
        left: 25%;
    }
    body.funding .contact-us input {
        height: 55px;
    }
    body.funding .contact-us textarea {
        height: 168px;
    }
}
@media (min-width: 992px) {
    body.funding .hero-wrapper .content-wrapper {
        margin-left: 180px;
    }
    body.funding  .bg-container .bg-rt-1 {
        width: 40%;
    }
    body.funding .tvp-intro .pie-chart {
        background-image: url("./images/tvp/pie-chart-dt.png");
        height: 637px;
        font-size: 35px;
        line-height: 637px;
        width: 80%;
    }
    body.funding .tvp-intro .d-inline {
        font-size: 24px;
    }
    body.funding .tvp-intro .government .d-inline {
        left: 0;
    }
    body.funding .tvp-intro .client .d-inline {
        right: 0;
    }
    body.funding .tvp-intro .section-image {
        width: 50%;
        margin: auto;
    }
    body.funding .help-wrapper  {
        text-align: left;
        align-self: center;
        width: 50%;
    }
    body.funding .help-wrapper .section-title {
        text-align: left;
    }
    body.funding .tvp-intro .section-desc {
        text-align: left;
    }
    body.funding .tvp-intro .help-image {
        height: 516px;
        background-position: left;
        margin-right: 15px;
    }
    body.funding .tvp-flow .flow-container {
        max-width: 960px;
    }
    body.funding .tvp-flow .flow-wrapper::after {
        display: none;
    }
    body.funding .tvp-flow .flow-wrapper {
        border-left: unset;
        padding-top: 30px;
        padding-bottom: 60px;
        position: relative;
    }
    body.funding .tvp-flow .flow-wrapper.step-1 {
        padding-top: 141px;
    }
    body.funding .tvp-flow .step-desc {
        padding-top: unset;
    }
    body.funding .tvp-flow .image-wrapper {
        padding-top: unset;
        align-self: center;
    }
    body.funding .tvp-flow .flow-wrapper::before {
        content: " ";
        width: calc(50% - 15px);
        height: 100%;
        border-right: 3px solid #FF931C;
        background-color: unset;
        border-radius: unset;
        top: 0;
        left: unset;
    }
    /* body.funding .tvp-flow .image-wrapper.left-border,
    body.funding .tvp-flow .step-desc.left-border{
        border-left: 3px solid #FF931C;
    }
    body.funding .tvp-flow .flow-wrapper::before {
        display: none;
    } */
    body.funding .tvp-flow .image-wrapper.left-border::after,
    body.funding .tvp-flow .step-desc.left-border::after {
        content: " ";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #FE7E34;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-11px, 30px);
    }
    img.step-image {
        max-width: 300px;
    }
    body.funding h3 {
        margin-bottom: 25px;
    }
    body.funding .tvp-flow .flow-desc {
        max-width: 80%;
    }
    body.funding .tvp-flow .step-ball {
        width: 76px;
        height: 76px;
        top: calc(50% + 38px);
        left: 50%;
        left: calc(50% - 38px);
        line-height: 76px;
        color: #ffffff;
        font-size: 40px;
    }
    body.funding .tvp-flow .flow-wrapper li {
        font-size: 20px;
    }
    body.funding .tvp-flow .flow-desc.right-desc {
        padding-left: 20%;
        max-width: unset;
    }
    body.funding .tvp-flow .left-title {
        max-width: 80%;
    }
    body.funding .tvp-flow .section-title.right-title {
        padding-left: 15%;
    }
    body.funding .tvp-flow a.down-btn {
        left: calc(50% - 24px);
    }
    body.funding .tvp-apply .slogan {
        margin-bottom: 80px;
    }
    body.funding .tvp-apply .apply-btn {
        padding: 20px;
        border-radius: 60px;
        max-width: 352px;
        font-size: 24px;
    }
    body.funding .tvp-flow .bg-container .bg-flow-2 {
        width: 136px;
        height: 136px;
        top: -68px;
        right: -370px;
    }
    body.funding .tvp-flow .bg-container .bg-flow-2-btm {
        width: 61px;
        height: 61px;
        bottom: 0;
        left: -202px;
    }
    body.funding .tvp-flow .bg-container .bg-title {
        width: 106px;
        height: 106px;
        top: 32px;
        left: -355px;
    }
    body.funding .tvp-flow .bg-container .bg-flow-5 {
        width: 136px;
        height: 136px;
        top: -106px;
        left: -272px;
    }
    body.funding .tvp-flow .bg-container .bg-flow-6 {
        width: 61px;
        height: 61px;
        top: 0px;
        right: -309px;
    }
    body.funding .tvp-apply {
        padding-bottom: 279px;
    }
}
@media (min-width: 1200px) {
    body.funding h1 {
        font-size: 64px;
    }
    body.funding h2 {
        font-size: 28px;
    }
    body.funding h3 {
        font-size: 48px;
    }
    body.funding h4 {
        font-size: 36px;
    }
    body.funding .hero-wrapper .cover {
        background-position-x: 171px;
        background-size: 100%;
    }
    body.funding .background.hero::after {
        background-size: cover;
        bottom: -100px;
        height: 110px;
    }
    body.funding .bg-container .bg-lb-1 {
        /* left: -50px; */
        height: 612px;
        background-size: 130%;
    }
    body.funding .bg-container .bg-lt-2 {
        width: 83px;
        /* top: 71px;
        left: 179px; */
    }
    body.funding .bg-container .bg-lt-1 {
        width: 58px;
        /* top: 339px;
        left: 898px; */
    }
    body.funding .bg-container .bg-rt-2 {
        width: 60px;
        /* top: 51px;
        right: 200px; */
    }
    span.bg-c6.d-none.d-md-block.bg-mt-1 {
        width: 109px;
        /* top: 59px; */
    }
    body.funding .bg-container .bg-mm-1 {
        width: 71px;
        /* top: 698px;
        right: 1060px; */
    }
    body.funding .bg-container .bg-lm-1 {
        width: 31px;
        /* top: 907px;
        left: 100px; */
    }
    body.funding .bg-container .bg-mb-1 {
        width: 58px;
        /* bottom: 0px;
        right: 359px; */
        left: unset;
    }
    span.bg-c6.d-none.d-md-block.bg-mb-2 {
        width: 143px;
        /* left: 300px; */
    }
    body.funding .tvp-intro .pie-chart {
        width: 70%;
    }
    body.funding .tvp-intro .guideline {
        padding-top: 230px;
    }
    body.funding .bg-title-1::before {
        left: 300px;
    }
    body.funding .tvp-flow .bg-title-1::before {
        top: -100px;
        left: calc(50% - 90px);
    }
    body.funding .bg-title-2::before {
        width: 647px;
        height: 422px;
        top: -322px;
        left: 0;
        background-size: 70%;
    }
    body.funding .bg-title-3::before {
        width: 805px;
        height: 386px;
        top: -290px;
        left: 300px;
        background-size: 80%;
    }
    body.funding .help-wrapper .section-title {
        margin-bottom: 30px;
    }

    body.funding .tvp-flow .flow-wrapper ol li,
    body.funding .tvp-flow .flow-wrapper p {
        font-size: 20px;
    }
    body.funding .tvp-flow .flow-container::after {
        left: 50%;
    }
    body.funding .contact-us .title-wrapper {
        margin-bottom: 66px;
    }
    body.funding .contact-us h3.slogan {
        font-size: 36px;
    }
    body.funding .contact-us .form-title {
        font-size: 30px;
        margin-bottom: 52px;
    }
    body.funding .contact-us .input-box {
        height: 55px;
    }
    body.funding .contact-us .btn-wrapper .login-btn {
        width: 30%;
        font-size: 24px;
    }
    body.funding .contact-us .form-wrapper {
        position: relative;
    }
    body.funding .contact-us .bg-container .bg-lt-1 {
        width: 43px;
        height: 43px;
        top: -43px;
        left: -181px;
    }
    body.funding .contact-us .bg-container .bg-lt-2 {
        width: 397px;
        height: 397px;
        top: 121px;
        left: -502px;
    }
    body.funding .contact-us .bg-container .bg-lt-3 {
        width: 397px;
        height: 397px;
        top: 173px;
        left: -502px;
    }
    body.funding .contact-us .bg-container .bg-rt-1 {
        width: 140px;
        height: 140px;
        top: 412px;
        right: -420px;
    }
}
/*--------------------------------------------------------------
Blog Page
--------------------------------------------------------------*/

/*------------------------------ hero ------------------------------*/
body.single-post .content-container > * {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: auto;
}

body.single-post h1 {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.15rem;
    color: #ffffff;
}
body.single-post h2 {
    font-size: 14px;
    letter-spacing: 0.15rem;
    color: #ffffff;
    text-align: left;
    line-height: normal;
    text-align: left;
}
body.single-post td {
    padding: 10px;
}
body.single-post .content-container h2 {
    font-size: 24px;
    letter-spacing: 0.15rem;
    color: #023047;
    font-weight: bold;
    margin-bottom: 35px;
    text-align: left;
}
body.single-post .content-container h3 {
    font-size: 18px;
    letter-spacing: 0.15rem;
    line-height: 25px;
    color: #FF931C;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 24px;
}
body.single-post .next-container h2 {
    font-size: 36px;
    letter-spacing: 0.15rem;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 32px;
    text-align: center;
}
body.single-post .next-container h3 {
    font-size: 20px;
    letter-spacing: 0.15rem;
    color: #ffffff;
    margin-bottom: 15px;
    font-weight: lighter;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
body.single-post .next-container h4 {
    font-size: 20px;
    letter-spacing: 0.15rem;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 18px;
}
body.single-post .content-container h2::before {
    content: " ";
    background-image: url(images/article/h3-before.png);
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: -65px;
    width: 100%;
    height: 122px;
    background-repeat: no-repeat;
    z-index: -5;
}
body.single-post .content-container p {
    font-size: 14px;
    letter-spacing: 0.15rem;
    color: #023047;
    text-align: left;
    line-height: 25px;
}
body.single-post .hero-container {
    position: relative;
    height: 628px;
    width: 100%;
}
body.single-post .hero-container .post-bg-image {
    position: absolute;
    top: 0;
    z-index: -1;
    height: 100%;
    width: auto;
    overflow: hidden;
}
body.single-post .hero-container .post-bg-image img {
    width: auto;
    height: 100%;
}
body.single-post #hero {
    position: relative;
}
body.single-post #hero::before {
    content: ' ';
    background-image: url('images/article/responsive-arc.png');
    position: absolute;
    bottom: 0;
    background-size: cover;
    width: 100%;
    height: 40px;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: 0;
}
body.single-post .hero-container .hero-category{
    background-image: url('images/article/bg-sm-t-r.png');
    background-size: contain;
    position: absolute;
    top: 120px;
    right: 0;
    width: 20%;
    height: 227px;
    background-repeat: no-repeat;
    background-position: right;
}
body.single-post .hero-container .category-item,
body.single-post .hero-container .category-item-scale {
    position: fixed;
    width: 57.5%;
    right: -10%;
    top: 80px;
    background-color: #FF931C;
    padding: 5%;
    padding-left: 50px;
    /* aspect-ratio: 1/1; */
    height: 57.5vw;
    border-radius: 50%;
    z-index: 100;
}
body.single-post .hero-container .category-collapse-icon {
    position: fixed;
    top: 23%;
    right: 5%;
} 
body.single-post .hero-container .category-collapse-icon-scale {
    position: fixed;
    top: 23%;
    right: 5%;
}
body.single-post .hero-container .category-item a,
body.single-post .hero-container .category-item-scale a {
    color: #ffffff;
    /* position: absolute;
    right: 50%; */
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    max-width: 70%;
}
body.single-post .hero-container .category-item .category-list,
body.single-post .hero-container .category-item-scale .category-list {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
} 
body.single-post .hero-container .category-item .collapse-arrow,
body.single-post .hero-container .category-item-scale .collapse-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(15px, -15px);
} 
/* body.single-post .hero-container::after {
    content: " ";
    background-image: url('images/article/bg-sm-t.png');
    background-size: 100%;
    position: absolute;
    bottom: -129px;
    width: 90%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    left: -1px;
} */
body.single-post .hero-container .bg-circle {
    position: absolute;    
    background-image: url('images/article/Group 453.png');
    bottom: -38%;
    left: -136px;
    width: 115%;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    min-width: 400px;
    max-width: 466px;

    /* max-width: 630px;
    max-height: 630px; */
    aspect-ratio: 1/1;
    z-index: 1;
}
body.single-post .hero-container .content-wrapper {
    position: relative;
    top: 64%;
    height: 36%;
    width: 100%;
}
body.single-post .hero-container .title-container {
    /* position: absolute;
    bottom: 14%; */
    width: 65%;
    padding-left: 15px;
    z-index: 50;

    /* left: 25%; */
}
body.single-post #article {
    padding-top: calc(628px*0.36*0.38*1.36);
}
body.single-post .article-breadcrumb {
    font-weight: bold;
}
body.single-post .article-breadcrumb a {
    color: #023047;
}
body.single-post .article-breadcrumb .breadcrumb_last,
body.single-post .article-desc p{
    color: #FF931C;
    font-weight: bold;
}
body.single-post .intro-container {
    max-width: 980px;
}
body.single-post .wp-block-group {
    margin-top: 127px;
}
body.single-post .wp-block-quote {
    margin-top: 27px;
}
body.single-post ::marker {
    color: #FF841C;
}
body.single-post li {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.15rem;
}
body.single-post .article-quote {
    background-image: url('images/article/quote-bg.svg');
    background-repeat: no-repeat;
    width: 100%;
    min-height: 130px;
    max-width: 100% !important;
    margin-right: unset;
    margin-left: unset;
    padding: 52.5px 15px;
    background-size: cover;
    position: relative;
}
body.single-post .quote-container {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 80%;
}
body.single-post .quote-container p::before {
    content: " ";
    background-image: url('images/article/quote-top.svg');
    background-repeat: no-repeat;
    width: 43px;
    height: 25px;
    position: absolute;
    top: -30px;
    left: -15px;
}
body.single-post .quote-container p::after {
    content: " ";
    background-image: url('images/article/quote-bottom.svg');
    background-repeat: no-repeat;
    width: 43px;
    height: 25px;
    position: absolute;
    bottom: -30px;
    right: -15px;
}
body.single-post .article-quote p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* line-height: 130px !important; */
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: bold !important;
    position: relative;
    margin-bottom: unset;
}
body.single-post .article-tag {
    font-size: 12px;
    flex-flow: wrap;
}
body.single-post .article-tag a {
    border: 1px solid;
    padding: 10px 25px;
    border-radius: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
}
body.single-post .share-date-container .share {
    align-self: center;
}
body.single-post .date-container {
    align-self: center;
    color: #FF841C;
}
body.single-post .next-container {
    background-image: url('images/article/next-post-bg.png');
    background-repeat: no-repeat;
    width: 100%;
    min-height: 130px;
    max-width: 100% !important;
    margin-right: unset;
    margin-left: unset;
    padding: 52.5px 15px;
    background-size: cover;
    position: relative;
}
body.single-post .medium-wrapper p {
    text-align: center !important;
}
body.single-post .next-post-wrapper {
    text-align: center;
}
body.single-post .next-post-wrapper a {
    color: #ffffff;
}
body.single-post .other-posts-container {
    overflow-x: scroll;
    flex-wrap: nowrap;
}
body.single-post .other-posts-container .row {
    min-width: 80%;
}
body.single-post .other-posts-container img {
    border-radius: 50%;
    margin: auto;
}
body.single-post .other-posts-container .post-thumbnail,
body.single-post .other-posts-container .post-excerpt {
    align-self: center;
}
body.single-post .other-posts-container .post-excerpt p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.single-post .other-posts-container .thumbnail-img {
    width: 95%;
    aspect-ratio: 1/1;
}
body.single-post .other-posts-container .row-wrapper {
    min-width: 85%;
    margin: 0 10px;
}
body.single-post .other-posts-container .post-title {
    font-weight: bold;
    font-size: 16px;
    color: #023047;
}
body.single-post .other-posts-container::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
body.single-post .category-item.hide-ball {
    transform: translateY(-321px) !important;
    opacity: 0 !important;
}
body.single-post .content-image img {
    width: 100%;
    height: auto;
}
@media (min-width: 576px) {
    body.single-post .hero-container {
        height: 973px;
    }
    body.single-post .hero-container::after {
        bottom: -129px;
        width: 60%;
    }
    body.single-post .hero-container .bg-circle {
        width: 80%;
        bottom: -32%;
        left: -26%;
        max-width: 520px;
    }
    body.single-post .hero-container .content-wrapper {
        top: 75%;
        height: 25%;
        margin: auto;
    }
    body.single-post .hero-container .title-container {
        width: 49%;       
    }
    body.single-post .hero-container .category-item {
        display: flex;
        width: 37.5%;
        height: 37.5vw;
        top: 60px;
        padding: 8%;
        padding-right: 22%;
        padding-left: 8%;
        /* min-width: 317.28px; */
    }
    body.single-post .hero-container .category-item a,
    body.single-post .hero-container .category-item-scale a {
        font-size: 14px;
        line-height: 40px;
    }
    body.single-post .hero-container .category-item-scale {
        display: flex;
        width: 37.5%;
        height: 37.5vw;
    }
    body.single-post .hero-container .category-collapse-icon {
        top: 35%;
    }
    body.single-post .hero-container .category-collapse-icon-scale {
        top: 35%;
    }
    body.single-post .content-container > * {
        max-width: 540px;
    }
    body.single-post .hero-container .category-item a {
        font-size: 14px;
    }
    body.single-post .other-posts-container .row-wrapper {
        min-width: 60%;
    }
    body.single-post #article {
        padding-top: calc(973px*0.25*0.32*1.36);
    }
}
@media (min-width: 768px) {
    body.single-post .content-container > * {
        max-width: 720px;
    }
    body.single-post .hero-container {
        height: 1002px;
    }
    body.single-post .hero-container .title-background-container {
        max-height: 670px;
    }
    body.single-post .hero-container .content-wrapper {
        max-width: 93.75%;
        top: 70%;
        height: 30%;
    }
    body.single-post .hero-container .title-container {
        width: 54%;
        padding-left: unset;
    }
    body.single-post .hero-container .bg-circle {
        bottom: -40%;
        left: -21%;
        max-width: 720px;
    }
    body.single-post h1 {
        font-size: 44px;
    }
    body.single-post h2 {
        font-size: 18px;
    }
    body.single-post .content-container h2 {
        font-size: 40px;
        margin-bottom: 48px;
    }
    body.single-post .content-container h3 {
        font-size: 24px;
        line-height: 40px;
        margin-bottom: unset;
        margin-top: 70px;
    }
    body.single-post .hero-container .container {
        width: 100%;
    }
    body.single-post .hero-container .hero-category{
        position: fixed;
    }
    body.single-post .hero-container .category-item {
        left: unset;
        right: -20%;
        max-width: 370px;
        padding: 8%;
        padding-right: 21%;
        width: 37.5%;
        height: 37.5vw;
        max-height: 370px;
    }
    body.single-post .hero-container .category-collapse-icon-scale,
    body.single-post .hero-container .category-collapse-icon {
        top: 204px;
    }
    body.single-post .hero-container .category-item a {
        font-size: 20px;
        /* display: contents; */
    }
    body.single-post #article {
        padding-top: calc(1114px*0.28*0.4*1.48);
    }
    body.single-post .content-container p {
        font-size: 20px;
        line-height: 40px;
    }
    /* body.single-post .intro-container {
        margin-left: 20%;
        max-width: 60%;
    } */
    body.single-post li {
        font-size: 20px;
        line-height: 40px;
    }
    body.single-post .article-quote {
        min-height: 360px;
        padding: 162px 15px;
    }
    body.single-post .quote-container {
        width: 80%;
    }
    body.single-post .quote-container p::before {
        top: -45px;
        left: -35px;
    }
    body.single-post .quote-container p::after {
        bottom: -45px;
        right: -35px;
    }
    body.single-post .article-quote p {
        font-size: 36px !important;
    }
    body.single-post .other-posts-container .post-excerpt p {
        max-height: 200px;
    }
    body.single-post .other-posts-container .row-wrapper {
        min-width: 40%;
    }
    body.single-post .next-container {
        padding: 157px 15px;
    }
}
@media (min-width: 992px) {
    body.single-post .hero-container {
        height: 1114px;
    }
    body.single-post #hero::before {
        background-image: url('images/article/website-arc.png');
        width: 110%;
        height: 115px;
    }
    body.single-post .hero-container .category-item,
    body.single-post .hero-container .category-item-scale {
        width: 38.7%;
        height: 38.7vw;
        right: -10%;
        padding: 5% 8%;
        padding-right: 11%;
        top: 78px;
        position: fixed;
    }
    body.single-post .hero-container .category-item a,
    body.single-post .hero-container .category-item-scale a {
        font-size: 20px;
    }
    body.single-post .hero-container .category-collapse-icon-scale,
    body.single-post .hero-container .category-collapse-icon {
        top: 263px;
    }
    body.single-post .hero-container .content-wrapper {
        max-width: 96.77%;
    }
    body.single-post .hero-container .title-container {
        max-width: 460px;
    }
    body.single-post .hero-container .title-background-container {
        max-height: 860px;
        min-height: 852px;
        width: 70%;
        left: -15%;
    }
    body.single-post h1 {
        width: unset;
    }
    body.single-post .content-container > * {
        max-width: 960px;
    }
    body.single-post .quote-container {
        width: 50%;
    }
    body.single-post .article-tag {
        font-size: 16px;
        flex-flow: wrap;
    }
    body.single-post .article-tag a {
        padding: 15px 35px;
        margin-right: 25px;
    }
    body.single-post .medium-wrapper p {
        text-align: unset !important;
        margin-left: 20px;
        font-size: 16px !important;
        margin-bottom: unset;
        line-height: 47px;
    }
    body.single-post .other-posts-container .row-wrapper {
        width: 30%;
        min-width: unset;
    }
    body.single-post .other-posts-container .post-title {
        font-size: 24px;
    }
    body.single-post .wp-block-group {
        margin-top: 206px;
    }
    body.single-post .wp-block-quote {
        margin-top: 74px;
    }
}
@media (min-width: 1200px) {
    body.single-post .container {
        max-width: 95%;
    }
    body.single-post .hero-container .bg-circle {
        left: -20%;
        max-width: 915px;
        bottom: -29%;
        width: 70%;
    }
    body.single-post .content-container > * {
        max-width: 70%;
    }
    body.single-post #site-footer .footer-content .container {
        max-width: 95%;
    }
    body.single-post .other-posts-container .thumbnail-img {
        /* width: 151px;
        height: 151px; */
    }
    body.single-post h1 {
        font-size: 64px;
        letter-spacing: 9.6px;
        line-height: 87px;
    }
    body.single-post h2 {
        font-size: 28px;
    }
    body.single-post .content-container h2 {
        margin-bottom: 69px;
    }
    body.single-post .content-container h3 {
        margin-top: 108px;
    }
    body.single-post .hero-container {
        background-position: center !important;
        aspect-ratio: 9/5;
    }
    body.single-post .hero-container .category-item {
        min-width: 336px;
        min-height: 336px;
        padding: 5%;
        padding-right: 11%;
        width: 33.2%;
        height: 33.2vw;
        max-width: 457.5px;
        max-height: 457.5px;
    }
    body.single-post .hero-container::after {
        background-image: url('images/article/bg-t.png');
        width: 25%;
        background-size: contain;
        background-position: bottom left;
    }
    body.single-post .hero-container .content-wrapper {
        max-width: 95%;
        padding-left: 10%;
        top: 55%;
        height: 45%;
    }
    body.single-post .hero-container .title-container {
        width: 70%;
        max-width: unset;
    }
    body.single-post #article {
        padding-top: 5%;
    }
    body.single-post .breadcrumb-excerpt {
        max-width: unset !important;
        padding-left: calc(100%*0.7*0.75*0.8);
        padding-right: 20%;
    }
    body.single-post .wp-block-group {
        margin-top: 243px;
    }
    body.single-post .wp-block-group:nth-child(1) {
        margin-top: 145px;
    }
    body.single-post .wp-block-quote {
        margin-top: 98px;
    }
    body.single-post ul {
        margin-left: 5%;
    }
    body.single-post .quote-container {
        width: 30%;
    }
}
@media (min-width: 1600px) {
    body.single-post .hero-container .category-item {
        position: fixed;
        /* width: 15%; */
        padding: 4%;
        padding-right: 11%;
        width: 432px;
        height: 432px;
    }
    body.single-post .hero-container .bg-circle {
        width: 60%;
        max-width: unset;
    }
    body.single-post .hero-container .content-wrapper {
        max-width: 1440px;
        padding-left: 10%;
    }
    body.single-post .hero-container .title-container {

    }
    body.single-post .breadcrumb-excerpt {
        max-width: 2095px;
        padding-left: calc(100%*0.45*0.8);
        padding-right: 15%;
    }
}
@media (min-width: 1680px) {
    body.single-post .container {
        max-width: 1440px;
    }
    body.single-post .hero-container .title-container {
        /* padding-left: 0;
        margin-left: auto;
        margin-right: auto;
        top: 75%; */
    }
    body.single-post .content-container > * {
        max-width: 1440px;
    }
    body.single-post #site-footer .footer-content .container {
        max-width: 1440px;
    }
}
@media (min-width: 2000px) {
    body.single-post .hero-container .title-background-container {
        top: 60%;
    }
    body.single-post .hero-container .absolute-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 347px;
    }
    body.single-post .hero-container .category-item {
        right: unset;
    }
}
@media (min-width: 1800px) {
    body.single-post #hero {
        z-index: 0;
        background: linear-gradient(to left,
        black 0.1%, white 30%, white 70%, black 99.9% )
    }
    body.single-post .hero-container {
        max-width: 2095px;
        margin: auto;
        height: auto;
        width: 100%;
    }
    body.single-post .hero-container .post-bg-image {
        width: 100%;
        height: 100%;
    }
    body.single-post .hero-container .post-bg-image img {
        width: 100%;
        height: auto;
    }
}
@media (min-width: 2095px) {
    body.single-post .breadcrumb-excerpt {
        padding-left: calc((100%*0.45*0.8) + ((100% - 2095px)*0.25));
    }
}
/*--------------------------------------------------------------
Blog Front Page
--------------------------------------------------------------*/

/*------------------------------ hero ------------------------------*/
body.category .background {
    min-height: 579px;
    width: 100%;
    position: relative;
    background-color: #FF931C;
    position: relative;
}
body.category .hero-container .bg-lt-1 {
    width: 300px;
    left: -150px;
    top: -120px;
}
body.category .hero-container .bg-lm-1 {
    width: 39px;
    top: 259px;
    left: 131px;
}
body.category .hero-container .bg-lm-2 {
    width: 9px;
    top: 287px;
    left: 161px;
}
body.category .hero-container .bg-rb-1 {
    width: 8px;
    bottom: 199px;
    right: 65px;
}
body.category .hero-container .bg-rb-2 {
    width: 29px;
    bottom: 175px;
    right: 63px;
}
body.category .hero-container .bg-me2.bg-t-1 {
    width: 30px;
    top: 36px;
    right: 120px;
}
body.category .hero-container .bg-e1.bg-m-1 {
    width: 43px;
    top: 213px;
    right: 53px;
}
body.category .hero-container .bg-me1.bg-b-1 {
    width: 45px;
    top: 350px;
    left: 24px;
}
body.category .hero-container .bg-e4.bg-m-2 {
    width: 49px;
    bottom: 68px;
    left: 167px;
}
body.category .category-content .scroll-down-btn {
    position: absolute;
    background-image: url('images/article/scroll-down.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 55px;
    height: 55px;
    top: -22.5px;
    right: 20%;
}
body.category .category-content {
    padding-top: 90px;
    position: relative;
}
body.category .category-content::before {
    content: " ";
    background-image: url('images/article/top-arc.png');
    background-repeat: no-repeat;
    background-size: 140%;
    width: 100%;
    height: 483px;
    position: absolute;
    top: 0;
}
body.category .lower-background {
    background-color: #FF931C;
    width: 100%;
    height: 130px;
    position: relative;
    z-index: -2;
}
body.category .lower-background::after {
    content: " ";
    background-image: url('images/article/bottom-arc.png');
    background-repeat: no-repeat;
    background-size: 120%;
    width: 100%;
    height: 163px;
    position: absolute;
    top: -150px;
    background-position: bottom center;
    z-index: -2;
}
body.category .hero-container {
    padding-top: 160px;
    color: #ffffff;
}
body.category .hero-container h2 {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
}
body.category .hero-container .tagline {
    margin-top: 28px;
}
body.category .hero-container h3 {
    font-size: 14px;
    font-weight: lighter;
    margin-bottom: unset;
}
body.category .archive-title {
    text-align: center;
    width: 250px;
}
body.category .archive-title h1 {
    font-size: 24px;
    font-weight: bold;
}
body.category .archive-title h1::before {
    content: " ";
    background-image: url(images/article/h3-before.png);
    background-size: contain;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 147px;
    background-repeat: no-repeat;
    z-index: -5;
}
body.category .category-item {
    font-size: 14px;
    flex-flow: wrap;
}
body.category .category-item::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
body.category .category-item a {
    border: 1px solid #023047;
    padding: 10px 0;
    border-radius: 50px;
    margin-bottom: 10px;
    color: #023047;
    margin-right: 10px;
    min-width: 75px;
    text-align: center;
}
body.category .category-item a.active {
    background-color: #023047;
    color: #ffffff;
}
body.category .article-content {
    padding-bottom: 90px;
    margin-top: 57px;
}
body.category .article-content .row-wrapper {
    margin-bottom: 87px;
}
body.category .article-content .thumbnail {
    align-self: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #FF931C;
    position: relative;
}
body.category .article-content .post-thumbnail {
    width: auto;
    height: 100%;
}
body.category .article-content .post-excerpt {
    width: 50%;
}
body.category .article-content .title {
    color: #023047;
    font-weight: bold;
    letter-spacing: 0.15rem;
    font-size: 14px;
}
body.category .article-content .post-excerpt .desc {
    max-height: 50px;
    overflow: hidden;
    margin-top: 1rem;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}
body.category .article-content .post-excerpt .more-btn {
    padding: 10px 0;
    font-size: 12px;
    line-height: 16px;
    border: 1px solid #FF931C;
    min-width: 119px;
}
body.category .article-content .post-excerpt .more-btn.orange {
    background-color: #FF931C;
    color: #FFFFFF;
}
body.category .article-content .post-excerpt .more-btn.white {
    background-color: #ffffff;
    color: #FF931C;
}
body.category .pagination {
    justify-content: center;
}
body.category .pagination .page-numbers {
    color: #023047;
    font-weight: bold;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 16px;
}
body.category .pagination .page-numbers.current {
    border: 1px solid #FF931C;
    padding: 5px 8px 5px 10px;
    border-radius: 50%;
    background-color: #FF931C;
    color: #ffffff;
}
body.category .article-content .bg-container .bg-rt-1 {
    width: 33px;
    right: -16.5px;
    top: 82px;
}
body.category .article-content .bg-container .bg-lm-1 {
    width: 41px;
    left: -13px;
    top: 459px;
}
body.category .article-content .bg-container .bg-lm-2 {
    width: 6px;
    left: 28px;
    top: 491px;
}
body.category .article-content .bg-container .bg-rm-1 {
    width: 11px;
    right: 14px;
    top: 491px;
}
body.category .article-content .bg-container .bg-mm-1 {
    width: 15px;
    top: 757px;
    left: 149px;
}
body.category .article-content .bg-container .bg-lb-1 {
    width: 10px;
    top: 1067px;
    left: 26px;
}
body.category .article-content .bg-container .bg-rb-1 {
    width: 23.5px;
    top: 1004px;
    right: 30px;
}
body.category .article-content .bg-container .bg-rb-2 {
    width: 10px;
    top: 1034px;
    right: 7px;
}
body.category .lower-background .bg-container .bg-lt-1 {
    width: 24px;
    top: 0;
    left: 20%;
}
body.category .lower-background .bg-container .bg-rt-1 {
    width: 31px;
    top: 10px;
    right: 10%;
}
body.category .lower-background .bg-container .bg-mm-1 {
    width: 24px;
    top: 59px;
    right: 50%;
}
body.category .lower-background .bg-container .bg-lb-1 {
    width: 25px;
    top: 71px;
    left: 5%;
}
body.category .lower-background .bg-container .bg-mb-1 {
    width: 14px;
    bottom: 14px;
    left: 30%;
}
@media (min-width: 576px) {
    body.category .background {
        height: 450px;
    }
    body.category .hero-container h2 {
        font-size: 44px;
        line-height: 44px;
    }
    body.category .hero-container .tagline {
        margin-top: 40px;
    }
    body.category .hero-container h3 {
        font-size: 20px;
    }
    body.category .archive-title {
        width: 300px;
    }
    body.category .archive-title h1 {
        font-size: 38px;
    }
    body.category .category-item {
        font-size: 16px;
    }
}
@media (min-width: 768px) {
    body.category .background {
        min-height: 782px;
    }
    body.category .category-content .scroll-down-btn {
        width: 77px;
        height: 77px;
    }
    body.category .hero-container .bg-lt-1 {
        width: 435px;
        left: -138px;
        top: -166px;
    }
    body.category .hero-container .bg-lm-1 {
        width: 70px;
        top: 360px;
        left: 219px;
    }
    body.category .hero-container .bg-lm-2 {
        width: 16px;
        top: 410px;
        left: 273px;
    }
    body.category .hero-container .bg-rb-1 {
        top: 552px;
        right: 78px;
    }
    body.category .hero-container .bg-rb-2 {
        top: 554px;
        right: 76px;
    }
    body.category .hero-container .bg-me2.bg-t-1 {
        width: 49px;
        top: 51px;
        right: 286px;
    }
    body.category .hero-container .bg-e1.bg-m-1 {
        width: 75px;
        top: 250px;
        right: 88px;
    }
    body.category .hero-container .bg-me1.bg-b-1 {
        width: 71px;
        top: 498px;
        left: 40px;
    }
    body.category .hero-container .bg-me4.bg-b-2 {
        width: 84px;
        top: 618px;
        left: 362px;
    }
    body.category .hero-container {
        padding-top: 89px;
    }
    body.category .category-content {
        padding-top: 211px;
    }
    body.category .archive-title {
        margin-bottom: 49px;
    }
    body.category .category-item a {
        padding: 10px 42px;
    }
    body.category .article-content {
        margin-top: 94px;
        padding-bottom: 150px;
    }
    body.category .article-content .thumbnail {
        width: 280px;
        height: 280px;
    }
    body.category .article-content .post-excerpt {
        align-self: center;
        width: 50%;
    }
    body.category .article-content .title {
        font-size: 20px;
    }
    body.category .article-content .post-excerpt .desc {
        max-height: 80px;
        font-size: 14px;
    }
    body.category .article-content .post-excerpt .more-btn {
        padding: 18px 28px;
        font-size: 14px;
        margin-top: 30px;
    }
    body.category .pagination .page-numbers {
        font-size: 20px;
    }
    body.category .pagination .page-numbers.current {
        padding: 5px 10px 5px 12px;
    }
    body.category .article-content .bg-container .bg-rt-1 {
        width: 64px;
        right: -32px;
        top: 189px;
    }
    body.category .article-content .bg-container .bg-lm-1 {
        width: 92px;
        left: -29px;
        top: 667px;
    }
    body.category .article-content .bg-container .bg-lm-2 {
        width: 12px;
        left: 66px;
        top: 741px;
    }
    body.category .article-content .bg-container .bg-rm-1 {
        width: 20px;
        right: 114px;
        top: 679px;
    }
    body.category .article-content .bg-container .bg-mm-1 {
        width: 20px;
        top: 1086px;
        left: 221px;
    }
    body.category .article-content .bg-container .bg-lb-1 {
        width: 20px;
        top: 1474px;
        left: 64px;
    }
    body.category .article-content .bg-container .bg-rb-1 {
        width: 51px;
        top: 1540px;
        right: 94px;
    }
    body.category .article-content .bg-container .bg-rb-2 {
        width: 23px;
        top: 1663px;
        right: 43px;
    }
    body.category .lower-background {
        height: 236px;
    }
    body.category .lower-background .bg-container .bg-lt-1 {
        width: 53px;
        left: 30%;
    }
    body.category .lower-background .bg-container .bg-rt-1 {
        width: 83px;
        top: 118px;
    }
    body.category .lower-background .bg-container .bg-mm-1 {
        width: 32px;
        bottom: 31px;
        right: 75%;
        top: unset;
    }
    body.category .lower-background .bg-container .bg-lb-1 {
        width: 71px;
        top: 37px;
    }
    body.category .lower-background .bg-container .bg-c10.bg-mb-1 {
        width: 14px;
        top: 300px;
        left: 203px;
        transform: rotate(200deg);
    }
    body.category .lower-background .bg-container .bg-c10.bg-mb-2 {
        width: 75px;
        top: 13px;
        right: 20%;
    }
}
@media (min-width: 992px) {
    body.category .background {
        height: 790px;
    }
    body.category .hero-container {
        padding-top: 248px;
    }
    body.category .hero-container h2 {
        font-size: 64px;
        line-height: 64px;
    }
    body.category .hero-container .tagline {
        margin-top: 57px;
    }
    body.category .hero-container h3 {
        font-size: 28px;
    }
    body.category .category-content {
        padding-top: 250px;
    }
    body.category .archive-title {
        width: 450px;
    }
    body.category .archive-title h1 {
        font-size: 48px;
    }
    body.category .category-item {
        font-size: 20px;
        max-width: 886px;
        margin: auto;
    }
    body.category .article-content .row-wrapper {
        margin-bottom: 97px;
    }
    body.category .article-content .post-excerpt .more-btn {
        min-width: 214px;
    }
}
@media (min-width: 1200px) {
    /* body.category .background {
        height: 950px;
    } */
    body.category .category-content::before {
        background-size: 110%;
    }
    body.category .hero-container .bg-lt-1 {
        width: 680px;
        left: -277px;
        top: -164px;
    }
    body.category .hero-container .bg-lm-1 {
        width: 130px;
        top: 517px;
        left: 439px;
    }
    body.category .hero-container .bg-lm-2 {
        width: 30px;
        top: 610px;
        left: 539px;
    }
    body.category .hero-container .bg-rb-1 {
        top: 646px;
        right: 135px;
    }
    body.category .hero-container .bg-rb-2 {
        width: 51px;
        top: 650px;
        right: 131px;
    }
    body.category .hero-container .bg-me2.bg-t-1 {
        width: 60px;
        top: 205px;
        right: 45%;
    }
    body.category .hero-container .bg-e1.bg-m-1 {
        width: 129px;
        top: 105px;
        right: 15%;
    }
    body.category .hero-container .bg-me1.bg-b-1 {
        top: 822px;
        left: 5%;
    }
    body.category .hero-container .bg-me4.bg-b-2 {
        width: 83px;
        top: 702px;
        left: 70%;
    }
    body.category .category-content .scroll-down-btn {
        top: 0;
    }
    body.category .article-content {
        margin-top: 190px;
        padding-bottom: 250px;
    }
    body.category .category-item a {
        padding: 10px 64px;
        font-size: 20px;
    }
    body.category .article-content .thumbnail {
        width: 403px;
        height: 403px;
    }
    body.category .article-content .title {
        font-size: 30px;
    }
    body.category .article-content .post-excerpt .desc {
        max-height: 100px;
        font-size: 20px;
    }
    body.category .article-content .post-excerpt .more-btn {
        padding: 18px 36px;
        font-size: 16px;
        margin-top: 40px;
    }
    body.category .pagination .page-numbers {
        font-size: 30px;
    }
    body.category .pagination .page-numbers.current {
        padding: 8px 15px 8px 17px;
    }
    body.category .article-content .bg-container .bg-rt-1 {
        width: 161px;
        right: -109px;
        top: 261px;
    }
    body.category .article-content .bg-container .bg-lm-1 {
        width: 145px;
        left: -72px;
        top: 901px;
    }
    body.category .article-content .bg-container .bg-lm-2 {
        width: 20px;
        left: 84px;
        top: 1020px;
    }
    body.category .article-content .bg-container .bg-rm-1 {
        width: 20px;
        right: 575px;
        top: 979px;
    }
    body.category .article-content .bg-container .bg-mm-1 {
        width: 20px;
        top: 1546px;
        left: 721px;
    }
    body.category .article-content .bg-container .bg-lb-1 {
        width: 20px;
        top: 1974px;
        left: 50px;
    }
    body.category .article-content .bg-container .bg-rb-1 {
        width: 145px;
        right: 167px;
    }
    body.category .article-content .bg-container .bg-rb-2 {
        width: 66px;
        top: 1893px;
        right: 19px;
    }
    body.category .lower-background {
        height: 416px;
    }
    body.category .lower-background::after {
        height: 390px;
        top: -288px;
    }
    body.category .lower-background .bg-container .bg-lt-1 {
        width: 129px;
        top: 80px;
    }
    body.category .lower-background .bg-container .bg-rt-1 {
        width: 83px;
        top: 237px;
        right: 5%;
    }
    body.category .lower-background .bg-container .bg-mm-1 {
        width: 60px;
        bottom: 39px;
        right: 40%;
    }
    body.category .lower-background .bg-container .bg-lb-1 {
        width: 71px;
        top: -46px;
        left: 2%;
    }
    body.category .lower-background .bg-container .bg-c10.bg-mb-1 {
        width: 51px;
        bottom: 93px;
        left: 20%;
        top: unset;
        transform: rotate(200deg);
    }
    body.category .lower-background .bg-container .bg-c10.bg-mb-2 {
        width: 130px;
        top: 107px;
        right: 25%;
    }
}