@charset "utf-8";
/* CSS Document */
html, body {; margin: 0; padding: 0; font: 16px/1.6em Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; color: #494949;background-color:#f1f4f8; -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden;}
body{ overflow:hidden}
a { text-decoration: none; outline: none; color: #1D1D1D; }
a:hover { text-decoration: none; color: #000; }
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img { margin: 0; padding: 0; border: none; }
img { border: none; }
input, textarea, select, button { font: 16px/140% Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; color: #333; }
ul { list-style: none; }
.fL { float: left; }
.fR { float: right; }
.clr { clear: both; }
.tRight { text-align: right; }
.tLeft { text-align: left; }
.tCenter { text-align: center; }
img.imgBlock { display: block; }
.wrapper { position:relative;}
.box{ width:1200px; margin:0 auto; padding:15px; box-sizing:border-box;}
.mid_bg{ background: url(../images/box_bg.jpg) repeat-x; padding-top: 70px;}
.wp { padding: 0 15px; margin-bottom: 10px; }
.key_org{ color:#ec5c0e;}
.key_red{ color:#d91010;}
.w_show{ }
.m_show{ display: none;}


/*-----header-----*/
header{ background:#007c7d;}
header .box{ position:relative; height:70px;} 
header h1{ display:inline-block; width:142px; height:40px; vertical-align:middle;}
header h1 a{ display:block; width:100%; height:40px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../images/logo_ctbc.png) no-repeat center center; background-size:100% auto;}
header .nav{ position:absolute; right:15px; top:50%; transform:translateY(-50%);}
header .nav a{ display:inline-block; margin:0 0 0 35px; color:#fff; font-weight:bold;}
header .nav a:hover{ color:#f7cf55;}


/*-----footer-----*/
footer{ background:#007c7d;}
footer .box{ padding:10px; text-align:center; line-height:20px; color:#fff; font-size:14px;  font-weight:bold;}
/*side_link*/
.side_link{ display:block; position:absolute; top:-1000px; right:20px; z-index:99; width:130px; height:316px; padding-top: 50px; background:url(../images/side_link_bg.png) no-repeat center center; background-size:130px auto; box-sizing: border-box;}
.side_link a.top{ width: 100%; height: 120px; display: block; margin-bottom: 20px;}
.side_link a.bot{ width: 100%; height: 120px; display: block;}


/*-----content-----*/
.content{ background-color: #efce9e;}

/*kv*/
.kv{ position:relative; min-width: 1200px; margin: 0 auto;}
.kv img{ display:block; width:100%; height:auto;}
.kv img.kv_mobile{ display:none;}
.kv .headline{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;} 
.kv .headline img{ width:100%; height:auto; animation: shakeY 10s ease-in-out infinite alternate;}

/*mission_con*/
.mission_box > div{ margin:0 0 60px 0; background: url(../images/separate_bg.png) center bottom no-repeat; padding-bottom: 50px;}
.mission_box > div:last-child{ margin:0;}
.mission_box .mb_03{ position:relative; background:url(../images/bg_index_step03.png) no-repeat center bottom; background-size:100% auto; z-index:2;}
.mission_con:nth-child(2){ position:relative;}
.mission_box h2{ width:480px; height:50px; margin:0 auto 40px auto; text-indent:100%; white-space:nowrap; overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:100% auto;}
.mission_box .mb_01 h2{ background-image:url(../images/tit_mb01.png);}
.mission_box .mb_02 h2{ background-image:url(../images/tit_mb02.png);}
.mission_box .mb_03 h2{ background-image:url(../images/tit_mb03.png);}
.mission_box .mb_04 h2{ background-image:url(../images/tit_mb04.png);}
.mission_box .mb_txt{ width:1110px; height: 335px; padding: 40px; margin:0 auto 30px auto; text-align:center; line-height:40px; color:#07042d; font-size:21px; font-weight:bold; background: url(../images/mb_txt_bg.png) no-repeat; box-sizing: border-box;}
.mission_box .mb_01 .mb_txt{ position: relative;}
.mission_box .mb_01 .mb_txt::before{ content:''; width: 148px; height: 135px; background: url(../images/tree.png) no-repeat; position: absolute; top: -115px; left: 0; animation:bounceDown 2s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_01 .mb_txt::after{ content:''; width: 118px; height: 118px; background: url(../images/sword.png) no-repeat; position: absolute; bottom: 60px; right: 50px; animation:shakeX 3s ease-in-out infinite alternate;}
.mission_box .mb_txt .mb_date{ color: #9d2418; font-size:24px; letter-spacing: 2px;}
.mission_box .mb_02 .mb_txt{ height: 630px; background: url(../images/mb_txt_bg2.png) no-repeat;}
.mission_box .mb_04 .mb_txt{ height: 267px; background: url(../images/mb_txt_bg3.png) no-repeat; position: relative;}
.mission_box .mb_04 .mb_txt::before{ content:''; width: 42px; height: 42px; background: url(../images/coin.png) no-repeat; position: absolute; top: 150px; left: 160px; animation:wobble 4s ease-in-out infinite alternate;}
.mission_box .mb_04 .mb_txt::after{ content:''; width: 175px; height: 190px; background: url(../images/coin2.png) no-repeat; position: absolute; top: 25px; right: 90px; animation:wobble 4s ease-in-out infinite alternate; animation-delay:0.5s;}
.mission_box .mb_02 .mb_txt .mb_date{ color: #254979;}
.mission_box .mb_03 .mb_txt .mb_date{ color: #c06400;}
.mission_box .mb_04 .mb_txt .mb_date{ color: #00479d; font-size: 32px; margin-bottom: 10px;}
.mission_box .mb_02 .mb_txt img{ animation: bounce 2s ease-in-out infinite alternate;}
.mission_box .mb_03 .mb_txt img{ animation: headShake 1.5s ease-in-out infinite alternate;}
.mission_box .mb_txt p{ font-weight: normal; margin-bottom: 15px;}
.mission_box .mb_04 .mb_txt { font-size: 26px; line-height: 50px;}
.mission_box .mb_txt p span{ display:inline-block; margin:0 2px; vertical-align:middle; text-align:center; line-height:30px; background:#fa6456; color: #fff; border-radius:10px; padding: 5px; font-weight: bold;}
.mission_box .mb_txt p span.white{ background: none; color: #fa6456; font-size: 24px; padding: 0;}
.mission_box .mb_02 .mb_txt p span{ background-color: #3b77ca;}
.mission_box .mb_03 .mb_txt p span{ background-color: #e77800;}
.mission_box .mb_04 .mb_txt p span{ background-color: #00479d;}
.mission_box .mb_txt .pic_moving{ width: 580px; margin: 0 auto; position: relative;}
.mission_box .mb_txt .pic_moving img{ width: 100% auto;}
.mission_box .mb_txt .pic_moving img.on{ position: absolute; top: 0; left: 0;animation:zoomOut 2s ease-in-out infinite alternate;}

.mission_box .mb_txt .set_line{ border-top: 3px dashed #b6cef0; padding-top: 20px;}
.mission_box .mb_txt .mid{ display: flex; justify-content: center;}
.mission_box .mb_txt ul.list{ text-align: left; padding-left: 25px; box-sizing: border-box;}
.mission_box .mb_txt ul.list li{ line-height: 1.5; margin-bottom: 10px; list-style-type:disc;}
.mission_box .mb_txt ul.list li span.highlight{ background-color: #3b77ca; color: #fff; padding: 5px; border-radius: 10px; margin: 0 2px;}

/*mb_tips*/
.mission_box .mb_tips{ position:relative; width:1100px; margin:-50px auto 50px; padding-left: 185px; box-sizing:border-box;}
.mission_box .mb_03 .mb_tips{ margin-bottom: 0;}
.mission_box .mb_tips .mb_img{ position:absolute; display:block; background-repeat:no-repeat; background-position:center center; background-size:100% auto; z-index:3;}
.mission_box .mb_01 .mb_img{ left:0; top:0; width:170px; height:213px; background-image:url(../images/img_tip01.png);}
.mission_box .mb_02 .mb_img{ left:30px; top:0; width:110px; height:187px; background-image:url(../images/img_tip02.png);}
.mission_box .mb_03 .mb_img{ left:10px; top:0; width:178px; height:192px; margin:0 0 -56px 0; background-image:url(../images/img_tip03.png);}
.mission_box .mb_04 .mb_img{ left:10px; top:0; width:174px; height:174px; margin:0 0 -56px 0; background-image:url(../images/img_tip04.png);}
.mission_box .mb_01 .fadeIn .mb_img{ animation:bounceInLeft 1.5s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_02 .fadeIn .mb_img{ animation:bounceInLeft 1.5s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_03 .fadeIn .mb_img{ animation:bounceInLeft 1.5s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_04 .fadeIn .mb_img{ animation:bounceInLeft 1.5s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_tips .mb_t_tit{ width: 310px; height: 62px; position: absolute; top: -20px; right: 40px; text-align:center; line-height:62px; color:#fff; font-size:32px; font-weight:bold; background:url(../images/mb_t_tit_red.png) no-repeat center center;}
.mission_box .mb_02 .mb_tips .mb_t_tit{ background:url(../images/mb_t_tit_blue.png) no-repeat center center;}
.mission_box .mb_03 .mb_tips .mb_t_tit{ background:url(../images/mb_t_tit_yellow.png) no-repeat center center;}
.mission_box .mb_04 .mb_tips .mb_t_tit{ background:url(../images/mb_t_tit_navy.png) no-repeat center center;}
.mission_box .mb_t_box{ position:relative; width:850px; height:186px; margin:-70px 0 5px 0; background: url(../images/tips01_bg.png) no-repeat;}
.mission_box .mb_01 .mb_t_box{ animation:bounceInLeft 2s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_02 .fadeIn .mb_t_box{ background: url(../images/tips02_bg.png) no-repeat;animation:bounceInLeft 2s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_03 .fadeIn .mb_t_box{ background: url(../images/tips03_bg.png) no-repeat;animation:bounceInLeft 2s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_04 .fadeIn .mb_t_box{ background: url(../images/tips04_bg.png) no-repeat;animation:bounceInLeft 2s ease-in-out infinite alternate; animation-iteration-count:1;}
.mission_box .mb_t_txt{ position:absolute; top:50%; left: 70px; transform:translateY(-50%);line-height:30px; color:#c11c23; font-size:21px; padding-right: 50px;}
.mission_box .mb_02 .mb_t_txt{ color: #1f4880;}
.mission_box .mb_03 .mb_t_txt{ color: #d77d2e;}
.mission_box .mb_04 .mb_t_txt{ color: #0094bb;}

.mb_tips02{color: #81511c; font-size: 15px;padding-left: 50px}
/*step_con*/
.step_con{ position:relative;}
.step_con::after { position: absolute; left: 0; right: 0; top: 110px; display: block; content: ""; width: 575px; height: 128px; margin: 0 auto; z-index: 3; background: url(../images/tit_step_con.png) no-repeat center center; background-size: auto; background-size: 100% auto; animation: heartBeat 2s ease-in-out infinite alternate;}
.step_con .step_box{ padding:240px 0 0 0; background:#af3f27 url(../images/step_box_bg.jpg) repeat-x;}
.step_con .sb_card{ text-align:center;}
.sb_card .sb_box{ position:relative; display:inline-block; margin:0 0 40px 0; vertical-align:top; outline:none;}
.sb_card .sb_box::after{ display:inline-block; content:""; width:60px; height:50px; margin:0 25px; vertical-align:middle; background:url(../images/icon_arrow_r.png) no-repeat center center; background-size:100% auto;}
.sb_card .sb_box:last-child::after{ display:none;}
.sb_card .sb_cell{ overflow:hidden; position:relative; display:inline-block; width:268px; height:340px; vertical-align:middle; color:#07042d; transform-style:preserve-3d; transition:0.5s all ease; cursor:pointer;}
.sb_card .sb_cell.select{ transform:rotateY(180deg);}
.sb_card .sb_cell.select .sb_back{ z-index:1; transform:rotateY(180deg);}
.sb_card .sb_cell.select .sb_front{ z-index:2;}
.sb_card .sb_back{ position:absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; background-size:100% auto; transform:rotateY(0deg);  transform:translateZ(100px); z-index:2;}
.sb_card .sb_front{ position:absolute; width:100%; height:100%; transform:rotateY(180deg); background-repeat:no-repeat; background-position:center top; background-size:100% auto; box-sizing:border-box; z-index:1;}
.sb_01 .sb_back{ background-image:url(../images/bg_card_back01.png);}
.sb_01 .sb_front{ background-image:url(../images/bg_card_front01.png);}
.sb_02 .sb_back{ background-image:url(../images/bg_card_back02.png);}
.sb_02 .sb_front{ background-image:url(../images/bg_card_front02.png);}
.sb_03 .sb_back{ background-image:url(../images/bg_card_back03.png);}
.sb_03 .sb_front{ background-image:url(../images/bg_card_front03.png);}
.sb_card p{ position:absolute; left:0; right:0; top:57%; padding:0 30px; text-align:justify; font-size:20px; font-weight:bold;}
.sb_back h3{ position:absolute; left:0; right:0; bottom:10%; line-height:30px; font-size:26px;}
.sb_front h3{ position:absolute; left:0; right:0; top:34%; line-height:30px; font-size:26px;}


/*method_con*/
.method_con{ color:#fff; background:#af3f27; padding: 15px 0;}
.method_con .box{ width: 100%; display:none;}
.method_con .mc_tit{ height:50px; line-height:50px; text-align:center; cursor:pointer;}
.method_con .mc_tit h3{ font-size: 24px; color: #ffcc00; text-shadow: -2px 0 black, 0 1px black, 2px 0 black, 0 -2px black; display:inline-block; vertical-align:middle;}
.method_con .mc_btn{ display:inline-block; width:30px; height:30px; margin:0 0 0 10px; background:url(../images/mc_btn_close.png) no-repeat center center; background-size:100% auto;  vertical-align:middle;}
.method_con .mc_tit.select .mc_btn{ background:url(../images/mc_btn_open.png) no-repeat center center; background-size:100% auto;}
.method_con .mc_list{ margin:0 0 30px 0;}
.method_con ol { list-style:none; counter-reset:li;}
.method_con ol li { counter-increment:li; margin:0 0 10px 0; padding:0 0 0 35px; text-align:justify; text-indent:-35px;}
.method_con ol li::before{ display:inline-block; width:25px; height:25px; margin:0 10px 0 0; line-height:25px; text-align:center; content:counter(li); color:#af3f27; border-radius:25px; background:#ffcc00; text-indent:0;}
.method_con ol li ul{ counter-reset:li; margin:5px 0 0 0;}
.method_con ol li ul li{ /*padding:0 0 0 20px; text-indent:-15px;*/ padding-left: 20px;}
.method_con ol li ul li p{ text-indent:0;}
.method_con ol li ul li::before{ content:counter(li,lower-latin)'.'; width:auto; margin:0 5px 0 0; background:none; text-indent:0;}
.method_con ol li table.mc_m{ display:none;}
.method_con ol li table{ width:100%; margin:10px 0; border:1px solid #d47864; border-radius: 10px; overflow: hidden; text-indent: 0;}
.method_con ol li table th, .method_con ol li table td{ height:45px; text-align:center; border-bottom:1px solid #d47864;border-right:1px solid #d47864; padding:2px;}
.method_con ol li table th.mc_mon{ background:#8c2b16; color: #ffcc00;}
.method_con ol li table th.mc_mon:first-child{ border-top-left-radius: 10px;}
.method_con ol li table th.mc_mon:last-child{ border-top-right-radius: 10px;}
.method_con ol li table tr:last-child th, .method_con ol li table tr:last-child td{ border-bottom:none;}
.method_con ol li table tr th:last-child, .method_con ol li table tr td:last-child{ border-right:none;}
.method_con .mc_terms{ width: 1200px; margin: 0 auto 20px; box-sizing: border-box; padding: 10px;}
.method_con .mc_terms p{ text-align:justify; line-height: 25px;}
.method_con .mc_terms h3{ font-size: 24px; margin-bottom: 10px;}
.method_box{ width: 1200px; margin: 0 auto 30px auto; padding: 15px; box-sizing: border-box; border: 2px solid #ffcc00; border-radius: 10px;}



/*-----animation-----*/
.animate_fadeIn{ opacity:0; transform:translateY(50px); transition:all 1.5s;}
.fadeIn{ opacity:1; transform:translateY(0px);}
@keyframes star{ 0%{opacity:0;} 100%{opacity:1;}}
@keyframes bounceInRight{
	from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0);} 
	60% { opacity: 1; -webkit-transform: translate3d(-25px, 0,0); transform: translate3d(-25px, 0, 0);} 
	75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);} 
	90%{ -webkit-transform:translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0);} 
	to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@keyframes bounceInLeft{
	from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}  0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0);} 
	60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0);}
	75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);}
	90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0);}
	to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
@keyframes bounce {
	from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);    -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
	40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);}
	70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);}
	90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0);}}
@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-ezier(0.215, 0.61, 0.355, 1);}
	0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}
	20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
	40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);}
	60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
	80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97);}
	to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}}
@keyframes heartBeat {
	0% { -webkit-transform: scale(1); transform: scale(1);}
	14% { -webkit-transform: scale(1.2); transform: scale(1.2);}
	28% { -webkit-transform: scale(1); transform: scale(1);}
	42% { -webkit-transform: scale(1.2); transform: scale(1.2);}
	70% { -webkit-transform: scale(1); transform: scale(1);}}

@keyframes bounceDown {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes shakeX {
	from,
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	10%,
	30%,
	50%,
	70%,
	90% {
	  -webkit-transform: translate3d(-10px, 0, 0);
	  transform: translate3d(-10px, 0, 0);
	}
  
	20%,
	40%,
	60%,
	80% {
	  -webkit-transform: translate3d(10px, 0, 0);
	  transform: translate3d(10px, 0, 0);
	}
  }


@keyframes headShake {
	0% {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	}
  
	6.5% {
	  -webkit-transform: translateX(-6px) rotateY(-9deg);
	  transform: translateX(-6px) rotateY(-9deg);
	}
  
	18.5% {
	  -webkit-transform: translateX(5px) rotateY(7deg);
	  transform: translateX(5px) rotateY(7deg);
	}
  
	31.5% {
	  -webkit-transform: translateX(-3px) rotateY(-5deg);
	  transform: translateX(-3px) rotateY(-5deg);
	}
  
	43.5% {
	  -webkit-transform: translateX(2px) rotateY(3deg);
	  transform: translateX(2px) rotateY(3deg);
	}
  
	50% {
	  -webkit-transform: translateX(0);
	  transform: translateX(0);
	}
  }  

@keyframes shakeY {
	from,
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  
	10%,
	30%,
	50%,
	70%,
	90% {
	  -webkit-transform: translate3d(0, -5px, 0);
	  transform: translate3d(0, -5px, 0);
	}
  
	20%,
	40%,
	60%,
	80% {
	  -webkit-transform: translate3d(0, 5px, 0);
	  transform: translate3d(0, 05px, 0);
	}
  }  


  @keyframes zoomOut {
	from,
	50%,
	to {
	  transform: scale3d(1.25, 1.25, 1.25);
	}
  
	25%,
	75% {
	  transform: scale3d(1, 1, 1);
	}
  }


  @keyframes wobble {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	  }
	
	  15% {
		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	  }
	
	  30% {
		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	  }
	
	  45% {
		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	  }
	
	  60% {
		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	  }
	
	  75% {
		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	  }
	
	  to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	  }
  }


@media screen and (max-width:767px) {

.box{ width:100%;}
.w_show{ display: none;}
.m_show{ display: block;}

.mid_bg { background-size: auto 40px; padding-top: 50px;}


/*-----header-----*/
header .nav{ display:none;}

/*-----footer-----*/
footer{ padding-bottom: 60px;}

/*side_link*/
/*.side_link{ width: 60px; height: 146px; background-size: 100% auto; right:5px; padding-top: 25px;}
.side_link a.top { height: 50px; margin-bottom: 15px;}
.side_link a.bot { height: 50px;} */
.side_link{  position: fixed; top:inherit; bottom: 0; right:0; width: 100%; height: auto; padding-top: 0; background: none;}
.side_link img{ width: 100%; height: auto;}
.side_link a.top{ width: 50%; height: inherit; display: block; margin-bottom: 0; position: absolute; top:0; left: 0; bottom: 0;}
.side_link a.bot{ width: 50%; height: inherit; display: block; position: absolute; top:0; right: 0; bottom: 0;}
	
	
/*-----content-----*/
.content{ }

/*kv*/
.kv{ width: 100%; min-width: 100%; margin:0;}
.kv img.kv_web, .kv .btn_start{ display:none;}
.kv img.kv_mobile{ display:block;}
	
/*mission_con*/
.mission_con .box{ padding:0;}
.mission_con:nth-child(1) .mission_box, .mission_con:nth-child(2) .mission_box .box{ padding:0 15px;}
.mission_con:nth-child(2)::after{ height:60%;}
.mission_box > div{ margin:0; background-size: auto 16px; background-position: left bottom 30px;}
.mission_box .mb_03{ padding:0 0 20px 0; background-position:50% 40%;}
.content .mission_box .mb_03 .box{ margin:0;}
.mission_box h2, .mission_box .mb_03 .mb_tit_s h3{ width:100%; height:auto; margin:0 auto 15px auto;}
.mission_box h2{ position: relative; z-index: 1;}
.mission_box .mb_01 h2 { width: auto; height: 70px; background-image: url(../images/tit_mb01_m.png); background-size: auto 70px;}
.mission_box .mb_02 h2 { width: auto; height: 70px; background-image: url(../images/tit_mb02_m.png); background-size: auto 70px;}
.mission_box .mb_03 h2 { width: auto; height: 70px; background-image: url(../images/tit_mb03_m.png); background-size: auto 70px;}
.mission_box .mb_04 h2 { width: auto; height: 70px; background-image: url(../images/tit_mb04_m.png); background-size: auto 70px;}
.mission_box .mb_03 .mb_tit_s{ margin:0 0 30px 0;}
.mission_box .mb_03 .mb_tit_s h3::after{ padding:0 0 10% 0;}
.mission_box .mb_03 .mb_tit_s h3{ display:block;}
.mission_box .mb_03 .mb_tit_s::before, .mission_box .mb_03 .mb_tit_s::after{ display:none;}
.mission_box .mb_txt{ width:100%; height: 360px; font-size:16px; line-height:26px; background: url(../images/mb_txt_bg_m.png) no-repeat; background-size: 100% auto; padding: 20px;}
.mission_box .mb_txt .pic_moving{ width: 100%; padding: 10px; box-sizing: border-box;}
.mission_box .mb_txt .pic_moving img.on{ top: 10px;}
.mission_box .mb_txt p span.white{ font-size: 18px;}
.mission_box .mb_01 .mb_txt::before{ width: 80px; height: 86px; background: url(../images/tree_m.png) no-repeat; background-size: 80px auto; top: -85px}
.mission_box .mb_01 .mb_txt::after{ display: none;}
.mission_box .mb_01 .mb_txt img, .mission_box .mb_02 .mb_txt img, .mission_box .mb_03 .mb_txt img{ width: 100%; height: auto;}
.mission_box .mb_txt.ty2{ margin:0 auto ;} .mission_box .mb_txt.ty2 img{width: 100%;}
.mission_box .mb_02 .mb_txt{ height: 680px; background: url(../images/mb_txt_bg2_m.png) no-repeat; background-size: 100% auto;}
.mission_box .mb_02 .mb_txt p span{ margin:5px 10px 0 10px;}
.mission_box .mb_04 .mb_txt{ width:100%; height: 360px; font-size:16px; line-height:26px; background: url(../images/mb_txt_bg_m.png) no-repeat; background-size: 100% auto; padding: 80px 20px;}
.mission_box .mb_04 .mb_txt::before{ width:35px; height: 35px; background: url(../images/coin_m.png) no-repeat; background-size: 100% auto; top: 20px; left: 40px;}
.mission_box .mb_04 .mb_txt::after{ width: 280px; height: 65px; background: url(../images/coin2_m.png) no-repeat; background-size: 100% auto;  top: inherit; right: inherit; bottom: 50px; left: 50px;}
.mission_box .mb_txt .mb_date{ margin:0 0 5px 0;}
.mission_box .mb_txt .mb_date, .mission_box .mb_txt .mb_date span, .mission_box .mb_04 .mb_txt .mb_date{ font-size:20px;}
.mission_box .mb_txt .mb_date span::before{ height:18px; margin:-5px 15px 0 15px;}

.mission_box .mb_txt .set_line{ margin-top: 10px;}
.mission_box .mb_txt ul.list{ width: 100%;}

/*mb_award*/
.mission_box .mb_award{ margin:10px 0 0 0;}
.mission_box .mb_award ul{ position:relative; padding:0 20px;}
.mission_box .mb_award li{ height:auto;}
.mb_award .slick-prev{ left:0;}
.mb_award .slick-next{ right:0;}
.mb_award .slick-prev::before, .mb_award .slick-next::before{ width:20px; height:20px; background-repeat:no-repeat; background-position:center center; background-size:100% auto; z-index:4;}
.mb_award .slick-prev::before{ background-image:url(../images/icon_arrow_l.png);}
.mb_award .slick-next::before{ background-image:url(../images/icon_arrow_r.png);}
.mb_award .slick-prev::before, .mb_award .slick-next::before{ color:rgba(0,0,0,0);}
.content ul.slick-dots{ left:0; right:0; bottom:0; padding:0; box-sizing:border-box;}
.content ul.slick-dots li{ width:20px; height:20px;}
.content ul.slick-dots button::before, .content ul.slick-dots li.slick-active button::before{ color:#fff; font-size:40px;}
/*mb_tips*/
.content .mission_box .mb_tips{ width:100%; margin:15px 0; padding-left: 75px; }
.mission_box .mb_t_box{ width:100%; height: 195px; margin:-80px 0 0 0; background: url(../images/tips01_m_bg.png) no-repeat; background-size: 100% auto;}
.mission_box .mb_02 .fadeIn .mb_t_box{ background: url(../images/tips02_m_bg.png) no-repeat; background-size: 100% auto;}
.mission_box .mb_03 .fadeIn .mb_t_box{ background: url(../images/tips03_m_bg.png) no-repeat; background-size: 100% auto;}
.mission_box .mb_04 .fadeIn .mb_t_box{ background: url(../images/tips04_m_bg.png) no-repeat; background-size: 100% auto;}
.mission_box .mb_tips .mb_t_tit{ width:190px; height: 36px; margin:0 auto; line-height:36px; font-size:16px; background-size: 190px auto;}
.mission_box .mb_02 .mb_tips .mb_t_tit{ background-size: 190px auto;}
.mission_box .mb_03 .mb_tips .mb_t_tit{ background-size: 190px auto;}
.mission_box .mb_04 .mb_tips .mb_t_tit{ background-size: 190px auto;}
.mission_box .mb_t_tit span{ font-size:20px;}
.mission_box .mb_t_txt{ top: 30%; left: 30px; transform: translateY(-30%); line-height: 1.5; font-size: 16px; padding-right: 15px;}
.content .mission_box .mb_t_txt p{ left:-9%; width:55%; margin:0; font-size:15px; line-height:22px; text-align:justify;}
.content .mission_box .mb_02 p{ left:auto; right:-9%; line-height: 1.5;}
.content .mission_box .mb_img{ background-size:auto 100%;}
.content .mission_box .mb_img{ display:block; content:""; }
.content .mission_box .mb_03 .mb_img{ width:90px; height:97px; background:url(../images/img_tip03.png) no-repeat center center; background-size:100% auto; top: inherit; bottom: 120px; left: 0;}
.content .mission_box .mb_03 .mb_img::after{ display:block; content:""; padding:0 0 40% 0;}
.content .mission_box .mb_04 .mb_img{ width:100px; height:100px; top: 100px;}
.content .mission_box .mb_03 .mb_t_txt{ }
.content .mission_box .mb_03 .mb_t_txt p{ left:0; right:0; width:100%; margin:10px 0 0 0; padding:0 25px; text-align:center; font-size:14px; box-sizing:border-box;}
.mission_box .mb_01 .mb_img{ width: 90px; height: 113px; top:inherit; bottom: 70px; background-image:url(../images/img_tip01.png);}
.mission_box .mb_02 .mb_img{ width: 70px; height: 119px; top:inherit; bottom:15px; left:10px;background-image:url(../images/img_tip02.png);}
.mission_box .mb_02 .mb_tips::after{ right:-3%; bottom:-15%; width:100px; height:81px;}
.mission_box .mb_btn{ right:5%; top:9%;}
.mission_box .mb_btn a{ width:35px; height:35px;}
.mb_tips02{padding-left: 0; margin-left: -75px;}
.mb_02 .mb_tips02{ padding-right: 70px;}
/*step_con*/
.step_con::after{ top:15px; width:90%; height:133px;}
.step_con .step_box{ padding:70px 0 0 0; background-size: auto 50px;}	
.sb_card .sb_box::after{ display:none;}
.step_con .sb_card{ margin:20px 0 0 0;}
.slick-dotted.slick-slider{ margin-bottom: 0;}
.sb_card .slick-prev{ left:-10px; z-index: 2;}
.sb_card .slick-next{ right:0; z-index: 2;}
.sb_card .slick-prev::before, .sb_card .slick-next::before{ width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:100% auto; z-index:4; display: inline-block;}
.sb_card .slick-prev::before{ background-image:url(../images/icon_arrow_l.png);}
.sb_card .slick-next::before{ background-image:url(../images/icon_arrow_r.png);}
.sb_card .slick-prev::before, .sb_card .slick-next::before{ color:rgba(0,0,0,0);}
.sb_card .sb_cell.select{ transform:rotateY(0deg);}
.sb_card .sb_front{ transform: rotateY(0deg);}
.sb_front h3{ top:44%; line-height:20px; font-size:22px;}
.sb_front h3 br{ display:none;}
.sb_front p{ top:60%; font-size:18px;}
.sb_01 .sb_front{ background-image:url(../images/bg_card_mobile01.png);}
.sb_02 .sb_front{ background-image:url(../images/bg_card_mobile02.png);}
.sb_03 .sb_front{ background-image:url(../images/bg_card_mobile03.png);}
.sb_card .sb_back{ display:none;}

/*method_con*/
.method_con{ padding: 10px;}
.method_con .mc_terms{ width: 100%; margin-bottom: 0;}
.method_con .mc_terms h3{ font-size: 20px;}
.method_box{ width: 100%; padding: 10px; margin-bottom: 20px;}
.method_con .mc_tit{ height:50px; line-height:50px;}
.method_con .box{ padding: 0;}
.method_con ol li{ padding-left: 30px;}
.method_con ol li::before{ margin-right: 5px;}
.method_con ol li ul li{ padding-left: 10px;}
.method_con ol li table.mc_w{ display:none;}
.method_con ol li table.mc_m{ display:table;}
.method_con ol li table.mc_m td, .method_con ol li table.mc_m th{ padding: 5px;}


}


@media screen and (max-width:376px) {

/*-----content-----*/
/*mission_con*/
.mission_box .mb_02 .mb_txt{ height: 685px; background: url(../images/mb_txt_bg3_m.png) no-repeat; background-size: 100% auto;}

/*step_con*/
.step_con .sb_card{ padding:0 20px;}

}


@media screen and (max-width:321px) {

/*-----content-----*/
/*mission_con*/
.mission_box .mb_txt{ font-size: 14px; height: 300px; padding: 15px 12px;}
.content .mission_box .mb_tips{ padding-left: 50px;}
.mission_box .mb_t_txt{ font-size: 14px;}
.mission_box .mb_t_box{ margin-top: -65px; height: 170px;}
.mission_box .mb_txt p span{ line-height: 20px;}
.mission_box .mb_02 .mb_txt{ height: 580px;}
.mission_box .mb_03{ padding-bottom: 0;}
.mission_box .mb_04 .mb_txt{ font-size: 14px; height:280px; padding: 50px 12px;}
.mission_box .mb_04 .mb_txt::before{ width:25px; height: 25px; top: 20px; left: 40px;}
.mission_box .mb_04 .mb_txt::after{ width: 200px; height: 46px; bottom: 35px; left: 35px;}
.mission_box .mb_tips .mb_t_tit{ right: 20px}
.mission_box .mb_txt p span.white{ font-size: 16px;}

.mission_box .mb_txt ul.list{ padding-left: 20px;}
.mission_box .mb_txt ul.list li{ line-height: 1.6; margin-bottom: 5px;}

/*mb_tips*/
.content .mission_box .mb_img{ width:174px; height:140px;}
.mission_box .mb_btn a{ width:30px; height:30px;}
.mb_tips02{ margin-left: -50px;}

/*step_con*/
.step_con .sb_card{ padding:0 20px;}
.sb_card .sb_cell{ width: 230px; height: 300px;}
.sb_front h3{ top: 35%;}
.sb_front p{ top: 50%;}

.mission_box .mb_01 .mb_img{ width: 80px; height: 100px; bottom: 90px;}
.mission_box .mb_02 .mb_img{ width: 60px; height: 102px; bottom: 20px; left: 0;}
.content .mission_box .mb_03 .mb_img{ width: 90px; height: 97px; bottom: 135px; left: -8px;}
.content .mission_box .mb_04 .mb_img{ width: 80px; height: 80px; top:85px;}

}