@charset "utf-8";
@import "default.css";
@import "animate.min.css";
@import "fullpage.min.css";
@import "fonts.css";
@import "common.css";




/* common */
body {
    background: rgb(255,66,0);
    background: -moz-linear-gradient(top,  rgba(255,66,0,1) 60%, rgba(255,66,0,1) 60%, rgba(254,142,79,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,66,0,1) 60%,rgba(255,66,0,1) 60%,rgba(254,142,79,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,66,0,1) 60%,rgba(255,66,0,1) 60%,rgba(254,142,79,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4200', endColorstr='#fe8e4f',GradientType=0 );    
}
.fp-section {overflow: hidden;}
.container {width: 100%; max-width: 104rem; margin: 0 auto; position: relative;}
.container:after {content: ''; display: table; clear: both;}

#drLogo,
#drApp,
#scroll {position: fixed; z-index: 100; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}

#drLogo {top: 5rem; left: 4rem; width: 17rem; height: 4.1rem; text-indent: -999rem; background: url('../img/logo.png')no-repeat center center; background-size: 100% auto; cursor: pointer;}

body.fp-viewing-sec4 #drApp {display: none;}
#drApp {left: 4rem; bottom: 4rem; z-index: 1;}
#drApp ul:after {content: ''; display: table; clear: both;}
#drApp ul li {float: left; margin-right: 0.5rem; position: relative;}
#drApp ul li:last-child {margin-right: 0;}
#drApp ul li a {display: block; float: left; width: 16rem; height: 5rem; text-indent: -999rem; border-radius: 0.5rem; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; background-size: cover !important;}
#drApp ul li a.google {background: url('../img/app_google.png')no-repeat center center;}
#drApp ul li a.apple {background: url('../img/app_apple.png')no-repeat center center;}
#drApp p {font-size: 1.6rem; margin-top: 0.3rem; font-weight: 400; letter-spacing: 0.025rem; color: var(--color-white);}

#scroll {bottom: 1rem; left: 50%; transform: translate(-50%, 0); background: none; font-size: 1.2rem; color: var(--color-white); padding-bottom: 3rem; font-weight: 500; letter-spacing: 0.025em; cursor: pointer;}
#scroll:after {
    content: ''; display: block; width: 2.3rem; height: 2.4rem; margin: 0 auto;
    background: url('../img/scroll.png')no-repeat center center; background-size: 100% auto !important;
    transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite;
}
@keyframes move {
    25% {opacity: 1;}
    33% {opacity: 1;transform: translateY(-0.5rem);}
    67% {opacity: 1;transform: translateY(0rem);}
    100% {opacity: 0;transform: translateY(1.5rem) scale3d(0.5, 0.5, 0.5);}
}
body.fp-viewing-sec3 #scroll,
body.fp-viewing-sec4 #scroll {display: none;}



/* nav */
#fp-nav.fp-right {right: 4rem;}
#fp-nav ul li,
.fp-slidesNav ul li {width: 1.6rem; height: 1.6rem; margin: 1.3rem 0;}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {height: 1rem; width: 1rem; margin: -0.5rem 0 0 -0.5rem; background: var(--color-white);}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {height: 1.6rem; width: 1.6rem; margin: -0.8rem 0 0 -0.8rem; background: var(--color-navy);}
#ch-plugin .hDkZuv {bottom: 4rem !important; right: 4rem !important;}
body.fp-viewing-sec4 #ch-plugin .hDkZuv {display: none !important;}

@media (max-width:1200px) {
    #fp-nav.fp-right {right: 3rem; margin-right: 0; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translate3d(0,-50%,0);}
    .container {padding-left: 3rem; padding-right: 3rem;}
    #drLogo {top: 3rem; left: 3rem;}
    #drApp {left: 3rem; margin-left: 0; bottom: 3rem;}
}

@media (max-width:991px) {
    .fp-section.fp-table, .fp-slide.fp-table {overflow: hidden; width: 100%; height: auto !important;}
    .fp-tableCell {height: auto !important;}
    .container {padding-left: 2.5rem; padding-right: 2.5rem;}
    .fp-enabled body {padding: 5.4rem 0;}
    #drLogo {top: 0; left: 0; width: 100%; height: 5.4rem; text-indent: -999rem; background: #fff url('../img/logo_m.png')no-repeat center center; background-size: 10rem auto;}
    #drApp {left: 0; bottom: 0; right: 0; background: #000;}
    #drApp ul:after {content: ''; display: table; clear: both;}
    #drApp ul li {margin-right: 0; width: 50%; border-right: 0.1rem solid rgba(255,255,255,0.15);}
    #drApp ul li:last-child {border-right: none;}
    #drApp ul li a {width: 100%; height: 5.4rem; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; background-size: auto 4rem !important;}
    #drApp ul li a.google {background: #000 url('../img/app_google.png')no-repeat center center;}
    #drApp ul li a.apple {background: #000 url('../img/app_apple.png')no-repeat center center;}
    #drApp ul li span {display: none;}
    #drApp p {display: none;}
    #scroll {display: none;}
	#ch-plugin .hDkZuv {bottom: 7rem !important; right: 2rem !important;}

}





/* section */
.drTitle {color: var(--color-white);}
.drTitle h5 {font-size: 6.4rem; font-weight: 900; line-height: 1.2;}
.drTitle p {font-size: 1.8rem; margin-top: 3rem; font-weight: 700;}

.drIntro {margin-top: -30rem;}
.drIntro:after {content: ''; display: table; clear: both;}
.drIntro ul {width: 40.7rem; float: right;}
.drIntro ul li {position: relative;}
.drIntro ul li img {display: block; width: 100%;}
.drIntro ul li .next {position: absolute; top: 0; opacity: 0;}

.dri01 {width: 12.4rem; -webkit-animation-delay:0.6s;animation-delay:0.6s;}
.dri0101 {-webkit-animation-delay:5s;animation-delay:5s;}
.dri0102 {-webkit-animation-delay:7s;animation-delay:7s;}
.dri02 {width: 40.7rem; margin-top: -2rem; -webkit-animation-delay:0.2s;animation-delay:0.2s;}
.dri0201 {-webkit-animation-delay:2s;animation-delay:2s;}
.dri0202 {-webkit-animation-delay:2s;animation-delay:2s;}
.dri0203 {-webkit-animation-delay:5s;animation-delay:5s;}
.dri03 {width: 56.5rem; margin-top: -25rem; margin-left: -38rem; -webkit-animation-delay:2s;animation-delay:2s;}
.dri0301 {-webkit-animation-delay:4s;animation-delay:4s;}
.dri04 {width: 19.4rem; margin-top: -21rem; margin-left: 17rem; -webkit-animation-delay:3s;animation-delay:3s;}
.dri0401 {-webkit-animation-delay:8s;animation-delay:8s;}

.drReceipt {margin-top: -4rem;}
.drReceipt:after {content: ''; display: table; clear: both;}
.drReceipt ul {float: right;}
.drReceipt li {}
.drReceipt li img {display: block; width: 100%;}
.drr01 {width: 27.3rem;}
.drr02 {width: 40.9rem; margin-left: 22rem; margin-top: -54rem;}

.drHalf {margin-top: 4rem;}
.drHalf:after {content: ''; display: table; clear: both;}
.drFeature {width: 50%; float: left; padding-right: 6rem; margin-left: -6rem;}
.drFeature:after {content: ''; display: table; clear: both;}
.drFeature li {float: left; width: 33.3333%; margin: 2rem 0;}
.drFeature li button {opacity: 0.5; display: block; width: 100%; text-align: center; color: var(--color-white); font-size: 1.6rem; cursor: pointer;}
.drFeature li button.on {opacity: 1;}
.drFeature li button:before {content: ''; display: block; width: 7.4rem; height: 7.5rem; margin: 0 auto 1rem; background-size: cover !important;}
.drFeature li:nth-child(1) button:before {background: url('../img/feature1.png')no-repeat center center;}
.drFeature li:nth-child(2) button:before {background: url('../img/feature4.png')no-repeat center center;}
.drFeature li:nth-child(3) button:before {background: url('../img/feature5.png')no-repeat center center;}
.drFeature li:nth-child(4) button:before {background: url('../img/feature6.png')no-repeat center center;}
.drFeature li:nth-child(5) button:before {background: url('../img/feature8.png')no-repeat center center;}
.drFeature li:nth-child(6) button:before {background: url('../img/feature9.png')no-repeat center center;}

.drTab {width: 50%; float: left; margin-right: -6rem; padding-top: 3rem;}
.drTabCont {display: none;}
.drTabCont.on {display: block;}
.drTabCont li {opacity: 0; color: var(--color-white); font-size: 2.0rem; position: relative; padding-left: 2.6rem; margin-bottom: 1.4rem;}
.drTabCont li:last-child {margin-bottom: 0;}
.drTabCont li:before {content: ''; display: block; width: 2rem; height: 1.8rem; position: absolute; left: 0; top: 0.6rem; background: url('../img/check.png')no-repeat center center; background-size: cover !important;}
.drTabCont.on li:nth-child(1) {-webkit-animation-delay:0.1s;animation-delay:0.1s;}
.drTabCont.on li:nth-child(2) {-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.drTabCont.on li:nth-child(3) {-webkit-animation-delay:0.7s;animation-delay:0.7s;}
.drTabCont.on li:nth-child(4) {-webkit-animation-delay:1.0s;animation-delay:1.0s;}



@media (max-width:1200px) {
    .drTitle h5 {font-size: 5.2rem;}
    .drTitle p {font-size: 1.6rem; margin-top: 2rem;}
    .drFeature {margin: 0 -4rem;}
    .drFeature li button {margin-top: 1rem; font-size: 1.4rem;}
    .drFeature li button:before {width: 5.9rem; height: 6rem;}
    .drTabCont li {font-size: 1.8rem;}
}


@media (max-width:991px) {
    #dr1 {padding: 4rem 0 6rem;}
    #dr2 {padding: 6rem 0;}
    #dr3 {padding: 6rem 0;}
    .drTitle {text-align: center;}
    .drTitle h5 {font-size: 4rem;}
    .drTitle.sm h5 {font-size: 3rem;}
    .drTitle p {font-size: 1.4rem; margin-top: 2rem; font-weight: 400;}
    .drIntro {margin-top: 2rem; text-align: center;}
    .drIntro ul {width: 20.35rem; float: none; display: inline-block; margin-left: 2rem;}
    .dri01 {width: 10rem; margin-left: 5rem;}
    .dri02 {width: 22rem; margin-top: -2rem; margin-left: -1rem;}
    .dri03 {width: 28.25rem; margin-top: -12.5rem; margin-left: -9rem;}
    .dri04 {width: 12rem; margin-top: -13rem; margin-left: 4rem;}

    .drReceipt {margin-top: 12rem; text-align: center;}
    .drReceipt ul {float: none; display: inline-block; margin-left: 2rem;}
    .drr01 {width: 15rem;}
    .drr02 {width: 20rem; margin-left: 12rem; margin-top: -28rem;}    

    .drHalf {margin-top: 2rem;}
    .drFeature {padding-right: 0; margin-left: 0; float: none; width: 100%;}
    .drFeature li {margin: 1rem 0;}
    .drFeature li button {margin-top: 1rem; font-size: 1.4rem;}
    .drFeature li button:before {width: 3.9rem; height: 4rem;}
    .drTab {width: 100%; float: none; margin-right: 0;}
    .drTabCont li {font-size: 1.6rem; padding-left: 1.8rem; margin-bottom: 1rem;}
    .drTabCont li:before {width: 1.4rem; height: 1.2rem; top: 0.6rem;}
}






#footer {padding: 0 4rem; color: var(--color-white); font-size: 1.4rem;}
.ftInr {padding: 4rem 0; border-top: solid 0.1rem rgba(255,255,255,0.5); position: relative;}
.ftInr:after {content: ''; display: table; clear: both;}
.ftMore {display: none;}
.ftCont {position: relative;}
.ftCont dt {font-size: 2rem; font-weight: 700; margin-bottom: 0.2rem;}
.ftCont dd ul:after {content: ''; display: table; clear: both;}
.ftCont dd ul li {float: left; margin-right: 1rem; padding-right: 1rem; position: relative;}
.ftCont dd ul li:last-child {margin-right: 0; padding-right: 0;}
.ftCont dd ul li:after {content: ''; display: block; width: 0.1rem; height: 1rem; background: var(--color-white); position: absolute; right: 0; top: 50%; margin-top: -0.5rem;}
.ftCont dd ul li:last-child:after {display: none;}
.ftCont dd ul li a {color: var(--color-white); font-weight: 700; margin-left: 1rem;}
.ftMenu {margin-top: 2rem;}
.ftMenu:after {content: ''; display: table; clear: both;}
.ftMenu li {float: left; margin-right: 1rem; padding-right: 1rem; position: relative;}
.ftMenu li:last-child {margin-right: 0; padding-right: 0;}
.ftMenu li:after {content: ''; display: block; width: 0.1rem; height: 1rem; background: var(--color-white); position: absolute; right: 0; top: 50%; margin-top: -0.5rem;}
.ftMenu li:last-child:after {display: none;}
.ftMenu li a {color: var(--color-white); font-size: 1.6rem; font-weight: 500;}
.ftDesc {margin-top: 2rem;}
.ftTxt {margin-top: 1rem;}
.ftCopy {margin-top: 1rem;}
.ftAmz {display: block; position: absolute; right: 0; bottom: 4rem; width: 12.7rem; height: 4.8rem; text-indent: -999rem; background: url('../img/AWS_Logo_PoweredBy_127px.png')no-repeat center center;}
.ftCts {display: block; position: absolute; right: 15rem; bottom: 4rem; width: 4.9rem; height: 5rem; text-indent: -999rem; background: url('../img/ico_contents.png')no-repeat center center; background-size: cover;}



@media (max-width:991px) {
    #footer {padding: 0 2rem; font-size: 1.3rem; text-align: center;}
	.ftInr {padding-right: 0; padding-bottom: 0;}
    .ftMore {display: block; width: 100%; text-align: center; color: var(--color-white); height: 5rem; line-height: 5rem; font-size: 1.6rem; font-weight: 500;}
	.ftMore:after {content: ''; display: inline-block; vertical-align: middle; margin-left: 1rem; width: 1.2rem; height: 0.7rem; background: url('../img/footer_more.png')no-repeat center bottom; background-size: 100% auto !important;}
    .ftMore.on:after {background-position: center top;}
    .ftCont dt {display: none;}
	.ftCont dd {display: none;}
    .ftCont dd.on {display: block;}
	.ftCont dd ul li {float: none; margin-right: 0; padding-right: 0; margin-bottom: 0.5rem;}
	.ftCont dd ul li:last-child {margin-bottom: 0;}
	.ftCont dd ul li:after {display: none;}
	.ftCont dd ul li a {display: block;}
	.ftMenu {position: static;}
	.ftMenu li {float: none; margin-right: 0; padding-right: 0; margin-bottom: 0.6rem;}
	.ftMenu li:last-child {margin-bottom: 0;}
	.ftMenu li:after {display: none;}
	.ftMenu li a {font-size: 1.4rem;}
    .ftDesc {margin-top: 3rem;}
	.ftTxt {}
	.ftTxt br {display: none;}
	.ftCopy {margin-top: 2rem; font-size: 1.1rem; letter-spacing: 0;}
	.ftAmz {position: static; margin: 2rem auto 0;}
	.ftCts {position: static;  margin: 3rem auto 0;}
}





.drPop {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 6rem; overflow-y: auto; z-index: 10000001; background: rgba(0,0,0,0.7);}
.drPop > div {display: table; width: 100%; height: 100%;}
.drPop > div > div {display: table-cell; width: 100%; vertical-align: middle;}
.drpBox {width: 100%; margin: 0 auto;}
.drpTop {background: #313646;}
.drpTop:after {content: ''; display: table; clear: both;}
.drpTop h5 {float: left; color: #fff; font-size: 2rem; height: 6rem; line-height: 6rem; padding: 0 2rem;}
.drpClose {display: block; float: right; width: 6rem; height: 6rem; text-indent: -999rem; background: url('../img/popup_close.png')no-repeat center center; background-size: 2.4rem auto;}
.drpCont {background: #fff; padding: 3rem;}
.drpContents {text-align: center; padding: 3rem 0;}
.drpContents h5 {font-size: 2rem; padding-top: 9rem; background: url('../img/icon_contents_caution.png')no-repeat center top;}
.drpContents ul {display: inline-block; padding-left: 2rem; text-align: left; margin-top: 2rem;}
.drpContents ul li {list-style: decimal; font-size: 1.5rem;}
.drpContents p {margin-top: 3rem; font-size: 1.3rem; color: #666;}

@media (max-width:991px) {
	.drPop {padding: 3rem 1.5rem;}
	.drpTop h5 {float: left; color: #fff; font-size: 2rem; height: 6rem; line-height: 6rem; padding: 0 2rem;}
	.drpClose {display: block; float: right; width: 6rem; height: 6rem; text-indent: -999rem; background: url('../img/popup_close.png')no-repeat center center; background-size: 2.4rem auto;}
	.drpCont {background: #fff; padding: 3rem;}
	.drpContents {text-align: center; padding: 3rem 0;}
	.drpContents h5 {font-size: 2rem; padding-top: 9rem; background: url('../img/icon_contents_caution.png')no-repeat center top;}
	.drpContents ul {display: inline-block; padding-left: 2rem; text-align: left; margin-top: 2rem;}
	.drpContents ul li {list-style: decimal; font-size: 1.5rem;}
	.drpContents p {margin-top: 3rem; font-size: 1.3rem; color: #666;}
}





/* 404 */
html.full,
html.full body {display: block; height: 100%;}
.not-found {display: table; width: 100%; height: 100%;}
.not-found > div {display: table-cell; width: 100%; vertical-align: middle;}
.not-found__cont {position: relative; color: #fff; padding-bottom: 240px;}
.not-found__cont h5 {font-size: 32pt; letter-spacing: -0.075em;}
.not-found__cont h5 span {font-size: 40pt;}
.not-found__cont h6 {font-size: 20pt; font-weight: 400; margin-top: 10px;}
.not-found__cont p {font-size: 16pt; margin-top: 40px; letter-spacing: -0.075em;}
.not-found__cont a {display: inline-block; font-size: 14pt; color: #fff; letter-spacing: 0.025em; text-decoration: underline;}
.not-found__cont img {display: block; position: absolute; right: 0; bottom: 0;}
.not-found__cont img.not-found__1 {width: 412px;}
.not-found__cont img.not-found__2 {width: 422px;}
.not-found__cont img.not-found__3 {width: 534px;}

@media (max-width:991px) {
    .not-found__cont {padding-bottom: 0; text-align: center;}
    .not-found__cont h5 {font-size: 14pt;}
    .not-found__cont h5 span {font-size: 22pt;}
    .not-found__cont h6 {font-size: 12pt; margin-top: 10px;}
    .not-found__cont p {font-size: 11pt; margin-top: 30px;}
    .not-found__cont a {font-size: 12pt;}
    .not-found__cont img {position: static; margin: 30px auto 0;}
    .not-found__cont img.not-found__1 {width: 206px;}
    .not-found__cont img.not-found__2 {width: 211px;}
    .not-found__cont img.not-found__3 {width: 267px;}
}