@charset "utf-8";

.subtitleTop .box,
.subtitleTop .bg { height:550px; }
.subtitleTop .box { position:relative; }
.subtitleTop .bg { background-position:center center; background-repeat:no-repeat; background-size:cover; }
.subtitleTop .subTopBox1 .bg { background-image:url(/img/sub/subTop_bg1.jpg); }
.subtitleTop .subTopBox2 .bg { background-image:url(/img/sub/subTop_bg2.jpg); }
.subtitleTop .subTopBox3 .bg { background-image:url(/img/sub/subTop_bg3.jpg); }
.subtitleTop .subTopBox4 .bg { background-image:url(/img/sub/subTop_bg4.jpg); }
.subtitleTop .subTopBox10 .bg { background-image:url(/img/sub/subTop_bg10.jpg); }
.subtitleTop .subTopBox11 .bg { background-image:url(/img/sub/subTop_bg10.jpg); }
.subtitleTop .subTitle { position:absolute; bottom:60px;  }
.subtitleTop .subTitle h2 { color:#fff; font-size:84px; font-weight:700; line-height:1.3; }
.subtitleTop .subTitle h2 span { font-weight:700; }
.subtitleTop .subTitle h2 span > span { min-width:22px; }
.subtitleTop .subTitle p { margin-top:20px; color:#fff; font-size:20px; font-weight:300; line-height:1.3; }
.subtitleTop .subTitle p span { font-weight:300; }
@media screen and (max-width:1440px){
	.subtitleTop .box,
	.subtitleTop .bg { height:480px; }
    .subtitleTop .subTitle h2 { font-size:60px; }
	.subtitleTop .subTitle h2 span > span { min-width:18px; }
    .subtitleTop .subTitle p { margin-top:15px; font-size:18px; }
}
@media screen and (max-width:1024px){
	.subtitleTop .box,
	.subtitleTop .bg { height:380px; }
    .subtitleTop .subTitle h2 { font-size:40px; }
	.subtitleTop .subTitle h2 span > span { min-width:12px; }
    .subtitleTop .subTitle p { margin-top:12px; font-size:16px; }
}
@media screen and (max-width:640px){
	.subtitleTop .box,
	.subtitleTop .bg { height:340px; }
    .subtitleTop .subTitle h2 { font-size:30px; }
	.subtitleTop .subTitle h2 span > span { min-width:8px; }
    .subtitleTop .subTitle p { margin-top:10px; font-size:15px; }
}


/* animation */
.subtitleTop .subTitle h2 { overflow:hidden; }
.subtitleTop .subTitle h2 span > span { opacity:0; display:inline-block; animation:blur_txt 0.8s 0.3s; animation-fill-mode:both; }
.subtitleTop .subTitle p { overflow:hidden; }
.subtitleTop .subTitle p span { opacity:0; display:block; animation:ani_3 0.5s 0.5s; animation-fill-mode:both; }

#lnb { position:relative; border-bottom:1px solid #ddd; z-index:5; }
#lnb .tit { display:none }
#lnb .subDepth > ul { max-width:1300px; margin:0 auto; display:flex; } 
#lnb .subDepth > ul > li { height:65px; }
#lnb .subDepth > ul.m2 > li { width:50%; }
#lnb .subDepth > ul.m3 > li { width:33.333%; }
#lnb .subDepth > ul.m4 > li { width:25%; }
#lnb .subDepth > ul.m5 > li { width:20%; }
#lnb .subDepth > ul.m6 > li { width:16.66%; }
#lnb .subDepth > ul > li a { position:relative; height:100%; width:100%; display:flex; justify-content:center; align-items:center; text-align:center; color:#888; font-size:18px; font-weight:500; transition:all 0.3s;  }
#lnb .subDepth > ul > li a:before { content:""; display:block; width:0; height:2px; background:var(--mainColor1); position:absolute; left:0; bottom:-1px; transition:all 0.3s; }
#lnb .subDepth > ul > li a:hover:before,
#lnb .subDepth > ul > li.on a:before { width:100%; }
#lnb .subDepth > ul > li a:hover,
#lnb .subDepth > ul > li.on a { color:var(--mainColor1); }
@media screen and (max-width:1024px){
	#lnb .subDepth > ul > li { height:60px; }
	#lnb .subDepth > ul > li a { font-size:16px; }
}
@media screen and (max-width:640px){
	#lnb { background:#fff }
	#lnb .tit { position:relative; display:block; height:55px; display:flex; align-items:center; text-align:center; font-size:18px; padding:0 20px; cursor:pointer; }
	#lnb .tit:before { content:"\e943"; font-family:'xeicon'; color:var(--mainColor1); font-size:12px; font-weight:500; display:block; position:absolute; right:20px; top:50%; transform:translateY(-50%); transition:all 0.3s; }
	#lnb .tit.ov:before { transform:translateY(-50%) rotate(180deg); }
	#lnb .tit span { font-weight:500; color:var(--mainColor1); }
	#lnb .subDepth { display:none; position:absolute; left:0; top:55px; width:100%; background:#fff; border-top:1px solid #ddd; }
	#lnb .subDepth > ul.m2 > li,
	#lnb .subDepth > ul.m3 > li,
	#lnb .subDepth > ul.m4 > li,
	#lnb .subDepth > ul.m5 > li,
	#lnb .subDepth > ul.m6 > li { width:100%; }
	#lnb .subDepth > ul > li { height:55px; border-bottom:1px solid rgba(0,0,0,0.05); }
	#lnb .subDepth > ul > li:last-child { border-bottom:1px solid #ddd; }
	#lnb .subDepth > ul { display:block; } 
	#lnb .subDepth > ul > li a { justify-content:flex-start; padding:0 20px; }
	#lnb .subDepth > ul > li a:before { display:none }
}

#contents { position:relative; padding:150px 0 0; }
@media screen and (max-width:1440px){
	#contents:before { top:20%; width:340px; height:408px; background-size:340px auto }
}
@media screen and (max-width:1024px){
    #contents { padding:100px 0 0; }
}
@media screen and (max-width:640px){
    #contents { padding:60px 0 0; }
}

.tabmenu { text-align:center; }
.tabmenu li { display:inline-block; }
.tabmenu li:not(:last-child) { margin-right:35px; }
.tabmenu li a { position:relative; color:#111; font-size:17px; font-weight:300; }
.tabmenu li a:after { content:""; display:block; width:0; height:2px; background:#111; position:absolute; left:0; bottom:-4px; }
.tabmenu li.on a { font-weight:500; }
.tabmenu li.on a:after { width:100%; }

.sTitle { margin-bottom:80px; }
.sTitle p span { color:var(--mainColor1); font-size:20px; font-weight:500; line-height:1.3; text-transform:uppercase; }
.sTitle h3 { margin-top:15px; }
.sTitle h3 span { font-family:var(--mainFont); color:#212121; font-size:64px; font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
@media screen and (max-width:1340px){
	.sTitle { margin-bottom:60px; }
	.sTitle p span { font-size:18px; }
	.sTitle h3 { margin-top:12px; }
	.sTitle h3 span { font-size:50px; }
}
@media screen and (max-width:1024px){
	.sTitle { margin-bottom:40px; }
	.sTitle p span { font-size:16px; }
	.sTitle h3 { margin-top:10px; }
	.sTitle h3 span { font-size:38px; }
}
@media screen and (max-width:640px){
	.sTitle { margin-bottom:30px; }
	.sTitle p span { font-size:14px; }
	.sTitle h3 { margin-top:7px; }
	.sTitle h3 span { font-size:30px; }
}

/* animation */
.sTitle p { overflow:hidden; }
.sTitle p span { opacity:0; display:block; animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
.sTitle h3 { overflow:hidden; }
.sTitle h3 span { opacity:0; display:block; animation:ani_3 0.8s 0.7s; animation-fill-mode:both; }

/* company */
.company-box .greeting-box { padding-bottom:200px; }
.company-box .greeting-box .txtbox p:not(:last-child) { margin-bottom:40px; }
.company-box .greeting-box .txtbox p { color:#444; font-size:20px; font-weight:400; line-height:1.6 }
.company-box .greeting-box .txtbox p strong { color:#212121; font-size:30px; font-weight:600; }
.company-box .greeting-box .imgbox { position:relative; margin-top:80px; }
.company-box .greeting-box .imgbox img { border-radius:20px; max-width:100% }
@media screen and (max-width:1340px){
	.company-box .greeting-box .txtbox p:not(:last-child) { margin-bottom:30px; }
	.company-box .greeting-box .txtbox p { font-size:18px; }
	.company-box .greeting-box .txtbox p br { display:none }
	.company-box .greeting-box .txtbox p strong { font-size:26px; }
	.company-box .greeting-box .imgbox { margin-top:60px; }
}
@media screen and (max-width:1024px){
	.company-box .greeting-box { padding-bottom:150px; }
	.company-box .greeting-box .txtbox p:not(:last-child) { margin-bottom:20px; }
	.company-box .greeting-box .txtbox p { font-size:16px; }
	.company-box .greeting-box .txtbox p strong { font-size:22px; }
	.company-box .greeting-box .imgbox { margin-top:40px; }
	.company-box .greeting-box .imgbox img { border-radius:10px; }
}
@media screen and (max-width:640px){
	.company-box .greeting-box { padding-bottom:120px; }
	.company-box .greeting-box .txtbox p strong { font-size:18px; }
}

/* animation */
.company-box .greeting-box .txtbox p { opacity:0; }
.company-box .greeting-box .txtbox.subOn p:nth-child(1) { animation:ani_4 0.8s 0.1s; animation-fill-mode:both; }
.company-box .greeting-box .txtbox.subOn p:nth-child(2) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.company-box .greeting-box .txtbox.subOn p:nth-child(3) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
.company-box .greeting-box .txtbox.subOn p:nth-child(4) { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }
.company-box .greeting-box .txtbox.subOn p:nth-child(5) { animation:ani_4 0.8s 1.3s; animation-fill-mode:both; }
/*
.company-box .greeting-box .imgbox { opacity:0; }
.company-box .greeting-box .imgbox.subOn{ animation:bgs3_1 0.8s 0.5s; animation-fill-mode:both; }
*/
.company-box .greeting-box .imgbox:after { content:""; display:block; width:50%; height:100%; background:#fff; position:absolute; left:0; top:0; }
.company-box .greeting-box .imgbox:before { content:""; display:block; width:50%; height:100%; background:#fff; position:absolute; right:0; top:0; }
.company-box .greeting-box .imgbox.subOn:after { animation:ani_w50 1.0s 0.4s; animation-fill-mode:both; }
.company-box .greeting-box .imgbox.subOn:before { animation:ani_w50 1.0s 0.4s; animation-fill-mode:both; }


.company-box .history-box { background:#f7f9fb; padding:150px 100px }
.company-box .history-list { position:relative; }
.company-box .history-list .listbox { position:relative; }
.company-box .history-list .listbox > ul > li { position:relative; width:50%; text-align:right; padding-right:250px; }
.company-box .history-list .listbox > ul > li:not(:last-child) { margin-bottom:100px; }
.company-box .history-list .listbox > ul > li:nth-child(2n) { margin-left:50%; text-align:left; padding-right:0; padding-left:250px; }
.company-box .history-list .listbox > ul > li:before { transition:.3s; background-color:#d5dfef; content:''; display:block; position:absolute; top:15px; right:0; z-index:2; width:1px; height:1px; border-radius:50%; }
.company-box .history-list .listbox > ul > li.effect:before { width:24px; height:24px; right:-12px; top:3px; }
.company-box .history-list .listbox > ul > li:nth-child(2n):before { left:0; right:unset; }
.company-box .history-list .listbox > ul > li:nth-child(2n).effect:before { left:-12px; }
.company-box .history-list .listbox > ul > li:after { transition:.3s; content:''; display:block; position:absolute; top:10px; right:-5px; z-index:2; width:10px; height:10px; background-color:#ccc; border-radius:50%; }
.company-box .history-list .listbox > ul > li.effect:after { background-color:#4673b8; }
.company-box .history-list .listbox > ul > li:nth-child(2n):after { left:-5px; right:unset; }
.company-box .history-list .listbox > ul > li dt { color:#212121; font-size:45px; font-weight:600; letter-spacing:0.06em; }
.company-box .history-list .listbox > ul > li dt span { color:#00348c; font-weight:600 }
.company-box .history-list .listbox > ul > li dd { margin-top:20px; }
.company-box .history-list .listbox > ul > li dd li { position:relative; padding-right:30px; font-family:var(--mainFont); color:#212121; font-size:20px; font-weight:500; line-height:1.3 }
.company-box .history-list .listbox > ul > li:nth-child(2n) dd li { padding-right:0; padding-left:30px; }
.company-box .history-list .listbox > ul > li dd li:not(:last-child) { margin-bottom:16px; }
.company-box .history-list .listbox > ul > li dd li:before { content:''; display:block; position:absolute; top:8px; right:0; width:10px; height:10px; background-color:#00348c; }
.company-box .history-list .listbox > ul > li:nth-child(2n) dd li:before { left:0; right:unset; }
.company-box .history-list .progressbar { position:absolute; top:10px; left:50%; width:1px; height:calc(100% - 20px); background-color:#e1e1e1; overflow:hidden; }
.company-box .history-list .progress { position: absolute; left:0; top:0; width:1px; height:0; background:#4673b8; transition:.5s; }
@media screen and (max-width:1340px){
	.company-box .history-box { padding-left:20px; padding-right:20px; }
}
@media screen and (max-width:1340px){
	.company-box .history-box { padding:120px 20px }
	.company-box .history-list .listbox > ul > li { padding-right:150px; }
	.company-box .history-list .listbox > ul > li:not(:last-child) { margin-bottom:80px; }
	.company-box .history-list .listbox > ul > li:nth-child(2n) { padding-left:150px; }
	.company-box .history-list .listbox > ul > li dt { font-size:38px; }
	.company-box .history-list .listbox > ul > li dd { margin-top:20px; }
	.company-box .history-list .listbox > ul > li dd li { padding-left:30px; font-size:18px; }
	.company-box .history-list .listbox > ul > li dd li:not(:last-child) { margin-bottom:12px; }
}
@media screen and (max-width:1024px){
	.company-box .history-box { padding:100px 20px }
	.company-box .history-list .listbox > ul > li { padding-right:90px; }
	.company-box .history-list .listbox > ul > li:not(:last-child) { margin-bottom:70px; }
	.company-box .history-list .listbox > ul > li:nth-child(2n) { padding-left:90px; }
	.company-box .history-list .listbox > ul > li dt { font-size:32px; }
	.company-box .history-list .listbox > ul > li dd { margin-top:18px; }
	.company-box .history-list .listbox > ul > li dd li { padding-left:20px; font-size:17px; }
	.company-box .history-list .listbox > ul > li:nth-child(2n) dd li { padding-left:20px; }
	.company-box .history-list .listbox > ul > li dd li:not(:last-child) { margin-bottom:10px; }
	.company-box .history-list .listbox > ul > li dd li:before { top:7px; width:8px; height:8px; }
	.company-box .history-list .listbox > ul > li:nth-child(2n+1) dd li { padding-right:20px; }
}
@media screen and (max-width:860px){
	.company-box .history-list .listbox > ul > li,
	.company-box .history-list .listbox > ul > li:nth-child(2n) { text-align:left; padding:0 0 0 50px; margin-left:0; width:100%; }
	.company-box .history-list .listbox > ul > li:not(:last-child) { margin-bottom:50px; }
	.company-box .history-list .listbox > ul > li:before,
	.company-box .history-list .listbox > ul > li:nth-child(2n):before { left:25px }
	.company-box .history-list .listbox > ul > li.effect:before,
	.company-box .history-list .listbox > ul > li:nth-child(2n).effect:before { left:15px; width:20px; height:20px; }
	.company-box .history-list .listbox > ul > li:after,
	.company-box .history-list .listbox > ul > li:nth-child(2n):after { left:22px; width:7px; height:7px; }
	.company-box .history-list .listbox > ul > li dt { font-size:24px; }
	.company-box .history-list .listbox > ul > li dd { margin-top:15px; }
	.company-box .history-list .listbox > ul > li dd li,
	.company-box .history-list .listbox > ul > li:nth-child(2n) dd li { padding-left:15px; font-size:16px; }
	.company-box .history-list .listbox > ul > li dd li:not(:last-child) { margin-bottom:16px; }
	.company-box .history-list .listbox > ul > li dd li:before,
	.company-box .history-list .listbox > ul > li:nth-child(2n) dd li:before { top:6px; left:0; width:5px; height:5px; }
	.company-box .history-list .progressbar { left:25px; }
}
@media screen and (max-width:640px){
	.company-box .history-box { padding:80px 20px 80px 0 }
}

/* animation */
.company-box .history-list .listbox > ul > li dl { opacity:0; }
.company-box .history-list .listbox > ul > li.subOn dl { animation:ani_1 0.8s 0.1s; animation-fill-mode:both; }
.company-box .history-list .listbox > ul > li.subOn:nth-child(2n+1) dl { animation:ani_2 0.8s 0.1s; animation-fill-mode:both; }
@media screen and (max-width:960px){
	.company-box .history-list .listbox > ul > li.subOn dl,
	.company-box .history-list .listbox > ul > li.subOn:nth-child(2n+1) dl { animation:ani_1 0.8s 0.1s; animation-fill-mode:both; }
}


.company-box .location-box .locationCont { padding:150px 0 }
.company-box .location-box .locationCont:nth-child(2n+1) { background:#f7f9fb; }
.company-box .location-box .locationCont h4 { color:#212121; font-size:40px; font-weight:700; line-height:1.3; letter-spacing:-0.05em }
.company-box .location-box .locationCont h4 span { font-weight:700; }
.company-box .location-box .locationCont .map { position:relative; margin-top:30px; overflow:hidden; border-radius:15px; }
.company-box .location-box .locationCont .map:after { content:''; display:block; padding-bottom:41.6%; }
.company-box .location-box .locationCont .map iframe { position:absolute; top:0; left:0; top:-120px; width:100%; height:calc(100% + 240px); }
.company-box .location-box .info-box .address-box { margin-top:40px; }
.company-box .location-box .info-box .address-box p { color:#212121; font-size:40px; font-weight:700; line-height:1.3; }
.company-box .location-box .info-box .address-box > span { display:block; margin-top:10px; color:#666; font-size:18px; font-weight:400; line-height:1.3; }
.company-box .location-box .info-box > ul { margin-top:30px; display:flex; flex-wrap:wrap; gap:20px 0}
.company-box .location-box .info-box > ul > li:not(:last-child) { width:330px; }
.company-box .location-box .info-box > ul > li { display:flex; align-items:center; }
.company-box .location-box .info-box > ul > li .txt { padding-left:15px; }
.company-box .location-box .info-box > ul > li .txt strong { display:block; color:#212121; font-size:18px; font-weight:500; line-height:1.3; }
.company-box .location-box .info-box > ul > li .txt span { display:block; margin-top:5px; color:#666; font-size:18px; font-weight:400; line-height:1.3; }
@media screen and (max-width:1340px){
	.company-box .location-box .locationCont { padding:120px 0 }
	.company-box .location-box .locationCont h4 { font-size:32px; }
	.company-box .location-box .locationCont .map { margin-top:25px; }
	.company-box .location-box .info-box .address-box { margin-top:35px; }
	.company-box .location-box .info-box .address-box p { font-size:32px; }
	.company-box .location-box .info-box .address-box > span { font-size:18px; }
	.company-box .location-box .info-box > ul { margin-top:25px; }
	.company-box .location-box .info-box > ul > li:not(:last-child) { width:300px; }
	.company-box .location-box .info-box > ul > li .txt { padding-left:15px; }
	.company-box .location-box .info-box > ul > li .txt strong,
	.company-box .location-box .info-box > ul > li .txt span { font-size:18px; }
}
@media screen and (max-width:1024px){
	.company-box .location-box .locationCont { padding:100px 0 }
	.company-box .location-box .locationCont h4 { font-size:24px; }
	.company-box .location-box .locationCont .map { margin-top:20px; border-radius:8px; }
	.company-box .location-box .locationCont .map:after { padding-bottom:35%; }
	.company-box .location-box .info-box .address-box { margin-top:30px; }
	.company-box .location-box .info-box .address-box p { font-size:24px; }
	.company-box .location-box .info-box .address-box > span { font-size:17px; }
	.company-box .location-box .info-box > ul { margin-top:25px; }
	.company-box .location-box .info-box > ul > li:not(:last-child) { width:300px; }
	.company-box .location-box .info-box > ul > li .txt { padding-left:15px; }
	.company-box .location-box .info-box > ul > li .txt strong,
	.company-box .location-box .info-box > ul > li .txt span { font-size:17px; }
}
@media screen and (max-width:640px){
	.company-box .location-box .locationCont { padding:80px 0 }
	.company-box .location-box .locationCont h4 { font-size:20px; }
	.company-box .location-box .locationCont .map { margin-top:20px; border-radius:8px; }
	.company-box .location-box .locationCont .map:after { padding-bottom:55%; }
	.company-box .location-box .info-box .address-box { margin-top:25px; }
	.company-box .location-box .info-box .address-box p { font-size:18px; }
	.company-box .location-box .info-box .address-box > span { font-size:16px;}
	.company-box .location-box .info-box > ul { margin-top:25px; }
	.company-box .location-box .info-box > ul > li,
	.company-box .location-box .info-box > ul > li:not(:last-child) { width:50%; }
	.company-box .location-box .info-box > ul > li .txt { padding-left:12px; }
	.company-box .location-box .info-box > ul > li .txt strong,
	.company-box .location-box .info-box > ul > li .txt span { font-size:16px; }
	.company-box .location-box .info-box > ul > li .txt span { margin-top:5px; }
	.company-box .location-box .info-box > ul > li figure img { width:44px; }
}
@media screen and (max-width:460px){
	.company-box .location-box .info-box > ul > li,
	.company-box .location-box .info-box > ul > li:not(:last-child) { width:100%; }
}

/* animation */
.company-box .location-box .locationCont h4 { overflow:hidden }
.company-box .location-box .locationCont h4 span { display:block; opacity:0; }
.company-box .location-box .locationCont.subOn h4 span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.company-box .location-box .locationCont .map { opacity:0; }
.company-box .location-box .locationCont.subOn .map { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.company-box .location-box .info-box .address-box { opacity:0; }
.company-box .location-box .info-box.subOn .address-box { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.company-box .location-box .info-box > ul > li { opacity:0; }
.company-box .location-box .info-box.subOn ul > li:nth-child(1) { animation:ani_2 0.6s 0.6s; animation-fill-mode:both; }
.company-box .location-box .info-box.subOn ul > li:nth-child(2) { animation:ani_2 0.6s 0.9s; animation-fill-mode:both; }
.company-box .location-box .info-box.subOn ul > li:nth-child(3) { animation:ani_2 0.6s 1.2s; animation-fill-mode:both; }
.company-box .location-box .info-box.subOn ul > li:nth-child(4) { animation:ani_2 0.6s 1.5s; animation-fill-mode:both; }

.ci-box { overflow:hidden }
.ci-box .top .ci { display:flex; gap:60px; }
.ci-box .top .ci picture { width:calc((100% - 60px)/ 2); border:1px solid #d9d9d9; border-radius:15px; }
.ci-box .top .ci picture img { max-width:100%; }
.ci-box .listbox { margin-top:80px; }
.ci-box .listbox dl { display:flex; flex-wrap:wrap; padding-bottom:150px; }
.ci-box .listbox dt { width:46%; color:#212121; font-size:40px; font-weight:600; line-height:1.3; letter-spacing:-0.05em; text-transform:uppercase; }
.ci-box .listbox dt span { font-weight:600; }
.ci-box .listbox dd { width:54%; }
.ci-box .listbox dd picture img { max-width:100%; }
.ci-box .listbox dd .txt p:not(:last-child) { margin-bottom:25px; }
.ci-box .listbox dd .txt p { color:#212121; font-size:20px; font-weight:300; line-height:1.5; }
.ci-box .listbox dd .txt p strong { font-weight:600 }
.ci-box .listbox dd .color:not(:last-child) { margin-bottom:60px; }
.ci-box .listbox dd .color h4 { color:#212121; font-size:26px; font-weight:600; line-height:1.3; }
.ci-box .listbox dd .color ul { margin-top:30px; display:flex; gap:100px; }
.ci-box .listbox dd .color li { width:calc((100% - 200px) / 3); }
.ci-box .listbox dd .color li .c-color { width:140px; height:140px; border-radius:140px; }
.ci-box .listbox dd .color li .mc1 { background:#4673b8; }
.ci-box .listbox dd .color li .mc2 { background:#00348b; }
.ci-box .listbox dd .color li .mc3 { background:#004; }
.ci-box .listbox dd .color li .sc1 { background:#212121; }
.ci-box .listbox dd .color li .sc2 { background:#fff; border:1px solid #d9d9d9; }
.ci-box .listbox dd .color li .stxt { margin-top:30px; font-family:var(--mainFont); color:#212121; font-size:17px; font-weight:300; line-height:1.35; }
.ci-box .listbox dd .font-box .KoPub,
.ci-box .listbox dd .font-box .KoPub * { font-family:'KoPub Dotum'; letter-spacing:-0.02em; }
.ci-box .listbox dd .font-box .Noto,
.ci-box .listbox dd .font-box .Noto * { font-family: 'Noto Sans KR'; letter-spacing:-0.02em; }
.ci-box .listbox dd .font-box .light,
.ci-box .listbox dd .font-box .light * { font-weight:300 }
.ci-box .listbox dd .font-box .medium,
.ci-box .listbox dd .font-box .medium * { font-weight:400 }
.ci-box .listbox dd .font-box .bold,
.ci-box .listbox dd .font-box .bold * { font-weight:700 }
.ci-box .listbox dd .font-box .Noto.medium,
.ci-box .listbox dd .font-box .Noto.medium * { font-weight:500 }
.ci-box .listbox dd .font-box .topStyle ul { display:flex; }
.ci-box .listbox dd .font-box .topStyle ul li { width:33.33% }
.ci-box .listbox dd .font-box .topStyle ul li span { color:#212121; font-size:22px; display:block; line-height:1.3; }
.ci-box .listbox dd .font-box .topStyle ul li span:not(:last-child) { margin-bottom:10px; }
.ci-box .listbox dd .font-box .txtStyle { display:flex; flex-wrap:wrap; }
.ci-box .listbox dd .font-box .txtStyle > div { width:50%; margin-top:80px; }
.ci-box .listbox dd .font-box .txtStyle .sbox { display:flex; align-items:center; }
.ci-box .listbox dd .font-box .txtStyle .sbox strong { letter-spacing:-0.08em; color:#212121; font-size:50px; line-height:1.3; }
.ci-box .listbox dd .font-box .txtStyle .sbox span { position:relative; color:#212121; font-size:18px; display:inline-block; line-height:1.6; margin-left:20px; padding-left:20px; }
.ci-box .listbox dd .font-box .txtStyle .sbox span:before { content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:50px; background:#a1a1a1; }
.ci-box .listbox dd .font-box .txtStyle .txt-1 { margin-top:20px; color:#212121; font-size:18px; line-height:1.6; }
.ci-box .listbox dd .font-box .txtStyle .txt-2 { margin-top:20px; color:#212121; font-size:18px; line-height:1.6; }
@media screen and (max-width:1340px){
	.ci-box .top .ci { gap:40px; }
	.ci-box .top .ci picture { width:calc((100% - 40px)/ 2); }
	.ci-box .listbox { margin-top:60px; }
	.ci-box .listbox dl { padding-bottom:130px; }
	.ci-box .listbox dt { font-size:32px; }
	.ci-box .listbox dd .txt p:not(:last-child) { margin-bottom:22px; }
	.ci-box .listbox dd .txt p { font-size:18px; }
	.ci-box .listbox dd .txt p br { display:none }
	.ci-box .listbox dd .color:not(:last-child) { margin-bottom:50px; }
	.ci-box .listbox dd .color h4 { font-size:22px; }
	.ci-box .listbox dd .color ul { margin-top:25px; gap:70px; }
	.ci-box .listbox dd .color li { width:calc((100% - 140px) / 3); }
	.ci-box .listbox dd .color li .c-color { width:120px; height:120px; }
	.ci-box .listbox dd .color li .stxt { margin-top:30px; font-size:17px; }
	.ci-box .listbox dd .font-box .topStyle ul li span { font-size:20px; }
	.ci-box .listbox dd .font-box .txtStyle > div { width:50%; margin-top:60px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox strong { font-size:44px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox span { font-size:17px; margin-left:18px; padding-left:18px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox span:before { height:44px; }
	.ci-box .listbox dd .font-box .txtStyle .txt-1,
	.ci-box .listbox dd .font-box .txtStyle .txt-2 { margin-top:16px; font-size:17px; }
}
@media screen and (max-width:1280px){
	.ci-box .listbox dt { width:36%; }
	.ci-box .listbox dd { width:64%; }
}
@media screen and (max-width:1024px){
	.ci-box .top .ci { gap:20px; }
	.ci-box .top .ci picture { width:calc((100% - 20px)/ 2); border-radius:8px; }
	.ci-box .listbox { margin-top:50px; }
	.ci-box .listbox dl { padding-bottom:90px; }
	.ci-box .listbox dt { font-size:26px; margin-bottom:30px; }
	.ci-box .listbox dt,
	.ci-box .listbox dd { width:100%; }
	.ci-box .listbox dd .txt p:not(:last-child) { margin-bottom:20px; }
	.ci-box .listbox dd .txt p { font-size:16px; }
	.ci-box .listbox dd .color:not(:last-child) { margin-bottom:50px; }
	.ci-box .listbox dd .color h4 { font-size:20px; }
	.ci-box .listbox dd .color ul { margin-top:20px; gap:50px; }
	.ci-box .listbox dd .color li { width:calc((100% - 100px) / 3); }
	.ci-box .listbox dd .color li .c-color { width:100px; height:100px; }
	.ci-box .listbox dd .color li .stxt { margin-top:20px; font-size:16px; }
	.ci-box .listbox dd .font-box .topStyle ul li span { font-size:18px; }
	.ci-box .listbox dd .font-box .topStyle ul li span:not(:last-child) { margin-bottom:8px; }
	.ci-box .listbox dd .font-box .txtStyle > div { width:50%; margin-top:50px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox strong { font-size:38px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox span { font-size:16px; margin-left:14px; padding-left:14px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox span:before { height:38px; }
	.ci-box .listbox dd .font-box .txtStyle .txt-1,
	.ci-box .listbox dd .font-box .txtStyle .txt-2 { margin-top:12px; font-size:16px; }
}
@media screen and (max-width:640px){
	.ci-box .top .ci { gap:10px; }
	.ci-box .top .ci picture { width:calc((100% - 10px)/ 2); }
	.ci-box .listbox { margin-top:40px; }
	.ci-box .listbox dl { padding-bottom:60px; }
	.ci-box .listbox dt { font-size:20px; margin-bottom:20px; }
	.ci-box .listbox dd .txt p:not(:last-child) { margin-bottom:12px; }
	.ci-box .listbox dd .color:not(:last-child) { margin-bottom:25px; }
	.ci-box .listbox dd .color h4 { font-size:18px; }
	.ci-box .listbox dd .color ul { margin-top:20px; gap:20px; flex-wrap:wrap; }
	.ci-box .listbox dd .color li { width:calc((100% - 20px) / 2); }
	.ci-box .listbox dd .color li .c-color { width:80px; height:80px; }
	.ci-box .listbox dd .color li .stxt { margin-top:15px; font-size:15px; }
	.ci-box .listbox dd .font-box .topStyle ul { flex-wrap:wrap; gap:20px 0; }
	.ci-box .listbox dd .font-box .topStyle ul li span { font-size:18px; }
	.ci-box .listbox dd .font-box .topStyle ul li { width:50% }
	.ci-box .listbox dd .font-box .topStyle ul li span:not(:last-child) { margin-bottom:0; }
	.ci-box .listbox dd .font-box .txtStyle > div { width:100%; margin-top:30px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox strong { font-size:30px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox span { font-size:15px; margin-left:12px; padding-left:12px; }
	.ci-box .listbox dd .font-box .txtStyle .sbox span:before { height:30px; }
	.ci-box .listbox dd .font-box .txtStyle .txt-1,
	.ci-box .listbox dd .font-box .txtStyle .txt-2 { margin-top:10px; font-size:15px; }
}

/* animation */
.ci-box .top .ci picture { opacity:0;}
.ci-box .top .ci.subOn picture { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.ci-box .top .ci.subOn picture:nth-child(1) { animation:ani_1 0.8s 0.3s; animation-fill-mode:both; }
.ci-box .listbox dt { overflow:hidden }
.ci-box .listbox dt span { opacity:0; display:block }
.ci-box .listbox .subOn dt span { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.ci-box .listbox dd { opacity:0; }
.ci-box .listbox .subOn dd { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }

.trading-box { padding-bottom:150px; overflow:hidden } 
.trading-box .listbox > ul > li:not(:last-child) { margin-bottom:80px; }
.trading-box .listbox > ul > li { display:flex; flex-wrap:wrap; align-items:flex-end; }
.trading-box .listbox > ul > li > div { width:50%; }
.trading-box .listbox > ul > li .imgbox .num { display:inline-block; padding:0 30px; font-size:135px; color:#fff; font-weight:700; line-height:1.5; background:var(--gradient, linear-gradient(90deg, #203453 0%, #4774B9 100%)); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.trading-box .listbox > ul > li .imgbox picture { position:relative; z-index:2; width:100%; height:100%; display:block; margin-top:-54px; }
.trading-box .listbox > ul > li .imgbox picture img { max-width:100%; border-radius:15px; }
.trading-box .listbox > ul > li .txtbox { text-align:right; padding:0 0 30px 30px; }
.trading-box .listbox > ul > li .txtbox figure { position:relative; display:inline-block; width:200px; height:200px; border-radius:200px; border:10px solid rgba(255, 255, 255, 0.5); backdrop-filter:blur(15px); background-position:center; background-color:lightgray; background-repeat:no-repeat; background-size:calc(100% + 20px); }
.trading-box .listbox > ul > li .txtbox dt { margin-top:40px; font-size:32px; color:#212121; font-weight:700; line-height:1.5; }
.trading-box .listbox > ul > li .txtbox dd { margin-top:20px; font-size:17px; color:#444; font-weight:400; line-height:1.6; }
.trading-box .listbox > ul > li:nth-child(2n) { flex-direction:row-reverse; }
.trading-box .listbox > ul > li:nth-child(2n) .imgbox { text-align:right; }
.trading-box .listbox > ul > li:nth-child(2n) .txtbox { text-align:left; padding:0 30px 30px 0; }
@media screen and (max-width:1340px){
	.trading-box { padding-bottom:120px; } 
	.trading-box .listbox > ul > li:not(:last-child) { margin-bottom:60px; }
	.trading-box .listbox > ul > li .imgbox .num { padding:0 25px; font-size:100px; }
	.trading-box .listbox > ul > li .imgbox picture { margin-top:-40px; }
	.trading-box .listbox > ul > li .txtbox { padding:0 0 30px 20px; }
	.trading-box .listbox > ul > li .txtbox figure { width:160px; height:160px; border:8px solid rgba(255, 255, 255, 0.5); background-size:calc(100% + 16px); }
	.trading-box .listbox > ul > li .txtbox dt { margin-top:30px; font-size:26px; }
	.trading-box .listbox > ul > li .txtbox dt br { display:none }
	.trading-box .listbox > ul > li .txtbox dd { margin-top:15px; font-size:17px; }
	.trading-box .listbox > ul > li:nth-child(2n) .txtbox { padding:0 20px 30px 0; }
}
@media screen and (max-width:1200px){
	.trading-box .listbox > ul > li .txtbox dd br { display:none }
}
@media screen and (max-width:1024px){
	.trading-box { padding-bottom:100px; } 
	.trading-box .listbox > ul > li:not(:last-child) { margin-bottom:50px; }
	.trading-box .listbox > ul > li .imgbox .num { padding:0 20px; font-size:68px; }
	.trading-box .listbox > ul > li .imgbox picture { margin-top:-28px; }
	.trading-box .listbox > ul > li .imgbox picture img { border-radius:8px; }
	.trading-box .listbox > ul > li .txtbox figure { width:110px; height:110px; border:6px solid rgba(255, 255, 255, 0.5); background-size:calc(100% + 12px); }
	.trading-box .listbox > ul > li .txtbox dt { margin-top:20px; font-size:20px; }
	.trading-box .listbox > ul > li .txtbox dd { margin-top:10px; font-size:16px; }
}
@media screen and (max-width:860px){
	.trading-box .listbox > ul > li .imgbox .num { padding:0 15px; font-size:50px; }
	.trading-box .listbox > ul > li .imgbox picture { margin-top:-20px; }
	.trading-box .listbox > ul > li .txtbox figure { width:80px; height:80px; }
	.trading-box .listbox > ul > li .txtbox dt { margin-top:10px; font-size:18px; }
	.trading-box .listbox > ul > li .txtbox dd { margin-top:5px; font-size:15px; }
}
@media screen and (max-width:640px){
	.trading-box { padding-bottom:80px; } 
}
@media screen and (max-width:560px){ 
	.trading-box .listbox > ul > li > div { width:100%; }
	.trading-box .listbox > ul > li:not(:last-child) { margin-bottom:20px; }
	.trading-box .listbox > ul > li:nth-child(2n) .imgbox { text-align:left; }
	.trading-box .listbox > ul > li .txtbox { text-align:left; margin-top:20px; padding:0; }
	.trading-box .listbox > ul > li:nth-child(2n) .txtbox { padding:0; }
}

/* animation */
.trading-box .listbox > ul > li .imgbox .num { opacity:0; }
.trading-box .listbox > ul > li.subOn .imgbox .num { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }
.trading-box .listbox > ul > li .imgbox picture:before { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; left:0; bottom:0; }
.trading-box .listbox > ul > li.subOn .imgbox picture:before { animation:ani_h100 1.0s 0.4s; animation-fill-mode:both; }
.trading-box .listbox > ul > li .txtbox figure { opacity:0; }
.trading-box .listbox > ul > li.subOn .txtbox figure { animation:bgs3_1 0.8s 0.8s; animation-fill-mode:both; }
.trading-box .listbox > ul > li .txtbox dl { opacity:0; }
.trading-box .listbox > ul > li.subOn .txtbox dl { animation:ani_1 0.8s 1.0s; animation-fill-mode:both; }
.trading-box .listbox > ul > li.subOn:nth-child(2n)  .txtbox dl { animation:ani_2 0.8s 1.0s; animation-fill-mode:both; }
@media screen and (max-width:560px){ 
	.trading-box .listbox > ul > li.subOn:nth-child(2n)  .txtbox dl { animation:ani_1 0.8s 1.0s; animation-fill-mode:both; }
}


.localization-box { padding-bottom:150px; }
.localization-box .listbox > ul { display:flex; flex-wrap:wrap; gap:20px; }
.localization-box .listbox > ul > li { position:relative; width:calc((100% - 40px) / 3); }
.localization-box .listbox > ul > li picture img { max-width:100%; border-radius:15px; }
.localization-box .listbox > ul > li .txt { position:absolute; left:0; bottom:30px; width:100%; padding:0 28px; font-size:24px; color:#fff; font-weight:700; line-height:1.3; }
.localization-box .listbox > ul > li .txt > span { font-weight:700; }
@media screen and (max-width:1340px){
	.localization-box { padding-bottom:120px; }
	.localization-box .listbox > ul > li .txt { bottom:25px; padding:0 25px; font-size:22px; }
}
@media screen and (max-width:1024px){
	.localization-box { padding-bottom:100px; }
	.localization-box .listbox > ul { gap:10px; }
	.localization-box .listbox > ul > li { width:calc((100% - 20px) / 3); }
	.localization-box .listbox > ul > li picture img { border-radius:8px; }
	.localization-box .listbox > ul > li .txt { bottom:20px; padding:0 20px; font-size:20px; }
}
@media screen and (max-width:640px){
	.localization-box { padding-bottom:80px; }
	.localization-box .listbox > ul > li { width:100%; }
	.localization-box .listbox > ul > li .imgbox { position:relative; }
	.localization-box .listbox > ul > li .imgbox:before { content:''; display:block; padding-bottom:110%; }
	.localization-box .listbox > ul > li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; max-width:100%; object-fit:cover; -o-object-fit:cover; }
	.localization-box .listbox > ul > li .txt { bottom:16px; padding:0 16px; font-size:18px; }
}

/* animation */
.localization-box .listbox > ul > li { opacity:0; }
.localization-box .listbox > ul > li.subOn:nth-child(1) { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(2) { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(3) { animation:ani_3 0.8s 0.8s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(4) { animation:ani_3 0.8s 1.1s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(5) { animation:ani_3 0.8s 1.4s; animation-fill-mode:both; }
.localization-box .listbox > ul > li .txt { overflow:hidden }
.localization-box .listbox > ul > li .txt > span { opacity:0; display:block }
.localization-box .listbox > ul > li.subOn:nth-child(1) .txt > span { animation:txtUp 0.8s 0.6s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(2) .txt > span { animation:txtUp 0.8s 0.9s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(3) .txt > span { animation:txtUp 0.8s 1.2s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(4) .txt > span { animation:txtUp 0.8s 1.5s; animation-fill-mode:both; }
.localization-box .listbox > ul > li.subOn:nth-child(5) .txt > span { animation:txtUp 0.8s 1.8s; animation-fill-mode:both; }

.injection-box .listbox { padding:150px 0; }
.injection-box .listbox:nth-child(2n+1) { background:#f7f9fb; }
.injection-box .listbox h4 { font-size:56px; color:#212121; font-weight:600; line-height:1.3; }
.injection-box .listbox h4 span { font-weight:600; }
.injection-box .listbox ul { margin-top:40px; display:flex; flex-wrap:wrap; gap:20px; }
.injection-box .listbox ul li { position:relative; }
.injection-box .listbox ul li span { position:absolute; left:0; bottom:15px; width:100%; padding:0 20px; font-size:20px; color:#fff; font-weight:700; line-height:1.3; font-family:var(--mainFont); }
.injection-box .listbox ul li img { border-radius:15px; max-width:100%; }
.injection-box .listbox:nth-child(1) ul li { width:calc((100% - 140px) / 8); }
.injection-box .listbox:nth-child(2) ul li { width:calc((100% - 100px) / 6); }
.injection-box .listbox:nth-child(3) ul li { width:calc((100% - 60px) / 4); }
@media screen and (max-width:1340px){
	.injection-box .listbox { padding:120px 0; }
	.injection-box .listbox h4 { font-size:42px; }
	.injection-box .listbox ul { margin-top:30px; }
	.injection-box .listbox ul li span { bottom:15px; padding:0 20px; font-size:18px; }
}
@media screen and (max-width:1024px){
	.injection-box .listbox { padding:100px 0; }
	.injection-box .listbox h4 { font-size:36px; }
	.injection-box .listbox ul { margin-top:20px; gap:10px; }
	.injection-box .listbox ul li span { bottom:10px; padding:0 15px; font-size:16px; }
	.injection-box .listbox ul li img { border-radius:8px; }
	.injection-box .listbox:nth-child(1) ul li { width:calc((100% - 50px) / 6); }
	.injection-box .listbox:nth-child(2) ul li { width:calc((100% - 30px) / 4); }
	.injection-box .listbox:nth-child(3) ul li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.injection-box .listbox { padding:50px 0; }
	.injection-box .listbox h4 { font-size:24px; }
	.injection-box .listbox ul { margin-top:15px; gap:10px; }
	.injection-box .listbox ul li span { padding:0 10px; font-size:15px; }
	.injection-box .listbox:nth-child(1) ul li { width:calc((100% - 30px) / 4); }
	.injection-box .listbox:nth-child(2) ul li { width:calc((100% - 20px) / 3); }
	.injection-box .listbox:nth-child(3) ul li { width:calc((100% - 10px) / 2); }
}

/* animation */
.injection-box .listbox h4 { overflow:hidden }
.injection-box .listbox h4 span { display:block; opacity:0; }
.injection-box .listbox.subOn h4 span { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.injection-box .listbox ul { opacity:0; }
.injection-box .listbox.subOn ul { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }

/* common */
.gw-list { position:relative; }
.gw-list .nav { position:absolute; top:0; left:30px; height:0; z-index:15; width:235px;  }
.gw-list.on .nav { position:sticky; top:42%; transform:translateY(-50%); display:block; }
.gw-list.on.off .nav { height:auto; margin-bottom:-68px; }
.gw-list .nav ul { width:100%; }
.gw-list .nav li { position:relative; padding-left:44px; display:flex; width:100%; height:34px; align-items:center; font-size:15px; color:#212121; line-height:1.3; letter-spacing:-0.08em; font-family:var(--mainFont); transition:all .3s; }
.gw-list .nav li strong { font-weight:500; opacity:0; transition:all .3s; }
.gw-list .nav li span.bar { display:inline-block; background:#808080; width:1px; height:12px; overflow:hidden; color:#808080; margin:-2px 3px 0; vertical-align:middle; }
.gw-list .nav li span.num { position:absolute; left:0; top:0; width:34px; height:34px; border:none; border-radius:34px; display:flex; align-items:center; justify-content:center;  }
.gw-list .nav li span.num:before { content:''; display:block; position:absolute; top:50%; left:50%; width:4px; height:4px; background:var(--mainColor1); border-radius:4px; }
.gw-list .nav li span.num i { font-size:14px; color:var(--mainColor1); font-weight:600; line-height:1.3; opacity:0; transition:all .3s; }
.gw-list .nav li.active span.num i,
.gw-list .nav li.active strong { opacity:1; }
.gw-list .nav li.active span.num { border:1px solid var(--mainColor1); }
.gw-list .nav li.active span.num:before { opacity:0; }
.gw-list .box { padding:150px 0; overflow:hidden }
.gw-list .box:nth-child(2n+1) { background:#f7f9fb; }
@media screen and (max-width:1450px){
	.gw-list .nav,
	.gw-list.on .nav,
	.gw-list.off .nav { display:none }
}
@media screen and (max-width:1340px){
	.gw-list .box { padding:120px 0; }
}
@media screen and (max-width:1024px){
	.gw-list .box { padding:100px 0; }
}
@media screen and (max-width:640px){
	.gw-list .box { padding:80px 0; }
}

.waterTreatment-box .wt-top { margin-top:-50px; padding-bottom:150px; }
.waterTreatment-box .wt-top .txt { font-size:22px; color:#212121; font-weight:400; line-height:1.6; }
.waterTreatment-box .wt-top .listbox { margin-top:80px; }
.waterTreatment-box .wt-top .listbox ul { margin-top:40px; display:flex; flex-wrap:wrap; gap:20px; }
.waterTreatment-box .wt-top .listbox ul li { position:relative; width:calc((100% - 60px) / 4); }
.waterTreatment-box .wt-top .listbox ul li strong { position:absolute; left:0; bottom:15px; width:100%; padding:0 20px; font-size:20px; color:#fff; font-weight:700; line-height:1.3; font-family:var(--mainFont); }
.waterTreatment-box .wt-top .listbox ul li img { border-radius:15px; max-width:100%; }
.waterTreatment-box .wt-list .box .listbox h4 { font-size:56px; color:#212121; font-weight:600; line-height:1.3; }
.waterTreatment-box .wt-list .box .listbox h4 span { font-weight:600; }
.waterTreatment-box .wt-list .box .listbox ul { margin-top:40px; display:flex; flex-wrap:wrap; gap:20px; }
.waterTreatment-box .wt-list .box .listbox ul li { position:relative; width:calc((100% - 40px) / 3); }
.waterTreatment-box .wt-list .box .listbox ul li strong { position:absolute; left:0; bottom:15px; width:100%; padding:0 20px; font-size:24px; color:#fff; font-weight:700; line-height:1.3; font-family:var(--mainFont); }
.waterTreatment-box .wt-list .box .listbox ul li img { border-radius:15px; max-width:100%; }
@media screen and (max-width:1340px){
	.waterTreatment-box .wt-top { padding-bottom:120px; }
	.waterTreatment-box .wt-top .txt { font-size:20px; }
	.waterTreatment-box .wt-top .listbox { margin-top:60px; }
	.waterTreatment-box .wt-top .listbox ul { margin-top:30px; }
	.waterTreatment-box .wt-top .listbox ul li strong { bottom:15px; padding:0 20px; font-size:18px; }
	.waterTreatment-box .wt-list .box .listbox h4 { font-size:46px; }
	.waterTreatment-box .wt-list .box .listbox ul { margin-top:20px;}
	.waterTreatment-box .wt-list .box .listbox ul li strong { bottom:15px; padding:0 20px; font-size:22px; }
}
@media screen and (max-width:1280px){
	.waterTreatment-box .wt-top .txt br { display:none }
	.waterTreatment-box .wt-top .txt .m_br { display:block }
}
@media screen and (max-width:1024px){
	.waterTreatment-box .wt-top { margin-top:-20px; padding-bottom:100px; }
	.waterTreatment-box .wt-top .txt { font-size:18px; }
	.waterTreatment-box .wt-top .listbox { margin-top:40px; }
	.waterTreatment-box .wt-top .listbox ul { margin-top:20px; gap:10px; }
	.waterTreatment-box .wt-top .listbox ul li { width:calc((100% - 30px) / 4); }
	.waterTreatment-box .wt-top .listbox ul li strong { bottom:10px; padding:0 15px; font-size:16px; }
	.waterTreatment-box .wt-list .box .listbox h4 { font-size:32px; }
	.waterTreatment-box .wt-list .box .listbox ul { margin-top:20px; gap:10px; }
	.waterTreatment-box .wt-list .box .listbox ul li { width:calc((100% - 20px) / 3); }
	.waterTreatment-box .wt-list .box .listbox ul li strong { bottom:10px; padding:0 15px; font-size:20px; }
	.waterTreatment-box .wt-top .listbox ul li img,
	.waterTreatment-box .wt-list .box .listbox ul li img { border-radius:8px; }
}
@media screen and (max-width:860px){
	.waterTreatment-box .wt-top .listbox ul li { width:calc((100% - 20px) / 3); }
	.waterTreatment-box .wt-list .box .listbox ul li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.waterTreatment-box .wt-top { padding-bottom:80px; }
	.waterTreatment-box .wt-top .txt { font-size:16px; }
	.waterTreatment-box .wt-top .listbox { margin-top:20px; }
	.waterTreatment-box .wt-top .listbox ul { margin-top:15px; }
	.waterTreatment-box .wt-top .listbox ul li strong { padding:0 10px; font-size:15px; }
	.waterTreatment-box .wt-list .box .listbox h4 { font-size:26px; }
	.waterTreatment-box .wt-list .box .listbox ul { margin-top:15px; }
	.waterTreatment-box .wt-list .box .listbox ul li strong { padding:0 10px; font-size:17px; }
}

/* animation */
.waterTreatment-box .wt-top .txt,
.waterTreatment-box .wt-top .listbox ul { opacity:0; }
.waterTreatment-box .wt-top .txt.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.waterTreatment-box .wt-top .listbox.subOn ul { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.waterTreatment-box .wt-list .listbox h4 { overflow:hidden }
.waterTreatment-box .wt-list .listbox h4 span { display:block; opacity:0; }
.waterTreatment-box .wt-list .listbox.subOn h4 span { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.waterTreatment-box .wt-list .listbox ul { opacity:0; }
.waterTreatment-box .wt-list .listbox.subOn ul { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }

.product-list .listbox h4 { font-size:22px; color:#787f8a; font-weight:500; line-height:1.3; }
.product-list .listbox h4 strong { font-size:48px; color:#212121; font-weight:600; line-height:1.3; margin-right:12px; }
.product-list .listbox h4 span { font-weight:500; }
.product-list .listbox:not(:last-child) { margin-bottom:100px; }
.product-list .listbox .productCont { margin-top:30px; display:flex; flex-wrap:wrap; gap:30px; }
.product-list .listbox .productCont .imgbox { position:relative; width:calc(41.5% - 15px); }
.product-list .listbox .productCont .imgbox img { border-radius:15px; max-width:100%; }
.product-list .listbox .productCont .infobox { width:calc(100% - 41.5% - 15px); display:flex; flex-direction:column; gap:20px 0 }
.product-list .listbox .productCont .infobox dl { display:flex; padding:35px 60px 35px 40px; background:#fff; border-radius:10px; border:1px solid #f4f4f4; height:calc((100% - 20px) / 2); }
.product-list .box:nth-child(2n) .listbox .productCont .infobox dl { background:#f7f9fb; }
.product-list .listbox .productCont .infobox dt { width:188px; font-size:22px; color:#212121; font-weight:700; line-height:1.3; }
.product-list .listbox .productCont .infobox dd { width:calc(100% - 188px); }
.product-list .listbox .productCont .infobox dd li:not(:last-child) { margin-bottom:10px; }
.product-list .listbox .productCont .infobox dd li { position:relative; padding-left:10px; font-size:18px; color:#444; font-weight:300; line-height:1.5; }
.product-list .listbox .productCont .infobox dd li:before { content:''; display:block; position:absolute; top:13px; left:0; width:5px; height:1px; background:#444; }
@media screen and (max-width:1340px){
	.product-list .listbox h4 { font-size:20px; }
	.product-list .listbox h4 strong { font-size:40px; }
	.product-list .listbox:not(:last-child) { margin-bottom:80px; }
	.product-list .listbox .productCont { margin-top:20px; gap:20px; }
	.product-list .listbox .productCont .imgbox { width:calc(45% - 10px); }
	.product-list .listbox .productCont .infobox { width:calc(100% - 45% - 10px); gap:15px 0 }
	.product-list .listbox .productCont .infobox dl { padding:25px 20px 25px 35px; height:calc((100% - 15px) / 2); }
	.product-list .listbox .productCont .infobox dt { width:165px; font-size:20px; }
	.product-list .listbox .productCont .infobox dd { width:calc(100% - 165px); }
	.product-list .listbox .productCont .infobox dd li:not(:last-child) { margin-bottom:8px; }
	.product-list .listbox .productCont .infobox dd li { padding-left:10px; font-size:17px; }
	.product-list .listbox .productCont .infobox dd li:before { top:11px; width:5px; }
}
@media screen and (max-width:1024px){
	.product-list .listbox h4 { font-size:18px; }
	.product-list .listbox h4 strong { font-size:34px; }
	.product-list .listbox:not(:last-child) { margin-bottom:60px; }
	.product-list .listbox .productCont { margin-top:15px; }
	.product-list .listbox .productCont .imgbox { width:calc(48% - 10px); }
	.product-list .listbox .productCont .imgbox img { border-radius:8px; }
	.product-list .listbox .productCont .infobox { width:calc(100% - 48% - 10px); gap:10px 0 }
	.product-list .listbox .productCont .infobox dl { padding:20px 10px 20px 30px; border-radius:5px; height:calc((100% - 10px) / 2); }
	.product-list .listbox .productCont .infobox dt { width:165px; font-size:19px; }
	.product-list .listbox .productCont .infobox dd { width:calc(100% - 165px); }
	.product-list .listbox .productCont .infobox dd li:not(:last-child) { margin-bottom:8px; }
	.product-list .listbox .productCont .infobox dd li { font-size:16px; }
	.product-list .listbox .productCont .infobox dd li:before { top:12px; width:4px; }
}
@media screen and (max-width:960px){
	.product-list .listbox .productCont .imgbox,
	.product-list .listbox .productCont .infobox { width:100% }
	.product-list .listbox .productCont .infobox dl { padding:25px 0px 25px 35px; height:auto; }
}
@media screen and (max-width:640px){
	.product-list .listbox h4 { font-size:16px; }
	.product-list .listbox h4 strong { font-size:26px; margin-right:8px; }
	.product-list .listbox:not(:last-child) { margin-bottom:40px; }
	.product-list .listbox .productCont { margin-top:10px; gap:10px; }
	.product-list .listbox .productCont .infobox { gap:5px 0 }
	.product-list .listbox .productCont .infobox dl { padding:15px; flex-wrap:wrap; }
	.product-list .listbox .productCont .infobox dt { width:100%; font-size:17px; }
	.product-list .listbox .productCont .infobox dd { width:100%; margin-top:10px; }
	.product-list .listbox .productCont .infobox dd li:not(:last-child) { margin-bottom:5px; }
	.product-list .listbox .productCont .infobox dd li { font-size:15px; }
}

/* animation */
.product-list .listbox h4 { overflow:hidden }
.product-list .listbox h4 span { display:block; opacity:0; }
.product-list .listbox.subOn h4 span { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.product-list .listbox .imgbox:before { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; left:0; bottom:0; }
.product-list .box:nth-child(2n+1) .listbox .imgbox:before { background:#f7f9fb; }
.product-list .listbox.subOn .imgbox:before { animation:ani_h100 1.0s 0.4s; animation-fill-mode:both; }
.product-list .listbox .productCont .infobox dl { opacity:0; }
.product-list .listbox.subOn .productCont .infobox dl:nth-child(1) { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.product-list .listbox.subOn .productCont .infobox dl:nth-child(2) { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }
.product-list .listbox.subOn .productCont .infobox dl:nth-child(3) { animation:ani_2 0.8s 0.9s; animation-fill-mode:both; }

.copperPipe-box .listbox { padding-bottom:150px; }
.copperPipe-box .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.copperPipe-box .listbox li { position:relative; width:calc((100% - 20px) / 2); }
.copperPipe-box .listbox li strong { position:absolute; left:0; bottom:15px; width:100%; padding:0 20px; font-size:24px; color:#fff; font-weight:700; line-height:1.3; font-family:var(--mainFont); }
.copperPipe-box .listbox li img { border-radius:15px; max-width:100%; }
@media screen and (max-width:1340px){
	.copperPipe-box .listbox { padding-bottom:120px; }
	.copperPipe-box .listbox li strong { bottom:15px; padding:0 20px; font-size:22px; }
}
@media screen and (max-width:1024px){
	.copperPipe-box .listbox { padding-bottom:100px; }
	.copperPipe-box .listbox ul { gap:10px; }
	.copperPipe-box .listbox li { width:calc((100% - 10px) / 2); }
	.copperPipe-box .listbox li strong { bottom:10px; padding:0 15px; font-size:20px; }
	.copperPipe-box .listbox li img { border-radius:8px; }
}
@media screen and (max-width:640px){
	.copperPipe-box .listbox { padding-bottom:80px; }
	.copperPipe-box .listbox li strong { padding:0 10px; font-size:17px; }
}
@media screen and (max-width:520px){
	.copperPipe-box .listbox li { width:100%; }
}

/* animation */
.copperPipe-box .listbox li { opacity:0; }
.copperPipe-box .listbox.subOn li:nth-child(1) { animation:ani_1 0.8s 0.3s; animation-fill-mode:both; }
.copperPipe-box .listbox.subOn li:nth-child(2) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.copperPipe-box .listbox.subOn li:nth-child(4) { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }
.copperPipe-box .listbox.subOn li:nth-child(3) { animation:ani_3 0.8s 0.9s; animation-fill-mode:both; }
@media screen and (max-width:520px){
	.copperPipe-box .listbox.subOn li:nth-child(1) { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
	.copperPipe-box .listbox.subOn li:nth-child(2) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
	.copperPipe-box .listbox.subOn li:nth-child(4) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
	.copperPipe-box .listbox.subOn li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
}


.board-box { padding-bottom:150px; }
@media screen and (max-width:1340px){
	.board-box { padding-bottom:120px; }
}
@media screen and (max-width:1024px){
	.board-box { padding-bottom:100px; }
}
@media screen and (max-width:640px){
	.board-box { padding-bottom:80px; }
}

.search-box { padding:48px 110px;; background:#f5f5f5; border-radius:10px; }
.search-box .s-ipbox { position:relative; display:flex; flex-wrap:wrap; padding-right:170px; }
.search-box .s-ipbox select { width:210px; height:55px; line-height:55px; padding:0 75px 0 25px; font-family:var(--mainFont); font-size:18px; color:#111; font-weight:500; border:1px solid #e4e4e4; border-radius:5px; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff url(/img/sub/icon_select_down.png) right center no-repeat; }
.search-box .s-ipbox select::-ms-expand { display:none; }
.search-box .s-ipbox input { width:calc(100% - 210px - 10px); margin-left:10px; height:55px; line-height:1.3; padding:0 25px; font-family:var(--mainFont); font-size:18px; color:#111; font-weight:500; border:1px solid #e4e4e4; border-radius:5px; outline:none; background:#fff; }
.search-box .s-ipbox button { position:absolute; right:0; bottom:0; display:inline-block; text-align:center; border:none; outline:none; background:none; padding:0; }
.search-box .s-ipbox button span { margin:0 auto; display:flex; justify-content:center; align-items:center; position:relative; text-align:center; background-color:var(--mainColor1); min-width:160px; height:55px; font-family:var(--mainFont); color:#fff; font-size:18px; font-weight:500; border-radius:5px; }
.search-box input::placeholder { color:#888; opacity:1; font-weight:300; }
@media screen and (max-width:1340px){
	.search-box { padding:40px 80px; }
	.search-box .s-ipbox { padding-right:150px; }
	.search-box .s-ipbox button span { min-width:140px; }
}
@media screen and (max-width:1024px){
	.search-box { padding:20px 30px; border-radius:5px; }
	.search-box .s-ipbox { padding-right:130px; }
	.search-box .s-ipbox select { width:180px; height:50px; line-height:50px; padding:0 75px 0 20px; font-size:16px; border-radius:3px; }
	.search-box .s-ipbox input { width:calc(100% - 180px - 10px); height:50px; padding:0 20px; font-size:16px; border-radius:3px; }
	.search-box .s-ipbox button span { min-width:120px; height:50px; font-size:16px; border-radius:3px; }
}
@media screen and (max-width:640px){
	.search-box { padding:10px; }
	.search-box .s-ipbox { padding-right:0; }
	.search-box .s-ipbox select { width:100%; height:50px; line-height:50px; padding:0 55px 0 20px; font-size:15px; background-size:auto 6px; }
	.search-box .s-ipbox input { width:calc(100% - 105px); margin:5px 0 0; height:50px; padding:0 20px; font-size:15px; }
	.search-box .s-ipbox button span { min-width:100px; height:50px; font-size:15px; }
}

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

.gallery-list > ul { display:flex; flex-wrap:wrap; gap:60px 35px; margin-top:80px; }
.gallery-list > ul > li { width:calc((100% - 70px) / 3); }
.gallery-list > ul > li .imgbox { width:100%; position:relative; overflow:hidden; border-radius:10px; }
.gallery-list > ul > li .imgbox:before {content:""; display:block; padding-bottom:63.5%; }
.gallery-list > ul > li .imgbox:after { content:''; display:block; position:absolute; top:0; left:-75%; z-index:2; width:50%; height:100%; background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); transform:skewX(-30deg); }
.gallery-list > ul > li:hover .imgbox:after { animation:shine .75s; }
.gallery-list > ul > li .imgbox img { transition:all 0.3s; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.gallery-list > ul > li .txtbox { margin-top:30px; }
.gallery-list > ul > li .txtbox .type { margin-bottom:30px; font-family:var(--mainFont); color:var(--mainColor1); font-size:16px; font-weight:400; line-height:1.3; padding:5px 15px; border:1px solid #00348c; border-radius:5px; display:inline-block; }
.gallery-list > ul > li .txtbox .txt { font-family:var(--mainFont); color:#212121; 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:15px; font-family:var(--mainFont); color:#999; letter-spacing:-0.02em; font-size:18px; font-weight:400; line-height:1.3; }
.gallery-list.notice-list > ul > li a { display:flex; flex-direction:column-reverse; }
.gallery-list.notice-list > ul > li .imgbox { margin-top:30px; }
.gallery-list.notice-list > ul > li .txtbox { margin-top:0; }
@media screen and (max-width:1340px){
	.gallery-list > ul { gap:50px 20px; margin-top:60px; }
	.gallery-list > ul > li { width:calc((100% - 40px) / 3); }
	.gallery-list > ul > li .txtbox { margin-top:20px; }
	.gallery-list > ul > li .txtbox .type { margin-bottom:20px; font-size:16px; }
	.gallery-list > ul > li .txtbox .txt { font-size:20px; }
	.gallery-list > ul > li .txtbox .date { margin-top:12px; font-size:16px; }
	.gallery-list.notice-list > ul > li .imgbox { margin-top:20px; }
}
@media screen and (max-width:1024px){
	.gallery-list > ul { gap:40px 10px; margin-top:40px; }
	.gallery-list > ul > li { width:calc((100% - 20px) / 3); }
	.gallery-list > ul > li .txtbox { margin-top:15px; }
	.gallery-list > ul > li .txtbox .type { margin-bottom:15px; font-size:15px; padding:4px 10px; }
	.gallery-list > ul > li .txtbox .txt { font-size:18px; }
	.gallery-list > ul > li .txtbox .date { margin-top:10px; font-size:15px; }
	.gallery-list.notice-list > ul > li .imgbox { margin-top:15px; }
}
@media screen and (max-width:860px){
	.gallery-list > ul > li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.gallery-list > ul { gap:30px 10px; margin-top:30px; }
	.gallery-list > ul > li .txtbox { margin-top:10px; }
	.gallery-list > ul > li .txtbox .type { font-size:14px; padding:3px 10px; }
	.gallery-list > ul > li .txtbox .txt { font-size:16px; }
	.gallery-list > ul > li .txtbox .date { margin-top:8px; font-size:14px; }
	.gallery-list.notice-list > ul > li .imgbox { margin-top:10px; }
}

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


.board-box .listbox { margin-top:80px; }
.board-box .listbox table { width:100%; border-top:1px solid #000; }
.board-box .listbox thead th { position:relative; padding:43px 0; color:#111; font-weight:400; font-size:17px; line-height:1.3; letter-spacing:-0.03em; border-bottom:1px solid #e0e0e0; background:#f8f8f8;}
.board-box .listbox thead th:after { content:""; display:block; background:#e0e0e0; position:absolute; top:50%; left:0; width:1px; height:15px; transform:translateY(-50%); }
.board-box .listbox thead th:first-child:after{ display:none; }
.board-box .listbox tbody tr {position:relative;}
.board-box .listbox tbody tr:after {content:""; position:absolute; bottom:0; left:0; width:0; height:1px; transition:0.7s; background: var(--mainColor); }
.board-box .listbox tbody tr:hover:after { width:100%; }
.board-box .listbox tbody td { text-align:center; padding:43px 0; color:#666; font-weight:300; font-size:16px; line-height:1.3; letter-spacing:-0.03em; border-bottom:1px solid #e0e0e0; }
.board-box .listbox tbody td.td_left { padding-left:40px; padding-right:40px; text-align:left; }
.board-box .listbox tbody td a { transition:all 0.3s; width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; font-weight:400; font-size:17px; line-height:1.3; color:#222; }
.board-box .listbox tbody tr td a:hover { color:var(--mainColor); }
@media screen and (max-width:1024px){
	.board-box .listbox { margin-top:40px; }
	.board-box .listbox .w1,
	.board-box .listbox .w4 { display:none }
	.board-box .listbox .w3 { width:180px !important }
	.board-box .listbox thead th:nth-child(2):after{ display:none; }
	.board-box .listbox thead th { padding:25px 0; font-size:16px; }
	.board-box .listbox tbody td { padding:25px 0; font-size:15px; }
	.board-box .listbox tbody td.td_left { padding-left:20px; padding-right:20px; }
	.board-box .listbox tbody td a { font-size:16px; -webkit-line-clamp:2; }
}
@media screen and (max-width:640px){
	.board-box .listbox { margin-top:30px; }
	.board-box .listbox .w3 { width:120px !important }
	.board-box .listbox thead th { padding:20px 0; }
	.board-box .listbox tbody td { padding:20px 0; font-size:14px; }
	.board-box .listbox tbody td.td_left { padding-left:5px; padding-right:5px; }
}

/* board view */
.board-view .top-box { padding:35px 30px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.board-view .top-box .title { font-family:var(--mainFont); font-size:44px; font-weight:500; color:#222; line-height:1.3; letter-spacing:-0.05em; }
.board-view .top-box .info { display:flex; margin-top:20px; }
.board-view .top-box .txt { font-family:var(--mainFont); font-size:18px; font-weight:400; color:#666; line-height:1.3; }
.board-view .top-box .txt strong { position:relative; font-weight:400; color:#212121; display:inline-block; padding-right:12px; margin-right:8px; }
.board-view .top-box .txt strong:before { content:""; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:15px; background:#b9b9b9; } 
.board-view .top-box .txt:not(:last-child) { margin-right:40px; }
.board-view .viewCont .contents { min-height:180px; padding:60px 30px; }
.board-view .viewCont .attach { margin-top:60px; padding:35px 30px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.board-view .viewCont .attach li:not(:last-child) { margin-bottom:10px; }
.board-view .viewCont .attach li { display:flex; padding:17px 0 }
.board-view .viewCont .attach li strong { position:relative; width:160px; font-size:16px; font-weight:500; color:#212121; 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:35px; background:#ddd; } 
.board-view .viewCont .attach li a { transition:all 0.3s; position:relative; width:calc(100% - 160px - 30px); margin-left:30px; font-size:16px; font-weight:300; color:#666; line-height:1.3; padding:0 140px 0 30px; word-break:break-word !important; background:url(/img/sub/file_icon.svg) left center no-repeat; }
.board-view .viewCont .attach li a:hover { color:var(--mainColor1); }
.board-view .viewCont .attach li a span { position:absolute; right:0; top:0; font-weight:300; padding-left:26px; background:url(/img/sub/down_icon.svg) left center no-repeat; }
.board-view .btn_pn { margin-top:50px; }
.board-view .btn_pn dl { border-top:1px solid #ddd; border-bottom:1px solid #ddd; display:flex; background-color:#fff; }
.board-view .btn_pn dl:not(:last-child) { border-bottom:none; }
.board-view .btn_pn dt { position:relative; width:200px; height:75px; display:flex; align-items:center; padding-left:30px; } 
.board-view .btn_pn dt:before { content:""; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:35px; background:#ddd; } 
.board-view .btn_pn dt span { font-size:18px; font-weight:400; color:#212121; display:inline-block; padding-left:54px; background:url(/img/sub/view_p_icon.svg) left center no-repeat; }
.board-view .btn_pn dl:nth-child(2) dt span { background:url(/img/sub/view_n_icon.svg) left center no-repeat; }
.board-view .btn_pn dd { width:calc(100% - 200px); display:flex; align-items:center; padding:0 30px; }
.board-view .btn_pn dd a { font-size:18px; font-weight:500; color:#666; min-height:24px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
@media screen and (max-width:1340px){
	.board-view .top-box { padding:30px 20px; }
	.board-view .top-box .title { font-size:30px; }
	.board-view .top-box .info { margin-top:15px; }
	.board-view .top-box .txt { font-size:16px; }
	.board-view .top-box .txt strong { padding-right:10px; margin-right:6px; }
	.board-view .top-box .txt strong:before { height:14px; } 
	.board-view .top-box .txt:not(:last-child) { margin-right:30px; }
	.board-view .viewCont .contents { padding:50px 20px; }
	.board-view .viewCont .attach { margin-top:40px; padding:30px 20px; }
	.board-view .viewCont .attach li:not(:last-child) { margin-bottom:8px; }
	.board-view .viewCont .attach li { padding:13px 0 }
	.board-view .viewCont .attach li strong { width:120px; font-size:15px; }
	.board-view .viewCont .attach li strong:before { height:25px; } 
	.board-view .viewCont .attach li a { width:calc(100% - 120px - 20px); margin-left:20px; font-size:15px; padding:0 120px 0 26px; }
	.board-view .btn_pn { margin-top:35px; }
	.board-view .btn_pn dt { width:140px; height:65px; padding-left:20px; } 
	.board-view .btn_pn dt:before { height:25px; } 
	.board-view .btn_pn dt span { font-size:16px; padding-left:34px; }
	.board-view .btn_pn dd { width:calc(100% - 140px); padding:0 20px; }
	.board-view .btn_pn dd a { font-size:16px; min-height:24px; }
}
@media screen and (max-width:1024px){
	.board-view .top-box { padding:20px 10px; }
	.board-view .top-box .title { font-size:24px; }
	.board-view .top-box .info { margin-top:10px; }
	.board-view .top-box .txt { font-size:15px; }
	.board-view .top-box .txt strong:before { height:12px; } 
	.board-view .top-box .txt:not(:last-child) { margin-right:20px; }
	.board-view .viewCont .contents { padding:30px 10px; }
	.board-view .viewCont .attach { margin-top:20px; padding:15px 10px; }
	.board-view .viewCont .attach li:not(:last-child) { margin-bottom:5px; }
	.board-view .viewCont .attach li { padding:8px 0 }
	.board-view .viewCont .attach li strong { width:100px; font-size:15px; }
	.board-view .viewCont .attach li strong:before { height:20px; } 
	.board-view .viewCont .attach li a { width:calc(100% - 100px - 20px); }
	.board-view .btn_pn { margin-top:20px; }
	.board-view .btn_pn dt { width:110px; height:60px; padding-left:15px; } 
	.board-view .btn_pn dt:before { height:20px; } 
	.board-view .btn_pn dt span { font-size:16px; padding-left:24px; }
	.board-view .btn_pn dt span,
	.board-view .btn_pn dl:nth-child(2) dt span { background-size:10px auto }
	.board-view .btn_pn dd { width:calc(100% - 110px); padding:0 20px; }
	.board-view .btn_pn dd a { font-size:16px; min-height:24px; }
}
@media screen and (max-width:640px){
	.board-view .top-box { padding:20px 0; }
	.board-view .top-box .txt { font-size:14px; }
	.board-view .top-box .txt:not(:last-child) { margin-right:15px; }
	.board-view .top-box .txt strong { padding-right:8px; margin-right:4px; }
	.board-view .viewCont .contents { padding:20px 0; }
	.board-view .viewCont .attach { padding:10px 0; }
	.board-view .viewCont .attach li { flex-wrap:wrap; }
	.board-view .viewCont .attach li strong { width:100%; }
	.board-view .viewCont .attach li strong:before { display:none } 
	.board-view .viewCont .attach li a { width:100%; margin:7px 0 0; }
	.board-view .btn_pn dt { width:95px; }
	.board-view .btn_pn dd { width:calc(100% - 95px); }
}

/* animation */
.board-view { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }

.inquiry-box { position:relative; padding:280px 0 0; }
.inquiry-box .imgbox { position:absolute; left:0; top:0; width:100%; }
.inquiry-box .imgbox:after { content:""; display:block; width:50%; height:100%; background:#fff; position:absolute; left:0; top:0; }
.inquiry-box .imgbox:before { content:""; display:block; width:50%; height:100%; background:#fff; position:absolute; right:0; top:0; }
.inquiry-box.subOn .imgbox:after { animation:ani_w50 1.0s 0.4s; animation-fill-mode:both; }
.inquiry-box.subOn .imgbox:before { animation:ani_w50 1.0s 0.4s; animation-fill-mode:both; }
 
/* 개발부분 site.css --> register-box */
.registerBox { border-radius:15px; background:#f7f9fb; padding:100px; }
.registerBox > ul > li { position:relative; width:100%; }
.registerBox > ul > li:not(:last-child) { margin-bottom:40px; }
.registerBox > ul > li > label { font-size:20px; color:#212121; font-weight:600; letter-spacing:-0.04em; line-height:1.3; }
.registerBox > ul > li label span { font-weight:600; color:#f00; }
.registerBox > ul > li .ipbox { margin-top:20px; }
.registerBox > ul > li input[type="text"],
.registerBox > ul > li input[type="password"] { height:55px; padding:0 25px; width:100%; font-size:17px; color:#666; font-weight:300; border:1px solid #ddd; outline:none; background:#fff; border-radius:5px; }
.registerBox > ul > li select { width:100%; height:55px; line-height:55px; padding:0 75px 0 25px; font-size:17px; color:#666; font-weight:300; border:1px solid #ddd; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:5px; background:#fff 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:25px; font-size:17px; color:#666; font-weight:300; border:1px solid #ddd; outline:none; background:#fff; border-radius:5px; }
.registerBox > ul > li .ipbox .file-box { position:relative;  }
.registerBox > ul > li .ipbox .ipcont:not(:last-child) { margin-bottom:10px; }
.registerBox > ul > li .ipbox .ipcont { position:relative; display:flex; }
.registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 250px - 10px); margin-right:10px; padding:0 20px; font-size:17px; color:#666; }
.registerBox > ul > li .ipbox .ipcont .upload-name.on { padding:4px 0 4px 45px; background:#fff url(/img/sub/file_icon.png) 20px center no-repeat; }
.registerBox > ul > li .ipbox .ipcont .file { width:250px; height:55px; background:#004; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:5px; }
.registerBox > ul > li .ipbox .ipcont .file span{ text-align:center; font-size:17px; color:#fff; font-weight:600; }
.registerBox > ul > li .ipbox .ipcont .file input{display:none}
.registerBox > ul > li .code-box { width:calc(100% - 250px - 10px); }
.registerBox > ul > li .code-box .ip-code { position:relative; width:100%; display:flex; flex-wrap:wrap; align-items:center; padding:0 0 0 260px; }
.registerBox > ul > li .code-box .ip-code input[type="text"] { width:100%; }
.registerBox > ul > li .code-box .ip-code #imgCaptcha { position:absolute; left:0; top:0; width:250px !important; height:55px; border-radius:5px; }
.registerBox > ul > li .code-box .ip-code .btn_refresh { cursor:pointer; position:absolute; right:0; top:0; width:55px; height:55px; background:url(/img/sub/refresh_icon.svg) center no-repeat; border-radius:5px; outline:none; border:none; overflow:hidden; text-indent:-9999em; }
.registerBox > ul > li .sbox { padding:5px 5px 5px 0; border:1px solid #ddd; border-radius:5px; background:#fff }
.registerBox > ul > li .sbox .scroll-box { overflow:auto; height:180px; padding:0 25px; }
.registerBox > ul > li .sbox * { font-size:16px; color:#666; font-weight:400; line-height:1.5; }
.registerBox > ul > li .sbox dl { margin-top:10px }
.registerBox > ul > li .sbox p:not(:last-child),
.registerBox > ul > li .sbox dl:not(:last-child) { margin-bottom:15px; }
.registerBox > ul > li .sbox dd p:not(:last-child),
.registerBox > ul > li .sbox dd dd:not(:last-child)  { margin-bottom:10px; }
.registerBox > ul > li .sbox dd ul { margin-top:10px; }
.registerBox > ul > li input::placeholder,
.registerBox > ul > li textarea::placeholder { color:#888; opacity:1; font-weight:300; }
.registerBox .ch { margin-top:20px; position:relative; }
.registerBox .ipbox .ch { margin-top:20px; }
.registerBox .ipbox .ch label:not(:last-child) { margin-right:150px; display:inline-block }
.registerBox .ipbox .ch-1 label:not(:last-child) { margin-right:40px; }
.registerBox .ch input[type="checkbox"],
.registerBox .ch input[type="radio"]{ opacity:0; height:auto; line-height:auto; position:absolute; left:4px; top:8px; z-index:-1}
.registerBox .ch input[type="radio"] + span { position:relative; padding:0 0 0 28px; font-weight:500; font-size:17px; line-height:1.4 !important; display:inline-block; color:#444; }
.registerBox .ch input[type="radio"] + span:before { content:''; display:block; width:18px; height:18px; vertical-align:middle; background:#fff; border:1px solid #d9d9d9; border-radius:50px; position:absolute; left:0; top:0; }
.registerBox .ch input[type="radio"] + span:after { content:''; display:block; width:10px; height:10px; vertical-align:middle; background:none; border:none; border-radius:50px; position:absolute; left:5px; top:5px; }
.registerBox .ch input[type="radio"]:checked + span:after { background:var(--mainColor1); }
.registerBox .ch input[type="radio"]:checked + span:before { border:1px solid var(--mainColor1); }
.registerBox .ch input[type="checkbox"] + span { position:relative; padding:0 0 0 28px; font-weight:500; font-size:17px; line-height:1.4; display:inline-block; color:#444; }
.registerBox .ch input[type="checkbox"] + span:before  { content:''; display:block; width:18px; height:18px; border:1px solid #d9d9d9; vertical-align:middle; background:#fff; position:absolute; left:0; top:0; }
.registerBox .ch input[type="checkbox"]:checked + span:before { border:1px solid var(--mainColor1); background:var(--mainColor1) url(/img/sub/ch_on.svg) center center no-repeat; }
.registerBox .ch a { display:inline-block; margin-left:15px; font-size:15px; color:#111; font-weight:700; letter-spacing:-0.02em; }
.registerBox input,
.registerBox select,
.registerBox textarea { font-family:var(--mainFont); }
@media screen and (max-width:1340px){
	.inquiry-box { padding:200px 0 0; }
	.registerBox { padding:80px; }
	.registerBox > ul > li:not(:last-child) { margin-bottom:30px; }
	.registerBox > ul > li > label { font-size:19px; }
	.registerBox > ul > li .ipbox { margin-top:15px; }
	.registerBox > ul > li input[type="text"],
	.registerBox > ul > li input[type="password"] { padding:0 20px; }
	.registerBox > ul > li select { padding:0 75px 0 20px; font-size:17px; }
	.registerBox > ul > li textarea { padding:20px; }
	.registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 200px - 10px); }
	.registerBox > ul > li .ipbox .ipcont .file { width:200px; }
	.registerBox .ipbox .ch label:not(:last-child) { margin-right:100px; }
}
@media screen and (max-width:1024px){
	.inquiry-box { padding:150px 0 0; }
	.registerBox { padding:40px 40px 80px; border-radius:8px; }
	.registerBox > ul > li:not(:last-child) { margin-bottom:20px; }
	.registerBox > ul > li > label { font-size:18px; }
	.registerBox > ul > li .ipbox { margin-top:12px; }
	.registerBox > ul > li input[type="text"],
	.registerBox > ul > li input[type="password"] { height:50px; padding:0 10px; font-size:16px; border-radius:3px; }
	.registerBox > ul > li select { height:50px; line-height:50px; padding:0 60px 0 10px; font-size:16px; border-radius:3px; }
	.registerBox > ul > li textarea { height:180px; padding:20px; font-size:16px; border-radius:3px; }
	.registerBox > ul > li .ipbox .ipcont:not(:last-child) { margin-bottom:5px; }
	.registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 200px - 10px); margin-right:10px; padding:0 10px; font-size:16px; }
	.registerBox > ul > li .ipbox .ipcont .upload-name.on { padding:4px 0 4px 33px; background-position:10px center; }
	.registerBox > ul > li .ipbox .ipcont .file { width:200px; height:50px; border-radius:3px; }
	.registerBox > ul > li .ipbox .ipcont .file span{ font-size:16px; }
	.registerBox > ul > li .code-box { width:calc(100% - 200px - 10px); }
	.registerBox > ul > li .code-box .ip-code { padding:0 0 0 200px; }
	.registerBox > ul > li .code-box .ip-code #imgCaptcha { width:190px !important; height:50px; border-radius:3px; }
	.registerBox > ul > li .code-box .ip-code .btn_refresh { width:50px; height:50px; }
	.registerBox > ul > li .sbox { padding:5px 5px 5px 0; border-radius:3px; }
	.registerBox > ul > li .sbox .scroll-box { height:180px; padding:20px 15px; }
	.registerBox > ul > li .sbox * { font-size:15px; }
	.registerBox > ul > li .sbox dl { margin-top:10px }
	.registerBox > ul > li .sbox p:not(:last-child),
	.registerBox > ul > li .sbox dl:not(:last-child) { margin-bottom:12px; }
	.registerBox > ul > li .sbox dd p:not(:last-child),
	.registerBox > ul > li .sbox dd dd:not(:last-child)  { margin-bottom:8px; }
	.registerBox > ul > li .sbox dd ul { margin-top:8px; }
	.registerBox .ch { margin-top:12px; }
	.registerBox .ipbox .ch { margin-top:12px; }
	.registerBox .ipbox .ch label:not(:last-child) { margin-right:60px; }
	.registerBox .ipbox .ch-1 label:not(:last-child) { margin-right:40px; }
	.registerBox .ch input[type="radio"] + span,
	.registerBox .ch input[type="checkbox"] + span { font-size:16px; }
}
@media screen and (max-width:860px){
	.registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 130px - 10px); }
	.registerBox > ul > li .ipbox .ipcont .file { width:130px; }
	.registerBox > ul > li .code-box { width:calc(100% - 130px - 10px); }
	.registerBox > ul > li .code-box .ip-code { padding:0 0 0 140px; }
	.registerBox > ul > li .code-box .ip-code #imgCaptcha { width:130px !important; }
}
@media screen and (max-width:640px){
	.inquiry-box { padding:0; }
	.inquiry-box .imgbox { display:none }
	.registerBox { padding:20px 15px 60px; }
	.registerBox > ul > li .ipbox .ipcont .upload-name { width:calc(100% - 100px - 5px); margin-right:5px; }
	.registerBox > ul > li .ipbox .ipcont .file { width:100px; }
	.registerBox > ul > li .code-box .ip-code { padding:0 0 0 135px; }
	.registerBox > ul > li .code-box { width:100%; }
}

/* animation */
.registerBox { opacity:0; }
.subOn .registerBox { animation:ani_3 0.8s 1.0s; animation-fill-mode:both; }

.faq_box { margin-top:100px; padding:150px 0; background-color:#f7f7f7; }
.faq_box .listbox { margin-top:100px; }
.faq_box .listbox > ul { border-top:1px solid #d6d6d6; }
.faq_box .listbox > ul > li { border-bottom:1px solid #d6d6d6; }
.faq_box .listbox > ul > li > p { position:relative; cursor:pointer; padding:35px 100px 35px 125px; min-height:136px; font-size:25px; color:#000; font-weight:700; line-height:1.4; display:flex; align-items:center; } 
.faq_box .listbox > ul > li > p:before { content:""; display:block; position:absolute; right:40px; top:50%; transform:translateY(-50%); width:14px; height:9px; background:url(/img/sub/faq_arr.png) center center no-repeat; }
.faq_box .listbox > ul > li.on > p:before { background:url(/img/sub/faq_arr_on.png) center center no-repeat; }
.faq_box .listbox > ul > li > p span.q { position:absolute; left:40px; top:42px; color:#fff; font-weight:700; font-size:30px; display:flex; justify-content:center; align-items:center; width:57px; height:57px; background-color:#ff7b0f; border-radius:50%; }
.faq_box .listbox > ul > li .contentBox { background-color:#fff; border-top:1px solid #d6d6d6; padding:35px 55px 70px; color:#000; font-size:18px; line-height:1.6 }
@media screen and (max-width:1024px){
    .faq_box { margin-top:80px; padding:120px 0; }
    .faq_box .listbox { margin-top:80px; }
    .faq_box .listbox > ul > li > p { padding:30px 100px 30px 110px; min-height:120px; font-size:22px; } 
    .faq_box .listbox > ul > li > p span.q { left:30px; top:35px; font-size:24px; width:52px; height:52px; }
    .faq_box .listbox > ul > li .contentBox { padding:30px 45px 60px; font-size:16px; }
}
@media screen and (max-width:640px){
    .faq_box { margin-top:50px; padding:80px 0; }
    .faq_box .listbox { margin-top:50px; }
    .faq_box .listbox > ul > li > p { padding:20px 50px 20px 65px; min-height:80px; font-size:17px; } 
    .faq_box .listbox > ul > li > p:before { right:20px; }
    .faq_box .listbox > ul > li > p span.q { left:10px; top:20px; font-size:19px; width:40px; height:40px; }
    .faq_box .listbox > ul > li .contentBox { padding:20px 20px 50px; font-size:16px; }
}

/* animation */
.faq_box .listbox { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }

/* page */
.page { margin:80px auto 0 auto; text-align:center; padding:0; } 
.page a { position:relative; font-size:16px; line-height:40px; font-family:var(--mainFont); font-weight:500; color:#999; border:none; padding:0; min-width:40px; margin:0 -2px; 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:600; color:#fff; background-color:var(--mainColor1); border:none; padding:0 2px; border-radius:50px; }
.page li:hover a,
.page li a:hover { border:none; }
.page li.on:hover a  { background-color:var(--mainColor1); }
.page .btn_pn { display:inline-block; vertical-align:middle; padding:0; }
.page .btn_prev { display:inline-block; vertical-align:middle; height:45px; padding:0; width:45px; 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:45px; padding:0; width:45px; 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:45px; padding:0; width:45px; margin-right:-4px; 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:45px; padding:0; width:45px; margin-left:-4px; 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:30px auto 0 auto; }
    .page a { font-size:15px; line-height:38px; min-width:38px; margin:0 -4px; }
    .page .btn_prev { height:38px; width:38px; margin-right:2px; }
    .page .btn_next { height:38px; width:38px; margin-left:2px; }
    .page .btn_first { height:38px; width:38px; }
    .page .btn_last { height:38px; width:38px; }

}

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

.policy-box { padding-bottom:120px; }
@media screen and (max-width:1024px){	
	.policy-box { padding-bottom:80px; }
}
@media screen and (max-width:640px){	
	.policy-box { padding-bottom:60px; }
}
/* animation */
.policy-box .privacy { opacity:0; }
.policy-box .privacy.subOn { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }


.os-theme-dark > .os-scrollbar, .os-theme-light > .os-scrollbar { padding:0; }
.os-theme-dark > .os-scrollbar-vertical, .os-theme-light > .os-scrollbar-vertical { width:3px; }
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background:#898989; width:3px; border-radius:2px; opacity:0.5 }
.os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active, 
.os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active,
.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle.active { background:#898989; border-radius:2px; opacity:0.5 }

.file-list { overflow: auto; padding: 10px; }
.file-list div { font-size: 14px; margin-top: 10px; }
.file-list button{ color: #ff5353; margin-left: 5px; }