@charset "utf-8";
/* CSS Document */
/*!
 * eopen 202003
 * mobile first web
 */

html { height: 100%; font-size: 100%;/*16px*/ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body { height: 100%; margin: 0px; min-width: 320px; font-size: 100%; line-height: 1.875em;/*30px*/ font-family: PingFangTC,"Helvetica Neue",Helvetica,Arial,"Microsoft JhengHei","微軟正黑體",\5FAE\x8F6F\6B63\9ED1\4F53,sans-serif; color: #3F3F3F;}
dl, ol, ul { padding: 0px; margin-bottom: 1.875rem;}
* {
    box-sizing: border-box;
  }
/*=====font-awesome=====*/
.fa, .far, .fas, .fab { margin-right: .25rem; margin-left: .25rem;}

/*=====aos=====*/
/*Fade animations*/
[data-aos='fade-up'] { transform: translate3d(0, 50px, 0);}
[data-aos='fade-down'] { transform: translate3d(0, -50px, 0);}
[data-aos='fade-right'] { transform: translate3d(-50px, 0, 0);}
[data-aos='fade-left'] { transform: translate3d(50px, 0, 0);}
[data-aos='fade-up-right'] { transform: translate3d(-50px, 50px, 0);}
[data-aos='fade-up-left'] { transform: translate3d(50px, 50px, 0);}
[data-aos='fade-down-right'] { transform: translate3d(-50px, -50px, 0);}
[data-aos='fade-down-left'] { transform: translate3d(50px, -50px, 0);}
/*Zoom animations*/
[data-aos='zoom-in'] { transform: scale(.6);}
[data-aos='zoom-in-up'] { transform: translate3d(0, 50px, 0) scale(.6);}
[data-aos='zoom-in-down'] { transform: translate3d(0, -50px, 0) scale(.6);}
[data-aos='zoom-in-right'] { transform: translate3d(-50px, 0, 0) scale(.6);}
[data-aos='zoom-in-left'] { transform: translate3d(50px, 0, 0) scale(.6);}
[data-aos='zoom-out'] { transform: scale(1.2);}
[data-aos='zoom-out-up'] { transform: translate3d(0, 50px, 0) scale(1.2);}
[data-aos='zoom-out-down'] { transform: translate3d(0, -50px, 0) scale(1.2);}
[data-aos='zoom-out-right'] { transform: translate3d(-50px, 0, 0) scale(1.2);}
[data-aos='zoom-out-left'] { transform: translate3d(50px, 0, 0) scale(1.2);}

/*=====bootstrap=====*/
/*grid*/
.container { width: 100%; margin-right: auto; margin-left: auto;}
.container-fluid { width: 100%; padding-right: 10px; padding-left: 10px; margin-right: auto; margin-left: auto;}
.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; margin-left: -10px;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto { min-height: 1px; padding-right: 10px; padding-left: 10px;}
@media (min-width: 576px) {/*col-sm*/
  .container { max-width: inherit; padding-right: 20px; padding-left: 20px;}
	.container-fluid { padding-right: 20px; padding-left: 20px;}
	.row { margin-right: -20px; margin-left: -20px;}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
	.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
	.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
	.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
	.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
	.col-xl-auto { padding-right: 20px; padding-left: 20px;}
}

@media (min-width: 768px) {/*col-md*/
	.container { max-width: inherit;}
}

@media (min-width: 992px) {/*col-lg*/
    .container { max-width: 960px;}
}

@media (min-width: 1200px) {/*col-xl*/
    .container { max-width: 1140px;}
}

/*link*/
a { color: #F04553; -webkit-tap-highlight-color: rgba(0,0,0,.15);}
a:hover { color: #e03745; text-decoration: none;}
a:focus { outline-color: transparent;}/*rgba(240,69,83, 0.25)*/

/*type*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h3, h4, h5, h6, blockquote { margin-bottom: 1.875rem; font-family: inherit; font-weight: 500; line-height: 1.875rem; color: inherit;}
h1 { font-size: 2.25rem;/*36*/}
h2 { font-size: 1.875rem;}
h3 { font-size: 1.625rem;}
p { margin-top: 0; margin-bottom: 1.875rem;}

/*transitions*/
.fade.collapsing { transition: height 0s linear;}

/*.fade { transition: opacity .5s ease-in-out;}*/
.fade.in { opacity: 1;}

/*modal (pop-up)*/
.modal-content { border: 0;}
.modal-content .close .navbar-toggler-icon span:nth-child(1) { top:calc(50% - 1px); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.modal-content .close .navbar-toggler-icon span:nth-child(2) { background-color:rgba(103,103,103,0);}
.modal-content .close .navbar-toggler-icon span:nth-child(3) { top:calc(50% - 1px); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.modal-header { border-bottom: 0;}
.model-header-modify { width: 70%; border-bottom: 1px solid #585858; margin-left: auto; margin-right: auto;}
.modal-title { font-size: 1.125rem; line-height: 1.875rem; color: #222; font-weight: bold; text-align: center;}

.modal-backdrop.show { opacity: 0.5!important;}

/*buttons*/
button:focus { outline-color: transparent;}

/*forms*/
input, textarea, select, button { font-family: PingFangTC, "Helvetica Neue",Helvetica,Arial,"Microsoft JhengHei","微軟正黑體",\5FAE\x8F6F\6B63\9ED1\4F53,sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,.15);}
.input-group-append { position: relative;}
.input-group > .input-group-prepend > .input-group-text { min-width: 106px; text-align: center; -ms-flex-pack: center !important; justify-content: center !important;}
.input-group > .input-group-append > .input-group-text { background-color: transparent; border-color: #C4CDD5; border-left-color: #fff;;}

.form-control { display: block; width: 100%; height: calc(1.875rem + .625rem); padding: .313rem .625rem;/*5px 10px*/ border-color: #C4CDD5; border-radius: 0; font-size: 0.875rem;/*14*/ line-height: 1.25rem;/*20px*/ color: #222; background-clip: padding-box; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.form-control:focus { border-color: #F04553; box-shadow: 0 0 0 0.2rem rgba(240,69,83,0.25);}
.form-group { margin-bottom: 1.875rem;}
.form-check-input { position: absolute; margin-top: .75rem; margin-left: -1.25rem;}
.col-form-label, .form-text { padding-top: calc(.375rem + 1px); padding-bottom: calc(.375rem + 1px); margin-bottom: 0; font-size: 1rem; line-height: 26px; color: #6D7278; font-weight: 700;}
.form-text { margin-top: 0;}

.form-control.is-valid, .was-validated .form-control:valid { background-image: none;}
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: #F04553; background-image: none;}

.form-control:disabled, .form-control[readonly] { background-color: #f1f5f8; opacity: 1;}

.font-control-no-border { padding-right: 0; padding-left: 0; border: 0; background-color: transparent; font-size: 1.25rem; font-weight: 700;}

.form-row { position: relative;}

.form-row-nest { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; margin-right: -5px; margin-left: -5px;}
.form-row-nest > .col, .form-row-nest > [class*=col-] { padding-left: 5px; padding-right: 5px;}
.form-row:last-child, .form-row-nest:last-child { margin-bottom: 0;}

.row-border-1 { margin-bottom: 20px;}
.row-border-1:after { content: ''; display: block; width: calc(100% - 10px); height: 1px; position: absolute; right: 0; left: 0; bottom: 0; margin-right: auto; margin-left: auto; background-color: #e6e6e6;}
.row-border-1:last-child:after { display: none;}


/*list*/
ol ol { list-style: upper-alpha;}
ol ol ol { list-style: lower-alpha;}

.list-style-none { padding-left:0;  list-style: none;}
.list-style-none ol { list-style: decimal;}
.list-style-none ol ol { list-style: lower-roman;}
.list-style-none ol ol ol { list-style: lower-alpha;}

/*spacing*/
.mt-0 { margin-top: 0!important;}
.mt-1 { margin-top: .313rem!important;}/*5px*/
.mt-2 { margin-top: .625rem!important;}/*10px*/
.mt-3 { margin-top: .938rem!important;}/*15px*/
.mt-4 { margin-top: 1.25rem!important;}/*20px*/
.mt-5 { margin-top: 1.563rem!important;}/*25px*/
.mt-6 { margin-top: 1.875rem!important;}/*30px*/
.mt-7 { margin-top: 2.188rem!important;}/*35px*/
.mt-8 { margin-top: 2.5rem!important;}/*40px*/
.mt-9 { margin-top: 2.813rem!important;}/*45px*/
.mt-10 { margin-top: 3.125rem!important;}/*50px*/
.mt-11 { margin-top: 3.438rem!important;}/*55px*/
.mt-12 { margin-top: 3.75rem!important;}/*60px*/
.mr-0 { margin-right: 0!important;}
.mr-1 { margin-right: .313rem!important;}/*5px*/
.mr-2 { margin-right: .625rem!important;}/*10px*/
.mr-3 { margin-right: .938rem!important;}/*15px*/
.mr-4 { margin-right: 1.25rem!important;}/*20px*/
.mr-5 { margin-right: 1.563rem!important;}/*25px*/
.mr-6 { margin-right: 1.875rem!important;}/*30px*/
.mr-7 { margin-right: 2.188rem!important;}/*35px*/
.mr-8 { margin-right: 2.5rem!important;}/*40px*/
.mr-9 { margin-right: 2.813rem!important;}/*45px*/
.mr-10 { margin-right: 3.125rem!important;}/*50px*/
.mr-11 { margin-right: 3.438rem!important;}/*55px*/
.mr-12 { margin-right: 3.75rem!important;}/*60px*/
.mb-0 { margin-bottom: 0!important;}
.mb-1 { margin-bottom: .313rem!important;}/*5px*/
.mb-2 { margin-bottom: .625rem!important;}/*10px*/
.mb-3 { margin-bottom: .938rem!important;}/*15px*/
.mb-4 { margin-bottom: 1.25rem!important;}/*20px*/
.mb-5 { margin-bottom: 1.563rem!important;}/*25px*/
.mb-6 { margin-bottom: 1.875rem!important;}/*30px*/
.mb-7 { margin-bottom: 2.188rem!important;}/*35px*/
.mb-8 { margin-bottom: 2.5rem!important;}/*40px*/
.mb-9 { margin-bottom: 2.813rem!important;}/*45px*/
.mb-10 { margin-bottom: 3.125rem!important;}/*50px*/
.mb-11 { margin-bottom: 3.438rem!important;}/*55px*/
.mb-12 { margin-bottom: 3.75rem!important;}/*60px*/
.ml-0 { margin-left: 0!important;}
.ml-1 { margin-left: .313rem!important;}/*5px*/
.ml-2 { margin-left: .625rem!important;}/*10px*/
.ml-3 { margin-left: .938rem!important;}/*15px*/
.ml-4 { margin-left: 1.25rem!important;}/*20px*/
.ml-5 { margin-left: 1.563rem!important;}/*25px*/
.ml-6 { margin-left: 1.875rem!important;}/*30px*/
.ml-7 { margin-left: 2.188rem!important;}/*35px*/
.ml-8 { margin-left: 2.5rem!important;}/*40px*/
.ml-9 { margin-left: 2.813rem!important;}/*45px*/
.ml-10 { margin-left: 3.125rem!important;}/*50px*/
.ml-11 { margin-left: 3.438rem!important;}/*55px*/
.ml-12 { margin-left: 3.75rem!important;}/*60px*/

@media screen and (min-width: 768px) {/*md*/
  /*spacing*/
  .mt-lg-0 { margin-top: 0!important;}
  .mt-lg-1 { margin-top: .313rem!important;}/*5px*/
  .mt-lg-2 { margin-top: .625rem!important;}/*10px*/
  .mt-lg-3 { margin-top: .938rem!important;}/*15px*/
  .mt-lg-4 { margin-top: 1.25rem!important;}/*20px*/
  .mt-lg-5 { margin-top: 1.563rem!important;}/*25px*/
  .mt-lg-6 { margin-top: 1.875rem!important;}/*30px*/
  .mt-lg-7 { margin-top: 2.188rem!important;}/*35px*/
  .mt-lg-8 { margin-top: 2.5rem!important;}/*40px*/
  .mt-lg-9 { margin-top: 2.813rem!important;}/*45px*/
  .mt-lg-10 { margin-top: 3.125rem!important;}/*50px*/
  .mt-lg-11 { margin-top: 3.438rem!important;}/*55px*/
  .mt-lg-12 { margin-top: 3.75rem!important;}/*60px*/
  .mr-lg-0 { margin-right: 0!important;}
  .mr-lg-1 { margin-right: .313rem!important;}/*5px*/
  .mr-lg-2 { margin-right: .625rem!important;}/*10px*/
  .mr-lg-3 { margin-right: .938rem!important;}/*15px*/
  .mr-lg-4 { margin-right: 1.25rem!important;}/*20px*/
  .mr-lg-5 { margin-right: 1.563rem!important;}/*25px*/
  .mr-lg-6 { margin-right: 1.875rem!important;}/*30px*/
  .mr-lg-7 { margin-right: 2.188rem!important;}/*35px*/
  .mr-lg-8 { margin-right: 2.5rem!important;}/*40px*/
  .mr-lg-9 { margin-right: 2.813rem!important;}/*45px*/
  .mr-lg-10 { margin-right: 3.125rem!important;}/*50px*/
  .mr-lg-11 { margin-right: 3.438rem!important;}/*55px*/
  .mr-lg-12 { margin-right: 3.75rem!important;}/*60px*/
  .mb-lg-0 { margin-bottom: 0!important;}
  .mb-lg-1 { margin-bottom: .313rem!important;}/*5px*/
  .mb-lg-2 { margin-bottom: .625rem!important;}/*10px*/
  .mb-lg-3 { margin-bottom: .938rem!important;}/*15px*/
  .mb-lg-4 { margin-bottom: 1.25rem!important;}/*20px*/
  .mb-lg-5 { margin-bottom: 1.563rem!important;}/*25px*/
  .mb-lg-6 { margin-bottom: 1.875rem!important;}/*30px*/
  .mb-lg-7 { margin-bottom: 2.188rem!important;}/*35px*/
  .mb-lg-8 { margin-bottom: 2.5rem!important;}/*40px*/
  .mb-lg-9 { margin-bottom: 2.813rem!important;}/*45px*/
  .mb-lg-10 { margin-bottom: 3.125rem!important;}/*50px*/
  .mb-lg-11 { margin-bottom: 3.438rem!important;}/*55px*/
  .mb-lg-12 { margin-bottom: 3.75rem!important;}/*60px*/
  .ml-lg-0 { margin-left: 0!important;}
  .ml-lg-1 { margin-left: .313rem!important;}/*5px*/
  .ml-lg-2 { margin-left: .625rem!important;}/*10px*/
  .ml-lg-3 { margin-left: .938rem!important;}/*15px*/
  .ml-lg-4 { margin-left: 1.25rem!important;}/*20px*/
  .ml-lg-5 { margin-left: 1.563rem!important;}/*25px*/
  .ml-lg-6 { margin-left: 1.875rem!important;}/*30px*/
  .ml-lg-7 { margin-left: 2.188rem!important;}/*35px*/
  .ml-lg-8 { margin-left: 2.5rem!important;}/*40px*/
  .ml-lg-9 { margin-left: 2.813rem!important;}/*45px*/
  .ml-lg-10 { margin-left: 3.125rem!important;}/*50px*/
  .ml-lg-11 { margin-left: 3.438rem!important;}/*55px*/
  .ml-lg-12 { margin-left: 3.75rem!important;}/*60px*/
}

/* ====loading-animation==== */

/* ====color==== */
.color-1 { color: #64D3FD;}
.color-2 { color: #A0B8CB;}
.color-w { color: #fff;}
.bgc-1 { background-color: #fff;}
.bgc-2 { background-color: #17334B;}
.bg-b { background-color: #26639F;}

/* ====text==== */
h1 { display: inline; font-size: 18px; font-weight: normal; margin: 0; padding-left: 2.5%; padding-bottom: 3px;}
h2 { font-size: 14px; text-align: left; font-weight: normal; margin: 0; line-height: 16px;}
.fz-1 {font-size: 32px;}

/* style */
body {background-color: #05111A;}
.wrapper {width: 100%; height: 100%; padding-top: 44px;}
.swiper-container { width: 100%; height: 100%;}
.step-box { width: 100%; height: 65%;}
.step-box .step-card { width: auto; height: 100%; text-align: center; background-color: #05111A;}
.step-box .step-card > video { height: 100%;}
.content-box { height: 35%; padding: 5%; padding-bottom: 10px; color: #fff;}
.content-box > div > p { padding-left: 2.5%; margin-bottom: 0;}
.content-box > ol { margin-bottom: 0; padding: 0 5% 10px 7%; color: #fff;}
.content-box .content-box-div { height: calc(100% - 70px); overflow: scroll;}
.content-box .content-box-p { padding-left: 0;}
.swiper-pagination { bottom: 10px; left: 50%; transform: translateX(-50%);}
.swiper-pagination > span { margin-right: 5px;}
.swiper-pagination > span:last-child { margin-right: 0px;}