@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");



@font-face {

    font-family: "Futura-Std-Medium";

    src: url(../fonts/Futura\ Std\ Medium.otf);

}



.Futura-Std-Light {

    font-family: "Futura-Std-Light";

}



[data-aos="opacity-y"] {

    opacity: 0;

}



[data-aos="opacity-y"].aos-animate {

    animation: opacity-y 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;

    animation-delay: 0s;

}



@keyframes opacity-y {

    0% {

        opacity: 0;

        clip-path: inset(50% 0 50% 0);

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 1;

        clip-path: inset(0 0 0 0);

    }

}



body,

html {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    scroll-behavior: smooth;

    --vw-base: calc(100vw / 1920);

}



body>* {}



h1,

h2,

h3,

h4,

h5,

h6,

p {

    margin: 0;

    padding: 0;

}



a:link,

a:visited,

a:hover,

a:active {

    text-decoration: none;

}



button,

input,

textarea,

select,

option {

    margin: 0;

    padding: 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    border-radius: 0;

    -moz-appearance: none;

    appearance: none;

    outline: none;

}



ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



img,

video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.pic-txt {

    position: absolute;

    bottom: calc(20* var(--vw-base));

    right: calc(20* var(--vw-base));

    color: #fff;

    font-size: calc(15* var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

    line-height: calc(20* var(--vw-base));

}



/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

    background-color: #040000;

}



.main1 {

    position: relative;

    width: 100%;

    height: calc(950* var(--vw-base));

}



.main1-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.main1-logo {

    position: absolute;

    left: calc(720* var(--vw-base));

    top: calc(300* var(--vw-base));

    width: calc(442* var(--vw-base));

    height: calc(432* var(--vw-base));

}



.main1-logo .logo-pic {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;



}



.main1-logo .logo-pic img {

    object-fit: contain;

}





.main1-logo .logo-pic2 {

    /* 緩慢無限旋轉動畫 */

    animation: rotateLogo 25s linear infinite;

    transform-origin: center center;

}



.main1-logo .logo-pic3 img {

    object-fit: contain;

}



/* logo-pic2 緩慢旋轉動畫定義 */

@keyframes rotateLogo {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



.main1-text {

    position: absolute;

    top: calc(762*var(--vw-base));

    left: calc(732*var(--vw-base));

    width: calc(434*var(--vw-base));

    height: auto;

}





.main1-text img {

    object-fit: contain;

}



.main2 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: hidden;

}



