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

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&family=Cormorant+Garamond:wght@600;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@600;700&display=swap');
/*font-family: 'Almarai', sans-serif;
font-family: 'Cormorant Garamond', serif;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;*/

/* ---------- 共用區 ---------- */
h1 {padding-left:90px; font-size:40px; text-align:left; margin:150px auto 50px auto; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:600;}
h1 span {display:block; font-size:26px; font-family: 'Cormorant Garamond', serif; color:#8f2b29; font-weight:700;}
h2 {font-size:70px; font-family: 'Cormorant Garamond', serif; font-weight:700; color:#D6D1CB;}
.text_con {display:block; width:calc(100vw - 20vw); margin:50px auto 100px auto;}
.text_con p {font-size:18px; line-height:30px; margin-bottom:20px; text-align:justify;}

.cleardiv {clear:both;}


/* ---------- section a ---------- */
.sec_a {position:relative; padding-bottom:60px;}
.sec_a h2 {margin-bottom:-20px; text-align:right;}
.sec_a .pic_grid {position:relative;
    display:grid;
    grid-template-columns: 10vw auto 10vw;
    grid-template-rows: auto auto;
}
.sec_a .room {grid-column:2/4; grid-row:1/2; height:350px; background:url(../images/about/about_1.jpg) center no-repeat; background-size:cover;}

.sec_a .logo_circle_up {display:block; width:15vw; height:15vw; position:absolute; right:0px; bottom:-7.5vw; z-index:5; opacity:0;}
.sec_a .logo_circle_up img {position:absolute; top:0; left:0; width:100%;}


/* ---------- section b ---------- */
.sec_b {position:relative; background:url(../images/bg_d.jpg) center no-repeat; background-size:cover; background-attachment:fixed; box-sizing:border-box; padding:50px 0px 0px 0px; opacity:0;}
.sec_b h2 {position:absolute; top:-66px; left:0}
.sec_b .text_con p {color:white;}
.sec_b .pic_grid {position:relative; transform:translateY(50%); margin-top:-200px; margin-bottom:200px;
    display:grid;
    grid-template-columns: 10vw auto 10vw;
    grid-template-rows: auto auto;
}
.sec_b .photo {grid-column:1/3; grid-row:1/2; position:relative; display:flex; flex-wrap:nowrap;}
.sec_b .photo img {width:calc(100% / 3); height:auto;}

.sec_b .pic_grid_mb {display:none;}

/* .sec_b .logo_circle {display:block; width:15vw; max-width:200px; height:15vw; max-height:200px; position:absolute; right:0px; z-index:5;}
.sec_b .logo_circle img {position:absolute; top:0; left:0; width:100%;} */
.sec_b .logo_circle_dn {display:block; width:15vw; height:15vw; position:absolute; right:0px; top:-7.5vw; z-index:5;}
.sec_b .logo_circle_dn img {position:absolute; top:0; left:0; width:100%;}


/* ---------- section c ---------- */
.sec_c {margin-top:300px; opacity:0;}
.sec_c h2 {text-align:right;}


.dn_pic {display:flex; flex-wrap:nowrap; margin-bottom:-50px; opacity:0;}
.dn_pic img {flex:1; width:50%; height:auto;}



@media screen and (max-width:820px) {
	
	h1 {padding-left:5%; font-size:30px; margin:100px auto 30px auto;}
	h2 {font-size:30px;}
	
	.sec_a {margin-bottom:60px;}
	.sec_a h2 {margin-bottom:0px;}
	.sec_a .room {height:200px;}
	.sec_a .logo_circle_up {bottom:calc(-7.5vw - 60px);}
	
	.text_con {margin:30px auto;}
	.text_con p {font-size:15px; line-height:24px; margin-bottom:10px; text-align:left;}
	
	.sec_b {padding:20px 0px 0px 0px;}
	.sec_b h2 {top:-30px;}
	
	.sec_b .pic_grid {display:none;}
	.sec_b .pic_grid_mb {display:block;}
	.sec_b .pic_grid_mb img {width:100%;}

	.sec_c {margin-top:30px;}
	.dn_pic {flex-wrap:wrap;}
	.dn_pic img {width:100%;}

}