section .title_box .page_title{font-weight: 500;font-size: 2.4rem;letter-spacing: 4px;position: relative;line-height: 160%;margin-bottom: 30px;color: var(--info);}
section .title_box .page_title:after{content:'';display: block;width: 80px;height: 1px;background: var(--secondary);margin: 30px 0 0;}
section .title_box .subtitle{color: var(--secondary);font-family: "Unbounded", sans-serif;font-size: 40px;font-weight: 600;line-height: 1.03;padding-bottom: 10px;text-transform: uppercase;letter-spacing: 2px;}
section .title_box .ptitle{position:relative;padding-left:37px;color:var(--primary);font-size:18px;font-weight:600;letter-spacing:1px;margin-bottom:12px}
section .title_box .ptitle:before{content:'';position:absolute;width:23px;height:2px;background:var(--primary);left:0;top:15px}
section .title_box .subtitle .secondColor{color:var(--primary);vertical-align:top;padding:0;margin:0}
section .title_box p{line-height:170%;letter-spacing:0.5px;font-weight:500;font-size:20px;color:var(--complement);position:relative}
.more_btn{margin-top:0px;position: relative;background: var(--primary);color: #fff;border-radius: 50px;padding: 10px 26px;min-width: 200px;}
.more_btn:before{content:"";height:100%;width:0;display:block;position:absolute;bottom:0;left: 0px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color: #376344;border-radius: 50px;padding: 10px 26px;opacity: 0;}
.more_btn:hover:before{width:100%;opacity: 1;}
.more_btn a{position:relative;overflow:hidden;width: 120px;padding: 12px 50px 12px 30px;display:inline-block;border-radius: 100px;}
.more_btn font{position:relative;color:#fff;font-family: 'Oswald', sans-serif;text-transform: uppercase;text-align: center;font-size: 15px;font-weight: bold;letter-spacing: 0.08rem;}
.more_btn b{width: 40px;aspect-ratio: 1/1;border-radius: 50px;display: flex;align-items: center;justify-content: center;margin-left: 30px;border: 1px solid #ffffff69;position: absolute;top: 4px;right: 12px;}
.more_btn b:after{content:"";width: 6px;height: 6px;background-color: #fff;position:absolute;top: 42%;left:50%;border-radius: 50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}

.more_btn:hover b:after{animation: arrow-move-right-data-v-1d069175 1s .2s;}
@Keyframes arrow-move-right-data-v-1d069175{0%{transform:translateX(0);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}50%{transform:translateX(20px);-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);}51%{transform:translateX(-20px);-webkit-clip-path:inset(0 0 0 100%);clip-path:inset(0 0 0 100%);}100%{transform:translateX(0);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}}

.section_area {padding: 5vw 0;}
.section_area .area_title {position: relative;padding-bottom: .3em;letter-spacing: .1em;text-align: center;color: #563d1c;font-size: 32px;font-family: "Zen Maru Gothic", sans-serif;font-weight: 600;}
.section_area .area_title b{font-family: "Unbounded", sans-serif;text-transform: uppercase;letter-spacing: 0;color: #563d1c;font-weight: 400;font-size: 18px;}
.section_area .sub_title { font-weight: 500; font-size: 1.1em; color: var(--primary); }
.section_area .more_btn {padding: 18px 2em 18px 3em;background: var(--primary);font-weight: 400;border-radius: 50px;color: white;display: flex;align-items: center;gap: 25px;}
.section_area .more_btn svg{transform: rotate(-90deg);width: 33px;height: 33px;fill: white;}
.section_area .list_box { margin-top: 2vmax; }
.section_area .list_box .item_row {margin: 0 1.5em;}
.section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; }


/* service_area */
#service_area{position:relative;padding: 9vw 0 10vw 0;}
#service_area:before{content:'';position:absolute;left: 8.2vw;top:0;background: url(/images/01/img-bn-bg.png) 100% 100%;background-size: auto;width: 100%;height:100%;z-index: -3;}
#service_area:after{content:'';position:absolute;right: -210px;bottom: -230px;background: url(/images/01/img-s-01.png);background-repeat:no-repeat;width: 607px;height: 629px;z-index: -1;animation: waterFlow 12s ease-in-out infinite;background-size: 102% 100%;}
@keyframes waterFlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
#service_area .bg{content:'';position:absolute;right: 0;top: -220px;background: url(/images/01/img-s-bg.png);background-size: auto;background-position: bottom;background-repeat:no-repeat;width: 877px;height: 124%;z-index: -1;}
#service_area .workframe{z-index:2;width: min(86%,1440px);margin-left: 220px;}
#service_area .serviceT{position:absolute;top: -7%;left: 43%;z-index:-3}
#service_area .tit article{width:42%;line-height:2;text-align:justify;font-weight:300}
#course_tabs{display:grid;grid-template-columns: 1fr 310px;gap: 80px;justify-content:space-between;align-items: start;position: relative;}
#course_tabs .tabs{display:flex;flex-direction:column;align-items:flex-start}
#course_tabs .tabs li{width:100%;padding: 6px 0;position:relative;display: flex;justify-content: space-between;}
#course_tabs .tabs li.active a,#course_tabs .tabs li.active:hover a{color: var(--primary);}
#course_tabs .tabs li a{display: grid;grid-template-columns: 30px 1fr 30px;color: #646464;font-size: 18px;letter-spacing:2px;font-weight: 500;align-items:center;justify-content:space-between;gap: 16px;width: 100%;border-bottom: 1px solid #bfbfbf;padding-bottom: 10px;}
#course_tabs .tabs li b{color:#898989;font-size:17px;position:relative;display:flex;align-items:center;}
#course_tabs .tabs li b:after{content:'';position:absolute;width:1px;height: 20px;background: #c7c7c7;right: -5px;}
#course_tabs .tabs li a svg{fill:#898989;width:13px;height:13px}
#course_tabs .tabs li:hover svg{transform:rotate(0deg)}
#course_tabs .tab_content .linkList{display:grid;grid-template-columns:370px 1fr;gap:90px;align-items:start}
#course_tabs .tab_content .img_scale{display:flex;justify-content:center;align-items:center}
#course_tabs .tab_content .serviceimg2{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}
#course_tabs .tab_content .more_btn{background:var(--triadic1);color:var(--white);position:absolute;top:36%;left:34%;font-family:'Oswald',sans-serif;padding:30px 25px 50px;width:55px;display:flex;flex-direction:column;align-content:center;align-items:center;text-align:center;border-radius:5px}
#course_tabs .tab_content .more_btn b svg{width:15px;height:15px;fill:#e6ecf2;transform:rotate(45deg)}
#course_tabs .tab_content .info_box{padding-left:0px}
#course_tabs .tab_content .info_box .main-title{font-size:1.6rem;font-weight:500;margin-bottom:30px;letter-spacing:3px;position:relative;display:flex;align-items:center;gap:15px;justify-content:flex-start}
#course_tabs .tab_content .info_box .main-title em{font-style:initial;text-transform:uppercase;font-family:"Unbounded",sans-serif;position:absolute;right:-300px;top:0;z-index:-1;-webkit-transform:translateY(-160%);transform:translateY(-160%);font-size:130px;font-weight:500;letter-spacing:3px;color:#eaeaea;pointer-events:none}
#course_tabs .tab_content .info_box article,#about_area .info_box article .text{font-size:1.08rem;-webkit-line-clamp:4;text-align:justify;font-weight:400;letter-spacing:.5px;line-height:200%}
#course_tabs .rightBox .topBox{margin-bottom:50px}
#course_tabs .rightBox .topBox .title{font-size:26px;font-weight:500;margin-bottom:20px}
#course_tabs .rightBox .topBox .text{color:#6d6d6d;width:70%}
#service_area .serviceimg1{z-index:-1;position:absolute;bottom:70px}

/* product_area */
#product_area{display:grid;grid-template-columns:60px 89%;gap:0px;justify-content:space-between;align-items:start}
#product_area{position:relative;padding:0}
#product_area .titleBox{display:flex;flex-direction:column;align-items:center}
#product_area:before{content:url(/images/01/img-block.png);position:absolute;right:0;top:60px;z-index:0}
#product_area .workframe{width:min(90%,1250px)}
#product_area .list_box{margin-top:4vw}
#product_area .area_title{display:flex;justify-content:flex-end;align-items:baseline;gap:15px;writing-mode:vertical-lr;letter-spacing:7px;line-height:100%;color:#fff;font-size:42px;padding-bottom:2.8em;position:relative;margin-bottom:40px}
#product_area .area_title:after{content:"";width:1px;height:60px;background-color:#fff;position:absolute;bottom:0;left:58%}
#product_area .btn{padding:0;display:inline-flex;align-items:center;gap:12px;flex-direction:column}
#product_area .btn a{border:1px solid #fff;width:48px;aspect-ratio:1/1;display:flex !important;align-items:center;justify-content:center;border-radius:50px}
#product_area .btn a svg{fill:white;width:13px;height:16px}
#product_area .btn a#product_prev svg{transform:rotate(180deg)}
#product_list .slick-list{}
#product_all{padding:11vw 0 5vw 0}
#product_all:before{content:'';position:absolute;left:0px;top:100px;background:url(/images/01/img-p-bg.png) 0 0;background-repeat:no-repeat;background-size:auto;width:100%;height:100%;z-index:-3}
#product_all:after{content:'';position:absolute;background:url(/images/01/img-p-bg-2.png);background-size:auto;background-position:bottom;background-repeat:no-repeat;width:100%;height:664px;z-index:-4;top:45%;left:56%;transform:translate(-50%,-50%)}
#product_all .workframe{display:grid;grid-template-columns:44% 54%;gap:40px;justify-content:space-between;width:min(90%,1480px);align-items:end}
#product_rightlist{margin-top:-15vw;position:relative}
#product_rightlist ul li .img_box img{border-radius: 30px;width: 100%;}
#product_rightlist .more_btn{position: absolute;bottom: -80px;right: 0;}

/* about_area */
#about_area {position: relative;padding: 7vw 0 10vw 0;margin-bottom: 50px;}
#about_area .bg{position:relative}
#about_area .bg:before{content:'';position:absolute;left:170px;top:-320px;background:url(/images/01/img-ab-bg-1.png) 0 0;background-size:auto;width:60%;height:125%;z-index:-6}
#about_area:before{content:'';position:absolute;left: 170px;top: -320px;background: url(/images/01/img-ab-bg-1.png) 0 0;background-size: auto;width: 60%;height: 125%;z-index: -6;}
#about_area:after{content:'';position:absolute;background: url(/images/01/img-ab-bg-2.png);background-size: auto;background-position: bottom;background-repeat:no-repeat;width: 1165px;height: 750px;z-index: -9;top: 10px;right: 70px;}
#about_area .workframe {display: grid;justify-content: space-between;grid-template-columns: 39% 55%;align-items: end;width: min(90%, 1366px);margin-right: 170px;}
#about_area .info_box {}
#about_area .info_box .sub_title  {position: absolute;display: flex;flex-direction: row-reverse;gap: 25px;top: -45px;right: 18%;align-items: flex-start;}
#about_area .info_box .sub_title span{background:white;writing-mode: vertical-lr;font-family: "Unbounded", sans-serif;color: #563d1c;font-size: 24px;text-transform: uppercase;display: inline-block;padding: 25px 10px;letter-spacing: 2px;}
#about_area .info_box .about_title   {position: absolute;top: 70px;writing-mode: vertical-lr;font-family: "Zen Maru Gothic", sans-serif;font-size: 30px;color: #563d1c;border-bottom: 4px solid var(--primary);line-height: 1;padding-bottom: 40px;font-weight: 600;letter-spacing: 6px;right: 28%;}
#about_area .info_box .pageh1, #about_area .areaTitle{font-size: 24px;color: var(--primary);margin-bottom: 15px;font-weight: 500;letter-spacing: 1px;margin-top: 30px;}
#about_area .img_box{position:relative}
#about_area .img_box p{font-size:20px;margin-bottom:34px;letter-spacing:1px;font-weight:500}
#about_area .workframe >.img_box:before{content:url(/images/01/img-circle.png);position: absolute;right: -110px;z-index: -1;top: -50px;}
#about_area .workframe >.img_box:after{content:url(/images/01/img-suger.png);position: absolute;left: -110px;z-index: 0;bottom: -70px;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}ease-in-out;animation-duration: 2s;}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#about_area .img_box img {width: 100%;height: 100%;border-radius: 30px;}
#about_area .info_box article p{line-height:2.2;width: 70%;font-weight: 500;color: #563d1c;}
#about_area .projectBottomItem{display:grid;grid-template-columns:repeat(3,1fr);gap:61px;margin-top:40px}
#about_area .projectBottomItem .item{position:relative;transition:all .2s 
linear}
#about_area .projectBottomItem .item:not(:last-child):after{content:"";position:absolute;width:1px;height:60%;right:-30px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:#cbcbcb;z-index:5}
#about_area .projectBottomItem .item .Img{width:80px;margin:auto}
#about_area .projectBottomItem .item .Img::before,#about_area .projectBottomItem .item .Img::after{content:"";position:absolute;left:20%;width:10px;height:10px;border-radius:50%;background:rgb(224 242 230);animation:bubbles 3s ease-in-out infinite}
#about_area .projectBottomItem .item .Img::after { animation-delay: 1.5s; }
@keyframes bubbles {
  0% { transform: translate(-20%, 20px) scale(2.5); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(200%, -50px) scale(1); opacity: 0; }
}
#about_area .projectBottomItem .item:hover .Img img{animation:ripple 3s ease-in-out infinite}
@keyframes ripple {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,150,255,0)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgb(255 255 255 / 0%)); }
}
#about_area .projectBottomItem .item .Txt .title{text-align:center;margin-top:15px;font-weight:500;letter-spacing:1px;font-size:18px}
#about_area .aboutimg1,#about_area .aboutimg2{position:absolute;top:0;right: 310px;}
#about_area .aboutimg1{top: 90px;}
#about_area .aboutimg1 img{animation:swim5 8s ease-in-out infinite}
@keyframes swim5 {
  0% { transform: translate(0,0) scale(1) rotate(0deg); filter: brightness(1); }
  25% { transform: translate(10px,-5px) scale(1.03) rotate(3deg); filter: brightness(1.05); }
  50% { transform: translate(-8px,5px) scale(0.98) rotate(-3deg); filter: brightness(0.95); }
  75% { transform: translate(6px,-3px) scale(1.02) rotate(2deg); filter: brightness(1); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
#about_area .aboutimg2{top:63%;right:13%}
#about_area .aboutimg2 img{animation:swim4 12s ease-in-out infinite;transform-origin:center}
@keyframes swim4 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -5px) rotate(6deg); }
  50% { transform: translate(-5px, 8px) rotate(-6deg); }
  75% { transform: translate(8px, 3px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.aboutimg3{position:absolute;bottom: 300px;left:-140px}
.aboutimg3 img{animation:swim1 10s ease-in-out infinite;transform-origin:center}
@keyframes swim1 {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  25% { transform: translateX(5px) rotate(2deg) scale(1.02); }
  50% { transform: translateX(-5px) rotate(-2deg) scale(0.98); }
  75% { transform: translateX(3px) rotate(1deg) scale(1.01); }
}

@media screen and (max-width: 1680px){
    #about_area .workframe{width:75%;margin-right:120px}
	#about_area .aboutimg1{top:80px;right:-20px}
	#about_area .aboutimg1 img,#about_area .aboutimg2 img,.aboutimg3 img{width:73%}
	#about_area .aboutimg2{top:76%}
}
@media screen and (max-width: 1440px){
    #product_all{padding:7vw 0;margin-top:110px}
	#product_all:before{left:-140px;top:0}
	#about_area{padding-top:6vw}
	#about_area .info_box .about_title{right:32%}
	.aboutimg3{left:-140px;bottom:-10px}
	#about_area:before{height:140%}
	#about_area:after{top:70px;width:945px}
	section .title_box .subtitle{font-size:32px}
	section .title_box .page_title,#product_area .area_title{font-size:1.8rem;margin-bottom:20px}
	#course_tabs .tab_content .info_box .main-title{font-size:1.2rem;margin-bottom:20px}
	#course_tabs .tab_content .info_box article,#about_area .info_box article .text{font-size:1rem}
	#service_area:after{right:-250px;bottom:-180px;width:517px;height:499px}
	#about_area .workframe{grid-template-columns:43% 50%}
	#service_area .workframe{margin-left:10%;width:min(83%,1440px)}
	#course_tabs{grid-template-columns:1fr 290px}
	#course_tabs .tab_content .linkList{grid-template-columns:270px 1fr;margin-bottom:30px;gap:50px}
	#course_tabs .tabs li a{font-size:16px}
	#service_area .bg{width:707px}
	#about_area .aboutimg1{right:-150px}
	#about_area .aboutimg2{right:14%;top:68%}
	#product_area .list_box{margin-top:0}
}
@media screen and (max-width: 1366px){
    #course_tabs .tab_content .info_box .main-title em,#service_area:after,#about_area .aboutimg1,#about_area .aboutimg2,.aboutimg3,#service_area .serviceimg1{display:none}
}
@media screen and (max-width: 1280px){
    #product_all:after{display:none}
	#service_area .bg{width:610px}
	#about_area .workframe{width:88%;margin:auto}
	#about_area:before,#about_area:after,#product_all:before{display:none}
	#product_area .area_title{color:#161616}
	#product_area .area_title:after{background-color:#7c7c7c;height:60px}
	#product_area .btn a{border:1px solid #a3a3a3}
	#product_area .btn a svg{fill:#202020}
}
@media screen and (max-width: 1140px){
    #course_tabs{grid-template-columns:1fr;gap:50px}
	#course_tabs .tab_content .linkList{grid-template-columns:310px 1fr}
	#service_area .bg{display:none}
	#service_area:before{left:0}
	#service_area{padding:8vw 0 12vw 0}
	#service_area .workframe{margin:auto;width:88%}
    #about_area{padding: 6vw 0 8vw 0;margin-bottom: 0;}
}
@media screen and (max-width: 1024px){
    #about_area:after{zoom:60%;bottom: 7%;}
    #about_area .info_box .about_title{right: 40%;}
    #about_area .workframe >.img_box:before, #about_area .workframe >.img_box:after{display:none;}
    #about_area .info_box article p{width:100%}
	#about_area .workframe{grid-template-columns:1fr;gap:60px}
	#product_all{margin-top:0}
	#product_rightlist{display:none}
	#product_all .workframe{display:block}
	#product_area{display:block}
	#product_area .titleBox{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:30px}
	#product_area .btn{display:flex;flex-direction:row;align-items:center}
	#product_area .area_title{writing-mode:horizontal-tb;padding-bottom:0;margin-bottom:0}
	#product_area .area_title:after{display:none}
}
@media screen and (max-width: 768px){
    #about_area .info_box .pageh1,#about_area .areaTitle{font-size:20px}
	#about_area .projectBottomItem .item .Txt .title{font-size:16px}
    #about_area .info_box .pageh1{margin-top: 50px;}
    #about_area .info_box .about_title{right: 62%;}
    #about_area .info_box .sub_title{right: 33%;}
    #about_area .workframe{grid-template-columns:1fr}
    #product_list .slick-list{height: 690px;}
    #product_area:before{right: -35%;}
    #product_area .area_title:before{zoom: 50%;}
	#about_area .img_box { width: 100%; max-width: inherit; }
    #course_tabs .tab_content .linkList{grid-template-columns:1fr}
}
@media screen and (max-width: 640px) {
    .section_area .more_btn{padding: 10px 1em 10px 2em;}
    .section_area{padding: 15vw 0;}
    .section_area .area_title{font-size: 26px;}
    #about_area .info_box .pageh1{font-size: 20px;}
    #about_area .info_box .sub_title{top:-25px}
    #about_area .info_box .sub_title span{font-size: 19px;}
    #about_area .info_box .about_title{font-size: 26px;right: unset;left: 20%;}
    #about_area:before{zoom:50%}
    #product_list .btn a{width:65px;}
    #product_list .slick-list{height:auto;}
    #product_list .btn{display:flex;margin: 40px 0 0;align-items: center;justify-content: center;}
    #product_area .list_box{margin-top: 6vw;}
    #product_area:before{right: -95%;}
    #product_area .area_title:before{zoom: 20%;}
}