@charset "utf-8";
/* CSS Document */

/* 共通部分 START */
*{margin: 0;padding: 0;box-sizing: border-box;}
body, html {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    margin: 0 auto;
    min-width: 320px;
}

a{text-decoration: none;color: inherit;}

picture img {
    max-width: 100%; /* 图片宽度自适应 */
    height: auto;
	margin: 0 auto;
    display: block;
}

#feature-description {
    display: none;
}

.marker-yellow {
	background: linear-gradient(transparent 60%, #f9ea9b 0%);
}
.marker-gray {
	background: linear-gradient(transparent 60%, #e8e8e8 0%);
}
.small{
	font-size: 70%;
}

/* 定义滑入动画 */
@keyframes slideUp {
	from {
	  transform: translateY(20px);
	  opacity: 0.8;
	}
	to {
	  transform: translateY(0);
	  opacity: 1;
	}
  }
@keyframes move{
    100%{
        transform: translateX(-100%)
    }
}

main, .wrap, .container, section{
	margin: 0 auto;
}

main{
    /* position: relative; */
    width: 100%;
    /* height: 100%; */
    display: flex;
    justify-content: center;
    background-color: #ebe8d9;
}
.wrap {
    width: 1280px;
    height: 100%;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    /* background-color: rgba(255, 0, 0, 0.5); */
}
.container {
    width: 375px;
    /* height: calc((968 / 1080) * 100%); */
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    /* overflow-y: scroll; */
    /* box-sizing: border-box; */
    border-radius: 32px;
    background-color: #fffbe9;
    box-shadow: -30px 0px 60px rgba(0, 0, 0, 0.1);
}
/* 隐藏滚动条，仅限Webkit浏览器 */
.container::-webkit-scrollbar {
    width: 0;
    height: 0;
}
/* 隐藏滚动条，仅限Firefox */
.container {
    scrollbar-width: none;
}
section{
    padding: 52px 0;
    text-align: center;
}

/* floating-banner */
.float_btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
    z-index: 999;
    display: none;  /* 默认隐藏 */
    background-color: rgba(0, 0, 0, 0.6);
}
.shiny_btn {
    width: 100%;
    display: inline-block;
    text-decoration: none;
    border-radius: 500px;
}
.shiny_btn img {
    width: 100%;
    height: auto;
}


/* fv */
.fv, .fv-bottom{
    padding: 0;
}
.fv {
    width: 100%;
	height: 649px;
	position: relative;
	overflow: hidden;
    background-color: #f6e9c0;
}

.fv-catch{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}


.fv-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 1;
}
.fv-btn-group {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    align-self: center;
    justify-content: center;
    flex-direction: column;
	transition: transform 0.3s ease;
    animation: slideUp 0.5s ease-out forwards;
	opacity: 0.8; /* 初始状态轻微透明 */
}
.fv-sample-page a, .fv-btn a {
    display: block;
    width: 100%;
}
.fv-sample-page {
    margin: 0 auto 6px;
}
.fv-btn {
    width: calc((710 / 750) * 100%);
    margin: 0 auto 2px;
}



