/* section */
section{padding: 6vw 0;}
section >*{z-index:5}
section .title_box{position:relative;margin-bottom: 30px;}
section .title_box:before{content:"";width:40px;height:1px;background:var(--primary);display:block;position:absolute;bottom: -15px;left:0}
section .title_box:after{content:"";width:100%;height:1px;background:var(--primary);display:block;position:absolute;bottom: -15px;left:0;z-index:-1;opacity:.2}
section .title_box h2{-webkit-background-clip:text;background-clip:text;font-size:2.5rem;color:var(--info);letter-spacing:2px}
section .title_box .subtitle{font-weight:600;font-size:22px;color:var(--primary);position:relative;font-family:"Inter",sans-serif;line-height:120%}
section .title_box p{line-height:130%;letter-spacing:0.5px;font-weight:400;font-size:20px;color:#181818;position:relative}
section.bg_box{background:no-repeat 50% / cover;}
.more_btn{margin-top:0px}
.more_btn .linen{position: absolute;top: 0;right: 0;width: 96%;height: 96%;border: 1px var(--primary) solid;border-radius: 50px;}
.more_btn{position:relative;overflow:hidden;width:40px;height:40px;border-radius:50px;display:flex;gap:0px;flex-direction:column;justify-content:center;align-items:center;padding:8px;margin-top:20px}
.more_btn a{background-color:var(--primary);position:relative;padding:22px;border-radius:50px;text-align:center;display:flex;gap:0px;flex-direction:column;justify-content:center;align-items:center}
.more_btn a .arrow{position:relative}
.more_btn a .arrow::before{content:"";position:absolute;width:12px;height:12px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;right:-4px;top:50%;-webkit-transform:translateY(-50%) rotate(225deg);transform:translateY(-50%) rotate(225deg);z-index:30}

#wrap{position:relative;}
#wrap::before{content:"";height:30px;width: 100%;background-color: var(--primary);position:absolute;left: 0;top: 0px;z-index: 10;}

/* aboutArea */
.aboutArea{padding: 180px 0 40px;background-image: url(/images/45/img-ab-bg.jpg);background-repeat: no-repeat;background-position: 50% 0;position: relative;}
.aboutArea::before{content:"";position:absolute;height:640px;width:min(1748px,100%);background-color:#ffffff;left:0;bottom:0;border-radius:0 0 180px  0}
.aboutArea .aboutListBox .workframe{margin:0 auto;display:grid;grid-template-columns:28% 64%;align-items:start;position:relative;justify-content:space-between}
.aboutArea .left{z-index:10}
.aboutArea .about-lead{font-size:1.15rem;line-height:1.9;margin:0 0 24px;color:var(--info)}
.aboutArea .about-lab{margin:45px 0 0 70px;width:125%;aspect-ratio:13/9;border-radius:20px;overflow:hidden;box-shadow:0 10px 24px rgb(36 38 41 / 12%)}
.aboutArea .about-lab img{width:100%;height:100%;object-fit:cover;display:block}
.aboutArea .about-hero-wrap{position:relative;width:86%;margin:20px auto 16px 0}
.aboutArea .about-hero-frame{position:absolute;inset:-50px -70px auto auto;width:84%;height:88%;background:var(--primary);border-radius:18px;z-index:0}
.aboutArea .about-hero{position:relative;z-index:1;width:100%;height:auto;border-radius:20px;display:block}
.aboutArea .aboutcard{padding:40px 60px;border:1px solid #e8eff9;border-radius:20px;height:250px;width:400px;overflow:hidden;background:url(/images/45/img-ab-t-bg.png) #fff  no-repeat;background-position:250px -100%;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.1);box-shadow:0 3px 7px rgba(0,0,0,0.1);z-index:10;right:-70px;bottom:-10px;position:absolute}
.aboutcard::before{content:"";width:13px;height:100%;background-color:#0033a0;display:block;position:absolute;left:0;top:0}
.aboutArea .aboutcard .abouttitle{font-size: clamp(22px,2.1vw,26px);font-weight:600;margin:4px 0 10px}
.aboutArea .aboutcard .abouttext{line-height:1.9;margin:0;font-size:1.15rem}
.aboutArea #iconList{padding: 100px 0 40px 0;align-items:flex-start;position:relative}
.aboutArea #iconList .workframe{display:grid;grid-template-columns:1fr 310px;gap: 3vw;width:min(1440px,88%);justify-content:space-between;align-items:center}
.aboutArea #iconList .left ul{display:flex}
.aboutArea #iconList .left li{position:relative;flex:1 1 0;text-align:center}
.aboutArea #iconList .left li:not(:last-child):after{content:"";position:absolute;width:1px;height:60%;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:#e0e0e0;z-index:5}
.aboutArea #iconList .left li .iconimg{width:140px;height:140px;border-radius:50%;place-items:center;background:#0a4ea9;margin:0 auto 12px;display:flex;justify-content:center}
.aboutArea #iconList .left li:nth-child(2n)  .iconimg{background:#e4f1ff}
.aboutArea #iconList .left li .iconimg img{width:56px;height:56px;display:block;object-fit:contain}
.aboutArea #iconList .left li .iconTitle{font-weight:500;font-size:1.3rem;letter-spacing:.02em;height:auto;text-align: center;}
.aboutArea #iconList .right .img_scale{display:flex;flex-direction:column}
.aboutArea #iconList .right .img_scale img{    border-radius: 20px;}


/* newsArea */
#newsArea{padding: 12vmin 0 4vmax;position:relative;background-image: url(/images/45/img-n-bg-3.png);background-repeat:no-repeat;background-position: 120% 110%;background-size:auto}
#newsArea .workframe{width: min(1500px,88%);}
#newsArea .titleBox{margin-bottom: 80px;display:flex;flex-direction:column;align-items:center}
#newsArea .title_box{width:min(90%,380px)}
#newsArea .title_box .subtitle,#newsArea .title_box h2{text-align:center}
#newsArea .title_box:before{left:50%;transform:translate(-50%,0)}
#newsArea .noteBox{font-size:1.2rem;letter-spacing:.5px}
#newsArea #news_list ul{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-bottom:60px}
#newsArea #news_list ul li .item_row{display:grid;grid-template-columns:240px 1fr;gap:30px}
#newsArea #news_list ul li .item_row .Img img{border-radius:30px;object-fit: cover;aspect-ratio: 4 / 3;}
#newsArea #news_list ul li .item_row .Txt{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:40px}
#newsArea #news_list ul li .item_row .Txt .date{display:flex;flex-direction:column;align-items:center;position:relative}
#newsArea #news_list ul li .item_row .Txt .date *,#messageArea .messageListBox .List li .InfoBox .date *{    font-family: "Inter", sans-serif;}
#newsArea #news_list ul li .item_row .Txt .date:after{content:"";position:absolute;width:1px;height:110%;right:-20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:#e0e0e0;z-index:5}
#newsArea #news_list ul li .item_row .Txt .date .day{font-size:2.8rem;line-height:130%;font-weight:500;}
#newsArea #news_list ul li .item_row .Txt .date .year{color:var(--primary);font-size:14px;font-weight:600}
#newsArea #news_list ul li .item_row .Txt .arrowBox .time a{color:var(--primary);padding:1px 11px;border-radius:20px;font-size: .9rem;line-height: 180%;border:1px var(--primary) solid;font-weight:500}
#newsArea #news_list ul li .item_row .Txt .title{height:auto;-webkit-line-clamp:2;font-size:1.3rem;line-height:160%;margin-top:14px;font-weight:500}
#newsArea .news_btn{text-align:end;display:flex;align-items:center;justify-content:center}
#newsArea .news_btn .more_btn{width:100px;height: 60px;padding:0}
#newsArea .news_btn .more_btn a{background:none;border-radius:0}

/* messageArea */
#belowArea{position:relative;overflow: hidden;}
#belowArea:before{content:'';background-image: url(/images/45/img-n-bg.png);background-repeat: no-repeat;background-position: 50% 0;background-size: contain;border-radius: 0 250px 0  0;width: 100%;height: 100%;position: absolute;top: 0px;left: 0;}
#messageArea{padding:12vmin 0 3vmax;overflow:initial;position:relative}
#messageArea .messageListBox{display:grid;grid-template-columns:repeat(2,1fr);gap:90px}
#messageArea .messageListBox .titleBox{display:flex;align-items:center;gap:20px;margin-bottom:20px}
#messageArea .messageListBox .title_box{}
#messageArea .messageListBox .titleBox .more_btn{margin-top:0}
#messageArea .messageListBox .List li{display:grid;grid-template-columns:130px 1fr;align-items:center;border-bottom:1px solid #e4e4e4;padding:28px 0px;margin:0 0 2px;gap:20px}
#messageArea .messageListBox .List li .InfoBox *{font-weight:700;line-height:140%}
#messageArea .messageListBox .List li .InfoBox{display:flex;flex-direction:column;align-items:center;border-right:1px solid #e4e4e4;padding:0 20px}
#messageArea .messageListBox .List li .InfoBox .date *,#messageArea .messageListBox .List li .InfoBox .date{color:var(--primary)}
#messageArea .messageListBox .List li .InfoBox .date{display:flex;flex-direction:column;align-items:center;margin-bottom:7px}
#messageArea .messageListBox .List li .InfoBox .date .day{font-size:1.6rem}
#messageArea .messageListBox .List li .InfoBox .classTitle a{padding:2px 10px;background-color:var(--primary);border-radius:50px;color:#fff;line-height:180%;font-weight:400;font-size:14px}
#messageArea .messageListBox .List li .Ntitle_box .title{font-size:1.25rem;line-height:150%;height:auto;-webkit-line-clamp:2}
#messageArea .messageListBox .List li .Ntitle_box p{margin-top:10px;color:#4d4d4d}


/* promoLinks */
.promoLinks{padding: 10vmin 0 7vmax;position: relative;z-index: 10;}
.promoLinks::before{content:"";position:absolute;height: 100%;width: 94%;background-color: #ffffff;border-radius: 100px 100px 0 0;z-index: -1;top: 0;left: 50%;transform: translate(-50%, 0%);}
.promoLinks .workframe{width: min(1560px, 88%);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap: 60px;}
.promoLinks .Linksitem{min-width:0}
.promoLinks .Img{width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin:0 0 18px;box-shadow:0 8px 18px rgba(10,78,169,.10)}
.promoLinks .Img img{width:100%;height:100%;object-fit:cover;display:block}
.promoLinks .title{font-size: 22px;font-weight: 500;margin:0 0 14px;letter-spacing:.02em}
.promoLinks .LinksList{border-top: 1px solid #d8d8d8;padding-top:12px}
.promoLinks .LinksList li{margin:10px 0}
.promoLinks .LinksList a{position:relative;display:inline-block;padding-left:22px;text-decoration:none;color:var(--muted);line-height:1.65;transition:color .15s ease}
.promoLinks .LinksList a::before{content:"";position:absolute;background-image: url(/images/45/icon-links.png);background-size: contain;width: 10px;height: 10px;top: 50%;left: 0;transform: translate(0%, -50%);}
.promoLinks .LinksList a:hover{color:var(--blue)}



@media screen and (max-width:1440px){
    #wrap::before{height:15px}
	section .title_box h2{font-size:2rem}
	.aboutArea::before{height:50%}
}

@media screen and (min-width:1281px){
	#newsArea::before{content:"";height: 770px;width: 770px;background: url(/images/45/img-n-bg-1.png);position:absolute;left: -400px;bottom: -100px;z-index: -2;}
	#newsArea::after{content:"";height: 770px;width: 770px;background: url(/images/45/img-n-bg-2.png);position:absolute;right: -350px;bottom: 670px;z-index: -2;}
}
@media screen and (max-width:1280px){
	.promoLinks .workframe{gap:20px}
	#belowArea:before{border-radius:0 120px 0 0}
	#imglist .img_nav{position:relative}
	.aboutArea #iconList .left li .iconimg{width:120px;height:120px}
	.aboutArea #iconList .left li .iconimg img{width:50px;height:50px}
	.aboutArea #iconList .left li .iconTitle{font-size:1.1rem}
	.aboutArea #iconList .workframe{gap:9vw;display: flex;flex-direction: column;}
	.aboutArea .left, .aboutArea .right{width:100%}
	.aboutArea .aboutListBox .workframe{grid-template-columns:40% 56%}
	.aboutArea .about-hero-wrap{width:97%;margin:20px auto 0 0}
	.aboutArea .about-hero-frame{inset:-30px -30px auto auto}
	.aboutArea .about-lab{margin:45px 0 0 0px}
	#newsArea{padding:5vmin 0 4vmax}
	#newsArea #news_list ul{grid-template-columns:repeat(1,1fr);margin-bottom:20px}
}

@media screen and (max-width:1024px){
	#messageArea .messageListBox{grid-template-columns:repeat(1,1fr);gap:50px}
}
@media screen and (max-width:960px){
    .promoLinks .workframe{grid-template-columns:repeat(2,1fr);gap:40px}
	.aboutArea{padding:70px 0 40px}
	.aboutArea .about-lab{display:none}
	.aboutArea .about-hero-wrap{width:100%}
	.aboutArea .aboutcard{height:auto;width:-webkit-fill-available;right:0;top:-20px;position:relative;padding:30px 20px 30px 40px}
	.aboutArea .aboutListBox .workframe{grid-template-columns:1fr;gap:60px}
}
@media screen and (max-width:768px){
	section .title_box .subtitle{font-size:1.1rem}
	section .title_box h2{margin-bottom:0;font-size:1.5rem}
	.aboutArea{padding:60px 0 20px}
	.aboutArea #iconList .left ul{display:grid;grid-template-columns:repeat( 2,1fr);gap:30px}
	.aboutArea #iconList .left li:not(:last-child):after{right:-15px}
	.aboutArea #iconList .left li:nth-child(2):after{display:none}
	.aboutArea #iconList{padding:20px 0 20px 0}
	.aboutArea .aboutcard .abouttext{font-size:1.05rem}
	#messageArea .messageListBox .List li{grid-template-columns:100px 1fr;gap:10px}
	#messageArea .messageListBox .List li .InfoBox{padding:0 10px}
	#messageArea .messageListBox .List li .Ntitle_box .title{font-size:1.1rem}
	#messageArea .messageListBox .List li .InfoBox .date .day{font-size:1.2rem}
	#newsArea{padding:7vmin 0 4vmax}
	#newsArea #news_list ul li .item_row{grid-template-columns:1fr;gap:20px}
	#newsArea #news_list ul li .item_row .Img img{aspect-ratio:6 / 3}
	#newsArea #news_list ul li .item_row .Txt .title{font-size:1.15rem;margin-top:8px}
	#newsArea .news_btn .more_btn{width:75px}
	#newsArea .titleBox{margin-bottom:40px}
}
@media screen and (max-width:640px){
	.bottombtn .productbtn img{width:16px}
	.promoLinks .workframe{grid-template-columns:repeat(1,1fr);gap:40px;width:75%}
	#newsArea #news_list ul li .item_row .Txt .date .day{font-size:2rem}
	#newsArea #news_list ul li .item_row .Txt{grid-template-columns:70px 1fr;gap:20px}
	#newsArea #news_list ul li .item_row .Txt .date:after{right:-10px}
}