@charset "utf-8";
.container{max-width: 1400px; width: 90%; margin: 0 auto;}

/* about */
#about-us{max-width: 1000px; width: 94%; margin: 0 auto; padding-top: 120px;}
#about-us .info .pic{padding-top: 30px;}
#about-us .info .text{font-size: 16px; line-height: 26px; letter-spacing: 1px; margin-top: 30px;}
#about-us .member{padding-top: 60px;}
#about-us .member .list li{min-height: 17.67vw; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 20px 0 20px 21vw;}
#about-us .member .list li .img{width: 17.43vw; position: absolute; top: 20px; left: 0; border-radius: 50%; border: 1px solid rgba(231, 188, 65, .2); box-sizing: border-box;}
#about-us .member .list li .img img{width: 100%; height: auto; display: block; border-radius: 50%;}
#about-us .member .list li:nth-child(1) .img::after{width: 100%; height: 100%; background: url('../images/member-bg.png') bottom no-repeat; background-size: 100% auto; color: #fff; font-size: 14px; text-align: center; border-radius: 50%; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 15px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 1;}
#about-us .member .list li .name .job-title{display: none;}
#about-us .member .list li .name{color: #e7bc41; font-size: 20px; font-weight: bold;}
#about-us .member .list li .text{font-size: 14px; line-height: 22px; letter-spacing: 1px; margin-top: 20px;}
#about-us .video-container{height: 0; position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-top: 30px; overflow: hidden;}
#about-us .video-container iframe,#about-us .video-container object,#about-us .video-container embed{position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

/* slide */
.pic .owl-dots{display: none;}
.pic .owl-nav{text-align: right; margin-top: 10px;}
.pic .owl-nav button{width: 50px; height: 50px; border: none;}
.pic .owl-nav button.owl-prev{ background: url('../images/slide-prev-icon.png') center no-repeat; background-size: auto 50%;}
.pic .owl-nav button.owl-next{ background: url('../images/slide-next-icon.png') center no-repeat; background-size: auto 50%;}
.pic .owl-nav button span{display: none;}