.carousel-container {
    position: relative;
    width: 100%;
    height: 349px;
    overflow: hidden;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    transition: opacity 0.3s ease;
    opacity: 0;
  }

  .carousel-slide.active {
    opacity: 1;
    z-index: 1;
  }

  /* 波纹容器添加模糊效果 */
  .ripple-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    backdrop-filter: blur(1px);
  }

  /* 水波纹元素 - 降低最高不透明度，避免白色闪烁 */
  .ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.1) 100%);
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    filter: blur(3px);
    box-shadow: 0 0 15px 5px rgba(255,255,255,0.25);
  }

  /* 多层波纹效果 */
  .ripple::before,
  .ripple::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0.6;
    transform: scale(0.8);
    animation: ripplePulse 1s cubic-bezier(0.1, 0.5, 0.1, 1) forwards;
  }

  .ripple::after {
    transform: scale(0.5);
    animation-delay: 0.15s;
  }

  /* 主波纹动画 - 降低不透明度，避免白色闪烁 */
  @keyframes rippleEffect {
    0% {
      width: 0;
      height: 0;
      opacity: 0;
    }
    5% {
      width: 50px;
      height: 50px;
      opacity: 0.45;
    }
    25% {
      width: 400px;
      height: 400px;
      opacity: 0.4;
    }
    50% {
      width: 1000px;
      height: 1000px;
      opacity: 0.35;
    }
    75% {
      width: 1800px;
      height: 1800px;
      opacity: 0.25;
    }
    100% {
      width: 2500px;
      height: 2500px;
      opacity: 0;
    }
  }

  /* 波纹脉冲动画 - 降低不透明度 */
  @keyframes ripplePulse {
    0% {
      transform: scale(0.5);
      opacity: 0.45;
    }
    30% {
      transform: scale(0.9);
      opacity: 0.4;
    }
    60% {
      transform: scale(1.4);
      opacity: 0.3;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }



/* cta */
.cta{
	padding: 48px 0;
	display: flex;
    align-self: center;
    justify-content: center;
    flex-direction: column;
	background-color: #fff;
}
.cta picture img {
    max-width: 100%; /* 图片宽度自适应 */
    height: auto;
	margin: 0 auto;
    display: block;
}
.cta-sample-page a, .cta-btn a {
    display: block;
    width: 100%;
}
.cta-title {
    width: calc((622 / 750) * 100%);
    margin: 0 auto 40px;
} 
.cta-sample-page {
    margin: 0 auto 40px;
}
.cta-btn {
    width: calc((710 / 750) * 100%);
	margin: 0 auto;
}


/* 伪元素，用于创建光束效果 */
.light-beam{
    cursor: pointer; /* 鼠标悬停样式为手型 */
	position: relative;
	overflow: hidden; /* 溢出内容隐藏，用于裁剪伪元素 */
}
.light-beam::before{
	content: ""; /* 伪元素内容为空 */
	position: absolute; /* 绝对定位，相对于包含块定位 */
	top: 50%; /* 伪元素垂直居中 */
	left: -100%; /* 初始位置在按钮左侧，使光束起始点在左侧 */
	z-index: 2;
	display: block;
	transform: translate(-50%, -50%) rotate(45deg); /* 位移和旋转，创建斜角效果 */
	width: 50%; /* 光束宽度 */
	height: 600%; /* 光束高度 */
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%); /* 线性渐变，创建光束效果  */
	opacity: 0; /* 初始不可见 */
	animation: lightBeam 2s ease-out infinite; /* 光束动画，1.5秒，渐出，无限循环 */
}
/* 光束动画关键帧 */
@keyframes lightBeam{
    0% {opacity: 0;left: -50%;}
    50% {opacity: 1;left: 100%;}
    100% {opacity: 0;left: 100%;}
}


