@font-face {
    font-family: 'SUIT-Variable';
    font-weight: 100 200 300 400 500 600 700 800 900;
    font-style: normal;
    src: url('../font/SUIT-Variable.woff2')  format('woff2-variations');
}

* {margin: 0; padding: 0; border: 0; box-sizing: border-box; -webkit-text-size-adjust: none;}
ul, li {list-style: none; padding-left: 0;}
.container {display: flex; justify-content: center; flex-direction: column; position: relative; font-family: 'SUIT-Variable'}
.container > div { align-self: center;}
.header {position: sticky; top: 0; left: 0; width: 100%; height: 50px; background: #7caaff;}
.header .tab {display: flex; justify-content: center; width: 784px; margin: auto;}
.tab li{width: 33.3%; text-align: center; position: relative; display: flex; justify-content: center;}
.tab li img{margin-left: 5px;}
.tab li:after{content: ''; clear: both; display: block; position: absolute; top: 11px; right: 0 ;width: 1px; height:20px; background:#518ffe;}
.tab li:last-child:after{display: none;}
.tab a{padding:6px 0; color: #fff; font-size: 15px; cursor: pointer; text-decoration: none; display: block; width: 100%;}
.tab a span{display: block; font-size: 13px;}
.tab .active{background: #fff; color: 000; border-bottom: 2px solid #0f64ff;}
.tab .active:after{display: none;}
.tab .active a{color: #000; font-weight: 800;}
.tab .active a span{color: #518ffe; margin-bottom: 1px; font-weight: 700;}
.link-cont {display: flex; justify-content: center; grid-gap: 10px; margin: -135px auto;}
.link-cont a{width: 158px; height: 106px; display: block; font-size: 0;}
.link-cont .link-1{background: url(../img/btn_1.png)}
.link-cont .link-2{background: url(../img/btn_2.png)}
.link-cont .link-3{background: url(../img/btn_3.png)}
.link-cont .link-4{background: url(../img/btn_4.png)}