/* page1 sec2 */
.page1 .sec2 { --s2-py: 26rem 18rem; --s2-gap: 9rem; --s2-copy-w: 60rem; --s2-list-w: 56rem; --s2-item-gap: 4rem; --s2-icon: 7rem; --s2-name-bg: #C9AE90; --s2-name-color: #183629; --s2-name-pd: .8rem 2.2rem; --s2-name-r: .8rem; --s2-name-mb: 0rem; position: relative;  overflow: hidden; color: #fff; padding-top: 0 !important; } 
.page1 .sec2 .inner { position: relative; z-index: 1; background: url("/theme/basic/img/sub/sub2/fl-bg.jpg")no-repeat center/cover;} 
.page1 .sec2 .fl-img {    position: relative; z-index: 2; margin-bottom: -10rem;}
.page1 .sec2 .s2-wr { display: grid; grid-template-columns: minmax(0, var(--s2-copy-w)) minmax(0, var(--s2-list-w)); justify-content: space-between; align-items: flex-start; gap: var(--s2-gap); padding: var(--sec-pd) 0; } 

.page1 .sec2 .s2-list { display: flex; flex-direction: column; gap: var(--s2-item-gap); } 
.page1 .sec2 .s2-item { display: grid; grid-template-columns: var(--s2-icon) minmax(0, 1fr); align-items: center; gap: 2.8rem; } 
.page1 .sec2 .s2-icon { display: flex; align-items: center; justify-content: center; width: var(--s2-icon); height: var(--s2-icon); } 
.page1 .sec2 .s2-icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } 
.page1 .sec2 .s2-info { min-width: 0; } 
.page1 .sec2 .s2-name { display: inline-flex; align-items: center; margin-bottom: var(--s2-name-mb); padding: var(--s2-name-pd); border-radius: var(--s2-name-r); background: var(--s2-name-bg); color: var(--s2-name-color); } 
.page1 .sec2 .s2-name > * { margin: 0; } 
@media screen and (max-width: 1024px){
 .page1 .sec2 { --s2-py: 0; --s2-gap: 6rem; --s2-copy-w: 100%; --s2-list-w: 100%; --s2-item-gap: 3rem; --s2-icon: 6.4rem; } 
 .page1 .sec2::before { background-position: center top; } 
 .page1 .sec2 .s2-wr { grid-template-columns: 1fr; align-items: start; gap:0;} 
 .page1 .sec2 .s2-copy { width: min(100%, 64rem); margin-bottom: 0; } 
 .page1 .sec2 .s2-list { width: min(100%, 64rem); } 
 .page1 .sec2 .fl-img {margin-bottom: -6rem;}
 }
@media screen and (max-width: 768px){
 .page1 .sec2 { --s2-gap: 4rem; --s2-item-gap: 2.4rem; --s2-icon: 5.8rem; --s2-name-pd: .7rem 1.8rem; } 
 .page1 .sec2::before { background-position: center top; background-size: auto 100%; } 
 .page1 .sec2 .s2-item { grid-template-columns: var(--s2-icon) minmax(0, 1fr); gap: 1.8rem; } 
 .page1 .sec2 br { display: none; } 
 .page1 .sec2 .fl-img {margin-bottom: -3rem;}

 .page1 .sec2 .s2-name {padding: .5rem 1rem;}
 .page1 .sec2 .s2-name .tit1 {font-size: 1.8rem;}

 }