.title, .article{
	font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.sub-title, .catch{
	font-family: orpheuspro, serif;
    font-weight: 400;
    font-style: normal;
}
.text, label, .submit-btn{
	font-family: hiragino-gothic-pron, sans-serif;
    font-weight: 400;
    font-style: normal;
}
.title-group, .pickup-group .sub-title{
	color: #632314;
}
.title-group, .sns-group{
    padding: 0 20px;
}
.title,.sub-title-tag, .catch-tag{
	letter-spacing: 4px;
}
.title, .article , .text{
    line-height: 1.6;
}
.text{
	letter-spacing: 2px;
    text-align: left !important;
}

.title{
	font-size: 32px;
    margin-bottom: 48px;
}
.sub-title{
	font-size: 18px;
	margin-bottom: 24px;
}
.catch, .article{
	font-size: 16px;
	margin-bottom: 32px;
}
.text, label, .submit-btn{
	font-size: 14px;
}


/* pickup */
.pickup{
    padding: 72px 0 0;
    background-color: #fffbe9;
}
.pickup-group{
    padding: 52px 0;
}
/* .pickup-group-02{
    background-color: #fff;
} */
.pickup .title{
    margin-bottom: 0;
}
.pickup-text{
    padding: 32px 20px 0;
}
.pickup-text-02{
    margin-bottom: 40px;
}

.pickup-catch{
    line-height: 1.6;
}

/* refund */
.refund{
    background-image: url("../images/refund-back.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.refund .sub-title{
    margin: 20px 0 0;
}

/* review */
.review{
    background-color: #fffbe9;
}
.review-title{
    margin: 24px auto;
}
.review-group{
    margin-bottom: 40px;
    padding: 0 20px;
}
.review-group:last-child{
    margin-bottom: 0;
}
.review-text{
    margin-top: -20px;
    margin-left: auto;
    padding: 40px 20px 20px;
    width: calc(((670 - 40) / 670) * 100%);
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: -30px 0px 60px rgba(0, 0, 0, 0.1);
}
.review-bottom{
    padding: 0;
}

/* concept */
.concept{
    padding-bottom: 0;
    background-color: #f9f0d3;
}
.concept .article:last-child{
    margin-bottom: 0;
}

/* sns */
.sns{
    /* padding-bottom: 0; */
	background-color: #f1f1f1;
}

.refund .sub-title,
.sns .sub-title:last-child,
.inquiry .sub-title:last-child{
    line-height: 1.6;
}
.sns-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 40px auto;
}
.sns-btn, .sns-btn img{
	border-radius: 16px;
}
.sns-btn {
    width: calc(196 / 768 * 100%);
    max-width: 196px;
	background-color: #fff;
	box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.1);
}
.sns-btn img{
	width: 100%;
	height: auto;
}


.sns .title, 
.inquiry .title{
    margin-bottom: 16px;
}

/* form */
.inquiry {
	background-image: url("../images/inquiry_back.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.inquiry .text-group {
	padding: 20px;
	margin-bottom: 24px;
	background-color: #fff;
	box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.1);
}
.inquiry .text{
    text-align: center !important;
}
.inquiry .text-01 {
	margin-bottom: 16px;
}
.inquiry .text-02 {
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 8px;
	background-color: #b5a497;
	color: #fff;
}

form{
    margin-top: 40px;
    padding: 0 20px;
}
.form_group {
    margin-bottom: 16px;
}
.submit_btnBox{
    width: 100%;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.submit-btn {
    cursor: pointer;
    width: 100%;
    /* width: 510px; */
    margin: 0 auto;
    padding: 24px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #fab644;
    transition: transform 0.5s ease;
    box-shadow: 0 4px 0 rgba(220, 142, 12, 1);
}
.submit-btn:hover {
    transform: translateY(8px);
    background-color: #dc8e0c;
    box-shadow: none;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--primary-color-1);
    text-align: left !important;
}
select, 
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
textarea {
    min-height: 100px;
    resize: vertical;
}





/* footer */
footer{
    padding: 80px 20px;
    background-color: #433326;
}
.footer-logo{
    width: calc(346 / 710 * 100%);
    margin: 0 auto 40px;
}
footer .text{
    text-align: center !important;
    color: #fff;
}




@media only screen and (max-width: 1280px) {
    .wrap {
        width: 100%;
    }
    .slider, .pc-container {
        display: none;
    }
    .menu-container {
        display: none;
    }
}
@media only screen and (min-width: 769px) {
    /* body {
        max-height: 1080px;
    } */
    .float_btn {
        display: none !important;
    }
}
@media only screen and (max-width: 768px) {
    .container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
        box-shadow: none;
    }
    .fv {
        height: auto;
        /* 保持宽高比例 */
        aspect-ratio: 750 / 1298; /* 原始宽高比 */
    }
    .cta {
        padding: calc(40px + (80 - 40) * ((100vw - 320px) / (768 - 320))) 0;
    }
    .cta-title, .cta-sample-page {
        margin: 0 auto calc(16px + (40 - 16) * ((100vw - 320px) / (768 - 320)));
    }
}


