html, body{
    font-family: sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    height: 100%;
    overflow: hidden;
}
a:hover, a{
    text-decoration: none;
    color: inherit;
}
h1{


}
h2{

}
h3{


}
h4{

}
h5{

}
h6{

}
.main-container{
    position: absolute;
    height: calc(100% - 60px);
    width: calc(100% - 60px);
    top: 30px;
    left: 30px;
    background-color: #EDEDEE;
    padding: 0;
    margin: 0;
}
.bottom-lines{
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 2;
    height: 50%;
}
.bottom-lines img{
    height: 100%;
}
.white-line{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.white-line img{
    width: 70%;
}
.center-lines{
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    width: 500px;
    margin: auto;
    z-index: 3
}
.center-lines02{
    display: none;
    position: absolute;
    height: 450px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
    z-index: 3
 }
.center-lines img{
    height: 100%;
}
.enter-column01{
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    text-align: center;
}
.enter-column02{
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    text-align: center;
}
.main-logo01{
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 1;
}
.main-logo01 svg{
    height: 60px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.main-logo01 img{
    height: 60px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.main-logo02{
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 1;
}
.main-logo02 svg{
    height: 60px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.main-logo02 img{
    height: 60px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.enter-text-red{
    position: absolute;
    top: 0;
    left: 50px;
    opacity: 1;
    z-index: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.enter-text-red img{
    height: 13px;
}
.enter-text-black{
    opacity: 1;
    position: absolute;
    bottom: -20px;
    right: -30px;
    z-index: 1;
}
.enter-text-black img{
    height: 13px;
}
.background-line{
    width: 30px;
    height: 0;
    opacity: 0;
    background-color: #FFF;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    -ms-transform: rotate(-27deg); /* IE 9 */
    -webkit-transform: rotate(-27deg); /* Chrome, Safari, Opera */
    transform: rotate(-27deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn01{
    position: absolute;
    height: 60px;
    width: 270px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    z-index: 999;
}
.btn02{
    position: absolute;
    height: 60px;
    width: 465px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    z-index: 999;
}
.btn01:hover .background-line{
    height: 220px;
    opacity: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn01:hover .enter-text-red{
    opacity: 1;
    left: 50px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn01 .cls-1{
    fill: #707070;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn01 .cls-2{
    fill: #707070;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn02 .cls-1{
    fill-rule: evenodd;
}
.btn02 .cls-1, .btn02 .cls-2{
    fill: #707070;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn02 .cls-3{
    fill: #707070;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn01:hover .cls-1{
    fill: #010101;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn01:hover .cls-2{
    fill: #f7ce0f;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn02:hover .cls-1, .btn02:hover .cls-2{
    fill: #e2231a;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn02:hover .cls-3{
    fill: #231f20;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn02:hover .background-line{
    height: 220px;
    opacity: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn02:hover .enter-text-black{
    opacity: 1;
    right: -30px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.fake-butons{
    visibility: hidden;
}

@media (min-width: 1024px) and (max-width: 1280px){
    .btn01{width: 195px;}
    .btn02{width: 345px;}
    .btn01 svg{height: 45px}
    .btn02 svg{height: 45px}
    .btn01 img{height: 45px}
    .btn02 img{height: 45px}
    .btn01:hover .enter-text-red{left: 30px;}
    .btn02:hover .enter-text-black{right: -15px;}
    .enter-text-red img{height: 11px;}
    .enter-text-black img{height: 11px;}
    .enter-text-black{bottom: 0}
}
@media (min-width: 769px) and (max-width: 1024px){
    .btn01{width: 150px;}
    .btn02{width: 270px;}
    .btn01 svg{height: 35px}
    .btn02 svg{height: 35px}
    .btn01 img{height: 35px}
    .btn02 img{height: 35px}
    .enter-text-red{top: -10px;}
    .btn01:hover .enter-text-red{left: 30px;}
    .btn02:hover .enter-text-black{right: -15px;}
    .enter-text-red img{height: 11px;}
    .enter-text-black img{height: 11px;}
    .enter-text-black{bottom: 0}
}
@media (min-width: 600px) and (max-width: 768px){
    .enter-column01{width: 100%; height: 50%}
    .enter-column02{width: 100%; height: 50%; bottom: 0; top: auto}
    .bottom-lines{height: 40%;}
    .center-lines{display: none;}
    .center-lines02{display: block;}
    .btn01{width: 235px;}
    .btn02{width: 420px;}
    .btn01 svg{height: 55px}
    .btn02 svg{height: 55px}
    .btn01 img{height: 55px}
    .btn02 img{height: 55px}
    .enter-text-red{top: -10px;}
    .btn01:hover .enter-text-red{left: 30px;}
    .btn02:hover .enter-text-black{right: -15px;}
    .enter-text-red img{height: 11px;}
    .enter-text-black img{height: 11px;}
    .enter-text-black{bottom: -10px}
}
@media (max-width: 599px){
    .enter-column01{width: 100%; height: 50%}
    .enter-column02{width: 100%; height: 50%; bottom: 0; top: auto}
    .bottom-lines{height: 40%;}
    .center-lines{display: none;}
    .center-lines02{display: block; height: 300px;}
    .btn01{width: 150px;}
    .btn02{width: 270px;}
    .btn01 svg{height: 35px}
    .btn02 svg{height: 35px}
    .btn01 img{height: 35px}
    .btn02 img{height: 35px}
    .enter-text-red{top: -10px;}
    .btn01:hover .enter-text-red{left: 30px;}
    .btn02:hover .enter-text-black{right: -15px;}
    .enter-text-red img{height: 11px;}
    .enter-text-black img{height: 11px;}
    .enter-text-black{bottom: 0}
}
@media (max-width: 768px){
    .btn02 .cls-1, .btn02 .cls-2{fill: #e2231a;}
    .btn02 .cls-3{fill: #231f20;}
    .btn01 .cls-1{fill: #010101;}
    .btn01 .cls-2{fill: #f7ce0f;}
    .background-line{height: 180px;opacity: 1; width: 20px;}
    .enter-text-red{opacity: 1;}
    .enter-text-black{opacity: 1;}
}
@media (max-width: 420px){
    .main-container {
        height: calc(100% - 30px);
        width: calc(100% - 30px);
        top: 15px;
        left: 15px;
    }
}