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

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button,
img,
legend {
    border: 0
}
pre,
textarea {
 overflow:auto
}
a,
label {
 cursor:pointer
}
body,
html,
sub,
sup {
 position:relative
}
a:active,
a:hover,
button,
input,
textarea {
 outline:0
}
.form-wrapper .form-radio-input:checked+.form-radio-label::after,
.form-wrapper .form-radio-label::before,
.form-wrapper .form-read-input:checked+.form-read-text::after,
.form-wrapper .form-read-text::before,
.login-wrapper .login-right::before,
.login-wrapper::after,
.login-wrapper::before {
 content:''
}
html {
 font-family:sans-serif;
 -ms-text-size-adjust:100%;
 -webkit-text-size-adjust:100%
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
 display:block
}
audio,
canvas,
progress,
video {
 display:inline-block;
 vertical-align:baseline
}
audio:not([controls]) {
 display:none;
 height:0
}
[hidden],
template {
 display:none
}
a {
 display:inline-block;
 text-decoration:none;
 color:inherit
}
abbr[title] {
 border-bottom:1px dotted
}
b,
optgroup,
strong {
 font-weight:700
}



small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 vertical-align:baseline
}
sup {
 top:-.5em
}
sub {
 bottom:-.25em
}
img {
 max-width:100%
}
svg:not(:root) {
 overflow:hidden
}
figure {
 margin:1em 40px
}
hr {
 box-sizing:content-box;
 height:0
}



button,
input,
optgroup,
select,
textarea {
 color:inherit;
 font:inherit;
 margin:0
}


button {
 overflow:visible;
 margin:0;
 padding:0
}
button,
select {
 text-transform:none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
 -webkit-appearance:button;
 cursor:pointer
}
button[disabled],
html input[disabled] {
 cursor:default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
 border:0;
 padding:0
}
input {
 line-height:normal
}
input[type=checkbox],
input[type=radio] {
 box-sizing:border-box;
 padding:0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 height:auto
}
input[type=search] {
 -webkit-appearance:textfield
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
 -webkit-appearance:none
}



table {
 border-collapse:collapse;
 border-spacing:0
}
* {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box
}
body,
html {
 color:#757575;
 font-size:14px;
 width:100%;
 height:100vh;
 height:100%;
 line-height:26px;
 margin:0
}
.form-title,
.form-wrapper .form-subtitle-text {
 font-family:"Noto Serif TC",serif
}


.form-title {
 color:#000;
 font-size:34px;
 font-weight:700;
 letter-spacing:.05em;
 margin-bottom:30px;
 font-style:normal
}


.form-titleEn {
    color: #e6e6e6;
    font-size: 76px;
    text-align: center;
    position: absolute;
    right: 17%;
    top: 10%;
    font-family: 'Cormorant Garamond', serif;
    z-index: -1
}

   .form-wrapper {
    font-family: 'Noto Serif TC', serif;
    font-style:normal;
    font-size: 17px
}

    /*----------輸入框-------*/
.form-wrapper .forms_show {
 display:block;
 margin-top:8px;
 width:100%
}




/*-重點---*/
.form-wrapper .form-required {
 color:#df3b64;
 display:inline
}



.form-wrapper .form-row {
 margin-bottom:18px;
 width:100%;
 display:block 
}
.form-wrapper .form-rowtitle {
 color:#000;
 display:block;
 font-size:18px;
 letter-spacing:.05em;
 margin-bottom:8px
}
.form-wrapper .form-input,
.form-wrapper .form-select {
 align-items:center;
 background-color:#fff;
 border:1px solid #eee;
 color:#333;
 display:flex;
 min-height:48px;
 padding:5px 16px;
 width:100%
}
.form-wrapper .form-input.readonly,
.form-wrapper .form-select.readonly {
 background-color:#f3f3f3;
 border-color:#f3f3f3
}





.form-wrapper .form-vision-btn{
 background-size:contain;
 background-position:center;
 background-repeat:no-repeat
}




.form-wrapper .form-check {
 display:flex
}
.form-wrapper .form-check-input {
 flex:0 0 200px;
 max-width:200px;
 width:200px
}


.form-wrapper .form-check-picbox {
 align-items:center;
 display:flex;
 flex:0 0 100%;
 max-width:100%;
 width:100%;
 padding-left:10px
}






