#wrap { z-index: 5; }
/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .emtitle_box { font-style: unset; font-size: 22px; display: block; font-weight: 700; color: var(--primary); text-transform: capitalize; }
section .title_box { padding-bottom: 1.5vw; font-size: 37px; font-weight: 500; }
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
section .btnBox { position: relative }
section .btnBox .more_btn { display: inline-block; z-index: 2; position: relative; text-align: center; width: 230px; padding: 25px 10px; border-radius: 39.5px; font-weight: bold; font-size: 18px; line-height: 1; letter-spacing: 0; background-color: var(--complement); color: #fff; overflow: hidden; border: 2px solid var(--complement) }
section .btnBox .more_btn span { display: block; width: 7px; height: 7px; z-index: -1; position: absolute; top: 50%; right: 13%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
section .btnBox .more_btn span:before,section .btnBox .more_btn span:after { content: ""; border-radius: 50%; background-color: #fff; position: absolute; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in }
section .btnBox .more_btn span:before { width: 29px; height: 29px; opacity: 0.2 }
section .btnBox .more_btn span:after { width: 7px; height: 7px }
section .btnBox .more_btn.out span:before { -webkit-animation: beforeToSm 0.7s 0.2s forwards; animation: beforeToSm 0.7s 0.2s forwards }
section .btnBox .more_btn.out span:after { -webkit-animation: afterToSm 0.7s forwards; animation: afterToSm 0.7s forwards }
section .btnBox .more_btn.in { color: var(--complement) }
section .btnBox .more_btn.in span:before { -webkit-animation: full 0.8s forwards; animation: full 0.8s forwards }
section .btnBox .more_btn.in span:after { -webkit-animation: full 0.8s 0.2s forwards; animation: full 0.8s 0.2s forwards; }
@keyframes afterToSm {
  0% { width: 550px; height: 500px; }
  100% { width: 7px; height: 7px; }
}
@keyframes full {
  100% { width: 550px; height: 500px; }
}
/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li { width: 210px; display: block; }
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }
/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center/100%;bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }
/* about_area */
#about_area .workframe { width: min(90%,1280px); display: grid; grid-template-columns: 38% 57%; justify-content: space-between; align-items: start; z-index: 10; position: relative; }
#about_area { z-index: 5; display: flex; align-items: center; justify-content: center; }
#about_area .pageh1 { font-size: 24px; line-height: 1.4; margin-bottom: 10px; font-weight: 500; }
#about_area .btnBox{text-align:end;}
#about_area article p { margin-bottom: 30px; line-height: 2.2; font-weight: 400; text-align: justify; }
#about_area article .photo { display: flex; flex-wrap: wrap; gap: 20px; }
#about_area article .photo img { width: 80px; }
#about_area .clip { border-radius: 30px; overflow: hidden; }
#about_area #about_img .clip img { aspect-ratio: 3/3.6; }
#about_area .rightboxx { display: flex; flex-direction: column; gap: 40px; margin-top: 50px; }
#about_area .rightboxx #about_img { width: 80% }
#about_area .rightboxx #about_img img { aspect-ratio: 5/3; }
#about_area .circleBox { width: 720px; height: 720px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; z-index: 6 }
#about_area .circleBox .dots1 { width: 30px; height: 30px; display: block; border-radius: 50%; background-color: var(--secondary); z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; -webkit-transform: rotate(0deg) translate(-360px) rotate(0deg); transform: rotate(0deg) translate(-360px) rotate(0deg); -webkit-animation: circleOuter 24s linear infinite; animation: circleOuter 24s linear infinite }
#about_area .circleBox .dots2 { width: 24px; height: 24px; display: block; border-radius: 50%; background-color: var(--secondary); z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; -webkit-transform: rotate(0deg) translate(-360px) rotate(0deg); transform: rotate(0deg) translate(-360px) rotate(0deg); -webkit-animation: circleOuter 24s 8s linear infinite; animation: circleOuter 24s 8s linear infinite }
#about_area .circleBox .dots3 { width: 15px; height: 15px; display: block; border-radius: 50%; background-color: var(--primary); z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; -webkit-transform: rotate(0deg) translate(-360px) rotate(0deg); transform: rotate(0deg) translate(-360px) rotate(0deg); -webkit-animation: circleOuter 24s 12s linear infinite; animation: circleOuter 24s 12s linear infinite }
#about_area .circleBox .dots4 { width: 29px; height: 29px; display: block; border-radius: 50%; background-color: var(--primary); z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; -webkit-transform: rotate(0deg) translate(-400px) rotate(0deg); transform: rotate(0deg) translate(-400px) rotate(0deg); -webkit-animation: circleOuter2 24s 16s linear infinite; animation: circleOuter2 24s 16s linear infinite }
#about_area .circleInnerBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative }
#about_area .circleInnerBox:after,#about_area .circleInnerBox:before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgb(237 237 237/80%); -webkit-transform-origin: center; transform-origin: center }
#about_area .circleInnerBox:before { width: 0; height: 0 }
.circleInnerBox.scale:before { -webkit-animation: scale_before 2s 0.2s linear forwards; animation: scale_before 2s 0.2s linear forwards }
#about_area .circleInnerBox:after { width: 0; height: 0 }
#about_area .circleInnerBox.scale:after { -webkit-animation: scale_after 2s linear forwards; animation: scale_after 2s linear forwards }
#about_area .circleBox .dots5 { width: 11px; height: 11px; display: block; border-radius: 50%; background-color: #006c4f; z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; -webkit-transform: rotate(0deg) translate(-360px) rotate(0deg); transform: rotate(0deg) translate(-360px) rotate(0deg); -webkit-animation: circleInner 22s linear infinite; animation: circleInner 22s linear infinite }
#about_area .circleBox .dots6 { width: 17px; height: 17px; display: block; border-radius: 50%; background-color: #006c4f; z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; -webkit-transform: rotate(0deg) translate(-360px) rotate(0deg); transform: rotate(0deg) translate(-360px) rotate(0deg); -webkit-animation: circleInner 22s 6s linear infinite; animation: circleInner 22s 6s linear infinite }
@keyframes circleOuter {
  0% { opacity: 1; -webkit-transform: rotate(0deg) translate(-360px) rotate(0deg); transform: rotate(0deg) translate(-360px) rotate(0deg); }
  100% { opacity: 1; -webkit-transform: rotate(360deg) translate(-360px) rotate(-360deg); transform: rotate(360deg) translate(-360px) rotate(-360deg); }
}
@keyframes scale_before {
  0% { width: 0; height: 0; }
  100% { width: 615px; height: 615px; }
}
@keyframes scale_after {
  0% { width: 0; height: 0; }
  100% { width: 720px; height: 720px; }
}
@keyframes circlelnner {
  0% { opacity: 1; -webkit-transform: rotate(0deg) translate(-307.5px) rotate(0deg); transform: rotate(0deg) translate(-307.5px) rotate(0deg); }
  100% { opacity: 1; -webkit-transform: rotate(360deg) translate(-307.5px) rotate(-360deg); transform: rotate(360deg) translate(-307.5px) rotate(-360deg); }
}
@keyframes circleOuter2 {
  0% { opacity: 1; -webkit-transform: rotate(0deg) translate(-400px) rotate(0deg); transform: rotate(0deg) translate(-400px) rotate(0deg); }
  100% { opacity: 1; -webkit-transform: rotate(360deg) translate(-400px) rotate(-360deg); transform: rotate(360deg) translate(-400px) rotate(-360deg); }
}
/* news_area */
#news_area { padding: 120px 5%; overflow: hidden; position: relative; background: linear-gradient(180deg,#ffffff,#e7e7e7,#ffffff); }
#news_area::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg,#ffffff 50%,rgba(255,255,255,0.85) 75%,rgba(255,255,255,0) 100%); z-index: 1; }
#news_area .workframe { width: min(1360px,90%); margin: 0 auto; display: flex; gap: 60px; position: relative; z-index: 2; align-items: flex-start; }
#news_area::after { position: absolute; inset: 0; content: ""; background-image: url(/images/44/dot_bg.png); background-repeat: repeat; background-position: 5px 2px; opacity: 0.08 }
#news_area .left-col { width: 30%; display: flex; flex-direction: column; position: relative; padding-top: 40px; }
#news_area .bg-pattern { position: absolute; top: -50px; left: -150px; width: 600px; height: 600px; background-image: repeating-radial-gradient(circle at 50% 50%,transparent 0,transparent 15px,rgba(26,139,140,0.04) 16px,rgba(26,139,140,0.04) 17px); z-index: -1; pointer-events: none; }
#news_area .title-group { display: flex; align-items: flex-start; gap: 5px; margin-bottom: 80px; position: relative; }
#news_area .bg-number { position: absolute; top: -30px; left: -20px; font-family: 'Noto Serif TC',serif; font-size: 100px; font-weight: 300; color: #f0f0f0; line-height: 1; z-index: -1; letter-spacing: -2px; }
#news_area .en-title { writing-mode: vertical-lr; transform: rotate(180deg); color: var(--primary); font-size: 13px; letter-spacing: 3px; font-weight: 500; }
#news_area .zh-title { writing-mode: vertical-lr; font-size: 36px; font-weight: 400; letter-spacing: 12px; color: #222; }
#news_area .category-links { display: flex; flex-direction: column; gap: 24px; border-left: 1px solid #e0e0e0; padding-left: 25px; margin-bottom: auto; }
#news_area .category-link { color: #666; font-size: 15px; transition: all 0.3s ease; position: relative; letter-spacing: 1px; cursor: pointer; }
#news_area .category-link:hover { color: #1a8b8c; }
#news_area .category-link.active { color: var(--primary); font-weight: 500; }
#news_area .category-link.active::before { content: ''; position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 3px; height: 100%; background: var(--primary); }
#news_area .action-group { display: flex; align-items: center; gap: 25px; margin-top: 60px; }
#news_area .arrowBox { display: flex; gap: 10px; }
#news_area .arrow { width: 42px; height: 42px; border: 1px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1); background: #fff; color: #666; }
#news_area .arrow:hover { border-color: #1a8b8c; color: #1a8b8c; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
#news_area .arrow::after { content: ''; border: solid currentColor; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; }
#news_area #news_prev::after { transform: rotate(-135deg); margin-top: 4px; }
#news_area #news_next::after { transform: rotate(45deg); margin-bottom: 4px; }
#news_area .right-col { width: 70%; position: relative; }
#news_area .right-col .btnBox { margin-top: 25px; display: flex; justify-content: flex-end; }
#news_area .list-card { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.04); padding: 40px 50px; border: 1px solid rgba(255,255,255,0.8); height: 100%; box-sizing: border-box; }
#news_area .list-item { display: flex !important; align-items: center; padding: 35px 0; border-bottom: 1px solid #f0f0f0; transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1); cursor: pointer; outline: none; position: relative; box-sizing: border-box; \: 1160px; min-height: unset; }
#news_area .list-item::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: #1a8b8c; transition: width 0.4s ease; }
#news_area .list-item:hover { transform: translateY(-5px); }
#news_area .list-item:hover::after { width: 100%; }
#news_area .list-item:last-child { border-bottom: none; }
#news_area .list-item:last-child::after { display: none; }
#news_area .date-box { display: flex; flex-direction: column; align-items: center; width: 90px; flex-shrink: 0; }
#news_area .date-box .day { font-size: 40px; color: #222; line-height: 1; margin-bottom: 6px; font-weight: 400; transition: color 0.3s; }
#news_area .list-item:hover .date-box .day { color: #1a8b8c; }
#news_area .date-box .ym { font-size: 13px; color: #999; letter-spacing: 1px; }
#news_area .content-box { flex-grow: 1; padding: 0 40px; min-width: 0; }
#news_area .tag { display: inline-block; background: #f4f4f4; color: #777; font-size: 12px; padding: 5px 12px; border-radius: 2px; margin-bottom: 12px; letter-spacing: 1px; transition: background 0.3s,color 0.3s; }
#news_area .list-item:hover .tag { background: rgba(26,139,140,0.1); color: #1a8b8c; }
#news_area .item-title { font-size: 17px; color: #333; line-height: 1.6; font-weight: 400; height: 60px; transition: color 0.3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
#news_area .list-item:hover .item-title { color: #1a8b8c; }
#news_area .icon-box { width: 40px; height: 40px; border: 1px solid #e5e5e5; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #ccc; transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1); font-weight: 300; font-size: 20px; }
#news_area .list-item:hover .icon-box { border-color: #1a8b8c; color: #fff; background: #1a8b8c; transform: rotate(90deg); }
#news_area .slick-list { margin: 0; padding: 0 !important; }
#news_area .slick-track { display: flex; flex-direction: column; }
/* book_area */
#book_area .booklist { margin-top: 20px }
#book_area .fixTxt { right: -3%; top: -10%; width: 270px; aspect-ratio: 1/1; z-index: 4; border-radius: 50%; overflow: hidden; }
#book_area .fixTxt:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: var(--complement); z-index: -1; }
#book_area .fixTxt img { aspect-ratio: 1/1; object-fit: cover; opacity: .15; }
#book_area li { margin: 0 30px }
#book_area li .img_box { border-radius: 35px; }
#book_area li .h3 { margin-top: 15px; height: auto; font-size: 20px; padding: 0 5%; font-weight: 500; }
#book_area .book_title_row { position: relative; display: flex; align-items: center; justify-content: center; }
#book_area .book_arrowBox {display: flex;gap: 10px;justify-content: flex-end;margin: 30px 30px 0;}
#book_area .book_arrow {width: 42px;height: 42px;border: 1px solid rgb(23 40 82 / 20%);border-radius: 50%;color: var(--primary);display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all .3s ease;}
#book_area .book_arrow:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
#book_area .book_arrow::after { content: ""; border: solid currentColor; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; }
#book_area #book_prev::after { transform: rotate(135deg); margin-left: 4px; }
#book_area #book_next::after { transform: rotate(-45deg); margin-right: 4px; }
/* photo_area */
#photo_area { display: flex; align-items: center; z-index: 4; }
#photo_area .bg { position: absolute; left: 0; top: 0; z-index: -3; width: 45%; height: 100%; background-image: url(/images/44/dotBg.png); filter: saturate(0%); opacity: .45 }
#photo_area:before,#photo_area:after {
  content:'';position:absolute;left:-25%;/* top:0;*/
  width:684px;height:100%;/* -webkit-transform:skewX(-13deg);*/
  -ms-transform:skewX(-13deg);/* transform:skewX(-13deg);*/
  width:auto;height:130%;aspect-ratio:1/1;border-radius:50%;
}
#photo_area:before { z-index: -1; background-image: url(/images/44/scholarshipBg.jpg); background-repeat: no-repeat; background-position: 10% 50%; background-size: cover; opacity: 0.1; filter: saturate(0%); }
#photo_area:after { z-index: -2; background-color: #043749 }
#photo_area .workframe { display: grid; grid-template-columns: 50% 45%; justify-content: space-between; width: min(90%,1260px); }
#photo_area .workframe iframe { height: 100% }
#photo_area .boxlistt { height: auto; overflow: hidden; }
#photo_area .boxlistt .slick-list { margin: 0; padding: 0 !important; }
#photo_area .boxlistt .slick-track { display: flex; flex-direction: column; }
#photo_area .boxlistt .slick-slide { height: auto; }
#photo_area .boxlistt .item { margin: 0 0 20px; outline: none; }
#photo_area .item { position: relative; margin: 0 0 20px; }
#photo_area .info { display: grid; grid-template-columns: 125px 1fr; align-items: center; gap: 55px; }
#photo_area .info img { border-radius: 30px; border: 8px solid #f1f1f1; aspect-ratio: 1/1; object-fit: cover; }
#photo_area .info p { font-size: 22px; font-family: "Arimo",var(--font-family),sans-serif; font-weight: 500; }
#photo_area .info article { color: #727272; font-size: 15px; margin-top: 5px; }
#photo_area .titbox { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#photo_area .photo_arrowBox { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 1.5vw; }
#photo_area .photo_arrow { width: 42px; height: 42px; border: 1px solid rgba(var(--primary-rgb),.35); border-radius: 50%; background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s ease; }
#photo_area .photo_arrow:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
#photo_area .photo_arrow::after { content: ""; border: solid currentColor; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; }
#photo_area #photo_prev::after { transform: rotate(-135deg); margin-top: 4px; }
#photo_area #photo_next::after { transform: rotate(45deg); margin-bottom: 4px; }
@media screen and (max-width:1460px) {
  #book_area .fixTxt { width: 190px; }
  #photo_area:before,#photo_area:after { left: -35%; }
  #about_area .about_sub_1,#about_area .about_sub_2,#about_area .about_sub_3 { width: 20vw; }
  #product_list { width: 500px; margin-left: 30px; }
  #product_list li .clip { height: 590px; }
  #about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (max-width:1280px) {
  #news_area .action-group { display: flex; flex-direction: column; align-items: flex-start; }
  #news_area .title-group { margin-bottom: 20px; }
}
@media screen and (max-width:1024px) {
  #photo_area:before,#photo_area:after { height: 40%; top: -7%; left: -15%; }
  #photo_area .workframe iframe { height: 480px; }
  #photo_area .workframe { display: block; }
  #photo_area .rightbox { margin-bottom: 40px; }
  #product_list { margin: auto; }
  #news_area { padding: 80px 5%; }
  #news_area .workframe { flex-direction: column; gap: 40px; }
  #news_area .left-col { width: 100%; padding-top: 0; }
  #news_area .title-group { margin-bottom: 30px; justify-content: center; align-items: center; }
  #news_area .bg-number { top: -40px; left: 50%; transform: translateX(-50%); font-size: 80px; }
  #news_area .en-title { writing-mode: horizontal-tb; transform: none; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); }
  #news_area .zh-title { writing-mode: horizontal-tb; letter-spacing: 8px; }
  #news_area .category-links { flex-direction: row; flex-wrap: wrap; justify-content: center; border-left: none; padding-left: 0; margin-bottom: 30px; gap: 15px; }
  #news_area .category-link.active::before { width: 100%; height: 2px; left: 0; top: auto; bottom: -6px; transform: none; }
  #news_area .action-group {margin-top: 0;justify-content: center;align-items: end;}
  #news_area .right-col { width: 100%; }
  #news_area .list-card { padding: 30px 20px; border-radius: 16px; }
}
@media screen and (max-width:980px) {
  #photo_area:before,#photo_area:after { height: 25%; }
  #about_area .rightboxx #about_img { display: none; }
  section { padding: 8vw 0 }
  #about_area .clip { width: 90%; margin: 0; }
  #about_area #about_img .clip img {aspect-ratio: 4/3;object-position: 50% 50%;}
  #about_area .workframe { grid-template-columns: 1fr }
  #about_area .btnBox { position: relative; left: 0; bottom: 0; margin-top: 50px; display: flex; flex-direction: column; align-items: center; }
}
@media screen and (max-width:768px) {
  #book_area .book_title_row { flex-direction: column; gap: 15px; }
  #book_area .book_arrowBox { position: static; transform: none; justify-content: center; }
  #about_area .clip { width: 100%; margin: 0; }
  section .clip img { height: auto; }
  #book_area .fixTxt { right: -12%; width: 130px; top: -6%; }
  section .title_box { padding-bottom: 5vw; }
  #photo_area .workframe iframe { height: 300px; }
  #photo_area:before,#photo_area:after { height: 15%; top: -5%; left: -22%; opacity: 0; }
  #news_area::before { background: rgba(255,255,255,0.95); }
  #news_area .list-item { flex-direction: column; align-items: flex-start; padding: 25px 0; }
  #news_area .list-item:hover { transform: translateY(-5px); }
  #news_area .date-box { width: 100%; flex-direction: row; align-items: baseline; gap: 15px; margin-bottom: 15px; border-bottom: 1px solid #f5f5f5; padding-bottom: 15px; justify-content: flex-start; }
  #news_area .content-box { padding: 0; width: 100%; }
  #news_area .icon-box { position: absolute; right: 0; top: 25px; width: 30px; height: 30px; font-size: 16px; }
  section { padding: 15vw 0; }
    #about_area{padding-bottom:0}
  #product_sub_list>div { margin: 10px auto 50px; }
  #product_sub_list li { width: 150px; }
  #product_sub_list li .clip { height: 150px; }
  #product_list { width: 70vw; }
  #product_list li .clip { height: 80vw; }
  #product_list li .info_box { width: 45vw; height: 30vw; }
}
@media screen and (max-width:550px) {
  #photo_area .titbox {align-items: center;flex-direction: column;display: flex;margin-top: 70px;margin-bottom: 40px;}
    #photo_area .titbox .title_box {padding:0}
  #news_area .action-group { display: flex; flex-direction: column; align-items: center; }
  #product_sub_list li { margin: 10px; width: 35vw; }
  #product_sub_list li .clip { height: 35vw; }
  #product_list { width: 90vw; }
  #product_list li .clip { height: 100vw; }
  #product_list li .info_box { width: 55vw; height: 40vw; }
  #about_area .about_sub_2 { bottom: 60vw; }
}
@media screen and (max-width:480px) {
  #book_area li.row { margin: auto; width: 250px; }
}