html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

a{

    text-decoration: none;

}



/* Helvatica */

@font-face {

    font-family: 'Helvetica-reg';

    src: url('../fonts/helvatica/Helvetica.eot');

    src: url('../fonts/helvatica/Helvetica.eot?#iefix') format('embedded-opentype'),

        url('../fonts/helvatica/Helvetica.woff2') format('woff2'),

        url('../fonts/helvatica/Helvetica.woff') format('woff'),

        url('../fonts/helvatica/Helvetica.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Helvetica-bd-oblique';

    src: url('../fonts/helvatica/Helvetica-BoldOblique.eot');

    src: url('../fonts/helvatica/Helvetica-BoldOblique.eot?#iefix') format('embedded-opentype'),

        url('../fonts/helvatica/Helvetica-BoldOblique.woff2') format('woff2'),

        url('../fonts/helvatica/Helvetica-BoldOblique.woff') format('woff'),

        url('../fonts/helvatica/Helvetica-BoldOblique.ttf') format('truetype');

    font-weight: bold;

    font-style: italic;

    font-display: swap;

}



@font-face {

    font-family: 'Helvetica-compress';

    src: url('../fonts/helvatica/Helvetica-Compressed.eot');

    src: url('../fonts/helvatica/Helvetica-Compressed.eot?#iefix') format('embedded-opentype'),

        url('../fonts/helvatica/Helvetica-Compressed.woff2') format('woff2'),

        url('../fonts/helvatica/Helvetica-Compressed.woff') format('woff'),

        url('../fonts/helvatica/Helvetica-Compressed.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Helvetica-bold';

    src: url('../fonts/helvatica/Helvetica-Bold.eot');

    src: url('../fonts/helvatica/Helvetica-Bold.eot?#iefix') format('embedded-opentype'),

        url('../fonts/helvatica/Helvetica-Bold.woff2') format('woff2'),

        url('../fonts/helvatica/Helvetica-Bold.woff') format('woff'),

        url('../fonts/helvatica/Helvetica-Bold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Helvetica-light';

    src: url('../fonts/helvatica/Helvetica-Light.eot');

    src: url('../fonts/helvatica/Helvetica-Light.eot?#iefix') format('embedded-opentype'),

        url('../fonts/helvatica/Helvetica-Light.woff2') format('woff2'),

        url('../fonts/helvatica/Helvetica-Light.woff') format('woff'),

        url('../fonts/helvatica/Helvetica-Light.ttf') format('truetype');

    font-weight: 300;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Helvetica-round-bold';

    src: url('../fonts/helvatica/HelveticaRounded-Bold.eot');

    src: url('../fonts/helvatica/HelveticaRounded-Bold.eot?#iefix') format('embedded-opentype'),

        url('../fonts/helvatica/HelveticaRounded-Bold.woff2') format('woff2'),

        url('../fonts/helvatica/HelveticaRounded-Bold.woff') format('woff'),

        url('../fonts/helvatica/HelveticaRounded-Bold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Helvetica-obliq';

    src: url('../fonts/helvatica/Helvetica-Oblique.eot');

    src: url('../fonts/helvatica/Helvetica-Oblique.eot?#iefix') format('embedded-opentype'),

        url('../fonts/helvatica/Helvetica-Oblique.woff2') format('woff2'),

        url('../fonts/helvatica/Helvetica-Oblique.woff') format('woff'),

        url('../fonts/helvatica/Helvetica-Oblique.ttf') format('truetype');

    font-weight: normal;

    font-style: italic;

    font-display: swap;

}





/* Noto fonts */

@font-face {

    font-family: 'noto-extra-light';

    src: url('../fonts/noto/NotoSerifJP-ExtraLight-Alphabetic.eot');

    src: url('../fonts/noto/NotoSerifJP-ExtraLight-Alphabetic.eot?#iefix') format('embedded-opentype'),

        url('../fonts/noto/NotoSerifJP-ExtraLight-Alphabetic.woff2') format('woff2'),

        url('../fonts/noto/NotoSerifJP-ExtraLight-Alphabetic.woff') format('woff'),

        url('../fonts/noto/NotoSerifJP-ExtraLight-Alphabetic.ttf') format('truetype');

    font-weight: 200;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'noto-black';

    src: url('../fonts/noto/NotoSerifJP-Black-Alphabetic.eot');

    src: url('../fonts/noto/NotoSerifJP-Black-Alphabetic.eot?#iefix') format('embedded-opentype'),

        url('../fonts/noto/NotoSerifJP-Black-Alphabetic.woff2') format('woff2'),

        url('../fonts/noto/NotoSerifJP-Black-Alphabetic.woff') format('woff'),

        url('../fonts/noto/NotoSerifJP-Black-Alphabetic.ttf') format('truetype');

    font-weight: 900;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'noto-bold';

    src: url('../fonts/noto/NotoSerifJP-Bold-Alphabetic.eot');

    src: url('../fonts/noto/NotoSerifJP-Bold-Alphabetic.eot?#iefix') format('embedded-opentype'),

        url('../fonts/noto/NotoSerifJP-Bold-Alphabetic.woff2') format('woff2'),

        url('../fonts/noto/NotoSerifJP-Bold-Alphabetic.woff') format('woff'),

        url('../fonts/noto/NotoSerifJP-Bold-Alphabetic.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'noto-light';

    src: url('../fonts/noto/NotoSerifJP-Light-Alphabetic.eot');

    src: url('../fonts/noto/NotoSerifJP-Light-Alphabetic.eot?#iefix') format('embedded-opentype'),

        url('../fonts/noto/NotoSerifJP-Light-Alphabetic.woff2') format('woff2'),

        url('../fonts/noto/NotoSerifJP-Light-Alphabetic.woff') format('woff'),

        url('../fonts/noto/NotoSerifJP-Light-Alphabetic.ttf') format('truetype');

    font-weight: 300;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'noto-regular';

    src: url('../fonts/noto/NotoSerifJP-Regular-Alphabetic.eot');

    src: url('../fonts/noto/NotoSerifJP-Regular-Alphabetic.eot?#iefix') format('embedded-opentype'),

        url('../fonts/noto/NotoSerifJP-Regular-Alphabetic.woff2') format('woff2'),

        url('../fonts/noto/NotoSerifJP-Regular-Alphabetic.woff') format('woff'),

        url('../fonts/noto/NotoSerifJP-Regular-Alphabetic.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'noto-medium';

    src: url('../fonts/noto/NotoSerifJP-Medium-Alphabetic.eot');

    src: url('../fonts/noto/NotoSerifJP-Medium-Alphabetic.eot?#iefix') format('embedded-opentype'),

        url('../fonts/noto/NotoSerifJP-Medium-Alphabetic.woff2') format('woff2'),

        url('../fonts/noto/NotoSerifJP-Medium-Alphabetic.woff') format('woff'),

        url('../fonts/noto/NotoSerifJP-Medium-Alphabetic.ttf') format('truetype');

    font-weight: 500;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'noto-semibold';

    src: url('../fonts/noto/NotoSerifJP-SemiBold-Alphabetic.eot');

    src: url('../fonts/noto/NotoSerifJP-SemiBold-Alphabetic.eot?#iefix') format('embedded-opentype'),

        url('../fonts/noto/NotoSerifJP-SemiBold-Alphabetic.woff2') format('woff2'),

        url('../fonts/noto/NotoSerifJP-SemiBold-Alphabetic.woff') format('woff'),

        url('../fonts/noto/NotoSerifJP-SemiBold-Alphabetic.ttf') format('truetype');

    font-weight: 600;

    font-style: normal;

    font-display: swap;

}





*{

    box-sizing: border-box;

}



body{

    background: #000742;

    position: relative;

    margin: 0;

    overflow: hidden;   

    font-family: 'noto-regular';

    height: 100vh;

}

.container{

    width: 100%;

    padding: 0 10%;

    margin: 0 auto;

}



/* Header css starts */



header{

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 30px 0;

    margin-bottom: 0px;

}

header a.logo{

    width: 104px;

}

header ul{

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-left: auto;

}

header ul li{

    margin-right: 24px;

}

header ul li:last-child{

    margin-right: 0;

}

header ul li a{

    color: #fff;

    padding: 12px 24px;

    font-family: 'Helvetica-reg';

    font-size: 14px;

    border: 1px solid rgba(255,255,255,0.45);

    border-radius: 4px;

    transition: 0.5s ease-in-out;

}

header ul li:last-child a{

    border: none;

    padding-left: 0;

    padding-right: 0;

}

header ul li:not(:last-child) a:hover{

    background: #fff;

    border: 1px solid #fff;

    color: #BC8A31;

}

.main-content{

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: flex-start;

    -ms-flex-align: flex-start;

    align-items: center;

    height: 85vh;

}

.content-left{

    width: calc(100% - 380px);

    position: relative;

}

.content-left .light-bg{

    position: absolute;

    left: -15%;

    top: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(50% 50% at 50% 50%, #081371 0%, rgb(255 255 255 / 0%) 100%);

    z-index: -99;

}

.content-left h1{

    font-size: 56px;

    line-height: 68px;

    color: #fff;

}

.content-left h1 span{

    display: block;

}

.content-left img{

    width: 100%;

    margin-left: -11%;

}

.content-left .full-widht img{

    width: 100%;

}

ul.content-right{

    width: 350px;

    margin-left: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}

ul.content-right li{

    width: 100%;

    padding-bottom: 25px;

    margin-bottom: 25px;

    position: relative;

    padding-right: 15px;

}

ul.content-right li::before{

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background: #fff;

    opacity: 0.3;

}

ul.content-right li:last-child:before{

    display: none;

}

ul.content-right li .list-title{

    color: #BC8A31;

    font-size: 22px;

    margin-bottom: 13px;

    font-family: 'noto-regular';

}

ul.content-right li .list-content{

    color: #ffffff;

    font-size: 20px;

    margin-bottom: 12px;

    line-height: 30px;

    font-family: 'noto-regular';

}

.pattern{

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    z-index: -1;

}

.pattern img{

    width: 100%;

}

.footer{

    padding: 20px 0;

    border-top: 1px solid rgba(255,255,255,0.6);

    text-align: center;

}

.footer p{

    font-size: 14px;

    font-family: 'Helvetica-reg';

    color: #fff;

    margin-bottom: 8px;

}

.footer a{

    font-size: 14px;

    font-family: 'Helvetica-reg';

    text-decoration: underline;

    color: #fff;

}