/*----Btn----*/
.form-wrapper .form-btns-btn {
 align-items:center;
 background-color:#009140;
 border-radius:5px;
 color:#fff;
 display:flex;
 flex:0 1 100%;
 min-height:48px;
 justify-content:center;
 max-width:270px;
 width:100%
}
@media screen and (min-width:1200px) {
 .form-wrapper .form-btns-btn:hover {
  background-color:#003f2b
 }
}


.form-wrapper .form-ENname-group {
 display:flex;
 justify-content:space-between
}
.form-wrapper .form-ENname-input {
 flex:0 1 calc(50% - 7.5px);
 max-width:calc(50% - 7.5px);
 width:calc(50% - 7.5px);
 margin-right:15px
}
.form-wrapper .form-ENname-input:last-of-type {
 margin-right:0
}



.form-wrapper .form-address-top .form-input,
.form-wrapper .form-address-top .form-select {
    flex: 0 0 calc(33.33% - 10px);
    max-width: calc(33.33% - 10px);
    width: calc(33.33% - 10px)
}


.form-wrapper .form-address-item .form-input {
 max-width:60px
}


.form-wrapper .form-address-text {
 margin-left:8px
}
.form-wrapper .form-journal-group {
 background-color:#f3f3f3;
 padding:18px 24px
}
.form-wrapper .form-journal-title {
 color:#009140;
 font-weight:700;
 margin-bottom:19px
}
.form-wrapper .form-journal-row {
 margin-bottom:18px
}
.form-wrapper .form-journal-row:last-of-type {
 margin-bottom:0
}



.form-wrapper .form-withOther-group .form-input,
.form-wrapper .form-withOther-group .form-select {
 flex:0 0 calc(50% - 8px);
 max-width:calc(50% - 8px);
 width:calc(50% - 8px)
}
.form-wrapper .form-withOther-group .form-select {
 margin-right:16px
}




.form-wrapper .form-withOther-input.show {
 display:block
}


.form-wrapper .form-read-text {
 color:#009140;
 display:block;
 font-size:18px;
 letter-spacing:.05em;
 padding-left:35px;
 position:relative
}
.form-wrapper .form-read-text::after,
.form-wrapper .form-read-text::before {
 box-sizing:border-box;
 display:block;
 position:absolute
}
.form-wrapper .form-focus-wrapper,
.form-wrapper .form-focus-wrapper .form-input:focus~.form-address-text {
 position:relative
}
.form-wrapper .form-read-text::before {
 border:1px solid #009140;
 height:23px;
 left:0;
 top:0;
 width:23px
}
.form-wrapper .form-read-text::after {
 background-color:#009140;
 height:13px;
 left:5px;
 top:5px;
 width:13px
}
.form-wrapper .form-read-input {
 display:none
}
.form-wrapper .form-read-terms {
 color:#003f2b;
 text-decoration:underline
}




.form-wrapper .form-vision-box {
 position:relative;
 display:block
}

/*------eye------*/
.form-wrapper .form-vision-btn {
    height: 30px;
    background-image: url(/Images/vision.svg);
    outline: 0;
    position: absolute;
    top: 9px;
    right: 10px;
    width: 30px
}
    .form-wrapper .form-vision-btn.close {
        background-image: url(/Images/vision_close.svg)
    }
