@charset "UTF-8";
@import url("/css/font-awesome-4.5.0/css/font-awesome.min.css");
.f-danger { color: #ff2a2a !important; }

.f-fun { color: #ffd409 !important; }

.f-primary { color: #92bbff !important; }

.f-success { color: #28a745 !important; }

.f-info { color: #17a2b8 !important; }

.f-beauty { color: #da92ff !important; }

.f-light { color: #fff !important; }

.f-wraning { color: #ff4e00 !important; }

.f-dark { color: #000 !important; }

.f-secondary { color: #868e96 !important; }

table { font-family: '新細明體', '細明體'; }
table tbody, table tfoot, table thead, table th, table td { vertical-align: middle; margin: 0 !important; }

.gotoheader { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; font-size: 1.2em; text-align: center; margin-bottom: 56px; }
.gotoheader a { display: inline-block; color: #425eff; }
.gotoheader a:hover { color: #3b13d0; }

body { overflow-x: hidden; background-color: #1cc8ff; }

.wrapper { width: 100%; height: 100%; color: light; background-image: url(../../images/indexBg.jpg?v=20260303); background-color: #1cc8ff; background-size: 120%; background-position: top center; background-repeat: no-repeat; }
@media only screen and (orientation: portrait) { .wrapper { background-size: 150%; } }
@media only screen and (orientation: landscape) { .wrapper { background-size: 108%; } }
@media (min-width: 1600px) and (orientation: landscape) { .wrapper { background-size: initial; } }

.header { width: 100%; margin: 0 auto; overflow: hidden; position: relative; }
@media only screen and (orientation: landscape) { .header { width: 90vw; } }
@media (min-width: 1600px) and (orientation: landscape) { .header { width: 100%; } }
.header .container { width: 100%; height: 0; padding-bottom: 41.25%; position: relative; }
@media only screen and (orientation: portrait) { .header .container { padding-bottom: 51.5625%; } }
@media only screen and (orientation: landscape) { .header .container { padding-bottom: 41.25%; } }
@media (min-width: 1600px) and (orientation: landscape) { .header .container { width: 1600px; height: 660px; padding-bottom: 0; } }
.header .slogan { width: 35.9375%; height: 0; padding-bottom: 30.8125%; position: absolute; top: 12.87879%; left: 30.625%; background: url(../../images/slogan.png?v=20260303); background-size: 100%; animation: delay 0.3s, zoomIn 0.3s 0.3s, pulse 1s 1.5s infinite; }
@media only screen and (orientation: portrait) { .header .slogan { width: 44.92188%; padding-bottom: 38.51563%; left: 25.78125%; } }
@media screen and (min-width: 1280px) { .header .slogan { width: 35.9375%; padding-bottom: 30.8125%; left: 30.625%; } }
@media screen and (min-width: 1600px) { .header .slogan { left: 490px; } }
.header .logo { width: 12.3125%; height: 0; padding-bottom: 3.9375%; position: absolute; top: 6.81818%; left: 30%; z-index: 9; background: url(../../images/logo.png?v=20260303); background-size: 100%; animation: fadeInDown .5s; }
@media only screen and (orientation: portrait) { .header .logo { width: 15.39063%; padding-bottom: 4.92188%; left: 25%; } }
.header .logo a { width: 100%; height: 0; padding-bottom: 31.9797%; display: block; }

@keyframes delay { from,
  to { opacity: 0; } }
.nav { width: 100%; position: relative; z-index: 1; }
.nav .container { width: 100%; position: relative; }
@media screen and (min-width: 1280px) { .nav .container { width: 1280px; } }
.nav .navBtn { width: 90%; max-width: 1197px; position: relative; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; }
@media only screen and (orientation: landscape) { .nav .navBtn { width: 80%; } }
@media screen and (min-width: 1280px) { .nav .navBtn { width: 1197px; } }
.nav .navBtn li { width: 33%; height: 0; padding-bottom: 12.8098%; display: block; list-style: none; text-indent: -9999px; float: left; }
@media screen and (min-width: 992px) { .nav .navBtn li { width: 20%; padding-bottom: 7.68588%; } }
@media screen and (min-width: 1280px) { .nav .navBtn li { width: 239.4px; height: 92px; padding-bottom: 0; } }
.nav .navBtn li.navBtn1 a { background-position-x: 0% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn1 a { background-position-x: 0px !important; } }
.nav .navBtn li.navBtn2 a { background-position-x: -100% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn2 a { background-position-x: -227.4px !important; } }
.nav .navBtn li.navBtn3 a { background-position-x: -200% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn3 a { background-position-x: -454.8px !important; } }
.nav .navBtn li.navBtn4 a { background-position-x: -300% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn4 a { background-position-x: -682.2px !important; } }
.nav .navBtn li.navBtn5 a { background-position-x: -400% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn5 a { background-position-x: -909.6px !important; } }
.nav .navBtn li a:hover, .nav .navBtn li.action a { background-image: url(../../images/navbtn_action.png?v=20260303); }
.nav .navBtn li a { width: 94.98747%; height: 0; margin: 0 auto; padding-bottom: 33.41688%; display: block; background-image: url(../../images/navbtn.png?v=20260303); background-size: 500% 100%; }
@media screen and (min-width: 1280px) { .nav .navBtn li a { width: 227.4px; height: 80px; } }

.content { width: 100%; }
.content .container { width: calc(100% - 16px); max-width: 1200px; margin: 0 auto; margin-bottom: 1em; padding: 2em 0.5em 0 0.5em; border: 0px solid transparent; border-radius: 40px; position: relative; background: rgba(255, 255, 255, 0.7); }
@media screen and (min-width: 576px) { .content .container { padding: 2em 1.5em 0 1.5em; } }
@media screen and (min-width: 992px) { .content .container { padding: 2em 3.5em 0 3.5em; } }
@media only screen and (orientation: landscape) { .content .container { width: calc(80% - 16px); } }
.content .containerBg { width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; display: flex; flex-direction: column; z-index: 0; }
.content .containerBg--top { width: 100%; max-width: 1073px; height: calc( 120 / 1280 * 100vw ); max-height: 120 + px; background-image: url("../../images/border-top.png?v=20260303"); background-position: top center; background-size: 100% 100%; background-repeat: no-repeat; }
@media screen and (min-width: 768px) { .content .containerBg--top { height: clamp(60 * 1px, calc(120 / 1280 * 100vw), 120 * 1px); } }
.content .containerBg--middle { width: 100%; max-width: 1073px; height: 100%; background-image: url("../../images/border-bg.png?v=20260303"); background-position: top center; background-size: 100% auto; background-repeat: no-repeat repeat; margin: -1px 0; }
.content .containerBg--bottom { width: 100%; max-width: 1073px; height: calc( 120 / 1280 * 100vw ); max-height: 120 + px; background-image: url("../../images/border-footer.png?v=20260303"); background-position: bottom center; background-size: 100% 100%; background-repeat: no-repeat; }
@media screen and (min-width: 768px) { .content .containerBg--bottom { height: clamp(60 * 1px, calc( 120 / 1280 * 100vw ), 120 * 1px); } }
.content .container * { position: relative; }
.content .container h3 { font-size: 1.5em; font-weight: bold; margin: 0 auto; margin-bottom: 16px; width: 50%; }
.content .container h3 img { display: block; max-width: 471px; width: 100%; margin: 0 auto; }
.content .container h4 { position: relative; color: #ff4e00; border-radius: 5px; font-weight: bold; font-size: 1.1rem; margin: 0 0 16px 0; display: inline-flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.content .container h4:before { content: ''; width: 1.2em; height: 1.2em; display: inline-block; margin: 0 5px 0 0; background-image: url("../../images/icon.svg?v=20260303"); background-size: 100%; }
.content .container h5 { font-size: 1rem; padding: 0.8em; text-align: center; margin-bottom: 16px; background-image: #9254DB; background-image: linear-gradient(to left, rgba(146, 84, 219, 0) 0%, #ba93e8 20%, #9254DB 40%, #9254DB 60%, #ba93e8 80%, rgba(146, 84, 219, 0) 100%); color: #fff; }
.content .container h6 { font-size: 1.125em; line-height: 1.5em; padding: 15px; text-align: center; color: #7cacff; margin-bottom: 16px; }
.content .container h6 span { padding: 5px 15px; background: #7cacff; border-radius: 8px; color: #fff; margin-right: 6px; font-weight: bold; }
.content .container p a, .content .container ol a, .content .container ul a { color: #224cf8; text-decoration: underline; }
.content .container p a:hover, .content .container ol a:hover, .content .container ul a:hover { color: #3b13d0; }
.content .container p { color: #00259c; }
.content .container ol, .content .container ul { color: #00259c; font-weight: normal; }
.content .item__box { border-radius: 0; margin: 0 auto; border: inherit; box-shadow: 0 0 5px #aa4fdf; border: 1px solid #aa4fdf; background-color: #4e007c; }
.content .item__box-title { background: linear-gradient(to right, #9427d4 0%, #aa4fdf 20%, #aa4fdf 80%, #9427d4 100%); padding: 8px; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; color: #fff; }
.content .item__box-title img { display: block; margin: 0 auto; }
.content .item__box-title p { width: 100%; line-height: 1.25em; }
.content .item__box-img { border-radius: 0; }
.content .item__box-img p { width: 100%; }
.content .item__box-get { text-align: center; font-weight: bold; font-size: 0.85rem; color: #fff; }
.content .item__box--2 { background-color: #ffffff; border: 0; border-radius: 0; height: 100%; background: linear-gradient(to top, #1d8ff3 0%, #4da7f6 100%); box-shadow: 0 0 5px #44a8ff; }
.content .item__box--2 .item__box-title { background: linear-gradient(to right, #1190ff 0%, #44a8ff 20%, #44a8ff 80%, #1190ff 100%); color: #fff; }
.content .item__box--2 .item__box-get { color: rgba(209, 231, 250, 0.75); }
.content .item__box--2 .item__box-img { background: inherit; }
.content .item__box--3 { background-color: #ffffff; border: 0; border-radius: 0; height: 100%; background: linear-gradient(to top, #3833c8 0%, #5e59d5 100%); box-shadow: 0 0 5px #544fdf; }
.content .item__box--3 .item__box-title { background: linear-gradient(to right, #2d27d4 0%, #544fdf 20%, #544fdf 80%, #2d27d4 100%); color: #fff; }
.content .item__box--3 .item__box-img { background: inherit; }
.content .item__box--3 .item__box-get { color: rgba(211, 209, 250, 0.75); }
.content .table tr th, .content .table tr td { border: 1px solid #002364; }
.content .table { border-collapse: initial; border-radius: 5px; color: #202c0d; border: 3px solid #002364; font-size: 0.85rem; text-align: center; }
.content .table tr { background: #fff; }
.content .table tr th { position: relative; background: linear-gradient(to top, #003386 0%, #0043AF 100%); color: #fff; padding: 5px 3px; }
@media screen and (min-width: 768px) { .content .table tr th { padding: 8px; } }
.content .table tr th:nth-child(1) { width: 10%; }
.content .table tr th:nth-child(2) { width: 30%; }
.content .table tr th:nth-child(3) { width: 30%; }
.content .table tr th:nth-child(4) { width: 30%; }
.content .table tr th.thStyle02 { color: #752b00; background: #ffec80; }
.content .table tr td { word-wrap: break-word; word-break: keep-all; padding: 5px 3px; /*單格變色*/ }
@media screen and (min-width: 768px) { .content .table tr td { padding: 8px; } }
.content .table tr td:nth-child(3), .content .table tr td:nth-child(4) { word-break: break-all; }
@media screen and (min-width: 576px) { .content .table tr td:nth-child(3), .content .table tr td:nth-child(4) { word-break: keep-all; } }
.content .table tr td:nth-child(3) { width: 24%; }
.content .table tr td:nth-child(4) { width: 45%; }
.content .table tr td p { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; color: #202c0d !important; }
.content .table tr td img { display: block; margin: 0 auto; max-width: 100%; max-height: 100px; }
.content .table tr td img.img-inline { width: 4em; display: inline; margin: 0; }
.content .table tr td img.badge { width: 35px; height: 35px; border-radius: 20px; object-fit: cover; object-position: 0% 50%; overflow: hidden; }
.content .table tr td[data-tdstyle='style01'] { background-color: #f6f6f6; }
.content .content__btn { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 6%; }
.content .content__btn div { width: 182px; margin: 2% 1%; margin-bottom: 15px; position: relative; color: #fff; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
.content .content__btn div a:hover, .content .content__btn div.action a { width: 182px; border-radius: 30px; border: 0; background: linear-gradient(to top, #e8bb00 0%, #ffe782 100%); color: #665200; }
.content .content__btn div a { width: 100%; display: block; background: #dfdfdf; /* Old browsers */ background: linear-gradient(to bottom, #dfdfdf 20%, #b8b8b8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: #303030; padding: 6px 1.25em; border-radius: 30px; border: 0; text-align: center; font-weight: bold; }
@media screen and (min-width: 1280px) { .content .content__btn div a { padding: 12px 8px; } }
.content .content__btn div .label { width: auto; position: absolute !important; top: 0; left: -1em; }
.content .content__btn div .label:before { content: '\f0a3'; font-family: FontAwesome; color: #ffe049; text-shadow: 1px 1px 2px #4f2a00; font-size: 3.5em; display: block; position: absolute !important; }
.content .content__btn div .label:after { content: attr(data-content); font-weight: bold; color: #4a0000; font-size: 0.7em; transform: rotate(-30deg); white-space: pre; line-height: 1.125em; }
.content .btnBox { margin-bottom: 16px; }
.content .btnBox a { margin: 1%; width: auto; border: 1px solid #dfa6ff; padding: 0.6em 2em; font-size: 1.15em; cursor: pointer; white-space: nowrap; background-image: #cc73ff; background-image: linear-gradient(to bottom, #b636ff 0%, #b636ff 20%, #cc73ff 40%, #cc73ff 60%, #b636ff 80%, #b636ff 100%); box-shadow: 0px 3px 3px #8a00d9; color: #fff; }
.content .btnBox a:hover { border: 1px solid #ffbfa6; background-image: #ff9b73; background-image: linear-gradient(to bottom, #ff6f36 0%, #ff6f36 20%, #ff9b73 40%, #ff9b73 60%, #ff6f36 80%, #ff6f36 100%); box-shadow: 0px 2px 2px #d93e00, inset 0 1px 1px 1px #ffb89c, inset 0 -8px 8px 0px #ffd5c5; top: 2px; color: #fff; }
.content .explanation { display: flex; justify-content: center; align-items: center; }
.content .explanation .note-main { color: #210032; border: 5px solid #fff; border-radius: 16px; box-shadow: 0px 0px 8px 2px #dfbb4f; background: linear-gradient(to top, #e5c86f 0%, #d9ae2f 100%); margin: 0 auto; padding: 10px 20px; text-align: left; color: #564510; }
.content .explanation .symbol { display: flex; justify-content: center; align-items: center; }
.content .explanation .symbol i { transform: rotate(90deg); color: #004d66; }
@media screen and (min-width: 992px) { .content .explanation .symbol i { transform: rotate(0); } }
.content .card { padding: 30px; margin: 8px 0; }
.content .card-notice { color: #988a5e; line-height: 1.5em; border-radius: 15px; background: linear-gradient(to top, #f3d16b 0%, #fbe49f 100%); }
.content .card-notice2 { border-radius: 10px; background: #fee0c3; outline: 2px dashed #ffffff; outline-offset: -12px; background: linear-gradient(20deg, #002d76 0%, #5575f7 100%); }
.content .card-notice2 h4 { color: #f0c2ff; justify-content: center; margin-top: 0; }
.content .card-notice2 h4::before { content: inherit; }
.content .card-notice2 .f-danger { color: #ffc900; font-weight: bold; }
.content .card-notice2 .subtitle { color: #ffd000; font-weight: bold; }
.content .card-notice2 p { color: #fff; text-align: left; line-height: 1.5em; }
.content .card-notice2 .img-block { display: block; max-width: 100%; margin: 0 auto 16px; }
.content .card-notice2 .inBtop img { display: block; max-width: 100%; margin: 0 auto 16px; }
.content .card-notice2 .inBtext { text-align: center !important; display: block; margin: 0 auto 16px; width: 80%; color: #FFE500; }
.content .card-notice2 .inBtext img { display: inline-block; width: 85px; vertical-align: middle; margin-left: 8px; }
.content .DESClabel { position: relative; }
.content .DESClabel .label { width: 110px; position: absolute !important; top: -3em; left: 50%; transform: translateX(20px); padding: 5px; background-color: #af2ec6; color: #fff; border-radius: 10px; font-size: 0.85rem; line-height: 1.125em; text-indent: 0; z-index: 1; }
.content .DESClabel .label::before { content: ''; position: absolute !important; height: 0; width: 0; border-top: 15px solid #af2ec6; border-right: 15px solid transparent; right: 60%; bottom: -15px; transform: skewX(-15deg); }
.content .ribbon { width: 30px; top: -10px; right: -1em; font-size: 1rem; background: linear-gradient(-30deg, #eeaf3a 0%, #eeaf3a 10%, #ffe9bf 80%, #fdd486 100%); position: absolute !important; text-align: center; padding: 0; display: flex; justify-content: center; align-items: center; line-height: 1.125em; padding: 10px; letter-spacing: 2px; z-index: 10; color: #4b2800; text-orientation: upright; -webkit-text-orientation: upright; font-weight: normal; font-weight: bold; }
@media screen and (min-width: 992px) { .content .ribbon { width: 35px; top: -6px; right: -1em; font-size: 1.15rem; } }
.content .ribbon p { color: #4b2800; text-orientation: upright; -webkit-text-orientation: upright; font-weight: normal; font-weight: bold; }
.content .ribbon:before, .content .ribbon:after { content: ''; position: absolute !important; }
.content .ribbon:before { height: 0; width: 0; border-bottom: 6px solid #8d6a28; border-right: 0 solid transparent; border-left: 6px solid transparent; right: initial; left: -6px; top: 0; }
@media screen and (min-width: 768px) { .content .ribbon:before { border-bottom: 6px solid #8d6a28; border-left: 6px solid transparent; } }
.content .ribbon:after { height: 0; width: 0; border-left: 15px solid #eeaf3a; border-right: 15px solid #eeaf3a; border-bottom: 15px solid transparent; bottom: -15px; left: 0; }
@media screen and (min-width: 992px) { .content .ribbon:after { border-left: 17.5px solid #eeaf3a; border-right: 17.5px solid #eeaf3a; } }
.content .comment { width: auto; position: absolute !important; top: -1.5em; left: calc(50% + 30px); align-items: center; display: flex; justify-content: center; flex-wrap: wrap; z-index: 1; }
@media screen and (min-width: 992px) { .content .comment { left: calc(50% + 30px); } }
.content .comment:before { content: '\f075'; font-family: 'FontAwesome'; font-size: 3.5em; position: absolute !important; display: inline-block; color: #ff0000; }
.content .comment:after { content: attr(data-comment); white-space: pre; position: relative; margin-top: -3%; display: inline-block; text-align: center; color: white; font-weight: bold; font-size: 1.125em; letter-spacing: 0; }
.content .comment-purple:before { color: #1920a7; }
.content .comment01 { top: -0.5em; left: inherit; left: calc(50% + 150px); }
.content .comment01::before { font-size: 7.5em; }
.content .box-compose .box-composeTitle { width: 100%; padding: 0; margin-right: 0; margin-left: 0; }
.content .box-compose .box-composeTitle p { background-color: #3b5aa1; color: #fff; border-radius: 5px; padding: 10px; font-weight: bold; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.content .box-compose .box-composeMain { width: 100%; border-radius: 10px; margin-bottom: 16px; margin-left: 0; margin-right: 0; padding: 10px 0; font-size: medium; }
.content .box-compose .box-composeMain-block { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; border-radius: 10px; padding: 5px; color: #766aa4; height: 100%; margin-right: 0; margin-left: 0; }
.content .box-compose .box-composeMain-block .itemlist { margin: 5px; }
.content .box-compose .box-composeMain img { display: block; margin: 0 auto; max-width: 100%; }
.content .box-compose .box-composeMain:nth-child(odd) { background-color: #ffb3b6; }
.content .box-compose .box-composeMain:nth-child(odd) .box-composeMain-block { background: #9f1044; color: #100632; }
.content .box-compose .box-composeMain:nth-child(odd) .box-composeMain-block.symbol { background: transparent; color: #100632; font-size: 1.5em; }
.content .box-compose .box-composeMain:nth-child(even) { background-color: #badeff; white-space: 10px; }
.content .box-compose .box-composeMain:nth-child(even) .box-composeMain-block { background: #3b5aa1; color: #100632; }
.content .box-compose .box-composeMain:nth-child(even) .box-composeMain-block.symbol { background: transparent; color: #100632; font-size: 1.5em; }
.content .box-compose .symbol { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; color: rgba(0, 0, 0, 0.35); }
.content .box-compose .symbol i { font-size: 1.2rem; }
@media screen and (min-width: 768px) { .content .box-compose .symbol i { font-size: 1.5rem; } }
.content .box-compose .icon-equal { filter: opacity(0.5); transform: rotate(90deg); }
@media screen and (min-width: 768px) { .content .box-compose .icon-equal { transform: rotate(0deg); } }
.content .box-compose .number { font-size: 1.5rem; font-weight: bold; }
@media screen and (min-width: 768px) { .content .box-compose .number { font-size: 1.8rem; } }
.content ul.tabBtn { text-align: center; margin-left: 0 !important; display: flex; justify-content: center; flex-wrap: wrap; list-style-type: none; margin-bottom: 0; }
.content ul.tabBtn li a { display: block; position: relative; padding: 8px 16px; margin: 0 8px; font-weight: bold; border-radius: 50px; border: 1px solid #a166ff; box-shadow: 0px 3px 3px #00e1ff; text-decoration: none; background-image: #4e00cc; background-image: linear-gradient(to bottom, #8133ff 0%, #8133ff 20%, #4e00cc 40%, #4e00cc 60%, #8133ff 80%, #8133ff 100%); box-shadow: 0px 3px 3px #1d004d; color: #fff; }
.content ul.tabBtn li:hover a, .content ul.tabBtn li.active a { cursor: pointer; color: #532f00; background-color: black; border: 1px solid #ff9d9d; background-image: #ff6060; background-image: linear-gradient(to bottom, #ff0e0e 0%, #ff0e0e 20%, #ff6060 40%, #ff6060 60%, #ff0e0e 80%, #ff0e0e 100%); box-shadow: 0px 2px #ea0000, inset 0 2px 2px 2px #ff3737, inset 0 -10px 10px 0px #ff7474; color: #fff; }
.content .tabMain { display: none; padding: 20px 0; }
.content .tabMain.active { display: block; }

/*================= box-單雙欄分色(box-compose) ================= */
.box-compose .box-composeTitle { width: 100%; padding: 0; margin-right: 0; margin-left: 0; }
.box-compose .box-composeTitle p { background-color: #3b5aa1; color: #000; border-radius: 5px; padding: 10px; font-weight: bold; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
.box-compose .box-composeMain { width: 100%; border-radius: 10px; margin: 5px auto; padding: 10px 0; }
.box-compose .box-composeMain-block { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; border-radius: 10px; padding: 5px; color: #2a86c3; height: 100%; margin-right: 0; margin-left: 0; }
.box-compose .box-composeMain-block .itemlist { margin: 5px; }
.box-compose .box-composeMain img { display: block; margin: 0 auto; max-width: 100%; }
.box-compose .box-composeMain:nth-child(even) { background-color: #c5edff; }
.box-compose .box-composeMain:nth-child(even) .box-composeMain-block { background: #84d7ff; color: #100632; }
.box-compose .box-composeMain:nth-child(even) .box-composeMain-block.symbol { background: transparent; color: #100632; font-size: 1.5em; }
.box-compose .box-composeMain:nth-child(odd) { background-color: #b489f8; white-space: 10px; }
.box-compose .box-composeMain:nth-child(odd) .box-composeMain-block { background: #d4bdf8; color: #100632; }
.box-compose .box-composeMain:nth-child(odd) .box-composeMain-block.symbol { background: transparent; color: #100632; font-size: 1.5em; }
.box-compose .symbol { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; color: rgba(0, 0, 0, 0.35); }
.box-compose .symbol i { font-size: 1.5rem; }
.box-compose .icon-equal { filter: opacity(0.5); width: 24px; height: 24px; }
.box-compose .number { font-size: 1.8rem; font-weight: bold; }

.login-form { display: flex; align-items: normal; justify-content: center; flex-direction: column; }
.login-form:nth-child(1) { margin-bottom: 10px; }
.login-form label { font-size: 1.2em; font-weight: bold; color: #ffa6fe; white-space: nowrap; margin-bottom: 5px; }
.login-form input[type='text'], .login-form input[type='tel'] { flex: 1; max-width: 100%; min-width: 200px; padding: 12px 15px; font-size: 1.1em; border: 4px solid #d595ff; border-radius: 8px; background-color: rgba(255, 255, 255, 0.95); color: #333; transition: all 0.3s ease; }
.login-form input[type='text']::placeholder, .login-form input[type='tel']::placeholder { color: #999; }
.login-form input[type='text']:focus, .login-form input[type='tel']:focus { outline: none; border-color: #ff64d3; background-color: #fff; box-shadow: 0 0 10px rgba(255, 20, 224, 0.3); }

img.btn-reserve { width: 72%; max-width: 330px; margin: 20px auto 0; display: block; cursor: pointer; transition: transform 0.2s ease; }
img.btn-reserve:hover { transform: scale(1.05); }

img.btn-over { width: 72%; max-width: 330px; margin: 20px auto 0; display: block; }

.content-date { display: inline-block; }
.content-date .SOLARicon { position: absolute; right: -20%; top: 50%; transform: translateY(-50%); width: 6rem; }
@media screen and (max-width: 620px) { .content-date .SOLARicon { top: 100%; transform: none; bottom: 0; left: 0; width: 4.5rem; } }

.part ol, .part ul { margin-left: 20px; }

/*# sourceMappingURL=style.css.map */