/* header */
header #cis { position: absolute; top: 5vw; left: 0; z-index: 900; }
header #cis a { margin: auto; }
header #menubtn { width: 10vw; height: 10vw; }

/* hSearch */
#hSearch { top: 0; }

/* wrap */
#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0 2vw; }
section>* { z-index: 3; }
section .title_box h2 { padding: 2px 5px; font-size: 28px; border: var(--secondary) solid; border-width: 0 1px; z-index: 20; right: 20px; bottom: 30px; }

/* about_area */
#about_area .title h2 { font-size: 30px; }
#about_area .info article { line-height: 200%; letter-spacing: .5em; font-size: 18px; }
#about_area { position: relative; }
#about_area .eside_picture01 { position: absolute; left: 5%; width: 220px; bottom: 0; -webkit-animation: rataeab 4s infinite; animation: rataeab 4s infinite; -webkit-filter: drop-shadow(6px 5px 7px rgb(190 190 190 / 60%)); filter: drop-shadow(6px 5px 7px rgb(190 190 190 / 60%)); }
#about_area .eside_picture02 { position: absolute; right: 5%; width: 200px; bottom: 0; -webkit-animation: rataeab2 4s infinite; animation: rataeab2 4s infinite; -webkit-filter: drop-shadow(6px 5px 7px rgb(190 190 190 / 60%)); filter: drop-shadow(6px 5px 7px rgb(190 190 190 / 60%)); }

