/* intro */
.page-intro{
    background-image:url(../image/bg/15.jpg),url(../image/p4.png);
    background-size:cover,auto;
    background-repeat: no-repeat,repeat;
    height:100vh;
}
#intro-container{
    position: absolute;
    top: 22.5vh; /*18%*/
    left: 26vw; /*20%*/
    width: 70vw; /*850px*/
    height: 78vh;/*500px*/
    overflow-x: hidden;
    overflow-y: hidden;
    border: solid 0px black;
}
#intro-wrapper{
    width: 280vw;
    transform: translate3d(0, 0, 0);
    transition: opacity .5s ease-in-out, transform .1s ease-in-out .5s;
}
.intro-wrapper-fade{
    opacity: 1;
    transition: opacity .5s ease-in-out;
}
.intro-subpage, .intro-subpage-1{
    float: left;
    width: 70vw;
    height: 68vh;
    overflow: visible;
    white-space: normal;
    background-repeat: no-repeat;
}
.intro-littleTitle{
    font-weight: 400;
    font-size: 1.3em;
    line-height: 2.833em;
    color: rgba(50,50,50,1);
    line-height: 2.5vh;
    letter-spacing: 0.1em;
}
.intro-bigTitle{
    font-weight: 500;
    font-size: 2em;
    color: rgba(50,50,50,1);
    line-height: 7.25vh;
    margin-top: 0.5vmin;
}
.intro-button{
    float:left;
    width: 4vmin;
    height: 4vmin;
    margin: 1vmin;
    margin-left: 0px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
}
.intro-prev{
    background-image: url(../image/btn/btn_left.svg);
}
.intro-prev:hover{
    background-image: url(../image/btn/btn_left_rv.svg);
    transition: all .5s;
}
.intro-next{
    background-image: url(../image/btn/btn_right.svg);
}
.intro-next:hover{
    background-image: url(../image/btn/btn_right_rv.svg);
    transition: all .5s;
}
hr.intro-title{
    border: 0;
    height: 2px;
    width: 55vw;
    margin-top: 3px;
    background: #505050;
    clear: both;
}
/**1st page**/
.intro-first-page-text{
    float:left;
    height:45vh;
    width:25vw;
    margin-top:20px;
    margin-right:5vw;
    text-align: left;
    font-size: 0.7em;
    line-height: 1.7em;
    font-weight: 300;
}

/*
@media (min-width: 550px) and (max-width: 900px){
    .intro-first-page-text{
	float: none;
    }
}
*/
/*
@media (max-width: 550px){
    .intro-container{
        position: absolute; 
        top: 20%;
        left: 20%;
	width: none;
	height: none;
    }
    .intro-first-page-text{
        float: none;
	font-size: 0.7em;
	width: 220px;
    }
}
*/



.intro-second-page-left{
    float: left;
    width: 25vw;
    height: 40vh;
    border: solid red 0px;
}
.intro-second-page-right{
    float: left;
    width: 25vw;
    height: 40vh;
    margin-left: 5vw;
    border: solid blue 0px;
}
.intro-p2-block1{
    float: left;
    margin-top:3.25vh;
    height: 2.5vh;/*70px*/
    font-weight: 300;
    font-size: 0.8em;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: #000000;
}
.intro-p2-text1{
    margin-top: 2vh;
    width: 25vw;
    float:left;
    font-weight: 300;
    font-size: 0.7em;
    line-height: 1.7em;
    letter-spacing:0.05em;
    color: #000000;
}
.intro-p2-space{
    height: 2.5vh;
    width: 100%;
    clear: both;
}
.intro-p2-text2{
    font-weight: 350;
    font-size: 0.8em;
    text-align: justify;
    line-height:1.6em;
    letter-spacing: 0.05em;
    color: #000000;
}


