/* common */
:root {
    --primary-color: #01117b;
    --primary-color-1: #0182f7;
    --white-color: #fff; 
    --gray-color: #a0a0a0;
    --gray-color-1: #434343;
}
body{
    font-family: Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
.lang{
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
}
.lang span {
    color: white;
    font-size: 1em;
    font-weight: 600;
    padding: 0 3px;
}
.lang span a{
    font-size: 0.8em;
    color: white;
}
input[type=radio],
input[type=checkbox],
input[type=file] {width: 100%; height: 100%; position: absolute; left: 0; top: 0; margin: 0 !important; opacity: 0;}
.radio-inline, 
.radio > label {position: relative; background: url('../../img/radio.png')no-repeat left 3px/13px;}
.radio-inline.label_act, 
.radio > label.label_act {background-image: url('../../img/radio_act.png');}
.checkbox-inline, 
.is_checkbox, 
.is_checkbox > label, 
.checkbox > label {position: relative; background: url('../../img/checkbox.png')no-repeat left 3px/15px;}
.checkbox-inline.label_act, 
.is_checkbox.label_act, 
.is_checkbox > label.label_act, 
.checkbox > label.label_act {background-image: url('../../img/checkbox_act.png');}
.checkbox-inline.disabled, 
.radio-inline.disabled {opacity: .65;}

.color_red {color: red;}
.color_primary {color: var(--primary-color);}

.fz_18 {font-size: 1.8rem;}
.fz_16 {font-size: 1.6rem;}

.line {border-top: 1px dotted #aaa; margin: 20px auto;}

#app {min-height: 100vh; position: relative;}

#content {flex: 1; background: url('https://carbonconf.7-event.com/reg/images/login_bg.jpg')no-repeat center/100% 100%;}

.btn {outline: none !important;}
.btn_primary {background-color:#0051ab; color: var(--white-color) !important;}
.btn_gray {background-color: var(--gray-color); color: var(--white-color) !important;}

.content_center {display: flex; flex-direction: column;}
.content_center #main {flex: 1; display: unset; align-items: center;}

.form .form-control {box-shadow: none;}

/* layer */
body .layui-layer-btn > a:nth-child(1) {border-color: var(--primary-color); background-color: var(--primary-color); color: var(--white-color);}

/* bootstrap-select */
body .bootstrap-select > .dropdown-toggle, 
body .bootstrap-select > .dropdown-toggle:hover,
body .bootstrap-select > .dropdown-toggle:focus {outline: none !important; background-color: var(--white-color) !important;}
body .bootstrap-select > .dropdown-toggle.disabled {background-color: #eee !important; opacity: 1;}
.bootstrap-select .dropdown-menu>.active>a, 
.bootstrap-select .dropdown-menu>.active>a:focus, 
.bootstrap-select .dropdown-menu>.active>a:hover {background-color: var(--primary-color);}

/* header */

/* footer */
#footer {position: sticky; top: 100vh; background-color: #0051ab; color: var(--white-color); padding: 30px 0;}
#footer a {color: inherit;}
#footer .title {font-size: 1.7rem; position: relative; margin-bottom: 15px; padding-bottom: 2px;}
#footer .title::after {content: ''; width: 32px; height: 2px; background-color: var(--white-color); position: absolute; left: 0; bottom: 0;}
#footer .contacts {display: flex;}
#footer .contacts > .item {margin-left: 50px;}
#footer .contacts > .item:nth-child(1) {margin-left: 0;}
#footer .code_info {display: flex; justify-content: flex-end; text-align: center;}
#footer .code_info > .item {margin-left: 30px;}
#footer .code_info > .item img {margin-bottom: 5px; max-width: 100px;}

/* nav */
#nav .nav_info {display: flex; align-items: center; justify-content: center; padding: 30px 0;}
#nav .nav_info > .item {font-weight: 700; margin: 0 30px; font-size: 1.6rem; position: relative;}
#nav .nav_info > .item::after {content: '→'; color: #7d7d7d; position: absolute; right: -38px; top: 50%; transform: translateY(-50%);}
#nav .nav_info > .item:last-child::after {display: none;}
#nav .nav_info > .item a {color: #7d7d7d; text-decoration: none;}
#nav .nav_info > .item.active a {color: var(--primary-color);}
#nav .icon {padding: 20px 0; text-align: right; font-size: 1.6rem;}
#nav .icon img {width: 20px;}

/* login */
.app_login {color: var(--white-color);}
.app_login #header .header_info, 
.app_index #header .header_info {padding: 50px 15px 15px;}
.app_login .login_info {display: flex; justify-content: left; padding: 0px 0;}
.app_login .login_info > .item {position: relative; width: 42%; display: flex; flex-direction: column; margin: 0 20px;}
.app_login .login_info > .item > .title {color: var(--white-color); text-align: center; font-size: 2.5rem; padding: 10px; font-weight: 700;}
.app_login .login_info > .item .info {padding: 10px 15px 65px; position: relative; flex: 1; min-height: 280px;}
.app_login .login_info > .item .btn_info {width: calc(50% - 30px);left: 50%; bottom: 22px;margin-top: 5%;}
.app_login .login_info > .item .btn_info .btn {width: 100%; font-size: 1.6rem; padding: 10px; background-image: linear-gradient(#0084ff, #0a76c1); color: inherit; border-radius: 8px;}
.app_login .form .form-control {border: 0; height: auto;}
.app_login .form .form-control::placeholder {color: #d3d3d3;}
.app_login .form .form-control, 
.app_login .form .code_info .get_code {font-size: 1.6rem; padding: 12px; flex: 1;}
.app_login .form .text_info {background-color: var(--white-color); border: 1px solid #c9c9c9; border-radius: 8px; display: flex; align-items: center; position: relative;}
.app_login .form .text_info .icon {width: 50px; border-right: 1px solid #bfbfbf;}
.app_login .form .text_info .icon img {height: 24px;}
.app_login .form .code_info {margin-right: 130px;}
.app_login .form .code_info .get_code {width: 120px; position: absolute; right: -130px; background-color: var(--primary-color-1); color: #fff; border-radius: 8px;}

/* index */
.app_index .index_info {display: flex; justify-content: center; padding: 30px 0;}
.app_index .index_info > .item {width: 30%; margin: 0 15px; transition: all .2s;}

/* app_reg */
.upload_file_wrap {margin-top: 10px;}
.upload_file_wrap .preview_img {position: relative; display: inline-block; width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; border: 1px solid var(--gray-color); background: url('../../img/add.png')no-repeat center/25%;}
.upload_file_wrap .preview_img.disabled {opacity: .65; cursor: not-allowed;}
.upload_file_wrap .preview_img.disabled input[type=file] {display: none;}
.upload_file_wrap .tip {font-size: 1.2rem;}

.app_reg_1 .form .form-group {display: flex;}
.app_reg_1 .form .form-group > label {padding: 8px 15px 0 0; margin: 0; text-align: right; width: 30%; font-weight: 400;}
.app_reg_1 .form .form-group > div {flex: 1; max-width: 500px;}
.bootstrap-select > .btn, 
.app_reg_1 .form input.form-control {border-color: #5e5e5e; padding: 8px 12px; height: auto;}
.app_reg_1 .form .form-control:focus {border-color: var(--primary-color);}
.app_reg_1 .form .mobile_info {position: relative;}
.app_reg_1 .form .mobile_info .form-control {padding-right: 100px;}
.app_reg_1 .form .mobile_info .get_code {width: 90px; position: absolute; top: 50%; right: 4px; transform: translateY(-50%);} 

.app_reg_2 .other_input {display: inline-block; max-width: 100px; height: auto; padding: 0px 5px; border-width: 0 0 1px; border-color: inherit; border-radius: 0;}

.app_reg_3 .form .tip {font-size: 1.2rem; color: #535353;}
.app_reg_3 .form .form_group_input {display: flex; margin: 0;}
.app_reg_3 .form .form_group_input .form-control {height: auto; padding: 0 6px;}
.app_reg_3 .form .form-control[readonly] {background-color: var(--white-color);}
.app_reg_3 .line {border-top: 1px dashed #959595; margin: 25px auto;}
 
.app_reg_3 .bootstrap-select > .dropdown-toggle {padding: 0 6px; min-width: 184px; border-color: #ccc;}

.app_reg_4 .form .code_info {display: flex; align-items: center; max-width: 350px;}
.app_reg_4 .form .code_info .btn {margin-left: 15px;}

.app_reg_5 .invoice_info .form-group {display: flex;}
.app_reg_5 .invoice_info .form-group > label {width: 190px; margin: 0; padding: 7px 15px 0 0;}
.app_reg_5 .invoice_info .form-group > div {flex: 1; max-width: 300px;}
.app_reg_5 .invoice_info .check_info {padding-top: 7px;}

/* bd */
.app_bd {background: url('../../../static/img/bd-bg.jpg')no-repeat center/100% 100%; color: #fff; padding: 0 20px;}
.app_bd .title {padding: 20% 0;}
.app_bd .code_info .code {width: 45%;}

@media screen and (max-width: 768px) {
    /* common */
    #content {background-image: url('https://carbonconf.7-event.com/reg/images/login_bg.jpg');
        background-size: cover;
        background-position: center;
        position: relative;
        height: 100%;}

    .content_center #main {display: block;}

    /* header */
    #header .header_info {padding: 0;}

    /* footer */
    #footer .contacts {font-size: 1.2rem; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}
    #footer .contacts > .item {margin-left: 0; margin-bottom: 15px;}
    #footer .code_info {justify-content: center;}
    #footer .code_info > .item {margin: 0 15px;}
    
    /* nav */
    #nav .shade {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100; background-color: rgba(0, 0, 0, .5); display: none;}
    #nav .shade.active {display: block;}
    #nav .nav_info {display: block; width: 50%; height: 100%; max-width: 200px; position: fixed; top: 0; left: 0; z-index: 999; background-color: #fff; box-shadow: 10px 0 10px rgb(0 0 0 / 16%); transform: translateX(-220px); transition: all .34s;}
    #nav .nav_info.active {transform: translateX(0);}
    #nav .nav_info > .item {margin: 0; padding: 20px;}
    #nav .nav_info > .item::after {left: 20px; right: auto; top: auto; bottom: -20px; transform: translateY(-50%) rotate(90deg);}

    /* login */
    .app_login .login_info {display: block;}
    .app_login .login_info > .item {width: 100%; margin: 0;}
    .app_login .login_info > .item:nth-child(1) {margin-bottom: 30px;}
    .app_login .login_info > .item .info {min-height: 260px;}
    .app_login .login_info > .item .btn_info {display: flex; justify-content: space-between;}
    .app_login .login_info > .item .btn_info .btn {width: 100%;}

    /* index */
    .app_index .index_info {display: block; padding-bottom: 100px;}
    .app_index .index_info > .item {width: 60%; margin: 0 auto;}
    .app_index .index_info > .item:nth-child(1) {margin-bottom: 30px;}

    /* app_reg */
    .app_reg_5 .invoice_info .form-group {display: block;}
    .app_reg_5 .invoice_info .form-group > label {width: 100%; margin-bottom: 5px; padding: 0;}
    .app_reg_5 .invoice_info .form-group > div {max-width: 100%;}
}


@media screen and (min-width: 768px) {
    /* index */
    .app_index .index_info > .item:hover {transform: scale(1.1);}
    #nav .nav_info{padding-top: 0px;}
    #nav .nav_info > .item {background-color: #eeeeee;color: #878787;margin: 0;padding: 18px 10px;width: 20%;text-align: center;border-right: 4px solid white;border-radius: 10px;margin-top: 0.3%;}
    #nav .nav_info > .item:last-child {border-right: none;}
    #nav .nav_info > .item::after {content: '';}
    #nav .nav_info > .item.active {background-color: #0051ab}
    #nav .nav_info > .item.active a:after {  content: '';
        position: absolute;
        bottom: -10px; /* Adjust to align the arrow with the bottom of the step bar */
        left: 50%;
        margin-left: -10px; /* Half the width of the square to center the arrow */
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #007bff;}
    #nav .nav_info > .item.active a {color: white}
}
.loginNotice>.layui-layer-content{
    padding: 10px;
}
.loginNotice>.layui-layer-content{
    font-size: 1em;
    line-height: 2;
}
.loginNotice>.layui-layer-content>.title{
    font-weight: bold;
}
.exhibitorsAreAware {padding:15px 20px;height:100%;overflow:hidden;-webkit-user-select:none;}
.exhibitorsAreAware.cn .exhibitorsAreAware-content b {font-size:1em;line-height:1.5em;}
.exhibitorsAreAware.cn .exhibitorsAreAware-content p {font-size:1em;line-height:1.6em;margin-bottom:8px;padding:0 3px;}
.exhibitorsAreAware.en .exhibitorsAreAware-content b {font-size:1em;line-height:1.5em;}
.exhibitorsAreAware.en .exhibitorsAreAware-content p {font-size:1em;line-height:1.6em;margin-bottom:5px;padding:0 3px;}
.exhibitorsAreAware.cn .exhibitorsAreAware-content {height:80%;overflow:auto;}
.exhibitorsAreAware.en .exhibitorsAreAware-content {height:83%;overflow:auto;}
.exhibitorsAreAware .trademark {display:block;font-size:1em;text-align:center;}
.exhibitorsAreAware .agreeToTheDemand #exhibitorsAreAware {position:relative;top:2px;opacity:unset;width: auto;}
.exhibitorsAreAware .agreeToTheDemand {margin:5px 0 6px;display:inline-block;}
.exhibitorsAreAware .agreeToTheDemand span {font-size:1.1em;margin:10px 2px;color:#d1d1d1;}
.exhibitorsAreAware-bottom {text-align: center;z-index: 1000;}
.exhibitorsAreAware-bottom button {margin:10px;width:90%;height:38px;border-radius:6px;border:1px solid #ccc;font-weight:600;background-color:#007bff;color:#ffffff;}