/* 設定CSS變數 */
:root{    
    --pri01:#124407; /*主色1藍*/
	--pri02:#E8FBFF; /*主色2淺藍*/
    --pri03:#FF3761; /*主色3紅*/
    --pri04:#738F00; /*主色4綠*/
    --pri05:#505D67; /*主色5淺綠*/

	--e1:#738F00;
	--e2:#546800;
	--e3:#124407;
	--e4:#AE1E3C;
	--e5:#FF3761;
	--e6:#FF9D00;
    
	--pd:2rem;     /* 通用距離 */
	--pdh:1rem;    /* 通用距離x.5 */
	--pd2:4rem;    /* 通用距離x2 */
	
	--fsXS:1rem;    /* 字體大小XS */
	--fsS:1.2rem;   /* 字體大小S */
	--fsP:1.5rem;   /* 字體大小P */
	--fsM:2rem;     /* 字體大小M */
	--fsL:2.7rem;   /* 字體大小L */
	--fsXL:3.5rem;  /* 字體大小XL */
	--fsXL2:4.5rem; /* 字體大小XXL */
	
	--vh100:100vh; /* 透過js計算真正的100vh */
	--maxW:1440px;  /* 最大內容寬度 */
	--maxW2:1280px;  /* 最大內容寬度2 */
	
    --gradient01: linear-gradient(0deg, var(--pri01) 0%, var(--pri02) 50%, var(--pri03) 100%); /* 漸層 */
    
}
/* 專案CSS */
html, body{ font-size: 10px;} /* 1rem */
body{ background-color: #E8FBFF; background-image: url(../Images/noise.svg);}
body *{ background-position: center; background-repeat: no-repeat;}
.container{ display: block; width: 100%; max-width: var(--maxW); margin: 0 auto;}

h1,h2,h3,h4,h5,h6,p{ line-height: 1.2; font-weight: 500;}
h1{font-size: var(--fsXL2); font-weight: 700;}
h2{font-size: var(--fsXL2); font-weight: 700; text-align: center;}
h3{font-size: var(--fsXL); font-weight: 700; color: var(--pri01); margin: 5rem auto; text-align: center; letter-spacing: 4px;}
h4{font-size: var(--fsL); font-weight: 500; text-align: center;}
h5{font-size: var(--fsM);}
h6{font-size: var(--fsP);}
p {font-size: var(--fsP);}
.red{ color: var(--pri03)!important; }
.green{ color: var(--pri01)!important; }
hr{ width: 100%; height: 1px; margin: 5rem 0; background-color: #D7E2E4; border: none;}

.pc{ display: inline-block;}
.mobile{ display: none;}

/* a.btn設定 */
a.btn{padding:8px 20px; background-color:#FFF; font-size: var(--fsM); color:var(--pri05); border-radius: 10px; border: 1px solid var(--pri05);}
a.btn.disable{ opacity: .5; pointer-events: none;}
a.btn:hover{ background-color:var(--pri05); color: #FFF;}

a.btn.small{ font-size: 14px; padding: 5px 8px;}
a.btn.small::before,
a.btn.small::after{ font-size: 20px; vertical-align: bottom;}
a.btn.Large{ font-size: 26px; padding: 10px 45px; letter-spacing: 5px;}
a.btn.Large::before,
a.btn.Large::after{ font-size: 30px; vertical-align: bottom; margin-right: 5px;}
a.btn span{vertical-align: middle;}

a.btn2{ display: inline-block; padding: 1.5rem 7rem; font-size: var(--fsL); font-weight: 600; letter-spacing: 5px; color: #FFF; background-color: var(--pri04); border-radius: 50px; transition: .5s; text-decoration: none; filter: drop-shadow(0 4px 0 var(--pri01));}
a.btn2:hover{ animation: pulse .4s linear 0s 2;}
.btnbox{ display: inline-block; width: 100%; text-align: center;}

.btngroup{ display: inline-block; font-size: 0;}
.btngroup a.btn{ border-radius: 0; border-right: 1px solid #FFF; padding: 10px 25px; margin: 0; font-size: 18px;}
.btngroup a.btn:first-child{ border-top-left-radius: 50%; border-bottom-left-radius: 50%; padding-left: 40px; }
.btngroup a.btn:last-child{ border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-right: none; padding-right: 40px;}
.btngroup.Large a.btn{ font-size: 26px; letter-spacing: 5px; padding: 14px 40px; }
.btngroup.Large a.btn:first-child{padding-left: 50%;}
.btngroup.Large a.btn:last-child{padding-right: 50%;}

.shadowbox{ filter: drop-shadow(0 4px 0 #D7E2E4);}

div.lightbox{ display: none; position: fixed; width: 100%; height: 100vh; top: 0; left:0; z-index: 1000; justify-content: center; align-items: center;}
div.lightbox b.bg{ display: block; position: absolute; width: 100%;  height: 100%; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
div.lightbox .container{ display: inline-block; position: relative; width: 80%; max-width: var(--maxW2); padding: 5rem 3rem; text-align: center; z-index: 1; background-color: #fff; border-radius: 20px; font-size: var(--fsM); line-height: 1.5;}
div.lightbox a.close{ width: 40px; height: 40px; border-radius: 50%; background-color: var(--e1); position: absolute; top: -20px; right: -20px; color: #FFF; font-weight: 500; font-size: 0px; line-height: 1; z-index: 10; cursor: pointer; pointer-events: auto; background-image: url(../Images/close_white.svg); background-size: 50%; background-repeat: no-repeat; background-position: center; transition: .3s;}
div.lightbox a.close:hover{ background-color: var(--e4);}
div.lightbox.show{  display: flex; }
div.lightbox .btnbox{ width: 100%;}
div.lightbox .btnbox a.btn{ width: 100%; max-width: 350px; font-size: var(--fsM); color: #FFF; background-color: var(--e1); border-radius: 50px; padding: 1rem 3rem; filter: drop-shadow(0 4px 0 #124407); transition: .3s;}
div.lightbox h4{color: var(--pri01); font-weight: 700; margin: 0 0 2rem; font-size: var(--fsL);}
div.lightbox h5{ color: var(--pri01); font-weight: 500; margin: 0 0 2rem; font-size: var(--fsM);}
div.lightbox .rwd{width: 100%; max-height: 50vh; overflow: auto;}
div.lightbox .tablebox{ width: fit-content; margin: 0 auto 3rem; }
div.lightbox .tablebox li{ padding: 1rem;}

div.lightbox.check .tablebox li{ border-bottom: 1px solid #7D7D7D;}
div.lightbox.check .tablebox .head li{ color: var(--pri01); border-top: 1px solid #7D7D7D;}
div.lightbox.check .tablebox li br{ display: none;}

div.lightbox.arlm span{ display: block; color: var(--e4); text-align: center; padding: 1rem 0;  }


.rulelist{ width: 100%; line-height: 1.5; text-align: left;}
.rulelist .blue{ color: var(--pri03);}
.rulelist > dt,
.rulelist > dd{ margin: 0 0 1rem;}
.rulelist > dt.title{ color: var(--pri01); font-size: 22px;}
.rulelist > dt{ margin-top: 2rem;}
.rulelist > dd{ padding-left:0px; word-break: break-all;}
.rulelist li{ list-style-type: auto; margin-bottom: 1rem;}
.rulelist ul{ padding-left: 40px;}
.rulelist li li{ list-style-type: lower-roman; margin-left: 1rem; margin-bottom: 0;}
.rulelist li > ul{ padding-left: 30px; margin-top: 1rem; margin-bottom: 1rem;}

/* header */
header img.pc{ width: 100%; max-width: 1440px; margin: 0 auto; display: block;}
header .KVbox{ display: block; width: 100%; max-width: 1440px; margin: 0 auto;  background-repeat: no-repeat; background-position: center; background-size: contain; position: relative;}
header .KVbox::after{ content: ""; display: block; padding-top: 56.25%;}
header .KVbox.pc{background-image: url(../Images/KV2.jpg);}
header .KVbox.mobile{ display: none; background-image: url(../Images/KV3.jpg);}
header .KVbox.mobile::after{ padding-top: 75.2%;}
header .KVbox .ico{ display: inline-block; position: absolute; }
header .KVbox .ico img{ width: 100%; height: auto; display: block; }
header .KVbox .ico.p1{ width: 56.81%; top: 13%; left: 5%; animation: flipInX 2s linear 0s 1;}
header .KVbox .ico.p2{ width: 9.31%; top: 20.5%; left: 61.7%; animation: bounce 2.1s linear 0s infinite;}
header .KVbox .ico.p3{ width: 8.819%; top: 20.5%; left: 85.7%; animation: bounce 2.2s linear 0.15s infinite;}

footer{ padding: 3rem 0; text-align: center; background-image: url(../Images/footer_bg.png); background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto;}
footer p{ color: var(--pri01);}
footer a:hover{ animation: pulse .4s linear 0s 2;}
footer a.goweb{ display: block; margin: 5rem auto 3rem;}
.sharelink{ display: block; width: 100%; text-align: center;}
.sharelink a.share{ display: inline-block; width: 110px; height: 48px; margin: 1rem; background-size: contain; background-repeat: no-repeat; background-position: center center;}
.sharelink a.share.fb{ background-image: url(../Images/share_fb.png);}
.sharelink a.share.line{ background-image: url(../Images/share_line.png);}
.sharelink a.share.ig{ background-image: url(../Images/share_ig.png);}

.hotbtn{ position: fixed; bottom: 2rem; right: 2rem; z-index: 99; display: flex; flex-direction: column; align-items: center; margin: 1rem 0;}
.hotbtn img{width: 145px;}
.hotbtn a:hover{ animation: pulse .4s linear 0s 2;}

/* index首頁 */
.bodybox.index{ background-image: url(../Images/bg_wave1.svg); background-position: 0 0; background-repeat: repeat;}
block{ display: block; position: relative; width: 100%; padding: 0 0 7rem;}
block.wave::after{ content: ""; position: absolute; width: 100%; height: 200px; bottom: -120px; left: 0; background-image: url(../Images/bg_wave1.svg); background-size: 100% auto; background-repeat: no-repeat; background-position: bottom center; z-index: -1;}
block .container{ max-width: var(--maxW2); }
h2.title{ width: 362px; height: 200px; color: #FFF; display: block; margin: 0 auto; padding-top: 105px; background-image: url(../Images/title_bg.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto;}

block.b1{}
block.b1 h3{position: relative; display: block; width: fit-content; margin-bottom: 0; }
block.b1 h3 img{ height: calc(var(--fsXL)*1.5); margin: 0 8px 15px 3px; vertical-align: middle;}
block.b1 .container{ background-image: url(../Images/curve_bg1.svg); background-size: contain;}
block.b1 p{ display: block; width: fit-content; margin: 0 auto; font-size: var(--fsM); color: var(--pri05); text-align: center; padding: 8rem 0; position: relative;}
block.b1::before,
block.b1::after,
block.b1 h3::before,
block.b1 h3::after,
block.b1 p::before,
block.b1 p::after{ content: ""; position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1;}
block.b1::before{ background-image: url(../Images/icon_coins.png); width: 109px; height: 104px; top: 30px; left: 15%;}
block.b1::after{ background-image: url(../Images/cloud.svg); width: 574px; height: 155px; top: 10px; right: 5%; opacity: .4; z-index: 0;}
block.b1 h3::before{ background-image: url(../Images/icon_chess.png); width: 112px; height: 101px; bottom: -100px; left: -112px;}
block.b1 h3::after{ background-image: url(../Images/icon_message.png); width: 213px; height: 348px; bottom: -100px; right: -213px;}
block.b1 p::before{ background-image: url(../Images/icon_house.png); width: 234px; height: 106px; bottom: -100px; left: -234px;}
block.b1 p::after{ background-image: url(../Images/icon_dice.png); width: 128px; height: 121px; bottom: -100px; right: -128px;}

block.b2{ z-index: 5; }
block.b2::after{ background-image: url(../Images/bg_wave1.svg);}

block.b2 h3{position: relative; display: block; width: fit-content;}
block.b2 h3::before,
block.b2 h3::after{ content: ""; position: absolute; width: 15px; height: 15px; background-color: var(--pri01); border-radius: 50%; z-index: 1; top: 50%; transform: translateY(-50%);}
block.b2 h3::before{ left: -4rem; }
block.b2 h3::after{ right: -4rem; }


block.b2 .event_list{ display: block; margin: 0 auto; width: 100%; padding: 0; position: relative;}
.event_list .item{ display: inline-flex; width: 100%; align-items: center; justify-content: space-between; padding: 2rem 0; border-radius: 10px; border: 1px solid #C9C9C9; background-color: #fff; filter: drop-shadow(0 4px 0 #C9C9C9); margin-bottom: 10px; overflow: hidden;}
.event_list .item li{font-size: var(--fsM); font-weight: 700; text-align: center; padding: 2rem 0; position: relative; }
.event_list .item .i1{ width: 16%; font-size: var(--fsL); color: #FFF; }
.event_list .item .i2{ font-size: var(--fsL);}
.event_list .item .i3{ width: 42%; font-weight: 500; border-left: 1px dashed #505D67; }
.event_list .item .i2 span{ display: inline-block; margin: 0 5px; }
.event_list .item .i2 span.s1{ font-size: var(--fsM); }
.event_list .item .i2 span.s2{ font-size: var(--fsM); font-weight: normal; }
.event_list .item .i2 span.s3{ display: block; font-weight: normal; color: var(--e4); margin-top: 5px; }

.event_list .item li.i1 b,
.event_list .item li.i1 b::before,
.event_list .item li.i1 b::after{ content: ""; display: inline-block; position: absolute; width: 100%; padding-top: 100%; background-color: var(--e1); border-radius: 50%;}
.event_list .item li.i1 b{ width: 200%; padding-top: 200%; top: 50%; right: 0; z-index: -1; transform: translateY(-50%);}
.event_list .item li.i1 b::before{ top: 0; right: -10px; opacity: .4;}
.event_list .item li.i1 b::after{ top: 0; right: -20px; opacity: .2;}

.event_list .item.e1 li.i1 b,
.event_list .item.e1 li.i1 b::before,
.event_list .item.e1 li.i1 b::after{ background-color: var(--e1);}
.event_list .item.e2 li.i1 b,
.event_list .item.e2 li.i1 b::before,	
.event_list .item.e2 li.i1 b::after{ background-color: var(--e2);}
.event_list .item.e3 li.i1 b,
.event_list .item.e3 li.i1 b::before,
.event_list .item.e3 li.i1 b::after{ background-color: var(--e3);}
.event_list .item.e4 li.i1 b,
.event_list .item.e4 li.i1 b::before,
.event_list .item.e4 li.i1 b::after{ background-color: var(--e4);}
.event_list .item.e5 li.i1 b,
.event_list .item.e5 li.i1 b::before,
.event_list .item.e5 li.i1 b::after{ background-color: var(--e5);}
.event_list .item.e6 li.i1 b,
.event_list .item.e6 li.i1 b::before,
.event_list .item.e6 li.i1 b::after{ background-color: var(--e6);}
.event_list .item.e1 .i2 b{ color: var(--e1);}
.event_list .item.e2 .i2 b{ color: var(--e2);}
.event_list .item.e3 .i2 b{ color: var(--e3);}
.event_list .item.e4 .i2 b{ color: var(--e4);}
.event_list .item.e5 .i2 b{ color: var(--e5);}
.event_list .item.e6 .i2 b{ color: var(--e6);}

block.b3{ z-index: 4; background-color: #FFF6E9; background-image: url(../Images/noise2.svg); background-repeat: repeat; }
block.b3::after{ background-image: url(../Images/bg_wave2.svg); bottom: -80px; }

block.b3 .formbody{ padding: 8rem; border: none; background-color: transparent; width: fit-content; background-image: url(../Images/curve_bg3_1.svg); background-size: 100% 100%; background-repeat: no-repeat; filter: none;}
block.b3 .formbody::before{ top: 0; left: 25px;}
block.b3 .formbody::after{ top: 0; right: 5px;}
block.b3 .formbody b{ top: 0; left: 25px;}
block.b3 .formbody .tablebox{ font-size: var(--fsL); line-height: 1.5; margin-top: 0;}
block.b3 .tablebox li{ padding: .5rem;}
block.b3 .tablebox li:nth-of-type(1){ width: 20px;}
block.b3 img{ width: 100%; max-width: 1280px; margin: 2rem auto;}

block.b3 .formbody.s2{ padding: 10rem 20rem; margin-top: 3rem; background-image: url(../Images/curve_bg3_2.svg); }
block.b3 .formbody.s2::before,
block.b3 .formbody.s2::after{ display: none;}
block.b3 .formbody.s2 .tablebox{ font-size: var(--fsM);}
block.b3 .formbody.s2 h4{ font-size: var(--fsXL); font-weight: 700; color: var(--pri01); margin-bottom: 3rem; position: relative;}
block.b3 .formbody.s2 h4::before,
block.b3 .formbody.s2 h4::after{ content: ""; width: 10px; height: 30px; background-image: url(../Images/icon_a2.png); background-repeat: no-repeat; background-position: center; margin: 0 2rem; vertical-align: middle;}
block.b3 .formbody.s2 h4 span{ display: inline-block; vertical-align: middle;}

block.b3 .privacy_box{ padding-top: 5rem;}
block.b3 .privacy_box a.btn{ display: block; width: fit-content; margin: 0 auto; padding: 2rem 5rem; border-radius: 20px; background-color: var(--e6); color: #FFF; font-size: var(--fsXL); font-weight: 500; border: none; filter: drop-shadow(0 8px 0 #E28B00); transition: none; }
block.b3 .privacy_box a.btn:hover{ animation: rubberBand 1s linear 0s 1;}
block.b3 .privacy_box a.btn::after{ content:"keyboard_arrow_down"; color: var(--e6); font-size: var(--fsL); font-weight: 900; background-color: #fff; border-radius: 50%; vertical-align: middle; margin-left: 2rem;}
block.b3 .privacy_box a.btn span{ display: inline-block; vertical-align: middle; }
block.b3 .rulelist{ display: none; font-size: var(--fsM); font-weight: normal; padding: 5rem; border-radius: 20px; background-color: #fff; border: 1px solid #FFDFBD;  filter: drop-shadow(0 8px 0 #FFDFBD);}
block.b3 .privacy_box a.btn.on + .rulelist{ display: block; }
block.b3 .privacy_box a.btn.on{ margin-bottom: -10px;}
block.b3 .privacy_box a.btn.on::after{ content:"keyboard_arrow_up";}

block.b4{ z-index: 3; background-color: #FFF;}
block.b4::after{ background-image: url(../Images/bg_wave3.svg); bottom: -180px; }

block.b4 h3{ color: var(--e5); }
block.b4 h3 span{ position: relative; display: inline-block;}
block.b4 h3 span::before,
block.b4 h3 span::after{ content: ""; position: absolute;  }
block.b4 h3 span::before{ animation: rubberBand 2.1s linear .9s infinite; background-image: url(../Images/title_icon1.png); width: 80px; height: 59px; top: -59px; left: -80px; }
block.b4 h3 span::after{ animation: wobble 2s linear 0s infinite; background-image: url(../Images/title_icon2.png); width: 46px; height: 63px; top: -63px; right: -46px;}

block.b4 .join_list{ display: flex; flex-wrap: wrap; justify-content: space-between;}
block.b4 .join_list .item{ width: 30%; position: relative; font-size: var(--fsL); padding: 3rem 3rem 9rem; margin-bottom: 5%; text-align: center; background-color: #fff; border: 1px solid #C9C9C9; filter: drop-shadow(0 4px 0 #C9C9C9); border-radius: 20px;}
block.b4 .join_list .item li{ padding: 1rem;}
block.b4 .join_list .item .j1{ color: var(--pri04); font-size: var(--fsXL); font-weight: 600;}
block.b4 .join_list .item .j2{ font-weight: 600;}
block.b4 .join_list .item .j2 span{ font-size: var(--fsM);}
block.b4 .join_list .item .j3{ font-weight: 400;}
block.b4 .join_list .item .j4{ position: absolute; bottom: 3rem; left:3rem; width: calc(100% - 6rem);}
block.b4 .join_list .item .j4 a.btn{ width: 100%; border-radius: 30px; font-size: var(--fsM); letter-spacing: 3px; border: none; color: #FFF; background-color: var(--pri04); filter: drop-shadow(0 4px 0 rgba(0,0,0,.6));}
block.b4 .join_list .item .j4 a.btn:hover{ animation: pulse .4s linear 0s 2;}

block.b4 .join_list .item.full .j1,
block.b4 .join_list .item.full .j3{color: var(--e4);}
block.b4 .join_list .item.full .j4 a.btn{ background-color: var(--e4); }
block.b4 .join_list .item.full .j4 a.btn:hover{ animation: shakeX 1s linear 0s 1;}

block.b4 .join_list .item.wait .j1,
block.b4 .join_list .item.wait .j3{color: var(--e6);}
block.b4 .join_list .item.wait .j3{ font-size: var(--fsM);}
block.b4 .join_list .item.wait .j4 a.btn{ background-color: var(--e6); }

block.b5{ z-index: 2;}
block.b5 .container{}
block.b5 .tabs{ display: flex; justify-content: center; align-items: flex-end; text-align: center; width: 100%; margin-top: 3rem;}
block.b5 .tabs a{ font-size: var(--fsXL); font-weight: 700; color: #FFF; padding: 2.5rem 5rem; border-radius: 20px 20px 0 0; margin: 0 1rem;}
block.b5 .tabs a:hover{ animation: pulse .7s linear 0s 1;}
block.b5 .tabs a.t1{background: linear-gradient(180deg, #039EE2 0%, #0075A8 100%);}
block.b5 .tabs a.t2{background: linear-gradient(179.85deg, #FF9D00 0.12%, #FF3761 267.6%);}
block.b5 .tabs a.t3{background: linear-gradient(360deg, #FF3761 -49.71%, #FFB9C5 170.21%);}
block.b5 .framecontent{ display: none; width: 100%; padding: 5rem; border: 3px solid #FFB9C5; border-radius: 20px; background-image: url(../Images/frame_bg4_1.jpg); background-size: cover; filter: drop-shadow(0 8px 0 #FFB9C5); color: #FFB9C5; text-align: center;}
block.b5 .framecontent h5{ font-size: var(--fsXL2); font-weight: 900; letter-spacing: 10px; color: var(--e4); padding: 10rem 0;}
block.b5 .ytbox{ display: block; width: 100%; position: relative;}
block.b5 .ytbox::after{ content: ""; display: block; padding-top: 56.25%; }
block.b5 .ytbox iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 20px;}

block.b5 .container.t1 .tabs a.t1{ padding: 3rem 5rem; filter: drop-shadow(0 -4px 0 #0075A8); }
block.b5 .container.t2 .tabs a.t2{ padding: 3rem 5rem; filter: drop-shadow(0 -4px 0 #E28B00); }
block.b5 .container.t3 .tabs a.t3{ padding: 3rem 5rem; filter: drop-shadow(0 -4px 0 var(--e5)); }

block.b5 .container.t1 .framecontent.t1,
block.b5 .container.t2 .framecontent.t2,
block.b5 .container.t3 .framecontent.t3{ display: block;}






/* form表單頁面 */
.formframe{ display: block; padding: 5rem 10rem; border-radius: 20px; border: 1px solid #D7E2E4; background-color: #fff; filter: drop-shadow(0 4px 0 #D7E2E4); margin: 0 auto;}
.formframe h3{ margin: 0 auto; color: var(--pri04);}
.formframe h4{ font-size: var(--fsL); font-weight: 700; text-align: center; padding: 2rem 0 0; margin-bottom: 5rem;}
.formframe h4 span{ font-size: var(--fsM);}
.formframe h4 span.s2{ font-weight: 400;}
.formframe h4 span.s3{ display: block; font-size: var(--fsL); font-weight: 400; margin-top: 3rem;}
.formframe .btnbox{margin: 5rem 0;}

.formframe .agree{ width: calc(100% - 20rem); margin: 0 10rem;}
.formframe .agree input[type=checkbox]+Label{ color: var(--pri05); margin-bottom: 2rem; position: relative; padding-left: 3rem;}
.formframe .agree input[type=checkbox]+Label::before{ position: absolute; top: 3px; left: 0;}

.formbody{ width: 100%; display: block; padding: 5rem 10rem; position: relative; background-color: #fff; margin: 0 auto; border: 1px solid #D7E2E4; border-radius: 20px; filter: drop-shadow(0 4px 0 #D7E2E4);}
.formbody h6{ font-size: var(--fsL); font-weight: 500; margin: 0; text-align: center;}
.formbody::before,
.formbody::after,
.formbody b.deco,
.formbody b.deco::before,
.formbody b.deco::after{ content: ""; display: inline-block; position: absolute; width: 85px; height: 73px; pointer-events: none; z-index: 5; background-size: contain; background-repeat: no-repeat;}
.formbody b.deco{width: 100%; height: 100%; top: 0; left: 0;}
.formbody::before{ background-image: url(../Images/from_icon_A1.png); top: -20px; left: -25px;}
.formbody::after{ background-image: url(../Images/from_icon_A2.png); top: -20px; right: -25px;}
.formbody b.deco::before{ background-image: url(../Images/from_icon_A3.png); bottom: -20px; right: -20px;}
.formbody b.deco::after{ background-image: url(../Images/from_icon_A4.png); bottom: -20px; left: -20px;}
.formbody.yellow::before{ background-image: url(../Images/from_icon_B1.png);}
.formbody.yellow::after{ background-image: url(../Images/from_icon_B2.png);}
.formbody.yellow b.deco::before{ background-image: url(../Images/from_icon_B3.png);}
.formbody.yellow b.deco::after{ background-image: url(../Images/from_icon_B4.png);}

.formbody .tablebox{ font-size: var(--fsM); width: 100%; margin-top: 3rem;}
.formbody .tablebox + .tablebox{ margin-top: 0;}
.formbody .tablebox input,
.formbody .tablebox select,
.formbody .tablebox textarea{ width: 100%; color: #9c9c9c; text-align: center; transition: .8s; }
.formbody .tablebox label{ color: #9c9c9c;}
.formbody .tablebox option{ text-align: center;}
.formbody .tablebox input:focus,
.formbody .tablebox select:focus,
.formbody .tablebox textarea:focus,
.formbody .tablebox label:focus{ color: #333;}
.formbody .tablebox li{ padding: 1.5rem;}
.formbody .tablebox li.head{ width: 180px; text-align: right; vertical-align: middle;}
.formbody .tablebox.d4 li:nth-of-type(4){ width: 30%;}
/* .formbody .tablebox.d4 li:nth-of-type(4) input{ width: auto;} */
.formbody .tablebox.d4 li.head{ width: 180px;}
.formbody + .agree{ margin-top: 5rem;}


/* result */
.result .container{ max-width: var(--maxW2);}
.result .info{ text-align: center;}
.result .info h4{ display: inline-block; text-align: left;}
.result h4.green{ margin-top: 3rem;}

.jointxt{ font-size: 0; text-align: center;}
.jointxt h4{ margin-bottom: 3rem;}
.jointxt .half{ font-size: var(--fsM); display: inline-block; vertical-align: middle; padding: 1rem; text-align: left;}
.jointxt span.red{ display: block; margin-top: 2rem;}

.noticetxt{ display: inline-block; width: auto; font-size: var(--fsM); color: var(--pri01); padding:3rem;}
.noticetxt::before,
.noticetxt::after{display: none;}
.noticetxt .tablebox{margin-top: 0;}
.noticetxt .tablebox li{ text-align: left; vertical-align: middle;}
.noticetxt .tablebox .head{ font-size: var(--fsL); font-weight: bold; }
.noticetxt .tablebox .head li{ padding-bottom: 0; padding-top: 0;}
.noticetxt img,
.noticetxt span{ display: inline-block; vertical-align: middle; margin-right: 10px;}