.main2-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.main2-bg .pic {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.main2-bg .pic.shine {

    animation: shining 4s ease-in-out 1s infinite;

    animation-delay: 1s;

}



@keyframes shining {

    0% {

        opacity: 0.6;

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 0.6;

    }

}



.main2-contain {

    position: absolute;

    left: calc(175*var(--vw-base));

    top: calc(340*var(--vw-base));

    width: calc(570*var(--vw-base));

    height: calc(326*var(--vw-base));

    /* color: rgba(0, 0, 0, .5); */

}



.main2-contain .pic {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}





.form-info {

    position: absolute;

    left: calc(916*var(--vw-base));

    top: calc(250*var(--vw-base));

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-bottom: calc(65*var(--vw-base));

}



.form {

    width: 41.5vw;

    position: relative;

    height: auto;

    font-family: 'Noto Serif TC', serif;

    font-weight: 500;

    color: #040000;

}



.form1 {

    padding: 3vw 3vw 3vw 3vw;

    background-color: rgba(234, 228, 233, 0.7);

}



.form select {

    width: 100%;

    box-sizing: border-box;

    height: 2.5vw;

    line-height: 2.5vw;

    letter-spacing: 0.2vw;

    font-size: 1.2vw;

    color: #040000;

    padding-left: 2%;

    font-family: 'Noto Serif TC', serif;

    background-color: transparent;

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    -webkit-tap-highlight-color: transparent;

    background-image: url(../img/select.png);

    background-position-x: 97%;

    background-position-y: 54%;

    background-repeat: no-repeat;

    background-size: 0.8vw;

    outline: none;

    border: none;

    cursor: pointer;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    position: relative;

    padding: 0 0 0 7vw;

    display: block;

}



.select {

    width: 100%;

    position: relative;

    height: 2.5vw;

    line-height: 2.5vw;

    margin-bottom: 1.6vw;

    font-weight: 600;

}



.input {

    width: 100%;

    position: relative;

    height: 2.5vw;

    line-height: 2.5vw;

    margin-bottom: 1.6vw;

    font-weight: bold;

}



.input::before,

.select::before {

    content: "";

    width: 100%;

    height: 1px;

    position: absolute;

    left: 0;

    bottom: -2px;

    background-image: url(../img/input-border.png);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

}



.check-item-sex {

    position: absolute;

    right: 0vw;

    top: 0;

    height: 2.5vw;

    line-height: 2.5vw;

    letter-spacing: 0.2vw;

    font-size: 1.05vw;

    font-family: 'Noto Serif TC', serif;

    display: block;

    color: #040000;

    z-index: 1;

}



.check-item-room {

    position: absolute;

    left: 4.2vw;

    top: 0;

    height: 2.5vw;

    line-height: 2.5vw;

    letter-spacing: 0.2vw;

    font-size: 1.05vw;

    font-family: 'Noto Serif TC', serif;

    display: block;

    color: #040000;

    z-index: 1;

}





.check-item-sex label,

.check-item-room label {

    width: 6.5vw;

    height: 2.5vw;

    line-height: 2.5vw;

    cursor: pointer;

    display: block;

    float: left;

    text-align: right;

}



.check-item-sex label input[type="radio"],

.check-item-room label input[type="radio"] {

    width: 1.2vw;

    height: 1.2vw;

    margin: 0% 7% -2.8% 0;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background: url(../img/check.png) no-repeat top center;

    background-size: 1.2vw 1.2vw;

    border: none;

    cursor: pointer;

}



.check-item-sex label input:checked,

.check-item-room label input:checked {

    background: url("../img/checked.png") no-repeat top center;

    background-size: 1.2vw 1.2vw;

}



.input-title {

    position: absolute;

    left: 0;

    top: 0;

    height: 2.5vw;

    line-height: 2.5vw;

    letter-spacing: 0.2vw;

    font-size: 1.2vw;

    font-family: 'Noto Serif TC', serif;

    font-weight: 600;

    z-index: 1;

}



.form input[type="text"] {

    width: 100%;

    height: 2.5vw;

    line-height: 2.5vw;

    letter-spacing: 0.2vw;

    font-size: 1.2vw;

    border: none;

    background-color: transparent;

    color: #040000;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    outline: none;

    font-family: 'Noto Serif TC', serif;

    padding: 0 0 0 7vw;

    position: relative;

    box-sizing: border-box;

    display: block;

    font-weight: 600;

}



.form input::placeholder {

    color: #040000 !important;

}



.check-item {

    width: 100%;

    height: 2.5vw;

    line-height: 2.5vw;

    color: #040000;

    margin: 0vw auto 0 auto;

    vertical-align: middle;

    font-weight: 600;

    letter-spacing: 0.2vw;

    font-size: 1.05vw;

    position: relative;

}



.check-item::after {

    content: "";

    clear: both;

    display: block;

}



.check-item a:link,

.check-item a:visited,

.check-item a:hover,

.check-item a:active {

    color: #040000;

}



.check-label {

    width: 18%;

    height: 2.5vw;

    line-height: 2.5vw;

    float: left;

}



.check-item label {

    height: 2.5vw;

    line-height: 2.5vw;

    cursor: pointer;

}



.check-item label input {

    width: 1.2vw;

    height: 1.2vw;

    margin: 0% 1% -2.5% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background: url(../img/check.png) no-repeat top center;

    background-size: 1.2vw 1.2vw;

    border: none;

}



.check-item label input:checked {

    background: url("../img/checked.png") no-repeat top center;

    background-size: 1.2vw 1.2vw;

}



.agreeBtn {

    height: 2.5vw;

    float: left;

    margin-left: 1.5vw;

}



.openTxtBtn {

    display: inline-block;

    height: 2vw;

    line-height: 2vw !important;

    border-bottom: 1px solid #a47a3d;

    cursor: pointer;

}



.form input[type="submit"],

.form input[type="button"] {

    height: 2vw;

    line-height: 2vw;

    border: none;

    background-color: transparent;

    border-bottom: 1px solid #a47a3d;

    font-weight: 600;

    letter-spacing: 0.2vw;

    text-indent: 0.2vw;

    font-size: 1.05vw;

    color: #040000;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    outline: none;

    position: absolute;

    right: 9vw;

    top: 0.28vw;

    font-family: 'Noto Serif TC', serif;

    display: block;

    padding: 0 0;

    cursor: pointer;

}





input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-text-fill-color: #040000;

    -webkit-box-shadow: 0 0 0px 1000px transparent inset;

    transition: background-color 5000s ease-in-out 0s;

}