/**3rd page**/
.intro-p3-block{
    float: left;
    height: 2.5vh;/*70px*/
    font-weight: 300;
    font-size: 0.8em;
    line-height: 1.5em;
    color: #000000;
}
.intro-p3-block1{
    float: left;
    margin-right: 5vw;
    width: 25vw;
    margin-top: 3.25vh;
    border: solid 0px red;
}
.intro-p3-block2{
    float: left;
    width: 25vw;
    margin-right: 5vw;
    margin-top:3.25vh;
    border: solid 0px red;
}
.intro-p3-text{
    margin-top: 2vh;
    width: 25vw;
    float:left;
    font-weight: 300;
    font-size: 0.7em;
    line-height: 1.7em;
    letter-spacing:0.05em;
    color: #000000;
}
.intro-p3-text-E{
    float: left;
    font-weight: 350;
    font-size: 0.75em;
    line-height: 1.833em;
    color: #000000;
}
.intro-fourth-page-left{
    float: left;
    width: 55vw;
    margin-top: 20px;
    border: solid 0px blue;
}
.intro-fourth-page-middle{
    float: left;
    width: 31vw;
    margin-top: 10px;
    margin-right: 2vw;
    border: solid 0px blue;
}
.intro-fourth-page-right{
    float: left;
    width: 33vw;
    margin-top: 10px;
    border: 0px blue solid;
}
.intro-p4-text1{
    float: left;
    font-weight: 300;
    font-size: 0.7em;
    line-height: 1.7em;
    color: #000000;
}
.intro-p4-block1{
    margin-top: 5px;
    font-weight: 300;
    font-size: 1.5em;
    line-height: 2.5vh;
    color: #000000;
    border: solid 0px black;
}
.intro-p4-block2{
    padding-top:5px;
    font-weight: 300;
    font-size: 1.5em;
    line-height: 2.5vh;
    color: #000000;
    border: solid 0px black;
}
.intro-p4-block3{
    padding-top:5px;
    font-weight: 300;
    font-size: 1.5em;
    line-height: 2.5vh;
    color: #000000;
    border: solid 0px black;
}
.intro-p4-text2{
    height: 22vh;
    margin-top: 5px;
    border: solid red 0px;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.83em;
    letter-spacing:0.05em;
    color: #323232;
}
.intro-p4-text3{
    margin-top: 5px;
    border: solid 0px green;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.83em;
    letter-spacing:0.05em;
    color: #323232;
}
/*end of page intro*/

