* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

html {
    font-size: 18px;
    font-weight: 500;
    color: #3f3f3f;
}
h2,h3{
    letter-spacing: 1px;
}
h2{
    color: #5c241e;
    font-weight: 900;
    text-align: center;
}

p {
    line-height: 1.6;
}

span{
    color: #b42e22;
}

.wrap {
    width: 100%;
    margin: auto;
    height: auto;
    overflow: hidden;
}
.content {
    max-width: 1260px;
	margin: 0 auto;
}
.content2 {
    max-width: 1110px;
	margin: 0 auto;
}

/* header */
.header {
    width: 100%;
    margin: auto;
    position: fixed;
    transition: background-color 0.3s ease;
    background-color: transparent;
    z-index: 500;
}
.header.scrolled {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.8) 26%,rgba(255, 255, 255) 67%,rgb(255, 255, 255) 100%);
}

.header .item {
    max-width: 1261px;
    margin: auto;
}

.header .item img {
    vertical-align: middle;
    width: 169px;
    margin: 37px 0 30px;
}

/* water */
.water{
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 99;
}
.water img{
    width: 285px;
}

/* kv */
.kv {
    background: url(../img/kv.jpg) no-repeat bottom center;
    background-size: cover;
    width: 100%;
    height: 931px;
    position: relative;
    overflow: hidden;
}
.kv > div{
    position: absolute;
}

.kv_title{
    display: flex;
    flex-direction: column;
    top: 188px;
    left: calc(50% - 630px);
}
.kv_t1{
    background: url(../img/kv_t1.png) no-repeat center;
    background-size: contain;
    width: 638px;
    height: 53px;
}
.kv_t2{
    background: url(../img/kv_t2.png) no-repeat center;
    background-size: contain;
    width: 683px;
    height: 149px;
    margin-top: 18px;
}
.kv_t3{
    background: url(../img/kv_t3.png) no-repeat center;
    background-size: contain;
    width: 653px;
    height: 107px;
}
.kv_t4{
    background: url(../img/kv_t4.png) no-repeat center;
    background-size: contain;
    width: 671px;
    height: 28px;
    margin-top: 14px;
}
.kv_part2{
    margin: 18px 0 0 94px;
}