@media only screen and (min-width: 320px) and (max-width: 768px) {
	section {
		padding: calc(52px + 52 * ((100vw - 320px) / 448)) 0;
	}

    .slider {
        height: calc(85px + (200 - 85) * ((100vw - 320px) / (768 - 320)));
    }
    .float_btn {
        padding: calc(20px + 20 * ((100vw - 320px) / 448));
    }

    .fv-bottom{
        height: calc(30px + 30 * ((100vw - 320px) / 448));
    }
    .fv-sample-page {
        margin-bottom: calc(6px + 6 * ((100vw - 320px) / 448));
    }
    .fv-btn {
        margin-bottom: calc(2px + 2 * ((100vw - 320px) / 448));
    }

    .title-group, .sns-group{
        padding: 0 calc(20px + 20 * ((100vw - 320px) / 448)); 
    }
    .title{
        font-size: calc(32px + 32 * ((100vw - 320px) / 448));
        margin-bottom: calc(48px + 48 * ((100vw - 320px) / 448));
    }
    .sub-title{
        font-size: calc(18px + 12 * ((100vw - 320px) / 448));
        margin-bottom: calc(24px + 24 * ((100vw - 320px) / 448));
    }
    .catch, .article{
        font-size: calc(16px + 16 * ((100vw - 320px) / 448));
        margin-bottom: calc(32px + 32 * ((100vw - 320px) / 448));
    }
    .text, label, .submit-btn{
        font-size: calc(12px + 12 * ((100vw - 320px) / 448));
    }

    
    .pickup{
        padding: calc(72px + 72 * ((100vw - 320px) / 448)) 0 0;
    }
    .pickup-group{
        padding: calc(52px + 52 * ((100vw - 320px) / 448)) 0;
    }
    .pickup-text{
        padding: calc(32px + 32 * ((100vw - 320px) / 448))
                 calc(20px + 20 * ((100vw - 320px) / 448)) 
                 0;
    }
    .pickup-text-02{
        margin-bottom: calc(40px + 40 * ((100vw - 320px) / 448));
    }

    .refund .sub-title{
        margin: calc(20px + 20 * ((100vw - 320px) / 448)) 0 0;
    }

    .review-title{
        margin: calc(24px + 24 * ((100vw - 320px) / 448))
                auto;
    }
    .review-group{
        margin-bottom: calc(40px + 40 * ((100vw - 320px) / 448));
        padding: 0
                 calc(20px + 20 * ((100vw - 320px) / 448));
    }
    .review-group:last-child{
        margin-bottom: 0;
    }
    .review-text{
        margin-top: calc(-20px + -20 * ((100vw - 320px) / 448));
        padding: calc(40px + 40 * ((100vw - 320px) / 448))
                 calc(20px + 20 * ((100vw - 320px) / 448))
                 calc(20px + 20 * ((100vw - 320px) / 448));
    }

    .sns-group {
        margin: calc(40px + 40 * ((100vw - 320px) / 448)) auto;
    }
    .sns-btn, .sns-btn img{
        border-radius: calc(16px + 16 * ((100vw - 320px) / 448));
    }

    .sns .title, 
    .inquiry .title{
        margin-bottom: calc(16px + 16 * ((100vw - 320px) / 448));
    }

	.inquiry .text-group {
		padding: calc(16px + 24 * ((100vw - 320px) / 448));
		margin-bottom: calc(22px + 26 * ((100vw - 320px) / 448));
	}
	.inquiry .text-01 {
		margin-bottom: calc(14px + 18 * ((100vw - 320px) / 448));
	}

    form{
        margin-top: calc(40px + 40 * ((100vw - 320px) / 448));
        padding: 0 calc(20px + 20 * ((100vw - 320px) / 448));
    }
    .form_group {
        margin-bottom: calc(16px + 16 * ((100vw - 320px) / 448));
    }
    label {
        margin-bottom: calc(8px + 8 * ((100vw - 320px) / 448));
    }
    select, 
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea {
        padding: calc(8px + 8 * ((100vw - 320px) / 448));
    }
    .submit_btnBox{
        margin-top: calc(40px + 40 * ((100vw - 320px) / 448));
    }
    .submit-btn {
        padding: calc(24px + 24 * ((100vw - 320px) / 448));
    }

    footer{
        padding: calc(80px + 80 * ((100vw - 320px) / 448))
                 calc(20px + 20 * ((100vw - 320px) / 448));
    }
    .footer-logo{
        margin: 0 auto 
                calc(40px + 40 * ((100vw - 320px) / 448));
    }
}

