:root {
    --site-theme-background:#000000;
    --site-theme-foreground:#ffffff;
    --site-theme-highlight:#cc0607;

    --color-red:#cc0607;
    --color-dark-gray:#999999;
    --color-gray:#f5f5f5;
    --color-green:#209058;
    --color-yellow:#fed218;

    --color-nav-foot-item:#a2a9af;
    --color-nav-foot-item:#ffffff;

    --color-placeholder-level-1:#d2e69c;
    --color-placeholder-level-2:#8fd9a8;
    --color-placeholder-level-3:#28b5b5;
    --color-placeholder-level-4:#4b778d;
}

.section_container.trunk {
    width: auto;
}
.bgcolor_black {
    background-color: black;
}
body .trunk {
    width: auto;
    /*
    height: 100vh;
    */

    position: relative;
}
body .trunk .section, 
body .trunk .subsection, 
body .trunk .section_auto {
    position: relative;
    /*
    margin-top: 30px;
*/
}
body .trunk .content_pane { 
    padding: 5rem 0;
}
body .trunk .content_pane > .caption { 
    margin-bottom: 3rem;
}

.transparent {
    background-color: transparent;
}

.gydialog .gyicon.close {
    width: 20px;
    height: 20px;
    background-image: url(/images/icons/close_8a8a8a_200.png);
}
.mb_hide {
}
.mb_show {
    display: none;
}
/******************************************************************************
 * Header container
 ******************************************************************************/
.fixed_header {
    width: 100%;
    margin: 0;
    padding: 0;

    position: fixed;
    left: 0px;
    top: 0px;

    z-index: 1000000100;
}
.shadow_header {
    /*
    -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    */
    -moz-box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

/******************************************************************************
 * Side container
 ******************************************************************************/
.sidepane {
    position: absolute; 

    width: auto;
    height: 100%;

    z-index: 1000000000;
}
.sidepane.left {
    left: 0px;
    bottom: 0px;

    background-color: var(--site-theme-background);
    color: var(--site-theme-foreground);
}
.sidepane.right {
    right: 0px;
    bottom: 0px;
}
.sidepane > .section {
    width: 100%;
}
.sidepane.left .sidemenu {
    -moz-box-shadow: 5px -5px 6px 3px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 5px -5px 6px 3px rgba(0, 0, 0, 0.15);
    box-shadow: 5px -5px 6px 3px rgba(0, 0, 0, 0.15);
}
.sidepane.left .sidemenu .caption {
    width: 100%;
    height: 50px;
}
.sidepane.left .sidemenu .hbreak {
    border-color: #cccccc !important;
    background-color: #cccccc !important;
    width: 100%;
    height: 1px;
}
.sidepane.left .sidemenu .menu {
    width: 100%;
    height: 50px;
    font-size: 13px;
}
.sidepane.left .sidemenu .menu.clickable:hover,
.sidepane.left .sidemenu .menu.clickable:focus {
    background-color: #ffc107;
    color: #222222;
    font-size: 14px;
}
.sidepane.left .sidemenu .menu .gyicon {
    width: 40px;
    height: 40px;
    margin: 5px;
    background-size: 18px;
}
.sidepane.left .sidemenu .menu .name {
    width: 130px;
}
.sidepane.left .sidemenu .menu.caption .gyicon {
    font-size: 20px;
    font-weight: bold;
    color: white;
}
.sidepane.left .sidemenu .menu_group.bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
}
.sidepane.left .sidemenu .menu.notifier .gyicon {
    background-size: 24px;
    background-image: url(/images/icons/notice_white_200.png);
}
.sidepane.left .sidemenu .menu.settings .gyicon {
    background-image: url(/images/icons/settings_white_200.png);
}