/* page with pic list */
.img-list .list{display: flex; flex-wrap: wrap; margin-top: 30px;}
.img-list .list .link{width: 23.5%; margin-right: 2%; padding: 20px 0;}
.img-list .list .link:nth-child(4n){margin-right: 0;}
.img-list .list .link img{width: 100%; height: auto; display: block;}
.img-list .list .link .text{position: relative;}
.img-list .list .link .text .date{background: #e7bc41; color: #000; font-size: 14px; padding: 5px; display: inline-block; position: absolute; bottom: 100%;}
.img-list .list .link .text .title{color: #fff; font-size: 16px; line-height: 24px; letter-spacing: 1px; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; padding-top: 10px;}

/* news-page */
#news-page{max-width: 1400px; width: 94%; margin: 0 auto; padding-top: 120px;}

/* collection */
#collection{max-width: 1400px; width: 94%; margin: 0 auto; padding-top: 120px;}
#collection .box{margin-bottom: 30px;}
#collection-detail{max-width: 1200px; width: 94%; margin: 0 auto; padding-top: 120px;}
#collection-detail .tag{background: #e7bc41; color: #000; font-size: 14px; padding: 5px; display: inline-block; margin-bottom: 20px;}
#collection-detail .text-title::after{display: none;}
#collection-detail .text{font-size: 16px; line-height: 24px; letter-spacing: 1px; margin-top: 30px;}

/* page */
#page{max-width: 800px; width: 94%; margin: 0 auto; padding-top: 120px;}
#page .page-title{text-align: center; padding: 20px 0 0 30px;}
#page .page-title h3{color: #fff; font-size: 30px; line-height: 40px; font-weight: lighter; display: inline-block; border-bottom: 1px solid #e7bc41; padding: 0 15px 10px 15px; margin: 0 auto; position: relative;}
#page .page-title h3::before{content: ""; width: 30px; height: 30px; background: url('../images/page_icon2.png') center / 100% auto no-repeat; display: block; position: absolute; right: 100%; top: 0;}
#page .img{margin-top: 30px;}
#page .img img{width: 100%; height: auto; display: block;}
#page .summary{width: 50%; border: 1px solid #fff; padding: 20px 25px; margin: 30px auto; box-sizing: border-box;}
#page .summary p{color: #e7bc41; font-size: 16px; line-height: 24px; letter-spacing: 1.2px;}
#page .summary .text::before,#page .summary .text::after{content: '"';}
#page .summary .name{text-align: right;}
#page .summary .name::before{content: "-";}
#page .date{width: 80%; color: #e7bc41; font-size: 14px; text-align: right; border-top: 1px solid #e7bc41; margin: 0 auto; padding-top: 10px;}
#page .content-text{width: 85%; margin: 0 auto; padding-top: 30px; position: relative;}
#page .content-text::before{content: ""; width: 30px; height: 30px; background: url('../images/page_icon1.png') center / 80% auto no-repeat; display: block; position: absolute; top: 0; right: 100%;}
#page .content-text::after{content: ""; width: 30px; height: 30px; background: url('../images/page_icon2.png') center / 100% auto no-repeat; display: block; position: absolute; bottom: 0; left: 100%;}
#page .content-text p{color: #fff; font-size: 16px; line-height: 24px;}

/* 編輯器
.editor img{max-width: 100%; height: auto; display: block; margin-top: 20px;}
.editor p{font-size: 16px; line-height: 24px; letter-spacing: 1px; margin-top: 20px;}
.editor h1,.editor h2,.editor h3,.editor h4,.editor h5,.editor h6{font-weight: bold; letter-spacing: 1px; margin-top: 20px;}
.editor h1{font-size: 36px; line-height: 48px;}
.editor h2{font-size: 33px; line-height: 44px;}
.editor h3{font-size: 30px; line-height: 38px;}
.editor h4{font-size: 26px; line-height: 33px;}
.editor h5{font-size: 22px; line-height: 28px;}
.editor h6{font-size: 20px; line-height: 20px;}
.editor a{color: #fff; font-size: 16px; line-height: 24px; margin-top: 20px;}
 */

/* contact */
#contact-us{padding-top: 70px;}
#contact-us .wrap{max-width: 600px; width: 90%; padding: 50px 0; margin: 0 auto;}
#contact-us .contact-title{text-align: center; padding: 20px 0;}
#contact-us .contact-title h2{color: #fff; font-size: 30px; line-height: 40px; font-weight: lighter; display: inline-block; border-bottom: 1px solid #e7bc41; padding: 0 15px 10px 20px ; margin: 0 auto; position: relative;}
#contact-us .contact-title h2::before{content: ""; width: 20px; height: 20px; background: url('../images/page_icon1.png') center / 100% auto no-repeat; display: block; position: absolute; left: 0; top: -15px;}
#contact-us .form{border-bottom: 1px solid #e7bc41; box-sizing: border-box; padding: 0 40px 40px 40px; margin: 0 auto; position: relative;}
#contact-us .form::before,#contact-us .form::after{content: ""; width: 30px; height: 30px; background: #000 url('../images/page_icon2.png') center / 100% auto no-repeat; display: block; position: absolute;}
#contact-us .form::before{top: -20px; left: 0;}
#contact-us .form::after{bottom: -1px; right: 0;}
#contact-us .form li{margin-top: 20px;}
#contact-us .form .label{color: #fff; font-size: 16px; margin-bottom: 10px;}
#contact-us .form .info{width: 80%;}
#contact-us .form .info input,#contact-us .form textarea{width: 100%; background: #111; color: #fff; border: 1px solid #fff; padding: 10px; box-sizing: border-box;}
#contact-us .form .message{width: 100%;}
#contact-us .form textarea{height: 200px;}
#contact-us .form .btn{width: 100%; display: flex; justify-content: center; margin-top: 50px;}
#contact-us .form .btn button{width: 150px; height: 40px; background: #999; color: #000; font-size: 16px; border: none;}

@media screen and (max-width:1180px){
    #page .page-title h3{font-size: 24px;}
}

@media screen and (max-width:1023px) {
    .img-list .list .link{width: 32%;} 
    .img-list .list .link:nth-child(4n){margin-right: auto;}
    .img-list .list .link:nth-child(3n){margin-right: 0;}   
}

@media screen and (max-width: 767px) {
    #about-us .member .list li{flex-direction: unset; flex-wrap: wrap; justify-content: space-between; padding-left: 0;}
    #about-us .member .list li:nth-child(1) .img::after{display: none;}
    #about-us .member .list li .img{width: 45%; position: static;}
    #about-us .member .list li .name{width: 50%; display: flex; flex-direction: column; justify-content: center; }
    #about-us .member .list li .name .job-title{color: #fff; font-size: 14px; font-weight: normal; display: block; margin-bottom: 10px;}

    #news-page.img-list .list .link{width: 100%; margin-right: 0; padding: 10px 0; display: flex; justify-content: space-between; align-items: center;}
    #news-page.img-list .list .link img{width: 40%;}
    #news-page.img-list .list .link .text{width: 58%;}
    #news-page.img-list .list .link .text .date{position: static;}
    #news-page.img-list .list .link .text .title{-webkit-box; -webkit-line-clamp: 3;}

    #page .summary{width: 80%;}
}

@media screen and (max-width: 630px) {
    #collection.img-list .list .link{width: 49%;}
    #collection.img-list .list .link:nth-child(3n){margin-right: auto;}
    #collection.img-list .list .link:nth-child(even){margin-right: 0;}
    
    #contact-us .wrap{padding-bottom: 0;}
    #contact-us .form{border-bottom: none;}
    #contact-us .form .info{width: 100%;}
}

@media screen and (max-width: 479px) {
    footer .footer-info li span{display: block; padding-left: 0; margin-left: 0; margin-top: 15px; border: none;}    
}