@-webkit-keyframes rataeab { 0% { -webkit-transform: rotate(0); } 25% { -webkit-transform: rotate(7deg); } 75% { -webkit-transform: rotate(-7deg); } }
@keyframes rataeab { 0% { transform: rotate(0); } 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } }
@-webkit-keyframes rataeab2 { 0% { -webkit-transform: rotate(0); } 25% { -webkit-transform: rotate(-7deg); } 75% { -webkit-transform: rotate(7deg); } }
@keyframes rataeab2 { 0% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

/*freebox*/
#freebox { position: relative; padding-bottom: 0; background: no-repeat 0 bottom / auto 70%; padding-top: 8vw; }
#freebox:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url(/images/freeboxbg.webp); background-repeat: no-repeat; z-index: -1; bottom: -27vw; }
#freebox .img_box { margin: 0 0 5vw 10vw; border-bottom-left-radius: 200px; }
#freebox .img_box img { height: 60vw; }
#freebox .illustrate p { position: relative; display: flex; font-size: 16px; color: #6e6e6e; font-weight: 300; }
#freebox .Ainfo_box { position: absolute; width: calc(41% - 40px); right: 0%; z-index: 9; bottom: -80px; padding: 40px; padding-right: 5%; background: white; }
#freebox .Atext_box { display: flex; }
#freebox .illustrate { width: calc(98% - 68px); display: flex; margin-top: 20px; padding: 0 2%; }
#freebox .title_box { width: 68px; display: flex; flex-direction: column; order: 2; }

/* product_area */
#product_area { padding-bottom: 0; background: no-repeat 0 bottom / auto 70%; width: 1700px; max-width: 95%; margin: 0 auto; }
section#product_area .title_box { display: flex; margin-bottom: 4vw; flex-direction: column; align-items: center; }
#product_area #product_list { margin-bottom: 50px; }
section#product_area .title_box h2 { position: relative; border: unset; border-top: var(--secondary) 1px solid; border-bottom: var(--secondary) 1px solid; right: unset; bottom: unset; }
#product_area .img_box { margin: 0 0 5vw 10vw; display: inline-block; vertical-align: top; text-align: center; position: relative; height: 100%; -webkit-box-shadow: 0px 5px 15px 0px rgb(128 128 128 / 0%); box-shadow: 0px 5px 15px 0px rgb(128 128 128 / 0%); margin: 10px 10px 15px; background: #fff; border-radius: 300px 300px 0px 0px; filter: drop-shadow(2px 4px 6px #ddd); overflow: hidden; border-bottom: 0px; }
#product_area .img_box img { height: 60vw; }
#product_area .info { position: relative; padding: 0 5px; width: 100%; height: 190px; box-sizing: border-box; z-index: 10; right: 0; bottom: 0; justify-content: space-between; align-items: flex-end; }
#product_area .info>div { margin: auto; width: 100%; }
#product_area .info h3 { height: 37px; font-size: 22px; }
#product_area .info article { margin: 10px 0 20px; font-size: 15px; height: 51px; -webkit-line-clamp: 2; }
#product_area .info p { margin-right: 10px; font-weight: 300; }
#product_area .info p:first-letter { margin-right: 2px; font-size: 12px; }
#product_area .info .price_box { height: 28px; }

/* news_area */
#news_area>div { padding: 7% 0 0 5%; justify-content: space-between; }
#news_area .bg_box { width: 750px; height: 550px; border-top-right-radius: 200px; top: 0; left: 0; opacity: .3; background-image: url(/images/freeboxbg.webp); }
#news_area .title_box h2 { margin-bottom: 50px; }
#news_list { margin-left: 5vw; padding: 6vw 0 6vw 6vw; box-sizing: border-box; flex: 1; }
#news_list ul { border-top: 1px rgba(var(--secondary-rgb), .6) solid; }
#news_list ul li>div { padding: 0 30px; border-bottom: 1px rgba(var(--secondary-rgb), .2) solid; }
#news_list ul li .time { margin-right: 30px; width: 80px; font-size: 14px; }
#news_list ul li h3 { margin: 30px 0; width: calc(100% - 110px); }

/* book_area */
#book_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

section#book_area .title_box { display: flex; margin-bottom: 4vw; flex-direction: column; align-items: center; }
section#book_area .title_box h2 { position: relative; border: unset; border-top: var(--secondary) 1px solid; border-bottom: var(--secondary) 1px solid; right: unset; bottom: unset; }

/* Loading動畫的樣式 */
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255);  display: flex; justify-content: center; align-items: center; z-index: 1000;  }
.lds-ring { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px; border: 6px solid #d39a9f; border-radius: 50%; -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #d39a9f transparent transparent transparent; }
@-webkit-keyframes lds-ring { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media screen and (min-width:1281px) {
	header #cis { height: 16vw; display: flex; top: auto; bottom: 0; }
	header #webmenu { position: absolute; top: 1vw; width: 96%; display: flex; justify-content: space-between; padding: 0 2%; }
	header #webmenu nav { display: flex; align-items: center; }
}
@media screen and (min-width:1025px) {
	#about_area .about_wrap { width: 100%; flex-direction: row-reverse; justify-content: center; }
	#about_area .title { margin: 0 20px; align-items: flex-start; flex-direction: row-reverse; }
	#about_area .info article { height: 300px; line-height: 3em; }
	#product_area .img_box { margin-left: 5px; }
	#product_area .img_box img { height: 400px; }
	#freebox .img_box { margin-left: 13.33333%; }
	#freebox .img_box img { height: 45vw; }
	#news_list { margin-left: 180px; padding: 75px; }
}
@media screen and (max-width:1460px) {
	#freebox:before { bottom: -15vw; }
	#product_area .img_box img { height: 295px; }
}
@media screen and (max-width:1280px) {
	#about_area .about_wrap { display: flex; flex-direction: column; align-items: flex-start; }
	#about_area .title { margin: 0 0 13px; }
	#about_area .eside_picture01 { bottom: -60px; left: 3%; width: 149px; }
	#about_area .eside_picture02 { bottom: auto; top: -56px; width: 130px; }
}
@media screen and (max-width:1024px) {
	section .title_box h2 { padding: 2px; border-width: 1px 0; right: 15px; bottom: 15px; }
	#about_area .info { margin: 30px auto 0; width: 80%; }
}
@media screen and (max-width:980px) {
	#freebox .Atext_box { flex-direction: column; }
	#freebox .title_box { width: 100%; order: 0; }
	#freebox .illustrate { width: calc(98% - 0px); }
	#product_area .img_box { border-bottom-left-radius: 0; }
	#product_area .info { margin-top: 0; padding: 6px; width: 100%; }
	#product_area .info article { height: 50px; -webkit-line-clamp: 2; }
	#news_area .bg_box { width: 100%; height: 70%; }
	#news_list { margin: 6vw 0 0 0; }
	#freebox .Ainfo_box { position: relative; width: calc(100% - 40px); padding-right: 0%; padding: 40px 20px; bottom: 0; }
	#product_area .img_box img { height: 270px; }
	#freebox .img_box { border-bottom-left-radius: 100px; }
}
@media screen and (min-width:641px) {
	header #cis { width: 100%; }
}
@media screen and (max-width:640px) {
	header #cis { top: 15px; left: 4%; }
	header #menubtn { width: 65px; height: 65px; }
	#news_list ul li>div { padding: 10px; }
	#news_list ul li .time { font-weight: 100; font-size: 12px; }
	#news_list ul li h3 { margin: 0; width: 100%; }
}
@media screen and (max-width: 480px) {
	#book_area li .row { margin: auto; width: 250px; }
}