@media screen and (max-width: 1920px) {
    
    body .section ,
    body .subsection {
        width: 1280px !important;
        max-width: 1280px !important;
    }
}
@media screen and (max-width: 1280px) {
   
    body .section ,
    body .subsection {
        width: 1100px !important;
        max-width: 1100px !important;
    }
}
@media screen and (max-width: 1100px) {
    
 
    body .section ,
    body .subsection {
        /*
        width: 100vw !important;
        max-width: 100vw !important;
        */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px;
    }

    body .trunk .content_pane { 
        padding: 40px 10px;
    }
    body .trunk .content_pane > .caption { 
        margin-bottom: 20px;
    }
    .mb_hide {
        display: none;
    }
    .mb_show {
        display: flex;
    }
    .h_justify_top {
        flex-wrap: wrap;
    }
    .h_justify_even {
        flex-wrap: wrap;
    }

  

    .content_pane.aboutus .content{
        width: auto !important;
    }
    .gydialog.connection {
        top: 80px;
        height: calc(100vh - 120px);
    }
    .gydialog.connection .gydialog_content {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }
    .gydialog.connection .gydialog_content .body {
        padding: 0 30px 20px 30px;
    }
    .gydialog.connection .contact .input_box{
        width: 100%;
    }
    .gydialog.connection .contact .input_box input {
        width: 100%;
        margin-bottom: 10px;
    }
}
/***************************************************************************
 * 
 * Copyright (c) 2018 Guiyum, Inc. All Rights Reserved.
 * 
 **************************************************************************/
 
/**
 * @file guiyum.css
 * @author Alex Li(alex.li@guiyum.com)
 * @date 2018/01/10 10:02:10
 * @brief Company wide CSS Document 
 *  
 **/
@charset "UTF-8";
/***************************************************************************************************
 *
 * Section: Global HTML Element Style
 *
 **************************************************************************************************/
:root {
    --color-red:#cc0607;
    --color-green:#209058;
    --color-yellow:#fed218;
    --color-gray:#cdcdcd;
    --color-pink:#fc6379;

    --color-dark-gray: #adadad;

    --color-light-yellow:#ffc107;
    --color-light-gray:#f5f5f5;
    --color-light-black:#222222;
    --color-light-blue:#f1f4f9;

    --color-placeholder-light-gray:#f5f5f5;
    --color-placeholder-gray:#dadada;

    --color-placeholder-1:#d2e69c;
    --color-placeholder-2:#8fd9a8;
    --color-placeholder-3:#28b5b5;
    --color-placeholder-4:#4b778d;

    --site-theme-background:#222222;
    --site-theme-foreground:#ffffff;
    --site-theme-accent:var(--color-red);
}



/* Placeholder */
*::-webkit-input-placeholder {
    font-size: inherit;
    color: #757575;
}
*:-moz-placeholder {
    font-size: inherit;
    /* FF 4-18 */
    color: #757575;
    opacity: 1;
}
*::-moz-placeholder {
    font-size: inherit;
    /* FF 19+ */
    color: #757575;
    opacity: 1;
}
*:-ms-input-placeholder {
    font-size: inherit;
    /* IE 10+ */
    color: #757575;
}
*::-ms-input-placeholder {
    font-size: inherit;
    /* Microsoft Edge */
    color: #757575;
}
::placeholder {
    font-size: inherit;
    /* modern browser */
    color: #757575;
}

/* Remove the shinning outline on chrome */


hr, .hbreak {
    background-color: transparent;

    width: 100%;
    height: 0;

    margin: 10px auto;
    /*
    max-width: 1200px;
    */

    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/*
.hbreak {
    margin: 7px 0;
}
*/

.vbreak {
    display: inline-block;
    width: 1px;
    min-width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
}

.hbreak_hidden, .vbreak_hidden {
    background-color: transparent;
    margin: 0;
    padding: 0;
    border: 0;

    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
}

.inline {
    display: inline;
}
.fixed {
    position: fixed !important;
    left: 0px;
    top: 0px;
}
.relative {
    position: relative !important;
}
.absolute {
    position: absolute !important;
}
.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    left: 0px;
    top: 0px;
}

.obsolete_pos_left_top {
    left: 0px;
    top: 0px;
}
.obsolete_pos_left_center_notworkonie {
    left: 0px;
}
.obsolete_pos_left_bottom {
    left: 0px;
    bottom: 0px;
}
.obsolete_pos_right_top {
    right: 0px;
    top: 0px;
}
.obsolete_pos_right_center_notworkonie {
    right: 0px;
}
.obsolete_pos_right_bottom {
    right: 0px;
    bottom: 0px;
}

