@charset "utf-8";

.subtitleTop { position:relative; z-index:15; height:420px; } 
.subtitleTop .visual-box { position:relative; height:100%; max-height:1000px; }
.subtitleTop .visual-box .titCont { position:relative; overflow:hidden; height:100%; max-height:1000px; }
.subtitleTop .bg { position:relative; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.subtitleTop .bg:before { content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 57.68%, rgba(0, 0, 0, 0.60) 100%); }
.subTopCont1 .bg { background-image:url(/img/sub/visualsub_bg1.jpg); }
.subTopCont2 .bg { background-image:url(/img/sub/visualsub_bg2.jpg); }
.subTopCont3 .bg { background-image:url(/img/sub/visualsub_bg3.jpg); }
.subTopCont4 .bg { background-image:url(/img/sub/visualsub_bg4.jpg); }
.subTopCont5 .bg { background-image:url(/img/sub/visualsub_bg5.jpg); }
.subTopCont6 .bg { background-image:url(/img/sub/visualsub_bg6.jpg); }
.subTopCont10 .bg { background-image:url(/img/sub/visualsub_bg10.jpg); }
.subTopCont11 .bg { background-image:url(/img/sub/visualsub_bg11.jpg); }
.subTopCont1_bg1 .bg { background-image:url(/img/sub/visualsub_bg1_1.jpg); }
.subTopCont1_bg2 .bg { background-image:url(/img/sub/visualsub_bg1_2.jpg); }
.subTopCont1_bg3 .bg { background-image:url(/img/sub/visualsub_bg1_3.jpg); }
.subTopCont1_bg4 .bg { background-image:url(/img/sub/visualsub_bg1_4.jpg); }
.subTopCont1_bg5 .bg { background-image:url(/img/sub/visualsub_bg1_5.jpg); background-position:center top; }
.subTopCont1_bg6 .bg { background-image:url(/img/sub/visualsub_bg1_6.jpg); background-position:center top; }
.subTopCont1_bg7 .bg { background-image:url(/img/sub/visualsub_bg1_7.jpg); }
.subtitleTop .sub-titleBox { position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; z-index:2; text-align:center; }
.subtitleTop .location { margin-top:30px; }
.subtitleTop .location dl { display:flex; justify-content:center; align-items:center; }
.subtitleTop .location dt { width:14px; height:14px; background:url(/img/sub/home_icon.svg) center no-repeat; background-size:14px auto; overflow:hidden; text-indent:-9999em; }
.subtitleTop .location dd span,
.subtitleTop .location dd strong { position:relative; display:inline-block; padding-left:20px; margin-left:20px; color:#fff; font-size:17px; font-weight:600; line-height:1.3; }
.subtitleTop .location dd span:before,
.subtitleTop .location dd strong:before { content:""; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:3px; border-radius:5px; background:#fff; }
.subtitleTop .depthMenu { position:absolute; left:0; bottom:0; width:100%; z-index:5; border-top:1px solid rgba(255, 255, 255, 0.10); transition:all 0.3s }
.subtitleTop .depthMenu .stit { display:none }
.subtitleTop .submenu-box { max-width:1600px; margin:0 auto; display:block; }
.subtitleTop .submenu-box ul { display:flex; justify-content:center; align-items:center; }
.subtitleTop .submenu-box li a { position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:70px; color:rgba(255, 255, 255, 0.3); font-size:21px; font-weight:600; line-height:1.3; transition:all 0.3s ease-in-out }
.subtitleTop .submenu-box li a:before { content:""; display:block; position:absolute; left:50%; top:-1px; transform:translateX(-50%); width:0; height:2px; background:#fff; transition:all 0.3s ease-in-out}
.subtitleTop .submenu-box li a:hover,
.subtitleTop .submenu-box li.over a { color:#fff; }
.subtitleTop .submenu-box li.over a:before,
.subtitleTop .submenu-box li a:hover:before { width:100%; }
.subtitleTop .submenu-box .esg { display:none }
.subtitleTop .submenu-box .m2 li { width:calc(100% / 2); }
.subtitleTop .submenu-box .m3 li { width:calc(100% / 3); }
.subtitleTop .submenu-box .m4 li { width:calc(100% / 4); }
.subtitleTop .submenu-box .m5 li { width:calc(100% / 5); }
.subtitleTop .submenu-box .m6 li { width:calc(100% / 6); }
.subtitleTop .submenu-box .m7 li { width:calc(100% / 7); }
.subtitleTop .submenu-box .m8 li { width:calc(100% / 8); }
.subtitleTop h3 span { font-family:var(--mainFont); color:#fff; font-size:94px; font-weight:500; line-height:1.3; }
.subtitleTop.active .depthMenu { position:fixed; top:100px; bottom:unset; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; background:#fff; height:70px; } 
.subtitleTop.active .submenu-box li a { color:#ccc }
.subtitleTop.active .submenu-box li a:before { background:var(--mainColor); }
.subtitleTop.active .submenu-box li a:hover,
.subtitleTop.active .submenu-box li.over a { color:var(--mainColor); }
@media screen and (max-width:1560px){
	.subtitleTop { height:400px; }
	.subtitleTop .location { margin-top:25px; }
	.subtitleTop .location dt { width:17px; height:17px; }
	.subtitleTop .location dd span,
	.subtitleTop .location dd strong { padding-left:20px; margin-left:20px; font-size:17px; }
	.subtitleTop .submenu-box li a { font-size:20px; }
	.subtitleTop h3 span { font-size:80px; } 
}
@media screen and (max-width:1200px){
	.subtitleTop { height:360px; }
	.subtitleTop .location { margin-top:20px; }
	.subtitleTop .location dt { width:15px; height:15px; background-size:15px auto }
	.subtitleTop .location dd span,
	.subtitleTop .location dd strong { padding-left:18px; margin-left:18px; font-size:16px; }
	.subtitleTop .submenu-box li a { font-size:19px; }
	.subtitleTop h3 span { font-size:65px; } 
	.subtitleTop.active .depthMenu { top:80px; height:65px; } 
}
@media screen and (max-width:1024px){
	.subtitleTop { height:340px; }
	.subtitleTop .bg { height:550px;  }
	.subtitleTop .location { margin-top:15px; }
	.subtitleTop .location dt { width:13px; height:13px; background-size:13px auto }
	.subtitleTop .location dd span,
	.subtitleTop .location dd strong { padding-left:15px; margin-left:15px; font-size:15px; }
	.subtitleTop .location dd span:before,
	.subtitleTop .location dd strong:before { width:2px; height:2px; }
	.subtitleTop .submenu-box li a { height:60px; font-size:18px; }	
	.subtitleTop .sub-titleBox { top:55%; }
	.subtitleTop h3 span { font-size:50px; } 
	.subtitleTop.active .depthMenu { top:80px; height:60px; } 
}
@media screen and (max-width:760px){
	.subtitleTop .depthMenu .stit { cursor:pointer; display:block; height:60px; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); color:#fff; font-size:18px; font-weight:600; line-height:1.3; display:flex; align-items:center; padding:0 20px; }
	.subtitleTop .depthMenu .stit:before { content:""; display:block; width:25px; height:25px; position:absolute; right:20px; top:50%; transform:translateY(-50%); transition:all 0.5s; background:url(/img/common/gnb_m_arr.svg) center center no-repeat; opacity:0.5 }
	.subtitleTop .depthMenu .stit.ov:before { transform:translateY(-50%) rotate(180deg); }
	.subtitleTop .submenu-box { display:none; background:#fff; position:absolute; left:0; top:59px; width:100%; }
	.subtitleTop .submenu-box ul { display:block; }
	.subtitleTop .submenu-box li a { border:none; border-bottom:1px solid rgba(0, 0, 0, 0.10); padding:0 20px; justify-content:flex-start; height:60px; color:#ccc; font-size:17px; font-weight:600; line-height:1.3; transition:all 0.3s ease-in-out }
	.subtitleTop .submenu-box li a:before { display:none; }
	.subtitleTop .submenu-box li a:hover { color:#ccc; }
	.subtitleTop .submenu-box li.over a { color:var(--mainColor); }
	.subtitleTop .submenu-box .esg { display:none }
	.subtitleTop .submenu-box .m2 li,
	.subtitleTop .submenu-box .m3 li,
	.subtitleTop .submenu-box .m4 li,
	.subtitleTop .submenu-box .m5 li,
	.subtitleTop .submenu-box .m6 li,
	.subtitleTop .submenu-box .m7 li,
	.subtitleTop .submenu-box .m8 li { width:100% }
	.subtitleTop.active .depthMenu { top:70px; }
	.subtitleTop.active  .depthMenu .stit:before { filter:invert(); }
	.subtitleTop.active .stit { color:#111; backdrop-filter:blur(0); }
	.subtitleTop.active .depthMenu { top:80px; } 
}
@media screen and (max-width:640px){
	.subtitleTop { height:280px; }
	.subtitleTop .bg { height:500px; }
	.subtitleTop .location { margin-top:15px; }
	.subtitleTop .location dd span,
	.subtitleTop .location dd strong { padding-left:12px; margin-left:12px; font-size:14px; }
	.subtitleTop h3 span { font-size:40px; }
	.subtitleTop .depthMenu .stit { height:50px; }
	.subtitleTop.active .depthMenu { top:70px; height:50px; } 
	.subtitleTop .submenu-box { top:49px; }
	.subtitleTop .submenu-box li a { height:50px; font-size:16px; }
}

/* animation */
/*
.subtitleTop .visual-box,
.subtitleTop .visual-box .titCont,
.subtitleTop .bg:before { animation:subTopH 0.5s 0.5s; animation-fill-mode:both; }
*/
/* .subtitleTop .bg { animation:subTopBg 0.5s 0.5s; animation-fill-mode:both; } */
.subtitleTop .bg { animation:subTopBg 0.8s 0.1s; animation-fill-mode:both; }
.subtitleTop h3 span { display:inline-block }
.subtitleTop h3 span > span {  }
.subtitleTop .sub-titleBox { animation:ani_5 0.5s 0.5s; animation-fill-mode:both; }
.subtitleTop .depthMenu { animation:ani_5 0.5s 0.5s; animation-fill-mode:both; }
@keyframes subTopH {
	0% { height:420px; }
	100% { height:420px; }
}
@keyframes subTopBg {
	0% { transform:scale(1.2); }
	100% { transform:scale(1); }
}
@media screen and (max-width:1560px){
	@keyframes subTopH {
		0% { height:100vh; }
		100% { height:580px; }
	}
}
@media screen and (max-width:1200px){
	@keyframes subTopH {
		0% { height:100vh; }
		100% { height:520px; }
	}
}
@media screen and (max-width:1024px){
	@keyframes subTopH {
		0% { height:400px; }
		100% { height:400px; }
	}
	@keyframes subTopBg {
		0% { transform:scale(1); }
		100% { transform:scale(1); }
	}
}
@media screen and (max-width:640px){
	@keyframes subTopH {
		0% { height:360px; }
		100% { height:360px; }
	}
	@keyframes subTopBg {
		0% { transform:scale(1); }
		100% { transform:scale(1); }
	}
}

#subContents { padding:150px 0 0; }
.subContB { padding:0 0 200px; }
@media screen and (max-width:1400px){
    #subContents { padding:110px 0 0; }
    .subContB { padding:0 0 150px; }
}
@media screen and (max-width:1024px){
    #subContents { padding:80px 0 0; }
    .subContB { padding:0 0 100px; }
}
@media screen and (max-width:640px){
    #subContents { padding:40px 0 0; }
    .subContB { padding:0 0 60px; }
}

.subTitle-box { text-align:center; margin-bottom:120px; }
.subTitle-box h3 { font-size:64px; font-weight:700; color:#111; line-height:1.3; }
.subTitle-box h3 span { font-weight:700; }
.subTitle-box .txt { margin-top:30px; font-size:23px; font-weight:300; color:#333; line-height:1.3; }
@media screen and (max-width:1200px){
	.subTitle-box { margin-bottom:80px; }
    .subTitle-box h3 { font-size:50px; }
	.subTitle-box .txt { margin-top:25px; font-size:21px;  }
}
@media screen and (max-width:1024px){
	.subTitle-box { margin-bottom:60px; }
    .subTitle-box h3 { font-size:40px; }
	.subTitle-box .txt { margin-top:20px; font-size:19px; }
}
@media screen and (max-width:640px){
	.subTitle-box { margin-bottom:40px; }
    .subTitle-box h3 { font-size:30px; }
    .subTitle-box .txt { margin-top:10px; font-size:15px; }
}

/* animation */
.subTitle-box h3 { overflow:hidden }
.subTitle-box h3 span { display:block; animation:ani_5 1.0s 0.7s; animation-fill-mode:both; }
.subTitle-box .txt { display:block; animation:ani_5 .8s 1.0s; animation-fill-mode:both; }


#subContents .btnbox { text-align:center; }
#subContents .btnbox a,
#subContents .btnbox button { display:inline-block; text-align:center; border:none; outline:none; background:none; margin:0 8px; vertical-align:middle; }
#subContents .btnbox a span,
#subContents .btnbox button span { margin:0 auto; justify-content:center; align-items:center; display:flex; position:relative; text-align:center; border:none; border-radius:10px; outline:none; background:var(--mainColor); min-width:180px; height:75px; color:#fff; font-size:20px; font-weight:600; line-height:1.3; }
#subContents .btnbox a.bg_g span,
#subContents .btnbox button.bg_g span { background:#eee; color:#ccc }
#subContents .btnbox i { display:inline-block; vertical-align:middle; margin-right:10px; }
@media screen and (max-width:1024px){	
	#subContents .btnbox { margin-top:80px; }
	#subContents .btnbox a span,
	#subContents .btnbox button span { height:60px; font-size:18px; border-radius:5px; }
}
@media screen and (max-width:640px){	
    #subContents .btnbox { margin-top:60px; }
    #subContents .btnbox a,
    #subContents .btnbox button { margin:0 3px; }
	#subContents .btnbox a span,
	#subContents .btnbox button span { min-width:160px; height:50px; font-size:16px; }
}

/* tabmenu */
.tabmenu { margin-bottom:120px; }
.tabmenu > ul { text-align:center; display:flex; flex-wrap:wrap; gap:20px; }
.tabmenu.m2 > ul > li { width:calc((100% - 20px) / 2); }
.tabmenu.m3 > ul > li { width:calc((100% - 40px) / 3); }
.tabmenu.m4 > ul > li { width:calc((100% - 60px) / 4); }
.tabmenu.m5 > ul > li { width:calc((100% - 80px) / 5); }
.tabmenu.m6 > ul > li { width:calc((100% - 100px) / 6); }
.tabmenu.m7 > ul > li { width:calc((100% - 120px) / 7); }
.tabmenu > ul > li a { position:relative; color:#aaa; font-size:19px; font-weight:700; line-height:1.3; height:80px; display:flex; justify-content:center; align-items:center; background:#f8f8f8; border:1px solid #f8f8f8; text-align:center; transition:all 0.3s; border-radius:20px; }
.tabmenu > ul > li.active a { color:var(--mainColor); background:#fff; border:2px solid var(--mainColor); }
@media screen and (max-width:1024px){	
    .tabmenu { margin-bottom:80px; }
	.tabmenu > ul { gap:10px; }
    .tabmenu > ul > li a { font-size:18px; height:65px; border-radius:10px; }
	.tabmenu > ul > li.active a { border-width:1px; }
	.tabmenu.m2 > ul > li { width:calc((100% - 10px) / 2); }
	.tabmenu.m3 > ul > li { width:calc((100% - 20px) / 3); }
	.tabmenu.m4 > ul > li,
	.tabmenu.m5 > ul > li,
	.tabmenu.m6 > ul > li,
	.tabmenu.m7 > ul > li { width:calc((100% - 30px) / 4); }
}
@media screen and (max-width:760px){
	.tabmenu.m4 > ul > li,
	.tabmenu.m5 > ul > li,
	.tabmenu.m6 > ul > li,
	.tabmenu.m7 > ul > li { width:calc((100% - 20px) / 3); }
}
@media screen and (max-width:640px){	
    .tabmenu { margin-bottom:40px; }
	.tabmenu > ul { gap:5px; }
    .tabmenu > ul > li a { font-size:16px; height:50px; }
	.tabmenu.m3 > ul > li
	.tabmenu.m4 > ul > li,
	.tabmenu.m5 > ul > li,
	.tabmenu.m6 > ul > li,
	.tabmenu.m7 > ul > li { width:calc((100% - 5px) / 2); }
}

/* business */
.business-box .businessTop .box { overflow:hidden; display:flex; flex-wrap:wrap; padding:80px; border-radius:20px; border:4px solid #e5e5e5; }
.business-box .businessTop .box .imgbox { width:420px; }
.business-box .businessTop .box .imgbox img { width:100%; border-radius:20px; } 
.business-box .businessTop .box .txtbox { width:calc(100% - 420px); padding-left:80px; }
.business-box .businessTop .box .txtbox dt strong { display:block; font-family:var(--mainFont); color:var(--mainColor); font-size:21px; font-weight:700; line-height:1.5; }
.business-box .businessTop .box .txtbox dt span { margin-top:20px; display:block; color:#111; font-size:32px; font-weight:600; line-height:1.7; }
.business-box .businessTop .box .txtbox dd { margin-top:60px; }
.business-box .businessTop .box .txtbox dd > p { color:#333; font-size:21px; font-weight:300; line-height:1.7; }
.business-box .businessTop .box .txtbox dd > p:not(:last-child) { margin-bottom:40px; }
.business-box .businessTop .feature-box { margin-top:180px; overflow:hidden; }
.business-box .businessTop .feature-box h4 span { color:#333; font-size:36px; font-weight:600; line-height:1.3; }
.business-box .businessTop .feature-box .list-1 ul { margin-top:40px; display:flex; flex-wrap:wrap; gap:20px; }
.business-box .businessTop .feature-box .list-1 ul li { width:calc((100% - 40px) / 3); padding:40px; display:flex; flex-direction:column; justify-content:space-between; border-radius:20px; border:2px solid rgba(0, 75, 208, 0.05); background:#F4F5F9; }
.business-box .businessTop .feature-box .list-1 ul li .num { font-family:var(--mainFont); color:rgba(255,255,255,1); font-size:17px; font-weight:700; line-height:1.3; width:50px; height:50px; border-radius:10px; background:var(--mainColor); display:flex; align-items:center; justify-content:center; }
.business-box .businessTop .feature-box .list-1 ul li dt { margin-top:40px; display:block; color:#333; font-size:23px; font-weight:600; line-height:1.5; }
.business-box .businessTop .feature-box .list-1 ul li dd { margin-top:5px; display:block; color:#333; font-size:21px; font-weight:300; line-height:1.5; }
.business-box .businessTop .feature-box .list-2 { margin-top:180px; display:flex; flex-wrap:wrap; }
.business-box .businessTop .feature-box .list-2 h4 { width:33.33%; }
.business-box .businessTop .feature-box .list-2 ul { width:calc(100% - 33.33%); border-top:2px solid #000; }
.business-box .businessTop .feature-box .list-2 ul li { border-bottom:1px solid #E5E5E5; padding:40px; display:flex; align-items:center; gap:0 40px; }
.business-box .businessTop .feature-box .list-2 ul li .txt { color:#333; font-size:21px; font-weight:300; line-height:1.3; }
.business-box .businessTop .feature-box .list-2 ul li .txt strong { font-weight:600; }
.business-box .boxBg { text-align:center; margin-top:180px; padding:180px 0; }
.business-box .boxBg.MetaFAB { background:url(/img/sub/MetaFAB_bg.jpg) no-repeat center / cover; }
.business-box .boxBg.Twin { background:url(/img/sub/Twin_bg.jpg) no-repeat center / cover; }
.business-box .boxBg.Engineering { background:url(/img/sub/Engineering_bg.jpg) no-repeat center / cover; }
.business-box .boxBg.Bending { background:url(/img/sub/Bending_bg.jpg) no-repeat center / cover; }
.business-box .boxBg.Edu { background:url(/img/sub/Edu_bg.jpg) no-repeat center / cover; }
.business-box .boxBg.Si { background:url(/img/sub/Si_bg.jpg) no-repeat center / cover; }
.business-box .boxBg.Plant { background:url(/img/sub/Plant_bg.jpg) no-repeat center / cover; }
.business-box .boxBg .txt-1 { color:#fff; font-size:48px; font-weight:700; line-height:1.7; letter-spacing:-0.06em; }
.business-box .boxBg .txt-2 { margin-top:60px; display:flex; justify-content:center; }
.business-box .boxBg .txt-2 > div { position:relative; color:#fff; font-size:24px; font-weight:500; line-height:1.3; }
.business-box .boxBg .txt-2 .stxt-2 { margin-left:30px; }
.business-box .businessList .listbox { margin-top:180px; overflow:hidden; }
.business-box .businessList .listbox > ul > li { display:flex; flex-wrap:wrap; gap:120px; align-items:center; }
.business-box .businessList .listbox > ul > li.full { align-items:flex-start; }
.business-box .businessList .listbox > ul > li:not(:last-child) { margin-bottom:120px; }
.business-box .businessList .listbox > ul > li > div { width:calc((100% - 120px) / 2); }
.business-box .businessList .listbox > ul > li .imgbox { position:relative; }
.business-box .businessList .listbox > ul > li .imgbox span { width:100%; height:100%; border-radius:20px; border:2px solid #E5E5E5; display:block; overflow:hidden }
.business-box .businessList .listbox > ul > li .imgbox span.noLine { border:none }
.business-box .businessList .listbox > ul > li .imgbox img { width:100%; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dt { color:#111; font-size:32px; font-weight:500; line-height:1.6; letter-spacing:-0.05em; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd { margin-top:60px; color:#333; font-size:19px; font-weight:300; line-height:1.7; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd > p { color:#333; font-weight:300; line-height:1.7; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd > p:not(:last-child) { margin-bottom:40px; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:60px; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dt { color:var(--mainColor); font-weight:600; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd { margin-top:10px; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd ul { display:flex; flex-wrap:wrap; gap:0 25px; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd ul li { position:relative; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd ul li:before { content:""; display:block; position:absolute; right:-13px; top:50%; transform:translateY(-50%); width:1px; height:15px; background:#333; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd ul li:last-child:before { display:none }
.business-box .businessList .listbox > ul > li:nth-child(2n) { flex-direction:row-reverse; }
.business-box .businessList .listbox > ul > li:nth-child(2n) .txtbox { text-align:right; }
@media screen and (max-width:1560px){
	.business-box .businessTop .box { padding:60px; }
	.business-box .businessTop .box .imgbox { width:380px; } 
	.business-box .businessTop .box .txtbox { width:calc(100% - 380px); padding-left:60px; }
	.business-box .businessTop .box .txtbox dt strong { font-size:20px;  }
	.business-box .businessTop .box .txtbox dt span { margin-top:15px; font-size:28px; }
	.business-box .businessTop .box .txtbox dt br { display:none }
	.business-box .businessTop .box .txtbox dt .m_br { display:block }
	.business-box .businessTop .box .txtbox dd { margin-top:40px; }
	.business-box .businessTop .box .txtbox dd > p { font-size:20px; }
	.business-box .businessTop .box .txtbox dd > p:not(:last-child) { margin-bottom:30px; }
	.business-box .businessTop .feature-box { margin-top:140px; }
	.business-box .businessTop .feature-box h4 span { font-size:30px; }
	.business-box .businessTop .feature-box .list-1 ul { margin-top:30px; gap:20px; }
	.business-box .businessTop .feature-box .list-1 ul li { width:calc((100% - 40px) / 3); padding:30px; }
	.business-box .businessTop .feature-box .list-1 ul li .num { font-size:16px; width:45px; height:45px; }
	.business-box .businessTop .feature-box .list-1 ul li dt { margin-top:30px; font-size:22px; }
	.business-box .businessTop .feature-box .list-1 ul li dd { font-size:20px; }
	.business-box .businessTop .feature-box .list-2 { margin-top:140px; }
	.business-box .businessTop .feature-box .list-2 ul li { padding:30px; gap:0 30px; }
	.business-box .businessTop .feature-box .list-2 ul li .txt { font-size:20px;}
	.business-box .boxBg { margin-top:140px; padding:140px 0; }
	.business-box .boxBg .txt-1 { font-size:40px; }
	.business-box .boxBg .txt-2 { margin-top:40px; }
	.business-box .boxBg .txt-2 > div { font-size:22px; }
	.business-box .businessList .listbox { margin-top:140px; }
	.business-box .businessList .listbox > ul > li { gap:80px; }
	.business-box .businessList .listbox > ul > li:not(:last-child) { margin-bottom:100px; }
	.business-box .businessList .listbox > ul > li > div { width:calc((100% - 80px) / 2); }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dt { font-size:26px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd { margin-top:50px; font-size:18px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:50px; }
}
@media screen and (max-width:1440px){
	.business-box .businessList .listbox > ul > li .txtbox > dl > dt br,
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd br { display:none }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dt span.m_br,
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd span.m_br { display:block }
}
@media screen and (max-width:1280px){
	.business-box .businessTop .box { padding:40px; }
	.business-box .businessTop .box .imgbox { width:320px; } 
	.business-box .businessTop .box .txtbox { width:calc(100% - 320px); padding-left:40px; }
	.business-box .businessTop .box .txtbox dt strong { font-size:18px;  }
	.business-box .businessTop .box .txtbox dt span { margin-top:8px; font-size:22px; }
	.business-box .businessTop .box .txtbox dd { margin-top:30px; }
	.business-box .businessTop .box .txtbox dd > p { font-size:18px; }
	.business-box .businessTop .box .txtbox dd > p:not(:last-child) { margin-bottom:20px; }
	.business-box .businessTop .feature-box { margin-top:100px; }
	.business-box .businessTop .feature-box h4 span { font-size:24px; }
	.business-box .businessTop .feature-box .list-1 ul { margin-top:20px; gap:15px; }
	.business-box .businessTop .feature-box .list-1 ul li { width:calc((100% - 30px) / 3); padding:20px; }
	.business-box .businessTop .feature-box .list-1 ul li .num { font-size:15px; width:40px; height:40px; }
	.business-box .businessTop .feature-box .list-1 ul li dt { margin-top:20px; font-size:20px; }
	.business-box .businessTop .feature-box .list-1 ul li dt br { display:none }
	.business-box .businessTop .feature-box .list-1 ul li dd { margin-top:3px; font-size:18px; }
	.business-box .businessTop .feature-box .list-2 { margin-top:100px; }
	.business-box .businessTop .feature-box .list-2 ul li { padding:20px; gap:0 20px; }
	.business-box .businessTop .feature-box .list-2 ul li .icon img { width:40px; }
	.business-box .businessTop .feature-box .list-2 ul li .txt { font-size:18px; }
	.business-box .boxBg { margin-top:100px; padding:100px 0; }
	.business-box .boxBg .txt-1 { font-size:30px; }
	.business-box .boxBg .txt-2 { margin-top:30px; }
	.business-box .boxBg .txt-2 > div { font-size:20px; }
	.business-box .boxBg .txt-2 .stxt-2 { margin-left:20px; }
	.business-box .businessList .listbox { margin-top:100px; }
	.business-box .businessList .listbox > ul > li { gap:40px; }
	.business-box .businessList .listbox > ul > li:not(:last-child) { margin-bottom:60px; }
	.business-box .businessList .listbox > ul > li > div { width:calc((100% - 40px) / 2); }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dt { font-size:22px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd { margin-top:30px; font-size:17px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd > p:not(:last-child) { margin-bottom:30px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:35px; }
}
@media screen and (max-width:1024px){
	.business-box .businessTop .box { padding:30px; border-width:2px; border-radius:10px; }
	.business-box .businessTop .box .imgbox { width:280px; } 
	.business-box .businessTop .box .imgbox img { border-radius:10px; }
	.business-box .businessTop .box .txtbox { width:calc(100% - 280px); padding-left:30px; }
	.business-box .businessTop .box .txtbox dt strong { font-size:16px;  }
	.business-box .businessTop .box .txtbox dt span { margin-top:5px; font-size:20px; }
	.business-box .businessTop .box .txtbox dd { margin-top:20px; }
	.business-box .businessTop .box .txtbox dd > p { font-size:16px; }
	.business-box .businessTop .box .txtbox dd > p:not(:last-child) { margin-bottom:12px; }
	.business-box .businessTop .feature-box { margin-top:80px; }
	.business-box .businessTop .feature-box h4 span { font-size:21px; }
	.business-box .businessTop .feature-box .list-1 ul { margin-top:10px; gap:10px; }
	.business-box .businessTop .feature-box .list-1 ul li { width:calc((100% - 20px) / 3); padding:10px; border-radius:10px; border-width:1px; }
	.business-box .businessTop .feature-box .list-1 ul li .num { font-size:14px; width:35px; height:35px; border-radius:5px; }
	.business-box .businessTop .feature-box .list-1 ul li dt { margin-top:15px; font-size:18px; }
	.business-box .businessTop .feature-box .list-1 ul li dd { font-size:16px; }
	.business-box .businessTop .feature-box .list-2 { margin-top:80px; }
	.business-box .businessTop .feature-box .list-2 ul li { padding:18px; gap:0 18px; }
	.business-box .businessTop .feature-box .list-2 ul li .icon img { width:35px; }
	.business-box .businessTop .feature-box .list-2 ul li .txt { font-size:17px; }
	.business-box .boxBg { margin-top:80px; padding:80px 0; }
	.business-box .boxBg .txt-1 { font-size:24px; }
	.business-box .boxBg .txt-2 { margin-top:30px; }
	.business-box .boxBg .txt-2 > div { font-size:18px; }
	.business-box .boxBg .txt-2 .stxt-2 { margin-left:15px; }
	.business-box .businessList .listbox { margin-top:80px; }
	.business-box .businessList .listbox > ul > li { gap:30px; }
	.business-box .businessList .listbox > ul > li:not(:last-child) { margin-bottom:60px; }
	.business-box .businessList .listbox > ul > li > div { width:calc((100% - 30px) / 2); }
	.business-box .businessList .listbox > ul > li .imgbox span { border-radius:10px; border-width:1px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dt { font-size:20px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd { margin-top:20px; font-size:16px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd > p:not(:last-child) { margin-bottom:20px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:25px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd { margin-top:5px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd ul { gap:0 19px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl dd ul li:before { right:-10px; height:13px; }
}
@media screen and (max-width:960px){
	.business-box .businessList .listbox > ul > li > div { width:100%; }
	.business-box .businessList .listbox > ul > li .imgbox:before { padding-bottom:45%; }
	.business-box .businessList .listbox > ul > li:nth-child(2n) .txtbox { text-align:left; }
}
@media screen and (max-width:860px){
	.business-box .businessTop .box .imgbox { max-width:520px; width:100%; margin:0 auto; position:relative; }
	.business-box .businessTop .box .imgbox:before { content:''; display:block; padding-bottom:70%; }
	.business-box .businessTop .box .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
	.business-box .businessTop .box .txtbox { width:100%; padding-left:0; margin-top:15px; }
	.business-box .businessTop .feature-box .list-2 h4 { width:100%;}
	.business-box .businessTop .feature-box .list-2 ul { margin-top:10px; width:100%; }
	.business-box .boxBg { padding:80px 0 0; }
	.business-box .boxBg .txt-2 { flex-wrap:wrap; flex-direction:column; justify-content:flex-start; min-height:190px; }
	.business-box .boxBg .txt-2 .stxt-1,
	.business-box .boxBg .txt-2 .stxt-2 { display:block; }
	.business-box .boxBg .txt-2 .stxt-2 { margin-left:0; margin-top:10px; }
}
@media screen and (max-width:760px){
	.business-box .businessTop .feature-box .list-1 ul li { width:100%; }
}
@media screen and (max-width:640px){
	.business-box .businessTop .box { padding:12px; }
	.business-box .businessTop .box .txtbox dt strong { font-size:15px;  }
	.business-box .businessTop .box .txtbox dt span { margin-top:5px; font-size:18px; }
	.business-box .businessTop .box .txtbox dd { margin-top:15px; }
	.business-box .businessTop .box .txtbox dd > p:not(:last-child) { margin-bottom:10px; }
	.business-box .businessTop .feature-box { margin-top:60px; }
	.business-box .businessTop .feature-box h4 span { font-size:20px; }
	.business-box .businessTop .feature-box .list-1 ul li { padding:20px; }
	.business-box .businessTop .feature-box .list-1 ul li dt { margin-top:12px; font-size:17px; }
	.business-box .businessTop .feature-box .list-1 ul li dd { margin-top:1px; font-size:15px; }
	.business-box .businessTop .feature-box .list-2 { margin-top:60px; }
	.business-box .businessTop .feature-box .list-2 ul li { padding:15px; }
	.business-box .businessTop .feature-box .list-2 ul li .txt { font-size:15px; }
	.business-box .boxBg { margin-top:60px; padding:60px 0 0; }
	.business-box .boxBg .txt-2 { min-height:140px; }
	.business-box .boxBg .txt-1 { font-size:20px; }
	.business-box .boxBg .txt-2 { margin-top:30px; }
	.business-box .boxBg .txt-2 > div { font-size:16px; }
	.business-box .boxBg .txt-2 .stxt-2 { margin-top:5px; }
	.business-box .businessList .listbox { margin-top:40px; }
	.business-box .businessList .listbox > ul > li { gap:20px; }
	.business-box .businessList .listbox > ul > li:not(:last-child) { margin-bottom:30px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dt { font-size:18px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd { margin-top:15px; font-size:15px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd > p:not(:last-child) { margin-bottom:10px; }
	.business-box .businessList .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:15px; }
}



/* animation */
.business-box h4 { overflow:hidden }
.business-box h4 span { display:block; opacity:0; }
.business-box .subOn h4 span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.business-box .businessTop .box { opacity:0; }
.business-box .businessTop .box.subOn { animation:ani_5 1.0s 0.2s; animation-fill-mode:both; }
.business-box .businessTop .box .imgbox { opacity:0; }
.business-box .businessTop .box.subOn .imgbox { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.business-box .businessTop .box .txtbox dt,
.business-box .businessTop .box .txtbox dd { opacity:0; }
.business-box .businessTop .box.subOn .txtbox dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.business-box .businessTop .box.subOn .txtbox dd { animation:ani_2 0.8s 0.6s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-1 ul li { opacity:0; }
.business-box .businessTop .feature-box .list-1.subOn ul li:nth-child(1) { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-1.subOn ul li:nth-child(2) { animation:ani_3 0.8s 0.9s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-1.subOn ul li:nth-child(3) { animation:ani_3 0.8s 1.2s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-1.subOn ul li:nth-child(4) { animation:ani_3 0.8s 1.5s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-1.subOn ul li:nth-child(5) { animation:ani_3 0.8s 1.8s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-1.subOn ul li:nth-child(6) { animation:ani_3 0.8s 2.1s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-1.subOn ul li:nth-child(7) { animation:ani_3 0.8s 2.4s; animation-fill-mode:both; }
.business-box .businessTop .feature-box .list-2 ul { opacity:0; }
.business-box .businessTop .feature-box .list-2.subOn ul { animation:ani_2 0.8s 0.6s; animation-fill-mode:both; }
.business-box .boxBg .txt-1,
.business-box .boxBg .txt-2 { opacity:0; }
.business-box .boxBg.subOn .txt-1 { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.business-box .boxBg.subOn .txt-2 { animation:ani_3 0.8s 0.8s; animation-fill-mode:both; }
.business-box .boxBg.subOn .txt-2 .stxt-2 { animation:padd 1.0s 1.6s; animation-fill-mode:both; }
.business-box .boxBg .txt-2 .stxt-2:before { content:""; display:block; transition:all 1.0s 1.6s; position:absolute; left:-30px; top:50%; transform:translateY(-50%); width:0; height:2px; background:rgba(255, 255, 255, 0.5); }
.business-box .boxBg.subOn .txt-2 .stxt-2:before { width:150px; left:-180px; }
.business-box .businessList .listbox > ul > li .imgbox:after { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; right:0; top:0; }
.business-box .businessList .listbox > ul > li:nth-child(2n) .imgbox:after { left:0; right:unset; }
.business-box .businessList .listbox > ul > li.subOn .imgbox:after { animation:ani_w100 0.8s 0.1s; animation-fill-mode:both; }
.business-box .businessList .listbox > ul > li .txtbox > dl > dt,
.business-box .businessList .listbox > ul > li .txtbox > dl > dd { opacity:0; }
.business-box .businessList .listbox > ul > li.subOn .txtbox dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.business-box .businessList .listbox > ul > li.subOn .txtbox dd { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.business-box .businessList .listbox > ul > li.subOn:nth-child(2n) .txtbox dt { animation:ani_1 0.8s 0.3s; animation-fill-mode:both; }
.business-box .businessList .listbox > ul > li.subOn:nth-child(2n) .txtbox dd { animation:ani_1 0.8s 0.5s; animation-fill-mode:both; }
@media screen and (max-width:1280px){
	.business-box .boxBg .txt-2 .stxt-2:before { left:-20px; }
	.business-box .boxBg.subOn .txt-2 .stxt-2:before { width:120px; left:-140px; }
}
@media screen and (max-width:1024px){
	.business-box .boxBg .txt-2 .stxt-2:before { left:-15px; height:1px;  }
	.business-box .boxBg.subOn .txt-2 .stxt-2:before { width:90px; left:-105px; }
}
@media screen and (max-width:960px){
	.business-box .businessList .listbox > ul > li:nth-child(2n) .imgbox:after { left:unset; right:0; }
	.business-box .businessList .listbox > ul > li.subOn:nth-child(2n) .txtbox dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
	.business-box .businessList .listbox > ul > li.subOn:nth-child(2n) .txtbox dd { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
}
@media screen and (max-width:860px){
	.business-box .boxBg .txt-2 .stxt-2:before { left:50%; transform:translate(-50%, 0); top:-5px; height:0; }
	.business-box .boxBg.subOn .txt-2 .stxt-2:before { left:50%; top:-45px; width:1px; height:40px; }
}
@media screen and (max-width:640px){
	.business-box .boxBg .txt-2 .stxt-2:before { top:-5px; }
	.business-box .boxBg.subOn .txt-2 .stxt-2:before { top:-25px; height:20px; }
}
@keyframes padd {
	0% { margin-left:30px; }
	100% { margin-left:210px; }
}
@media screen and (max-width:1280px){
	@keyframes padd {
		0% { margin-left:20px; }
		100% { margin-left:160px; }
	}
}
@media screen and (max-width:1024px){
	@keyframes padd {
		0% { margin-left:15px; }
		100% { margin-left:120px; }
	}
}
@media screen and (max-width:860px){
	@keyframes padd {
		0% { margin-left:0; margin-top:10px; }
		100% { margin-left:0; margin-top:50px;  }
	}
}
@media screen and (max-width:640px){
	@keyframes padd {
		0% { margin-left:0; margin-top:5px; }
		100% { margin-left:0; margin-top:25px;  }
	}
}

/* products */
.products-main h4 { color:#111; font-size:48px; font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
.products-main h4 strong { color:var(--mainColor); }
.products-main .mainCont-top { margin-bottom:180px; padding:80px; border-radius:20px; background:url(/img/sub/products/dtdesigner_bg21.jpg) no-repeat center / cover; }
.products-main .mainCont-top .tabmenu { margin:0; }
.products-main .mainCont-top ul { gap:20px; display:flex; flex-wrap:wrap; align-items:center; }
.products-main .mainCont-top li { width:calc((100% - 60px) / 4); }
.products-main .mainCont-top li a { transition:all 0.3s; display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-0.04em; height:150px; border-radius:10px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(255, 255, 255, 0.10); backdrop-filter:blur(10px); }
.products-main .mainCont-top li a:hover { border:2px solid var(--mainColor); background:rgba(0, 75, 208, 0.1); }
.products-main .mainCont-1 { margin-top:180px; }
.products-main .mainCont-1 .scroll-box .os-scrollbar-vertical .os-scrollbar-track { opacity:0; }
.products-main .mainCont-1 .schematic-box { margin-top:40px; border-top:2px solid #000; border-bottom:2px solid #e5e5e5; }
.products-main .mainCont-1 .schematic-box > div { position:relative; padding:30px 0; }
.products-main .mainCont-1 .schematic-box > div:before { content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:2px; background-image:linear-gradient(to right, #e5e5e5 50%, transparent 50%); background-position:0 0, 4px 4px; background-size:4px 2px; }
.products-main .mainCont-1 .schematic-box .listbox-4:before { display:none; }
.products-main .mainCont-1 .schematic-box > div > dl { display:flex; }
.products-main .mainCont-1 .schematic-box > div > dl > dt { padding:0 5px; width:304px; font-family:var(--mainFont); color:#fff; font-size:22px; font-weight:500; line-height:1.3; border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center; background:#748191; }
.products-main .mainCont-1 .schematic-box > div > dl > dt img { max-width:100%; }
.products-main .mainCont-1 .schematic-box > div > dl > dd { width:calc(100% - 304px); padding-left:20px; }
.products-main .mainCont-1 .schematic-box .list { display:flex; gap:20px; }
.products-main .mainCont-1 .schematic-box .list-1 > li > div { width:100%; height:85px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; border:2px solid #e5e5e5; border-radius:10px; }
.products-main .mainCont-1 .schematic-box .list-1 > li span { display:block; font-family:var(--mainFont); color:#333; font-size:18px; font-weight:300; line-height:1.5; }
.products-main .mainCont-1 .schematic-box .list-1 > li strong { display:block; font-family:var(--mainFont); color:#333; font-size:18px; font-weight:700; line-height:1.5; }
.products-main .mainCont-1 .schematic-box .list-1 > li:nth-child(1) { width:calc(25% - 10px); }
.products-main .mainCont-1 .schematic-box .list-1 > li:nth-child(2) { width:calc(25% - 10px); }
.products-main .mainCont-1 .schematic-box .list-1 > li:nth-child(3) { width:50%; }
.products-main .mainCont-1 .schematic-box .list-2 > li > div { width:100%; height:85px; gap:15px; display:flex; align-items:center; justify-content:center; text-align:center; border:2px solid #e5e5e5; border-radius:10px; }
.products-main .mainCont-1 .schematic-box .list-2 > li { width:calc(25% - 10px); }
.products-main .mainCont-1 .schematic-box .list-3 { gap:10px; background:#f4f5f9; margin-left:-20px; }
.products-main .mainCont-1 .schematic-box .list-3 > li > div { width:100%; height:65px; display:flex; align-items:center; justify-content:center; text-align:center; background:rgba(0, 75, 208, 0.10); border-radius:10px; color:#333; font-size:16px; font-weight:600; line-height:1.3; }
.products-main .mainCont-1 .schematic-box .list-3 > li { width:calc((100% - 70px) / 8); }
.products-main .mainCont-1 .schematic-box .list-4 { gap:10px; }
.products-main .mainCont-1 .schematic-box .list-4 > li { position:relative; padding:20px; /* border:2px dashed #d7e7c7; */ border-radius:10px;  }
.products-main .mainCont-1 .schematic-box .list-4 > li svg {  position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; animation:lineDashed 1.5s linear infinite;; }
.products-main .mainCont-1 .schematic-box .list-4 > li rect { width:calc(100% - 3px); height:calc(100% - 3px); }
.products-main .mainCont-1 .schematic-box .list-4 > li > div { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; }
.products-main .mainCont-1 .schematic-box .list-4 > li > div .sbox { width:100%; height:65px; background:#8ca4db; font-family:var(--mainFont); color:#fff; font-size:16px; font-weight:600; line-height:1.3; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.products-main .mainCont-1 .schematic-box .list-4 > li:nth-child(1) { width:32% }
.products-main .mainCont-1 .schematic-box .list-4 > li:nth-child(2) { width:20% }
.products-main .mainCont-1 .schematic-box .list-4 > li:nth-child(3) { width:24% }
.products-main .mainCont-1 .schematic-box .list-4 > li:nth-child(4) { width:24% }
.products-main .mainCont-1 .schematic-box .list-5 { gap:10px; }
.products-main .mainCont-1 .schematic-box .list-5 > li { position:relative; padding:20px; /*border:2px dashed var(--mainColor);*/ border-radius:10px; background:rgba(0, 75, 208, 0.05)}
.products-main .mainCont-1 .schematic-box .list-5 > li svg {  position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; animation:lineDashed 1.5s linear infinite;; }
.products-main .mainCont-1 .schematic-box .list-5 > li rect { width:calc(100% - 3px); height:calc(100% - 3px); }
.products-main .mainCont-1 .schematic-box .list-5 > li:before { content:""; display:block; position:absolute; left:50%; top:-82px; transform:translateX(-50%); width:12px; height:82px; background:url(/img/sub/products/schematic_arr1_n.png) center no-repeat; }
.products-main .mainCont-1 .schematic-box .list-5 > li:last-child:before { background:url(/img/sub/products/schematic_arr2_n.png) center no-repeat; }
.products-main .mainCont-1 .schematic-box .list-5 > li > div { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; }
.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox { width:100%; height:165px; background:#fff; font-family:var(--mainFont); color:#333; font-size:16px; font-weight:600; line-height:1.3; border:2px solid #e5e5e5; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox-1 { border:none; background:rgba(0, 75, 208, 0.20); color:#333; font-size:16px; font-weight:600; line-height:1.5; }
.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 { height:205px; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul { position:relative; padding-top:15px; margin-top:25px; display:flex; align-items:center; justify-content:center; gap:5px; }
.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:before { content:""; display:block; position:absolute; left:50%; top:-15px; transform:translateX(-50%); width:2px; height:20px; background:#e5e5e5; }
.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:after { content:""; display:block; position:absolute; left:50%; top:0; transform:translateX(-50%); width:calc(100% - 32%); height:2px; background:#e5e5e5; }
.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li { position:relative; width:calc((100% - 10px) / 3); display:flex; align-items:center; justify-content:center; height:35px; border-radius:10px; background:#6ad0be; color:#fff; font-size:16px; font-weight:600; line-height:1.3; }
.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li:before { content:""; display:block; position:absolute; left:50%; top:-15px; transform:translateX(-50%); width:2px; height:15px; background:#e5e5e5; }
.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 .txt_b { margin-top:5px; width:100%; display:flex; align-items:center; justify-content:center; height:35px; border-radius:10px; background:#333; color:#fff; font-size:16px; font-weight:600; line-height:1.3; }
.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(1) { width:32% }
.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(2) { width:20% }
.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(3) { width:24% }
.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(4) { width:24%; padding:0 20px; }
.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox span { display:block; color:#333; font-size:16px; font-weight:300; line-height:1.5; }
.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox strong { margin-top:10px; display:block; color:#333; font-size:16px; font-weight:600; line-height:1.5; }
.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(3) .box > div { width:calc((100% - 20px ) /3) }
.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 li > div { height:165px; gap:0 25px; }
.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 ul { text-align:left; }
.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li:not(:last-child) { margin-bottom:5px; }
.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li { position:relative; padding-left:12px; color:#333; font-size:16px; font-weight:600; line-height:1.3; }
.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li:before { content:""; display:block; position:absolute; left:0; top:9px; width:6px; height:1px; background:#333; }
.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .imgbox strong { display:block; margin-top:15px; color:#333; font-size:16px; font-weight:600; line-height:1.3; }
.products-main .mainCont-1 .schematic-box .listbox-3 > dl { border:4px solid var(--mainColor); animation:overColor 1.5s infinite; border-radius:16px; }
.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt { background:var(--mainColor); border-radius:10px 0 0 10px }
.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox strong { display:block; margin-top:30px; font-family:var(--mainFont); color:#ffee57; font-size:22px; font-weight:500; line-height:1.5; }
.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox span { display:block; margin-top:10px; font-family:var(--mainFont); color:#fff; font-size:17px; font-weight:400; line-height:1.5; }
.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd { background:#fff; border-radius:0 10px 10px 0; }
.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > ul { padding:20px 16px 20px 0 }
.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > .list-3 { padding:20px 16px 20px 20px; }
.products-main .mainCont-1 .schematic-box .listbox-4 > dl > dd > ul { padding:0 16px 0 0 }
.products-main .mainCont-2 { margin-top:180px; overflow:hidden; background:url(/img/sub/products/dtdesigner_bg1.jpg) no-repeat center / cover; }
.products-main .mainCont-2 dl { padding:180px 0; }
.products-main .mainCont-2 dt h4 { color:#fff; }
.products-main .mainCont-2 dd ul { margin-top:40px; gap:40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.products-main .mainCont-2 dd li { padding:0 0 0 40px; width:calc((100% - 80px) / 3); display:flex; align-items:center; height:90px; border-radius:10px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(0, 0, 0, 0.10); backdrop-filter:blur(7.5px); }
.products-main .mainCont-2 dd li .num { width:50px; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--mainFont); color:#fff; font-size:17px; font-weight:700; line-height:1.3; background:var(--mainColor); }
.products-main .mainCont-2 dd li .txt { width:calc(100% - 50px); padding-left:20px; color:#fff; font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-0.04em; }
.products-main .mainCont-3 { margin-top:180px; }
.products-main .mainCont-3 dd { margin-top:40px; border-radius:20px; background:#f4f5f9; padding:60px; display:flex; flex-wrap:wrap; gap:0 120px; }
.products-main .mainCont-3 dd > div { position:relative; width:calc((100% - 120px) / 2 ); }
.products-main .mainCont-3 dd > div:before { content:""; display:block; position:absolute; left:-60px; top:50%; transform:translateY(-50%); width:1px; height:100%; background:#e5e5e5; }
.products-main .mainCont-3 dd > div:first-child:before { display:none; }
.products-main .mainCont-3 dd > div p { margin-top:40px; color:#111; font-size:24px; font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.products-main .mainCont-3 dd > div ul { margin-top:20px; }
.products-main .mainCont-3 dd > div li { position:relative; padding-left:12px; color:#333; font-size:19px; font-weight:300; line-height:1.3; }
.products-main .mainCont-3 dd > div li:not(:last-child) { margin-bottom:10px; }
.products-main .mainCont-3 dd > div li:before { content:""; display:block; position:absolute; left:0; top:9px; width:6px; height:1px; background:#333; }
.products-main .mainCont-4 { margin-top:180px; padding:180px 0 250px; background:#f4f5f9; overflow:hidden }
.products-main .mainCont-4 dl { text-align:center; }
.products-main .mainCont-4 dd { margin-top:30px; color:#333; font-size:23px; font-weight:300; line-height:1.7; letter-spacing:-0.04em; }
.products-main .mainCont-4 .box { margin-top:120px; position:relative; padding-top:116px; }
.products-main .mainCont-4 .box .title { position:absolute; top:0; height:56px; width:36%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; font-weight:700; line-height:1.3; border-radius:10px; background:#333; }
.products-main .mainCont-4 .box .title.p1 { left:0; }
.products-main .mainCont-4 .box .title.p2 { right:0; background:var(--mainColor); }
.products-main .mainCont-4 .box .line-box { margin-top:167px; }
.products-main .mainCont-4 .box .line-box .lineCont { position:relative; padding:118px 0; }
.products-main .mainCont-4 .box .line-box .lineCont .line { height:50px; border-radius:20px; opacity:0.2; background:linear-gradient(90deg, #004BD0 0%, #000 49.5%, #004BD0 100%); }
.products-main .mainCont-4 .box .line-box .lineCont .icon { position:absolute; top:50%; transform:translateY(-50%); margin-top:4px; }
.products-main .mainCont-4 .box .line-box .lineCont .icon.i-1 { left:9%; }
.products-main .mainCont-4 .box .line-box .lineCont .icon.i-2 { left:21%; }
.products-main .mainCont-4 .box .line-box .lineCont .icon.i-3 { right:21%; }
.products-main .mainCont-4 .box .line-box .lineCont .icon.i-4 { right:9%; }
.products-main .mainCont-4 .box .line-box .lineCont li { position:absolute; }
.products-main .mainCont-4 .box .line-box .lineCont li .sbox { position:absolute; left:50%; transform:translateX(-50%); height:60px; text-wrap:nowrap; padding:5px 40px 5px 5px; background:#8898B4; border-radius:100px; display:flex; align-items:center; }
.products-main .mainCont-4 .box .line-box .lineCont li .sbox:before { content:""; display:block; position:absolute; left:50%; bottom:-78px; transform:translateX(-50%); width:2px; height:78px; background:rgba(56, 74, 106, 0.2); }
.products-main .mainCont-4 .box .line-box .lineCont li .sbox:after { content:""; display:block; position:absolute; left:50%; bottom:-88px; transform:translateX(-50%); width:10px; height:10px; background:rgba(56, 74, 106, 0.2); border-radius:10px; }
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li .sbox { background:#315fb1; }
.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) .sbox,
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) .sbox,
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) .sbox { bottom:0; }
.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) .sbox:before,
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) .sbox:before,
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) .sbox:before  { top:-78px; bottom:unset; }
.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) .sbox:after,
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) .sbox:after,
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) .sbox:after { top:-88px; bottom:unset; }
.products-main .mainCont-4 .box .line-box .lineCont li .sbox .icon-i { background:#fff; width:50px; height:50px; border-radius:50px; display:flex; align-items:center; justify-content:center; }
.products-main .mainCont-4 .box .line-box .lineCont li .sbox .txt { width:calc(100% - 50px); padding-left:20px; color:#fff; font-size:18px; font-weight:600; line-height:1.3; } 
.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(1) { left:7.5%; top:0; }
.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) { left:19%; bottom:0; }
.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(3) { left:30%; top:0; }
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) { right:30%; bottom:0; }
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(2) { right:19%; top:0; }
.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) { right:7.5%; bottom:0; }
.products-main .mainCont-4 .box .line-box .lineCont .circle { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:60px; border-radius:500px; border: 2px dashed rgba(0, 75, 208, 0.1); }
.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-direction:column;text-align:center; width:380px; height:380px; border-radius:380px; border:6px solid var(--mainColor); background:#fff; box-shadow:10px 10px 20px 0px rgba(0, 75, 208, 0.15); }
.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-1 { margin-top:30px; font-family:var(--mainFont); color:#111; font-size:28px; font-weight:500; line-height:1.3; letter-spacing:-0.04em; }
.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-1 span { color:#33d3dd; }
.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-2 { margin-top:15px; color:#888; font-size:20px; font-weight:600; line-height:1.3; }
.products-main .mainCont-4 .box .line-box .lineCont .circle .c-box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; border-radius:50%; }
.products-main .mainCont-4 .box .line-box .lineCont .circle .pline { position:absolute; top:-4px; left:50%; transform:translate(-50%, 0); width:6px; height:6px; background:var(--mainColor); border-radius:10px; }
.products-main .mainCont-4 .box .line-box .lineCont .circle .p1 { transform:translate(-50%, -50%) rotate(75deg); animation:rotate1 10s 0.1s infinite linear; }
.products-main .mainCont-4 .box .line-box .lineCont .circle .p2 { transform:translate(-50%, -50%) rotate(195deg); animation:rotate2 10s 0.1s infinite linear; }
.products-main .mainCont-4 .box .line-box .lineCont .circle .p3 { transform:translate(-50%, -50%) rotate(315deg); animation:rotate3 10s 0.1s infinite linear /* alternate;*/ }
.products-main .imgbox img,
.products-main .box img { max-width:100%; }
.products-main .mainCont-5 { background:url(/img/sub/products/dtdesigner_bg2.jpg) no-repeat center / cover; }
.products-main .mainCont-5 dl { padding:180px 0; }
.products-main .mainCont-5 dt h4 { color:#fff; }
.products-main .mainCont-5 dd .tabmenu { margin:0; }
.products-main .mainCont-5 dd ul { margin-top:40px; gap:20px; display:flex; flex-wrap:wrap; align-items:center; }
.products-main .mainCont-5 dd li { width:calc((100% - 60px) / 4); }
.products-main .mainCont-5 dd li a { display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-0.04em; height:80px; border-radius:10px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(255, 255, 255, 0.10); backdrop-filter:blur(10px); }
@media screen and (max-width:1560px){
	.products-main h4 { font-size:40px; }
	.products-main .mainCont-top { margin-bottom:140px; padding:60px; }
	.products-main .mainCont-top li a { font-size:18px; height:120px; }
	.products-main .mainCont-1 { margin-top:140px; }
	.products-main .mainCont-1 .schematic-box { margin-top:35px; }
	.products-main .mainCont-1 .schematic-box > div { padding:30px 0; }
	.products-main .mainCont-1 .schematic-box > div > dl > dt { width:280px; font-size:21px; }
	.products-main .mainCont-1 .schematic-box > div > dl > dd { width:calc(100% - 280px); padding-left:20px; }
	.products-main .mainCont-1 .schematic-box .list { gap:20px; }
	.products-main .mainCont-1 .schematic-box .list-1 > li > div { height:85px; }
	.products-main .mainCont-1 .schematic-box .list-1 > li span,
	.products-main .mainCont-1 .schematic-box .list-1 > li strong { font-size:17px; }
	.products-main .mainCont-1 .schematic-box .list-2 > li > div { height:85px; gap:10px; }
	.products-main .mainCont-1 .schematic-box .list-3 { gap:10px; margin-left:-20px; }
	.products-main .mainCont-1 .schematic-box .list-3 > li > div { height:65px; font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-3 > li { width:calc((100% - 70px) / 8);}
	.products-main .mainCont-1 .schematic-box .list-4 { gap:10px; }
	.products-main .mainCont-1 .schematic-box .list-4 > li { padding:20px; }
	.products-main .mainCont-1 .schematic-box .list-4 > li > div .sbox { height:65px; font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 { gap:10px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li { padding:20px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox { font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox-1 { font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul { padding-top:15px; margin-top:25px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:before { top:-15px; width:2px; height:20px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:after { top:0; width:calc(100% - 32%); }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li { height:35px; font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li:before { top:-15px; width:2px; height:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 .txt_b { margin-top:5px; height:35px; font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox span { font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox strong { margin-top:8px; font-size:15px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 li > div { gap:0 15px; padding:0 10px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li { padding-left:12px; font-size:15px;  }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li:before { top:9px; width:6px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .imgbox strong { margin-top:12px; font-size:15px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 .list-2 .imgbox { padding:0 10px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox strong { margin-top:25px; font-size:21px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox span { margin-top:10px; font-size:16px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > ul { padding:20px 16px 20px 0 }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > .list-3 { padding:20px 16px 20px 20px; }
	.products-main .mainCont-1 .schematic-box .listbox-4 > dl > dd > ul { padding:0 16px 0 0 }
	.products-main .mainCont-2 { margin-top:140px; }
	.products-main .mainCont-2 dl { padding:140px 0; }
	.products-main .mainCont-2 dd ul { margin-top:30px; gap:30px; }
	.products-main .mainCont-2 dd li { padding:0 0 0 30px; width:calc((100% - 60px) / 3); height:90px; }
	.products-main .mainCont-2 dd li .num { width:45px; height:45px; font-size:16px; }
	.products-main .mainCont-2 dd li .txt { width:calc(100% - 45px); padding-left:15px; font-size:18px; }
	.products-main .mainCont-3 { margin-top:140px; }
	.products-main .mainCont-3 dd { margin-top:30px; padding:50px; gap:0 100px; }
	.products-main .mainCont-3 dd > div { width:calc((100% - 100px) / 2 ); }
	.products-main .mainCont-3 dd > div:before { left:-50px; }
	.products-main .mainCont-3 dd > div p { margin-top:30px; font-size:22px; }
	.products-main .mainCont-3 dd > div ul { margin-top:15px; }
	.products-main .mainCont-3 dd > div li { font-size:18px; }
	.products-main .mainCont-3 dd > div li:not(:last-child) { margin-bottom:10px; }
	.products-main .mainCont-3 dd > div li:before { top:9px; width:6px; height:1px; }
	.products-main .mainCont-4 { margin-top:140px; padding:140px 0 200px; }
	.products-main .mainCont-4 dd { margin-top:25px; font-size:21px; }
	.products-main .mainCont-4 .box { margin-top:110px; padding-top:110px; }
	.products-main .mainCont-4 .box .title { height:52px; font-size:18px; }
	.products-main .mainCont-4 .box .line-box { margin-top:150px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox { height:55px; padding:5px 30px 5px 5px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .icon-i { width:45px; height:45px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .txt { width:calc(100% - 45px); padding-left:15px; font-size:17px; } 
	.products-main .mainCont-4 .box .line-box .lineCont .circle { padding:45px; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox { width:300px; height:300px; border:5px solid var(--mainColor); }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-1 { margin-top:25px; font-size:24px; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-2 { margin-top:12px; font-size:18px; }
	.products-main .mainCont-5 dl { padding:140px 0; }
	.products-main .mainCont-5 dd ul { margin-top:30px; }
	.products-main .mainCont-5 dd li a { font-size:18px; height:75px; }
}
@media screen and (max-width:1200px){
	.products-main h4 { font-size:30px; }
	.products-main .mainCont-top { margin-bottom:100px; padding:50px; }
	.products-main .mainCont-top li a { font-size:17px; height:100px; }
	.products-main .mainCont-1 { margin-top:100px; }
	.products-main .mainCont-1 .schematic-box { margin-top:30px; }
	.products-main .mainCont-1 .schematic-box > div { padding:20px 0; }
	.products-main .mainCont-1 .schematic-box > div > dl > dt { width:240px; font-size:21px; }
	.products-main .mainCont-1 .schematic-box > div > dl > dd { width:calc(100% - 240px); padding-left:10px; }
	.products-main .mainCont-1 .schematic-box .list { gap:10px; }
	.products-main .mainCont-1 .schematic-box .list-1 > li:nth-child(1) { width:calc(25% - 5px); }
	.products-main .mainCont-1 .schematic-box .list-1 > li:nth-child(2) { width:calc(25% - 5px); }
	.products-main .mainCont-1 .schematic-box .list-1 > li > div { height:75px; }
	.products-main .mainCont-1 .schematic-box .list-1 > li span,
	.products-main .mainCont-1 .schematic-box .list-1 > li strong { font-size:16px; }
	.products-main .mainCont-1 .schematic-box .list-2 > li { width:calc(25% - 5px); }
	.products-main .mainCont-1 .schematic-box .list-2 > li > div { height:75px; }
	.products-main .mainCont-1 .schematic-box .list-3 { gap:5px; margin-left:-10px; }
	.products-main .mainCont-1 .schematic-box .list-3 > li > div { height:60px; font-size:14px; padding:0 5px; }
	.products-main .mainCont-1 .schematic-box .list-3 > li { width:calc((100% - 35px) / 8); }
	.products-main .mainCont-1 .schematic-box .list-4 { gap:10px; }
	.products-main .mainCont-1 .schematic-box .list-4 > li { padding:10px; }
	.products-main .mainCont-1 .schematic-box .list-4 > li > div .sbox { height:60px; font-size:14px; padding:0 5px; }
	.products-main .mainCont-1 .schematic-box .list-5 { gap:10px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li { padding:10px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li:before { top:-55px; width:8px; height:55px; background-size:auto 55px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li:last-child:before { background-size:auto 55px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox,
	.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox-1 { font-size:14px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(4) { padding:0 10px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 { height:185px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul { padding-top:15px; margin-top:25px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:before { top:-15px; width:2px; height:20px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:after { top:0; width:calc(100% - 32%); }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li { height:35px; font-size:14px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li:before { top:-15px; width:2px; height:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 .txt_b { margin-top:5px; height:35px; font-size:14px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox span { font-size:14px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox strong { margin-top:8px; font-size:14px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 li > div { height:130px; gap:0 10px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li { padding-left:12px; font-size:14px;  }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li:before { top:9px; width:6px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .imgbox strong { margin-top:12px; font-size:14px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox strong { margin-top:25px; font-size:19px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox span { margin-top:10px; font-size:15px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > ul { padding:10px 10px 10px 0 }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > .list-3 { padding:10px 10px 10px 10px; }
	.products-main .mainCont-1 .schematic-box .listbox-4 > dl > dd > ul { padding:0 10px 0 0 }
	.products-main .mainCont-2 { margin-top:100px; }
	.products-main .mainCont-2 dl { padding:100px 0; }
	.products-main .mainCont-2 dd ul { margin-top:20px; gap:20px; }
	.products-main .mainCont-2 dd li { padding:15px 0 15px 20px; width:calc((100% - 40px) / 3); height:auto; }
	.products-main .mainCont-2 dd li .num { width:40px; height:40px; font-size:15px; }
	.products-main .mainCont-2 dd li .txt { width:calc(100% - 40px); padding-left:12px; font-size:17px; }
	.products-main .mainCont-3 { margin-top:100px; }
	.products-main .mainCont-3 dd { margin-top:20px; padding:40px; gap:0 80px; }
	.products-main .mainCont-3 dd > div { width:calc((100% - 80px) / 2 ); }
	.products-main .mainCont-3 dd > div:before { left:-40px; }
	.products-main .mainCont-3 dd > div p { margin-top:20px; font-size:20px; }
	.products-main .mainCont-3 dd > div ul { margin-top:12px; }
	.products-main .mainCont-3 dd > div li { font-size:17px; }
	.products-main .mainCont-3 dd > div li:not(:last-child) { margin-bottom:8px; }
	.products-main .mainCont-3 dd > div li:before { top:9px; width:5px; height:1px; }
	.products-main .mainCont-4 { margin-top:100px; padding:100px 0 150px; }
	.products-main .mainCont-4 dd { margin-top:20px; font-size:20px; }
	.products-main .mainCont-4 .box { margin-top:100px; padding-top:100px; }
	.products-main .mainCont-4 .box .title { height:50px; font-size:17px; }
	.products-main .mainCont-4 .box .line-box { margin-top:130px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox { height:55px; padding:5px 25px 5px 5px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .icon-i { width:45px; height:45px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .txt { width:calc(100% - 45px); padding-left:15px; font-size:16px; } 
	.products-main .mainCont-4 .box .line-box .lineCont .circle { padding:35px; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox { width:280px; height:280px; border:4px solid var(--mainColor); }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-1 { margin-top:20px; font-size:22px; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-1 span { display:block; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-2 { margin-top:12px; font-size:17px; }
	.products-main .mainCont-5 dl { padding:100px 0; }
	.products-main .mainCont-5 dd ul { margin-top:20px; }
	.products-main .mainCont-5 dd li a { font-size:17px; height:70px; }
}
@media screen and (max-width:1024px){
	.products-main h4 { font-size:22px; }
	.products-main .mainCont-top { margin-bottom:80px; padding:30px; border-radius:10px }
	.products-main .mainCont-top ul { gap:10px; }
	.products-main .mainCont-top li { width:calc((100% - 20px) / 3); }
	.products-main .mainCont-top li a { font-size:16px; height:80px; border-radius:5px; border-width:1px; }
	.products-main .mainCont-1 .scroll-box { overflow:auto; }
	.products-main .mainCont-1 .scroll-box .schematic-box { width:1000px; }
	.products-main .mainCont-1 { margin-top:80px; }
	.products-main .mainCont-1 .schematic-box { margin-top:20px; }
	.products-main .mainCont-1 .schematic-box > div > dl { flex-wrap:wrap; }
	.products-main .mainCont-1 .schematic-box > div > dl > dt { width:100%; font-size:19px; padding:15px 0; border-radius:5px; }
	.products-main .mainCont-1 .schematic-box > div > dl > dd { width:100%; padding-left:0; padding-top:5px; }
	.products-main .mainCont-1 .schematic-box .list { gap:6px; }
	.products-main .mainCont-1 .schematic-box .list-1 > li:nth-child(1) { width:calc(25% - 3px); }
	.products-main .mainCont-1 .schematic-box .list-1 > li:nth-child(2) { width:calc(25% - 3px); }
	.products-main .mainCont-1 .schematic-box .list-1 > li > div { border-radius:5px; }
	.products-main .mainCont-1 .schematic-box .list-1 > li span,
	.products-main .mainCont-1 .schematic-box .list-1 > li strong { font-size:16px; }
	.products-main .mainCont-1 .schematic-box .list-2 > li { width:calc(25% - 5px); }
	.products-main .mainCont-1 .schematic-box .list-2 > li > div { border-radius:5px; }
	.products-main .mainCont-1 .schematic-box .list-3 { gap:5px; margin-left:0; }
	.products-main .mainCont-1 .schematic-box .list-3 > li > div { font-size:13px; border-radius:5px; }
	.products-main .mainCont-1 .schematic-box .list-3 > li { width:calc((100% - 35px) / 8); }
	.products-main .mainCont-1 .schematic-box .list-4 { gap:6px; }
	.products-main .mainCont-1 .schematic-box .list-4 > li { padding:5px; }
	.products-main .mainCont-1 .schematic-box .list-4 > li > div .sbox { font-size:13px; padding:0 5px; }
	.products-main .mainCont-1 .schematic-box .list-5 { gap:6px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li { padding:6px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li:before { top:-55px; width:8px; height:55px; background-size:auto 55px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li:last-child:before { background-size:auto 55px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > div { gap:3px; border-radius:5px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox,
	.products-main .mainCont-1 .schematic-box .list-5 > li > div .sbox-1 { font-size:13px; padding:0 5px; border-radius:5px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(4) { padding:0 10px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 { height:177px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul { padding-top:15px; margin-top:12%; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:before { top:-15px; width:2px; height:20px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul:after { top:0; width:calc(100% - 32%); }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li { height:35px; font-size:13px; border-radius:5px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 ul li:before { top:-15px; width:2px; height:15px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li > .box4 .txt_b { margin-top:5px; height:35px; font-size:13px; border-radius:5px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox span { font-size:13px; }
	.products-main .mainCont-1 .schematic-box .list-5 > li .imgbox strong { margin-top:8px; font-size:13px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 li > div { height:auto; min-height:150px; gap:5px; padding:10px 5px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 { flex-wrap:wrap; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 .imgbox { margin:0 auto; max-width:55px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li { font-size:13px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li:not(:last-child) { margin-bottom:3px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .box1 li:before { top:8px; width:6px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .imgbox strong { margin-top:10px; font-size:13px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl { border-radius:10px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt { border-radius:4px 4px 0 0 }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox strong { margin-top:10px; font-size:17px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dt .txtbox span { margin-top:10px; font-size:14px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd { border-radius:0 0 8px 8px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > ul { padding:5px }
	.products-main .mainCont-1 .schematic-box .listbox-3 > dl > dd > .list-3 { padding:5px; }
	.products-main .mainCont-1 .schematic-box .listbox-4 > dl { flex-direction:column-reverse; }
	.products-main .mainCont-1 .schematic-box .listbox-4 > dl > dt br { display:none }
	.products-main .mainCont-1 .schematic-box .listbox-4 > dl > dd { padding:0 0 5px; }
	.products-main .mainCont-1 .schematic-box .listbox-4 > dl > dd > ul { padding:0 5px }
	.products-main .mainCont-2 { margin-top:80px; }
	.products-main .mainCont-2 dl { padding:80px 0; }
	.products-main .mainCont-2 dd ul { margin-top:15px; gap:15px; }
	.products-main .mainCont-2 dd li { padding:12px 0 12px 15px; width:100%; height:auto; border-radius:5px; border-width:1px; }
	.products-main .mainCont-2 dd li .num { width:40px; height:40px; font-size:14px; border-radius:5px; }
	.products-main .mainCont-2 dd li .txt { width:calc(100% - 40px); padding-left:12px; font-size:16px; }
	.products-main .mainCont-3 { margin-top:80px; }
	.products-main .mainCont-3 dd { margin-top:15px; padding:30px; gap:0 60px; border-radius:5px; }
	.products-main .mainCont-3 dd > div { width:calc((100% - 60px) / 2 ); }
	.products-main .mainCont-3 dd > div:before { left:-30px; }
	.products-main .mainCont-3 dd > div p { margin-top:15px; font-size:18px; }
	.products-main .mainCont-3 dd > div ul { margin-top:10px; }
	.products-main .mainCont-3 dd > div li { font-size:16px; }
	.products-main .mainCont-3 dd > div li:not(:last-child) { margin-bottom:5px; }
	.products-main .mainCont-3 dd > div li:before { top:9px; width:5px; height:1px; }
	.products-main .mainCont-4 { margin-top:80px; padding:80px 0 120px; }
	.products-main .mainCont-4 dd { margin-top:15px; font-size:17px; }
	.products-main .mainCont-4 .box { margin-top:60px; padding:80px 0; }
	.products-main .mainCont-4 .box .title { height:50px; font-size:16px; width:100%; max-width:480px; left:50% !important; transform:translateX(-50%); border-radius:5px; }
	.products-main .mainCont-4 .box .title.p2 { top:unset; bottom:0; }
	.products-main .mainCont-4 .box .line-box { margin-top:0; }
	.products-main .mainCont-4 .box .line-box .lineCont { padding:0; margin:0; height:1000px; }
	.products-main .mainCont-4 .box .line-box .lineCont .line { margin:0 auto; width:50px; height:100%; border-radius:10px; background:linear-gradient(0deg, #004BD0 0%, #000 49.5%, #004BD0 100%); }
	.products-main .mainCont-4 .box .line-box .lineCont .icon { left:50%; transform:translate(-50%, 0); margin:0 0 0 4px; z-index:2 }
	.products-main .mainCont-4 .box .line-box .lineCont .icon.i-1 { top:9%; left:50%; }
	.products-main .mainCont-4 .box .line-box .lineCont .icon.i-2 { top:21%; left:50%; }
	.products-main .mainCont-4 .box .line-box .lineCont .icon.i-3 { bottom:21%; top:unset; right:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .icon.i-4 { bottom:9%; top:unset; right:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox { height:55px; padding:5px 25px 5px 5px; left:0; transform:translateX(0);  }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox:before { bottom:unset; top:50%; left:-55px; transform:translate(0, -50%); width:55px; height:2px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox:after { left:-65px; top:50%; bottom:unset; transform:translate(0, -50%); }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .icon-i { width:40px; height:40px; padding:8px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .icon-i img { width:100% }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .txt { width:calc(100% - 40px); padding-left:10px; font-size:15px; } 
	.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) .sbox,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) .sbox,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) .sbox { bottom:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) .sbox:before,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) .sbox:before,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) .sbox:before  { top:50%; bottom:unset; right:-55px; left:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) .sbox:after,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) .sbox:after,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) .sbox:after { top:50%; bottom:unset; right:-65px; left:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(1) { left:50%; top:4%; margin-left:60px; transform:translate(-50%, 0); }
	.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) { right:50%; top:18%; margin-right:60px; transform:translate(-50%, 0); bottom:unset; left:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(3) { left:50%; top:30%; margin-left:60px; transform:translate(-50%, 0); }
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) { right:50%; bottom:calc(30% + 55px); margin-right:60px; transform:translate(-50%, 0); left:unset; top:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(2) { left:50%; bottom:calc(18% + 55px); margin-left:60px; transform:translate(-50%, 0); top:unset; right:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) { right:50%; bottom:calc(4% + 55px); margin-right:60px; transform:translate(-50%, 0); left:unset; top:unset; }
	.products-main .mainCont-4 .box .line-box .lineCont .list-1 li:nth-child(2) .sbox,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(1) .sbox,
	.products-main .mainCont-4 .box .line-box .lineCont .list-2 li:nth-child(3) .sbox  { left:unset; right:0; transform:translateX(0); bottom:unset; top:0; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle { padding:30px; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox { width:250px; height:250px; padding:0 30px; border:4px solid var(--mainColor); }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-1 { margin-top:15px; font-size:20px; }
	.products-main .mainCont-4 .box .line-box .lineCont .circle .sbox .txt-2 { margin-top:10px; font-size:16px; }
	.products-main .mainCont-5 dl { padding:80px 0; }
	.products-main .mainCont-5 dd ul { margin-top:15px; gap:10px; }
	.products-main .mainCont-5 dd li a { font-size:16px; height:65px; border-radius:5px; }
	.products-main .mainCont-5 dd li { width:calc((100% - 20px) / 3); }
}
@media screen and (max-width:760px){
	.products-main .mainCont-1 .schematic-box .list-2 > li > div { gap:5px; flex-direction:column; height:80px; }
	.products-main .mainCont-1 .schematic-box .list-2 > li > div span img { width:80% }
}
@media screen and (max-width:640px){
	.products-main h4 { font-size:20px; }
	.products-main .mainCont-top { margin-bottom:60px; padding:20px; }
	.products-main .mainCont-top ul { gap:5px; }
	.products-main .mainCont-top li { width:calc((100% - 5px) / 2); }
	.products-main .mainCont-top li a { font-size:15px; height:60px; }
	.products-main .mainCont-1 { margin-top:60px; }
	.products-main .mainCont-1 .schematic-box { margin-top:15px; }
	.products-main .mainCont-1 .schematic-box > div > dl > dt { font-size:18px; padding:12px 0; }
	.products-main .mainCont-1 .schematic-box .box { font-size:13px !important; }
	.products-main .mainCont-1 .schematic-box .list-1 > li strong { font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-1 > li span,
	.products-main .mainCont-1 .schematic-box .list-1 > li strong { font-size:15px; }
	.products-main .mainCont-1 .schematic-box .list-3 > li > div { height:70px; }
	.products-main .mainCont-1 .schematic-box .list-4 > li > div .sbox { word-break:break-word; }
	.products-main .mainCont-1 .schematic-box .list-5 > li:nth-child(4) { padding:0 5px; }
	.products-main .mainCont-1 .schematic-box .listbox-2 .list-2 .imgbox strong { margin-top:5px; }
	.products-main .mainCont-2 { margin-top:60px; }
	.products-main .mainCont-2 dl { padding:60px 0; }
	.products-main .mainCont-2 dd ul { margin-top:10px; gap:10px; }
	.products-main .mainCont-2 dd li { padding:10px 0 10px 10px; }
	.products-main .mainCont-2 dd li .num { width:35px; height:35px; font-size:13px; }
	.products-main .mainCont-2 dd li .txt { width:calc(100% - 35px); padding-left:12px; font-size:15px; }
	.products-main .mainCont-3 { margin-top:60px; }
	.products-main .mainCont-3 dd { margin-top:12px; padding:20px 30px; gap:30px; }
	.products-main .mainCont-3 dd > div { width:100%; }
	.products-main .mainCont-3 dd > div:before { display:none }
	.products-main .mainCont-3 dd > div p { margin-top:15px; font-size:17px; }
	.products-main .mainCont-3 dd > div ul { margin-top:10px; }
	.products-main .mainCont-3 dd > div li { font-size:15px; }
	.products-main .mainCont-4 { margin-top:60px; padding:60px 0 100px; }
	.products-main .mainCont-4 dd { margin-top:14px; font-size:16px; }
	.products-main .mainCont-4 .box { margin-top:60px; padding:60px 0; }
	.products-main .mainCont-4 .box .line-box .lineCont { padding:0; margin:0; height:900px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox { height:50px; padding:5px 20px 5px 5px; }
	.products-main .mainCont-4 .box .line-box .lineCont li .sbox .icon-i { width:38px; height:38px; }
	.products-main .mainCont-5 dl { padding:60px 0; }
	.products-main .mainCont-5 dd ul { margin-top:15px; gap:5px; }
	.products-main .mainCont-5 dd li a { font-size:15px; height:55px; }
	.products-main .mainCont-5 dd li { width:calc((100% - 5px) / 2); }
}
@media screen and (max-width:480px){
	.products-main .mainCont-1 .schematic-box .box { font-size:12px !important; }
	.products-main .mainCont-1 .schematic-box dd * { font-size:12px !important; }
	.products-main .mainCont-1 .schematic-box .list-2 > li > div span img { width:100%; }
	.products-main .mainCont-1 .schematic-box .list-2 > li > div span.logo-s1 img { max-height:20px; }
	.products-main .mainCont-1 .schematic-box .listbox-3 .list-2 .imgbox { padding:0 5px; }
}
@media screen and (max-width:400px){
	.products-main .mainCont-1 .schematic-box dd * { font-size:11px !important; }
	.products-main .mainCont-1 .schematic-box .list-2 > li > div span.logo-s1 img { max-height:16px; }
}

/* animation */
@keyframes rotate1 {
    0% { transform: translate(-50%, -50%) rotate(20deg); }
    100% { transform: translate(-50%, -50%) rotate(380deg); }
}
@keyframes rotate2 {
    0% { transform: translate(-50%, -50%) rotate(140deg); }
    100% { transform: translate(-50%, -50%) rotate(500deg); }
}
@keyframes rotate3 {
    0% { transform: translate(-50%, -50%) rotate(260deg); }
    100% { transform: translate(-50%, -50%) rotate(620deg); }
}
@keyframes overColor {
    0% { filter:drop-shadow(7px 7px 20px rgba(0, 75, 208, 0.0)); }
    50% { filter:drop-shadow(7px 7px 20px rgba(0, 75, 208, 0.3));  }
    100% {filter:drop-shadow(7px 7px 20px rgba(0, 75, 208, 0)); }
}
@keyframes lineDashed {
	0% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -40;
	}
}

.products-main .mainCont-top { opacity:0; }
.products-main .mainCont-top { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.products-main .mainCont-1 .txt { opacity:0; }
.products-main .mainCont-1 .txt.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-1 .listbox-1 { opacity:0; }
.products-main .mainCont-1 .listbox-1.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-1 .listbox-2 { opacity:0; }
.products-main .mainCont-1 .listbox-2.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-1 .listbox-3 { opacity:0; }
.products-main .mainCont-1 .listbox-3.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-1 .listbox-4 { opacity:0; }
.products-main .mainCont-1 .listbox-4.subOn { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-2 dt { overflow:hidden }
.products-main .mainCont-2 dt h4 { opacity:0; }
.products-main .mainCont-2.subOn dt h4 { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-2 li { opacity:0; }
.products-main .mainCont-2.subOn li:nth-child(1) { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.products-main .mainCont-2.subOn li:nth-child(2) { animation:ani_2 0.8s 0.8s; animation-fill-mode:both; }
.products-main .mainCont-2.subOn li:nth-child(3) { animation:ani_2 0.8s 1.1s; animation-fill-mode:both; }
.products-main .mainCont-2.subOn li:nth-child(4) { animation:ani_2 0.8s 1.4s; animation-fill-mode:both; }
.products-main .mainCont-3 dt { overflow:hidden }
.products-main .mainCont-3 dt h4 { opacity:0; }
.products-main .mainCont-3.subOn dt h4 { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-3 dd { opacity:0; }
.products-main .mainCont-3.subOn dd { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.products-main .mainCont-4 dt { overflow:hidden }
.products-main .mainCont-4 dt h4 { opacity:0; }
.products-main .mainCont-4.subOn dt h4 { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-4 dd { opacity:0; }
.products-main .mainCont-4.subOn dd { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.products-main .mainCont-4 .box { opacity:0; }
.products-main .mainCont-4.subOn .box { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.products-main .mainCont-5 dt { overflow:hidden }
.products-main .mainCont-5 dt h4 { opacity:0; }
.products-main .mainCont-5.subOn dt h4 { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.products-main .mainCont-5 dd { opacity:0; }
.products-main .mainCont-5.subOn dd { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }


.products-main .masterCont-1 .listbox > ul { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.products-main .masterCont-1.DTDesigner .listbox > ul { justify-content:flex-start; }
.products-main .masterCont-1 .listbox > ul > li { position:relative; width:calc((100% - 60px) / 4); border-radius:20px; }
.products-main .masterCont-1 .listbox > ul > li:before { content:''; display:block; padding-bottom:100%; }
.products-main .masterCont-1 .listbox > ul > li a { position:absolute; top:0; left:0; width:100%; height:100%; }
.products-main .masterCont-1 .listbox > ul > li .imgbox { position:absolute; left:0; top:0; width:100%; height:100%; transition:all 0.5s;}
.products-main .masterCont-1 .listbox > ul > li .imgbox:after { content:''; display:block; transition:all 0.5s; opacity:0.4; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; border-radius:20px; }
.products-main .masterCont-1.DTDesigner .listbox > ul > li .imgbox:after { opacity:0.6; }
.products-main .masterCont-1 .listbox > ul > li .imgbox:before { content:''; display:block; transition:all 0.5s; opacity:0; position:absolute; top:0; left:0; width:calc(100% - 12px); height:calc(100% - 12px); border:6px solid var(--mainColor); border-radius:20px; }
.products-main .masterCont-1 .listbox > ul > li .imgbox img { width:100%; height:100%; object-fit:cover; -o-object-fit:cover; border-radius:20px; }
.products-main .masterCont-1 .listbox > ul > li .txtbox { position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; display:flex; align-items:center; justify-content:center; text-align:center; }
.products-main .masterCont-1 .listbox > ul > li .txtbox dt { transition:all 0.5s; opacity:0.5; }
.products-main .masterCont-1 .listbox > ul > li .txtbox dd { transition:all 0.5s; margin-top:20px; color:rgba(255,255,255,0.5); font-size:22px; font-weight:600; line-height:1.3; }
.products-main .masterCont-1 .listbox > ul > li:hover .txtbox dt { opacity:1; }
.products-main .masterCont-1 .listbox > ul > li:hover .txtbox dd { color:rgba(255,255,255,1); }
.products-main .masterCont-1 .listbox > ul > li:hover .imgbox { transform:scale(0.94); }
.products-main .masterCont-1 .listbox > ul > li:hover .imgbox:after { opacity:0.0; }
.products-main .masterCont-1.DTDesigner  .listbox > ul > li:hover .imgbox:after { opacity:0.3; }
.products-main .masterCont-1 .listbox > ul > li:hover .imgbox:before { opacity:1; }
.products-main .masterCont-2 { margin-top:180px; padding:220px 0 40px; text-align:center; background:url(/img/sub/products/masterCont_bg.jpg) no-repeat center / cover; }
.products-main .masterCont-2 dt { color:#fff; font-size:60px; font-weight:700; line-height:1.3; letter-spacing:-0.07em; }
.products-main .masterCont-2 dd { margin-top:120px; }
.products-main .masterCont-2 dd .txt-1 { color:#fff; font-size:24px; font-weight:500; line-height:1.6; opacity:0.6; }
.products-main .masterCont-2 dd .txt-2 { margin-top:25px; color:#fff; font-size:36px; font-weight:600; line-height:1.6; opacity:0.6; letter-spacing:-0.04em; }
.products-main .masterCont-2 .txt-b { margin-top:220px; height:105px; display:flex; align-items:center; justify-content:center; border-radius:15px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(0, 0, 0, 0.10); backdrop-filter:blur(10px); }
.products-main .masterCont-2 .txt-b span { color:#fff; font-size:22px; font-weight:600; line-height:1.6; }
.products-main .masterCont-2 .txt-b span i { margin-right:15px; vertical-align:middle; }
@media screen and (max-width:1560px){
	.products-main .masterCont-1 .listbox > ul { gap:15px; }
	.products-main .masterCont-1 .listbox > ul > li { width:calc((100% - 45px) / 4); }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img { height:44px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img.img1 { height:70px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dd { margin-top:20px; font-size:20px; }
	.products-main .masterCont-2 { margin-top:140px; padding:190px 0 40px; }
	.products-main .masterCont-2 dt { font-size:50px; }
	.products-main .masterCont-2 dd { margin-top:100px; }
	.products-main .masterCont-2 dd .txt-1 { font-size:22px; }
	.products-main .masterCont-2 dd .txt-2 { margin-top:20px; font-size:30px; }
	.products-main .masterCont-2 .txt-b { margin-top:190px; height:95px; }
	.products-main .masterCont-2 .txt-b span { font-size:20px; }
}
@media screen and (max-width:1280px){
	.products-main .masterCont-1 .listbox > ul { gap:10px; }
	.products-main .masterCont-1 .listbox > ul > li { width:calc((100% - 30px) / 4); }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img { height:40px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img.img1 { height:80px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dd { margin-top:15px; font-size:18px; }
	.products-main .masterCont-2 { margin-top:100px; padding:120px 0 30px; }
	.products-main .masterCont-2 dt { font-size:38px; }
	.products-main .masterCont-2 dd { margin-top:80px; }
	.products-main .masterCont-2 dd .txt-1 { font-size:20px; }
	.products-main .masterCont-2 dd .txt-2 { margin-top:15px; font-size:24px; }
	.products-main .masterCont-2 .txt-b { margin-top:120px; height:90px; }
	.products-main .masterCont-2 .txt-b span { padding-left:35px; font-size:18px; }
}
@media screen and (max-width:1024px){
	.products-main .masterCont-1 .listbox { max-width:760px; margin:0 auto }
	.products-main .masterCont-1 .listbox > ul > li { width:calc((100% - 10px) / 2); border-radius:10px; }
	.products-main .masterCont-1 .listbox > ul > li .imgbox:before { width:calc(100% - 8px); height:calc(100% - 8px); border:4px solid var(--mainColor); border-radius:10px; }
	.products-main .masterCont-1 .listbox > ul > li .imgbox img { border-radius:10px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img { height:40px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img.img1 { height:85px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dd { margin-top:15px; font-size:17px; }
	.products-main .masterCont-1 .listbox > ul > li:hover .imgbox { transform:scale(1); }
	.products-main .masterCont-2 { margin-top:80px; padding:100px 0 30px; }
	.products-main .masterCont-2 dt { font-size:30px; }
	.products-main .masterCont-2 dd { margin-top:60px; }
	.products-main .masterCont-2 dd .txt-1 { font-size:18px; }
	.products-main .masterCont-2 dd .txt-2 { margin-top:10px; font-size:21px; }
	.products-main .masterCont-2 .txt-b { margin-top:80px; height:90px; padding:0 10px; }
	.products-main .masterCont-2 .txt-b span { padding-left:30px; font-size:17px; }
	.products-main .masterCont-2 .txt-b span i { margin-right:10px; }
	.products-main .masterCont-2 .txt-b span i img { width:20px; }
}
@media screen and (max-width:860px){
	.products-main .masterCont-2 dd .txt-1 br { display:none }
}
@media screen and (max-width:640px){
	.products-main .masterCont-1 .listbox > ul { gap:5px; }
	.products-main .masterCont-1 .listbox > ul > li { width:calc((100% - 5px) / 2); }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img { height:30px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img.img1 { height:55px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dd { margin-top:8px; font-size:16px; }
	.products-main .masterCont-2 { margin-top:60px; padding:80px 0 20px; }
	.products-main .masterCont-2 dt { font-size:22px; }
	.products-main .masterCont-2 dd { margin-top:30px; }
	.products-main .masterCont-2 dd .txt-1 { font-size:16px; }
	.products-main .masterCont-2 dd .txt-2 { margin-top:5px; font-size:18px; }
	.products-main .masterCont-2 .txt-b { margin-top:60px; height:auto; padding:15px 10px; }
	.products-main .masterCont-2 .txt-b span { padding-left:30px; font-size:16px; }
	.products-main .masterCont-2 .txt-b span i { margin-right:8px; }
	.products-main .masterCont-2 .txt-b span i img { width:18px; }
}
@media screen and (max-width:480px){
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img { height:20px; }
	.products-main .masterCont-1 .listbox > ul > li .txtbox dt img.img1 { height:44px; }
	.products-main .masterCont-2 dd .txt-1 { font-size:15px; }
	.products-main .masterCont-2 dd .txt-2 { margin-top:5px; font-size:17px; }
}

/* animation */
.products-main .masterCont-1 .listbox > ul > li { opacity:0; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(1) { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(2) { animation:bgs3 0.8s 0.5s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(3) { animation:bgs3 0.8s 0.7s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(4) { animation:bgs3 0.8s 0.9s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(5) { animation:bgs3 0.8s 1.1s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(6) { animation:bgs3 0.8s 1.3s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(7) { animation:bgs3 0.8s 1.5s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(8) { animation:bgs3 0.8s 1.7s; animation-fill-mode:both; }
.products-main .masterCont-1 .listbox > ul > li:nth-child(9) { animation:bgs3 0.8s 1.9s; animation-fill-mode:both; }
.products-main .masterCont-2 dt,
.products-main .masterCont-2 dd { opacity:0; }
.products-main .masterCont-2.subOn dt { animation:ani_3 1.0s 0.2s; animation-fill-mode:both; }
.products-main .masterCont-2.subOn dd  { animation:ani_3 1.0s 0.5s; animation-fill-mode:both; }
.products-main .masterCont-2 .txt-b { opacity:0; }
.products-main .masterCont-2.subOn .txt-b { animation:bgs3 1.0s 1.0s; animation-fill-mode:both; }


.products-main .hvacCont-1 .top { color:#111; font-size:48px; font-weight:700; line-height:1.5; letter-spacing:-0.05em; }
.products-main .hvacCont-1 .top strong { color:var(--mainColor); font-weight:700; display:block }
.products-main .hvacCont-1 .listbox { margin-top:40px; }
.products-main .hvacCont-1 .listbox ul { display:flex; flex-wrap:wrap; background:url(/img/sub/products/hvacCont_bg1.jpg) no-repeat center / cover; border-radius:20px;}
.products-main .hvacCont-1 .listbox li { position:relative; width:25%; text-align:center }
.products-main .hvacCont-1 .listbox li:not(:last-child):before { content:""; display:block; position:absolute; right:0; top:0; width:1px; height:100%; background:#fff; }
.products-main .hvacCont-1 .listbox li a { width:100%; height:520px; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.products-main .hvacCont-1 .listbox li a strong { display:block; color:#fff; font-size:32px; font-weight:600; line-height:1.5; letter-spacing:-0.045em; }
.products-main .hvacCont-1 .listbox li a .stxt { display:block; margin-top:10px; font-family:var(--mainFont); color:rgba(255,255,255,0.5); font-size:21px; font-weight:500; line-height:1.5; }
.products-main .hvacCont-1 .listbox li a .arr { opacity:0.5; display:block; margin-top:30px; margin-left:-15px; transition:all 0.3s; }
.products-main .hvacCont-1 .listbox li a:hover .arr { opacity:1; margin-left:0; }
.products-main .hvacCont-1 .txtbox { margin-top:120px; }
.products-main .hvacCont-1 .txtbox p:not(:last-child) { margin-bottom:40px; }
.products-main .hvacCont-1 .txtbox p { color:#333; font-size:23px; font-weight:300; line-height:1.7; }
.products-main .hvacCont-2 { margin-top:180px; padding:180px 0; background:url(/img/sub/products/hvacCont_bg2.jpg) no-repeat center / cover; }
.products-main .hvacCont-2 .listbox > ul { display:flex; flex-wrap:wrap; gap:20px; }
.products-main .hvacCont-2 .listbox > ul > li { width:calc((100% - 40px) / 3); padding:40px; border-radius:10px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(0, 0, 0, 0.10); backdrop-filter:blur(7.5px); }
.products-main .hvacCont-2 .listbox > ul > li .num { font-family:var(--mainFont); color:rgba(255,255,255,1); font-size:17px; font-weight:700; line-height:1.3; width:50px; height:50px; border-radius:10px; background:var(--mainColor); display:flex; align-items:center; justify-content:center; }
.products-main .hvacCont-2 .listbox > ul > li strong { margin-top:40px; display:block; color:#fff; font-size:20px; font-weight:500; line-height:1.5; }
@media screen and (max-width:1560px){
	.products-main .hvacCont-1 .top { font-size:40px; }
	.products-main .hvacCont-1 .listbox { margin-top:35px; }
	.products-main .hvacCont-1 .listbox li a { height:500px; }
	.products-main .hvacCont-1 .listbox li a strong { font-size:30px; }
	.products-main .hvacCont-1 .listbox li a .stxt { margin-top:10px; font-size:20px; }
	.products-main .hvacCont-1 .listbox li a .arr { margin-top:25px; }
	.products-main .hvacCont-1 .txtbox { margin-top:100px; }
	.products-main .hvacCont-1 .txtbox p:not(:last-child) { margin-bottom:35px; }
	.products-main .hvacCont-1 .txtbox p { font-size:21px; }
	.products-main .hvacCont-2 { margin-top:140px; padding:140px 0; }
	.products-main .hvacCont-2 .listbox > ul { gap:20px; }
	.products-main .hvacCont-2 .listbox > ul > li { padding:35px; }
	.products-main .hvacCont-2 .listbox > ul > li .num { font-size:16px; width:50px; height:50px; }
	.products-main .hvacCont-2 .listbox > ul > li strong { margin-top:35px; font-size:19px; }
}
@media screen and (max-width:1280px){
	.products-main .hvacCont-1 .top { font-size:32px; }
	.products-main .hvacCont-1 .listbox { margin-top:30px; }
	.products-main .hvacCont-1 .listbox li a { height:420px; }
	.products-main .hvacCont-1 .listbox li a strong { font-size:26px; }
	.products-main .hvacCont-1 .listbox li a .stxt { margin-top:8px; font-size:19px; }
	.products-main .hvacCont-1 .listbox li a .arr { margin-top:20px; }
	.products-main .hvacCont-1 .txtbox { margin-top:80px; }
	.products-main .hvacCont-1 .txtbox p:not(:last-child) { margin-bottom:30px; }
	.products-main .hvacCont-1 .txtbox p { font-size:19px; }
	.products-main .hvacCont-2 { margin-top:100px; padding:100px 0; }
	.products-main .hvacCont-2 .listbox > ul { gap:15px; }
	.products-main .hvacCont-2 .listbox > ul > li { width:calc((100% - 30px) / 3); padding:30px; }
	.products-main .hvacCont-2 .listbox > ul > li .num { font-size:15px; width:46px; height:46px; }
	.products-main .hvacCont-2 .listbox > ul > li strong { margin-top:25px; font-size:18px; }
}
@media screen and (max-width:1024px){
	.products-main .hvacCont-1 .top { font-size:26px; }
	.products-main .hvacCont-1 .listbox { margin-top:20px; }
	.products-main .hvacCont-1 .listbox ul { border-radius:10px;}
	.products-main .hvacCont-1 .listbox li a { height:300px; }
	.products-main .hvacCont-1 .listbox li a strong { font-size:24px; }
	.products-main .hvacCont-1 .listbox li a .stxt { margin-top:5px; font-size:18px; }
	.products-main .hvacCont-1 .listbox li a .arr { margin-top:15px; margin-left:0; }
	.products-main .hvacCont-1 .txtbox { margin-top:50px; }
	.products-main .hvacCont-1 .txtbox p:not(:last-child) { margin-bottom:20px; }
	.products-main .hvacCont-1 .txtbox p { font-size:17px; }
	.products-main .hvacCont-2 { margin-top:80px; padding:80px 0; }
	.products-main .hvacCont-2 .listbox > ul { gap:10px; }
	.products-main .hvacCont-2 .listbox > ul > li { width:calc((100% - 20px) / 3); padding:20px; border-width:1px; border-radius:5px; }
	.products-main .hvacCont-2 .listbox > ul > li .num { font-size:14px; width:38px; height:38px; border-radius:5px; }
	.products-main .hvacCont-2 .listbox > ul > li strong { margin-top:20px; font-size:16px; }
}
@media screen and (max-width:860px){
	.products-main .hvacCont-1 .listbox li { width:50%; }
	.products-main .hvacCont-1 .listbox li a { height:260px; }
	.products-main .hvacCont-1 .listbox li:nth-child(1):after,
	.products-main .hvacCont-1 .listbox li:nth-child(2):after { content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#fff; }
}
@media screen and (max-width:640px){
	.products-main .hvacCont-1 .top { font-size:22px; }
	.products-main .hvacCont-1 .listbox li a { height:210px; }
	.products-main .hvacCont-1 .listbox li a strong { font-size:20px; }
	.products-main .hvacCont-1 .listbox li a .stxt { margin-top:3px; font-size:16px; }
	.products-main .hvacCont-1 .listbox li a .arr { margin-top:12px; }
	.products-main .hvacCont-1 .listbox li a .arr img { width:13px; }
	.products-main .hvacCont-1 .txtbox { margin-top:35px; }
	.products-main .hvacCont-1 .txtbox p:not(:last-child) { margin-bottom:15px; }
	.products-main .hvacCont-1 .txtbox p { font-size:16px; }
	.products-main .hvacCont-2 .listbox > ul > li { width:100%; }
	.products-main .hvacCont-2 .listbox > ul > li .num { font-size:13px; width:32px; height:32px; }
	.products-main .hvacCont-2 .listbox > ul > li strong { margin-top:10px; }
}

/* animation */
.products-main .hvacCont-1 .top { opacity:0; }
.products-main .hvacCont-1 .top.subOn { animation:ani_2 1.0s 0.2s; animation-fill-mode:both; }
.products-main .hvacCont-1 .listbox li a { opacity:0; }
.products-main .hvacCont-1 .listbox.subOn li:nth-child(1) a { animation:bgs3 1.0s 0.2s; animation-fill-mode:both; }
.products-main .hvacCont-1 .listbox.subOn li:nth-child(2) a { animation:bgs3 1.0s 0.5s; animation-fill-mode:both; }
.products-main .hvacCont-1 .listbox.subOn li:nth-child(3) a { animation:bgs3 1.0s 0.8s; animation-fill-mode:both; }
.products-main .hvacCont-1 .listbox.subOn li:nth-child(4) a { animation:bgs3 1.0s 1.1s; animation-fill-mode:both; }
.products-main .hvacCont-1 .txtbox { opacity:0; }
.products-main .hvacCont-1 .txtbox.subOn { animation:ani_4 1.0s 0.3s; animation-fill-mode:both; }
.products-main .hvacCont-2 .listbox > ul > li { opacity:0; }
.products-main .hvacCont-2.subOn .listbox > ul > li:nth-child(1) { animation:ani_3 1.0s 0.2s; animation-fill-mode:both; }
.products-main .hvacCont-2.subOn .listbox > ul > li:nth-child(2) { animation:ani_3 1.0s 0.5s; animation-fill-mode:both; }
.products-main .hvacCont-2.subOn .listbox > ul > li:nth-child(3) { animation:ani_3 1.0s 0.8s; animation-fill-mode:both; }
.products-main .hvacCont-2.subOn .listbox > ul > li:nth-child(4) { animation:ani_3 1.0s 1.1s; animation-fill-mode:both; }


.products-sub { overflow:hidden }
.products-sub .bg { background:#f4f5f9; }
.products-sub .info-box { display:flex; flex-wrap:wrap; }
.products-sub .info-box .txtbox { width:57%; }
.products-sub .info-box .movbox { width:43%; padding-left:8%; padding-top:45px; }
.products-sub .info-box .txtbox dt strong { color:var(--mainColor); font-size:19px; font-weight:700; line-height:1.3; display:block; }
.products-sub .info-box .txtbox dt span { margin-top:20px; color:#111; font-size:54px; font-weight:700; line-height:1.5; display:block; }
.products-sub .info-box .txtbox dd { margin-top:60px; color:#333; font-size:22px; font-weight:300; line-height:1.7; letter-spacing:-0.04em; }
.products-sub .info-box .movbox .mov { position:relative; border-radius:20px; overflow:hidden }
.products-sub .info-box .movbox .mov:before { content:''; display:block; padding-bottom:56.25%; /* 16:9 비율 */ }
.products-sub .info-box .movbox .mov img,
.products-sub .info-box .movbox .mov video,
.products-sub .info-box .movbox .mov iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.products-sub .info-box .movbox .mov .bg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; background:rgba(0, 0, 0, 0.2); }
.products-sub .info-box .movbox .mov .play { transition:all 0.3s ease-in-out; display:flex; align-items:center; justify-content:center; font-family:var(--mainFont); font-style:italic; font-size:17px; font-weight:500; line-height:1.5; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100px; height:100px; z-index:5; background:rgba(0, 75, 208, 0.6); border-radius:100px; cursor:pointer; }
.products-sub .info-box .movbox .mov .play .txt { overflow:hidden; width:100%; height:22px; display:flex; align-items:center; justify-content:flex-start; flex-direction:column; text-align:center; }
.products-sub .info-box .movbox .mov .play .txt * { height:22px; display:flex; align-items:center; justify-content:center; font-family:var(--mainFont); font-weight:500; }
.products-sub .info-box .movbox .mov .play .txt span { transition:all 0.3s ease-in-out; color:rgba(255, 255, 255, 0.6); }
.products-sub .info-box .movbox .mov .play .txt strong { color:rgba(255, 255, 255, 1); }
.products-sub .info-box .movbox .mov .play:hover { width:130px; height:130px; background:var(--mainColor); }
.products-sub .info-box .movbox .mov .play:hover .txt span { margin-top:-22px; }

/* 24.09.23 */
.products-sub .info-box .movbox .mov:has(iframe) > *:not(iframe) { opacity: 0; }

.products-sub .feature-box { margin-top:150px; display:flex; flex-wrap:wrap; gap:40px; }
.products-sub .feature-box .box { padding:60px; border-radius:20px; border:2px solid #e5e5e5; background:#fff; }
.products-sub .feature-box .box:nth-child(1) { width:calc(45% - 20px); }
.products-sub .feature-box .box:nth-child(2) { width:calc(55% - 20px); }
.products-sub .feature-box-1 .box:nth-child(1),
.products-sub .feature-box-1 .box:nth-child(2) { width:calc(50% - 20px); }
.products-sub .feature-box .box.full { width:100%; }
.products-sub .feature-box .box > dl > dt { display:flex; align-items:center; }
.products-sub .feature-box .box > dl > dt .icon { width:60px; height:60px; border-radius:10px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--mainColor); }
.products-sub .feature-box .box > dl > dt strong { padding-left:30px; color:#111; font-size:28px; font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
.products-sub .feature-box .box .list-1 { margin-top:40px; }
.products-sub .feature-box .box .list-1 li:not(:last-child) { margin-bottom:15px; }
.products-sub .feature-box .box .list-1 li { position:relative; padding-left:33px; color:#333; font-size:19px; font-weight:300; line-height:1.3; }
.products-sub .feature-box .box .list-1 li:before { content:""; display:block; position:absolute; left:0; top:6px; width:13px; height:10px; background:url(/img/sub/products/icon_ch1.svg) center no-repeat; }
.products-sub .feature-box .box .list-2 { margin-top:40px; display:flex; align-items:flex-start; gap:20px; justify-content:space-around; text-align:center; }
.products-sub .feature-box .box .list-2 li span { margin:0 auto; width:120px; height:120px; border-radius:10px; background:#f4f5f9; display:flex; align-items:center; justify-content:center; }
.products-sub .feature-box .box .list-2 li strong { display:block; margin-top:30px; color:#333; font-size:19px; font-weight:300; line-height:1.5; }
.products-sub .feature-box .box .list-3 { margin-top:30px; display:flex; gap:40px; flex-wrap:wrap; }
.products-sub .feature-box .box .list-3 li { display:flex; align-items:center; width:calc((100% - 40px) / 2); }
.products-sub .feature-box .box .list-3 li span { margin:0 auto; width:120px; height:120px; border-radius:120px; background:#fff; border:2px solid #e5e5e5; display:flex; align-items:center; justify-content:center; }
.products-sub .feature-box .box .list-3 li dl { width:calc(100% - 120px); padding-left:40px; }
.products-sub .feature-box .box .list-3 li dt { color:#111; font-size:23px; font-weight:600; line-height:1.5; letter-spacing:-0.04em; }
.products-sub .feature-box .box .list-3 li dd { margin-top:15px; color:#333; font-size:19px; font-weight:300; line-height:1.3; }
.products-sub .listbox { margin-top:180px; padding:180px 0; }
.products-sub .listbox > ul > li { display:flex; flex-wrap:wrap; gap:120px; align-items:center; }
.products-sub .listbox > ul > li.full { align-items:flex-start; }
.products-sub .listbox > ul > li:not(:last-child) { margin-bottom:120px; }
.products-sub .listbox > ul > li > div { width:calc((100% - 120px) / 2); }
.products-sub .listbox > ul > li .imgbox { position:relative; }
.products-sub .listbox > ul > li .imgbox span { width:100%; height:100%; border-radius:20px; border:2px solid #E5E5E5; display:block; overflow:hidden }
.products-sub .listbox > ul > li .imgbox img { width:100%; }
.products-sub .listbox > ul > li .txtbox > dl > dt { color:#111; font-size:32px; font-weight:500; line-height:1.6; letter-spacing:-0.05em; }
.products-sub .listbox > ul > li .txtbox > dl > dd { margin-top:60px; color:#333; font-size:19px; font-weight:300; line-height:1.7; }
.products-sub .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:60px; }
.products-sub .listbox > ul > li .txtbox > dl > dd dl dt { color:var(--mainColor); font-weight:600; }
.products-sub .listbox > ul > li .txtbox > dl > dd dl dd { margin-top:10px; }
.products-sub .listbox > ul > li .txtbox > dl > dd dl dd ul { display:flex; flex-wrap:wrap; gap:0 25px; }
.products-sub .listbox > ul > li .txtbox > dl > dd dl dd ul li { position:relative; }
.products-sub .listbox > ul > li .txtbox > dl > dd dl dd ul li:before { content:""; display:block; position:absolute; right:-13px; top:50%; transform:translateY(-50%); width:1px; height:15px; background:#333; }
.products-sub .listbox > ul > li .txtbox > dl > dd dl dd ul li:last-child:before { display:none }
.products-sub .listbox > ul > li:nth-child(2n) { flex-direction:row-reverse; }
.products-sub .listbox > ul > li:nth-child(2n) .txtbox { text-align:right; }
.products-sub .banner-box { padding:180px 0 200px; }
.products-sub .banner-box .box { text-align:center; padding:0 10px; height:620px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:url(/img/sub/products/banner_bg.jpg) no-repeat center / cover; border-radius:20px; }
.products-sub .banner-box .box.bg-2 { background:url(/img/sub/products/banner_bg2.jpg) no-repeat center / cover; }
.products-sub .banner-box .box.bg-3 { background:url(/img/sub/products/banner_bg3.jpg) no-repeat center / cover; }
.products-sub .banner-box .box .logo span { font-family:var(--mainFont); color:#fff; font-size:37px; font-weight:500; line-height:1.3; }
.products-sub .banner-box .box .logo img.logo2 { margin-left:10px; }
.products-sub .banner-box .box dt { margin-top:40px; color:#fff; font-size:54px; font-weight:600; line-height:1.3; letter-spacing:-0.06em; }
.products-sub .banner-box .box dd { margin-top:80px; color:rgba(255,255,255,0.7); font-size:24px; font-weight:500; line-height:1.7; letter-spacing:-0.04em; }
.products-sub .banner-box .box dd p:not(:last-child) { margin-bottom:45px; }
@media screen and (max-width:1560px){
	.products-sub .info-box .movbox { padding-top:40px; }
	.products-sub .info-box .txtbox dt strong { font-size:18px; }
	.products-sub .info-box .txtbox dt span { margin-top:15px; font-size:48px; }
	.products-sub .info-box .txtbox dd { margin-top:50px; font-size:21px; }
	.products-sub .info-box .movbox .mov { border-radius:20px; }
	.products-sub .feature-box { margin-top:120px; gap:30px; }
	.products-sub .feature-box .box { padding:50px; }
	.products-sub .feature-box .box { width:calc((100% - 30px) / 2); }
	.products-sub .feature-box .box:nth-child(1) { width:calc(45% - 15px); }
	.products-sub .feature-box .box:nth-child(2) { width:calc(55% - 15px); }
	.products-sub .feature-box-1 .box:nth-child(1),
	.products-sub .feature-box-1 .box:nth-child(2) { width:calc(50% - 15px); }
	.products-sub .feature-box .box > dl > dt .icon { width:55px; height:55px; }
	.products-sub .feature-box .box > dl > dt strong { padding-left:25px; font-size:26px; }
	.products-sub .feature-box .box .list-1 { margin-top:30px; }
	.products-sub .feature-box .box .list-1 li:not(:last-child) { margin-bottom:15px; }
	.products-sub .feature-box .box .list-1 li { padding-left:30px; font-size:18px; }
	.products-sub .feature-box .box .list-2 { margin-top:30px; gap:15px; }
	.products-sub .feature-box .box .list-2 li span { width:110px; height:110px; }
	.products-sub .feature-box .box .list-2 li strong { margin-top:25px; font-size:18px; }
	.products-sub .feature-box .box .list-3 { margin-top:30px; gap:30px; }
	.products-sub .feature-box .box .list-3 li { width:calc((100% - 30px) / 2); }
	.products-sub .feature-box .box .list-3 li span { width:110px; height:110px; }
	.products-sub .feature-box .box .list-3 li dl { width:calc(100% - 110px); padding-left:30px; }
	.products-sub .feature-box .box .list-3 li dt { font-size:22px; }
	.products-sub .feature-box .box .list-3 li dd { margin-top:12px; font-size:18px; }
	.products-sub .listbox { margin-top:140px; padding:140px 0; }
	.products-sub .listbox > ul > li { gap:80px; }
	.products-sub .listbox > ul > li:not(:last-child) { margin-bottom:100px; }
	.products-sub .listbox > ul > li > div { width:calc((100% - 80px) / 2); }
	.products-sub .listbox > ul > li .txtbox > dl > dt { font-size:26px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd { margin-top:50px; font-size:18px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:50px; }
	.products-sub .banner-box { padding:140px 0 160px; }
	.products-sub .banner-box .box { height:500px; }
	.products-sub .banner-box .box .logo img { height:44px;  }
	.products-sub .banner-box .box .logo span { font-size:32px; }
	.products-sub .banner-box .box dt { margin-top:30px; font-size:48px; }
	.products-sub .banner-box .box dd { margin-top:60px; font-size:22px; }
	.products-sub .banner-box .box dd p:not(:last-child) { margin-bottom:40px; }
}
@media screen and (max-width:1440px){
	.products-sub .feature-box { gap:20px; }
	.products-sub .feature-box .box { width:calc((100% - 20px) / 2); }
	.products-sub .feature-box .box:nth-child(1) { width:calc(40% - 10px); }
	.products-sub .feature-box .box:nth-child(2) { width:calc(60% - 10px); }
	.products-sub .feature-box-1 .box:nth-child(1),
	.products-sub .feature-box-1 .box:nth-child(2) { width:calc(50% - 10px); }
	.products-sub .listbox > ul > li .txtbox > dl > dt br,
	.products-sub .listbox > ul > li .txtbox > dl > dd br { display:none }
	.products-sub .listbox > ul > li .txtbox > dl > dt span.m_br,
	.products-sub .listbox > ul > li .txtbox > dl > dd span.m_br { display:block }
}
@media screen and (max-width:1280px){
	.products-sub .info-box .movbox { padding-top:35px; }
	.products-sub .info-box .txtbox dt strong { font-size:17px; }
	.products-sub .info-box .txtbox dt span { margin-top:12px; font-size:36px; }
	.products-sub .info-box .txtbox dd { margin-top:40px; font-size:19px; }
	.products-sub .feature-box { margin-top:100px; }
	.products-sub .feature-box .box { padding:30px; }
	.products-sub .feature-box .box > dl > dt .icon { width:50px; height:50px; }
	.products-sub .feature-box .box > dl > dt strong { padding-left:20px; font-size:22px; }
	.products-sub .feature-box .box .list-1 { margin-top:25px; }
	.products-sub .feature-box .box .list-1 li:not(:last-child) { margin-bottom:12px; }
	.products-sub .feature-box .box .list-1 li { padding-left:25px; font-size:17px; }
	.products-sub .feature-box .box .list-2 { margin-top:25px; gap:10px; }
	.products-sub .feature-box .box .list-2 li span { width:100px; height:100px; }
	.products-sub .feature-box .box .list-2 li strong { margin-top:20px; font-size:17px; }
	.products-sub .feature-box .box .list-3 { margin-top:25px; gap:20px; }
	.products-sub .feature-box .box .list-3 li { width:calc((100% - 20px) / 2); }
	.products-sub .feature-box .box .list-3 li span { width:100px; height:100px; }
	.products-sub .feature-box .box .list-3 li dl { width:calc(100% - 100px); padding-left:20px; }
	.products-sub .feature-box .box .list-3 li dt { font-size:20px; }
	.products-sub .feature-box .box .list-3 li dd { margin-top:10px; font-size:17px; }
	.products-sub .listbox { margin-top:100px; padding:100px 0; }
	.products-sub .listbox > ul > li { gap:40px; }
	.products-sub .listbox > ul > li:not(:last-child) { margin-bottom:60px; }
	.products-sub .listbox > ul > li > div { width:calc((100% - 40px) / 2); }
	.products-sub .listbox > ul > li .txtbox > dl > dt { font-size:22px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd { margin-top:30px; font-size:17px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:35px; }
	.products-sub .banner-box { padding:100px 0 120px; }
	.products-sub .banner-box .box { height:380px; }
	.products-sub .banner-box .box .logo img { height:40px; }
	.products-sub .banner-box .box .logo span { font-size:26px; }
	.products-sub .banner-box .box dt { margin-top:20px; font-size:36px; }
	.products-sub .banner-box .box dd { margin-top:40px; font-size:19px; }
	.products-sub .banner-box .box dd p:not(:last-child) { margin-bottom:30px; }
}
@media screen and (max-width:1024px){
	.products-sub .info-box .txtbox { width:100%; }
	.products-sub .info-box .movbox { width:100%; padding-left:0; padding-top:30px; }
	.products-sub .info-box .txtbox dt strong { font-size:16px; }
	.products-sub .info-box .txtbox dt span { margin-top:10px; font-size:28px; }
	.products-sub .info-box .txtbox dt span br { display:none }
	.products-sub .info-box .txtbox dd { margin-top:20px; font-size:17px; }
	.products-sub .info-box .movbox .mov { border-radius:10px; }
	.products-sub .feature-box { margin-top:80px; gap:10px; }
	.products-sub .feature-box .box { padding:20px; border-radius:10px; }
	.products-sub .feature-box .box,
	.products-sub .feature-box .box:nth-child(1),
	.products-sub .feature-box .box:nth-child(2),
	.products-sub .feature-box-1 .box:nth-child(1),
	.products-sub .feature-box-1 .box:nth-child(2) { width:100%; }
	.products-sub .feature-box .box > dl > dt .icon { width:45px; height:45px; border-radius:5px; }
	.products-sub .feature-box .box > dl > dt .icon img { width:50% }
	.products-sub .feature-box .box > dl > dt strong { padding-left:20px; font-size:20px; }
	.products-sub .feature-box .box .list-1 { margin-top:20px; }
	.products-sub .feature-box .box .list-1 li:not(:last-child) { margin-bottom:12px; }
	.products-sub .feature-box .box .list-1 li { padding-left:25px; font-size:16px; }
	.products-sub .feature-box .box .list-2 { margin-top:20px; gap:10px; }
	.products-sub .feature-box .box .list-2 li span { width:80px; height:80px; border-radius:5px; }
	.products-sub .feature-box .box .list-2 li span img { width:50%; max-height:40px; }
	.products-sub .feature-box .box .list-2 li strong { margin-top:15px; font-size:16px; }
	.products-sub .feature-box .box .list-3 { margin-top:20px; gap:20px; }
	.products-sub .feature-box .box .list-3 li { width:calc((100% - 20px) / 2); }
	.products-sub .feature-box .box .list-3 li span { width:80px; height:80px; border-radius:5px; }
	.products-sub .feature-box .box .list-3 li span img { width:50%; max-height:40px; }
	.products-sub .feature-box .box .list-3 li dl { width:calc(100% - 80px); padding-left:15px; }
	.products-sub .feature-box .box .list-3 li dt { font-size:18px; }
	.products-sub .feature-box .box .list-3 li dd { margin-top:8px; font-size:16px; }
	.products-sub .listbox { margin-top:80px; padding:80px 0; }
	.products-sub .listbox > ul > li { gap:30px; }
	.products-sub .listbox > ul > li:not(:last-child) { margin-bottom:60px; }
	.products-sub .listbox > ul > li > div { width:calc((100% - 30px) / 2); }
	.products-sub .listbox > ul > li .imgbox span { border-radius:10px; border-width:1px; }
	.products-sub .listbox > ul > li .txtbox > dl > dt { font-size:20px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd { margin-top:20px; font-size:16px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:25px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd dl dd { margin-top:5px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd dl dd ul { gap:0 19px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd dl dd ul li:before { right:-10px; height:13px; }
	.products-sub .banner-box { padding:80px 0 100px; }
	.products-sub .banner-box .box { padding:80px 10px; height:auto; border-radius:10px; }
	.products-sub .banner-box .box .logo img { height:36px; }
	.products-sub .banner-box .box .logo span { font-size:19px; }
	.products-sub .banner-box .box dt { margin-top:12px; font-size:24px; }
	.products-sub .banner-box .box dd { margin-top:30px; font-size:17px; }
	.products-sub .banner-box .box dd p:not(:last-child) { margin-bottom:20px; }
}
@media screen and (max-width:960px){
	.products-sub .listbox > ul > li > div { width:100%; }
	.products-sub .listbox > ul > li .imgbox:before { padding-bottom:45%; }
	.products-sub .listbox > ul > li:nth-child(2n) .txtbox { text-align:left; }
}
@media screen and (max-width:640px){
	.products-sub .info-box .movbox { padding-top:20px; }
	.products-sub .info-box .txtbox dt strong { font-size:15px; }
	.products-sub .info-box .txtbox dt span { margin-top:5px; font-size:22px; }
	.products-sub .info-box .txtbox dd { margin-top:12px; font-size:16px; }
	.products-sub .feature-box { margin-top:40px; }
	.products-sub .feature-box .box > dl > dt .icon { width:40px; height:40px; }
	.products-sub .feature-box .box > dl > dt .icon img { width:40% }
	.products-sub .feature-box .box > dl > dt strong { padding-left:12px; font-size:18px; }
	.products-sub .feature-box .box .list-1 { margin-top:15px; }
	.products-sub .feature-box .box .list-1 li:not(:last-child) { margin-bottom:10px; }
	.products-sub .feature-box .box .list-1 li { padding-left:22px; font-size:15px; }
	.products-sub .feature-box .box .list-2 { margin-top:15px; gap:20px 10px; flex-wrap:wrap; justify-content:flex-start;}
	.products-sub .feature-box .box .list-2 li { width:calc((100% - 10px) / 2); }
	.products-sub .feature-box .box .list-2 li span { width:70px; height:70px; }
	.products-sub .feature-box .box .list-2 li span img { width:50%; max-height:40px; }
	.products-sub .feature-box .box .list-2 li strong { margin-top:10px; font-size:15px; }
	.products-sub .feature-box .box .list-3 { margin-top:15px; gap:20px; }
	.products-sub .feature-box .box .list-3 li { width:100%; }
	.products-sub .feature-box .box .list-3 li span { width:70px; height:70px; border:1px solid #e5e5e5 }
	.products-sub .feature-box .box .list-3 li span img { width:50%; max-height:40px; }
	.products-sub .feature-box .box .list-3 li dl { width:calc(100% - 70px); padding-left:15px; }
	.products-sub .feature-box .box .list-3 li dt { font-size:17px; }
	.products-sub .feature-box .box .list-3 li dd { margin-top:5px; font-size:15px; }
	.products-sub .listbox { margin-top:40px; padding:40px 0; }
	.products-sub .listbox > ul > li { gap:20px; }
	.products-sub .listbox > ul > li:not(:last-child) { margin-bottom:30px; }
	.products-sub .listbox > ul > li .txtbox > dl > dt { font-size:18px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd { margin-top:15px; font-size:15px; }
	.products-sub .listbox > ul > li .txtbox > dl > dd dl:not(:last-child) { margin-bottom:15px; }
	.products-sub .banner-box { padding:40px 0 60px; }
	.products-sub .banner-box .box { padding:40px 10px; }
	.products-sub .banner-box .box .logo img { height:32px; }
	.products-sub .banner-box .box .logo img.logo2 { margin:10px 0 0; display:block }
	.products-sub .banner-box .box .logo span { font-size:18px; }
	.products-sub .banner-box .box dt { margin-top:10px; font-size:20px; }
	.products-sub .banner-box .box dd { margin-top:25px; font-size:15px; }
	.products-sub .banner-box .box dd p:not(:last-child) { margin-bottom:15px; }
}



/* animation */
.products-sub .info-box .txtbox dt,
.products-sub .info-box .txtbox dd { opacity:0; }
.products-sub .info-box.subOn .txtbox dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.products-sub .info-box.subOn .txtbox dd { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.products-sub .info-box .movbox .mov { opacity:0; }
.products-sub .info-box.subOn .movbox .mov { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.products-sub .feature-box .box { opacity:0; }
.products-sub .feature-box.subOn .box:nth-child(1) { animation:ani_1 0.8s 0.3s; animation-fill-mode:both; }
.products-sub .feature-box.subOn .box:nth-child(2) { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.products-sub .feature-box.subOn .box:nth-child(3) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.products-sub .feature-box.subOn .box:nth-child(4) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
.products-sub .feature-box.subOn .box:nth-child(5) { animation:ani_4 0.8s 1.2s; animation-fill-mode:both; }
.products-sub .listbox > ul > li .imgbox:after { content:""; display:block; width:100%; height:100%; background:#f4f5f9; position:absolute; right:0; top:0; }
.products-sub .listbox > ul > li:nth-child(2n) .imgbox:after { left:0; right:unset; }
.products-sub .listbox > ul > li.subOn .imgbox:after { animation:ani_w100 0.8s 0.1s; animation-fill-mode:both; }
.products-sub .listbox > ul > li .txtbox > dl > dt,
.products-sub .listbox > ul > li .txtbox > dl > dd { opacity:0; }
.products-sub .listbox > ul > li.subOn .txtbox dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.products-sub .listbox > ul > li.subOn .txtbox dd { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.products-sub .listbox > ul > li.subOn:nth-child(2n) .txtbox dt { animation:ani_1 0.8s 0.3s; animation-fill-mode:both; }
.products-sub .listbox > ul > li.subOn:nth-child(2n) .txtbox dd { animation:ani_1 0.8s 0.5s; animation-fill-mode:both; }
.products-sub .banner-box .box .logo,
.products-sub .banner-box .box dt,
.products-sub .banner-box .box dd { opacity:0; }
.products-sub .banner-box.subOn .box .logo { animation:ani_3 1.0s 0.2s; animation-fill-mode:both; }
.products-sub .banner-box.subOn .box dt { animation:ani_3 1.0s 0.8s; animation-fill-mode:both; }
.products-sub .banner-box.subOn .box dd { animation:ani_3 1.0s 1.4s; animation-fill-mode:both; }
@media screen and (max-width:1024px){
	.products-sub .feature-box.subOn .box:nth-child(1) { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
	.products-sub .feature-box.subOn .box:nth-child(2) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
	.products-sub .feature-box.subOn .box:nth-child(3) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
}
@media screen and (max-width:960px){
	.products-sub .listbox > ul > li:nth-child(2n) .imgbox:after { left:unset; right:0; }
	.products-sub .listbox > ul > li.subOn:nth-child(2n) .txtbox dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
	.products-sub .listbox > ul > li.subOn:nth-child(2n) .txtbox dd { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
}




/* company */
.greeting-box .top h4 { font-family:var(--mainFont); color:#111; font-size:44px; font-weight:700; line-height:1.6; letter-spacing:-0.06em; } 
.greeting-box .top h4 span { font-weight:700; }
.greeting-box .top h4 strong { color:var(--mainColor); font-weight:700; }
.greeting-box .greeting-bg { position:relative; margin-top:80px; height:450px; background:url(/img/sub/greeting_bg01.jpg) no-repeat center / cover;  }
.greeting-box .greeting-bg > div { position:relative; height:100%; }
.greeting-box .greeting-bg > div img { position:absolute; bottom:0; left:0; }
.greeting-box .greetingCont { margin-top:120px; display:flex; flex-wrap:wrap; overflow:hidden }
.greeting-box .greetingCont > img { max-width:100%; }
.greeting-box .greetingCont .imgbox { width:430px; text-align:center; }
.greeting-box .greetingCont .imgbox picture { position:relative; display:block }
.greeting-box .greetingCont .imgbox picture img { width:100%; border-radius:40px; }
.greeting-box .greetingCont .imgbox .txt { margin-top:40px; color:#ccc; font-size:18px; font-weight:700; line-height:1.3; }
.greeting-box .greetingCont .imgbox .txt strong { color:#222; font-size:28px; margin-left:20px; vertical-align:middle }
.greeting-box .greetingCont .txtbox { width:calc(100% - 430px); padding-left:150px; }
.greeting-box .greetingCont .txtbox p { color:#333; font-size:21px; font-weight:300; line-height:1.7; }
.greeting-box .greetingCont .txtbox p:not(:last-child) { margin-bottom:40px; }
.greeting-box .greetingCont .txtbox p strong { font-weight:600; color:var(--mainColor); }
.greeting-box .greetingCont .txtbox p > span { font-weight:600; color:#111; }
@media screen and (max-width:1640px){
	.greeting-box .greeting-bg > div img { left:20px; }
}
@media screen and (max-width:1560px){
	.greeting-box .top h4 { font-size:38px; } 
	.greeting-box .greeting-bg { margin-top:60px; height:400px; }
	.greeting-box .greeting-bg > div img { width:680px; }
	.greeting-box .greetingCont { margin-top:100px; }
	.greeting-box .greetingCont .imgbox { width:400px; }
	.greeting-box .greetingCont .imgbox .txt { margin-top:30px; font-size:17px; }
	.greeting-box .greetingCont .imgbox .txt strong { font-size:26px; margin-left:18px; }
	.greeting-box .greetingCont .txtbox { width:calc(100% - 400px); padding-left:120px; }
	.greeting-box .greetingCont .txtbox p { font-size:20px; }
	.greeting-box .greetingCont .txtbox p:not(:last-child) { margin-bottom:35px; }
}
@media screen and (max-width:1280px){
	.greeting-box .top h4 { font-size:30px; } 
	.greeting-box .greeting-bg { margin-top:50px; height:340px; }
	.greeting-box .greeting-bg > div img { width:520px; }
	.greeting-box .greetingCont { margin-top:80px; }
	.greeting-box .greetingCont .imgbox { width:340px; }
	.greeting-box .greetingCont .imgbox .txt { margin-top:20px; font-size:16px; }
	.greeting-box .greetingCont .imgbox .txt strong { font-size:24px; margin-left:15px; }
	.greeting-box .greetingCont .txtbox { width:calc(100% - 340px); padding-left:90px; }
	.greeting-box .greetingCont .txtbox p { font-size:19px; }
	.greeting-box .greetingCont .txtbox p:not(:last-child) { margin-bottom:30px; }
}
@media screen and (max-width:1024px){
	.greeting-box .top h4 { font-size:20px; } 
	.greeting-box .greeting-bg { margin-top:40px; height:280px; }
	.greeting-box .greeting-bg > div img { width:400px; }
	.greeting-box .greetingCont { margin-top:60px; display:block; }
	.greeting-box .greetingCont .imgbox { float:left; padding:0 30px 20px 0; }
	.greeting-box .greetingCont .imgbox picture img { border-radius:20px; }
	.greeting-box .greetingCont .imgbox .txt { margin-top:15px; font-size:15px; }
	.greeting-box .greetingCont .imgbox .txt strong { font-size:22px; margin-left:12px; }
	.greeting-box .greetingCont .txtbox { width:auto; padding-left:0; }
	.greeting-box .greetingCont .txtbox p { font-size:18px; text-align: justify; }
	.greeting-box .greetingCont .txtbox p:not(:last-child) { margin-bottom:20px; }
}
@media screen and (max-width:640px){
	.greeting-box .top h4 { font-size:19px; } 
	.greeting-box .greeting-bg { margin-top:30px; height:240px; }
	.greeting-box .greeting-bg > div img { width:260px; }
	.greeting-box .greetingCont { margin-top:50px; }
	.greeting-box .greetingCont .imgbox { width:300px; padding:0 20px 15px 0; }
	.greeting-box .greetingCont .imgbox .txt { margin-top:12px; font-size:15px; }
	.greeting-box .greetingCont .imgbox .txt strong { font-size:20px; margin-left:10px; }
	.greeting-box .greetingCont .txtbox p { font-size:17px; }
	.greeting-box .greetingCont .txtbox p:not(:last-child) { margin-bottom:15px; }
}
@media screen and (max-width:480px){
	.greeting-box .greetingCont .imgbox { width:100%; float:none; padding:0 0 15px 0; } 
}


/* animation */
.greeting-box .top h4 { overflow:hidden }
.greeting-box .top h4 span { display:block; opacity:0; }
.greeting-box .top h4 span.smTxt_ju { display:inline; }
.greeting-box .top.subOn h4 span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.greeting-box .greeting-bg:after { content:""; display:block; width:100%; height:100%; background:rgba(255,255,255,0.3); position:absolute; left:0; top:0; }
.greeting-box .greeting-bg.subOn:after { animation:ani_w 1.0s 0.5s forwards, ani_w100r 1.0s 1.5s forwards; }
.greeting-box .greeting-bg > div img { opacity:0; }
.greeting-box .greeting-bg.subOn > div img  { animation:ani_1 1.2s 1.8s; animation-fill-mode:both; }
.greeting-box .greetingCont .imgbox picture:after { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; right:0; bottom:0; }
.greeting-box .greetingCont.subOn .imgbox picture:after { animation:ani_w100 0.8s 0.5s; animation-fill-mode:both; }
.greeting-box .greetingCont .imgbox .txt { opacity:0; }
.greeting-box .greetingCont.subOn .imgbox .txt { animation:ani_5 0.8s 1.2s; animation-fill-mode:both; }
.greeting-box .greetingCont .txtbox p { opacity:0; }
.greeting-box .greetingCont.subOn .txtbox p { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
@media screen and (max-width:1024px){
	.greeting-box .greetingCont.subOn .imgbox picture:after { animation:ani_h100 0.8s 0.5s; animation-fill-mode:both; }
}


.overview-box .top .listbox h4 { font-family:var(--mainFont); color:#111; font-size:44px; font-weight:500; line-height:1.3; letter-spacing:-0.05em; } 
.overview-box .top .listbox h4 span { font-weight:500; }
.overview-box .top .listbox h4 strong { color:var(--mainColor); font-weight:500; }
.overview-box .top .listbox ul { display:flex; flex-wrap:wrap; gap:20px; margin-top:40px; }
.overview-box .top .listbox li { padding:40px; height:300px; width:calc((100% - 60px) / 4); border-radius:20px; border:2px solid rgba(0, 75, 208, 0.05); background:#f4f5f9; display:flex; flex-direction:column; justify-content:space-between; }
.overview-box .top .listbox li dt { color:var(--mainColor); font-size:18px; font-weight:600; line-height:1.3; }
.overview-box .top .listbox li dd { margin-top:5px; color:#111; font-size:22px; font-weight:600; line-height:1.3; }
.overview-box .top .listbox li dd span { color:#888; font-size:16px; }
.overview-box .overview-bottom { overflow:hidden; margin-top:180px; padding:180px 0; background:url(/img/sub/overview_bg.jpg) no-repeat center / cover; }
.overview-box .overview-bottom .list li:not(:last-child) { margin-bottom:120px; }
.overview-box .overview-bottom .list li dt { display:flex; align-items:center; }
.overview-box .overview-bottom .list li dt .num { font-family:var(--mainFont); color:#fff; font-size:17px; font-weight:700; line-height:1.3; display:flex; align-items:center; justify-content:center;width:50px; height:50px; border-radius:10px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(255, 255, 255, 0.10); }
.overview-box .overview-bottom .list li dt strong { margin-left:20px; color:#fff; font-size:28px; font-weight:600; line-height:1.3; }
.overview-box .overview-bottom .list li dd { margin-top:30px; }
.overview-box .overview-bottom .list li dd p { color:rgba(255,255,255,0.7); font-size:21px; font-weight:500; line-height:1.7; }
.overview-box .overview-bottom .txt_b { margin-top:120px; padding:37px 10px; text-align:center; color:rgba(255,255,255,1); font-size:23px; font-weight:600; line-height:1.3; border-radius:15px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(0, 0, 0, 0.10); backdrop-filter: blur(10px); }
.overview-box .overview-1 { margin-top:180px; }
.overview-box .overview-1 .overview-bg { position:relative; height:540px; background-position:center 0; background-repeat:no-repeat; background-size:cover; }
.overview-box .overview-1 .bg1 { background-image:url(/img/sub/overview_bg01.jpg); }
.overview-box .overview-1 .bg2 { background-image:url(/img/sub/overview_bg02.jpg); }
.overview-box .overview-1 .list dl { margin-top:120px; display:flex; flex-wrap:wrap; }
.overview-box .overview-1 .list dt { width:600px; color:#111; font-size:42px; font-weight:700; line-height:1.5; letter-spacing:-0.06em; }
.overview-box .overview-1 .list dt h4 { font-weight:700; }
.overview-box .overview-1 .list dd { width:calc(100% - 600px); color:#333; font-size:21px; font-weight:300; line-height:1.7; }
.overview-box .overview-1 .txt_b { margin-top:200px; padding:40px 10px; text-align:center; color:#333; font-size:23px; font-weight:600; line-height:1.5; border-radius:20px; border:2px solid rgba(0, 75, 208, 0.05); background:#f4f5f9; }
@media screen and (max-width:1560px){
	.overview-box .top .listbox h4 { font-size:38px; }
	.overview-box .top .listbox ul { gap:20px; margin-top:30px; }
	.overview-box .top .listbox li dt { font-size:17px; }
	.overview-box .top .listbox li dd { font-size:21px; }
	.overview-box .top .listbox li dd span { font-size:16px; }
	.overview-box .overview-bottom { margin-top:140px; padding:140px 0; }
	.overview-box .overview-bottom .list li:not(:last-child) { margin-bottom:100px; }
	.overview-box .overview-bottom .list li dt .num { font-size:16px; width:45px; height:45px; }
	.overview-box .overview-bottom .list li dt strong { margin-left:20px; font-size:24px; }
	.overview-box .overview-bottom .list li dd { margin-top:25px; }
	.overview-box .overview-bottom .list li dd p { font-size:20px; }
	.overview-box .overview-bottom .txt_b { margin-top:100px; padding:35px 10px; font-size:22px; }
	.overview-box .overview-1 { margin-top:140px; }
	.overview-box .overview-1 .overview-bg { height:460px; }
	.overview-box .overview-1 .list dl { margin-top:100px; }
	.overview-box .overview-1 .list dt { width:500px; font-size:34px; }
	.overview-box .overview-1 .list dd { width:calc(100% - 500px); font-size:20px; }
	.overview-box .overview-1 .list dd br { display:none }
	.overview-box .overview-1 .list dd span.m_br { display:block }
	.overview-box .overview-1 .txt_b { margin-top:160px; padding:35px 10px; font-size:22px; }
}
@media screen and (max-width:1280px){
	.overview-box .top .listbox h4 { font-size:28px; }
	.overview-box .top .listbox ul { gap:15px; margin-top:20px; }
	.overview-box .top .listbox li { padding:30px; height:240px; width:calc((100% - 45px) / 4); }
	.overview-box .top .listbox li dt { font-size:16px; }
	.overview-box .top .listbox li dd { font-size:20px; }
	.overview-box .top .listbox li dd span { font-size:16px; }
	.overview-box .overview-bottom { margin-top:100px; padding:100px 0; }
	.overview-box .overview-bottom .list li:not(:last-child) { margin-bottom:80px; }
	.overview-box .overview-bottom .list li dt .num { font-size:15px; width:40px; height:40px; }
	.overview-box .overview-bottom .list li dt strong { margin-left:15px; font-size:22px; }
	.overview-box .overview-bottom .list li dd { margin-top:20px; }
	.overview-box .overview-bottom .list li dd p { font-size:19px; }
	.overview-box .overview-bottom .txt_b { margin-top:80px; padding:30px 10px; font-size:20px; }
	.overview-box .overview-1 { margin-top:100px; }
	.overview-box .overview-1 .overview-bg { height:380px; }
	.overview-box .overview-1 .list dl { margin-top:70px; }
	.overview-box .overview-1 .list dt { width:380px; font-size:26px; }
	.overview-box .overview-1 .list dd { width:calc(100% - 380px); font-size:19px; }
	.overview-box .overview-1 .txt_b { margin-top:120px; padding:30px 10px; font-size:21px; }
}
@media screen and (max-width:1024px){
	.overview-box .top .listbox h4 { font-size:22px; }
	.overview-box .top .listbox ul { gap:10px; margin-top:20px; }
	.overview-box .top .listbox li { padding:20px; height:200px; width:calc((100% - 30px) / 4); border-radius:10px; border-width:1px; }
	.overview-box .top .listbox li .icon img { height:50px; }
	.overview-box .top .listbox li dt { font-size:16px; }
	.overview-box .top .listbox li dd { margin-top:3px; font-size:18px; }
	.overview-box .top .listbox li dd span { font-size:15px; }
	.overview-box .overview-bottom { margin-top:80px; padding:80px 0; }
	.overview-box .overview-bottom .list li:not(:last-child) { margin-bottom:60px; }
	.overview-box .overview-bottom .list li dt .num { font-size:14px; width:36px; height:36px; border-radius:5px; border-width:1px; }
	.overview-box .overview-bottom .list li dt strong { margin-left:12px; font-size:20px; }
	.overview-box .overview-bottom .list li dd { margin-top:18px; }
	.overview-box .overview-bottom .list li dd p { font-size:17px; }
	.overview-box .overview-bottom .txt_b { margin-top:60px; padding:25px 10px; font-size:18px; border-radius:8px; border-width:1px; }
	.overview-box .overview-1 { margin-top:80px; }
	.overview-box .overview-1 .overview-bg { height:300px; }
	.overview-box .overview-1 .list dl { margin-top:50px; }
	.overview-box .overview-1 .list dt { width:260px; font-size:22px; }
	.overview-box .overview-1 .list dd { width:calc(100% - 260px); font-size:18px; }
	.overview-box .overview-1 .txt_b { margin-top:80px; padding:25px 10px; font-size:20px; border-radius:10px; border-width:1px; }
}
@media screen and (max-width:960px){
	.overview-box .overview-1 .list dt,
	.overview-box .overview-1 .list dd { width:100%; }
	.overview-box .overview-1 .list dt br { display:none }
	.overview-box .overview-1 .list dd { margin-top:20px; }
}
@media screen and (max-width:860px){
	.overview-box .top .listbox li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.overview-box .top .listbox h4 { font-size:20px; }
	.overview-box .top .listbox ul { margin-top:15px; }
	.overview-box .top .listbox li { height:180px; }
	.overview-box .top .listbox li .icon img { height:45px; }
	.overview-box .top .listbox li dt { font-size:16px; }
	.overview-box .top .listbox li dd { margin-top:3px; font-size:16px; }
	.overview-box .top .listbox li dd span { font-size:14px; }
	.overview-box .overview-bottom { margin-top:60px; padding:60px 0; }
	.overview-box .overview-bottom .list li:not(:last-child) { margin-bottom:40px; }
	.overview-box .overview-bottom .list li dt .num { font-size:13px; width:30px; height:30px; }
	.overview-box .overview-bottom .list li dt strong { margin-left:10px; font-size:18px; }
	.overview-box .overview-bottom .list li dd { margin-top:14px; }
	.overview-box .overview-bottom .list li dd p { font-size:15px; }
	.overview-box .overview-bottom .txt_b { margin-top:40px; padding:20px 5px; font-size:16px; }
	.overview-box .overview-1 { margin-top:60px; }
	.overview-box .overview-1 .overview-bg { height:240px; }
	.overview-box .overview-1 .list dl { margin-top:30px; }
	.overview-box .overview-1 .list dt { font-size:20px; }
	.overview-box .overview-1 .list dd { font-size:16px; }
	.overview-box .overview-1 .txt_b { margin-top:60px; padding:20px 10px; font-size:18px; }
}

/* animation */
.overview-box .top .listbox h4 { overflow:hidden }
.overview-box .top .listbox h4 span { display:block; opacity:0; }
.overview-box .top .listbox.subOn h4 span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.overview-box .top .listbox li { opacity:0; }
.overview-box .top .listbox.subOn li:nth-child(1) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.overview-box .top .listbox.subOn li:nth-child(2) { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.overview-box .top .listbox.subOn li:nth-child(3) { animation:ani_4 0.8s 1.1s; animation-fill-mode:both; }
.overview-box .top .listbox.subOn li:nth-child(4) { animation:ani_4 0.8s 1.4s; animation-fill-mode:both; }
.overview-box .overview-bottom .list li { opacity:0; }
.overview-box .overview-bottom.subOn .list li:nth-child(1) { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.overview-box .overview-bottom.subOn .list li:nth-child(2) { animation:ani_2 0.8s 0.6s; animation-fill-mode:both; }
.overview-box .overview-bottom.subOn .list li:nth-child(3) { animation:ani_2 0.8s 0.9s; animation-fill-mode:both; }
.overview-box .overview-bottom.subOn .list li:nth-child(4) { animation:ani_2 0.8s 1.2s; animation-fill-mode:both; }
.overview-box .overview-bottom .txt_b { opacity:0; }
.overview-box .overview-bottom.subOn .txt_b { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }
.overview-box .overview-1 .overview-bg:after { content:""; display:block; width:100%; height:100%; background:rgba(255,255,255,0.3); position:absolute; left:0; top:0; }
.overview-box .overview-1 .overview-bg.subOn:after { animation:ani_w 1.0s 0.5s forwards, ani_w100r 1.0s 1.5s forwards; }
.overview-box .overview-1 .list dt,
.overview-box .overview-1 .list dd { opacity:0; }
.overview-box .overview-1 .subOn .list dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.overview-box .overview-1 .subOn .list dd { animation:ani_2 0.8s 0.6s; animation-fill-mode:both; }
.overview-box .overview-1 .txt_b { opacity:0; }
.overview-box .overview-1 .subOn .txt_b { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }


.ci-box .listbox > dl:not(:last-child) { margin-bottom:180px; }
.ci-box .listbox > dl { display:flex; flex-wrap:wrap; }
.ci-box .listbox > dl > dt { width:520px; }
.ci-box .listbox > dl > dt h4 { color:#111; font-size:32px; font-weight:700; line-height:1.3; }
.ci-box .listbox > dl > dd { width:calc(100% - 520px); }
.ci-box .listbox .txt_b { margin-top:20px; color:#333; font-size:19px; font-weight:300; line-height:1.3; }
.ci-box .listbox .ci-1 .txt-1 { color:#111; font-size:28px; font-weight:600; line-height:1.3; }
.ci-box .listbox .ci-1 .txt-2 { margin-top:40px; color:#333; font-size:19px; font-weight:300; line-height:1.7; }
.ci-box .listbox .ci-1 .imgbox { margin-top:80px; border-radius:10px; background:#f4f5f9; height:320px; display:flex; align-items:center; justify-content:center; }
.ci-box .listbox .ci-1 .download { margin-top:40px; display:flex; justify-content:flex-end; }
.ci-box .listbox .ci-1 .download ul { display:flex; }
.ci-box .listbox .ci-1 .download li:not(:last-child) { margin-right:20px; }
.ci-box .listbox .ci-1 .download li a { position:relative; padding:0 10px 10px; width:200px; display:block; color:#111; font-size:17px; font-weight:500; line-height:1.3; }
.ci-box .listbox .ci-1 .download li a:before { content:''; display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#000; }
.ci-box .listbox .ci-1 .download li a:after { content:''; display:block; position:absolute; right:10px; top:2px; width:18px; height:18px; background:url(/img/sub/icon_down.svg) center center no-repeat }
.ci-box .listbox .ci-2:not(:last-child) { margin-bottom:120px; }
.ci-box .listbox .ci-2 h4 { color:#222; font-size:21px; font-weight:600; line-height:1.3; margin-bottom:20px; }
.ci-box .listbox .ci-4 .txt_b { margin-top:30px; }
.ci-box .listbox .ci-5 li { height:150px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.ci-box .listbox .ci-5 li.m1 { border:2px solid #e5e5e5; }
.ci-box .listbox .ci-5 li.m2 { background:#b3b3b3; }
.ci-box .listbox .ci-5 li.m3 { background:#6c6d70; }
.ci-box .listbox .ci-5 .bar-box { margin-top:20px; }
.ci-box .listbox .ci-5 .bar-box .txtbox { position:relative; min-height:18px; }
.ci-box .listbox .ci-5 .bar-box .txtbox .txt { position:absolute; top:0; color:#888; font-size:14px; font-weight:700; line-height:1.3; }
.ci-box .listbox .ci-5 .bar-box .txtbox .p1 { left:0; }
.ci-box .listbox .ci-5 .bar-box .txtbox .p2 { left:50%; transform:translateX(-50%); }
.ci-box .listbox .ci-5 .bar-box .txtbox .p3 { left:75%; transform:translateX(-50%); }
.ci-box .listbox .ci-5 .bar-box .txtbox .p4 { right:0; }
.ci-box .listbox .ci-5 .bar-box .bar-line { margin-top:15px; position:relative; }
.ci-box .listbox .ci-5 .bar-box .bar-line .line { position:relative; width:100%; height:2px; background:linear-gradient(90deg, #E5E5E5 0%, #7F7F7F 100%);}
.ci-box .listbox .ci-5 .bar-box .bar-line .circle { position:absolute; top:50%; transform:translateY(-50%); width:12px; height:12px; border-radius:12px; border:2px solid #e5e5e5; }
.ci-box .listbox .ci-5 .bar-box .bar-line .c1 { left:0; background:#fff; }
.ci-box .listbox .ci-5 .bar-box .bar-line .c2 { left:50%; transform:translate(-50%, -50%); background:#b3b3b3; }
.ci-box .listbox .ci-5 .bar-box .bar-line .c3 { right:0; background:#000; }
.ci-box .listbox .ci-5 .bar-box .tit { margin-top:15px; text-align:center; color:#222; font-size:14px; font-weight:700; line-height:1.3; }
.ci-box .listbox .box ul { display:flex; flex-wrap:wrap; gap:20px; }
.ci-box .listbox .box.type-2 li { width:calc((100% - 20px) / 2); }
.ci-box .listbox .box.type-3 li { width:calc((100% - 40px) / 3); }
.ci-box .listbox .box .logo { height:200px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:2px solid #e5e5e5; }
.ci-box .listbox .box .logo-1 { padding-bottom:10px; }
.ci-box .listbox .box .sbox { position:relative; height:400px; border-radius:10px; background:#f4f5f9; padding:60px 40px 120px; }
.ci-box .listbox .box .sbox dt { color:var(--mainColor); font-size:21px; font-weight:700; line-height:1.3; }
.ci-box .listbox .box .sbox dd { margin-top:20px; color:#333; font-size:18px; font-weight:300; line-height:1.6; }
.ci-box .listbox .box .sbox .icon { position:absolute; left:40px; bottom:60px; }
.ci-box .listbox .color-box > ul { display:flex; flex-wrap:wrap; gap:80px 20px; }
.ci-box .listbox .color-box > ul > li { width:calc((100% - 20px) / 2); }
.ci-box .listbox .color-box > ul > li .box { padding:40px; border-radius:10px; }
.ci-box .listbox .color-box > ul > li .c-box1 { background:#00358e; }
.ci-box .listbox .color-box > ul > li .c-box2 { background:#0957c3; }
.ci-box .listbox .color-box > ul > li .c-box3 { background:#101820; }
.ci-box .listbox .color-box > ul > li .c-box4 { background:#888b8d; }
.ci-box .listbox .color-box > ul > li dt { font-family:var(--mainFont); color:#fff; font-size:23px; font-weight:500; line-height:1.3; }
.ci-box .listbox .color-box > ul > li dd ul { display:flex; flex-wrap:wrap; gap:20px 0; margin-top:20px; }
.ci-box .listbox .color-box > ul > li dd ul li strong,
.ci-box .listbox .color-box > ul > li dd ul li span { font-family:var(--mainFont); font-weight:300; }
.ci-box .listbox .color-box > ul > li dd ul li strong { font-weight:500; display:block; margin-bottom:5px; }
.ci-box .listbox .color-box > ul > li dd ul li { width:50%; font-family:var(--mainFont); color:#fff; font-size:16px; font-weight:300; line-height:1.3; }
@media screen and (max-width:1560px){
	.ci-box .listbox > dl:not(:last-child) { margin-bottom:140px; }
	.ci-box .listbox > dl > dt { width:360px; }
	.ci-box .listbox > dl > dt h4 { font-size:26px; }
	.ci-box .listbox > dl > dd { width:calc(100% - 360px); }
	.ci-box .listbox .txt_b { margin-top:15px; font-size:18px; }
	.ci-box .listbox .ci-1 .txt-1 { font-size:24px; }
	.ci-box .listbox .ci-1 .txt-2 { margin-top:30px; font-size:18px; }
	.ci-box .listbox .ci-1 .imgbox { margin-top:60px; height:300px; }
	.ci-box .listbox .ci-1 .download { margin-top:30px; }
	.ci-box .listbox .ci-1 .download li:not(:last-child) { margin-right:16px; }
	.ci-box .listbox .ci-1 .download li a { font-size:17px; }
	.ci-box .listbox .ci-2:not(:last-child) { margin-bottom:100px; }
	.ci-box .listbox .ci-2 h4 { font-size:20px; margin-bottom:18px; }
	.ci-box .listbox .ci-4 .txt_b { margin-top:25px; }
	.ci-box .listbox .ci-5 li { height:140px; }
	.ci-box .listbox .box .logo { height:180px; }
	.ci-box .listbox .box .logo-1 { padding-bottom:8px; }
	.ci-box .listbox .box .sbox { height:380px; padding:50px 35px 100px; }
	.ci-box .listbox .box .sbox dt { font-size:20px; }
	.ci-box .listbox .box .sbox dd { margin-top:20px; font-size:17px; }
	.ci-box .listbox .box .sbox .icon { left:35px; bottom:50px; }
	.ci-box .listbox .color-box > ul { gap:60px 20px; }
	.ci-box .listbox .color-box > ul > li .box { padding:35px; }
	.ci-box .listbox .color-box > ul > li dt { font-size:22px; }
	.ci-box .listbox .color-box > ul > li dd ul { margin-top:20px; }
	.ci-box .listbox .color-box > ul > li dd ul li { font-size:16px; }
}
@media screen and (max-width:1280px){
	.ci-box .listbox > dl:not(:last-child) { margin-bottom:100px; }
	.ci-box .listbox > dl > dt { width:240px; }
	.ci-box .listbox > dl > dt h4 { font-size:22px; }
	.ci-box .listbox > dl > dd { width:calc(100% - 240px); }
	.ci-box .listbox .txt_b { margin-top:10px; font-size:17px; }
	.ci-box .listbox .txt_b br { display:none }
	.ci-box .listbox .ci-1 .txt-1 { font-size:20px; }
	.ci-box .listbox .ci-1 .txt-2 { margin-top:20px; font-size:17px; }
	.ci-box .listbox .ci-1 .imgbox { margin-top:40px; height:280px; }
	.ci-box .listbox .ci-1 .download { margin-top:20px; }
	.ci-box .listbox .ci-1 .download li:not(:last-child) { margin-right:14px; }
	.ci-box .listbox .ci-1 .download li a { width:180px; font-size:17px; padding-bottom:8px; }
	.ci-box .listbox .ci-2:not(:last-child) { margin-bottom:80px; }
	.ci-box .listbox .ci-2 h4 { font-size:19px; margin-bottom:15px; }
	.ci-box .listbox .ci-4 .txt_b { margin-top:20px; }
	.ci-box .listbox .ci-5 li { height:120px; }
	.ci-box .listbox .box .logo { height:160px; }
	.ci-box .listbox .box .logo-1 { padding-bottom:6px; }
	.ci-box .listbox .box .sbox { height:330px; padding:40px 25px 80px; }
	.ci-box .listbox .box .sbox dt { font-size:19px; }
	.ci-box .listbox .box .sbox dd { margin-top:15px; font-size:16px; }
	.ci-box .listbox .box .sbox .icon { left:25px; bottom:40px; }
	.ci-box .listbox .color-box > ul { gap:50px 20px; }
	.ci-box .listbox .color-box > ul > li .box { padding:25px; }
	.ci-box .listbox .color-box > ul > li dt { font-size:21px; }
	.ci-box .listbox .color-box > ul > li dd ul { margin-top:15px; }
	.ci-box .listbox .color-box > ul > li dd ul li { font-size:15px; }
}
@media screen and (max-width:1024px){
	.ci-box .listbox > dl:not(:last-child) { margin-bottom:80px; }
	.ci-box .listbox > dl > dt { width:100%; }
	.ci-box .listbox > dl > dt h4 { font-size:20px; }
	.ci-box .listbox > dl > dd { width:100%; margin-top:20px; }
	.ci-box .listbox .txt_b { margin-top:8px; font-size:16px; }
	.ci-box .listbox .ci-1 .txt-1 { font-size:18px; }
	.ci-box .listbox .ci-1 .txt-2 { margin-top:15px; font-size:16px; }
	.ci-box .listbox .ci-1 .imgbox { margin-top:30px; height:240px; border-radius:5px; }
	.ci-box .listbox .ci-1 .download { margin-top:15px; }
	.ci-box .listbox .ci-1 .download li:not(:last-child) { margin-right:10px; }
	.ci-box .listbox .ci-1 .download li a { width:160px; font-size:16px; padding:0 8px 8px; }
	.ci-box .listbox .ci-1 .download li a:after { right:8px; top:2px; width:15px; height:15px; background-size:15px auto }
	.ci-box .listbox .ci-2:not(:last-child) { margin-bottom:60px; }
	.ci-box .listbox .ci-2 h4 { font-size:18px; margin-bottom:12px; }
	.ci-box .listbox .ci-4 .txt_b { margin-top:12px; }
	.ci-box .listbox .ci-5 li { height:100px; border-radius:5px; }
	.ci-box .listbox .ci-5 li.m1 { border-width:1px; }
	.ci-box .listbox .box ul { gap:10px; }
	.ci-box .listbox .box.type-2 li { width:calc((100% - 10px) / 2); }
	.ci-box .listbox .box.type-3 li { width:calc((100% - 20px) / 3); }
	.ci-box .listbox .box .logo { height:160px; padding:0 20px; border-radius:5px; border-width:1px; }
	.ci-box .listbox .box .logo img { max-width:100%; }
	.ci-box .listbox .box .logo-1 { height:180px; padding-bottom:4px; }
	.ci-box .listbox .box .sbox { height:330px; padding:30px 20px 80px; border-radius:5px; }
	.ci-box .listbox .box .sbox dt { font-size:18px; }
	.ci-box .listbox .box .sbox dd { margin-top:12px; font-size:15px; }
	.ci-box .listbox .box .sbox .icon { left:30px; bottom:30px; }
	.ci-box .listbox .color-box > ul { gap:40px 10px; }
	.ci-box .listbox .color-box > ul > li { width:calc((100% - 10px) / 2) }
	.ci-box .listbox .color-box > ul > li .box { padding:20px; border-radius:5px; }
	.ci-box .listbox .color-box > ul > li dt { font-size:19px; }
	.ci-box .listbox .color-box > ul > li dd ul { margin-top:12px; gap:10px 0 }
	.ci-box .listbox .color-box > ul > li dd ul li { font-size:14px; }
}
@media screen and (max-width:640px){
	.ci-box .listbox > dl:not(:last-child) { margin-bottom:60px; }
	.ci-box .listbox > dl > dd { margin-top:16px; }
	.ci-box .listbox .txt_b { font-size:15px; }
	.ci-box .listbox .ci-1 .txt-1 { font-size:17px; }
	.ci-box .listbox .ci-1 .txt-2 { margin-top:12px; font-size:15px; }
	.ci-box .listbox .ci-1 .imgbox { margin-top:20px; height:220px; }
	.ci-box .listbox .ci-2:not(:last-child) { margin-bottom:60px; }
	.ci-box .listbox .ci-2 h4 { font-size:16px; margin-bottom:10px; }
	.ci-box .listbox .ci-4 .txt_b { margin-top:10px; }
	.ci-box .listbox .ci-3 .box.type-3 li { width:100%; }
	.ci-box .listbox .box .sbox { height:auto; padding:20px 20px 80px; }
	.ci-box .listbox .box .sbox dt { font-size:17px; }
	.ci-box .listbox .box .sbox dd { margin-top:12px; font-size:15px; }
	.ci-box .listbox .box .sbox .icon { left:20px; bottom:20px; }
	.ci-box .listbox .color-box > ul { gap:40px 10px; }
	.ci-box .listbox .color-box > ul > li { width:calc((100% - 10px) / 2) }
	.ci-box .listbox .color-box > ul > li .box { padding:20px; }
	.ci-box .listbox .color-box > ul > li dt { font-size:17px; }
	.ci-box .listbox .color-box > ul > li dd ul { margin-top:10px; }
	.ci-box .listbox .color-box > ul > li dd ul li { font-size:13px; }
	.ci-box .listbox .container { display:flex; gap:0 50px; }
	.ci-box .listbox .container .box { width:60%; }
	.ci-box .listbox .container .box.type-3 li { width:100%; }
	.ci-box .listbox .ci-5 .bar-box { position:relative; margin:0; }
	.ci-box .listbox .ci-5 .bar-box .bar-line { width:2px; margin:0 0 0 20px; }
	.ci-box .listbox .ci-5 .bar-box .bar-line .line { width:2px; height:320px; background:linear-gradient(180deg, #E5E5E5 0%, #7F7F7F 100%);}
	.ci-box .listbox .ci-5 .bar-box .bar-line .circle { top:unset; left:50%; transform:translate(-50%, 0); }
	.ci-box .listbox .ci-5 .bar-box .bar-line .c1 { top:0; }
	.ci-box .listbox .ci-5 .bar-box .bar-line .c2 { top:50%; left:50%; transform:translate(-50%, -50%); }
	.ci-box .listbox .ci-5 .bar-box .bar-line .c3 { bottom:0; right:unset; }
	.ci-box .listbox .ci-5 .bar-box .tit { margin:0; text-align:left; position:absolute; left:35px; top:50%; transform:translate(0, -50%); }
	.ci-box .listbox .ci-5 .bar-box .txtbox { position:absolute; top:0; height:100%; left:0; text-align:right;  }
	.ci-box .listbox .ci-5 .bar-box .txtbox .txt { top:unset; right:0; }
	.ci-box .listbox .ci-5 .bar-box .txtbox .p1 { left:unset; top:0; }
	.ci-box .listbox .ci-5 .bar-box .txtbox .p2 { left:unset; top:50%; transform:translate(0, -50%); }
	.ci-box .listbox .ci-5 .bar-box .txtbox .p3 { left:unset; top:75%; transform:translate(0, -50%); }
	.ci-box .listbox .ci-5 .bar-box .txtbox .p4 { right:0; bottom:0; }
}
@media screen and (max-width:560px){
	.ci-box .listbox .box.type-2 li,
	.ci-box .listbox .color-box > ul > li { width:100%; }
}


/* animation */
.ci-box .listbox > dl > dt { opacity:0; }
.ci-box .listbox > dl > dd { opacity:0; }
.ci-box .listbox > dl.subOn > dt { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.ci-box .listbox > dl.subOn > dd { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }

.company-box .history-box .imgbox { position:relative; }
.company-box .history-box .imgbox:before { content:''; display:block; padding-bottom:25.7%; }
.company-box .history-box .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.company-box .history-box .imgbox > div { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; }
.company-box .history-box .imgbox > div > div { text-align:left; width:100%; font-family:var(--mainFont); color:#fff; font-size:96px; font-weight:500; line-height:1.3; letter-spacing:-0.08em; }
.company-box .history-box .listbox { position:relative; margin:120px 0; padding:0 4px; }
.company-box .history-box .listbox:before { content:''; display:block; position:absolute; left:17px; top:0; width:4px; height:100%; background:#eee; }
.company-box .history-box .listbox > ul { padding:0 0 0 120px; margin-top:-66px; }
.company-box .history-box .listbox > ul > li:not(:last-child) { margin-bottom:150px; } 
.company-box .history-box .listbox > ul > li > dl > dt { font-family:var(--mainFont); color:#111; font-size:78px; font-weight:500; line-height:1.3; letter-spacing:-0.08em; }
.company-box .history-box .listbox > ul > li > dl > dd { margin-top:60px; }
.company-box .history-box .listbox > ul > li > dl > dd li:not(:last-child) { margin-bottom:35px; } 
.company-box .history-box .listbox > ul > li > dl > dd li dl { display:flex; }
.company-box .history-box .listbox > ul > li > dl > dd li dt { width:80px; font-family:var(--mainFont); color:#ccc; font-size:22px; font-weight:700; line-height:1.6; }
.company-box .history-box .listbox > ul > li > dl > dd li dd { width:calc(100% - 80px);  }
.company-box .history-box .listbox > ul > li > dl > dd li dd p { color:#555; font-size:22px; font-weight:300; line-height:1.6; }
.company-box .history-box .listbox > ul > li > dl > dd li dd p span { font-weight:300; }
.company-box .history-box .listbox > ul > li > dl > dd li dd p:not(:last-child) { margin-bottom:15px; } 
.company-box .history-box .listbox .arr { position:sticky; left:0; top:170px; width:30px; height:126px; display:flex; justify-content:center; }
.company-box .history-box .listbox .arr span { position:relative; width:4px; height:calc(100% - 15px); background:var(--mainColor); }
.company-box .history-box .listbox .arr span:before { content:''; display:block; position:absolute; left:-13px; bottom:-13px; width:30px; height:30px; border-radius:30px; background:var(--mainColor); opacity:0.1; }
.company-box .history-box .listbox .arr span:after { content:''; display:block; position:absolute; left:-3px; bottom:-3px; width:10px; height:10px; border-radius:30px; background:var(--mainColor); }
@media screen and (max-width:1560px){
	.company-box .history-box .imgbox:before { padding-bottom:27%; }
	.company-box .history-box .imgbox > div > div { font-size:76px; }
	.company-box .history-box .listbox { margin:100px 0; }
	.company-box .history-box .listbox > ul { padding:0 0 0 100px; margin-top:-50px; }
	.company-box .history-box .listbox > ul > li:not(:last-child) { margin-bottom:130px; } 
	.company-box .history-box .listbox > ul > li > dl > dt { font-size:66px; }
	.company-box .history-box .listbox > ul > li > dl > dd { margin-top:50px; }
	.company-box .history-box .listbox > ul > li > dl > dd li:not(:last-child) { margin-bottom:30px; } 
	.company-box .history-box .listbox > ul > li > dl > dd li dt { width:60px; font-size:20px; }
	.company-box .history-box .listbox > ul > li > dl > dd li dd { width:calc(100% - 60px);  }
	.company-box .history-box .listbox > ul > li > dl > dd li dd p { font-size:20px; }
	.company-box .history-box .listbox > ul > li > dl > dd li dd p:not(:last-child) { margin-bottom:15px; } 
}
@media screen and (max-width:1280px){
	.company-box .history-box .imgbox > div > div { font-size:54px; }
	.company-box .history-box .listbox { margin:80px 0; }
	.company-box .history-box .listbox > ul { padding:0 0 0 80px; margin-top:-48px; }
	.company-box .history-box .listbox > ul > li:not(:last-child) { margin-bottom:110px; } 
	.company-box .history-box .listbox > ul > li > dl > dt { font-size:42px; }
	.company-box .history-box .listbox > ul > li > dl > dd { margin-top:40px; }
	.company-box .history-box .listbox > ul > li > dl > dd li:not(:last-child) { margin-bottom:25px; } 
	.company-box .history-box .listbox > ul > li > dl > dd li dt { width:50px; font-size:19px; }
	.company-box .history-box .listbox > ul > li > dl > dd li dd { width:calc(100% - 50px);  }
	.company-box .history-box .listbox > ul > li > dl > dd li dd p { font-size:19px; }
	.company-box .history-box .listbox > ul > li > dl > dd li dd p:not(:last-child) { margin-bottom:10px; }
	.company-box .history-box .listbox .arr { top:150px; }
}
@media screen and (max-width:1024px){
	.company-box .history-box .imgbox:before { padding-bottom:30%; }
	.company-box .history-box .imgbox > div > div { font-size:44px; }
	.company-box .history-box .listbox { margin:60px 0; }
	.company-box .history-box .listbox:before { left:15px; width:3px; }
	.company-box .history-box .listbox > ul { padding:0 0 0 60px; margin-top:-38px; }
	.company-box .history-box .listbox > ul > li:not(:last-child) { margin-bottom:90px; } 
	.company-box .history-box .listbox > ul > li > dl > dt { font-size:30px; }
	.company-box .history-box .listbox > ul > li > dl > dd { margin-top:30px; }
	.company-box .history-box .listbox > ul > li > dl > dd li:not(:last-child) { margin-bottom:20px; } 
	.company-box .history-box .listbox > ul > li > dl > dd li dt { width:40px; font-size:18px; }
	.company-box .history-box .listbox > ul > li > dl > dd li dd { width:calc(100% - 40px);  }
	.company-box .history-box .listbox > ul > li > dl > dd li dd p { font-size:18px; }
	.company-box .history-box .listbox > ul > li > dl > dd li dd p:not(:last-child) { margin-bottom:8px; } 
	.company-box .history-box .listbox .arr { width:24px; height:115px; top:140px; }
	.company-box .history-box .listbox .arr span { width:3px; height:calc(100% - 15px); }
	.company-box .history-box .listbox .arr span:before { left:-11px; bottom:-11px; width:24px; height:24px; }
	.company-box .history-box .listbox .arr span:after { left:-2px; bottom:-2px; width:7px; height:7px; }
}
@media screen and (max-width:760px){
	.company-box .history-box .listbox .arr { top:130px; }
}
@media screen and (max-width:640px){
	.company-box .history-box .imgbox:before { padding-bottom:40%; }
	.company-box .history-box .imgbox > div > div { font-size:32px; }
	.company-box .history-box .listbox { margin:50px 0; }
	.company-box .history-box .listbox > ul { padding:0 0 0 45px; margin-top:-35px; }
	.company-box .history-box .listbox > ul > li:not(:last-child) { margin-bottom:60px; } 
	.company-box .history-box .listbox > ul > li > dl > dt { font-size:26px; }
	.company-box .history-box .listbox > ul > li > dl > dd { margin-top:20px; }
	.company-box .history-box .listbox > ul > li > dl > dd li:not(:last-child) { margin-bottom:15px; } 
	.company-box .history-box .listbox > ul > li > dl > dd li dt,
	.company-box .history-box .listbox > ul > li > dl > dd li dd p { font-size:17px; } 
	.company-box .history-box .listbox .arr { height:100px; top:120px; }
}

/* animation */
.company-box .history-box .imgbox:after { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; right:0; bottom:0; }
.company-box .history-box .imgbox.subOn:after { animation:ani_h100 1.2s 0.1s; animation-fill-mode:both; }
.company-box .history-box .imgbox > div > div { opacity:0; }
.company-box .history-box .imgbox.subOn > div > div { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
.company-box .history-box .listbox > ul > li > dl > dt,
.company-box .history-box .listbox > ul > li > dl > dd { opacity:0; }
.company-box .history-box .listbox > ul > li.subOn > dl > dt { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.company-box .history-box .listbox > ul > li.subOn > dl > dd { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }


.location-box .listbox > ul > li:not(:last-child) { margin-bottom:150px; } 
.location-box .listbox > ul > li .map-box { border-radius:20px; border:2px solid #e0e0e0; }
.location-box .listbox.location-list  > ul > li .map-box { border-width:1px 1px 2px; }
.location-box .listbox > ul > li .map-box > div { width:100%; border-radius:20px; border:none !important; }
.location-box .listbox > ul > li .map-box > div > div,
.location-box .listbox > ul > li .map-box > div > div > div { border:none !important; }
.location-box .listbox > ul > li .map-box .google-map { position:relative; overflow:hidden;  }
.location-box .listbox > ul > li .map-box .google-map:after { content:''; display:block; padding-bottom:500px; }
.location-box .listbox > ul > li .map-box iframe { border-radius:20px; position:absolute; top:0; left:0; top:-140px; width:100%; height:calc(100% + 280px); }
.location-box .listbox > ul > li .info-box { margin-top:40px; }
.location-box .listbox > ul > li .info-box dl { display:flex; flex-wrap:wrap; align-items:center; }
.location-box .listbox > ul > li .info-box dl dt { width:500px; color:#111; font-size:52px; font-weight:600; line-height:1.3; letter-spacing:-0.05em; }
.location-box .listbox > ul > li .info-box dl dd { width:calc(100% - 500px); }
.location-box .listbox > ul > li .info-box dl dd ul { display:flex; }
.location-box .listbox > ul > li .info-box dl dd li:not(:last-child) { margin-right:80px; }
.location-box .listbox > ul > li .info-box dl dd li { display:flex; align-items:center; }
.location-box .listbox > ul > li .info-box dl dd li strong { padding-left:20px; color:#222; font-size:22px; font-weight:500; line-height:1.3; }
.location-box .listbox > ul > li .info-box dl dd li strong a { color:#222; font-weight:500; }
@media screen and (max-width:1560px){
	.location-box .listbox > ul > li .info-box dl dt { width:380px; font-size:42px; }
	.location-box .listbox > ul > li .info-box dl dd { width:calc(100% - 380px); }
	.location-box .listbox > ul > li .info-box dl dd li:not(:last-child) { margin-right:60px; }
	.location-box .listbox > ul > li .info-box dl dd li strong { padding-left:18px; font-size:20px; }
}
@media screen and (max-width:1280px){
	.location-box .listbox > ul > li .map-box > div,
	.location-box .listbox > ul > li .map-box > div > div { height:400px !important; }
	.location-box .listbox > ul > li .map-box .google-map:after { padding-bottom:400px; }
	.location-box .listbox > ul > li:not(:last-child) { margin-bottom:120px; }
	.location-box .listbox > ul > li .info-box { margin-top:30px; }
	.location-box .listbox > ul > li .info-box dl { align-items:flex-start; }
	.location-box .listbox > ul > li .info-box dl dt { width:290px; font-size:34px; }
	.location-box .listbox > ul > li .info-box dl dd { width:calc(100% - 290px); }
	.location-box .listbox > ul > li .info-box dl dd ul { flex-wrap:wrap; padding-top:10px; }
	.location-box .listbox > ul > li .info-box dl dd li:not(:last-child) { margin-right:40px; }
	.location-box .listbox > ul > li .info-box dl dd li.full { width:100%; margin-bottom:15px; }
	.location-box .listbox > ul > li .info-box dl dd li .icon img { height:18px; }
	.location-box .listbox > ul > li .info-box dl dd li strong { padding-left:12px; font-size:18px; }
}
@media screen and (max-width:1024px){
	.location-box .listbox > ul > li .map-box { border-radius:10px; border-width:1px; }
	.location-box .listbox.location-list  > ul > li .map-box { border-width:0 0 1px; }
	.location-box .listbox > ul > li .map-box > div,
	.location-box .listbox > ul > li .map-box > div > div { height:320px !important; }
	.location-box .listbox > ul > li .map-box .google-map:after { padding-bottom:320px; }
	.location-box .listbox > ul > li .map-box > div,
	.location-box .listbox > ul > li .map-box iframe { border-radius:10px; }
	.location-box .listbox > ul > li:not(:last-child) { margin-bottom:90px; }
	.location-box .listbox > ul > li .info-box { margin-top:25px; }
	.location-box .listbox > ul > li .info-box dl dt { width:250px; font-size:28px; }
	.location-box .listbox > ul > li .info-box dl dd { width:calc(100% - 250px); }
	.location-box .listbox > ul > li .info-box dl dd li .icon img { height:16px; }
	.location-box .listbox > ul > li .info-box dl dd li strong { padding-left:10px; font-size:16px; }
}
@media screen and (max-width:640px){
	.location-box .listbox > ul > li .map-box > div,
	.location-box .listbox > ul > li .map-box > div > div { height:280px !important; }
	.location-box .listbox > ul > li .map-box .google-map:after { padding-bottom:280px; }
	.location-box .listbox > ul > li:not(:last-child) { margin-bottom:60px; }
	.location-box .listbox > ul > li .info-box { margin-top:25px; }
	.location-box .listbox > ul > li .info-box dl dt { width:100%; font-size:20px; }
	.location-box .listbox > ul > li .info-box dl dd { width:100%; margin-top:8px; }
	.location-box .listbox > ul > li .info-box dl dd ul { padding-top:8px; }
	.location-box .listbox > ul > li .info-box dl dd li.full { margin-bottom:10px; }
	.location-box .listbox > ul > li .info-box dl dd li .icon img { height:15px; }
	.location-box .listbox > ul > li .info-box dl dd li strong { padding-left:8px; font-size:15px; }
}

/* animation */
.location-box .listbox > ul > li .map-box { opacity:0;  }
.location-box .listbox > ul > li.subOn .map-box { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.location-box .listbox > ul > li .info-box { opacity:0; }
.location-box .listbox > ul > li.subOn .info-box { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }

.company-box .network-box dl:not(:last-child) { margin-bottom:150px; padding-bottom:150px; border-bottom:1px solid #000; }
.company-box .network-box dt { font-family:var(--mainFont); color:#111; font-size:48px; font-weight:400; line-height:1.3; letter-spacing:-0.05em; }
.company-box .network-box dt span { font-family:var(--mainFont); font-weight:400; }
.company-box .network-box dd { margin-top:40px; }
.company-box .network-box dd > ul { display:flex; flex-wrap:wrap; gap:80px 50px; }
.company-box .network-box dd > ul > li { width:calc((100% - 100px) / 3); }
.company-box .network-box dd > ul > li picture { border-radius:15px; display:flex; align-items:center; justify-content:center; height:150px; padding:0 10px; }
.company-box .network-box dd > ul > li picture img { max-width:100%; }
.company-box .network-box dd > ul > li span.stxt { margin-top:20px; display:block; font-family:var(--mainFont); color:#ccc; font-size:20px; font-weight:500; line-height:1.3; }
.company-box .network-box dd > ul > li strong.tit { margin-top:10px; display:block; color:#111; font-size:24px; font-weight:500; line-height:1.3; }
.company-box .network-box dd > ul > li .list { margin-top:30px; padding-top:30px; border-top:1px solid #000; }
.company-box .network-box dd > ul > li .list li:not(:last-child) { margin-bottom:10px; }
.company-box .network-box dd > ul > li .list li { position:relative; color:#333; font-size:20px; font-weight:300; line-height:1.3; padding-left:13px; }
.company-box .network-box dd > ul > li .list li:before { content:""; display:block; width:7px; height:1px; background:#333; position:absolute; left:0; top:12px; }
.company-box .network-box .type-1 dd > ul > li { border:2px solid rgba(0, 75, 208, 0.05); background:#f4f5f9; padding:40px; border-radius:15px; }
.company-box .network-box .type-1 dd > ul > li .top picture { background:#fff; }
.company-box .network-box .type-1 dd > ul > li .top span.stxt { margin-top:30px; }
.company-box .network-box .type-2 dd > ul > li picture { border:2px solid #e5e5e5; }
@media screen and (max-width:1560px){
	.company-box .network-box dd > ul { gap:60px 40px; }
	.company-box .network-box dd > ul > li { width:calc((100% - 80px) / 3); }
}
@media screen and (max-width:1280px){
	.company-box .network-box dl:not(:last-child) { margin-bottom:120px; padding-bottom:120px; }
	.company-box .network-box dt { font-size:36px; }
	.company-box .network-box dd { margin-top:30px; }
	.company-box .network-box dd > ul { gap:50px 30px; }
	.company-box .network-box dd > ul > li { width:calc((100% - 60px) / 3); }
	.company-box .network-box dd > ul > li picture { height:140px; }
	.company-box .network-box dd > ul > li span.stxt { margin-top:15px; }
	.company-box .network-box dd > ul > li strong.tit { margin-top:8px; font-size:22px; }
	.company-box .network-box dd > ul > li .list { margin-top:25px; padding-top:25px; }
	.company-box .network-box dd > ul > li .list li:not(:last-child) { margin-bottom:8px; }
	.company-box .network-box dd > ul > li .list li { font-size:19px; }
	.company-box .network-box .type-2 dd > ul > li span.stxt { margin-top:15px; }
}
@media screen and (max-width:1024px){
	.company-box .network-box dl:not(:last-child) { margin-bottom:100px; padding-bottom:100px; }
	.company-box .network-box dt { font-size:30px; }
	.company-box .network-box dd { margin-top:20px; }
	.company-box .network-box dd > ul { gap:40px 20px; }
	.company-box .network-box dd > ul > li { width:calc((100% - 20px) / 2); }
	.company-box .network-box dd > ul > li picture { border-radius:8px; height:130px; }
	.company-box .network-box dd > ul > li picture img { width:auto; max-height:50% }
	.company-box .network-box dd > ul > li span.stxt { font-size:18px; }
	.company-box .network-box dd > ul > li strong.tit { margin-top:5px; font-size:20px; }
	.company-box .network-box dd > ul > li .list { margin-top:20px; padding-top:20px; }
	.company-box .network-box dd > ul > li .list li:not(:last-child) { margin-bottom:5px; }
	.company-box .network-box dd > ul > li .list li { font-size:17px; padding-left:11px; }
	.company-box .network-box dd > ul > li .list li:before { width:6px; top:11px; }
	.company-box .network-box .type-1 dd > ul > li { border-width:1px; padding:20px; border-radius:8px; }
	.company-box .network-box .type-1 dd > ul > li .top span.stxt { margin-top:20px; }
	.company-box .network-box .type-2 dd > ul > li span.stxt { margin-top:10px; }
	.company-box .network-box .type-2 dd > ul > li picture { border-width:1px; }
}
@media screen and (max-width:640px){
	.company-box .network-box dl:not(:last-child) { margin-bottom:70px; padding-bottom:70px; }
	.company-box .network-box dt { font-size:26px; }
	.company-box .network-box dd { margin-top:12px; }
	.company-box .network-box dd > ul { gap:30px 15px; }
	.company-box .network-box dd > ul > li { width:calc((100% - 15px) / 2); }
	.company-box .network-box dd > ul > li picture { height:100px; padding:0 20px; }
	.company-box .network-box dd > ul > li picture img { max-height:40% }
	.company-box .network-box dd > ul > li span.stxt { font-size:16px; }
	.company-box .network-box dd > ul > li strong.tit {font-size:18px; }
	.company-box .network-box dd > ul > li .list { margin-top:15px; padding-top:15px; }
	.company-box .network-box dd > ul > li .list li { font-size:16px; padding-left:10px; }
	.company-box .network-box dd > ul > li .list li:before { width:5px; top:9px; }
	.company-box .network-box .type-1 dd > ul > li { padding:10px; }
	.company-box .network-box .type-1 dd > ul > li .top span.stxt { margin-top:15px; }
}
@media screen and (max-width:480px){
	.company-box .network-box dd > ul { gap:20px 15px; }
	.company-box .network-box dd > ul > li { width:100%; }
	.company-box .network-box dd > ul > li picture img { max-width:200px }
}

/* animation */
.company-box .network-box dt { overflow:hidden }
.company-box .network-box dt span { opacity:0; display:block; }
.company-box .network-box .subOn dt span { animation:ani_3 0.8s 0.1s; animation-fill-mode:both; }
.company-box .network-box dd { opacity:0; }
.company-box .network-box .subOn dd { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.company-box .certification-box .listbox > ul { display:flex; gap:80px 40px; flex-wrap:wrap; }
.company-box .certification-box .listbox > ul > li { width:calc((100% - 160px) / 5); cursor:pointer; }
.company-box .certification-box .listbox > ul > li .imgbox { position:relative; border:2px solid #e5e5e5; border-radius:20px; }
.company-box .certification-box .listbox > ul > li .imgbox:before { content:""; display:block; padding-bottom:145%; }
.company-box .certification-box .listbox > ul > li .imgbox img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; border-radius:24px;}
.company-box .certification-box .listbox > ul > li .txtbox { padding-top:28px; text-align:center; }
.company-box .certification-box .listbox > ul > li .txtbox span { color:#111; font-weight:500; font-size:21px; line-height:1.5; word-break:break-word; /* overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; */ }
@media screen and (max-width:1560px){
	.company-box .certification-box .listbox > ul { gap:70px 30px; }
	.company-box .certification-box .listbox > ul > li { width:calc((100% - 120px) / 5); }
	.company-box .certification-box .listbox > ul > li .txtbox { padding-top:25px; }
	.company-box .certification-box .listbox > ul > li .txtbox span { font-size:21px; }
}
@media screen and (max-width:1280px){
	.company-box .certification-box .listbox > ul { gap:60px 20px; }
	.company-box .certification-box .listbox > ul > li { width:calc((100% - 80px) / 4); }
	.company-box .certification-box .listbox > ul > li .txtbox { padding-top:22px; }
	.company-box .certification-box .listbox > ul > li .txtbox span { font-size:20px; }
}
@media screen and (max-width:1024px){
	.company-box .certification-box .listbox > ul { gap:50px 20px; }
	.company-box .certification-box .listbox > ul > li .imgbox { border:1px solid #e5e5e5; border-radius:10px; }
	.company-box .certification-box .listbox > ul > li .imgbox img { border-radius:12px; }
	.company-box .certification-box .listbox > ul > li .txtbox { padding-top:20px; }
	.company-box .certification-box .listbox > ul > li .txtbox span { font-size:19px; }
}
@media screen and (max-width:860px){
	.company-box .certification-box .listbox > ul > li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:640px){
	.company-box .certification-box .listbox > ul { gap:30px 10px; }
	.company-box .certification-box .listbox > ul > li { width:calc((100% - 10px) / 2); }
	.company-box .certification-box .listbox > ul > li .txtbox { padding-top:12px; }
	.company-box .certification-box .listbox > ul > li .txtbox span { font-size:17px; }
}

/* animation */
.company-box .certification-box .listbox { opacity:0; }
.company-box .certification-box .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.cer-popupbox { position:fixed; left:0; top:0; width:100%; height:100%; z-index:-11; opacity:0; visibility:hidden; transition:all 0.1s; }
.cer-popupbox.on { opacity:1; visibility:visible; z-index:9999; transition:all 0.3s; }
.cer-popupbox .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); }
.cer-popupbox .pop-body { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:22; padding:14px; background-color:#fff; border:6px solid #e5e5e5; border-radius:20px; }
.cer-popupbox .pop-body .imgbox img { height:100vh; max-height:650px; }
.cer-popupbox .pop-body .btn_close { position:absolute; right:-5px; top:-45px; cursor:pointer; transition:all 0.5s; }
.cer-popupbox .pop-body .btn_close span { position:relative; width:25px; height:25px; display:block }
.cer-popupbox .pop-body .btn_close span:before { content:""; display:block; width:26px; height:2px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-45deg); border-radius:2px; }
.cer-popupbox .pop-body .btn_close span:after { content:""; display:block; width:26px; height:2px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg); border-radius:2px; }
.cer-popupbox .pop-body .btn_close:hover { transform:rotate(-180deg);}
@media screen and (max-width:640px){
	.cer-popupbox .pop-body { transform:translate(-50%, -50%); max-width:100%; padding:6px; border-width:3px; border-radius:10px; }
	.cer-popupbox .pop-body .imgbox img { height:auto; max-height:100%; max-width:100%; }
	.cer-popupbox .pop-body .btn_close { top:-40px; }
	.cer-popupbox .pop-body .btn_close span { width:23px; height:23px; }
	.cer-popupbox .pop-body .btn_close span:before,
	.cer-popupbox .pop-body .btn_close span:after { width:23px; }
}
@media screen and (max-width:500px){
	.cer-popupbox .pop-body { left:20px; transform:translate(0, -50%); width:calc(100% - 40px); }
	.cer-popupbox .pop-body .imgbox img { height:auto; max-height:100%; width:100%; max-width:100%; }
}
@media screen and (max-width:500px) and (max-height:720px) {
	.cer-popupbox .pop-body { left:20px; transform:translate(0, -50%); max-width:calc(100% - 40px); }
	.cer-popupbox .pop-body .imgbox img { height:auto; max-height:100%; width:100%; max-width:100%; }
}
@media screen and (max-height:800px){
	.cer-popupbox .pop-body .imgbox img { height:auto; max-height:100%; max-width:400px; }
}
@media screen and (min-width:500px) and (max-height:720px) {
	.cer-popupbox .pop-body { padding:6px; }
	.cer-popupbox .pop-body .imgbox img { max-width:300px; }
	.cer-popupbox .pop-body .btn_close { top:-40px; }
	.cer-popupbox .pop-body .btn_close span { width:23px; height:23px; }
	.cer-popupbox .pop-body .btn_close span:before,
	.cer-popupbox .pop-body .btn_close span:after { width:23px; }
}


/* esg */
.esg-box .esg-overview { overflow:hidden }
.esg-box .esg-overview h4 { color:#111; font-size:32px; font-weight:700; line-height:1.3; }
.esg-box .esg-overview h4 span { font-weight:700; display:block }
.esg-box .esg-overview .top > dl { display:flex; flex-wrap:wrap; margin-bottom:180px; }
.esg-box .esg-overview .top > dl > dt { width:520px; }
.esg-box .esg-overview .top > dl > dd { width:calc(100% - 520px); }
.esg-box .esg-overview .txt-1 { color:#333; font-size:19px; font-weight:300; line-height:1.7; }
.esg-box .esg-overview .txt-1 strong { color:#111; font-size:28px; font-weight:600; line-height:1.3; display:block; margin-bottom:40px; }
.esg-box .esg-overview .list-1 li:not(:last-child) { margin-bottom:20px; }
.esg-box .esg-overview .list-1 li { display:flex; gap:10px; }
.esg-box .esg-overview .list-1 li strong { font-family:var(--mainFont); color:#fff; font-size:22px; font-weight:700; line-height:1.3; width:250px; height:105px; border-radius:10px; display:flex; justify-content:center; align-items:center; text-align:center; }
.esg-box .esg-overview .list-1 li:nth-child(1) strong { background:var(--mainColor); }
.esg-box .esg-overview .list-1 li:nth-child(2) strong { background:#748191; }
.esg-box .esg-overview .list-1 li:nth-child(3) strong { background:#333; }
.esg-box .esg-overview .list-1 li span { color:#333; font-size:22px; font-weight:500; line-height:1.3; width:calc(100% - 250px); height:105px; border:2px dashed rgba(0, 75, 208, 0.05); background:#f4f5f9; border-radius:10px; display:flex; justify-content:center; align-items:center; text-align:center; }
.esg-box .esg-overview .list-2 { display:flex; }
.esg-box .esg-overview .list-2 li { position:relative; height:95px; width:calc(33.333% + 60px); margin-left:-60px; border-radius:100px; color:#fff; font-size:20px; font-weight:700; line-height:1.3; border:6px solid #fff; background:#888; display:flex; justify-content:center; align-items:center; text-align:center; }
.esg-box .esg-overview .list-2 li:before { content:""; display:block; width:12px; height:12px; z-index:5; position:absolute; top:50%; left:18px; transform:translate(0, -50%); background:url(/img/sub/icon_plus.png) center center no-repeat; }
.esg-box .esg-overview .list-2 li:after { content:""; display:block; width:12px; height:12px; z-index:5; position:absolute; top:50%; right:18px; transform:translate(0, -50%); background:url(/img/sub/icon_plus.png) center center no-repeat; }
.esg-box .esg-overview .list-2 li:first-child:before,
.esg-box .esg-overview .list-2 li:first-child:after,
.esg-box .esg-overview .list-2 li:nth-child(3):before,
.esg-box .esg-overview .list-2 li:nth-child(3):after { display:none; }
.esg-box .esg-overview .list-2 li:first-child { margin:0; }
.esg-box .esg-overview .list-2 li:nth-child(2) { background:rgba(51, 51, 51, 0.80); z-index:1; }
.esg-box .esg-overview .list-2 li br { display:none; }
.esg-box .esg-overview .iaan-box { padding:180px 0; background:url(/img/sub/esg_iaan.jpg) no-repeat center / cover; }
.esg-box .esg-overview .iaan-box h4 { color:#fff }
.esg-box .esg-overview .iaan-box .listbox ul { margin-top:40px; display:flex; flex-wrap:wrap; gap:20px; }
.esg-box .esg-overview .iaan-box .listbox li { width:calc((100% - 60px) / 4); padding:40px; border-radius:20px; border:2px solid rgba(255, 255, 255, 0.10); background:rgba(0, 0, 0, 0.10); backdrop-filter:blur(10px); }
.esg-box .esg-overview .iaan-box .listbox li dt { font-family:var(--mainFont); color:#fff; font-size:22px; font-weight:700; line-height:1.3; background:var(--mainColor); height:55px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.esg-box .esg-overview .iaan-box .listbox li:nth-child(2) dt { background:#748191; }
.esg-box .esg-overview .iaan-box .listbox li:nth-child(3) dt { background:#333; }
.esg-box .esg-overview .iaan-box .listbox li:nth-child(4) dt { background:#aaa; }
.esg-box .esg-overview .iaan-box .listbox li dd { margin-top:30px; text-align:center; padding-bottom:10px; }
.esg-box .esg-overview .iaan-box .listbox li dd p { color:#fff; font-size:19px; font-weight:400; line-height:1.7; }
.esg-box .esg-overview .iaan-box .listbox li dd p:not(:last-child) { margin-bottom:40px; }
@media screen and (max-width:1560px){
	.esg-box .esg-overview h4 { font-size:28px; }
	.esg-box .esg-overview .top > dl { margin-bottom:140px; }
	.esg-box .esg-overview .top > dl > dt { width:400px; }
	.esg-box .esg-overview .top > dl > dd { width:calc(100% - 400px); }
	.esg-box .esg-overview .txt-1 { font-size:18px; }
	.esg-box .esg-overview .txt-1 strong { font-size:25px; margin-bottom:30px; }
	.esg-box .esg-overview .list-1 li:not(:last-child) { margin-bottom:15px; }
	.esg-box .esg-overview .list-1 li { gap:10px; }
	.esg-box .esg-overview .list-1 li strong { font-size:21px; width:240px; height:100px; }
	.esg-box .esg-overview .list-1 li span { font-size:21px; width:calc(100% - 240px); height:100px; }
	.esg-box .esg-overview .list-2 li { height:95px; font-size:19px; }
	.esg-box .esg-overview .iaan-box { padding:140px 0; }
	.esg-box .esg-overview .iaan-box .listbox ul { margin-top:35px; gap:15px; }
	.esg-box .esg-overview .iaan-box .listbox li { width:calc((100% - 45px) / 4); padding:30px; }
	.esg-box .esg-overview .iaan-box .listbox li dt { font-size:21px; height:55px; }
	.esg-box .esg-overview .iaan-box .listbox li dd { margin-top:25px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p { font-size:18px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p:not(:last-child) { margin-bottom:35px; }
}
@media screen and (max-width:1280px){
	.esg-box .esg-overview h4 { font-size:23px; }
	.esg-box .esg-overview .top > dl { margin-bottom:100px; }
	.esg-box .esg-overview .top > dl > dt { width:270px; }
	.esg-box .esg-overview .top > dl > dd { width:calc(100% - 270px); }
	.esg-box .esg-overview .txt-1 { font-size:17px; }
	.esg-box .esg-overview .txt-1 strong { font-size:22px; margin-bottom:25px; }
	.esg-box .esg-overview .list-1 li:not(:last-child) { margin-bottom:12px; }
	.esg-box .esg-overview .list-1 li { gap:10px; }
	.esg-box .esg-overview .list-1 li strong { font-size:20px; width:200px; height:90px; }
	.esg-box .esg-overview .list-1 li span { font-size:20px; width:calc(100% - 200px); height:90px; }
	.esg-box .esg-overview .list-2 li { height:90px; font-size:18px; }
	.esg-box .esg-overview .iaan-box { padding:100px 0; }
	.esg-box .esg-overview .iaan-box .listbox ul { margin-top:30px; gap:10px; }
	.esg-box .esg-overview .iaan-box .listbox li { width:calc((100% - 30px) / 4); padding:20px; }
	.esg-box .esg-overview .iaan-box .listbox li dt { font-size:20px; height:52px; }
	.esg-box .esg-overview .iaan-box .listbox li dd { margin-top:20px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p { font-size:17px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p:not(:last-child) { margin-bottom:30px; }
}
@media screen and (max-width:1024px){
	.esg-box .esg-overview h4 { font-size:21px; }
	.esg-box .esg-overview .top > dl { margin-bottom:80px; }
	.esg-box .esg-overview .top > dl > dt { width:100%; }
	.esg-box .esg-overview .top > dl > dd { width:100%; margin-top:25px; }
	.esg-box .esg-overview .txt-1 { font-size:17px; }
	.esg-box .esg-overview .txt-1 strong { font-size:19px; margin-bottom:10px; }
	.esg-box .esg-overview .list-1 li:not(:last-child) { margin-bottom:10px; }
	.esg-box .esg-overview .list-1 li { gap:10px; }
	.esg-box .esg-overview .list-1 li strong { font-size:19px; width:200px; height:80px; border-radius:5px; }
	.esg-box .esg-overview .list-1 li span { font-size:19px; width:calc(100% - 200px); height:80px; border-radius:5px; border-width:1px; }
	.esg-box .esg-overview .list-2 li { height:80px; font-size:17px; border-width:3px; width:calc(33.333% + 40px); margin-left:-40px; }
	.esg-box .esg-overview .list-2 li:before { left:10px; }
	.esg-box .esg-overview .list-2 li:after { right:10px; }
	.esg-box .esg-overview .iaan-box { padding:80px 0; }
	.esg-box .esg-overview .iaan-box .listbox ul { margin-top:30px; gap:10px; }
	.esg-box .esg-overview .iaan-box .listbox li { width:calc((100% - 10px) / 2); padding:10px; border-radius:10px; border-width:1px; }
	.esg-box .esg-overview .iaan-box .listbox li dt { font-size:19px; height:50px; border-radius:5px; }
	.esg-box .esg-overview .iaan-box .listbox li dd { margin-top:20px; padding-bottom:5px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p { font-size:16px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p:not(:last-child) { margin-bottom:20px; }
}
@media screen and (max-width:640px){
	.esg-box .esg-overview h4 { font-size:20px; }
	.esg-box .esg-overview .top > dl { margin-bottom:60px; }
	.esg-box .esg-overview .top > dl > dd { margin-top:20px; }
	.esg-box .esg-overview .txt-1 { font-size:16px; }
	.esg-box .esg-overview .txt-1 strong { font-size:18px; margin-bottom:5px; }
	.esg-box .esg-overview .list-1 li:not(:last-child) { margin-bottom:5px; }
	.esg-box .esg-overview .list-1 li { gap:5px; }
	.esg-box .esg-overview .list-1 li strong { font-size:16px; width:130px; height:65px; }
	.esg-box .esg-overview .list-1 li span { font-size:16px; width:calc(100% - 130px); height:65px; }
	.esg-box .esg-overview .list-2 li { height:65px; font-size:15px; }
	.esg-box .esg-overview .list-2 li br { display:block; }
	.esg-box .esg-overview .list-2 li:nth-child(1) { padding-right:10px; }
	.esg-box .esg-overview .list-2 li:nth-child(3) { padding-left:10px; }
	.esg-box .esg-overview .iaan-box { padding:60px 0; }
	.esg-box .esg-overview .iaan-box .listbox ul { margin-top:20px; gap:5px; }
	.esg-box .esg-overview .iaan-box .listbox li { width:calc((100% - 5px) / 2); }
	.esg-box .esg-overview .iaan-box .listbox li dt { font-size:17px; height:48px; }
	.esg-box .esg-overview .iaan-box .listbox li dd { margin-top:12px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p { font-size:15px; }
	.esg-box .esg-overview .iaan-box .listbox li dd p:not(:last-child) { margin-bottom:15px; }
}

/* animation */
.esg-box .esg-overview h4 { overflow:hidden }
.esg-box .esg-overview h4 span { opacity:0; }
.esg-box .esg-overview .subOn h4 span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.esg-box .esg-overview .top .txt-1 { opacity:0; }
.esg-box .esg-overview .top > dl.subOn .txt-1 { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.esg-box .esg-overview .list-1 li { opacity:0; }
.esg-box .esg-overview .top > dl.subOn .list-1 li:nth-child(1) { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.esg-box .esg-overview .top > dl.subOn .list-1 li:nth-child(2) { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }
.esg-box .esg-overview .top > dl.subOn .list-1 li:nth-child(3) { animation:ani_2 0.8s 0.9s; animation-fill-mode:both; }
.esg-box .esg-overview .top > dl.subOn .list-1 li:nth-child(4) { animation:ani_2 0.8s 1.1s; animation-fill-mode:both; }
.esg-box .esg-overview .top > dl.subOn .list-1 li:nth-child(5) { animation:ani_2 0.8s 1.3s; animation-fill-mode:both; }
.esg-box .esg-overview .list-2 li { opacity:0; }
.esg-box .esg-overview .top > dl.subOn .list-2 li:nth-child(1) { animation:ani_1 0.8s 0.7s; animation-fill-mode:both; }
.esg-box .esg-overview .top > dl.subOn .list-2 li:nth-child(2) { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.esg-box .esg-overview .top > dl.subOn .list-2 li:nth-child(3) { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }
.esg-box .esg-overview .iaan-box .listbox li { opacity:0; }
.esg-box .esg-overview .iaan-box dl.subOn .listbox li:nth-child(1) { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
.esg-box .esg-overview .iaan-box dl.subOn .listbox li:nth-child(2) { animation:ani_3 0.8s 0.8s; animation-fill-mode:both; }
.esg-box .esg-overview .iaan-box dl.subOn .listbox li:nth-child(3) { animation:ani_3 0.8s 1.1s; animation-fill-mode:both; }
.esg-box .esg-overview .iaan-box dl.subOn .listbox li:nth-child(4) { animation:ani_3 0.8s 1.4s; animation-fill-mode:both; }
.esg-box .esg-overview .iaan-box dl.subOn .listbox li:nth-child(5) { animation:ani_3 0.8s 1.7s; animation-fill-mode:both; }


.esg-box .environmental-top .txt-1 { color:#111; font-size:38px; font-weight:600; line-height:1.6; }
.esg-box .environmental-top .txt-2 { margin-top:20px; color:#111; font-size:21px; font-weight:300; line-height:1.6; }
.esg-box .common-imgbox { margin-top:120px; position:relative; overflow:hidden; border-radius:20px; }
.esg-box .common-imgbox picture { position:relative; width:100%; height:auto; display:block }
.esg-box .common-imgbox picture:before { content:''; display:block; padding-bottom:26.25%; }
.esg-box .common-imgbox picture img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.esg-box .common-imgbox .tit { position:absolute; left:0; top:0; width:100%; height:100%; }
.esg-box .common-imgbox .tit h3 { position:relative; display:flex; justify-content:center; align-items:center; text-align:center; width:100%; height:100%; }
.esg-box .common-imgbox .tit h3 span { font-family:var(--mainFont); color:#fff; font-size:94px; font-weight:500; line-height:1.3; letter-spacing:0.18em; }
.esg-box .common-imgbox .tit h3 span:not(:last-child) { margin-right:60px; }
.esg-box .common-imgbox.subOn .tit h3 span:not(:last-child) { animation:ani_esg 2s 0.3s; animation-fill-mode:both; }
.esg-box .environmental-box { position:relative; margin:120px 0 200px; }
.esg-box .environmental-box .titbox { display:flex; align-items:center; justify-content:center; }
.esg-box .environmental-box .tit { border:2px dashed #E5E5E5; padding:100px; border-radius:600px; }
.esg-box .environmental-box .tit h4 { border:50px solid rgba(0, 75, 208, 0.1); border-radius:400px; }
.esg-box .environmental-box .tit h4 strong { width:300px; height:300px; display:flex; align-items:center; justify-content:center; border:20px solid #fff; border-radius:300px; color:#fff; font-size:32px; font-weight:600; line-height:1.3; background:var(--mainColor); text-align:center }
.esg-box .environmental-box .listbox { position:absolute; top:0; left:0; width:100%; height:100%; }
.esg-box .environmental-box .listbox .circle-box { position:relative; z-index:2; background:#fff; border:20px solid #f8f8f8; width:230px; height:230px; border-radius:230px; display:flex; align-items:center; justify-content:center; text-align:center }
.esg-box .environmental-box .listbox .circle-box .stit { display:block; color:var(--mainColor); font-size:24px; font-weight:600; line-height:1.5; }
.esg-box .environmental-box .listbox .txt { position:absolute; top:50%; padding-top:30px; width:100%; color:#333; font-size:21px; font-weight:300; line-height:1.7; }
.esg-box .environmental-box .listbox .txt:before { content:''; display:block; border-top:2px dashed #e5e5e5; width:100%; height:2px; position:absolute; top:0; left:0; }
.esg-box .environmental-box .listbox .txt:after { content:''; display:block; border:3px solid var(--mainColor); width:5px; height:5px; position:absolute; top:-4px; left:calc(230px - 4px); border-radius:10px; z-index:2; background:#fff }
.esg-box .environmental-box .listbox li { position:absolute; width:35%; }
.esg-box .environmental-box .listbox li:nth-child(1) { left:65%; top:50%; transform:translate(0, -50%); }
.esg-box .environmental-box .listbox li:nth-child(1) .txt { text-align:right; right:0; }
.esg-box .environmental-box .listbox li:nth-child(2) { left:50%; top:110%; transform:translate(0, -50%); margin-left:calc(-230px / 2) }
.esg-box .environmental-box .listbox li:nth-child(2) .txt { text-align:right; right:0; }
.esg-box .environmental-box .listbox li:nth-child(3) { right:65%; top:50%; transform:translate(0, -50%); }
.esg-box .environmental-box .listbox li:nth-child(3) .circle-box { position:absolute; right:0; top:calc(-230px / 2); }
.esg-box .environmental-box .listbox li:nth-child(3) .txt { text-align:left; left:0; }
.esg-box .environmental-box .listbox li:nth-child(3) .txt:after { right:calc(230px - 4px); left:unset; }
.esg-box .sicoal-box { margin-top:120px; overflow:hidden; }
.esg-box .sicoal-box > ul { display:flex; flex-wrap:wrap; border:1px solid #000; border-width:1px 0; }
.esg-box .sicoal-box > ul > li { width:50%; padding:80px 60px; display:flex; align-items:center; gap:0 60px; }
.esg-box .sicoal-box > ul > li:not(:last-child) { border-right:1px solid #e5e5e5; }
.esg-box .sicoal-box > ul > li dt { color:#111; font-size:28px; font-weight:600; line-height:1.3; }
.esg-box .sicoal-box > ul > li dd { margin-top:30px; color:#333; font-size:19px; font-weight:300; line-height:1.7; }
.esg-box .governance-box { margin-top:120px; overflow:hidden; border-radius:20px; background:#f4f5f9; padding:120px 60px; }
.esg-box .governance-box h4 { color:#111; font-size:42px; font-weight:600; line-height:1.3; letter-spacing:-0.05em; text-align:center }
.esg-box .governance-box h4 span { font-weight:600; }
.esg-box .governance-box .listbox { margin-top:80px; }
.esg-box .governance-box .listbox li:not(:last-child) { margin-bottom:30px; }
.esg-box .governance-box .listbox li { display:flex; align-items:center; gap:0 30px; padding:30px; border-radius:20px; border:2px solid #fff; background:rgba(255, 255, 255, 0.50); }
.esg-box .governance-box .listbox li .num { display:flex; justify-content:center; align-items:center; width:50px; height:50px; font-family:var(--mainFont); color:#fff; font-size:17px; font-weight:700; line-height:1.3; border-radius:10px; background:var(--mainColor); }
.esg-box .governance-box .listbox li .txt { width:calc(100% - 50px - 30px); color:#333; font-size:21px; font-weight:300; line-height:1.6; }
@media screen and (max-width:1560px){
	.esg-box .environmental-top .txt-1 { font-size:30px; }
	.esg-box .environmental-top .txt-2 { margin-top:20px; font-size:20px; }
	.esg-box .common-imgbox { margin-top:100px; }
	.esg-box .common-imgbox .tit h3 span { font-size:80px; }
	.esg-box .common-imgbox .tit h3 span:not(:last-child) { margin-right:50px; }
	.esg-box .environmental-box { margin:100px 0 160px; }
	.esg-box .environmental-box .tit { padding:80px; }
	.esg-box .environmental-box .tit h4 { border-width:40px; }
	.esg-box .environmental-box .tit h4 strong { width:250px; height:250px; border-width:18px; font-size:28px; }
	.esg-box .environmental-box .listbox .circle-box { border-width:18px; width:180px; height:180px; }
	.esg-box .environmental-box .listbox .circle-box .stit { font-size:22px; }
	.esg-box .environmental-box .listbox .txt { padding-top:25px; font-size:19px; }
	.esg-box .environmental-box .listbox .txt:after { left:calc(180px - 4px); }
	.esg-box .environmental-box .listbox li:nth-child(2) { margin-left:calc(-180px / 2) }
	.esg-box .environmental-box .listbox li:nth-child(3) .circle-box { top:calc(-180px / 2); }
	.esg-box .environmental-box .listbox li:nth-child(3) .txt:after { right:calc(180px - 4px); }
	.esg-box .sicoal-box { margin-top:100px; }
	.esg-box .sicoal-box > ul > li { padding:80px 40px; gap:0 40px; }
	.esg-box .sicoal-box > ul > li dt { font-size:24px; }
	.esg-box .sicoal-box > ul > li dd { margin-top:20px; font-size:18px; }
	.esg-box .sicoal-box > ul > li dd br { display:none }
	.esg-box .governance-box { margin-top:100px; padding:100px 40px; }
	.esg-box .governance-box h4 { font-size:36px; }
	.esg-box .governance-box .listbox { margin-top:60px; }
	.esg-box .governance-box .listbox li:not(:last-child) { margin-bottom:25px; }
	.esg-box .governance-box .listbox li { gap:0 25px; padding:25px; }
	.esg-box .governance-box .listbox li .num { width:45px; height:45px; font-size:16px; }
	.esg-box .governance-box .listbox li .txt { width:calc(100% - 45px - 25px); font-size:20px; }
}
@media screen and (max-width:1280px){
	.esg-box .environmental-top .txt-1 { font-size:24px; }
	.esg-box .environmental-top .txt-2 { margin-top:15px; font-size:19px; }
	.esg-box .common-imgbox { margin-top:80px; }
	.esg-box .common-imgbox picture:before { padding-bottom:32%; }
	.esg-box .common-imgbox .tit h3 span { font-size:60px; }
	.esg-box .common-imgbox .tit h3 span:not(:last-child) { margin-right:40px; }
	.esg-box .environmental-box { margin:80px 0 120px; }
	.esg-box .environmental-box .tit { padding:48px; }
	.esg-box .environmental-box .tit h4 { border-width:20px; }
	.esg-box .environmental-box .tit h4 strong { width:220px; height:220px; border-width:12px; font-size:24px; }
	.esg-box .environmental-box .listbox .circle-box { border-width:12px; width:146px; height:146px; }
	.esg-box .environmental-box .listbox .circle-box .stit { font-size:19px; }
	.esg-box .environmental-box .listbox .txt { padding-top:35px; font-size:17px; }
	.esg-box .environmental-box .listbox .txt:after { left:calc(146px - 4px); }
	.esg-box .environmental-box .listbox li:nth-child(2) { margin-left:calc(-146px / 2) }
	.esg-box .environmental-box .listbox li:nth-child(3) .circle-box { top:calc(-146px / 2); }
	.esg-box .environmental-box .listbox li:nth-child(3) .txt:after { right:calc(146px - 4px); }
	.esg-box .sicoal-box { margin-top:80px; }
	.esg-box .sicoal-box > ul > li { padding:60px 30px; gap:0 30px; }
	.esg-box .sicoal-box > ul > li dt { font-size:22px; }
	.esg-box .sicoal-box > ul > li dd { margin-top:15px; font-size:17px; }
	.esg-box .governance-box { margin-top:80px; padding:80px 30px; }
	.esg-box .governance-box h4 { font-size:30px; }
	.esg-box .governance-box .listbox { margin-top:40px; }
	.esg-box .governance-box .listbox li:not(:last-child) { margin-bottom:20px; }
	.esg-box .governance-box .listbox li { gap:0 20px; padding:20px; }
	.esg-box .governance-box .listbox li .num { width:40px; height:40px; font-size:15px; }
	.esg-box .governance-box .listbox li .txt { width:calc(100% - 40px - 20px); font-size:19px; }
}
@media screen and (max-width:1024px){
	.esg-box .environmental-top .txt-1 { font-size:21px; }
	.esg-box .environmental-top .txt-1 br { display:none }
	.esg-box .environmental-top .txt-2 { margin-top:12px; font-size:18px; }
	.esg-box .common-imgbox { margin-top:60px; border-radius:10px; }
	.esg-box .common-imgbox .tit h3 span { font-size:48px; letter-spacing:0.10em; }
	.esg-box .common-imgbox .tit h3 span:not(:last-child) { margin-right:30px; }
	.esg-box .environmental-box { margin:60px 0 0; }
	.esg-box .environmental-box .tit { padding:0; border-width:0; }
	.esg-box .environmental-box .tit h4 { border-width:15px; }
	.esg-box .environmental-box .tit h4 strong { width:180px; height:180px; border-width:10px; font-size:22px; }
	.esg-box .environmental-box .listbox { position:relative; margin:30px 0 0 }
	.esg-box .environmental-box .listbox .circle-box { border-width:10px; width:140px; height:140px; }
	.esg-box .environmental-box .listbox .circle-box .stit { font-size:17px; }
	.esg-box .environmental-box .listbox .txt { position:relative; padding-top:0; font-size:17px; width:calc(100% - 140px - 30px); }
	.esg-box .environmental-box .listbox .txt br { display:none }
	.esg-box .environmental-box .listbox .txt:before,
	.esg-box .environmental-box .listbox .txt:after { display:none }
	.esg-box .environmental-box .listbox li:not(:last-child) { margin-bottom:20px; }
	.esg-box .environmental-box .listbox li { width:100%; position:relative; left:unset !important; top:unset !important; right:unset !important; transform:translate(0, 0) !important; display:flex; align-items:center; gap:0 30px; }
	.esg-box .environmental-box .listbox li:nth-child(2) { margin-left:0 }
	.esg-box .environmental-box .listbox li:nth-child(3) .circle-box { position:relative; top:unset; }
	.esg-box .environmental-box .listbox li:nth-child(3) .txt:after { right:unset; }
	.esg-box .environmental-box .listbox li:nth-child(1) .txt,
	.esg-box .environmental-box .listbox li:nth-child(2) .txt { text-align:left; }
	.esg-box .sicoal-box { margin-top:60px; }
	.esg-box .sicoal-box > ul > li { padding:50px 20px; gap:0 20px; }
	.esg-box .sicoal-box > ul > li .icon img { width:50px; }
	.esg-box .sicoal-box > ul > li dt { font-size:20px; }
	.esg-box .sicoal-box > ul > li dd { margin-top:12px; font-size:16px; }
	.esg-box .governance-box { margin-top:60px; padding:60px 20px; border-radius:10px; }
	.esg-box .governance-box h4 { font-size:24px; }
	.esg-box .governance-box .listbox { margin-top:30px; }
	.esg-box .governance-box .listbox li:not(:last-child) { margin-bottom:15px; }
	.esg-box .governance-box .listbox li { gap:0 20px; padding:20px; border-radius:10px; border-width:1px; }
	.esg-box .governance-box .listbox li .num { width:38px; height:38px; font-size:14px; border-radius:5px; }
	.esg-box .governance-box .listbox li .txt { width:calc(100% - 38px - 20px); font-size:18px; }
}
@media screen and (max-width:640px){
	.esg-box .environmental-top .txt-1 { font-size:19px; }
	.esg-box .environmental-top .txt-2 { margin-top:10px; font-size:16px; }
	.esg-box .common-imgbox { margin-top:40px; }
	.esg-box .common-imgbox picture:before { padding-bottom:40%; }
	.esg-box .common-imgbox .tit h3 span { font-size:31px; }
	.esg-box .common-imgbox .tit h3 span:not(:last-child) { margin-right:20px; }
	.esg-box .environmental-box { margin:40px 0 0; }
	.esg-box .environmental-box .tit h4 { border-width:10px; }
	.esg-box .environmental-box .tit h4 strong { width:160px; height:160px; font-size:20px; }
	.esg-box .environmental-box .listbox { margin:15px 0 0 }
	.esg-box .environmental-box .listbox .circle-box { border-width:6px; width:120px; height:120px; }
	.esg-box .environmental-box .listbox .circle-box .stit { font-size:16px; }
	.esg-box .environmental-box .listbox .txt { font-size:16px; width:calc(100% - 120px - 15px); }
	.esg-box .environmental-box .listbox li:not(:last-child) { margin-bottom:15px; }
	.esg-box .environmental-box .listbox li { gap:0 15px; }
	.esg-box .sicoal-box { margin-top:40px; }
	.esg-box .sicoal-box > ul > li { width:100%; }
	.esg-box .sicoal-box > ul > li:not(:last-child) { border:1px solid #e5e5e5; border-width:0 0 1px; }
	.esg-box .sicoal-box > ul > li { padding:40px 20px; gap:0 15px; }
	.esg-box .sicoal-box > ul > li dt { font-size:19px; }
	.esg-box .sicoal-box > ul > li dd { margin-top:10px; font-size:15px; }
	.esg-box .governance-box { margin-top:40px; padding:40px 10px; }
	.esg-box .governance-box h4 { font-size:21px; }
	.esg-box .governance-box .listbox { margin-top:25px; }
	.esg-box .governance-box .listbox li:not(:last-child) { margin-bottom:10px; }
	.esg-box .governance-box .listbox li { gap:0 15px; padding:10px 15px; }
	.esg-box .governance-box .listbox li .num { width:35px; height:35px; font-size:13px; }
	.esg-box .governance-box .listbox li .txt { width:calc(100% - 35px - 15px); font-size:16px; }
}

/* animation */
.esg-box .environmental-top { opacity:0; }
.esg-box .environmental-top.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.esg-box .environmental-box .titbox,
.esg-box .environmental-box .listbox li { opacity:0; }
.esg-box .environmental-box.subOn .titbox { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.esg-box .environmental-box.subOn  .listbox li:nth-child(1) { animation:ani_5 0.8s 0.6s; animation-fill-mode:both; }
.esg-box .environmental-box.subOn  .listbox li:nth-child(2) { animation:ani_5 0.8s 0.9s; animation-fill-mode:both; }
.esg-box .environmental-box.subOn  .listbox li:nth-child(3) { animation:ani_5 0.8s 1.2s; animation-fill-mode:both; }
.esg-box .sicoal-box { opacity:0; }
.esg-box .sicoal-box.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.esg-box .governance-box h4 { overflow:hidden }
.esg-box .governance-box h4 span { opacity:0; display:block }
.esg-box .governance-box.subOn h4 span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.esg-box .governance-box .listbox { opacity:0; }
.esg-box .governance-box.subOn .listbox { animation:ani_4 1.0s 0.7s; animation-fill-mode:both; }
@keyframes ani_esg {
    0% { margin-right:60px; }
    100% { margin-right:0; }
}
@media screen and (max-width:1560px){
	@keyframes ani_esg {
		0% { margin-right:50px; }
		100% { margin-right:0; }
	}
}
@media screen and (max-width:1280px){
	@keyframes ani_esg {
		0% { margin-right:40px; }
		100% { margin-right:0; }
	}
}
@media screen and (max-width:1024px){
	@keyframes ani_esg {
		0% { margin-right:30px; }
		100% { margin-right:0; }
	}
}
@media screen and (max-width:640px){
	@keyframes ani_esg {
		0% { margin-right:20px; }
		100% { margin-right:0; }
	}
}

.finance-box .selectbox { margin-bottom:40px; display:flex; justify-content:flex-end; align-items:flex-end; }
.finance-box .selectbox select { width:350px; height:85px; line-height:85px; padding:0 80px 0 40px; font-size:19px; color:#555; font-weight:400; border:1px solid #e5e5e5; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:10px; background:url(/img/sub/icon_select_down.png) right center no-repeat; }
.finance-box .selectbox select::-ms-expand { display: none; }
.finance-box .listbox:not(:last-child) { margin-bottom:150px; }
.finance-box .listbox .top { display:flex; justify-content:space-between; }
.finance-box .listbox .top h4 { color:#222; font-size:34px; font-weight:600; line-height:1.3; }
.finance-box .listbox .top .txt { color:#222; font-size:17px; font-weight:300; line-height:1.3; }
.finance-box .listbox table { margin-top:30px; border-top:2px solid #000; }
.finance-box .listbox thead th { height:80px; text-align:center; border:1px solid #e5e5e5; border-width:0 0 1px 1px; background:#f8f8f8; color:#222; font-size:20px; font-weight:600; line-height:1.3; }
.finance-box .listbox thead th:first-child { border-left:none }
.finance-box .listbox tbody td { height:80px; text-align:center; border:1px solid #e5e5e5; border-width:0 0 1px 1px; background:#fff; color:#333; font-size:18px; font-weight:300; line-height:1.3; }
.finance-box .listbox tbody td:first-child { border-left:none }
.finance-box .listbox tbody td strong { font-weight:500 }
@media screen and (max-width:1280px){
	.finance-box .selectbox { margin-bottom:30px; }
	.finance-box .selectbox select { width:300px; height:75px; line-height:75px; padding:0 80px 0 30px; font-size:18px; }
	.finance-box .listbox:not(:last-child) { margin-bottom:130px; }
	.finance-box .listbox .top h4 { font-size:30px; }
	.finance-box .listbox .top .txt { font-size:16px; }
	.finance-box .listbox table { margin-top:20px; }
	.finance-box .listbox thead th { height:70px; font-size:19px; }
	.finance-box .listbox tbody td { height:70px; font-size:17px; }
}
@media screen and (max-width:1024px){
	.finance-box .selectbox { margin-bottom:20px; }
	.finance-box .selectbox select { width:260px; height:70px; line-height:70px; padding:0 80px 0 30px; font-size:17px; border-radius:5px; }
	.finance-box .listbox:not(:last-child) { margin-bottom:100px; }
	.finance-box .listbox .top h4 { font-size:24px; }
	.finance-box .listbox .top .txt { font-size:15px; }
	.finance-box .listbox table { margin-top:10px; }
	.finance-box .listbox thead th { height:60px; font-size:18px; }
	.finance-box .listbox tbody td { height:60px; font-size:16px; }
}
@media screen and (max-width:640px){
	.finance-box .selectbox { margin-bottom:15px; }
	.finance-box .selectbox select { width:220px; height:55px; line-height:55px; padding:0 80px 0 20px; font-size:16px; }
	.finance-box .listbox:not(:last-child) { margin-bottom:70px; }
	.finance-box .listbox .top h4 { font-size:20px; }
	.finance-box .listbox .top .txt { font-size:14px; }
	.finance-box .listbox table { margin-top:5px; }
	.finance-box .listbox thead th { height:55px; font-size:17px; }
	.finance-box .listbox tbody td { height:55px; font-size:15px; }
}


/* animation */
.finance-box { opacity:0; }
.finance-box { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }

/* board */
/* 개발부분 site.css --> register-box */
.registerBox .gTxt { margin:120px 0 30px; color:#111; font-size:28px; font-weight:600; line-height:1.3; }
.registerBox .gTxt:first-child { margin-top:0 }
.registerBox > ul { display:flex; flex-wrap:wrap; gap:20px; }
.registerBox > ul > li { position:relative; display:flex; align-items:center; flex-wrap:wrap; padding:8px 0; width:100%; background:#f4f5f9; border:2px solid #f4f5f9; border-radius:10px; transition:all 0.3s; }
.registerBox > ul > li:hover { background:#fff; border:2px solid var(--mainColor); }
.registerBox > ul > li.w50 { width:calc(50% - 10px); }
.registerBox > ul > li > label { width:205px; font-size:19px; color:#222; font-weight:600; line-height:1.3; display:inline-block; text-align:left; padding-left:40px; }
.registerBox > ul > li .ipbox { display:flex; align-items:center; width:calc(100% - 205px); min-height:65px; font-size:18px; color:#222; font-weight:400; }
.registerBox > ul > li input[type="text"],
.registerBox > ul > li input[type="password"] { height:65px; padding:0 15px; width:100%; font-size:19px; color:#222; font-weight:300; border:none; outline:none; background:none; border-radius:5px; }
.registerBox > ul > li select { width:100%; height:65px; line-height:65px; padding:0 50px 0 15px; font-size:19px; color:#222; font-weight:300; border:none; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; background:url(/img/sub/icon_select_down.png) right center no-repeat; }
.registerBox > ul > li select::-ms-expand { display: none; }
.registerBox > ul > li textarea { width:100%; height:200px; line-height:1.6; padding:20px 15px; font-size:19px; color:#222; font-weight:300; border:none; outline:none; background:none; border-radius:0; }
.registerBox > ul > li input.ip02 { width:calc(33% - 16px); }
.registerBox > ul > li select.sel01 { width:34%; }
.registerBox > ul > li .stxt { font-size:22px; color:#555; font-weight:400; width:36px; display:inline-block; text-align:center; }
.registerBox > ul > li .ipbox .file-box { width:100%; }
.registerBox > ul > li .ipbox .ipcont { position:relative; align-items:center; }
.registerBox > ul > li .ipbox .ipcont:not(:last-child) { margin-bottom:10px; }
.registerBox > ul > li .ipbox .ipcont .upload-name { text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; width:calc(100% - 380px); height:65px; outline:none; border:none; padding:4px 15px; font-size:18px; color:#333; background:none; border-radius:0; }
.registerBox > ul > li .ipbox .ipcont .upload-name.on { padding:4px 0 4px 30px; background:url(/img/sub/file_icon.svg) 10px center no-repeat; }
.registerBox > ul > li .ipbox .ipcont .file { position:absolute; right:-2px; top:-10px; width:380px; height:85px; background:#222; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:0 10px 10px 0; }
.registerBox > ul > li .ipbox .ipcont .file span{ text-align:center; font-size:20px; color:#fff; font-weight:600; line-height:1.3; }
.registerBox > ul > li .ipbox .ipcont .file input{display:none}
.registerBox > ul > li .ipbox .sbox { margin:40px 0 10px; padding:0; display:none }
.registerBox > ul > li .ipbox .sbox .ch { margin:0; border-radius:10px; background:#f8f8f8; padding:20px 30px; display:inline-block }
.registerBox > ul > li .ipbox .ip-code { display:flex; align-items:center; }
.registerBox > ul > li .ipbox .code-box input[type="text"] { width:auto }
.registerBox > ul > li .ipbox .ip-code img { height:65px; border-radius:5px; }
.registerBox > ul > li .ipbox .ip-code .btn_refresh { position:absolute; right:-2px; top:-2px; cursor:pointer; text-indent:-9999em; overflow:hidden; margin:0; padding:0; outline:none; width:85px; height:85px; border:none; border-radius:0 5px 5px 0; background:#222 url(/img/sub/icon_refresh.svg) center center no-repeat;}
.registerBox > ul > li img.img { height:65px; border-radius:10px; }
.registerBox .privacy-box .sbox { padding:20px; border-radius:10px; border:2px solid #e5e5e5; }
.registerBox .privacy-box .sbox .scroll-box { height:180px; padding-right:20px; }
.registerBox .ch { margin-top:60px; display:flex; justify-content:center; }
.registerBox .ch input[type="checkbox"],
.registerBox .ch input[type="radio"]{opacity:0; height:auto; }
.registerBox .ch input[type="checkbox"] + span,
.registerBox .ch input[type="radio"] + span { position:relative; padding:0 0 0 30px; font-weight:300; font-size:19px; line-height:1.4 !important; display:inline-block; color:#111; }
.registerBox .ch input[type="checkbox"] + span:before  { content:''; display:block; width:25px; height:25px; vertical-align:middle; transition:all 0.3s; background:url(/img/sub/ch_off.png) center center no-repeat; border:2px solid #e5e5e5; border-radius:4px; position:absolute; left:-15px; top:-2px; }
.registerBox .ch input[type="radio"] + span:before { content:''; display:block; width:25px; height:25px; vertical-align:middle; background:none; border:1px solid #ddd; border-radius:50px; position:absolute; left:-15px; top:5px; }
.registerBox .ch input[type="radio"] + span:after { content:''; display:block; width:6px; height:6px; vertical-align:middle; background:none; border:none; border-radius:50px; position:absolute; left:-9px; top:11px; }
.registerBox .ch input[type="checkbox"]:checked + span:before { border:2px solid var(--mainColor); background:url(/img/sub/ch_on.png) center center no-repeat; }
.registerBox .ch input[type="radio"]:checked + span:after { background:#000; }
.registerBox .ch input[type="radio"]:checked + span:before { border:1px solid #000; }
.registerBox .attach { display:none }
.registerBox .btnbox { margin-top:120px; }
.registerBox .btnbox span { width:380px; }
/*
.registerBox ul > li .sel-focus:focus ~ .tit,
.registerBox ul > li.on label.tit { opacity:0; z-index:-1 }
*/
@media screen and (max-width:1280px){
	.registerBox .gTxt { margin:90px 0 20px; font-size:24px; }
    .registerBox > ul > li > label { width:130px; font-size:17px; padding-left:30px; }
    .registerBox > ul > li .ipbox { width:calc(100% - 130px); min-height:60px; }
    .registerBox > ul > li input[type="text"],
    .registerBox > ul > li input[type="password"],
    .registerBox > ul > li select,
    .registerBox > ul > li textarea,
    .registerBox > ul > li .stxt,
    .registerBox > ul > li .ipbox .ipcont .tit,
    .registerBox > ul > li .ipbox .ipcont .upload-name,
    .registerBox .ch input[type="checkbox"] + span,
    .registerBox .ch input[type="radio"] + span { font-size:18px; }
    .registerBox > ul > li input[type="text"],
    .registerBox > ul > li input[type="password"],
    .registerBox > ul > li select,
    .registerBox > ul > li .ipbox .ipcont .upload-name { height:60px; }
    .registerBox > ul > li select { line-height:60px; }
    .registerBox > ul > li .ipbox .ipcont .file { width:220px; height:80px; }
    .registerBox > ul > li .ipbox .ipcont .file span{ font-size:16px; }
	.registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 220px); }
    .registerBox > ul > li .ipbox .sbox { margin:30px 0 10px; }
    .registerBox > ul > li .ipbox .sbox .ch { padding:20px; }
}
@media screen and (max-width:1024px){
	.registerBox .gTxt { margin:70px 0 20px; font-size:20px; }
	.registerBox > ul > li { border:1px solid #f4f5f9; border-radius:5px; }
	.registerBox > ul > li:hover { border:1px solid var(--mainColor); }
    .registerBox > ul > li > label { width:100px; font-size:16px; padding-left:20px;  }
    .registerBox > ul > li .ipbox { width:calc(100% - 100px);  min-height:50px; }
    .registerBox > ul > li input[type="text"],
    .registerBox > ul > li input[type="password"],
    .registerBox > ul > li select,
    .registerBox > ul > li textarea,
    .registerBox > ul > li .stxt,
    .registerBox > ul > li .ipbox .ipcont .tit,
    .registerBox > ul > li .ipbox .ipcont .upload-name,
    .registerBox .ch input[type="checkbox"] + span,
    .registerBox .ch input[type="radio"] + span { font-size:16px; }
    .registerBox > ul > li input[type="text"],
    .registerBox > ul > li input[type="password"],
    .registerBox > ul > li select,
    .registerBox > ul > li .ipbox .ipcont .upload-name { height:50px; }
    .registerBox > ul > li select { line-height:50px; }
	.registerBox > ul > li .ipbox .ipcont:not(:last-child) { margin-bottom:5px; }
    .registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 150px);  }
    .registerBox > ul > li .ipbox .ipcont .file { width:150px; height:68px; border-radius:0 5px 5px 0; right:-1px; top:-9px;}
    .registerBox > ul > li .ipbox .ipcont .file span{ font-size:15px; }
    .registerBox > ul > li .ipbox .sbox { margin:20px 0 10px; }
    .registerBox > ul > li .ipbox .sbox .ch { padding:15px; }
	.registerBox > ul > li .ipbox .ip-code img { height:50px;  }
	.registerBox > ul > li .ipbox .ip-code .btn_refresh { right:-1px; top:-1px; width:68px; height:68px; }
	.registerBox .privacy-box .sbox { padding:15px; border-radius:5px; border:1px solid #e5e5e5; }
	.registerBox .ch { margin-top:40px; }
	.registerBox .ch input[type="checkbox"] + span,
	.registerBox .ch input[type="radio"] + span { padding:0 0 0 20px; }
	.registerBox .ch input[type="checkbox"] + span:before  { width:20px; height:20px; border:1px solid #e5e5e5; left:-10px; top:0; }
	.registerBox .ch input[type="checkbox"]:checked + span:before { border:1px solid var(--mainColor); }
	.registerBox .btnbox { margin-top:90px; }
	.registerBox .btnbox span { width:260px; }
	.registerBox > ul > li.w50-1 { width:100%; }
}
@media screen and (max-width:760px){
	.registerBox > ul > li.w50 { width:100%; }
}
@media screen and (max-width:640px){
	.registerBox .gTxt { margin:40px 0 12px; font-size:17px; }
	.registerBox > ul { gap:10px; }
	.registerBox > ul > li { padding:4px 0; }
    .registerBox > ul > li > label { width:80px; padding-left:10px;  }
    .registerBox > ul > li .ipbox { width:calc(100% - 80px); flex-wrap:wrap; }
    .registerBox > ul > li textarea,
    .registerBox .privacy-box .sbox .scroll-box { height:150px; }
	.registerBox > ul > li input.ip02 { width:calc((100% - 36px - 5px) / 2); background:rgba(255,255,255,0.6) }
	.registerBox > ul > li select.sel01 { width:calc(100% - 5px); margin-top:5px; background-color:rgba(255,255,255,0.6) }
    .registerBox > ul > li .ipbox .ipcont .file { width:90px; height:60px; right:-1px; top:-5px; width:80px; }
    .registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 90px); }
	.registerBox > ul > li .ipbox .ipcont .upload-name.on { padding:4px 0 4px 30px; }
	.registerBox > ul > li .ipbox .ip-code img { height:45px;  }
	.registerBox > ul > li .ipbox .ip-code .btn_refresh { width:60px; height:60px; }
	.registerBox .ch { margin-top:30px; }
	.registerBox .btnbox { margin-top:60px; display:flex; gap:10px; }
	.registerBox .btnbox * { margin:0 !important; }
	.registerBox .btnbox > * { width:calc((100% - 5px) / 2); }
	.registerBox .btnbox span { width:100%; margin:0;}
}

/* animation */
.registerBox { opacity:0; }
.registerBox.subOn { animation:ani_4 0.5s 0.3s; animation-fill-mode:both; }


.registerBox .os-theme-dark > .os-scrollbar, 
.registerBox .os-theme-light > .os-scrollbar { padding:0; width:4px; background:#e5e5e5; border-radius:4px; }
.registerBox .os-theme-dark > .os-scrollbar-horizontal, 
.registerBox .os-theme-light > .os-scrollbar-horizontal { width:4px }
.registerBox .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background:#222; width:4px; border-radius:4px; }
.registerBox .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active, 
.registerBox .os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active,
.registerBox .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle,
.registerBox .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle.active { background:#222; border-radius:4px; }


.gallery-list > ul { display:flex; flex-wrap:wrap; gap:120px 50px; }
.gallery-list > ul > li { width:calc((100% - 100px) / 3); }
.gallery-list > ul > li .imgbox { width:100%; position:relative; overflow:hidden; border-radius:20px; background:#ddd url(/img/sub/imgNo.jpg) no-repeat center / cover; }
.gallery-list > ul > li .imgbox:after {content:""; display:block; transition:all 0.3s ease-in-out; opacity:0; position:absolute; left:0; top:0; width:calc(100% - 8px); height:calc(100% - 8px); border:4px solid var(--mainColor); border-radius:20px; }
.gallery-list > ul > li:hover .imgbox:after { opacity:1; }
.gallery-list > ul > li .imgbox:before {content:""; display:block; padding-bottom:68.3%; }
.gallery-list > ul > li .imgbox img { transition:all 0.3s ease-in-out; transform:scale(1); position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.gallery-list > ul > li:hover .imgbox img { transform:scale(1.05); }
.gallery-list > ul > li .txtbox { margin-top:30px; }
.gallery-list > ul > li .txtbox .txt { color:#111; letter-spacing:-0.04em; font-size:24px; font-weight:500; line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.gallery-list > ul > li .txtbox .date { display:block; margin-top:20px; font-family:var(--mainFont); color:#ccc; font-size:17px; font-weight:500; line-height:1.5; }
.gallery-list > ul > li .more { transition:all 1.0s ease-in-out; opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:70px; height:70px; border-radius:70px; background:var(--mainColor); overflow:hidden; }
.gallery-list > ul > li .more:before { content:""; display:block; transition:all 0.5s 0.1s; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/img/sub/icon_more.svg) center center no-repeat; filter:grayscale(100%) brightness(100%); opacity:0.3; }
.gallery-list > ul > li .more:after { content:""; display:block; transition:all 0.5s 0.1s; position:absolute; top:0; left:-70px; width:100%; height:100%; background:url(/img/sub/icon_more.svg) center center no-repeat }
.gallery-list > ul > li a:hover .more { opacity:1; transition:all 0.8s ease-in-out;  }
.gallery-list > ul > li a:hover .more:before { left:70px; }
.gallery-list > ul > li a:hover .more:after { left:0; }
@media screen and (max-width:1280px){
    .gallery-list > ul { gap:100px 30px; }
    .gallery-list > ul > li { width:calc((100% - 60px) / 3); }
    .gallery-list > ul > li .txtbox .txt { font-size:22px; }
    .gallery-list > ul > li .txtbox .date { margin-top:18px; font-size:16px; }
}
@media screen and (max-width:1024px){
    .gallery-list > ul { gap:80px 20px; }
    .gallery-list > ul > li { width:calc((100% - 40px) / 3); }
    .gallery-list > ul > li .imgbox { border-radius:10px; }
	.gallery-list > ul > li .imgbox:after { width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid var(--mainColor); border-radius:10px; }
    .gallery-list > ul > li .txtbox { margin-top:20px; }
    .gallery-list > ul > li .txtbox .txt { font-size:20px; }
    .gallery-list > ul > li .txtbox .date { margin-top:15px; font-size:15px; }
	.gallery-list > ul > li .more { width:50px; height:50px; }
	.gallery-list > ul > li .more:after { left:-50px; }
	.gallery-list > ul > li a:hover .more:before { left:50px; }
}
@media screen and (max-width:860px){
    .gallery-list > ul { gap:50px 20px; }
    .gallery-list > ul > li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:640px){
    .gallery-list > ul { gap:40px 10px; }
    .gallery-list > ul > li { width:calc((100% - 10px) / 2); }
    .gallery-list > ul > li .txtbox { margin-top:12px; }
    .gallery-list > ul > li .txtbox .txt { font-size:17px; }
    .gallery-list > ul > li .txtbox .date { margin-top:10px; font-size:14px; }
	.gallery-list > ul > li .more { display:none }
}
@media screen and (max-width:520px){
    .gallery-list > ul { gap:30px 0; }
    .gallery-list > ul > li { width:100%; }
    .gallery-list > ul > li .imgbox:before {padding-bottom:58%; }
}


/* animation */
.gallery-list { opacity:0 }
.gallery-list.subOn { animation:ani_4 0.5s 0.3s; animation-fill-mode:both; }


.board-list table { border-top:2px solid #000; border-bottom:1px solid #e0e0e0; background:#fff; }
.board-list table thead th { color:#222; font-size:20px; font-weight:600; line-height:1.3; height:100px; border-bottom:1px solid #e5e5e5; background:#f8f8f8; text-align:center; }
.board-list table tbody td { color:#333; font-size:18px; font-weight:300; line-height:1.3; height:80px; padding:10px 5px; border-bottom:1px solid #e5e5e5; background:#fff; text-align:center; }
.board-list table tbody td.td_left { text-align:left; padding-left:40px; color:#333; }
@media screen and (max-width:1280px){
	col.c1 { width:150px !important }
	col.c3 { width:200px !important }
	.board-list table tbody td.td_left { padding-left:30px; }
}
@media screen and (max-width:1024px){
	col.c1 { width:100px !important }
	col.c3 { width:150px !important }
	.board-list table thead th { font-size:18px; height:80px; }
	.board-list table tbody td { font-size:16px; height:70px; }
	.board-list table tbody td.td_left { padding-left:20px; }
}
@media screen and (max-width:640px){
	col.c1 { width:80px !important }
	col.c3 { width:120px !important }
	.board-list table thead th { font-size:16px; height:60px; }
	.board-list table tbody td { font-size:15px; height:50px; }
	.board-list table tbody td.td_left { padding-left:10px; }
}

/* animation */
.board-list { opacity:0 }
.board-list.subOn { animation:ani_4 0.5s 0.3s; animation-fill-mode:both; }


.board-view .top-box { padding:0 0 60px; border-bottom:2px solid #000; }
.board-view .top-box .title { font-size:52px; font-weight:600; color:#111; line-height:1.3; letter-spacing:-0.08em; }
.board-view .top-box .info { display:flex; margin-top:20px; }
.board-view .top-box .txt { font-size:17px; font-weight:300; color:#999; line-height:1.3; }
.board-view .top-box .txt strong { font-weight:500; display:inline-block; margin-right:10px; }
.board-view .top-box .txt:not(:last-child) { margin-right:30px; }
.board-view .viewCont .contents { min-height:350px; padding:60px 0;}
.board-view .viewCont .attach { margin-top:60px; padding:35px 0; border-top:1px solid #e0e0e0; }
.board-view .viewCont .attach li:not(:last-child) { margin-bottom:30px; }
.board-view .viewCont .attach li { display:flex; }
.board-view .viewCont .attach li strong { position:relative; width:130px; text-align:center; font-size:16px; font-weight:500; color:#222; line-height:1.3; }
.board-view .viewCont .attach li strong:before { content:""; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:20px; background:#e0e0e0; } 
.board-view .viewCont .attach li a { transition:all 0.3s; position:relative; width:calc(100% - 130px - 20px); margin-left:20px; font-size:16px; font-weight:400; color:#666; line-height:1.3; padding:0 150px 0 25px; word-break:break-word !important; }
.board-view .viewCont .attach li a i { font-size:16px; vertical-align:middle; margin-right:6px; }
.board-view .viewCont .attach li a > i { position:absolute; left:0; top:2px; }
.board-view .viewCont .attach li a:hover { color:var(--subColor); }
.board-view .viewCont .attach li a span { position:absolute; right:30px; top:0; font-weight:300; }
.board-view .btn_pn { display:flex; align-items:center; justify-content:space-between; gap:0 20px; padding-top:60px; border-top:2px solid #000; }
.board-view .btn_pn dl { width:calc((100% - 120px - 380px) / 2); display:flex; }
.board-view .btn_pn dt { position:relative; width:120px; } 
.board-view .btn_pn dt:before { content:""; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:19px; height:15px; background:url(/img/sub/btn_pn.svg) center center no-repeat; } 
.board-view .btn_pn dt span { font-size:19px; font-weight:600; color:#333; line-height:1.3; display:inline-block; padding-left:40px; }
.board-view .btn_pn dd { width:calc(100% - 120px); display:flex; align-items:center; }
.board-view .btn_pn dd a { font-size:19px; font-weight:300; color:#555; min-height:20px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.board-view .btn_pn dl:last-child { flex-direction:row-reverse; }
.board-view .btn_pn dl:last-child dt { text-align:right }
.board-view .btn_pn dl:last-child dt span { padding-left:0; padding-right:40px; }
.board-view .btn_pn dl:last-child dt:before { transform:translateY(-50%) rotate(180deg); left:unset; right:0; }
.board-view .btn_pn dl:last-child dd { justify-content:flex-end; }
.board-view .btn_pn .btnbox { margin:0 !important; }
.board-view .btn_pn .btnbox a,
.board-view .btn_pn .btnbox a span { width:380px; margin:0 !important; }
@media screen and (max-width:1280px){
	.board-view .top-box { padding:0 0 50px; }
	.board-view .top-box .title { font-size:32px; }
	.board-view .top-box .info { margin-top:15px; }
	.board-view .top-box .txt { font-size:16px; }
	.board-view .top-box .txt:not(:last-child) { margin-right:25px; }
	.board-view .viewCont .contents { padding:40px 0; min-height:250px; }
	.board-view .viewCont .attach { margin-top:50px; padding:30px 0; }
	.board-view .viewCont .attach li:not(:last-child) { margin-bottom:20px; }
	.board-view .viewCont .attach li strong { width:120px; }
	.board-view .viewCont .attach li a { width:calc(100% - 120px - 20px); }
	.board-view .btn_pn { margin-top:40px; }
	.board-view .btn_pn dl { width:calc((100% - 130px - 20px) / 2); }
	.board-view .btn_pn dt { width:120px; } 
	.board-view .btn_pn dd { width:calc(100% - 120px); }
	.board-view .btn_pn dt span,
	.board-view .btn_pn dd a { font-size:18px; }
	.board-view .btn_pn .btnbox a,
	.board-view .btn_pn .btnbox a span { width:260px; margin:0 !important; }
}
@media screen and (max-width:1024px){
	.board-view .top-box { padding:0 0 40px; border-bottom:1px solid #000; }
	.board-view .top-box .title { font-size:26px; }
	.board-view .top-box .info { margin-top:10px; }
	.board-view .top-box .txt { font-size:15px; }
	.board-view .top-box .txt:not(:last-child) { margin-right:20px; }
	.board-view .top-box .txt strong { margin-right:5px; }
	.board-view .viewCont .contents { padding:30px 0; min-height:200px; }
	.board-view .viewCont .attach { margin-top:40px; padding:25px 0; }
	.board-view .viewCont .attach li:not(:last-child) { margin-bottom:15px; }
	.board-view .viewCont .attach li strong { width:100px; font-size:15px; }
	.board-view .viewCont .attach li a { width:calc(100% - 100px - 20px); font-size:15px; padding-right:110px; }
	.board-view .viewCont .attach li a i { font-size:15px; margin-right:5px; }
	.board-view .viewCont .attach li a > i { top:1px; }
	.board-view .viewCont .attach li a span { right:20px; }
	.board-view .btn_pn { padding-top:0; flex-wrap:wrap; border-top:1px solid #000; }
	.board-view .btn_pn dl { width:100%; border-bottom:1px solid #ccc; padding:20px 0; }
	.board-view .btn_pn dt { width:100px; } 
	.board-view .btn_pn dt:before { display:none }
	.board-view .btn_pn dd { width:calc(100% - 100px); }
	.board-view .btn_pn dt span { padding-left:20px; }
	.board-view .btn_pn dt span,
	.board-view .btn_pn dd a { font-size:17px; }
	.board-view .btn_pn .btnbox { order:3; width:100%; margin-top:40px !important; }
	.board-view .btn_pn .btnbox a,
	.board-view .btn_pn .btnbox a span { width:180px; margin:0 !important; }
	.board-view .btn_pn dl:last-child { flex-direction:row; }
	.board-view .btn_pn dl:last-child dt { text-align:left }
	.board-view .btn_pn dl:last-child dt span { padding-left:20px; padding-right:0; }
	.board-view .btn_pn dl:last-child dd { justify-content:flex-start; }
}
@media screen and (max-width:640px){
	.board-view .top-box { padding:0 0 30px; }
	.board-view .top-box .title { font-size:20px; }
	.board-view .top-box .info { margin-top:8px; }
	.board-view .top-box .txt:not(:last-child) { margin-right:15px; }
	.board-view .viewCont .contents { padding:20px 0; min-height:150px; }
	.board-view .viewCont .attach { margin-top:30px; padding:20px 5px; }
	.board-view .viewCont .attach li:not(:last-child) { margin-bottom:10px; }
	.board-view .viewCont .attach li strong { display:none }
	.board-view .viewCont .attach li a { width:100%; padding-left:24px; margin-left:0; }
	.board-view .viewCont .attach li a > i { top:0; }
	.board-view .viewCont .attach li a span { right:0; }
	.board-view .btn_pn dl:not(:last-child) { margin-bottom:5px; }
	.board-view .btn_pn dt { width:85px; } 
	.board-view .btn_pn dd { width:calc(100% - 85px); }
	.board-view .btn_pn dt span,
	.board-view .btn_pn dd a { font-size:16px; }
}

/* animation */
.board-view { opacity:0; }
.board-view.subOn { animation:ani_4 0.5s 0.3s; animation-fill-mode:both; }


/* page */
.page { margin:125px auto 0 auto; text-align:center; padding:0; } 
.page a { transition:all 0.3s; position:relative; font-family:var(--mainFont); font-size:18px; line-height:35px; font-weight:500; color:#ccc; border:none; padding:0; min-width:20px; margin:0 10px; display:inline-block; }
.page ul { display:inline-block; }
.page li { display:inline-block; vertical-align:middle; margin:0 3px; }
.page li.on a { font-weight:500; color:#111; background:none; border:none; padding:0 4px; border-radius:50px; }
.page li a:before { content:""; display:block; width:0; height:2px; background-color:#111; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:all 0.3s; }
.page li.on a:before { width:100%; }
.page li:hover a,
.page li a:hover { border:none; color:#111; }
.page li a:hover:before { width:100%; }
.page .btn_pn { display:inline-block; vertical-align:middle; padding:0; }
.page .btn_prev { display:inline-block; vertical-align:middle; height:35px; padding:0; width:35px; margin-right:8px; overflow:hidden; text-indent:-9999em; background:url(/img/sub/btn_b_prev.png) center center no-repeat; }
.page .btn_next { display:inline-block; vertical-align:middle; height:35px; padding:0; width:35px; margin-left:8px; overflow:hidden; border:none; text-indent:-9999em; background:url(/img/sub/btn_b_next.png) center center no-repeat;}
.page .btn_first { display:inline-block; vertical-align:middle; height:35px; padding:0; width:35px; margin-right:-10px; overflow:hidden; border:none; text-indent:-9999em; background:url(/img/sub/btn_b_first.png) center center no-repeat;}
.page .btn_last { display:inline-block; vertical-align:middle; height:35px; padding:0; width:35px; margin-left:-10px; overflow:hidden; border:none; text-indent:-9999em; background:url(/img/sub/btn_b_last.png) center center no-repeat;}
.page li span { color:#aaa; display:block; margin-top:-10px; font-weight:800; }

@media screen and (max-width:640px){
	.page { margin:80px auto 0 auto; }
	.page a { margin:0 2px; }
	.page .btn_prev { margin-right:0; }
	.page .btn_next { margin-left:0; }

}



.mov-popupbox { position:fixed; left:0; top:0; width:100%; height:100%; z-index:-11; opacity:0; visibility:hidden; transition:all 0.1s; }
.mov-popupbox.on { opacity:1; visibility:visible; z-index:9999; transition:all 0.3s; }
.mov-popupbox .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); }
.mov-popupbox .pop-body { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:22; padding:14px; max-width:960px; width:100%; background-color:#fff; border:6px solid #e5e5e5; border-radius:20px; }
.mov-popupbox .pop-body .imgbox { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.mov-popupbox .pop-body .imgbox:before { content:""; display:block; padding-bottom:56.5%; }
.mov-popupbox .pop-body .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.mov-popupbox .pop-body .btn_close { position:absolute; right:-5px; top:-45px; cursor:pointer; transition:all 0.5s; }
.mov-popupbox .pop-body .btn_close span { position:relative; width:25px; height:25px; display:block }
.mov-popupbox .pop-body .btn_close span:before { content:""; display:block; width:26px; height:2px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-45deg); border-radius:2px; }
.mov-popupbox .pop-body .btn_close span:after { content:""; display:block; width:26px; height:2px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg); border-radius:2px; }
.mov-popupbox .pop-body .btn_close:hover { transform:rotate(-180deg);}
.mov-popupbox .movbox { position:relative; overflow:hidden; }
.mov-popupbox .movbox:before { content:""; display:block; padding-bottom:56.5%; }
.mov-popupbox .movbox .btn-play { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3; cursor:pointer; }
.mov-popupbox .movbox .btn-play span { border:1px solid #fff; width:92px; height:92px; border-radius:92px; display:flex; justify-content:center; align-items:center; }
.mov-popupbox .movbox .btn-play span img { margin-left:2%; }
.mov-popupbox .mov { display:block; position:relative; width:100%; }
.mov-popupbox .mov:before { content:""; display:block; padding-bottom:56.5%; }
.mov-popupbox .youtube { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; overflow:hidden; border-radius:15px; }
@media screen and (max-width:640px){
	.mov-popupbox .pop-body { transform:translate(-50%, -50%); max-width:100%; padding:6px; border-width:3px; border-radius:10px; }
	.mov-popupbox .pop-body .imgbox img { height:auto; max-height:100%; max-width:100%; }
	.mov-popupbox .youtube { border-radius:8px; }
	.mov-popupbox .pop-body .btn_close { top:-40px; }
	.mov-popupbox .pop-body .btn_close span { width:23px; height:23px; }
	.mov-popupbox .pop-body .btn_close span:before,
	.mov-popupbox .pop-body .btn_close span:after { width:23px; }
}
@media screen and (max-width:500px){
	.mov-popupbox .pop-body { left:20px; transform:translate(0, -50%); width:calc(100% - 40px); }
	.mov-popupbox .pop-body .imgbox img { height:auto; max-height:100%; width:100%; max-width:100%; }
}
@media screen and (max-width:500px) and (max-height:720px) {
	.mov-popupbox .pop-body { left:20px; transform:translate(0, -50%); max-width:calc(100% - 40px); }
	.mov-popupbox .pop-body .imgbox img { height:auto; max-height:100%; width:100%; max-width:100%; }
}
@media screen and (max-height:800px){
	.mov-popupbox .pop-body .imgbox img { height:auto; max-height:100%; max-width:400px; }
}
@media screen and (min-width:500px) and (max-height:720px) {
	.mov-popupbox .pop-body { padding:6px; }
	.mov-popupbox .pop-body .imgbox img { max-width:300px; }
	.mov-popupbox .pop-body .btn_close { top:-40px; }
	.mov-popupbox .pop-body .btn_close span { width:23px; height:23px; }
	.mov-popupbox .pop-body .btn_close span:before,
	.mov-popupbox .pop-body .btn_close span:after { width:23px; }
}