@media only screen and (max-width: 320px) {
	.inquiry .text-group {
		padding: 20px;
		margin-bottom: 22px;
	}
	.inquiry .text-01 {
		margin-bottom: 14px;
	}
}





/* 表单样式更新 */
.label_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.required {
    display: inline-block;
    background-color: #e74c3c;
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
}

.survey_header {
    background-color: #693f24;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 4px;
    margin: 30px 0 20px;
}

.survey_header p {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.survey_question {
    margin-bottom: 30px;
}

.survey_question label {
    margin-bottom: 15px;
}

/* 对于问卷中的非必填项，保持原有标签结构 */
.survey_question > label {
    margin-bottom: 15px;
    line-height: 1.6; /* 确保问卷问题标签也使用相同行高 */
}

.survey_question .checkbox_item label {
    line-height: 1.6; /* 为复选框标签也设置行高 */
}

.checkbox_group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox_item {
    display: flex;
    align-items: flex-start;
}

.checkbox_item input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 4px;
}

.checkbox_item label {
    margin-bottom: 0;
    font-weight: normal;
}

.other_text textarea {
    width: 100%;
    margin-top: 5px;
    margin-left: 0; /* 移除左边距 */
    box-sizing: border-box; /* 确保宽度包含内边距和边框 */
}

.checkbox_item.other_text {
    margin-top: 10px;
    padding-left: 25px; /* 整体缩进，与复选框对齐 */
    width: 100%; /* 确保宽度一致 */
    box-sizing: border-box;
}

.submit-btn {
    background-color: #fab644;
    border-radius: 500px;
    color: white;
    font-size: 18px;
    padding: 15px 20px;
    text-align: center;
    width: 100%;
    position: relative;
}

.submit-btn::after {
    content: ">";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 768px) {
    .survey_header p {
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (768 - 320)));
    }
    
    .checkbox_item {
        margin-bottom: 5px;
    }
    
    .submit-btn {
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (768 - 320)));
        padding: calc(12px + (15 - 12) * ((100vw - 320px) / (768 - 320))) 20px;
    }
}


/* 返金条件按钮 */
.refund-btn-container {
    margin-top: 30px;
    text-align: center;
}

.refund-btn {
    width: 100%;
    background-color: #fff;
    border: none;
    border-radius: 500px;
    color: #311de0;
    letter-spacing: 2px;
    text-decoration: underline;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 16px;
    text-align: center;
    transition: background-color 0.3s;
    /* box-shadow: 0 4px 0 rgba(220, 142, 12, 1); */
}

/* .refund-btn:hover {
    background-color: #dc8e0c;
}
 */




/* 弹窗样式 */
.modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    animation: slideDown 0.3s;
}

@keyframes slideDown {
    from {transform: translateY(-50px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin: 0;
    color: #693f24;
    font-size: 20px;
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 600;
}

.close-modal {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover {
    color: #693f24;
}

.modal-body {
    margin-bottom: 20px;
    line-height: 1.6;
}

.modal-body p {
    color: #333;
    font-family: hiragino-gothic-pron, sans-serif;
    font-size: 14px;
}

.modal-footer {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.contact-btn {
    background-color: #fab644;
    border: none;
    border-radius: 500px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 30px;
    margin-top: 10px;
    text-align: center;
    transition: background-color 0.3s;
}

.contact-btn:hover {
    background-color: #dc8e0c;
}

/* 移动端适配 */
@media only screen and (max-width: 768px) {
    .modal-content {
        width: 90%;
        margin: 20% auto;
    }
    
    .modal-header h2 {
        font-size: 18px;
    }
    
    .modal-body p {
        font-size: 14px;
    }
    
    .contact-btn {
        font-size: 14px;
        padding: 10px 20px;
    }
}