@media screen and (max-width:767px) {
    .form-title {
        font-size: 22px;
        letter-spacing: .05em;
        margin-bottom: 18px;
        text-align: center;
    }
 .form-wrapper {
  font-size:13px
 }
 .form-wrapper .forms_show {
  display:block;
  margin-top:5px
 }
 .form-wrapper .form-row {
  margin-bottom:9px
 }
 .form-wrapper .form-rowtitle {
  font-size:15px;
  letter-spacing:.05em;
  margin-bottom:5px
 }
 .form-wrapper .form-input,
 .form-wrapper .form-select {
  min-height:35px;
  padding:5px 12px
 }





 .form-wrapper .form-check {
  display:flex
 }
 .form-wrapper .form-check-input {
  flex:0 0 120px;
  max-width:120px;
  width:120px
 }
 .form-wrapper .form-check-picbox {
  flex:0 0 100%;
  max-width:100%;
  width:100%
 }
 .form-wrapper .form-verify-row,
 .form-wrapper .form-withBtn-row {
  display:flex;
  margin-top:8px
 }
 .form-wrapper .form-verify-btn,
 .form-wrapper .form-withBtn-btn {
  flex:0 0 100px;
  max-width:100px;
  width:100px;
  min-height:35px
 }

 .form-wrapper .form-verify-input,
 .form-wrapper .form-withBtn-input {
  flex:0 0 calc(100% - 100px);
  max-width:calc(100% - 100px);
  width:calc(100% - 100px)
 }




 .form-wrapper .form-switch-btn.now {
  background-color:#009140;
  border:1px solid #009140;
  color:#fff
 }





 .form-wrapper .form-btns-btn {
  min-height:35px
 }
 .form-wrapper .form-btns-btn+.form-btns-btn {
  margin-left:15px
 }



 .form-wrapper .form-radio-label {
  height:20px;
  font-size:13px;
  line-height:20px;
  padding-left:24px
 }
 .form-wrapper .form-radio-label::before {
  height:20px;
  width:20px
 }
 .form-wrapper .form-radio-label::after {
  height:12px;
  left:4px;
  top:4px;
  width:12px
 }
 .form-wrapper .form-radio-input {
  display:none
 }
 .form-wrapper .form-radio-input:checked+.form-radio-label::after {
  content:''
 }
 .form-wrapper .form-ENname-group {
  flex-wrap:wrap
 }
 .form-wrapper .form-ENname-input {
  flex:0 0 calc(50% - 5px);
  max-width:calc(50% - 5px);
  width:calc(50% - 5px);
  margin-right:10px
 }
 .form-wrapper .form-ENname-input:nth-child(2) {
  margin-right:0
 }
 .form-wrapper .form-ENname-input:nth-child(3) {
  flex:0 0 100%;
  max-width:100%;
  width:100%;
  margin-right:0;
  margin-top:10px
 }





 .form-wrapper .form-journal-group {
  background-color:#f3f3f3;
  padding:18px 24px
 }
 .form-wrapper .form-journal-title {
  color:#009140;
  font-weight:700;
  margin-bottom:19px
 }


 .form-wrapper .form-vision-btn {
  height:21px;
  top:9px;
  right:8px;
  width:21px
 }
}
@media screen and (max-width:575px) {


 
 .form-wrapper .form-address-item {
  align-items:center;
  display:flex;
  flex:0 0 auto;
  margin:8px 8px 0 0;
  width:auto
 }
 .form-wrapper .form-address-item .form-input {
  max-width:60px
 }

 .form-wrapper .form-address-item.form-address-l .form-input,
 .form-wrapper .form-address-item.form-address-m .form-input,
 .form-wrapper .form-btns-btn,
 .form-wrapper .form-btns-btn:only-child {
  max-width:100%
 }
 .form-wrapper .form-address-item.form-address-l {
  margin-right:0;
  width:100%
 }
 .form-wrapper .form-address-item.form-address-twin .form-address-text {
  margin-right:8px
 }
 .form-wrapper .form-address-text {
  margin-left:8px
 }
}
.footer,
.header,
.header-height {
 display:none
}
.login-wrapper {
 align-items:center;
 display:flex;
 justify-content:center;
 min-height:100vh;
 position:relative
}

.login-wrapper::after,
.login-wrapper::before {
 display:block;
 position:absolute
}

/*--left bg---*/
    .login-wrapper::before {
        background: url(/Images/login-wrapperBg.jpg);
        background-position: center;
        background-size:contain;
        height: 100%;
        left: 0;
        top: 0;
        width: 40%
    }

    .login-wrapper::after {
        background-color: #e6d9c6;
        height: 100%;
        right: 0;
        top: 0;
        width: 60%
    }
.login-wrapper .login-inner {
 display:flex;
 margin:20px 0;
 width:100%;
 z-index:1
}
    .login-wrapper .login-left {
        flex: 0 0 40%;
        max-width: 40%;
        width: 40%;
        position: relative;
        background: url(/Images/isec01Bg.jpg);
        background-position: center;
        background-size: cover;
    }



.login-wrapper .login-left .left-pic {
 display:block;
 max-height:88%;
 max-width:524px;
 position:absolute;
 right:15%;
 top:15%
}
.login-wrapper .login-right {
 flex:0 0 60%;
 max-width:60%;
 width:60%;
 padding:13vh 9.375vw 10vh;
 position:relative
}
.login-wrapper .login-right::before {

 right:0px;
 font-size:72px;
 position:absolute;
 color:#ccc;
 background-repeat:no-repeat;
 background-position:calc(100% - 45px) 0;
 background-color:#fff;
 border-radius:0 5.625vw 0 0;
 box-shadow:0 0 15px rgba(0,0,0,.161);
 display:block;
 height:100%;
 left:0;
 top:0;
 width:88%;
 z-index:-1
}