.nav {

    position: relative;

    margin-top: calc(60*var(--vw-base));

    height: calc(70*var(--vw-base));

    display: flex;

    align-items: center;

}



.nav-items {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: calc(156*var(--vw-base));

    gap: calc(10*var(--vw-base));

}



.nav-items::after {

    content: "";

    position: absolute;

    top: 0%;

    right: 0;

    width: 1px;

    height: 100%;

    background-color: #f3d7b9;

    opacity: 0.5;

}



.nav-items:last-child::after {

    display: none;

}



.nav-items img {

    object-fit: contain;

}



.nav-icon {

    position: relative;

    height: calc(44*var(--vw-base));

}





.nav-txt {

    position: relative;

    color: #fff;

    font-size: calc(13*var(--vw-base));

    font-family: "Futura-Std-Medium";

    line-height: calc(15*var(--vw-base));

    letter-spacing: 0.1em;

}



.build-info {

    position: absolute;

    left: calc(830*var(--vw-base));

    bottom: calc(15*var(--vw-base));

    /* margin-top: calc(50*var(--vw-base)); */

    width: calc(950*var(--vw-base));

    height: calc(15*var(--vw-base));

}



.build-info img {

    object-fit: contain;

}



/*同意書照片預覽*/



.black {

    display: none;

    width: 100%;

    height: 100%;

    position: fixed;

    left: 0px;

    top: 0px;

    background-color: rgba(0, 0, 0, 0.9);

    z-index: 11111;

    font-family: "Noto Sans TC";

}



.closeBtn {

    width: 30px;

    position: absolute;

    right: 5%;

    top: 4%;

    cursor: pointer;

}



.infoWrap {

    width: 100%;

    margin: 0 auto;

    max-width: 65%;

    position: relative;

    height: 100vh;

    overflow: auto;

}



.infoWrap ul {

    list-style: none;

    font-size: 1vw;

    padding-inline-start: 2vw;

}



.infoWrap ul>li>ul {

    list-style: none;

    font-size: 1vw;

    padding-inline-start: 1vw;

}



.li1::before {

    content: "一、";

    position: absolute;

    left: 0vw;

}



.li2::before {

    content: "二、";

    position: absolute;

    left: 0vw;

}



.li3::before {

    content: "三、";

    position: absolute;

    left: 0vw;

}



.li4::before {

    content: "四、";

    position: absolute;

    left: 0vw;

}



.li5::before {

    content: "五、";

    position: absolute;

    left: 0vw;

}



.li1-li::before {

    content: "（１）";

    position: absolute;

    left: 0vw;

}



.li2-li::before {

    content: "（２）";

    position: absolute;

    left: 0vw;

}



.li3-li::before {

    content: "（３）";

    position: absolute;

    left: 0vw;

}



.li4-li::before {

    content: "（４）";

    position: absolute;

    left: 0vw;

}



.infoBox {

    width: 100%;

    height: calc(100% - 20vw);

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    overflow-y: auto;

    color: #fff;

    text-align: left;

}



.infoBox h3 {

    font-size: 1.2vw;

    line-height: 180%;

    margin-bottom: 25px;

    text-align: center;

}



.infoBox h4 {

    font-size: 1vw;

    line-height: 180%;

    margin-bottom: 1vw;

}



.infoBox h5 {

    font-size: 1.2vw;

    line-height: 180%;

    margin-bottom: 1vw;

}



.infoBox p {

    font-size: 1vw;

    line-height: 180%;

}