@font-face {
    font-family: 'gothic';
    src: url('../fonts/gothic.eot');
    src: local('gothic'), url('../fonts/gothic.woff') format('woff'), url('../fonts/gothic.ttf') format('truetype');
}
body{padding: 0; margin: 0;font-family: 'gothic';color: #231f20}
* {transition: all 0.2s;}
a:hover {  text-decoration: none; color: rgba(255, 255, 255, 0.8); }
a:link {  text-decoration: none;  }
a:visited {  text-decoration: none;  }
a:active {  text-decoration: none;  }

.ta-c {text-align: center;}
.main-container {position: relative;}
.main-container:before {    background-image: url('../img/top-back.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    display: block;
    position: absolute;
    height: 50vw;

    max-height: 800px;
    width: 100%;
    top: 0;
    padding-bottom: 20vw;
    left: 0; }
.logo {margin-top: 200px;width: 50vw; max-width: 300px;}
h1 {font-weight: bold;text-align: center; margin-top: 50px;}

.header-box {color: #fff;}
.header-box .icon {width:50px; height: 50px; padding: 10px; border-radius: 50%; margin: 30px auto 10px;background-color: #fff;text-align: center;}
.header-box .icon svg {height: 100%;}

.splash-list {list-style-type: none;padding: 0;margin: 0;}
.splash-list > li {text-align: center; font-size: 1.9rem;line-height: 38px;padding: 40px;position: relative; max-width: 850px;}
.splash-list > li .li-dot { position: absolute;     width: 120px;margin-left: -58px;margin-top: -17px;}

@media (max-width: 950px) {
    .header-box .icon {width:30px; height: 30px; padding: 2px 0 9px;}
}

@media (max-width: 600px) {
    .header-box .text {font-size: 10px;}
}

@media (max-width: 470px) {
    .header-box .text {display: none;}
    .logo {margin-top: 40px;}
    h1 {font-size: 30px; }
}