html {  scroll-behavior: smooth;}

/*---漢堡選單----*/
.sidenav {  height: 100%; width: 0;  position: fixed;  z-index:9999;  top: 0;  right: 0;  background-color:#2b2b2b;  overflow-x: hidden;  transition: 0.5s;  padding-top: 60px;}
.sidenav a {  padding: 8px 8px 10px 30px;  text-decoration: none;  font-size: 20px;  color:#fff;  display: block;  transition: 0.3s;}
.sidenav a:hover {color:#f8c9b9;}
.sidenav .closebtn {  position: absolute;  top: 0;  right: 25px;  font-size: 36px;  margin-left: 50px;}

#hambger {  display:none;  transition: margin-right .5s;  padding:10px;  box-sizing: border-box;  position: absolute;   z-index: 99;  right:0px;  color: #000;  top:-5px;}

.mobile_bottom_fix{display: block; width: 100%; background-color: #000;height: 50px;text-align:center; }
.mobile_bottom_fix a{color: #fff;display: inline-block; padding:15px;text-decoration: none; }


body{position: relative;}
.curation_wapper{display: block;width: 100%; background-color:#fdf4eb;position: relative;line-height: 1.6em;overflow: hidden;}
.curation_visual{display: block;position: relative;max-width:1100px;height:550px; margin: 0 auto;}
.curation_visual>div{position: absolute;    }
.curation_desc img{width: 100%;}

.curation_bg{animation: bounceInRight 1s;animation-delay: 0s; animation-fill-mode: backwards;}
.curation_sofa{animation: bounceInUp 1s;animation-delay: .5s; animation-fill-mode: backwards;left:-50px;}
.curation_desc{animation: bounceInDown 1s;animation-delay: 1s;  animation-fill-mode: backwards;top:45px;left:210px;}

.trendlogo {display: block;position: absolute;top: 10px;left: 10px;z-index: 99;}
.share {display: inline-block;position: absolute;left: 120px;top: 15px;z-index: 99;}
.curation_nav{ display:block;width: 100px;background-color: #2b2b2b;border-radius: 5px;position: fixed;text-align: center;right:20px;top: 10px;z-index: 10;}
.curation_nav:after{display:block;content:"";width: 0; height: 0; border-style: solid; border-width:12px;  border-color:  #2b2b2b transparent transparent transparent;position: absolute;left: 0; margin:auto;right: 0; z-index: 9;}
.curation_nav ul li{ border-bottom: 1px solid #fdf4eb;}
.curation_nav ul li:last-child{border-bottom:0;}
.curation_nav ul li a{display: block; color: #fff; width: 100px; height:45px;line-height: 45px;overflow: hidden;}
.curation_nav ul li a:hover{background-color:#f8c9b9;}
.curation_nav ul li a.exam_link{color:#f8c9b9; }
.curation_nav ul li a.top_link{color:#a5c7c3; }
.curation_nav ul li:hover a.exam_link{background-color:#f8c9b9;color: #2b2b2b;  }
.curation_nav ul li:hover a.top_link{background-color:#a5c7c3;color: #2b2b2b; }

.container{display: block; width: 100%;margin: 0 auto;width: 100%; position:relative;}
section.chapter01 , section.chapter02{display: block;background-image: url(/images/project_img/bg01.gif);background-size:auto;}
section.chapter03{display: block;background-image: url(/images/project_img/24733057.jpg);background-size:auto;}
section.chapter04{display: block;background-image: url(/images/project_img/bg02.gif);background-size:auto;}
section h2{display: block; width: 226px; height:105px; margin: 0 auto;}
section.chapter01 h2{background-image: url(/images/project_img/chpater01.png);}
section.chapter02 h2{background-image: url(/images/project_img/chpater02.png);}
section.chapter03 h2{background-image: url(/images/project_img/chpater03.png);}
section.chapter04 h2{background-image: url(/images/project_img/chpater04.png);}
.chapter_container{display: block; max-width:1200px; margin: 0 auto;padding:80px 0px;}

.square_title{display: block; width:175px; height: 90px;font-size: 1.25em; font-weight: 600;position: relative;margin-bottom: 20px;}
.square_title_one{background-image: url(/images/project_img/square_icon.png);}
.square_title_two{background-image: url(/images/project_img/square_icon_02.png);}
.square_title_three{background-image: url(/images/project_img/square_icon_03.png);}
.square_title_one i , .square_title_two i , .square_title_three i{position:absolute;color: #fff;top:20px;right:18px;}
.square_slider{display: flex; justify-content:space-between;margin-top:50px;flex-wrap: wrap;}
.square_slider>div{display: block; width: 30%;position: relative;}
.slider_project_img {display: block;width: 100%;height: 0;padding-bottom:66.6%;position: relative; }
.slider_project_img a{display: block;width: 100%;height: 0;padding-bottom:66.6%;overflow: hidden;position: absolute;}
.slider_project_img img{display: block;max-width: 100%; max-height: 100%;position: absolute;top: 0;right: 0;left: 0;margin: auto;}

.square_page_nav{ display: block;width: 100%;text-align:end;margin: 10px 0; box-sizing: border-box;}
.square_page_nav a{display:inline-block; width: 27px; height: 27px; border-radius: 50%;background-color: #fff;line-height: 27px; color: #000; text-align: center; border:1px solid #000;font-weight:600;margin-left:10px;font-size: 14px;}
.square_page_nav a:hover{background-color: #000;color: #fff;}
.slider_project_desc{display: block;width: 100%; background-color: #fff; box-sizing: border-box; padding: 20px;border:5px solid #000;font-weight:500; }
.slider_project_desc h3{display: block; font-size: 30px;text-align: center;margin-bottom: 10px;font-weight:600;}
.slider_project_desc strong{display: block;font-size: 22px;text-align: center;margin-bottom: 10px;font-weight:600;}
.slider_project_desc em{display: block;padding: 5px 0;text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000;margin-bottom: 10px;}
.slider_project_desc h4 , .room_slider h5{display: block; font-size:20px;margin-top:15px;margin-bottom:5px;}
.slider_project_desc span , .room_slider span{font-size: 14px; background-color: #000;border-radius:10px;padding:0px 10px;color: #fff;font-style: italic;}

.room_slider{display: flex; justify-content:space-between;margin-top:50px;flex-wrap: wrap;}
.room_slider>div{display: block; width: 30%;position: relative;background-color: #fff;border-radius:200px;padding: 80px 20px 50px 20px;box-sizing: border-box;background: linear-gradient(to bottom, rgba(0,0,0,1) 35%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 93%); }
.room_slider .slider_project_img {width:100%; overflow: hidden;}
.room_slider .slider_project_img a{width:100%; overflow: hidden;}
.room_slider_desc{display:block;font-weight: 500;margin-bottom:50px;}
.room_slider h3{display: block; color: #f8cfbd;font-size:1.87em;font-weight: 600;text-align: center;}
.room_slider h4{display: block; text-align: center;color: #fff;margin-top:10px;margin-bottom:10px;font-size: 22px;font-weight: 600;height:55px; }
.room_slider strong{display: block;text-align: center;font-weight: 600;padding:5px;margin-top: 20px; border-top: 1px solid #000; border-bottom:1px solid #000; }
.room_slider .square_page_nav{text-align: center;position: relative;}

section.chapter03 h2+p{ display: block; width:70%;margin: 0 auto;margin-top: 20px;}
section.chapter03 h2+p span{ color:#e25264;font-weight: 500;}
.chapter03 .chapter_container{ display: block; background-color:#fdf4eb; }
.Key_point{display: flex; max-width: 1000px;margin: 0 auto;padding:0 20px;box-sizing: border-box;flex-wrap: wrap;}
.point_items{margin-bottom: 80px;position:relative;}
.summary{display:flex; background-color: #1b7168; box-sizing: border-box; padding:30px 20px;border-radius:10px;color: #fff;position: relative;margin-top: 50px;}
.summary em{display: block; width:100px; height:100px;background-color:#f8c9b9;border-radius: 100%;position: absolute; top: 0; bottom: 0;margin: auto;left: -50px; border:3px solid  #1b7168;text-align: center;}
.summary em span{display: block; width:75px; height:75px;border-radius: 100%;background-color: #fdf4eb;margin: 0 auto;line-height:75px;color: #000;font-weight: 600;font-size:14px;margin-top: 3px;}
.summmary_desc{display: block;width: 100%;margin-left:50px;padding-left:30px; border-left:1px solid #fff;}
.summmary_desc h3{display: block; font-size: 22px; font-weight: 600;margin-bottom:10px; }
.summary a{display:block;color:#edcf70;text-decoration: underline;text-align: end;}

.floor_plan_example{display: block;max-width: 1000px; height:0;padding-bottom: 90%;background-size: contain;margin-top:50px;position: relative;}
.floor_plan_example_one{background-image:url(/images/project_img/01.jpg);}

.floor_plan_link{display: inline-block;}
.floor_plan_link a{display:inline-block; width: 50px; height:50px; text-align: center;line-height:50px;border: 5px solid #f091a0;border-radius: 100%;background-color:#fdf4eb;font-size: 20px; }
.floor_plan_link a span{display: block; width: 40px; height: 40px; line-height: 40px;border-radius: 100%; border: 5px solid #f8cfbd;color: #000;font-weight: 500;}
.floor_plan_link a.visited{background-color: #c5c5c5;border: 5px solid #a8a8a8;}
.floor_plan_link a.visited span {border: 5px solid #c5c5c5;color: #fff;}
.floor_plan_link a{ position: absolute;}
.floor_plan_example_one .floor_plan_link a#m1_01{top:20%;left:50%;}
.floor_plan_example_one .floor_plan_link a#m1_02{top:20%;right: 20%;}
.floor_plan_example_one .floor_plan_link a#m1_03{top:38%;right:14%;}

.floor_plan_example_two{background-image:url(/images/project_img/02.jpg);}
.floor_plan_example_two .floor_plan_link a#m2_01{top:25%;left:10%;}
.floor_plan_example_two .floor_plan_link a#m2_02{top:22%;right:37%;}
.floor_plan_example_two .floor_plan_link a#m2_03{bottom:0%;left:38%;}

.floor_plan_example_three{background-image:url(/images/project_img/03.jpg);}
.floor_plan_example_three .floor_plan_link a#m3_01{top:40%;left:25%;}
.floor_plan_example_three .floor_plan_link a#m3_02{top:25%;right:20%;}
.floor_plan_example_three .floor_plan_link a#m3_03{top:40%;right:33%;}

/*popup*/
.popup_info{display:block; max-width: 370px;background-color: #fdf4eb;  box-sizing: border-box;border:3px solid #000;border-radius: 10px;overflow: hidden;position: absolute;top:30%;right: 0;left: 0;margin: auto;z-index: 99;}
.popup_nav{display: flex; height: 40px; background-color: #f091a0;padding: 8px; box-sizing: border-box;line-height: 40px;}
.popup_nav span{display: block; width:15px; height:15px; border-radius: 100%;background-color: #fdf4eb;margin: 5px;}
.popup_nav a{display: block; width:25px; height:25px;position: absolute;right: 5px;top:5px;}
.popup_info .popup_img{display: block;max-width:320px; height:auto;overflow: hidden;margin: 0 auto;margin-top: 20px;padding:0 20px;}
.popup_img a{display: block;}
.popup_img a img{width: 100%; }
.pupup_desc{display:flex;flex-wrap: wrap;max-width: 320px;margin: 0 auto;margin-top:10px;margin-bottom:15px;padding:0 10px;}
.pupup_desc em{display:block;font-size: 60px;font-family: sans-serif;position: relative;top:10px;color: #c0b8af;font-weight:600;}


.box{display: block; margin-bottom:180px;margin-top:100px;}
.gallery{display: block; max-width:800px; margin: 0 auto;position: relative;}
.outer_frame{border:5px solid #000;width:100%;height: 0;padding-bottom:66.6%;margin: 0 auto;position: relative;box-sizing: border-box;}
.outer_frame:before{display: block; content: ""; width: 200px; height: 50px; background-image: url(/images/project_img/border.png);position: absolute;left: 0;right: 0; margin: auto;top: -60px;}
.inner_frame{border:1px solid #000;width:97.5%;height: 0;padding-bottom:65%;background-color: #fff;position: relative;margin: 0 auto;margin-top:1%;}
.space_color_img a{display: block;width: 100%;height: 0;padding-bottom:66.6%;overflow: hidden;position: absolute;}
.space_color_img a img{display: block;max-width: 100%; max-height: 100%;position: absolute;top: 0;right: 0;left: 0;margin: auto;}
.space_color_img{ display: block;width:97%;height: 0;padding-bottom:66.6%; position: relative;margin: 0 auto;overflow: hidden;margin-top:1%;}
.frame_info{display: flex;justify-content:space-between;flex-wrap: wrap;}
.frame_info p{display: inline-block;font-size: 22px;font-weight: 500; margin-top: 15px;}
.frame_info .square_page_nav{width:50%;}
.gallery_arrow{display: block;width:50px; height:55px;position: absolute;background-size: contain; background-repeat: no-repeat;box-shadow: 0;z-index: 99;left: 0; right: 0; top: 0; bottom: 0;margin: auto;}
.gallery_arrow.pre{background-image: url(/images/2024/arrow-pre.svg);left: -110%;}
.gallery_arrow.next{background-image: url(/images/2024/arrow-next.svg);right:-112%;}


.about_color_info{display: flex;border:1px solid #000; background-color: #fff;box-sizing: border-box;position: relative;margin-top: 100px;justify-content: space-between; box-sizing: border-box;flex-wrap: wrap;}
.about_color_info h3{display: block;width: 185px; height: 100px; background-image: url(/images/project_img/book_icon.png);position:absolute;left: 0; right: 0; margin: auto; top:-60px;color: #fff;font-size: 20px;line-height: 100px;text-align: center;}
.about_color_info h3 span{display: inline-block;margin: 0 15px;font-weight: 500;}
.about_color_info div{width:48%;padding:50px 30px 30px 30px; box-sizing: border-box;}

.color_wiki{display:block;}
.about_color_info strong{display: block;width: 80px; height: 150px;background-image: url(/images/project_img/Encyclopedia_icon.png);background-repeat: no-repeat;float: left;font-size: 22px;font-weight:600; text-align: center;background-position: bottom center;}

.color_feature strong{background-image: url(/images/project_img/feature_icon.png);margin-right: 20px;}
.about_color_info .line{display: block; width: 1px;height:254px;background-color: #000; }
.about_color_info a{color:#e25264;display: block;text-align: end;text-decoration: underline;}
.color_feature ul{ list-style-type: decimal;list-style-position:outside;}
.color_feature ul li{ margin-bottom: 8px;}
.team {display: block;text-align: center;margin-top: 0px;padding: 10px;}

.sidebar.gamelink{display:inline-block;position:fixed;top:500px;right:14%;z-index:98;}
@media (max-width:900px) {  
.sidebar.gamelink{display:inline-block;position:fixed;top:300px;right:0;z-index:98;}
}


@media (max-width:900px) {
	
	.popup_info{display:block; max-width: 370px;background-color: #fdf4eb;  box-sizing: border-box;border:3px solid #000;border-radius: 10px;overflow: hidden;position: relative;top:30%;right: 0;left: 0;margin: auto;z-index: 99;}
}

@media (min-width:320px) and (max-width:1024px) {  
	
	section{padding: 0 20px;}	
	#hambger {display:block;}
	.curation_nav{display: none;}
	.curation_visual{height:0;padding-bottom:50%;}
	.curation_sofa img , .curation_bg img{ width: 100%;}
	.curation_desc img{width: auto;}
	.curation_sofa{left: 0;right: 0; margin: auto;}
	.curation_bg{left: 0;right: 0; margin: auto;}
	
}

@media (min-width:320px) and (max-width:980px) { 

.curation_desc{left:20px;right: 0; margin: auto;}
	.gallery{max-width:600px;}	
	.square_slider , .room_slider{justify-content: center;}
	.square_slider>div , .room_slider>div{width:80%;margin-bottom:70px;}
	.summary em{left: -20px;}
    
}

@media (min-width:320px) and (max-width:820px) { 
  .curation_desc{top:20px;}
  .curation_desc img{width:100%;}
  .summary{width: 90%; margin: 50px auto;}
  .about_color_info div{width: 100%;}
  .about_color_info .line{width: 100%;height:1px;}	
}

@media (min-width:320px) and (max-width:640px) {
	
	.gallery{max-width:100vw;}	
}

@media (min-width:320px) and (max-width:480px) {
	.chapter_container{padding: 80px 0 0 0 ;}
	.gallery{max-width:400px;}	
	.frame_info p{font-size: 18px;}
	.frame_info .square_page_nav{width: 50%;}
	.floor_plan_link a{width:35px; height: 35px;font-size: 16px;}
	.floor_plan_link a span{width:25px; height:25px; line-height:25px;}
	.summmary_desc{margin-left: 0;margin-top:50px;}
	.summary em{top:-100%;bottom: 0;left: 0;right: 0;    margin: auto;}
	.frame_info .square_page_nav{width: 100%;text-align: center;}
	.frame_info{justify-content: center;}
}

@media (min-width:320px) and (max-width:430px) {
	.trendlogo{display: none;}
	.share {left:10px;display: grid;}
	.gallery{max-width:400px;}
	.gallery_arrow.pre , .gallery_arrow.next{display: none}
	.Key_point{margin-top: 50px;}
		.share .line_base {
		float: left;
	}

	.fb_base {
		float: left;
		margin-left: 6px;
		display: contents;
	}

		.fb_base #fb_like {
			margin-left: -16px;
			margin-top: 10px;
		}
}

@media (min-width:320px) and (max-width:375px) {
		.pupup_desc em{font-size:40px;}
}


@media (min-width:320px) and (max-width:320px) {
	.popup_info .popup_img , .pupup_desc{padding: 0 10px;}
}