.nopadding {
    padding: 0 !important;
}
.nomargin {
    margin: 0 !important;
}
.noborder {
    border: none !important;
}
.noshadow {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.fullsize {
    width: 100%;
    height: 100%;
}
.fullheight {
    height: 100%;
}
.fullwidth {
    width: 100%;
}
.halfwidth {
    width: 50%;
}
.halfheight {
    height: 50%;
}
.autowidth {
    width: auto !important;
}
.clickable {
    cursor: pointer;
    display: inline-block;
}
.clear-none { clear: none; }
.clear-right { clear: right; }
.clear-left { clear: left; }
.clear-both { clear: both; }

.disable {
    pointer-events: none !important;
    opacity: 0.3;
}
.hide {
    display: none !important;
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
.transparent {
    background-color: transparent;
}
/***************************************************************************************************
 *
 * Section: Global layout style
 *
 **************************************************************************************************/
.section_container {
    position: relative;
    width: 100%;
    width: auto;
}
.section {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.section_auto{
    position: relative;
    width: auto;
    margin: 0 auto;
}
.section_caption{
    position: relative;
    top: 0px;
    left: 0px;
    
	width:100%;
	min-height: 140px;
}
.section_content{
	width:100%;
    padding-top: 10px;
    padding-bottom: 30px;
}
.gyflow {
    flex-wrap: wrap;

    display: flex; 
    align-items: flex-start;
    justify-content: flex-start;
}
.gyflow_item {
    position: relative;
}
.gyflex_list {
    flex-wrap: wrap;

    display: flex; 
    align-items: flex-start;
    justify-content: space-between;
}
.gyflex_list_item {
    position: relative;
}
.gyrow,
.row {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    /* stretch other child's height according to highest child */
    align-items: stretch;
}
.gycol,
.col {
    /* make all columns have the same height*/
    height: unset;
}
/* centering block contents both horizonally and vertically */
.hv_center {
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-align: center;
}
.h_center {
    display: flex;

    align-items: center;
    justify-content: center;
    text-align: center;
}
/* align in horizonal, and position vertical in center*/
.h_v_center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* centering block content horizonally and top vertically */
.h_top_center {
    display: flex;

    justify-content: center;
    text-align: center;
}
.h_bottom_center {
    display: flex;

    align-items: flex-end;
    justify-content: center;
    text-align: center;
}
.h_left_top{
    display: flex; 

    align-items: flex-start;
    justify-content: flex-start;
}
.h_left_center {
    display: flex; 

    align-items: center;
    justify-content: flex-start;
}
.h_left_bottom {
    display: flex; 

    align-items: flex-end;
    justify-content: flex-start;
}
.h_right_top {
    display: flex; 
    align-items: flex-start;
    justify-content: flex-end;
}
.h_right_center {
    display: flex; 
    align-items: center;
    justify-content: flex-end;
}
.h_right_bottom {
    display: flex; 
    align-items: flex-end;
    justify-content: flex-end;    
}
.h_justify_top {
    display: flex; 
    align-items: flex-start;
    justify-content: space-between;
}
.h_justify_center {
    display: flex; 
    align-items: center;
    justify-content: space-between;
}
.h_justify_bottom{
    display: flex; 
    align-items: flex-end;
    justify-content: space-between;
}
.h_justify_around {
    display: flex; 
    align-items: center;
    justify-content: space-around;
}
.h_justify_even {
    display: flex; 
    align-items: center;
    justify-content: space-evenly;
}
.v_center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.v_h_center {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    text-align: center;
}
.v_top_center {
    display: flex; 
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;
}
.v_bottom_center {
    display: flex; 
    flex-direction: column;

    align-items: center;
    justify-content: flex-end;
}
.v_left_top {
    display: flex; 
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;
}
.v_left_center {
    display: flex; 
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;
}
.v_left_bottom{
    display: flex; 
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-end;
}
.v_right_top {
    display: flex; 
    flex-direction: column;

    align-items: flex-end;
    justify-content: flex-start;
}
.v_right_center {
    display: flex; 
    flex-direction: column;

    align-items: flex-end;
    justify-content: center;
}
.v_right_bottom{
    display: flex; 
    flex-direction: column;

    align-items: flex-end;
    justify-content: flex-end;
}
.v_justify_left {
    flex-direction: column;

    display: flex; 
    align-items: flex_start;
    justify-content: space-between;
}
.v_justify_right {
    flex-direction: column;

    display: flex; 
    align-items: flex-end;
    justify-content: space-between;
}
.v_justify_center {
    flex-direction: column;
    
    display: flex; 
    align-items: center;
    justify-content: space-between;
}
.v_justify_around {
    flex-direction: column;

    display: flex; 
    align-items: center;
    justify-content: space-around;
}
.v_justify_even {
    flex-direction: column;

    display: flex; 
    align-items: center;
    justify-content: space-evenly;
}


/* DEPRECATED: please use h_*, v_*, hv_* positioning style */

/*
.center_block {
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-align: center;
}
.top_center_block{
    display: flex;
    justify-content: center;
    
    text-align: center;
}
.bottom_center_block{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    
    text-align: center;
}
.left_center_block{
    display: flex; 
    align-items: center;
    justify-content: flex-start;
}
.left_top_block{
    display: flex; 
    align-items: flex-start;
    justify-content: flex-start;
}
.left_bottom_block{
    display: flex; 
    align-items: flex-end;
    justify-content: flex-start;
}
.right_center_block{
    display: flex; 
    align-items: center;
    justify-content: flex-end;
}
.right_top_block{
    display: flex; 
    align-items: flex-start;
    justify-content: flex-end;
}
.right_bottom_block{
    display: flex; 
    align-items: flex-end;
    justify-content: flex-end;    
}
.justify_center_block{
    display: flex; 
    align-items: center;
    justify-content: space-between;
}
.justify_around_block{
    display: flex; 
    align-items: center;
    justify-content: space-around;
}
.justify_even_block{
    display: flex; 
    align-items: center;
    justify-content: space-between;
}

.column_center_block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.column_top_block{
    display: flex; 
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}
.obsolete_block_relative {
    position: relative;
}
.obsolete_block_absolute {
    position: absolute;
}

*/
.flow_button {
    display: inline-block;
}
.gyresizable {
}
.gyresizable::after {
    content: '';
    background-color: #dadada;

    position: absolute;
}
.gyresizable[data-resize=left]::after {
    left: 0px;
    top: 0px;

    width: 2px;
    height: 100%;
    cursor: ew-resize;
}
.gyresizable[data-resize=top]::after {
    left: 0px;
    top: 0px;

    width: 100%;
    height: 2px;
    cursor: ns-resize;
}
.gyresizable[data-resize=right]::after {
    right: 0px;
    top: 0px;

    width: 2px;
    height: 100%;
    cursor: ew-resize;
}
.gyresizable[data-resize=bottom]::after {
    left: 0px;
    bottom: 0px;

    width: 100%;
    height: 2px;
    cursor: ns-resize;
}

.gymask {
    /* position to lef top corner*/
	position: absolute;
	top:0px;
    left: 0px;
	width: 100%;
	height: 100%;
    
/*	background-color: #000000;
	opacity: 0.3;
	filter:alpha(opacity=30);*/
    
    opacity: 1;
    background: rgba(0,0,0,0.5);
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.banner {
    width: 100%;
    /* give a absolute height in case that banner doesn't work properly*/
/*    height: 100%;
*/
    position:relative;
	z-index: 0;

    background-size: cover;
    background-position: center;
    
    /*overrise this attribute for different size*/
    height: 400px;
}
.banner_layer_background{
	position:relative;
	z-index: 0;

    background-size: cover;
    background-position: center;
    
    /*overrise this attribute for different size*/
    height: 400px;
}

.banner_layer_cover {
    /* position to lef top corner*/
	position: absolute;
	top:0px;
    left: 0px;
    
    /* full width and height as banner_layer_img*/
	width: 100%;
	height: 100%;
    
	background-color: #000000;
	opacity: 0.3;
	filter:alpha(opacity=30);
    
	z-index: 1;
}
.banner_layer_caption {
    position: absolute;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
        
	z-index: 2;
}
.banner_layer_caption_h1{
    font-size: 40px;
    font-weight: 300;
	letter-spacing: 3px;
}
.banner_layer_caption_h2{
	font-size: 14px;
    font-weight: 100;
    letter-spacing: 1px;
}
.show_box .label {
    min-width: 3rem;
    font-weight: bold;
    margin-bottom: 6px;
}
.show_box .output {
    width: -webkit-fill-available;
    box-sizing: content-box;

    height: 30px;
    line-height: 30px;
    border: none;
}
.show_box.inline .label {
    margin: 0; 
}
.show_box.inline .output {
    padding-left: 0.5rem;
    padding-right: 1rem;
}
/****************************************************************************************************
 *
 * Section: Global Text Style
 *
 ***************************************************************************************************/
.text_wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
}

.text_nowrap {
    word-break: keep-all;
    white-space: nowrap;
}

.text_clip {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.text_dotted_clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* deprecated */
.text_cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* deprecated */
.text_dotted_cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text_formatted {
    white-space: pre;
}
.text_justify {
    text-align: justify;
}
.text_center {
    text-align: center;
}
.text_left {
    text-align: left;
}
.text_right {
    text-align: right;
}
.bold {
    font-weight: bold;
}
.superscript {
    vertical-align: super;
}
.subscript {
    vertical-align: sub;
}

.paragraph {
    font-size: 14px;
    font-weight: 150;
    
/*    letter-spacing: 1px;
*/    padding: 10px 0 10px 0;

    line-height: 1.5;
}

.chinese_paragraph {
    font-size: 14px;
    font-weight: 350;
    
    text-indent: 28px;
    letter-spacing: 1px;
    padding: 10px 0 10px 0;

    line-height: 1.5;
}
.caption_h1 {
    font-size: 40px;
    font-weight: normal;
	letter-spacing: 3px;

    margin-top: 15px;
    margin-bottom: 25px;
}
.caption_h2{
	font-size: 36px;
    font-weight: normal;
    letter-spacing: 2px;

    margin-top: 5px;
    margin-bottom: 15px;
}
.caption_h3 {
    font-size: 30px;
    font-weight: normal;
	letter-spacing: 2px;

    margin-top: 5px;
    margin-bottom: 15px;
}
.caption_h4{
	font-size: 24px;
    font-weight: normal;
    letter-spacing: 2px;

    margin-top: 5px;
    margin-bottom: 15px;
}
.caption_h5{
	font-size: 18px;
    font-weight: normal;
    letter-spacing: 2px;

    margin-top: 5px;
    margin-bottom: 15px;
}
.caption_h6{
	font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;

    margin-top: 5px;
    margin-bottom: 15px;
}
.caption_h7{
	font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
}
/***************************************************************************************************
 *
 * Section: Colors
 *
 **************************************************************************************************/

.text_placeholder {
    width: 100%;
    height: 1rem;
    margin: 0.3rem auto;
    background-color: var(--color-placeholder-gray);
}
/***************************************************************************************************
 *
 * Section: Animation
 *
 **************************************************************************************************/
@keyframes turnX{
    0%{transform:rotateX(0deg);}
    100%{transform:rotateX(360deg);}
}
@keyframes turnY{
    0%{transform:rotateY(0deg);}
    100%{transform:rotateY(360deg);}
}
@keyframes turnZ{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
.rotatex {
    animation-name: turnX;
    animation-duration:3s;
    animation-iteration-count:1;
}
.rotatey {
    animation-name: turnY;
    animation-duration:3s;
    animation-iteration-count:1;
}
.rotatez {
    animation-name: turnZ;
    animation-duration:3s;
    animation-iteration-count:1;
}
 
@-webkit-keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.fadein {
	animation-name: fadein;
 	animation-duration: 10s;
 	animation-fill-mode: both;

	-webkit-animation-name: fadein;
	-webkit-animation-duration: 10s;
	-webkit-animation-fill-mode: both;
}

@-webkit-keyframes fadeout {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeout {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.fadeout {
	animation-name: fadeout;
 	animation-duration: 10s;
 	animation-fill-mode: both;

	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 10s;
	-webkit-animation-fill-mode: both;
}


/****************************************************************************************************
 *
 * Section: Global guiyum UI control
 *
 ***************************************************************************************************/
.gybackground {
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.gyicon {
    width: 100px;
    height: 100px;
    background-size: 30px;

    display: inline-flex;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
}
.gyicon_button {
    width: 30px;
    height: 30px;
    background-size: 30px;

    display: inline-flex;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    cursor: pointer;
}

.gylist {
    border-radius: 0px;
}
.gylist_item {
    display: list-item;
    list-style-position: inside;
    list-style-type: none;
}

.gyanchor {
    cursor: pointer;
}
.gylink {
    cursor: pointer;
    text-decoration: underline;
    color: #007bff;
}
.gybutton {
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;   

    border: 1px solid black;
    border-radius: 2px;
    padding: 0;

    margin: 2px 2px 2px 2px;

    background-color: var(--site-theme-background);
    color: var(--site-theme-foreground);
}
.gybutton:hover,
.gybutton:focus{
    outline: none;
    background-color: var(--site-theme-highlight);
    color: var(--site-theme-foreground);
}

.gyloader,
.gychoose {
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background-color: transparent;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;   

    padding: 0;
    color: #333333;
    
    height: 30px;
    margin: 2px 2px 2px 2px;
}
.gyloader > .choose_wrapper,
.gychoose > .choose_wrapper {
    width: 100px;
    height: 100%;

    border: 1px solid black;
    border-radius: 2px;
    position: relative;

    /* left top */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.gyloader > .choose_wrapper > .choose_label,
.gychoose > .choose_wrapper > .choose_label {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.gyloader > .choose_wrapper > .choose_select,
.gychoose > .choose_wrapper > .choose_select {
    width: 100%;
    height: 100%;

    position: absolute;
    
	opacity: 0;
	filter:alpha(opacity=0);
}
.gyloader > .choose_input,
.gychoose > .choose_input {
    height: 100%;
}
.gycircle {
    width: 40px;
    height: 40px;
    border: 1px solid black;
    border-radius: 50%;
}
.gylistinput {
    width: 100%;
    height: 100%;
    position: relative;
    /*
    border: 1px solid #dadada;
    */
}
.gylistinput input.g_input {
    width: 100%;
    height: 100%;
    color: transparent;
}
.gylistinput .g_bag {
    padding-left: 5px;
}
.gylistinput .g_bag .g_item {
    position: relative;
    height: 20px;
    border: 1px solid #DADADA;
    border-radius: 10px;
    padding: 0 15px;
    word-break: keep-all;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
}
/*
.gylistinput .g_additem:before{
    content: "";
    display: block;
    width: 45px;
    height: 20px;
    background: url(/images/icons/addtag.png) center no-repeat;
    background-size: 100%;
}
*/
.gylistinput .g_delitem{
    position: absolute;
    right: 0px;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(/images/icons/delete_cross.png) center no-repeat;
    background-size: 60%;
}

.gylistinput .g_iteminput {
    height: 20px;
    border-radius: 10px;
}
.gyscrollbar {
    height: 200px;
    overflow: auto;
}
.gyscrollbar::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
.gyscrollbar::-webkit-scrollbar-thumb {
    background-color: #000000;
}
.gyscrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.gyselect {
    position: relative;
}
.gyselect input.g_input {
    width: 100%;
    height: 30px;
    background-color: #efefef;
    border: none;
    padding-left: 15px;

    cursor: pointer;
    display: inline-block;
}
.gyselect .g_icon {
    width: 30px;
    height: 30px;
    position: absolute;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.gyselect .optionlist {
    width: 100%;
}
.gyselect .optionlist .option {
    cursor: pointer;
    text-align: left;
}
.gyselect.gy_dropdown {
    height: 30px;
}
.gyselect.gy_dropdown .g_show {
    width: 100%;    
    height: 100%;

    background-color: #efefef;
    border: none;
    padding-left: 15px;

    text-align: center;
}
.gyselect.gy_dropdown .g_input {
    position: absolute;
    width: 100%;    
    height: 100%;

    background-color: transparent;
    color: transparent;

    padding-left: 30px;
}
.gyselect.gy_dropdown {
    width: 100px;
}
.gyselect.gy_dropdown .optionlist {
    min-width: 100%;
    border-radius: 0px;
    height: fit-content;
    padding: 10px 0px;
}
.gyselect.gy_dropdown .optionlist > .option {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    font-size: 14px;
}
.gyselect.gy_dropdown .optionlist > .option:hover,
.gyselect.gy_dropdown .optionlist > .option:focus {
    background-color: var(--site-theme-accent);
    color: white;
}
.gyselect[data-mode="multiple"] .g_input,
.gyselect.gy_tile .g_input {
    display: none;
}
.gyselect[data-mode="multiple"] .option,
.gyselect.gy_tile .option {
    width: 80px;
    height: 30px;
    line-height: 30px;

    padding: 0px 10px;
    border: 1px solid #dadada;

    text-align: center;
}
.gyselect[data-mode="multiple"] .option.selected,
.gyselect.gy_tile .option.selected {
    background-color: var(--site-theme-accent);
    border: none;
    color: white;
}

.gy_dropdown {
    position: relative;
}
.gy_dropdown .gy_drop_toggle {
    height: 100%;
}
.gy_dropdown .gy_drop_menu {
    background-color: white;
    border: 1px solid #efefef;

    position: absolute;
    will-change: transform;
    top: 0px;
    left: 0px;

    z-index: 1000;

    -moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.1);

    display: none;
}
.gydialog {
    width: 100%;
    height: 100%;

    position: fixed !important;
    left: 0px;
    top: 0px;

    z-index: 1000000200;
    background-color: #181818a3;
}
.gydialog_content {
    width: 500px;
    background-color: white;
    
    /* v_justify_center */
    flex-direction: column;
    
    display: flex; 
    align-items: center;
    justify-content: space-between;
}
.gydialog_content > .head{
    width: 100%;
    padding: 10px;;
}
.gydialog_content > .head .gyicon.close {
    width: 20px;
    height: 20px;

    background-position: right top;
    background-color: unset;

    /*
    background-image: url(/images/icons/close_8a8a8a_200.png);
    */

    cursor: pointer;
}
.gydialog_content > .head .caption ,
.gydialog_content > .head .title {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 5px;
}

.gydialog_content > .body {
    width: 100%;
    height: -webkit-fill-available;

    padding: 10px 20px;
}
.gydialog_content > .foot {
    width: 100%;
    padding: 1rem;
}
.gypager {
    /*center in both vertically and horizontally*/
    margin-top: 3rem;
}
.gypager .page {
    width: 30px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}
.gypager .page:hover {
    background-color: var(--color-dark-gray);
}
.gypager .page.active {
    background-color: var(--site-theme-accent);
    color: var(--site-theme-foreground);
}
.gypager .page_first,
.gypager .page_prev,
.gypager .page_next {
    width: auto;
    /*
    width: 80px;
    */
    height: 30px;
    line-height: 30px;
    
    cursor: pointer;

    background-color: var(--color-light-gray);
    color: black;
    margin: 0 3px;
}
.gypager .page_first .text {
    padding-right: 0.8rem;
}
.gypager .page_prev .text {
    padding-right: 0.8rem;
}
.gypager .page_next .text {
    padding-left: 0.8rem;
}
.gypager .page_first .gyicon {
    background-size: 0.9rem;
    background-image: url(/images/icons/pager_first_200.png);
}
.gypager .page_prev .gyicon {
    background-size: 0.9rem;
    background-image: url(/images/icons/pager_prev_200.png);
}
.gypager .page_next .gyicon {
    background-size: 1rem;
    background-image: url(/images/icons/pager_next_200.png);
}
.gytable {
    border: none;
}
.gytable th {
    font-size: 1.1rem;
}
.gytable th,
.gytable td {
    border: 1px solid #dadada;
}
.gytable.noborder th,
.gytable.noborder td {
    border: none;
}
.gytable.nopadding th,
.gytable.nopadding td {
    padding: 0;
}
.gytable > .head.noborder th,
.gytable > .head.noborder td {
    border: none;
}
.gytable > .head.nopadding th,
.gytable > .head.nopadding td {
    padding: 0;
}
.gytable > .body.noborder th,
.gytable > .body.noborder td {
    border: none;
}
.gytable > .body.nopadding th,
.gytable > .body.nopadding td {
    padding: 0;
}
.gytable > .foot.noborder th,
.gytable > .foot.noborder td {
    border: none;
}
.gytable > .foot.nopadding th,
.gytable > .foot.nopadding td {
    padding: 0;
}

.gytoggle {
    cursor: pointer;
}

.obsolete_background_image {
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.cover_container {
    position: relative;
}
.cover_background {
    width: 100%;
}
.cover {
    /* position to lef top corner*/
	position: absolute;
	top:0px;
    left: 0px;
    
    /* full width and height as banner_layer_img*/
	width: 100%;
	height: 100%;
}

/**************************************************************************************************
 *
 * Section: Bootstrap
 *
 **************************************************************************************************/

/* remove the bootstrap dropdown arrow */
.dropdown-toggle::after {
    display: none;
}

.modal-header {
    padding: 0.5rem;
}
.modal-header .close {
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    font-size: 1.3rem;
}
.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
        }
        
        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }

        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }
    }

    .carousel-control {
        z-index: 2;
    }
}

/**************************************************************************************************
 *
 * Section: Meida Query
 *
 **************************************************************************************************/
@media screen and (max-device-width: 768px) {
    .section, .subsection {
    }
}
@media screen and (min-width: 768px) {
  	.section, .subsection {
   		max-width: 768px;
        margin: 0 auto;
    }
}
@media screen and (min-width: 992px) {
  	.section, .subsection {
   		max-width: 992px;
        margin: 0 auto;
    }
}
@media screen and (min-width: 1200px) {
  	.section, .subsection {
   		max-width: 1100px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1920px){
	:root {
    --section-width: 1280px;
  }
}

.goolton_banner {
}
.goolton_banner .caption {
    padding-top: calc(var(--section-width) * 5 / 24 - 260 * var(--section-width) / (12 * 160));
}
.goolton_banner .caption .hbreak {
    width: 60%;
    border-top: 1px solid white;
}
.challenge .item {
/*
    width: calc(var(--section-width) / 3 - 100px);
    */
    width: calc(var(--section-width) / 3 - 50px);
}
.challenge .item .title {
    font-weight: bold;
}
.challenge .item .desc {
    color: #6c757d;
}
.challenge .item .gyicon {
    width: 100px;
    height: 100px;

    /*
    background-size: 70%;
    border: 3px solid var(--site-theme-highlight);
    */

    background-color: white;
}
 
 .item {
    margin-bottom: 30px;
}
 .item .title {
    font-weight: bold;
    color: red;
}
 .item .desc {
    color: #6c757d;
    font-size:14px;
}
 .gybackground {
    width: calc(var(--section-width) / 2);
    height: calc(var(--section-width) / 3);
    background-size: cover;
}
.scenario {
    color: white;
}
.scenario .gytoggle_bar {
    margin-top: 10px;
    margin-bottom: 40px;
}
.scenario .gytoggle_bar .vbreak {
    width: 20px;
    background: transparent;
}
.scenario .gytoggle.active {
    color: var(--site-theme-highlight);
}
.scenario .item .gybackground {
    width: calc(var(--section-width) * 3 / 4 );
    min-width: calc(var(--section-width) * 3 / 4 );
    height: calc(var(--section-width) * 21 / 64 );

    background-size: cover;
}
.scenario .item .desc {
    padding-left: 10px;
}
@media screen and (max-width: 1100px) {
     .text {
        width: 100%;
        padding:0;
    }
     .gybackground {
        width: auto;
        height: auto;
    }
    .challenge .item {
        margin: 10px 0;
        width: 100%;
    }
    .scenario .gytoggle_bar .vbreak {
        width: 12px;
    }
    .scenario .item .gybackground {
        width: calc(var(--section-width) - 2rem);
        min-width: calc(var(--section-width) - 2rem);
        height: calc((var(--section-width) - 2rem) * 7 / 16);
    }
    .scenario .item .text {
        padding-left: unset;
        padding-top: 10px;
    }
}