@charset "UTF-8";


@keyframes fedoutx { 0% { opacity: 100%; }
  85% { opacity: 100%; }
  100% { opacity: 0%; } }

@keyframes showout { 0% { transform: scale(0);
    opacity: 0; }
  100% { transform: scale(1);
    opacity: 1; } }

html { font-size: 62.5%; }

@media (max-width: 991px) { html { font-size: 59%; } }

@media (max-width: 575px) { html { font-size: 57%; } }

body { font-size: 16px; font-size: 1.6rem; padding: 0; margin: 0; overflow-x: hidden; font-family: "Noto Sans TC", sans-serif; }

/* =14px */
h1 { font-size: 48px; font-size: 4.8rem; }

/* =24px */
h3 { font-size: 2.8rem; }

p { font-size: 1.6rem; line-height: 180%; }

a { color: #2b2c2f; }

a:link { text-decoration: none; }

a:visited { text-decoration: none; }

a:hover { text-decoration: none; /*  -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;*/ color: unset; }

a:active { text-decoration: none; }

img { width: 100%; height: auto; }

.floattext { width: 1em; line-height: 1.1em; text-align: center; position: fixed; left: 10px; top: 50%; transform: translateY(-50%); font-weight: bold; z-index: 5; }

@media (max-width: 575px) { .floattext { left: 5px; } }

div.nav { width: 100vw; height: 100vh; background-color: rgba(255, 255, 255, 0.95); top: 0; left: 0; z-index: 20; position: fixed; transform: translateX(100%); overflow-y: auto; }

@media (max-width: 991px) { div.nav { overflow-y: unset; } }

@media (max-width: 991px) { div.nav > .container { overflow-y: scroll; } }

div.nav.open { transform: translateX(0%); transition: all 0.3s ease-in-out; padding-bottom: 60px; }

div.nav ul { width: 90%; margin-left: 5%; margin-right: 5%; padding: 0; list-style: none; margin-top: 10px; }

div.nav ul li { padding: 3px 8px; border-bottom: solid 1px #dbdbdb; display: flex; align-items: center; position: relative; }

div.nav ul li a { display: block; position: absolute; width: 100%; height: 100%; }

div.nav ul li img { width: 20px; margin-right: 10px; }

div.nav .tool { margin-top: 80px; font-size: 1.8rem; color: #666; }

@media (max-width: 991px) { div.nav .tool { margin-top: 80px; } }

div.nav .tool > div.unlogin { display: flex; }

div.nav .tool > div.unlogin a { width: 40px; height: 40px; display: block; color: #333; line-height: 38px; margin-right: 10px; }

div.nav .tool > div.unlogin a.fb, div.nav .tool > div.unlogin a.gpluse { font-size: 0; background-size: cover; background-repeat: no-repeat; }

div.nav .tool > div.unlogin a.fb { background-image: url(../images/fb.png); }

div.nav .tool > div.unlogin a.gpluse { background-image: url(../images/g_pluse.png); }

div.nav .tool > div.unlogin > div { display: flex; }

div.nav .tool > div.login { display: flex; justify-content: space-between; color: #adb5bd; }

div.nav .tool > div.login a.paper { border-radius: 5px; border: solid 1px #adb5bd; color: #adb5bd; background-color: #fff; padding: 5px; }

div.nav .tool > div.login a.paper:hover { background-color: #ff6d73; color: #fff; border: solid 1px #ff6d73; transition: all 0.2s ease-in-out; }

div.nav .record { width: 100%; position: absolute; bottom: 0; left: 0; height: 45px; }

div.nav .record a { background-color: #3fb140; color: #fff; text-align: center; line-height: 45px; width: 100%; display: block; font-size: 2rem; }

#header { position: absolute; width: 100%; top: 0; float: right; }

#header .menu_but { width: 45px; height: 45px; font-size: 0; position: fixed; pointer-events: painted; z-index: 500; }

@media (max-width: 991px) { #header .menu_but { position: fixed; z-index: 50; left: calc(100vw - 60px); } }

#header .menu_but:before { content: ""; background-image: url(../images/menu_bg.png); background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; width: 450%; height: 150%; position: absolute; z-index: -1; left: -20%; top: -30%; opacity: 1; transition: all 0.3s ease-in-out; }

#header .menu_but.aa:before { content: ""; background-image: url(../images/menu_bg.png); background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; width: 450%; height: 150%; position: absolute; z-index: -1; left: -20%; top: -30%; opacity: 1; transition: all 0.3s ease-in-out; }

#header .menu_but a { pointer-events: painted; }

#header .menu_but a:before { content: ""; width: 30px; height: 3px; background-color: #000; top: 50%; left: 7.5px; position: absolute; transform-origin: center center; transform: translateY(calc(-50% - 10px)); }

#header .menu_but a:after { content: ""; width: 30px; height: 3px; background-color: #000; top: 50%; left: 7.5px; position: absolute; transform-origin: center center; transform: translateY(calc(-50% + 10px)); }

#header .menu_but a span { width: 30px; height: 3px; background-color: #000; display: block; position: absolute; top: 22px; left: 7.5px; }

#header .menu_but.open a:before { top: 50%; transform: translateY(-50%) rotate(45deg) !important; transition: all 0.2s ease-in-out; }

#header .menu_but.open a:after { top: 50%; transform: translateY(-50%) rotate(-45deg) !important; transition: all 0.2s ease-in-out; }

#header .menu_but.open a span { opacity: 0; transition: all 0.2s ease-in-out; }

#header.stay .menu_but:before { content: ""; background-image: url(../images/menu_bg.png); background-repeat: no-repeat; background-position: left bottom; background-size: 100% auto; width: 450%; height: 150%; position: absolute; z-index: -1; left: -20%; top: -30%; opacity: 1; transition: all 0.3s ease-in-out; }

#main_banner .stage > .row { position: relative !important; margin: 0px; }

#main_banner > .container-fluid { position: relative; }

#main_banner > .container-fluid > .row > div.stage { width: 100%; position: relative; }

#main_banner > .container-fluid > .row > div.stage > div { width: 100%; height: 100%; top: 0; left: 0; }

#main_banner > .container-fluid > .row > div.stage > div img { width: 100%; height: auto; }

@media (max-width: 767px) { #main_banner .row { flex-direction: column-reverse; } }

#main_banner .people { padding-top: 12%; }

@media (max-width: 767px) { #main_banner .people { padding-top: 0%; } }

#main_banner .people .imgdiv { width: 88%; height: auto; margin-left: 8%; position: relative; }

@media (max-width: 767px) { #main_banner .people .imgdiv { width: 100%; height: auto; margin-left: 0%; position: relative; left: 50%; transform: translateX(-50%) translateY(-10%); } }

#main_banner .people .imgdiv .monster { width: 10%; padding-top: 17%; background-image: url(../images/gaps_img.png); background-repeat: no-repeat; background-position: center; background-size: 100% auto; height: auto; position: absolute; left: 23%; bottom: 10%; z-index: 2; pointer-events: none;}

@media (max-width: 575px) { #main_banner .people .imgdiv .monster { background-position: bottom; width: 16%; left: 14%; bottom: 15%; background-size: auto 100%; } }

#main_banner .people .imgdiv .pp { width: 100%; overflow: hidden; }

#main_banner .people .imgdiv .pp > img { width: 100%; height: auto; }

@media (max-width: 767px) { #main_banner .people .imgdiv .pp { width: calc(100% + 30px); overflow: hidden; transform: translateX(-15px); }
  #main_banner .people .imgdiv .pp > img { width: 160%; height: auto; transform: translateX(-20%); } }

#main_banner .title_text { position: absolute; right: 0; bottom: 30%; padding-right: 5%; padding-left: 5%; }

@media (max-width: 767px) { #main_banner .title_text { display: table; margin-left: auto; margin-right: auto; width: unset; position: relative; padding-top: 25%; }
  #main_banner .title_text img { display: table; margin-left: auto; margin-right: auto; margin-bottom: 1em; width: 75%; padding-top: 15%; } }

#main_banner .title_text h1, #main_banner .title_text h2, #main_banner .title_text h3 { width: 100%; position: relative; display: flex !important; justify-content: space-between; }

#main_banner .title_text h1 { font-size: 12rem; line-height: 180%; }

@media (max-width: 767px) { #main_banner .title_text h1 { display: none !important; } }

#main_banner .title_text h2 { font-size: 4.2rem; line-height: 120%; }

@media (max-width: 767px) { #main_banner .title_text h2 { display: none !important; } }

#main_banner .title_text h3 { border-top: solid 1px #666; border-bottom: solid 1px #666; font-size: 2.4rem; line-height: 180%; }

#main_banner div#animation_container { width: 100% !important; padding-top: 77.5%; position: absolute; z-index: -1; pointer-events: none !important; left: 0; top: 0; height: unset !important; }

#main_banner div#animation_container #canvas { width: 100% !important; height: 100% !important; position: absolute !important; top: 0; left: 0; }

#main_banner div#id_html5Example1_animation_container { width: 100% !important; padding-top: 150%; position: absolute; z-index: -1; pointer-events: none !important; left: 0; top: 0; height: unset !important; }

#main_banner div#id_html5Example1_animation_container #id_html5Example1_canvas { width: 100% !important; height: 100% !important; position: absolute !important; top: 0; left: 0; }

#main_banner .textbox { display: none; }

#middle_text, #middle_text2 { font-size: 2.4rem; line-height: 180%; letter-spacing: 0.1rem; padding: 160px 0px; overflow: hidden; }

#middle_text span, #middle_text2 span { font-size: 3.6rem; }

@media (max-width: 767px) { #middle_text, #middle_text2 { font-size: 1.6rem; padding: 240px 0px 0px; }
  #middle_text span, #middle_text2 span { font-size: 2.4rem; }
  #middle_text.nowarm, #middle_text2.nowarm { padding: 120px 0 !important; } }

#middle_text { position: relative; z-index: 2; }

#middle_text:before { display: none; }

#middle_text.nowarm:before { display: none; }

#middle_text.haveslide { padding: 0px 0px !important; position: relative; }



#middle_text.haveslide a.opentext_but { width: 200px; height: 50px; position: absolute; bottom: 50px; left: 45%; color: #28a745; display: block; border: solid 2px #28a745; border-radius: 10px; font-size: 30px; display: flex; align-items: center; justify-content: center;  cursor: pointer; }

#middle_text.haveslide a.opentext_but:hover { background-color: #28a745; color: #fff; transition: all 0.3s ease-in-out; }

#middle_text.haveslide a.opentext_but.stay { display: none; }

@media (max-width: 767px) { #middle_text.haveslide a.opentext_but { width: 120px; height: 35px; font-size: 18px; border-radius: 10px; position: absolute; bottom: 20px; left: calc(50% - 60px); } }


/*#middle_text.haveslide a.opentext_but { width: 50px; height: 50px; position: absolute; bottom: 50px; left: 50%; color: #28a745; display: block; border: solid 3px #28a745; border-radius: 50%; font-size: 30px; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); cursor: pointer; }

#middle_text.haveslide a.opentext_but:hover { background-color: #28a745; color: #fff; transition: all 0.3s ease-in-out; }

#middle_text.haveslide a.opentext_but.stay { transform: rotate(-90deg); background-color: #28a745; color: #fff; transition: all 0.3s ease-in-out; }

@media (max-width: 767px) { #middle_text.haveslide a.opentext_but { width: 35px; height: 35px; position: absolute; bottom: 20px; left: calc(50% - 17px); } }*/

#middle_text #slide { margin-top: 145px; margin-bottom: 145px; }

@media (max-width: 767px) { #middle_text #slide { margin-top: 60px; margin-bottom: 90px; } }

@media (max-width: 575px) { #middle_text #slide { margin-top: 30px; margin-bottom: 60px; } }

#middle_text #slide .x { margin: 15px 0px !important; }

#middle_text #slide .textbox { display: none; }

#middle_text #slide .textbox.stay { display: block; }

img.iop { position: absolute; left: 0; width: 100%; height: auto; top: 0; }

#footer .container > .row > div { padding: 60px 15px !important; }

#footer .logo_down img { max-width: 35%; display: table; margin-left: auto; margin-right: auto; }

@media (max-width: 575px) { #footer .logo_down img { max-width: 150px; } }

#footer .sed_title { text-align: center; margin-top: 1em; font-size: 1.8rem; letter-spacing: 0.3em; font-weight: bold; }

#footer { position: relative; }

.cdr > img { width: 100%; position: absolute; bottom: 0; z-index: -1; }

@media (max-width: 767px) { .cdr > img { width: 100%; position: absolute; bottom: 140%; z-index: -1; } }

#checkpoint { position: relative; }

@media (min-width: 768px) { #checkpoint::before { position: absolute; content: ""; top: 45%; width: 35%; height: 35%; left: 0; background-size: cover; background-image: url(../images/gif/pc_in2.gif); background-position: center center; } }

#checkpoint .container .row > div .wrad { display: none; }

#checkpoint .container .row > div .number { font-size: 2rem; font-weight: bold; padding: 15px 15px !important; }

@media (max-width: 575px) { #checkpoint .container .row > div .number { padding: 0px 15px 15px 15px !important; } }

#checkpoint .container .row > div .picp { width: 100%; position: relative; left: 0; top: 0; overflow: hidden; z-index: 2; }

#checkpoint .container .row > div .picp > img { position: absolute; top: 50%; left: 50%; width: auto; height: 110%; transform: translateX(-50%) translateY(-50%) scale(0.98); z-index: -1; transition: all 0.3s ease-in-out; }

#checkpoint .container .row > div .picp:hover img { transform: translateX(-50%) translateY(-50%) scale(1); transition: all 0.3s ease-in-out; }

#checkpoint .container .row > div .text { text-align: center; margin: 15px auto; font-weight: bold; font-size: 2rem; display: flex; justify-content: center; }

@media (max-width: 767px) { #checkpoint .container .row > div .text { font-size: 1.4rem; } }

#checkpoint .container .row > div .text img { max-width: 15%; height: auto; transform: translateY(-70%) translateX(-1em); position: relative; z-index: 5; object-fit: contain; }

@media (max-width: 575px) { #checkpoint .container .row > div .text img { transform: translateY(-60%) translateX(-1em); } }

#checkpoint .container .row > div:nth-child(2) svg .linex { fill: #01516f; }

#checkpoint .container .row > div:nth-child(3) svg .linex { fill: #f6e217; }

#checkpoint .container .row > div:nth-child(4) svg .linex { fill: #445b6b; }

#checkpoint .container .row > div:nth-child(5) svg .linex { fill: #ffd19f; }

#checkpoint .container .row > div:nth-child(6) svg .linex { fill: #345e35; }

#checkpoint .container .row > div:nth-child(7) svg .linex { fill: #dbc95d; }

#checkpoint .container .row > div:nth-child(8) svg .linex { fill: #ff6d73; }

#checkpoint .container .row > div:nth-child(9) svg .linex { fill: #80ad98; }

#checkpoint .container .row > div:nth-child(10) svg .linex { fill: #445b6b; }

#checkpoint .container .row > div.clean .picp { display: none; }

#checkpoint .container .row > div.clean .wrad { display: block; }

#checkpoint .container .row > div.clean .wrad img { height: auto; width: 47%; display: table; margin-left: auto; margin-right: auto; }

#checkpoint .container .row > div.clean .text img { display: none; }

.jump { position: fixed; background-color: rgba(0, 0, 0, 0.8); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; opacity: 0; z-index: -1; transform: scale(0); pointer-events: none; }

.jump.open { transform: scale(1); z-index: 5000; opacity: 1; pointer-events: painted; transition: all 0.3s ease-in-out; }

.jump > div { max-width: 94%; width: 450px; height: auto; padding: 30px 15px 15px 15px; background-color: #fff; border-radius: 15px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); position: relative; }

.jump .closebt { font-size: 0; width: 40px; height: 40px; position: absolute; top: 5px; right: 5px; }

.jump .closebt:before { content: ""; width: 30px; height: 3px; background-color: #333; position: absolute; top: 50%; left: 5px; transform: translateY(-50%) rotate(45deg); }

.jump .closebt:after { content: ""; width: 30px; height: 3px; background-color: #333; position: absolute; top: 50%; left: 5px; transform: translateY(-50%) rotate(-45deg); }

.jump .fblogin { margin-top: 20px; }

.jump .fblogin a { background-color: #425f9c; background-image: url(../images/fb_icon.png); background-repeat: no-repeat; background-position: 20px center; text-align: center; color: #fff; font-size: 1.8rem; padding: 10px 20px; border-radius: 15px; display: block; border: solid 1px #425f9c; }

.jump .gglelogin { margin-top: 15px; }

.jump .gglelogin a { background-color: #fff; background-image: url(../images/ggicon.png); background-repeat: no-repeat; background-position: 20px center; text-align: center; color: #fff; font-size: 1.8rem; display: block; padding: 10px 20px; border-radius: 15px; border: solid 1px #999; color: #666; }

.jump .note { color: #666; margin-top: 15px; }

.jump .note a { color: green; text-decoration: underline; }

#banner { position: relative; }

@media (max-width: 575px) { #banner { background-image: url(../images/mobile_bg_top.jpg); background-repeat: repeat; background-size: 4.5% auto; } }

@media (max-width: 575px) { #banner .bannerx { padding-top: 72%; } }

#banner .bannerx:before { content: ""; /*width: 30px;*/ left: 0; top: 0; height: 100%; background-color: #fff; z-index: 1; position: absolute; }

@media (max-width: 575px) { #banner .bannerx:before { display: none; } }

#banner .bannerx img { width: 100%; height: auto; }

#banner .bannerx .monster { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; }

#banner .bannerx .logoin { position: absolute; top: 20%; left: 30px; width: 25%; height: auto; }

@media (max-width: 575px) { #banner .bannerx .logoin { left: 50%; width: 50%; top: 3%; transform: translateX(-50%); } }

/*#banner .bannerx .logoin h1 { text-align: center; letter-spacing: 0.5rem; font-size: 7rem; margin-top: 40px; position: relative; z-index: 5; color: #fff; font-weight:900 ; text-shadow: -1px -1px 0 #000, 
               1px -1px 0 #000,
              -1px 1px 0 #000, 
              1px 1px 0 #000;  }*/


#banner .bannerx .logoin h1 { text-align: center; letter-spacing: 0.5rem; font-size: 7rem; margin-top: 40px; position: relative; z-index: 5; color: #fff; font-weight:900 ; -webkit-text-stroke: 2px #000;  }


@media (max-width: 1199px) and (min-width: 992px) { #banner .bannerx .logoin h1 { font-size: 5.4rem; } }

@media (max-width: 991px) { #banner .bannerx .logoin h1 { font-size: 4.6rem; } }

@media (max-width: 767px) { #banner .bannerx .logoin h1 { font-size: 3.8rem; font-weight: 900; margin-top: 30px; -webkit-text-stroke: 0px #000;} }

@media (max-width: 575px) { #banner .bannerx .logoin h1 { font-size: 4rem; font-weight: 900; margin-top: 20px; text-align: center; color: #000; text-shadow: none; } }

.editarea { background-color: #d2d2d2; padding-bottom: 60px; }

.editarea .stagex, .editarea .trip { padding: 30px 15px; position: relative; }

@media (max-width: 575px) { .editarea .stagex, .editarea .trip { padding: 15px; } }

.editarea .stagex div.box, .editarea .trip div.box { background-color: #fff; border-radius: 30px; }

.editarea .stagex div.box .ttarea, .editarea .trip div.box .ttarea { font-size: 2.4rem; display: flex; align-items: center; padding: 90px 8% 0px; }

@media (max-width: 991px) { .editarea .stagex div.box .ttarea, .editarea .trip div.box .ttarea { font-size: 1.8rem; } }

@media (max-width: 767px) { .editarea .stagex div.box .ttarea, .editarea .trip div.box .ttarea { font-size: 1.8rem; display: flex; align-items: center; padding: 60px 8% 0px; margin-top: 100px; line-height: 160%; } }

.editarea .stagex div.box .pparea, .editarea .trip div.box .pparea { margin-top: 60px; }

@media (max-width: 575px) { .editarea .stagex div.box .pparea, .editarea .trip div.box .pparea { margin-top: 0px; } }

.editarea .stagex div.box .step, .editarea .trip div.box .step { position: absolute; font-size: 1.8rem; margin-top: 30px; padding: 0px 10px 0 30px; font-weight: bold; border-bottom: solid 1px #000; margin-left: 10px; }

.editarea .stagex div.box .step span, .editarea .trip div.box .step span { font-size: 4.2rem; }

.editarea .stagex div.box .check, .editarea .trip div.box .check { display: table; margin-left: auto; margin-right: auto; margin-bottom: 30px; }

.editarea .stagex div.box .check > a img, .editarea .trip div.box .check > a img { width: 60px; height: auto; display: table; margin-left: auto; margin-right: auto; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter: none; }

.editarea .stagex div.box .check > a.ok img, .editarea .trip div.box .check > a.ok img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0); _filter: none; transition: all 0.3s ease-in-out; }

.editarea .stagex div.box .check .checkbt, .editarea .trip div.box .check .checkbt { cursor: pointer; }

.editarea .stagex div.box .check .checkbt:after, .editarea .trip div.box .check .checkbt:after { content: "完成請打勾"; text-align: center; display: table; margin-left: auto; margin-right: auto; }

.editarea .stagex div.box .check .checkbt.ok:after, .editarea .trip div.box .check .checkbt.ok:after { display: none; }

.editarea .stagex div.box .check .pline, .editarea .trip div.box .check .pline { width: 120px; height: 5px; border-radius: 2px; border: solid 1px #fff; overflow: hidden; position: relative; }

.editarea .stagex div.box .check .pline::before, .editarea .trip div.box .check .pline::before { right: 100%; background-color: #2c9739; width: 100%; height: 100%; position: absolute; content: ""; }

.editarea .stagex div.box .check .pline.check1, .editarea .trip div.box .check .pline.check1 { border: solid 1px #2c9739; transition: all 0.3s ease-in-out; }

.editarea .stagex div.box .check .pline.check1::before, .editarea .trip div.box .check .pline.check1::before { right: 75%; transition: all 0.3s linear; }

.editarea .stagex div.box .check .pline.check2, .editarea .trip div.box .check .pline.check2 { border: solid 1px #2c9739; transition: all 0.3s ease-in-out; }

.editarea .stagex div.box .check .pline.check2::before, .editarea .trip div.box .check .pline.check2::before { right: 50%; transition: all 0.3s linear; }

.editarea .stagex div.box .check .pline.check3, .editarea .trip div.box .check .pline.check3 { border: solid 1px #2c9739; transition: all 0.3s ease-in-out; }

.editarea .stagex div.box .check .pline.check3::before, .editarea .trip div.box .check .pline.check3::before { right: 25%; transition: all 0.3s linear; }

.editarea .stagex div.box .check .pline.check4, .editarea .trip div.box .check .pline.check4 { border: solid 1px #2c9739; transition: all 0.3s ease-in-out; }

.editarea .stagex div.box .check .pline.check4::before, .editarea .trip div.box .check .pline.check4::before { right: 0%; transition: all 0.3s linear; }

.editarea .trip { position: relative; }

.editarea .trip .box { padding: 90px; font-size: 2.4rem; }

@media (max-width: 767px) { .editarea .trip .box { padding: 45px; font-size: 2rem; line-height: 160%; } }

@media (max-width: 575px) { .editarea .trip .box { padding: 30px; font-size: 1.8rem; line-height: 160%; } }

.editarea .trip .box > div { display: flex; align-items: center; }

.editarea .trip .container { position: relative; }

.editarea .trip .container:before { content: ""; border-style: solid; border-width: 60px 60px 0 0; border-color: #d2d2d2 transparent transparent transparent; position: absolute; left: 0; top: 0; }

@media (max-width: 575px) { .editarea .trip .container:before { border-width: 40px 40px 0 0; } }

.editarea .trip .container:after { content: ""; border-style: solid; border-width: 0 60px 60px 0; border-color: transparent #d2d2d2 transparent transparent; position: absolute; right: 0; top: 0; }

@media (max-width: 575px) { .editarea .trip .container:after { border-width: 0 40px 40px 0; } }

.editarea .trip .container .row:before { content: ""; border-style: solid; border-width: 0 0 60px 60px; border-color: transparent transparent #d2d2d2 transparent; position: absolute; right: 0; bottom: 0; }

@media (max-width: 575px) { .editarea .trip .container .row:before { border-width: 0 0 40px 40px; } }

.editarea .trip .container .row:after { content: ""; border-style: solid; border-width: 60px 0 0 60px; border-color: transparent transparent transparent #d2d2d2; position: absolute; left: 0; bottom: 0; }

@media (max-width: 575px) { .editarea .trip .container .row:after { border-width: 40px 0 0 40px; } }

.endstep { padding: 80px 0px; background-image: url(../images/gif/Fireworks-.gif); background-size: 100% auto; background-repeat: no-repeat; }

@media (max-width: 575px) { .endstep { background-image: url(../images/gif/Fireworks_s-.gif); padding: 80px 0px 0px; } }

.endstep .rule { display: flex; align-items: flex-end; flex-wrap: wrap; }

.endstep .rule > div { width: 100%; }

.endstep .rule .pic { width: 100%; }

.endstep .rule .pic ul { margin: 0px !important; list-style: none; display: table; width: 100%; padding-left: 0; display: table; }

.endstep .rule .pic ul li { width: 23%; padding-top: 23%; margin: 1%; position: relative; float: left; list-style: none; }

@media (max-width: 575px) { .endstep .rule .pic ul li { width: 23%; padding-top: 23%; margin: 1%; } }

.endstep .rule .pic ul li > div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 10px; color: #fff; padding: 10px; display: flex; align-items: center; justify-content: center; font-size: 5rem; }

@media (max-width: 575px) { .endstep .rule .pic ul li > div { font-size: 4rem; } }

.endstep .rule .pic ul li > div span { font-size: 1.6rem; display: block; position: absolute; left: 10px; top: 5px; }

.endstep .rule .pic ul li > div:after { content: "分"; position: absolute; font-size: 2.8rem; right: 10px; bottom: 5px; }

@media (max-width: 575px) { .endstep .rule .pic ul li > div:after { font-size: 1.8rem; } }

.endstep .rule .pic ul li:first-child > div { background-color: #d37851; }

.endstep .rule .pic ul li:nth-child(2) > div { background-color: #e3cf5b; }

.endstep .rule .pic ul li:nth-child(3) > div { background-color: #7396c6; }

.endstep .rule .pic ul li:nth-child(4) > div { background-color: #80ab96; }

.endstep .rule .text { margin-top: 50px; }

@media (max-width: 575px) { .endstep .rule .text { padding: 0 5%; } }

.endstep .rule .text ul { list-style: none; padding-left: 0; }

.endstep .rule .text ul li { list-style: none; }

.endstep .rule .text ul li span { font-size: 2.4rem; }

.endstep .ward .text { text-align: center; font-size: 2.4rem; font-weight: bold; }

.endstep .ward .text span { display: block; }

@media (max-width: 575px) { .endstep .ward .pic { width: 45%; height: auto; margin-left: auto; margin-right: auto; } }

.butline { width: 100%; position: relative; z-index: 3; }

@media (max-width: 575px) { .butline { padding: 0 15px; } }

.butline .container { position: relative; }

.butline .container .row { position: relative; }

.butline .container .row .bt { position: absolute !important; transform: translateY(200%); padding: 5px 20px; font-size: 2.4rem; border: solid 1px #666; border-radius: 30px; pointer-events: painted; cursor: pointer; }

@media (max-width: 575px) { .butline .container .row .bt { transform: translateY(300%); width: 100px; font-size: 1.7rem; padding: 5px 10px; } }

@media (max-width: 390px) { .butline .container .row .bt { transform: translateY(300%); width: 95px; font-size: 1.6rem; padding: 5px 8px; } }

.butline .container .row .bt:hover { background-color: #fdcf00; }

.butline .container .row .bt:first-child { left: 0; }

@media (max-width: 575px) { .butline .container .row .bt:first-child { text-align: center; } }

.butline .container .row .bt:first-child:before { content: ""; width: 20px; height: 20px; display: inline-block; margin-right: 15px; background-image: url(../images/arrow1.png); background-repeat: no-repeat; background-size: cover; }

@media (max-width: 575px) { .butline .container .row .bt:first-child:before { margin-right: 5px; width: 15px; height: 15px; transform: translateY(5%); } }

.butline .container .row .bt:last-child { right: 0; }

@media (max-width: 575px) { .butline .container .row .bt:last-child { text-align: center; } }

.butline .container .row .bt:last-child:after { content: ""; width: 20px; height: 20px; display: inline-block; margin-left: 15px; background-image: url(../images/arrow2.png); background-repeat: no-repeat; background-size: cover; }

@media (max-width: 575px) { .butline .container .row .bt:last-child:after { margin-left: 5px; width: 15px; height: 15px; transform: translateY(5%); } }

.evemlop { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.95); z-index: 5000; align-items: center; justify-content: center; display: none; opacity: 0; }

.evemlop .animain { width: 100%; max-width: 650px; height: 100%; max-height: 580px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 575px) { .evemlop .animain { width: 100vw; height: 100vh; max-height: unset; max-width: unset; } }

.evemlop .animain .paper { opacity: 0; transform: scale(0); display: flex; position: fixed; align-items: center; justify-content: center; top: 0; left: 0; width: 100vw; height: 100vh; }

.evemlop .animain .paper img { max-width: 650px; height: auto; max-height: 90%; width: auto; }

.evemlop.open { display: flex; opacity: 1; transition: all 0.2s ease-in; }

.evemlop.open .animain { position: relative; }

.evemlop.open .animain .close { font-size: 0; width: 40px; height: 40px; position: absolute; top: 5px; right: 5px; z-index: 50; }

.evemlop.open .animain .close:before { content: ""; width: 30px; height: 3px; background-color: #333; position: absolute; top: 50%; left: 5px; transform: translateY(-50%) rotate(45deg); }

.evemlop.open .animain .close:after { content: ""; width: 30px; height: 3px; background-color: #333; position: absolute; top: 50%; left: 5px; transform: translateY(-50%) rotate(-45deg); }

.evemlop.open .animain #kks { animation-name: fedoutx; animation-duration: 2s; animation-fill-mode: forwards; }

.evemlop.open .animain .paper { animation-name: showout; animation-duration: 1s; animation-delay: 1.5s; animation-fill-mode: forwards; }
/*# sourceMappingURL=style.css.map */


.nav>div>div>a>img {
  max-width: 180px;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

a.homex {
  width: 35px;
  height: 35px;
  display: inline-block;
  transform: translateY(-2px);
  margin-left: 15px;
}
@media (min-width:576px){
.butline .container .row .bt {
  position: absolute !important;
  transform: translateY(200%);
  padding: 10px 30px;
  font-size: 2.4rem;
  border: solid 1px #666;
  border-radius: 30px;
  pointer-events: painted;
  cursor: pointer;
  
}




#footer .logo_down img {
  max-width: 25%;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
}

@media (max-width: 390px){
.butline .container .row .bt {

    font-size: 1.5rem;

}
}

div.nav ul {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  padding: 0;
  list-style: none;
  margin-top: 10px;
  max-height: calc(100vh - 185px);
  overflow-y: auto;
  overflow-x: hidden;
}

div.nav ul>a>img {
  max-width: 180px;
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}