/* page1 sec3 */
.page1 .sec3 { --s3-bg: #F8F7F5; --s3-py: 14rem; --s3-gap: 3rem; --s3-card-r: 2rem; --s3-card-p: 3rem; --s3-img-h: 42rem; --s3-body-py: 4rem; --s3-info-py: 3.6rem; --s3-info-gap: 0rem; --s3-icon: 6.2rem; --s3-line: #C9AE90; --s3-line-w: .1rem; padding-bottom: var(--sec-pd); background: var(--s3-bg); } 
.page1 .sec3 .s3-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3-gap); } 
.page1 .sec3 .s3-col { min-width: 0; } 
.page1 .sec3 .s3-card { display: flex; flex-direction: column; min-width: 0; min-height: 68rem; padding: var(--s3-card-p); border-radius: var(--s3-card-r); background: #fff; } 
.page1 .sec3 .s3-img { border-radius: calc(var(--border-ra) - 0.5rem); height: var(--s3-img-h); overflow: hidden; } 
.page1 .sec3 .s3-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page1 .sec3 .s3-body { padding: var(--s3-body-py) 0; text-align: center; } 
.page1 .sec3 .s3-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-top: auto; padding-top: var(--s3-info-py); } 
.page1 .sec3 .s3-item { display: grid; grid-template-columns:var(--s3-icon) max-content; justify-content:center; align-items: center; gap: 1rem; min-width: 0; min-height: 9rem; padding: 0 var(--s3-info-gap); } 
.page1 .sec3 .s3-item + .s3-item { border-left: var(--s3-line-w) solid var(--s3-line); } 
.page1 .sec3 .s3-item img { display: block; width: var(--s3-icon); height: var(--s3-icon); object-fit: contain; } 
.page1 .sec3 .s3-src { margin-top: 1rem; padding: 0 1rem; color: #575757; font-size: 1.8rem; text-align: right; } 
@media screen and (max-width: 1700px){
 .page1 .sec3 .s3-item { grid-template-columns: repeat(1, 1fr); gap: 0; padding: 0 2rem; } 
 .page1 .sec3 .s3-info { padding-top: 0; } 
 }
@media screen and (max-width: 1440px){
 .page1 .sec3 .s3-item { align-content: start; height: 15rem; } 
 }
@media screen and (max-width: 1280px) {
  .page1 .sec3 .s3-card { padding: 2rem;    min-height: auto; }   
.page1 .sec3 .s3-img { height: 26rem; } 
.page1 .sec3 .s3-body { padding: 2rem 0 0; } 
.page1 .sec3 .s3-info { grid-template-columns: 1fr;margin-top: 0; } 
.page1 .sec3 .s3-item { padding: 2rem 0; } 
.page1 .sec3 .s3-item + .s3-item { border-left: 0; border-top: var(--s3-line-w) solid var(--s3-line); } 
.page1 .sec3 br { display: none; } 
.page1 .sec3 .s3-item {display: flex; justify-content: flex-start; gap: 1rem; min-height: auto; height: auto; } 
.page1 .sec3 .s3-item .txt3 {padding-top:  0;} 
 }
@media screen and (max-width: 960px){
 .page1 .sec3 .s3-list { grid-template-columns: 1fr; } 
 .page1 .sec3 .s3-src { margin: 1rem .5rem 0; font-size: 1.6rem; } 
 .page1 .sec3 .s3-body {text-align: left;}
 .page1 .sec3 .s3-body .tit1.t-cnt {text-align: left !important;}
 .page1 .sec3 .s3-img {height: 16rem;}
 }

/* page1 sec4 */
.page1 .sec4 { --s4-py: 14rem; --s4-list-gap: 3rem; --s4-card-bg: #F8F7F5; --s4-card-r: 1.6rem; --s4-card-p: 3rem; --s4-card-gap: 5rem; --s4-img-w: 58rem; --s4-img-h: 37rem; --s4-label-bg: #C9AE90; --s4-label-color: #fff; --s4-label-pd: 1.5rem 2.1rem; --s4-label-r: 10rem; --s4-label-mb: 5rem; --s4-note-mt: 1.5rem; } 

.page1 .sec4 .s4-list { display: flex; flex-direction: column; gap: var(--s4-list-gap); } 
.page1 .sec4 .s4-card { display: grid; grid-template-columns: minmax(0, 1fr) var(--s4-img-w); align-items: center; gap: var(--s4-card-gap); padding: var(--s4-card-p); border-radius: var(--s4-card-r); background: var(--s4-card-bg); } 
.page1 .sec4 .s4-copy { min-width: 0; padding-left: 2rem; } 
.page1 .sec4 .s4-copy > span { display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s4-label-mb); padding: var(--s4-label-pd); border-radius: var(--s4-label-r); background: var(--s4-label-bg); color: var(--s4-label-color); font-size: 2rem; font-weight: 700; line-height: 1; } 
.page1 .sec4 .s4-img { margin: 0; height: var(--s4-img-h); overflow: hidden; border-radius: 1.2rem; } 
.page1 .sec4 .s4-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page1 .sec4 .s4-note { margin-top: var(--s4-note-mt); padding: 0 1rem; } 
@media screen and (max-width: 1440px){
 .page1 .sec4 .s4-copy .txt3 br { display: none; } 
 }
@media screen and (max-width: 1200px){
 .page1 .sec4 { --s4-card-p: 2rem; --s4-card-gap: 3rem; --s4-img-w: 48rem; } 
 }
@media screen and (max-width: 960px){
 .page1 .sec4 { --s4-py: 10rem; --s4-img-w: 100%; --s4-img-h: 28rem; } 
 .page1 .sec4 .s4-card { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 2rem 2rem; } 
 .page1 .sec4 .s4-copy {padding-left: 0;}
 .page1 .sec4 .s4-copy > span {margin-bottom: 2rem;padding: 1rem 2rem;font-size: 1.6rem;}
 }
@media screen and (max-width: 768px){
 .page1 .sec4 { --s4-py: 8rem; --s4-card-p: 1.5rem; --s4-img-h: 22rem; --s4-label-mb: 2.8rem; } 
 .page1 .sec4 br { display: none; } 
 .page1 .sec4 .s4-list {gap: 1rem;}
 .page1 .sec4 .s4-note {font-size: 1.6rem;}
 
 }

/* page1 sec5 */
.page1 .sec5 { --s5-py: 14rem; --s5-gap: 3rem; --s5-img-h: 26rem; --s5-body-pt: 2.8rem; --s5-txt-mt: 1.2rem; padding: var(--s5-py) 0; background: #fff; } 

.page1 .sec5 .tit-wr { text-align: left; } 
.page1 .sec5 .s5-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5-gap); } 
.page1 .sec5 .s5-card { min-width: 0; } 
.page1 .sec5 .s5-img { margin: 0; height: var(--s5-img-h); overflow: hidden; background: #F8F7F5; } 
.page1 .sec5 .s5-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page1 .sec5 .s5-body { padding-top: var(--s5-body-pt); } 
.page1 .sec5 .s5-body .txt { margin-top: var(--s5-txt-mt); } 
@media screen and (max-width: 1200px){
 .page1 .sec5 { --s5-img-h: 22rem; } 
 }
@media screen and (max-width: 960px){
 .page1 .sec5 { --s5-py: 10rem; } 
 .page1 .sec5 .s5-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
 }
@media screen and (max-width: 576px){
 .page1 .sec5 { --s5-py: 8rem; --s5-gap: 3.6rem; --s5-img-h: 40rem; } 
 .page1 .sec5 .s5-list { grid-template-columns: 1fr; } 
 .page1 .sec5 br { display: none; } 
 }