.leftBox {
    width: 15%;
    position: fixed;
    z-index: 99;
    left: 2%;
    top: 5%;
    transition: all .3s ease-in-out;
}
.leftBox .menuLogo{
    width: 100%;
}
.leftBox .menuLogo a{
    width: 100%;
    display: inline-block;
    height: 0;
    padding-bottom: 42%;
    background-image: url(/skin/images/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.leftBox .menuListWhite .menuLogo a{
    background-image: url(/skin/images/logo_w.png);
}
.leftBox ul {
    padding: 0 10%;
}
.leftBox ul,
.leftBox ul li{
    list-style: none;
}
.leftBox ul li{
    margin: 5% 0;
}
.leftBox ul li a{
    text-decoration: none;
}
.leftBox ul li a,
.leftBox ul li a,
.leftBox ul li a:hover,
.leftBox ul li a:active,
.leftBox ul li a:visited,
.leftBox ul li a:link{
    color: #0c0d19;
}
.leftBox .menuListWhite ul li a,
.leftBox .menuListWhite ul li a,
.leftBox .menuListWhite ul li a:hover,
.leftBox .menuListWhite ul li a:active,
.leftBox .menuListWhite ul li a:visited,
.leftBox .menuListWhite ul li a:link{
    color: #ffffff;
}
.leftBox ul li a .redSpan{
    color: #ab3c3c;
}
.leftBox ul li a span:after,
.leftBox ul li a span:before{
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
.leftBox ul li a span{
    font-size: 1.05vw;
    position: relative;
}
.leftBox ul li a span:before {
    content: attr(data-content);
    position:relative;
    z-index: 2;
}
.leftBox ul li a span:after {
    font-family: 'Cormorant Garamond', serif;
    content: attr(data-hoverContent);
    position:absolute;
    z-index: 1;
    left: 0;
    opacity:0;
}
.leftBox ul li a span:hover:before{
    opacity:0;
}
.leftBox ul li a span:hover:after{
    opacity:1;
}
.leftBox .line{
    border-bottom: 1.7px solid #0c0d19;
    margin: 10% 0 5% 0;
    width: 60%;
}
.leftBox .menuListWhite .line{
    border-bottom: 1.7px solid #ffffff;
}
.leftBox .preBtn {
    display: inline-block;
    width: 65%;
    height: 0;
    padding-bottom: 20%;
    background-image: url(/skin/images/pre_btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: all .3s ease-in-out;
}
.leftBox .preBtn:hover{
    background-image: url(/skin/images/pre_btn_h.png);
}


.modal-backdrop.show {
    opacity: .8;
}


#preModal .preBox_modelBox{
    width: 40%;
    margin: 0 auto;
    position: relative;
}
#preModal .preBoxContent{
    background-image: url(/skin/images/preBox_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
#preModal .preBox_modelBox .btn-close{
    background-image: url(/skin/images/preBox_close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 5%;
    height: 0;
    padding-bottom: 6%;
    opacity: 1;
    border-radius: 0;
    position: absolute;
    right: 1%;
    top: 2.5%;
}
#preModal .preBox_modelBox .preBox_title{
    background-image: url(/skin/images/pre_title.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 90%;
    height: 0;
    padding-bottom: 13%;
    margin: 0 auto;
    padding-top: 13%;
}
#preModal .preBox_modelBox .preInBox{
    background-image: url(/skin/images/pre_in_bg.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 100%;
    width: 80%;
    height: auto;
    margin: -6% auto 0 auto;
    padding: 4% 2% 2% 2%;
}
#preModal .preBox_modelBox .preInData1{
    text-align: center;
    display: flex;
    flex-direction: row;
    margin-top: 3%;
}
#preModal .preBox_modelBox .preInData1 #uPhone{
    width: 100%;
}
#preModal .preBox_modelBox .preInData1 #uArea,
#preModal .preBox_modelBox .preInData1 #uPhone,
#preModal .preBox_modelBox .preInData1 #uPhone:-webkit-autofill{
    border-radius: 10px;
    border: 2px solid #4f53a5;
    padding: 1.5% 2%;
    font-size: 1vw;
    color: #4f53a5;
    font-weight: bold;
    outline: none;
    -webkit-text-fill-color: #4f53a5 !important;
}
#preModal .preBox_modelBox .preInData2 .checkboxDiv{
    width: 100%;
}
#preModal .preBox_modelBox .preInData2 .checkboxDiv label{
    cursor: pointer;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#preModal .preBox_modelBox .preInData2 {
    margin: 5% auto;
}
#preModal .preBox_modelBox .preInData2 .checkboxDiv input[type="checkbox"]{
    display: none;
}
#preModal .preBox_modelBox .preInData2 .checkboxDiv input[type="checkbox"] + label{
    font-size: .85vw;
}
#preModal .preBox_modelBox .preInData2 .checkboxDiv input[type="checkbox"] + label::before{
    content: "";
    display: inline-block;
    width: 6%;
    height: 0;
    padding-bottom: 6%;
    background-image: url(/skin/images/checkbox_n.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /*margin-right: 5px;*/
    position: relative;
    /*top: 2px;*/
}
#preModal .preBox_modelBox .preInData2 .checkboxDiv input[type="checkbox"]:checked + label::before{
    background-image: url(/skin/images/checkbox_y.svg);
}
#preModal .preBox_modelBox .preInData3 {
    margin: 7% auto 3% auto;
    text-align: center;
}
#preModal .preBox_modelBox .preInData3 .uPreInput{
    background-color: unset;
    background-image: url(/skin/images/pre_submit.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 90%;
    height: 0;
    padding-bottom: 13%;
    outline: none;
    border: none;
    margin: 0 auto;
    transition: all .3s ease-in-out;
}
#preModal .preBox_modelBox .preInData3 .uPreInput:hover{
    background-image: url(/skin/images/pre_submit_h.svg);
}
#preModal .preBox_modelBox .preInData4{
    width: 80%;
    margin: 2% auto;
}
#preModal .preBox_modelBox .preInData4 picture,
#preModal .preBox_modelBox .preInData4 picture source,
#preModal .preBox_modelBox .preInData4 picture img{
    width: 100%;
}
#preModal .preBox_modelBox .preInData5{
    width: 90%;
    margin: 0 auto;
}
#preModal .preBox_modelBox .preInData5 p{
    font-size: .85vw;
    color: #ffffff;
}
.preBox .preModalLogo {
    width: 20%;
    margin: 0 auto;
}
.preBox .preModalLogo picture source,
.preBox .preModalLogo picture img{
    width: 100%;
}


.MainDiv{
    background-color: #c4cafb;
    color: white;
    font-family: 'Noto Serif TC', serif;
}