/* p1 */
.p1 {
    background: url(../img/p1_bg.svg) no-repeat top center, linear-gradient(to bottom, #ffffff 0%, #f1eeef 50%);
    background-size: cover;
    width: 100%;
    padding: 108px 0 92px;
    position: relative;
}
.p1 h2{
    font-size: 56px;
    transform: skewX(356deg);
}
.p1 h2 span{
    margin-right: 32px;
}
.p1 h3{
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, rgba(180,46,34,0) 0%,rgba(180,46,34,1) 20%,rgba(180,46,34,1) 50%,rgba(180,46,34,1) 80%,rgba(180,46,34,0) 100%);
    padding: 6px 0;
}
.p1_t1{
    width: 872px;
    margin: 15px auto 0;
}
.p1_t2{
    width: 1110px;
    margin: 32px auto 30px;
    font-style: italic;
    letter-spacing: 3px;
}
.p1 .part1{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.p1 .part1 img{
    margin: 25px;
}
.arr{
    background: url(../img/arr.png) no-repeat center;
    background-size: contain;
    width: 20px;
    height: 33px;
    filter: drop-shadow(1px 3px 4px rgba(216, 147, 10, 0.5));
    margin: 0 48px;
}
.p1 .part1_cont{
    display: flex;
    align-items: center;
}
.p1 .part1_cont p{
    font-size: 24px;
    font-weight: 700;
    color: #5d251f;
}
.p1 .part2{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 28px;
    width: 100%;
}
.old{
    background: url(../img/p1_pic2.png) no-repeat center;
    background-size: contain;
    width: 516px;
    height: 416px;
    margin: 0 14px;
}
.new{
    background: url(../img/p1_pic3.png) no-repeat center;
    background-size: contain;
    width: 630px;
    height: 474px;
    margin: 0 14px;
}
.info{
    font-size: 14px;
    text-align: center;
    margin-top: 15px;
}
.info span{
    font-size: 16px;
    font-weight: 700;
}

/* p2 */
.p2 {
    background: url(../img/p2_bg.png) no-repeat top center;
    background-size: cover;
    width: 100%;
    padding: 220px 0 113px;
    position: relative;
}
.p2_t{
    background: url(../img/p2_t.png) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 244px;
    position: absolute;
    top: -30px;
}
.p2_pic{
    background: url(../img/p2_pic.png) no-repeat center;
    background-size: contain;
    width: 1260px;
    height: 542px;
    margin: 0 auto;
}
.p2 .info{
    margin-top: 55px;
}

/* p3 */
.p3 {
    background: url(../img/p3_bg.png) no-repeat top center;
    background-size: cover;
    width: 100%;
    padding: 108px 0 150px;
    margin-top: -16px;
    position: relative;
}
.p3 h2,.p4 h2{
    font-size: 48px;
    transform: skewX(356deg);
    margin-bottom: 30px;
}
/* table */
.p3_table {
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
  filter: drop-shadow(4px 4px 5px rgba(209, 197, 166, 0.75));
}

/* 左側第一欄寬度 */
.p3_table .table_name {
  width: 24%;
}

/* ===== 表頭 ===== */
.p3_table thead th {
  background: #bd2f23;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 10px 0px;
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}

/* 第一列表頭 */
.p3_table thead tr:first-child th {
  padding: 8px 0;
}

/* ===== 右側白色區塊 ===== */
.p3_table tbody td {
  background: #fff;
  color: #000e1e;
  font-size: 21px;
  padding: 14px;

  border-right: 1px solid #ed958e;
  border-bottom: 1px solid #ed958e;
}
/* ===== 左側粉紅區塊 ===== */
.p3_table tbody td:first-child {
  background: #fcece8;
  color: #5d251f;
  font-weight: 700;
  padding: 14px 0 14px 30px;
  text-align: left;
  border-right: none;
}

/* 不要右框線 */
.p3_table thead th:last-child,.p3_table tbody td:last-child,.p3_table3 tr:last-child th,.p3_table3 tr td:last-child {
  border-right: 0;
}
/* 最後一列不要底線 */
.p3_table tbody tr:last-child th,.p3_table tbody tr:last-child td,.p3_table3 tr:last-child td,.p4_table tr:last-child td {
  border-bottom: 0;
}
/* 圓角 */
.p3_table thead tr:first-child th:first-child,.p3_table3 tr:first-child th:first-child{
    border-top-left-radius: 22px;
}
.p3_table thead tr:first-child th:last-child,.p3_table3 tr:first-child th:last-child{
    border-top-right-radius: 22px;
}
.p3_table tbody tr:last-child td:first-child,.p3_table3 tr:last-child td:first-child{
    border-bottom-left-radius: 22px;
}
.p3_table tbody tr:last-child td:last-child,.p3_table3 tr:last-child td:last-child{
    border-bottom-right-radius: 22px;
}
.p3 .info{
    margin: 25px 0 102px;
}
.p3 .info.info1,.p3 .info.info4{
    text-align: start;
}
.p3 .info.info4{
    margin: 25px 0 0px;
}

/* p3_part2 */
.p3_part2{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid transparent;
    padding: 14px 20px;
    border-radius: 30px;
    filter: drop-shadow(4px 4px 5px rgba(209, 197, 166, 0.75));

    background:
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) padding-box,
    linear-gradient(
      -60deg,
      #fff 0%,
      #dda98d 40%,
      #dda98d 50%,
      #dda98d 70%,
      #fff 100%
    ) border-box;
}
.p3_part2 h4{
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    width: 699px;
    border-radius: 60px;
    padding: 6px 0;
    color: #fff;
    background: linear-gradient(60deg, #b39686 0%,#a47b66 51%,#b39686 100%);
}
.p3_table2,.p3_table3,.p4_table {
  width: 100%;
  margin: 16px auto 0;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
  font-size: 21px;
}
.p3_table2 tr th,.p3_table3 tr th {
  background: #bd2f23;
  color: #fff;
  font-weight: 700;
  padding: 4px 0px;
}
.p3_table3 tr th {
  padding: 6px 0px;
}
.p3_table2 tr td {
  background: #fff;
  color: #5d251f;
  padding: 4px;
  border: 0.75px solid #fff;
}
.p3_table2 tr:nth-child(odd) td {
  background: #fcece8;
}
.p3_table3{
    filter: drop-shadow(4px 4px 5px rgba(209, 197, 166, 0.75));
}
.p3_table3 tr th {
  border-right: 1px solid #ffffff;
}
.p3_table3 tr td {
  background: #fff;
  color: #5d251f;
  padding: 6px 4px;
  border-right: 1px solid #ed958e;
  border-bottom: 1px solid #ed958e;
}
.p3_table3 tr td:first-child {
  background: #fcece8;
  border-right: 0;
}
.col_1{
    width: 20%;
}
.col_4{
    width: 15%;
}

/* p4 */
.p4 {
    background: url(../img/p4_bg.png) no-repeat top center;
    background-size: cover;
    width: 100%;
    padding: 100px 0;
    margin-top: -40px;
    position: relative;
}
.p4_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid transparent;
    padding: 20px 40px;
    border-radius: 30px;
    filter: drop-shadow(4px 4px 5px rgba(209, 197, 166, 0.75));

    background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)) padding-box,
    linear-gradient(
      -60deg,
      #fff 0%,
      #dda98d 40%,
      #dda98d 50%,
      #dda98d 70%,
      #fff 100%
    ) border-box;
}
.p4_table{
    font-size: 18px;
    font-weight: 700;
    text-align: start;
    margin: 0;
    background: transparent;
}
.p4_box .p4_td_width{
    width: 96%;
}
.p4_table tr th {
  background-color: #dd4332;
  color: #fff;
  font-size: 21px;
  text-align: start;
}
.p4_table tr th:first-child{
    border-right: 6px solid #fff;
    padding: 14px 60px;
    border-radius: 80px 0 0 80px;
}
.p4_table tr th:last-child {
  background: linear-gradient(to right,#dd4332 51%,#f3ae1d 100%);
  color: #fff;
  font-size: 28px;
  padding: 14px 40px;
  border-radius: 0 80px 80px 0;
  width: 75%;
}
.p4_table tr td {
  padding: 8px 40px;
  border-bottom: 1px solid #f29d99;
}
.p4_table tr td:last-child{
    width: 76%;
}
.p4 .info{
    font-size: 16px;
    font-weight: 700;
    margin-top: 25px;
    text-align: start;
}

/* footer */
.footer {
    background-color: #b42e22;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    font-weight: 600;
    color: #fff;
}
.footer_title{
    font-size: 21px;
    background-color: #7a1400;
    filter: drop-shadow(4px 4px 5px rgba(145, 41, 13, 0.75));
    width: 102px;
    padding: 8px 0;
    text-align: center;
    margin: 58px 0 21px;
}
.footer_info{
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 46px;
}

/* popup */
body.no-scroll {
    overflow: hidden;
    height: 100%;
}
@keyframes show{
    0%  {transform:scale(0.7);}
    45% {transform:scale(1.05);}
    80% {transform:scale(0.95);}
    100%{transform:scale(1);}
}
.popup {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
    backdrop-filter:blur(15px);
	z-index: 999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}
.popout {
	position: relative;
	background: #fff;
	color: #3f3f3f;
	width: 1200px;
    margin-top: auto;
    margin-bottom: auto;
	padding: 0 0 40px 0;
	border-radius: 20px;
    animation-name: show;
	animation-duration: 0.3s;
}

.popc {
	position: absolute;
	background: url(../img/pop_c.png) no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	top: 15px;
	right: 15px;
	cursor: pointer;
	transition: 0.3s;
	z-index: 9999;
}

.popc:hover,.pop_close:hover {
	filter: brightness(130%);
}

.popup p {
	font-size: 12px;
	font-weight: 400;
	position: relative;
	margin: 0 auto;
    padding: 36px 0 13px 0;
    width: calc(100% - 90px);
	color: #333333;
    border-bottom: 1px solid rgb(204, 204, 204);
}
.text{
    padding: 16px 45px 8px;
}
.text a{
    color: #063ea0;
}
.text ul{
    font-size: 16px;
    color: #000;
}
.text ul li:not(:last-child){
    margin-bottom: 20px;
    font-weight: 700;
}
.text ul li:last-child{
    font-size: 14px;
}
.pop_close{
    width: 120px;
    margin: 0 auto;
    padding: 8px 0 10px;
    vertical-align: middle;
    text-align: center;
    border-radius: 90px;
    background-color: #b42e22;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    transition: background-color 0.3s;
    cursor: pointer;
}