/* section */
section{padding: 7vw 0;}
section >*{z-index:5}
section .title_box .page_title,#about_area .title_box .page_title .pageh1{font-weight: 600;font-size: 1.8rem;letter-spacing: 6px;position: relative;line-height: 160%;margin-bottom: 30px;}
section .title_box .subtitle,section .title_box .subtitle .secondColor{color: #000;font-family:"Oswald",sans-serif;font-size: 70px;font-weight: 600;line-height: 1.03;padding-bottom: 40px;text-transform: uppercase;letter-spacing: 2px;word-spacing: 100vw;}
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;}
section.bg_box{background:no-repeat 50% / cover;}
.more_btn{margin-top:0px;position: relative;}
.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: #000;border-radius: 5px;}
.more_btn:hover:before{width:100%;}
#about_area .rightBox .topGroup .more_btn b{position:absolute;top:50%;right:-10px}

.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;}
header .barBox #webmenu{}
header.scroll .barBox #webmenu{display:block}
#course_tabs .more_btn b{top:50%;left:50%;transform:translate(-50%,70%);position:absolute;width:65px;height:30px}
.more_btn b::before{content:"";position:absolute;top:calc(50% - 0px);right:25px;width:18px;height:2px;background:#fff}
.more_btn b::after{content:"";position:absolute;top:calc(50% - 5px);right:25px;width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid  #fff;transform:rotate(45deg)}
.more_btn a:before{content:"";height:100%;width:100%;display:block;position:absolute;bottom:0;left:0;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background: var(--triadic1);}

/* service_area */
#service_area{position:relative;padding: 8vw 0;z-index: 10;}
#service_area:before{content:'';position:absolute;left: 14.2vw;top:0;background:rgb(25 37 50 / 32%);background-size:cover;background-repeat:no-repeat;width:1px;height:100%;opacity:0.5}
#service_area:after{content:'';position:absolute;right: 0;top:0;background: rgb(255 255 255);background-repeat:no-repeat;width: 59.7vw;height:100%;z-index: -1;}
#service_area .bg{position:absolute;width:100%;height: 100%;background-image:url(/images/01/serviceBg.jpg);background-repeat:no-repeat;background-position: 0px 50%;background-size: contain;top: 0;right:0;z-index:-3}
#service_area .workframe{z-index:2;width: min(90%,1500px);margin-left: 310px;}
#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:240px 1fr;justify-content:space-between;align-items:center;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}
#course_tabs .tabs li::before{content:"";width:0;height:1px;display:block;background-color:rgb(25 37 50 / 32%);position:absolute;top:calc(50% - 0.5px);left:-40px;opacity:0.5}
#course_tabs .tabs li.active::before{width:25px}
#course_tabs .tabs li.active a,#course_tabs .tabs li.active:hover a{color: var(--info);}
#course_tabs .tabs li a{display:grid;grid-template-columns: 1fr;color: #646464;font-size: 20px;letter-spacing:2px;font-weight: 500;align-items:center;justify-content:space-between}
#course_tabs .tabs li b{font-family:"Lato",serif;color:#898989;font-size:17px;position:relative;display:flex;align-items:center;display:none;}
#course_tabs .tabs li b:after{content:'';position:absolute;width:1px;height:15px;background:#ddd;right:13px}
#course_tabs .tabs li:hover svg{transform:rotate(0deg)}
#course_tabs .tab_content{padding: 0px 20px 50px 50px;}
#course_tabs .tab_content .linkList{display:grid;grid-template-columns:repeat(2,1fr);gap: 50px;align-items: start;}
#course_tabs .tab_content .txtItem{margin-top: 70px;}
#course_tabs .tab_content .linkList .img_scale img{aspect-ratio:3 / 4.3;width:430px}
#course_tabs .tab_content .img_scale:before{position:absolute;left: -70px;bottom:-50px;content:"";width: 80%;height:100%;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);background-color: var(--primary);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.4rem;font-weight:500;margin-bottom: 10px;letter-spacing:4px;position:relative;display:flex;align-items:center;gap:15px}
#course_tabs .tab_content .info_box .main-title em{font-family:'Oswald',sans-serif;font-style:initial;text-transform:uppercase;position: absolute;right: -50px;top: 150px;z-index: -1;-webkit-transform: translateY(-50%);transform: translateY(-50%);font-size: 330px;font-weight: 600;letter-spacing: -7px;-webkit-text-stroke: 2px rgb(188 250 59);color: transparent;pointer-events: none;}
#course_tabs .tab_content .info_box .main-title span{content:'';display:block;width:32px;height:1px;background:var(--triadic1)}
#course_tabs .tab_content .info_box article{font-size: 1.2rem;-webkit-line-clamp:4;text-align:justify;font-weight:400;margin-bottom:60px;letter-spacing:2px}

/* linkArea */
#service_area .serviceimg1,#service_area .serviceimg2{position:absolute;top:0;right: 0;transform:translate(30%,-35%);z-index: 9;}
#service_area .serviceimg1{aspect-ratio: 4/ 4;width: 250px;right: 8vw;z-index: 0;transform: translate(70%, 25%);}
#service_area .serviceimg2{transform: translate(-50%,200%);aspect-ratio: 4/ 3;width: 340px;left: 40vw;z-index: 0;}
#Service_area{overflow:hidden;position:relative;padding: 2vw 0 9vw 0;}
#Service_area .workframe{width:100%}
#Service_area .aboutArea{display:grid;grid-template-columns:1fr 50%;width:100%;align-items:center}
#Service_area .aboutLeft{margin-right:-90px}
#Service_area .aboutArea .aboutRight{background-color:#e9e9e9;padding: 70px 70px 130px;position:relative;overflow:hidden}
#Service_area .linkArea{background-color:#fff;width:70%;position:absolute;right:0;bottom: -150px;}
#Service_area .linkList{padding: 40px 30px;}
#Service_area .linkList li{position:relative;height: 190px;padding: 10px 20px;}
#Service_area .linkList li:after{content:'';position:absolute;right: 0px;top:0;width:1px;height:100%;background:#dbdbdb;opacity:.6}
#Service_area .linkList li:last-child:after{display:none}
#Service_area .linkList li .noBox{position:absolute;color:#122f6f;opacity:.2;font-size:35px;top:50%;right:0;transform:translate(-50%,-50%);width:37px}
#Service_area .linkList li .Img img{aspect-ratio:1 / 1;width:65px;object-fit:contain}
#Service_area .linkList li .Txt{margin-top:20px}
#Service_area .linkList li .Txt  h2{color:var(--triadic2);font-size: 22px;line-height: 130%;margin-bottom: 10px;}
#Service_area .linkList li .Txt p{color:#9196a2;font-size: 16px;}

/* about_area */
#wrap{position:relative}
#about_area{padding: 4vw 0 0 0;position:relative;overflow: hidden;}
#about_area .workframe{width:100%;display:grid;grid-template-columns: 764px 1fr;gap: 140px;}
#about_area .leftBox .Img{padding: 0 0 0 91px;}
#about_area .leftBox .Img:before{content:'';position:absolute;left:0;top: -400px;background: #000;background-size:cover;background-repeat:no-repeat;width: 14vw;height:110%;z-index: -2;}
#about_area .leftBox .Img:after{content:'';position:absolute;left: -6px;top: -400px;background: var(--primary);background-size:cover;background-repeat:no-repeat;width: 40.1vw;height:110%;z-index: -3;}
#about_area .rightBox{align-items:start}
#about_area .rightBox .topGroup{margin:40px 0 0px 0;width:34vw}
#about_area .rightBox .topGroup .more_btn{background:var(--triadic1);color:var(--white);padding:10px 60px 10px 20px;position:relative;margin-top:40px;border-radius:5px;padding:15px 25px;min-width:150px}
#about_area .rightBox .topGroup .more_btn b{position:absolute;top:50%;right:-10px}
#about_area .rightBox .topGroup article .title{font-weight:bold;font-size:1.4rem;margin-bottom:20px}
#about_area .rightBox .topGroup article  .Txt{line-height:200%;letter-spacing:1px;font-size:1.2rem}
#about_area .rightBox .topGroup article .expertise{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:30px;gap:10px}
#about_area .rightBox .topGroup article .expertise p{position:relative;padding:0 0 0 25px;font-size:1.2rem;letter-spacing:1px;list-style:none;display:flex;align-items:center;margin:5px 0;font-weight:600}
#about_area .rightBox .topGroup article .expertise p::before{content:"";width:5px;height:5px;display:block;background-color:var(--primary);position:absolute;left:10px}
#about_area .rightBox .sidePeople{position:absolute;bottom:0;right:0;width:30%;margin-right:auto;display:flex;justify-content:flex-end}
#about_area .rightBox article{position:relative;padding-top:30px}
#about_area .rightBox article::before{content:"";position:absolute;top:0;width:80px;height:2px;background:var(--primary)}
#about_area .slogan{color:var(--info);font-family:"Oswald",sans-serif;justify-content:space-between;display:grid;grid-template-columns:330px 550px;justify-items:stretch;gap:100px;width:71vw;margin:0 110px 80px  auto;align-items:center;padding-right:90px}
#about_area .slogan .title{font-weight:600;color:#000;font-size:1.4rem;position:relative;z-index:20}
#about_area .slogan .subtitle{font-family: "Oswald", sans-serif;color: var(--complement);opacity: .5;}
#about_area .about_icon *{transition:unset;-webkit-transition:unset}
#about_area .bg{position:absolute;width:100%;height:100%;background-image: url(/images/01/img-ab-bg.jpg);background-repeat:no-repeat;background-position: 50% 80%;background-size: cover;top:0;right:0;z-index:-3;}
#about_area::after{content:"";display:block;position:absolute;background: #ffffff;background-repeat:no-repeat;background-size:contain;height: 750px;width: 100vw;bottom: -10px;right: 100px;z-index: 0;}
#about_area .bg::after{content:"";display:block;position:absolute;background: #000;background-repeat:no-repeat;background-size:contain;height: 750px;width: 83vw;bottom: -10px;left: 260px;z-index: 0;}
#product_area .workframe{display: grid;grid-template-columns: 360px 73%;gap: 0 20px;width: min(1340px , 80%);}

/* cooperate_area */
#cooperate_area{padding:5vw 0;}
#cooperate_area .title_box .subtitle{word-spacing:normal;text-align:center}
#cooperate_area .title_box .page_title{text-align:center}
#cooperate_area .partner{margin:30px 0 0}
#cooperate_area .partner ul li{margin: 20px;}
#cooperate_area .partner ul li .item{position:relative;}
#cooperate_area .partner ul li .item::before{content:"";width: 20px;height: 3px;display:block;background-color: var(--primary);position:absolute;bottom: 44px;left: 0;z-index: 10;}
#cooperate_area .partner ul li:last-child  .item::before{display:none}
#cooperate_area .partner ul li .Img{}
#cooperate_area .partner ul li .Img img{}
#cooperate_area .partner ul li .textBox{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:justify;justify-content:flex-end;width:100%;height:100%;transform:translate(0em,-2em)}
#cooperate_area .partner ul li .textBox .subtitle,#cooperate_area .partner ul li .textBox .title{padding:0 30px 0;color:#fff;font-size:1.1rem;letter-spacing:.5px;height: 28px;}
#cooperate_area .partner ul li .textBox .title{font-size:1.8rem;font-family:"Oswald",sans-serif;font-weight:600;line-height:1.03;margin-top:10px}

@media screen and (max-width: 1780px) {
	#service_area .photoBox{width: 11%;}
	#service_area .serviceimg1 img, #service_area .serviceimg2 img{width: 75%;}
    #service_area:before{left:5.2vw}
	#service_area .workframe{margin-left:124px}
}
@media screen and (max-width:1560px){
	#service_area .photoBox{display:none}
	#course_area .workframe{grid-template-columns:30% 65%}
	#course_area:after{bottom:-79px}
	#course_area .top_bg{width:100%}
	section .title_box .subtitle{font-size:60px}
	#about_area .rightBox .sidePeople{width:30%}
	#service_area .serviceimg1{transform: translate(100%, 10%);}
	#service_area .serviceimg2{transform: translate(-10%,190%);width: 390px;}
	#service_area .serviceT{left:50%}
	#course_tabs .tab_content .more_btn{left:40%;top:50%}
}
@media screen and (max-width:1440px){
	#Service_area{padding:2vw 0 20vw 0}
	#Service_area .linkArea{bottom:-220px}
	#service_area .area_title{margin:0}
	#about_area{padding: 10vw 0 0 0;}
	#service_area .serviceT img{width:75%}
	section .title_box .page_title{}
	section .title_box .page_title,#about_area .rightBox .topGroup article h3{font-size:24px}
	#about_area .rightBox .topGroup{margin: 40px  auto;width: 86%;}
	#course_tabs .tab_content .info_box{padding-left:0}
    #about_area .workframe{grid-template-columns:660px 1fr;gap:60px}
	#about_area .slogan{margin:0 0px 80px auto;grid-template-columns:330px 370px}
	#course_tabs .tab_content .info_box .main-title em{font-size:240px}
	#about_area::after{right:20px}
	#about_area::after,#about_area .bg::after{height:820px}
}

@media screen and (min-width:1281px){
	.more_btn.white a:hover font{color:#ffffff}
	.more_btn.white a:hover{width:150px}
	#cooperate_area .partner ul li:hover .textBox{transform: translate(0em,-3em);}
	#cooperate_area .partner ul li:hover .Img img{opacity:1}
    #cooperate_area .partner ul li .Img::before{content:"";position:absolute;top:0;left:0;z-index:0;display:block;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.9) 100%,rgba(0,0,0,0.9) 100%)}
}

@media screen and (max-width:1280px){
	section .title_box{margin-bottom:0px}
	header .barBox #webmenu,header.scroll .barBox #webmenu{display:none}
	#service_area .serviceimg1,#service_area .serviceimg2,#about_area .rightBox .sidePeople{display:none}
	#about_area .workframe{gap: 60px;}
	#about_area .rightBox{grid-template-columns:1fr}
	#cooperate_area .partner ul li .item{padding:0}
	#course_tabs .tab_content .linkList{gap: 80px;}
    section .title_box .subtitle,section .title_box .subtitle .secondColor{font-size:55px}
	#about_area .workframe{grid-template-columns:610px 1fr}
	#about_area .slogan{margin:0 auto 80px;grid-template-columns:370px 300px;width:80vw;padding-right:0}
#product_area{
    margin: auto;
    text-align: center;
    padding: 6vw 0 10vw 0;
}	
#product_area .workframe{
    display: inline-block;
    align-items: flex-start;
    margin: auto;
}
}
@media (min-width:1201px){
	#Service_area .aboutArea .aboutRight p{width:80%}
	#Service_area .aboutArea .aboutRight::after{content:"";display:block;position:absolute;background-image:url(/images/01/icon-service-01.png);background-repeat:no-repeat;background-size:contain;height:184px;width:236px;bottom:-20px;right:-40px;z-index: -1;}
}

@media (max-width:1200px){
	#Service_area{padding:0vw 0px 5vw 0}
	#Service_area .workframe{display:flex;flex-direction:row;flex-wrap:wrap}
	#Service_area .contactBox{margin-bottom:50px;width:calc(100% - 20px);padding:0 10px}
	#Service_area .linkArea{position:relative;width:100%;bottom: 1px;}
	#Service_area .aboutArea{align-items:end}
    #Service_area .aboutArea .aboutRight{padding: 70px 70px 70px;}
	#fly-could img,#fly-could02 img,#fly-could03 img,#fly-could04 img,#fly-could05 img{width:46%}
	.more_btn a{padding:6px 30px 6px 20px}
	#imglist .img_nav{position:relative}
	#course_area:before{display:none;}
    #course_area #course_list li >div .more_btn{display:none;}
	#course_area .video-bg video{width:auto;height: 100%;}
	#course_area #course_list li .info_box{display: block;}
	#course_area .btn{left: unset;right:0;}
	#course_area .workframe{display: block;width: 80%;margin: 0 auto;}
	#course_area .area_title{margin-bottom: 5vw;}
	#courselist{display:none;}
    #course_tabs .tab_content .linkList{grid-template-columns:1fr;gap:70px}
	#course_tabs .tab_content .more_btn{left:auto;right:60px}
	#course_tabs{gap:70px}
	#course_tabs .tab_content .linkList .img_scale img{width:auto}
    #about_area .leftBox .Img:before{width: 5vw;}
    #about_area .leftBox .Img {padding: 0 0 0 0px;}
    #about_area .workframe{grid-template-columns: 510px 1fr;}
}
@media screen and (min-width: 1025px){
    #course_list li:first-child{grid-column: 1 / 4;background: #fff;position: relative;}
    #course_list li:first-child:after{content:'';position: absolute;width: 100%;height: 5px;background: var(--primary);bottom: 0;right: 0;}
    #course_list li:first-child >div{display:grid;grid-template-columns: 50% 50%;justify-content: space-between;align-items: center;}
    #course_list li:first-child >div img{position:relative;z-index: 2;}
    #course_list li:first-child .info_box{padding: 60px;display: flex;align-items: flex-start;gap: 20px;}
    #course_list li:first-child .info_box p{margin: 0;-webkit-line-clamp: 3;}
    #course_list li:first-child .info_box h3{font-size:26px;color: var(--primary);font-weight: 600;letter-spacing: 2px;}

}
@media screen and (max-width:1024px){
	#Service_area .aboutArea .aboutRight{padding:40px 30px}
	#about_area .slogan{right: 30px;}
	#service_area .workframe{margin:0 auto;}
    #service_area:before{display:none;}
    #course_list{grid-template-columns: repeat(2, 1fr);gap: 35px;}
    #course_area .tit article{text-align:center;}
    #course_area .tit{display:flex;flex-direction: column;align-items: center;gap: 20px;margin-bottom: 9vw;}
    section .title_box .subtitle{font-size:52px;padding-bottom: 20px;}
	section .title_box .page_title,#about_area .areaTitle .title_box h2,#about_area .rightBox .topGroup article h3,#conBox .tit h2{font-size:28px}
	#cooperate_area{padding:9vw 0 0 0}
	#about_area .workframe{grid-template-columns:1fr;gap:0}
	#about_area .leftBox .Img:before,#about_area .slogan,#service_area .serviceT img{display:none}
	#about_area .leftBox .Img,#about_area{padding:0}
    #about_area .leftBox .Img,#about_area img{aspect-ratio:4/ 3;width: 100%;}
	#service_area:after{width:280px}
	#about_area::after,#about_area .bg::after{height:100%}
	#course_tabs .tab_content .txtItem{margin-top:10px}
	section .title_box .page_title,#about_area .title_box .page_title .pageh1,#about_area .rightBox .topGroup article .title{font-size:1.4rem;letter-spacing:1px}
}

@media (min-width:961px){
	.bottombtn{position:absolute;bottom:60px;right:0}
}
@media (max-width: 960px){
    section .titleBox .subtitle{font-size:31px}
	#Service_area .aboutArea{grid-template-columns:1fr}
	#Service_area .linkList{padding:20px 0px}
	#about_area .areaTitle .title_box p{width:90%}
	#service_area .area_title{width:90%;margin: 0 auto;}
	#service_area .custom_list li img { width: 45vw; height: 45vw; }
	#service_area .arrow_btns_box .arrow { bottom: 20vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 25vw; }
	#service_area .arrow_btns_box .arrow.next { right: 25vw; }
    #course_tabs{grid-template-columns:1fr;gap:40px}
	#course_tabs .tabs{display:grid;grid-template-columns: repeat(2,1fr);gap:0px 10px}
	#course_tabs .tab_content .img_scale:before{left:-30px;bottom:-30px}
	#course_tabs .tab_content{padding: 0px 0px 30px 20px;}
	#course_tabs .tab_content .info_box article{margin-bottom:0}
	#course_tabs .tab_content .more_btn{right:0;top: 44%;}
    #course_tabs .tab_content .info_box article,#course_tabs .tabs li a,#about_area .rightBox .topGroup article .Txt{font-size: 1.1rem;}
	#course_tabs .tab_content .info_box .main-title em{font-size: 70px;right: 0;top: -70px;letter-spacing: .5px;}
}
@media screen and (max-width:640px){
	.bottombtn .coursebtn img{width: 16px;}
	#course_next::after{top: 6px;}
	#fly-could img,#fly-could02 img,#fly-could03 img,#fly-could04 img,#fly-could05 img{width: 37%;}
	#service_area .tit article{width:100%;}
    #service_area .tit article{width:100%;}
	#service_area .area_title{width: 80%;margin: 20px auto 0;}
	#service_area:after{height: 100%;width: 100%;background: rgb(247 247 247);}
	#service_area .custom_list li img { width: 60vw; height: 60vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 15vw; }
	#service_area .arrow_btns_box .arrow.next { right: 15vw; }
	#service_area .arrow_btns_box .arrow { bottom: 30vw; }
	#course_area .btn{position:relative;margin-top: 30px;}
	#course_area .info_box p{margin-bottom:15px}
    section .title_box .page_title, #about_area .areaTitle .title_box h2, #about_area .rightBox .topGroup article h3,#conBox .tit h2{font-size: 24px;}
	#product_area{padding: 6vw 0 22vw 0;}
	section .title_box .subtitle,section .title_box .subtitle .secondColor{font-size: 35px;}
}
@media screen and (max-width: 550px){
	#product_list { margin: 2vmax auto 0; width: min(100%, 350px); }
	#service_area .area_title .other_txt{line-height:1.3}
	#service_area:before{zoom: 70%;}
	#service_area .custom_list li img { width: 80vw; height: 80vw; }
	#service_area .custom_list li .info_box h3 { height: 1.5em; font-size: 7vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 5vw; }
	#service_area .arrow_btns_box .arrow.next { right: 5vw; }
	#course_area:after{display:none;}
    #course_list{grid-template-columns:1fr;gap: 15px;}
    #course_area .tit article{width:100%;}
	#course_area{padding: 20vw 0 3vw;margin: 0;}
	#course_area .workframe { flex-wrap: wrap; }
	#course_area .area_title.left { width: 100%; }
	#course_area .area_title.arrow_btns_box { margin-bottom: 1rem; width: 100%; justify-content: end; }
	#course_area #course_list li >div {margin: 30px 0 0;}
}