*,
.h1, .h2, .h3, h1, h2, h3,
ol, ul, p{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    padding: 0;
}

ul{padding-left: calc(0.125vw + 15.6px);}


*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    color: #5a5a5a;
    font-family: 'Noto Sans TC', sans-serif;
}

#topnavarea.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

/* hash move*/
.anchor:target {
    display: block;
    position: relative;
    top: -61px;
    visibility: hidden;
}

@media screen and (max-width: 1217px) {
    .anchor:target {
        display: block;
        position: relative;
        top: -50px;
        visibility: hidden;
    }
}

/*-----Link Style-----*/
a {
    color: #36a6e9;
    text-decoration: none;
}

a.underline{
    text-decoration: underline;
}

a:hover {
    color: #36a6e9;
    text-decoration: underline;
}

a.none-underline:hover {
    text-decoration: none;
}

a:focus,
a:active,
a:active:focus {
    color: #36a6e9;
    outline: none;
    text-decoration: underline;
}

.nav > li > a:hover {
    text-decoration: none;
    background-color: inherit;
}

/* line-height */
.rl-lh-11{
    line-height: 1.1;
}

.rl-lh-12{
    line-height: 1.2;
}

.rl-lh-13{
    line-height: 1.3;
}

.rl-lh-14{
    line-height: 1.4;
}

.rl-lh-15{
    line-height: 1.5;
}

/*----------Layout--------- */

.rl-container {
    padding-right: 15px;
    padding-left: 15px;
}

.rl-row-1440 {
    max-width: 1440px;
    margin: 0 12.1%;
    padding-right: 15px;
    padding-left: 15px;
}

@media screen and (max-width: 1440px) {
    .rl-row-1440 {
        margin: 0 4.17%;
    }
}

@media screen and (max-width: 991px) {
    .rl-row-1440{
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin: 0 auto;
    }
}

@media screen and (max-width: 575px) {
    .rl-container {
        padding-right: 0;
        padding-left: 0;
    }
}

/*------------------------------------
                visible
------------------------------------*/
.rl-show {
    display: block !important;
}
.rl-show-lg,
.rl-show-md,
.rl-show-sm,
.rl-show-xs {
    display: none !important;
}

.rl-hide {
    display: none !important;
}
.rl-hide-lg,
.rl-hide-md,
.rl-hide-sm,
.rl-hide-xs {
    display: block !important;
}

@media screen and (max-width: 1199px) {
    .rl-show-lg{
        display: block !important;
    }

    .rl-hide-lg{
        display: none !important;
    }
}

@media screen and (max-width: 991px) {
    .rl-show-md{
        display: block !important;
    }

    .rl-hide-md{
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .rl-show-sm{
        display: block !important;
    }

    .rl-hide-sm{
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .rl-show-xs{
        display: block !important;
    }

    .rl-hide-xs{
        display: none !important;
    }
}

/*------------------------------------
                img
------------------------------------*/
.rl-img-response {
    max-width: 100%;
}

/*------------------------------------
                pos
------------------------------------*/
.rl-rel {
    position: relative;
    display: block;
}

/*------------------------------------
                line
------------------------------------*/

.rl-hr {
    border-top: 2px solid;
}

.rl-hr-color-gray {
    border-color: #3c3c3c;
}

.divider {
    border-bottom: 1px solid #b1b1b1;
}

/*------------------------------------
                magnificPopup
------------------------------------*/

.mfp-iframe-holder .mfp-content {
    max-width: 80%;
}

@media screen and (max-width: 991px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 900px;
    }
}

/*------------------------------------
                flexbox
------------------------------------*/

.flex-container,
.rl-flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.align-center {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.justify-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-direction-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (max-width: 767px) {
    .flex-container {
        flex-direction: column !important;
        align-items: left;
    }

    #rl-topnavarea .flex-container {
        flex-direction: row !important;
    }
}

/*------------------------------------
                banner
------------------------------------*/

.rl-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    overflow: hidden;
}

