@import url("common.css");
@import url("ui.css");
@import url("form.css");



body {scroll-behavior: smooth;}
.fixlabel {display: none;}

/*
    popup
*/
.pop_wrap {position:absolute; top:50%; left:50%; background:transparent; z-index:101; 
    transform:translate(-50%, -50%);  height: auto; }
.pop_wrap .popup > ul { display: flex; width: 100%;}
.pop_wrap .popup > ul > li { padding:0; vertical-align: top; width: 100%;}
.pop_wrap .main_popup { position: relative; width: 100%;}
.pop_wrap .main_popup .popimg { width: 100%;
  position: relative;
}
.pop_wrap .main_popup .popimg img { max-width: 360px;}

.pop_wrap .today {position:relative; text-align:left; background:#333333;padding:6px 18px;color:#ffffff;font-size:13px;line-height:13px;}
.pop_wrap .today * {vertical-align: middle;}
.pop_wrap .today strong {margin-left: 6px; padding-top: 6px; display: inline-block;}
.pop_wrap .today a {position:absolute;right:4px;top:6px;color:#fff;font-size:13px; color:#fff; padding: 5px 10px;}



.gate_wrap {width: 100%; height: 100%;}
.gate_wrap .gate {width: 100%; height: 100%;}

/* .gate .wrap {height: auto; } */
.gate .wrap {
    width: 100vw;
    height: 100vh;
    background-image: url("/resources/img/gate/gate_bg.jpg");
    background-position: center;
    background-size: cover;
    transition: background-image 0.5s ease; 
}
@media screen and (max-width: 1400px) {
    .gate .wrap {
        width: 100%;
    }
}
.gate .wrap .gate_tit_wrap { width: 50%; position: relative; top:4vw;}
.gate .wrap .gate_tit {
    width: 50%;
    height: 10vh;
    min-height: 30px;
    position: relative;
    top: 30%;
    left: 30%;
    /* transform: translateX(30%); */
}
.gate .wrap .gate_tit img {
    position: relative;
    width:100%;
    height: auto;
}


.gate_con_1 {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
}
.gate_con_1 .gate_btn_1 {
    position: relative;
    top:4%;
    left: 15%;
    width: 40%;
    min-width: 400px;
    min-height: 400px;
    height: 40%;
    display: block;
}
.gate_con_1 .gate_btn_1:hover,
.gate_con_1 .gate_btn_2:hover {
    transition: all 0.5s;
}

.gate_con_1 .gate_btn_2 {
    position: relative;
    top:14%;
    left: 15%;
    width: 40%;
    min-width: 400px;
    min-height: 400px;
    height: 40%;
    display: block;
}






/* 
.gate .wrap .gate_txt {
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5vw;
}
.gate .wrap .gate_txt img {
    width:40%;
}


.gate_con {
    width: 50%;
    height: auto;
    float: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gate_con .gate_con_l {
    width: 45%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.gate_con .gate_con_l a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid transparent;
}
.gate_con .gate_con_l a .gate_con_l_t {
    width: 100%;
}
.gate_con .gate_con_l a .gate_con_l_t .gate_con_l_t_h {
    opacity: 0;
    position: absolute;
    z-index: 5;
    transition: opacity 0.4s ease-in-out;
}
.gate_con .gate_con_l a .gate_con_l_t .gate_con_l_t_h img,
.gate_con .gate_con_l a .gate_con_l_t .gate_con_l_t_o img,
.gate_con .gate_con_l a .gate_con_l_b img,
.gate_con .gate_con_r a .gate_con_r_t .gate_con_r_t_h img,
.gate_con .gate_con_r a .gate_con_r_t .gate_con_r_t_o img, 
.gate_con .gate_con_r a .gate_con_r_b img {
    width: 100%;
}
.gate_con .gate_con_l a:hover {
    border: 3px solid #ADC527;
}

.gate_con .gate_con_l a:hover .gate_con_l_t .gate_con_l_t_h {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}
.gate_con .gate_con_l a .gate_con_l_t .gate_con_l_t_o {
    z-index: 1;
}
.gate_con .gate_con_l a .gate_con_l_b {
    width: 100%;
}

.gate_con .gate_con_r {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.gate_con .gate_con_r a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid transparent;
}
.gate_con .gate_con_r a .gate_con_r_t {
    width: 100%;
}
.gate_con .gate_con_r a .gate_con_r_t .gate_con_r_t_h {
    opacity: 0;
    position: absolute;
    z-index: 5;
    transition: opacity 0.4s ease-in-out;
}
.gate_con .gate_con_r a:hover {
    border: 3px solid #4F4239;
}
.gate_con .gate_con_r a:hover .gate_con_r_t .gate_con_r_t_h {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}
.gate_con .gate_con_r a .gate_con_r_t .gate_con_r_t_o {
    z-index: 1;
}
.gate_con .gate_con_r a .gate_con_r_b {
    width: 100%;
} */