@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* device */
.msg-landscape{display: none}
.mobile-v,.mobile-item{display: none}

/* body */
body,html{width: 100%;overflow-x: hidden;-webkit-font-smoothing: antialiased;}
body{overflow: hidden}
#msapp .head-bar-sub{background: rgba(0,0,0,0.5) !important}
section{background-size: 100% auto;position: relative;overflow: hidden;min-height: 920px}

/* type setting */
h1{font-size: 95px;line-height: .9;margin-bottom: 0;letter-spacing: -2px;}
h2{font-size: 48px;line-height: 1}
h3{font-size: 38px;line-height: 1.1}
h4{font-size: 22px;line-height: 1.2}
h5{font-size: 16px;line-height: 1.2}
p{font-family: "Roboto", sans-serif;font-size: 15.8px;margin-bottom: 0;color: #fff;line-height: 1.4;font-weight: 400;}

.color-gray,.color-gray a{color: #272727;}
.color-purple{color:#291057}
.color-light-purple{color: #912b63}
.color-middle-purple{color: #6a3586}
.color-pink{color: #b65d71;}

.new-science{font-family: "new-science", sans-serif !important;font-weight: 400;font-style: normal;}
.shift{font-family: "shift", serif}

.line-height-1{line-height: 1;}


.caption{font-size: 13px;line-height: 1.4;font-weight: 400;margin-bottom: 0;padding-left:18px;padding-right:18px;font-style: italic}
.small{font-size: 12px;line-height: 20px}
.medium{font-size: 14px;line-height: 18px}
.subtit-l{font-family: "Montserrat", sans-serif;font-size: 46px;margin-bottom: 0;line-height: 1.2;font-weight: 800;text-align: center;}
.subtit-m{font-family: "Open Sans", sans-serif;font-weight: 600;font-size: 48px;margin-bottom: 0;line-height: 1}
.ss-title{display: inline-block;margin:80px auto 60px auto;position: relative;width: calc(100% + 120px)}
a,a:focus{color: #fff}
.bold{font-weight: bold}
.roboto{font-family: "Roboto", sans-serif;font-weight: normal !important}

/* space */
.margin-120-bottom{margin-bottom: 120px !important}
.margin-80-bottom{margin-bottom: 80px !important}
.margin-60-bottom{margin-bottom: 60px !important}
.margin-40-bottom{margin-bottom: 40px !important}
.margin-20-bottom{margin-bottom: 20px !important}
.margin-0-bottom{margin-bottom: 0px !important}
.margin-80-top{margin-top: 80px !important}
.margin-120-top{margin-top: 120px !important}


/* inner */
.inner{width: 100%;max-width: 516px;text-align: left;margin: 0 auto;position: relative}
.inner-graph{width: 100%;max-width: 628px;margin: 20px auto 80px auto;position: relative}
.inner-graph-wrap{position: relative;}
.inner-graph img{width: 100%;}
.inner-max{width: 100%;max-width: 1024px;margin: 0 auto;position: relative}
.inner-youtube{width: 100%;max-width: 628px;margin: 20px auto 40px auto;position: relative}
.inner-hk{width: 506px;}
.inner-hk-wild{max-width: 525px;}
.edit-info p a{color: #000000;}
.font-100{font-weight: 100 !important}
button,a{cursor: pointer;}
.banner-center{margin: 0 auto;max-width: 970px;padding: 60px 0}
.banner{width: 970px;max-width: 90%;}
.banner .banner-inner{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.upper{text-transform: uppercase}

/* Grid */
.grid-fixed{position: fixed;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;z-index: 999;opacity: 1}
.in-1{position: absolute;width: 1024px;height: 100%;border-left: 1px solid aqua;border-right: 1px solid aqua;transform: translateX(-50%);left: 50%}
.in-2{position: absolute;width: 564px;height: 100%;border-left: 1px solid aqua;border-right: 1px solid aqua;transform: translateX(-50%);left: 50%}
.in-3{position: absolute;width: 514px;height: 100%;border-left: 1px solid aqua;border-right: 1px solid aqua;transform: translateX(-50%);left: 50%}


/* scroll icon */
.ms-ico-scroll{position: absolute;bottom: 60px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);z-index: 9;display: none;}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer{position: relative;z-index: 1;width: 24px;height: 50px;border-radius: 15px;border: 2px solid #fff;background-color: rgba(255, 255, 255, 0.1);-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);}
.ms-ico-scroll .ms-ico-scroll-inner{text-align: center;}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse{pointer-events: none;width: 24px;margin: 0 auto;}
.ms-ico-scroll .ms-ico-scroll-inner .scroll-text{text-align: center;margin-top: 5px;}
.ms-ico-scroll .ms-ico-scroll-inner .scroll-text span{font-family: Roboto, sans-serif;font-size: 10px;text-transform: uppercase;color: #ffffff;}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer{position: relative;z-index: 1;width: 24px;height: 50px;border-radius: 15px;border: 2px solid #fff;background-color: rgba(255, 255, 255, 0.1);-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner{width: 100%;height: 100%;position: relative;text-align: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;border: 1px solid transparent;border-radius: 12px;}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div{display: block;width: 3px;height: 3px;margin: 0 auto;margin-top: 0px;border-radius: 3px;background-color: #fff;}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner .line-long{height: 14px;}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(1),.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(2){-webkit-animation-name: mousescrolldot;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);-moz-animation-name: mousescrolldot;-moz-animation-duration: 2s;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);-ms-animation-name: mousescrolldot;-ms-animation-duration: 2s;-ms-animation-iteration-count: infinite;-ms-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);animation-name: mousescrolldot;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(4),.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div:nth-child(5){-webkit-animation-name: mousescrolldot;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);-moz-animation-name: mousescrolldot;-moz-animation-duration: 2s;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);-ms-animation-name: mousescrolldot;-ms-animation-duration: 2s;-ms-animation-iteration-count: infinite;-ms-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);animation-name: mousescrolldot;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);-webkit-animation-delay: 1s;animation-delay: 1s}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner>div+div{margin-top: 2px}
.ms-ico-scroll .ms-ico-scroll-inner .ms-scroll-mouse .ms-scroll-mouse-outer .ms-scroll-mouse-inner .line-long{height: 14px}
.ms-ico-scroll .ms-ico-scroll-inner .scroll-text{text-align: center;margin-top: 5px}
.ms-ico-scroll .ms-ico-scroll-inner .scroll-text span{font-family: Roboto, sans-serif;font-size: 10px;text-transform: uppercase;color: #ffffff}
@-webkit-keyframes mousescrolldot{from{height: 3px}50%{height: 0px}to{height: 3px}}
@keyframes mousescrolldot{from{height: 3px}50%{height: 0px}to{height: 3px}}
@keyframes loadingblink{from{bottom: -100%}to{bottom: 100%}}