@media screen and (max-width:1440px) {
 .login-wrapper .login-right::before {
  width:calc(100% - 15px)
 }
}
.login-wrapper .login-form {
 max-width:470px
}




    @media screen and (min-width:1200px) {
        .login-wrapper .login-form {
            min-height: 540px
        }
    }

    .login-wrapper .login-btn {
        align-items: center;
        background-color: #03466d;
        border-radius: 5px;
        color: #fff;
        display: flex;
        font-size:18px;
        height: 48px;
        justify-content: center;
        min-width: 320px;
        margin: 20px auto;
        border-style:none;
        letter-spacing:5px
    }

        .login-wrapper .login-btn:hover {
             background-color: #b79128
        }


    /*--------password---------*/
    .login-wrapper .login-links {
        display: block;
        text-align: center;
        margin: auto;
    }

        .login-wrapper .login-links .link-item {
            align-items: center;
            display: inline-block;
            margin-right: 15px;
            font-size: 16px
        }

            .login-wrapper .login-links .link-item:last-child {
                margin-right: 0
            }


            .login-wrapper .login-links .link-item:hover .link-text {
                color: #c69043;
                text-decoration: underline
            }



        .login-wrapper .login-links .link-text {
            color: #333
        }

        .login-wrapper .login-links .link-icon {
            display: block;
            height: 24px;
            margin-right: 8px;
            width: 24px;
            background-image: url(/);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center
        }

@media screen and (max-width:1280px) {
    .login-wrapper .login-left .left-pic {
        right: -3%;
    }
}
    @media screen and (max-width:1024px) {
        body {
            background-color: #e6d9c6;
        }

        .login-wrapper {
            align-items: flex-start
        }

            .login-wrapper::after,
            .login-wrapper::before {
                content: none
            }

            .login-wrapper .login-inner {
                background-color: #e6d9c6;
                flex-wrap: wrap;
                margin: 0;
                padding: 0 100px 50px;
                position: relative
            }

                .login-wrapper .login-inner::before {
              
                    content: '';
                    display: block;
                    height: 380px;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%
                }

            .login-wrapper .login-left {
                align-items: center;
                display: flex;
                flex: 0 0 100%;
                max-width: 100%;
                width: 100%;
                height: 280px;
                justify-content: center
            }

                .login-wrapper .login-left .left-pic {
                    margin: 0 auto;
                    max-width: 90%;
                    position: static;
                    width: 463px;
                    right: 0%;
                }

            .login-wrapper .login-right {
                flex: 0 0 100%;
                max-width: 100%;
                width: 100%;
                padding: 50px 0 80px;
                position: relative
            }

                .login-wrapper .login-right::before {
                    background-size: 35vw;
                    background-color: #fff;
                    background-position: 95% 0;
                    border-radius: 0 0 5vw 5vw;
                    width: 100%
                }

            .login-wrapper .login-form {
                margin: 0 auto;
                max-width: 410px;
                width: 90%
            }
    }

@media screen and (max-width:768px) {

    .form-titleEn {
        font-size: 36px;
        right: 0;
        top: 9%;
        z-index: -1;
        position: relative;
        text-align: center;
        margin: 5px auto 20px auto;
    }
}
    @media screen and (max-width:575px) {
        .login-wrapper .login-inner::before,
        .login-wrapper .login-right::before {
            content: none
        }

        .login-wrapper .login-inner {
            background-color: #fff;
            padding: 0
        }

        .login-wrapper .login-left {
            height: 180px
        }

            .login-wrapper .login-left .left-pic {
                max-height: 100%;
                max-width: 100%;
                width: 236px
            }

        .login-wrapper .login-right {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
            padding: 25px 0 50px;
            position: relative
        }

        .login-wrapper .login-form {
            max-width: calc(100% - 80px)
        }

        .login-wrapper .login-btn {
            border-radius: 4px;
            color: #fff;
            display: flex;
            font-size: 15px;
            height: 35px;
            margin-bottom: 8px
        }

        .login-wrapper .login-links .link-item {
            margin-right: 24px
        }

            .login-wrapper .login-links .link-item:last-child {
                margin-right: 0
            }

        .login-wrapper .login-links .link-icon {
            height: 15px;
            margin-right: 5px;
            width: 15px
        }

        .login-wrapper .login-btn {
                 min-width: 245px
        }
    }