/*------------banner-align------------ */
/*------------Left------------ */
.rl-banner-lefttop {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.rl-banner-leftcenter {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.rl-banner-leftbot {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

/*------------Center------------ */
.rl-banner-centertop {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.rl-banner-centercenter {
    /* width: 100%; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.rl-banner-centerbot {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

/*------------Right------------ */
.rl-banner-righttop {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.rl-banner-rightcenter {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.rl-banner-rightbot {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

@media screen and (max-width: 767px) {
    .rl-banner{
        height: calc(44.742729306487696vw + 256.8232662192394px);
    }

    .rl-banner-mobile-leftbot {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .rl-banner-mobile-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
    }

    .rl-banner-mobile-centertop {
        justify-content: center;
        align-items: flex-start;
        text-align: center;
    }

    .rl-banner-mobile-centerbot {
        justify-content: center;
        align-items: flex-end;
        text-align: center;
    }

    .rl-banner-mobile-bot-60 {
        margin-bottom: 60px;
    }
}

/*------------------------------------
                text
------------------------------------*/
.rl-text-important{
    font-size: calc(0.25vw + 19.2px);
    font-weight: 500;
    line-height: 1.1;
    color: #36a6e9;
}

/* 60 */
.rl-text-h1{
    font-size: calc(1.125vw + 38.4px);
}

/* 42 */
.rl-text-h2{
    font-size: calc(0.75vw + 27.6px);
}

/* 36 */
.rl-text-h3{
    font-size: calc(0.5vw + 26.4px);
}

/* 28 */
.rl-text-h4{
    font-size: calc(0.25vw + 23.2px);
}

p, li, .rl-text-desc {
    font-size: calc(0.125vw + 15.6px);
    line-height: 1.5;
    font-weight: 300;
}

/* 24 */
.rl-text-desc-lg {
    font-size: calc(0.25vw + 19.2px);
}

/* 20 */
.rl-text-desc-md {
    font-size: calc(0.125vw + 17.6px);
}

/* 18 */
.rl-text-desc-sm {
    font-size: calc(0.125vw + 15.6px);
}

/* 16 */
.rl-text-desc-xs {
    font-size: calc(0.125vw + 13.6px);
}

ul.rl-text-desc {
    padding-left: 20px;
}

ul.rl-text-desc li {
    font-size: calc(0.125vw + 15.6px);
}

.rl-text-announcement {
    font-size: 20px;
}

/*--- text weight ---*/
.rl-text-900 {
    font-weight: 900;
}

.rl-text-700 {
    font-weight: 700;
}

.rl-text-bold {
    font-weight: bold;
}

.rl-text-medium {
    font-weight: 500;
}

.rl-text-regular {
    font-weight: 400;
}

.rl-text-light {
    font-weight: 300;
}

/*--------text-align------ */

.rl-text-center {
    text-align: center;
}

.rl-text-left {
    text-align: left;
}

.rl-text-right {
    text-align: right;
}

.rl-uppercase {
    text-transform: uppercase;
}

@media screen and (max-width: 1199px) {
    .rl-text-center-lg {
        text-align: center;
    }

    .rl-text-left-lg {
        text-align: left;
    }

    .rl-text-right-lg {
        text-align: right;
    }
}

@media screen and (max-width: 991px) {
    .rl-text-center-md {
        text-align: center;
    }

    .rl-text-left-md {
        text-align: left;
    }

    .rl-text-right-md {
        text-align: right;
    }
}

@media screen and (max-width: 767px) {
    .rl-text-center-sm {
        text-align: center;
    }

    .rl-text-left-sm {
        text-align: left;
    }

    .rl-text-right-sm {
        text-align: right;
    }
}

@media screen and (max-width: 575px) {
    .rl-text-center-xs {
        text-align: center;
    }

    .rl-text-left-xs {
        text-align: left;
    }

    .rl-text-right-xs {
        text-align: right;
    }
}

/*------------------------------------
                row space
------------------------------------*/
/*----- 130px ----- */

.rl-row-130 {
    padding-top: calc(4.375vw + 46px);
    padding-bottom: calc(4.375vw + 46px);
}

.rl-row-top-130 {
    padding-top: calc(4.375vw + 46px);
    padding-bottom: 0;
}

.rl-row-bottom-130 {
    padding-bottom: calc(4.375vw + 46px);
}

/*----- 110px ----- */
.rl-row-110 {
    padding-top: calc(3.75vw + 38px);
    padding-bottom: calc(3.75vw + 38px);
}

.rl-row-top-110 {
    padding-top: calc(3.75vw + 38px);
    padding-bottom: 0;
}

.rl-row-bottom-110 {
    padding-top: calc(3.75vw + 38px);
}

/*----- 110px ----- */
.rl-row-100 {
    padding-top: calc(3.125vw + 40px);
    padding-bottom: calc(3.125vw + 40px);
}

.rl-row-top-100 {
    padding-top: calc(3.125vw + 40px);
    padding-bottom: 0;
}

.rl-row-bottom-100 {
    padding-top: calc(3.125vw + 40px);
}

/*----- 90px ----- */

.rl-row-90 {
    padding-top: calc( 30px + 3.125vw);
    padding-bottom: calc( 30px + 3.125vw);
}

.rl-row-top-90 {
    padding-top: calc( 30px + 3.125vw);
    padding-bottom: 0;
}

.rl-row-bottom-90 {
    padding-bottom: calc( 30px + 3.125vw);
}

/*----- 80px ----- */

.rl-row-80 {
    padding-top: calc( 32px + 2.5vw);
    padding-bottom: calc( 32px + 2.5vw);
}

.rl-row-top-80 {
    padding-top: calc( 32px + 2.5vw);
    padding-bottom: 0;
}

.rl-row-bottom-80 {
    padding-top: 0;
    padding-bottom: calc( 32px + 2.5vw);
}

/*----- 70px ----- */

.rl-row-70 {
    padding-top: calc(2.1875vw + 28px);
    padding-bottom: calc(2.1875vw + 28px);
}

.rl-row-top-70 {
    padding-top: calc(2.1875vw + 28px);
    padding-bottom: 0;
}

.rl-row-bottom-70 {
    padding-top: 0;
    padding-bottom: calc(2.1875vw + 28px);
}

/*----- 60px ----- */

.rl-row-60 {
    padding-top: calc( 24px + 1.875vw);
    padding-bottom: calc( 24px + 1.875vw);
}

.rl-row-top-60 {
    padding-top: calc( 24px + 1.875vw);
    padding-bottom: 0;
}

.rl-row-bottom-60 {
    padding-top: 0;
    padding-bottom: calc( 24px + 1.875vw);
}

/*----- 50 px ----- */

.rl-row-50 {
    padding-top: calc( 14px + 1.875vw);
    padding-bottom: calc( 14px + 1.875vw);
}

.rl-row-top-50 {
    padding-top: calc( 14px + 1.875vw);
    padding-bottom: 0;
}

.rl-row-bottom-50 {
    padding-top: 0;
    padding-bottom: calc( 14px + 1.875vw);
}

/*----- 40 px ----- */

.rl-row-40 {
    padding-top: calc( 16px + 1.25vw);
    padding-bottom: calc( 16px + 1.25vw);
}

.rl-row-top-40 {
    padding-top: calc( 16px + 1.25vw);
    padding-bottom: 0;
}

.rl-row-bottom-40 {
    padding-top: 0;
    padding-bottom: calc( 16px + 1.25vw);
}

/*----- 30 px ----- */

.rl-row-30 {
    padding-top: calc(0.75vw + 15.6px);
    padding-bottom: calc(0.75vw + 15.6px);
}

.rl-row-top-30 {
    padding-top: calc(0.75vw + 15.6px);
    padding-bottom: 0;
}

.rl-row-bottom-30 {
    padding-top: 0;
    padding-bottom: calc(0.75vw + 15.6px);
}

/*----- 25 px ----- */

.rl-row-25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.rl-row-top-25 {
    padding-top: 25px;
    padding-bottom: 0;
}

.rl-row-bottom-25 {
    padding-top: 0;
    padding-bottom: 25px;
}

/*----- 20 px ----- */

.rl-row-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.rl-row-top-20 {
    padding-top: 20px;
    padding-bottom: 0;
}

.rl-row-bottom-20 {
    padding-top: 0;
    padding-bottom: 20px;
}

/*----- 15 px ----- */

.rl-row-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.rl-row-top-15 {
    padding-top: 15px;
    padding-bottom: 0;
}

.rl-row-bottom-15 {
    padding-top: 0;
    padding-bottom: 15px;
}

/*----- 10 px ----- */

.rl-row-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.rl-row-top-10 {
    padding-top: 10px;
    padding-bottom: 0;
}

.rl-row-bottom-10 {
    padding-top: 0;
    padding-bottom: 10px;
}

/*------------------------------------
                color
------------------------------------*/
.rl-bg-black {
    background-color: #000000;
}

.rl-bg-white {
    background-color: #fff;
}

.rl-bg-blue {
    background-color: #36a6e9;
}

.rl-color-white {
    color: #fff;
}

.rl-color-black {
    color: #000;
}

.rl-color-blue {
    color: #36a6e9;
}

/*------------------------------------
                playbutton
------------------------------------*/

.rl-play-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(55px + 2.5vw);
    height: calc(55px + 2.5vw);
    border-radius: 50%;
    margin: calc( (( 55px + 2.5vw) / 2) * (-1)) 0 0 calc( (( 55px + 2.5vw) / 2) * (-1));
    border: 3px solid #e4e4e4;
    background: #0009;
/*     
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(55px + 2.5vw);
    height: calc(55px + 2.5vw);
    border-radius: 50%;
    margin: auto;
    background: rgba(255, 255, 255, 0.5); */
    -webkit-transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}

.rl-rel:hover .rl-play-wrapper {
    /* background: rgba(255, 255, 255, 0.6); */
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.rl-play {

    width: 0;
    height: 0;
    border-top: solid calc(0.625vw + 8px) transparent;
    border-right: solid 0px transparent;
    border-bottom: solid calc(0.625vw + 8px) transparent;
    border-left: solid calc(0.9375vw + 12px) #fff;
    margin-left: 7px;

    /* width: 0;
    height: 0;
    border-style: solid;
    border-width: calc( 0.625vw + 14px) 0 calc( 0.625vw + 14px) calc(0.625vw + 24px);
    border-color: transparent transparent transparent #fff;
    margin-left: calc( 2.8px + 0.375vw); */
}

/*------------------------------------
                collumn
------------------------------------*/

.rl-cards {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
}

.rl-cards > div {
    width: 100%;
}

.rl-column-2 > div {
    width: calc(100% / 2);
}

.rl-column-3 > div {
    width: calc(100% / 3);
}

.rl-column-4 > div {
    width: calc(100% / 4);
}

.rl-column-5 > div {
    width: calc(100% / 5);
}

.rl-column-6 > div {
    width: calc(100% / 6);
}

.rl-column-8 > div {
    width: calc(100% / 8);
}

.rl-column-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* two-col */

.rl-column-space-7dot5 > div {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.rl-column-space-15 > div {
    /*15, 7.5*/
    padding-left: calc(0.5vw + 5.4px);
    padding-right: calc(0.5vw + 5.4px);
}

.rl-column-space-20 > div {
    /*20, 7.5*/
    padding-left: calc(0.8125vw + 4.4px);
    padding-right: calc(0.8125vw + 4.4px);
}

.rl-column-space-25 > div {
    /*25, 7.5*/
    padding-left: calc(1.125vw + 3.4px);
    padding-right: calc(1.125vw + 3.4px);
}

.rl-column-space-30 > div {
    /*30, 7.5*/
    padding-left: calc(1.4375vw + 2.4px);
    padding-right: calc(1.4375vw + 2.4px);
}

.rl-column-space2-wrapper {
    overflow: hidden;
}

.rl-column-space2-7dot5 {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.rl-column-space2-15 {
    margin-left: calc((0.5vw + 5.4px) * (-1));
    margin-right: calc((0.5vw + 5.4px) * (-1));
}

.rl-column-space2-20 {
    margin-left: calc((0.8125vw + 4.4px) * (-1));
    margin-right: calc((0.8125vw + 4.4px) * (-1));
}

.rl-column-space2-25 {
    margin-left: calc((1.125vw + 3.4px) * (-1));
    margin-right: calc((1.125vw + 3.4px) * (-1));
}

.rl-column-space2-30 {
    margin-left: calc((1.4375vw + 2.4px) * (-1));
    margin-right: calc((1.4375vw + 2.4px) * (-1));
}

.rl-column-space2-50 {
    margin-left: calc((2.6875vw + -1.6px) * (-1));
    margin-right: calc((2.6875vw + -1.6px) * (-1));
}

.rl-column-space2-73 {
    margin-left: calc((4.125vw + -6.2px) * (-1));
    margin-right: calc((4.125vw + -6.2px) * (-1));
}

.rl-column-space2-7dot5 > div {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.rl-column-space2-15 > div {
    padding-left: calc(0.5vw + 5.4px);
    padding-right: calc(0.5vw + 5.4px);
}

.rl-column-space2-20 > div {
    padding-left: calc(0.8125vw + 4.4px);
    padding-right: calc(0.8125vw + 4.4px);
}

.rl-column-space2-25 > div {
    padding-left: calc(1.125vw + 3.4px);
    padding-right: calc(1.125vw + 3.4px);
}

.rl-column-space2-30 > div {
    padding-left: calc(1.4375vw + 2.4px);
    padding-right: calc(1.4375vw + 2.4px);
}

.rl-column-space2-50 > div {
    padding-left: calc(2.6875vw + -1.6px);
    padding-right: calc(2.6875vw + -1.6px);
}

.rl-column-space2-73 > div {
    padding-left: calc(4.125vw + -6.2px);
    padding-right: calc(4.125vw + -6.2px);
}

@media screen and (max-width: 1199px) {
    .rl-column-5 > div,
    .rl-column-6 > div {
        width: calc(100% / 3);
    }

    .rl-column-8 > div {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 991px) {
    .rl-column-4 > div,
    .rl-column-6 > div {
        width: calc(100% / 2);
    }

    .rl-column-8 > div {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 767px) {
    .rl-column-2 > div,
    .rl-column-3 > div,
    .rl-column-4 > div,
    .rl-column-5 > div,
    .rl-column-6 > div {
        width: 100%;
    }

    .rl-column-8 > div {
        width: 50%;
    }
}

/*------------------------------------
              Position
------------------------------------*/

.rl-img-pos-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.rl-img-pos-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
}

/*------------------------------------
                button
------------------------------------*/
.rl-button-right {
    float: right;
}

.rl-button-left {
    float: left;
}

.rl-button-center {
    display: block;
    margin: 0 auto;
}


.rl-button-lg {
    font-size: 1.5rem;
    font-weight: 400;
    min-width: 250px;
}

.rl-button-md {
    font-size: 1.125rem;
    font-weight: 400;
    min-width: 200px;
}

.rl-button-sm {
    font-size: 1rem;
    font-weight: 300;
}
/* 
.rl-button {
    display: inline-block;
    line-height: 34px;
    min-width: 200px;
    text-align: center;
    text-decoration: none;
    transition: all 0.17s ease-in-out;
}

.rl-button:hover,
.rl-button:focus,
.rl-button:active:focus {
    text-decoration: none;
} */

.rl-button-fill,
.rl-button-fill:active,
.rl-button-fill:active:focus,
.rl-button-fill:focus {
    color: #fff;
    background-color: #36a6e9;
    border: 2px solid #36a6e9;
    border-radius: 0;
    outline: none;
    display: inline-block;
    line-height: 1.2;
    min-width: 200px;
    text-align: center;
    text-decoration: none;
    font-weight: 400;
    margin-left: 7.5px;
    margin-right: 7.5px;
    padding: 8px 20px;
}

.rl-button-fill:hover {
    background-color: #36bde9;
    border: 2px solid #36bde9;
    text-decoration: none;
}

.rl-button-border,
.rl-button-border:active,
.rl-button-border:active:focus,
.rl-button-border:focus {
    color: #36a6e9;
    background-color: transparent;
    border: 2px solid #36a6e9;
    border-radius: 0;
    outline: none;
    display: inline-block;
    line-height: 1.2;
    min-width: 200px;
    text-align: center;
    text-decoration: none;
    font-weight: 400;
    margin-left: 7.5px;
    margin-right: 7.5px;
    padding: 8px 20px;
}

.rl-button-border:hover {
    background-color: #36bde9;
    border: 2px solid #36bde9;
    color: #ffffff;
    text-decoration: none;
}

.rl-button-fill .fa-lg {
    vertical-align: -9%;
}

.rl-button-fill[disabled],
.rl-button-fill.disabled,
.rl-button-fill.disabled:active,
.rl-button-fill.disabled:active:focus,
.rl-button-fill.disabled:focus,
.rl-button-fill.disabled:hover{
    background-color: #999;
    border: 2px solid #999;
    cursor: no-drop;
}

/* ------------------------------ */

.rl-arrow {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: rgba(98, 98, 98, 0.8);
    height: calc(0.8750000000000001vw + 27.2px);
    width: calc(0.8750000000000001vw + 27.2px);
    text-align: center;
    border-style: none;
}

.rl-arrow i.fa {
    color: #fff;
    font-size: calc(17.6px + 0.75vw);
}

.rl-prev {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
}

.rl-next {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
}

/*------------------------------------
                declareBoard
------------------------------------*/

.rl-declareBoard-header {
    background-color: #333;
    text-align: center;
    padding-right: 15px;
    padding-left: 15px;
}

.rl-bg-fixed {
    background-attachment: fixed;
}

.rl-bg-scroll {
    background-attachment: scroll;
}

ul.circle-bullet{
    list-style: none;
    counter-reset: count;
    padding-left: 23px;
}
.circle-bullet > li:before {
    content: "● \00a0";
    font-family: 'Roboto', sans-serif;
}

.circle-bullet > li {
    list-style: none;
    text-indent : -20px;
    margin-bottom: 17px;
}

/*--------------- custom--------------------- */
.contact_us_form{ background: transparent !important;}


/* gtn-arrow-button */
.gtn-arrow-button {
    display: inline-block;
    margin: 0px 8px;
    border: 2px solid #5a5a5a;
    border-radius: 22px;
    height: 44px;
    width: 44px;
    color: #5a5a5a;
    cursor: pointer;
}

.gtn-arrow-button:hover {
    background-color: #5a5a5a;
    color: #f0f0f0;
}

.gtn-arrow-button[disabled], 
.gtn-arrow-button[disabled]:hover,
.gtn-arrow-button.disabled, 
.gtn-arrow-button.disabled:hover{
    /* background-color: #f0f0f0;
    color: #dddddd;
    cursor: no-drop;
    border: 2px solid #aaaaaa; */
    opacity: 0.5;
    pointer-events: none;
}

.gtn-arrow-button:hover {
    background-color: #5a5a5a;
    color: #f0f0f0;
}

.gtn-arrow-button > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.gtn-arrow-button > div > i {
    font-size: 30px;
    font-weight: 700;
}

.gtn-arrow-button > div > i {
    font-size: 30px;
    font-weight: 700;
}

/*---------------- become-area -------------- */
.rl-become .rl-item-left {
    background-image: url(../../images/certified-trainers/certified-trainer_left.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    min-height: 700px;
}

.rl-become .rl-item-right,
.rl-become .rl-item-center {
    background-color: #403e3f;
}

.rl-become .rl-item-left-info {
    margin-left: calc(34.29%);
    padding-right: calc(2.1875vw + 28px);
    padding-left: 15px;
}

.rl-become .rl-item-right-info {
    margin-right: calc(34.29%);
}

.rl-become .rl-item-icon-contaner {
    background-color: #5b595a;
    width: calc(1.875vw + 74px);

}

.rl-become .rl-item-icon-contaner,
.rl-become .rl-item-list-info {
    padding-left: calc(0.625vw + 8px);
    padding-right: calc(0.625vw + 8px);
}

.rl-become .rl-item-list-info {
    width: calc(100% - 1.875vw - 74px);
}

.rl-become .rl-flex-nowrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.rl-become .rl-item-title {
    color: #ffb71d;
    padding-top: 5px;
    padding-bottom: 15px;
}

.rl-become .s-for-info li {
    font-size: calc(0.125vw + 13.6px);
    line-height: 1.5;
    font-weight: 300;
}

.rl-become .rl-item-icon {
    position: absolute;
    left: calc(-1.875vw + -74px);
    top: 0;
}

.rl-become .rl-declareBoard-img {
    margin-top: calc(-0.8611410118406888vw + -3.466092572658773px);
    width: calc(22.820236813778255vw + 73.85145317545748px);
}

.mask-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(242, 242, 242, 0.7);
    opacity: 0.8;
}

@media screen and (max-width: 1440px) {
    .rl-become .rl-item-left-info {
        margin-left: calc(13.44%);
    }

    .rl-become .rl-item-right-info {
        margin-right: calc(13.44%);
    }
}

@media screen and (max-width: 1199px) {
    .rl-become .rl-item-left {
        flex: auto !important;
        width: 100%;
        min-height: auto;
    }

    .rl-become .rl-item-left-info {
        margin: 0;
        padding-left: calc(2.1875vw + 28px);
        text-align: left;
    }

    .rl-become .rl-item-center,
    .rl-become .rl-item-right {
        flex: auto !important;
        width: 50%;
    }

    .rl-become .rl-item-right-info {
        margin-right: 0;
    }
}

@media screen and (max-width: 800px) {

    .rl-become .rl-item-center,
    .rl-become .rl-item-right {
        width: 100%;
    }

    .rl-become .rl-item-center .rl-item-icon-contaner,
    .rl-become .rl-item-center .rl-item-list-info {
        padding-bottom: 0;
    }

    .rl-become .rl-item-right .rl-item-icon-contaner,
    .rl-become .rl-item-right .rl-item-list-info {
        padding-top: 0;
    }

    .rl-hide-800{
        display: none;
    }

    .rl-become .rl-item-icon {
        left: calc(-1.5625vw + -72px);
        width: 55px;
    }
}

@media screen and (max-width: 767px) {
    .rl-become .rl-item-left-info {
        margin-left: 15px;
    }

    .rl-become .rl-item-right-info {
        margin-right: 15px;
    }

}