/* page: dean */
.page-dean{
    background-image:url(../image/bg/dean.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: right;
    height:100vh;
}
.dean-bigTitle{
    float: left;
    font-weight: 500;
    font-size: 2em;
    color: #000000;
    line-height: 8vh;
    margin-bottom: 1vh;
}
.dean-littleTitle{
    float: left;
    font-weight: 300;
    font-size: 1.3em;
    letter-spacing: 0.1em;
    line-height: 2.833em;
    color: #000000;
    line-height: 3.5vh;
    margin-top: 3vh;
    margin-left: 1.5vw;
    margin-bottom: 1vh;
}
.dean-cv_icon{
    float: right;
    width: 5vh;
    height:5vh;
    margin-top: 1.5vh;
    margin-bottom: 1vh;
    background-image: url(../image/btn/btn_cv.svg);
    background-size: cover;
}
.dean-cv_icon:hover{
    background-image: url(../image/btn/btn_cv_rv.svg);
}
hr.dean_hr{
    clear: both;
    border: 0;
    width: 40vw;
    height: 1px;
    margin-bottom: 3vh;
    background: black;
}
.dean-option-wrapper{
    float: left;
    position: relative;
}
.dean-option{
    font-weight: 300;
    font-size: 1.2em;
    line-height: 2.833em;
    color: #000000;
    width: 8vw;
    line-height: 5vh;
    margin-right: 1.8vw;
    border-bottom: solid 0.5vh rgba(0,0,0,0);
}
.dean-option-wrapper:hover .dean-option{
    border-bottom: solid 0.5vh rgba(0,0,0,1);
    transition: all .5s;
}
.dean-discript{
    position: absolute;
    padding-top: 1.5vh;
    display: none;
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-weight: 300;
    font-size: 0.78em;
    line-height: 2.2em;
    color: #000000;
    border: solid 0px green;
}
.dean-width1{ width: 40vw; }
.dean-width2{ width: 60vw; margin-left: -9.8vw;}
.dean-width2-1{ float: left; margin-right: 0.8vw;}
.dean-width3{ width: 40vw; margin-left: -19.6vw;}
.dean-option-wrapper:hover .dean-discript{
    display: block;
}
.dean-block{
    width: 30vw;
    margin-top: 15vh;
    display: block;
}
.dean-block-text{
    position: relative;
    font-weight: 400;
    font-size: 1em;
    color: #000000;
    line-height: 1.6em;
    text-align: left;
    padding: 6vh;
    margin-left: 0vh;
    background: rgba(255,255,255,0.3);
}
/*.dean-option-container:hover .dean-block{
    display: none;
}*/

/* page: vice-dean */
.page-vice_dean{
    background-image:url(../image/bg/17.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    height:100vh;
}
#vice_dean-container{
    position: absolute;
    top: 22.5vh;
    left: 26vw;
    width: 40vw;
    height: 40vh;
    overflow: visible;
}
.vd-block{
    width: 56vw;
    height: 17.5vw;
    margin-top: 17px;
    margin-bottom: 8px;
    border-radius:10px;
    box-shadow:0px 0px 10px 2px rgba(20%,20%,40%,0.5);
    overflow: hidden;
}
.vd-chen{
    background-image: url(../image/assistant_dean2_rev.jpg);
    background-size:cover;
}
.vd-yang{
    background-image: url(../image/assistant_dean1_rev.png);
    background-size:cover;
}
.vd-text_block{
    height: 15vw;
    width: 25vw;
    padding-top: 2.5vw;
    border: solid 0px green;
}
.vd-m1{ margin-left: 31vw; }
.vd-m2{ margin-left: 4vw; }
.vd-bigTitle{ /* 3 文本規範-副標題 */
    font-weight: 400;
    font-size: 1.3em;
    letter-spacing: 0.1em;
    color: #000000;
    line-height: 3vh;
    margin-bottom: 0.5vw;
    margin-right: 0.5vw;
    margin-top: 0.5vw;
    border: solid 0px green;
}
.vd-littleTitle{/* 2  文本規範-小標題 */
    font-family:'Noto Sans TC', '微軟正黑體', sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    color: #000000;
    line-height: 1.5em;
    margin-top: 1.7vw;
    margin-bottom: 0.5vw;
    border: solid 0px green;
}
.vd-text{
    /* 5 文本規範-內文 */
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: #000000;
}
.vd-fl{
    float:left;
}
.vd-cv_icon{
    float: left;
    width: 3vh;
    height: 3vh;
    margin-top:0.5vw;
    margin-left: 1vw;
    margin-bottom: 0.5vw;
    background-image: url(../image/btn/btn_cv.svg);
    background-size: cover;
}
.vd-cv_icon:hover{
    background-image: url(../image/btn/btn_cv_rv.svg);
}
hr.vd_hr{
    clear: both;
    border: 0;
    width: 22vw;
    height: 1px;
    margin-top: 0.5vw;
    margin-bottom: 1vw;
    background: black;
}
/* page: staff */
.page-staff{
    background-image:url(../image/bg/18.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    height:100vh;
}
#staff-container{
    position: absolute;
    top: 22.5vh;
    left: 26vw;
    width: 69vw;
    height: 700px;
    overflow: visible;
}
.staff-block{
    float: left;
    width: 18vw;
    height: 400px;
    margin-top: 50px;
    margin-right: 7vw;
}
.staff-photo{
    width: 14vw;
    height: 14vw;
    border-radius: 50%;
    box-shadow: 0px 0px 4px rgba(0%, 0%, 0%, 0.4);
    /*border: solid 1px black;*/
}
.staff-wu{
    background-image: url(../image/Wu.jpg);
    background-size:cover;
}
.staff-liu{
    background-image: url(../image/Liu.jpg);
    background-size:cover;
}
.staff-hsieh{
    background-image: url(../image/Hsieh.jpg);
    background-size:cover;
}
.staff-block1{
    width: 200px;
    height: 25px;
}
.staff-line{
    width: 16vw;
    margin-top: 2vh;
    margin-bottom: 2vh;
    border: solid 1px black;
}
.staff-littleTitle{
    font-family:'Noto Sans TC', '微軟正黑體', sans-serif;
    font-weight: 400;
    font-size: 1.3em;
    letter-spacing: 0.1em;
    line-height: 2.833em;
    color: #000000;
    line-height: 3vh;
    margin-bottom: 1vh;
}
.staff-bigTitle{
    font-family:'Noto Sans TC', '微軟正黑體', sans-serif;
    font-weight: 500;
    font-size: 2em;
    color: #000000;
    line-height: 5.5vh;
}
.staff-text{
    font-family:'Noto Sans TC', '微軟正黑體', sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    line-height: 1.5em;
    letter-spacing:0.05em;
    color: #000000;
}

/* history of the deans */
.page-history_of_the_deans{
    background-image:url(../image/bg/16.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    height:100vh;
}
hr.history_of_the_deans_hr{
    width: 40vw;
    height: 1px;
    background: black;
    margin-top: 0px;
}
.history_of_the_deans_text{
    height:45vh;
    width:55vw;
    margin-top:20px;
    font-weight: 300;
    font-size: 0.7em;
    line-height:2.25em;
    text-align: left;
    color: #000000;
    border: solid 0px red;
}