@charset "utf-8";

.subtitleTop { position:relative; height:480px; z-index:10; }
.subtitleTop .topBG { height:100%; overflow:hidden; }
.subtitleTop .titbox { position:relative; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; margin-top:40px; }
.subtitleTop h2.tit { color:#fff; font-size:var(--font72); font-weight:700; line-height:1.3; letter-spacing:-0.09em; }
.subtitleTop h2.tit span { font-weight:700; }
.subtitleTop .topdep { position:absolute; right:0; bottom:0; display:flex; padding-right:100px; background:var(--mainColor); border-radius:var(--borderR20) 0 0 0; }
.subtitleTop .topdep .home a { display:flex; align-items:center; justify-content:center; width:80px; height:80px; background:url(/img/svg/location_h.svg) center center no-repeat; text-indent:-9999em; overflow:hidden; border-right:1px solid rgba(255, 255, 255, 0.25); }
.subtitleTop .depthMenu { position:relative; padding:0 40px; width:320px; border-right:1px solid rgba(255, 255, 255, 0.25); }
.subtitleTop .depthMenu .stit { position:relative; cursor:pointer; display:flex; align-items:center; height:100%; color:#fff; font-size:var(--font18); font-weight:500; line-height:1.3; }
.subtitleTop .depthMenu .stit:before { content:""; display:block; transition:all 0.4s; position:absolute; right:0; top:50%; transform:translateY(-50%); width:20px; height:20px; background:url(/img/svg/dep_arr.svg) center center no-repeat; }
.subtitleTop .depthMenu .stit.ov:before { transform:translateY(-50%) rotate(180deg); }
.subtitleTop .depthMenu .submenu-box { display:none; position:absolute; top:80px; left:0; width:100%; }
.subtitleTop .depthMenu .submenu-box ul { padding:10px 10px 10px 40px; background:var(--mainColor); border-radius:0; }
.subtitleTop .depthMenu .submenu-box li a { height:40px; display:flex; align-items:center; color:rgba(255, 255, 255, 0.50); font-size:var(--font18); font-weight:500; line-height:1.3; }
.subtitleTop .depthMenu .submenu-box li a:hover,
.subtitleTop .depthMenu .submenu-box li.hover a,
.subtitleTop .depthMenu .submenu-box li.over a { color:rgba(255, 255, 255, 1); }

.subTop { transform:scale(1.10); height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; background-color:#111; }
.subTop_Bg1 { background-image:url(/img/sub/visualsub_bg1.jpg); }
.subTop_Bg2 { background-image:url(/img/sub/visualsub_bg2.jpg); }
.subTop_Bg3 { background-image:url(/img/sub/visualsub_bg3.jpg); }
.subTop_Bg4 { background-image:url(/img/sub/visualsub_bg4.jpg); }
.subTop_Bg5 { background-image:url(/img/sub/visualsub_bg5.jpg); }
.subTop_Bg6 { background-image:url(/img/sub/visualsub_bg6.jpg); }
.subTop_Bg7 { background-image:url(/img/sub/visualsub_bg7.jpg); }
.subTop_Bg10 { background-image:url(/img/sub/visualsub_bg10.jpg); }
.subTop_Bg11 { background-image:url(/img/sub/visualsub_bg11.jpg); }

@media screen and (max-width:1440px){
	.subtitleTop { height:400px; }
	.subtitleTop .topdep { padding-right:20px; }
	.subtitleTop .topdep .home a { width:70px; height:70px; }
	.subtitleTop .depthMenu { padding:0 35px; width:300px; }
	.subtitleTop .depthMenu .submenu-box { top:70px; }
	.subtitleTop .depthMenu .submenu-box ul { padding:10px 10px 10px 35px; }
	.subtitleTop .depthMenu .submenu-box li a { height:35px; }
}
@media screen and (max-width:1024px){
	.subtitleTop { height:360px; }
	.subtitleTop .titbox { margin-top:0; }
	.subtitleTop .topdep .home a { width:60px; height:60px; background-size:17px auto; }
	.subtitleTop .depthMenu { padding:0 20px; width:260px; }
	.subtitleTop .depthMenu .stit:before { background-size:20px auto; }
	.subtitleTop .depthMenu .submenu-box { top:60px; }
	.subtitleTop .depthMenu .submenu-box ul { padding:10px 10px 10px 20px; }
	.subtitleTop .depthMenu .submenu-box li a { height:30px; }
	.subtitleTop h2.tit { text-align:center; }
}
@media screen and (max-width:640px){
	.subtitleTop { height:280px; }
	.subtitleTop .titbox { margin-top:0; }
	.subtitleTop .topdep { width:100%; padding-right:0; border-radius:var(--borderR20) var(--borderR20) 0 0; }
	.subtitleTop .topdep .home a { width:50px; height:50px; background-size:14px auto; }
	.subtitleTop .depthMenu .stit:before { background-size:18px auto; }
	.subtitleTop .depthMenu { padding:0 20px; width:calc((100% - 50px) / 2); }
	.subtitleTop .depthMenu .submenu-box { top:50px; }
	.subtitleTop .depthMenu .submenu-box li a { height:26px; }
}

/* animation */
.subTop { animation:subTbg 3.5s 0.3s; animation-fill-mode:both;}
.subtitleTop h2.tit { overflow:hidden }
.subtitleTop h2.tit span { display:block; opacity:0; }
.subtitleTop h2.tit span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both;}

@keyframes subTbg {
    0% { transform:scale(1.10); }
    100% { transform:scale(1.0); }
}

.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }


#subContents > article { padding:140px 0 160px; min-height:300px; }
#wrap.on #subContents > article { padding-top:254px; }
#subContents > article.subContT { padding-top:0; }
#subContents > article.subContB { padding-bottom:0; }
@media screen and (max-width:1024px){
	#subContents > article { padding:70px 0 80px; }
	#wrap.on #subContents > article { padding-top:180px; }
}
@media screen and (max-width:640px){
	#subContents > article { padding:35px 0 40px; }
	#wrap.on #subContents > article { padding-top:100px; }
}


h3.sub-title { position:relative; padding:14px 0 0 40px; margin-bottom:80px; }
h3.sub-title span { color:var(--mainColor); font-size:var(--font60); font-weight:700; line-height:1.3; letter-spacing:-0.04em; }
h3.sub-title:before { content:''; display:block; position:absolute; top:0; left:14px; width:14px; height:14px; border-radius:14px; background:var(--mainColor); }
@media screen and (max-width:1440px){
	h3.sub-title { padding:12px 0 0 36px; }
	h3.sub-title:before { width:12px; height:12px; }
}
@media screen and (max-width:1024px){
	h3.sub-title { padding:10px 0 0 26px; margin-bottom:40px; }
	h3.sub-title:before { width:9px; height:9px; }
	.title-box .txt { margin-top:10px; }
}
@media screen and (max-width:640px){
	h3.sub-title { padding:6px 0 0 18px; margin-bottom:20px; }
	h3.sub-title:before { width:6px; height:6px; }
}


/* animation */ 
h3.sub-title:before { opacity:0; left:35px; transition:all 0.8s 0.1s; }
h3.sub-title.subOn:before { opacity:1; left:0; }

.company-box .greeting-box .toptxt { color:#111; font-size:var(--font48); font-weight:700; line-height:1.4; margin-bottom:60px; }
.company-box .greeting-box .top { display:flex; }
.company-box .greeting-box .top .imgbox { width:52%; }
.company-box .greeting-box .top .imgbox .img { position:relative; width:100%; padding:40px 0 0 40px; }
.company-box .greeting-box .top .imgbox .img:before { content:''; display:block; opacity:0.1; position:absolute; top:0; left:0; width:calc(100% - 40px); height:calc(100% - 40px); background:var(--mainColor); border-radius:var(--borderR20); }
.company-box .greeting-box .top .imgbox img { position:relative; z-index:2; width:100%; border-radius:var(--borderR20); }
.company-box .greeting-box .top .txtbox { width:calc(100% - 52%); padding:0 0 0 120px; }
.company-box .greeting-box .top .txtbox dt { color:#111; font-size:var(--font48); font-weight:700; line-height:1.4; }
.company-box .greeting-box .top .txtbox dd { margin-top:40px; padding-top:60px; border-top:1px solid #ddd; }
.company-box .greeting-box .top .txtbox p { color:#333; font-size:var(--font18); font-weight:300; line-height:1.6; }
.company-box .greeting-box .top .txtbox p:not(:last-child) { margin-bottom:30px; }
.company-box .greeting-box .txtCont { margin-top:40px; }
.company-box .greeting-box .txtCont p { color:#333; font-size:var(--font18); font-weight:300; line-height:1.6; }
.company-box .greeting-box .txtCont p:not(:last-child) { margin-bottom:30px; }
.company-box .greeting-box .listbox { display:flex; flex-wrap:wrap; gap:40px; padding-top:30px; }
.company-box .greeting-box .listbox .box { position:relative; width:calc((100% - 120px) / 4); text-align:center; padding:60px 10px 60px; background:#f7f7f7; border-radius:var(--borderR20); }
.company-box .greeting-box .listbox .box h5 { white-space:nowrap; position:absolute; top:-30px; left:50%; transform:translateX(-50%); height:60px; padding:0 30px; color:#fff; font-size:var(--font16); font-weight:700; line-height:1.3; display:inline-flex; align-items:center; justify-content:center; border-radius:60px; background:var(--mainColor); }
.company-box .greeting-box .listbox .box .txt { margin-top:30px; color:#333; font-size:var(--font18); font-weight:300; line-height:1.6; }
@media screen and (max-width:1640px){
	.company-box .greeting-box .top .txtbox dd p br { display:none; }
	.company-box .greeting-box .top .txtbox { padding:60px 0 0 100px; }
}
@media screen and (max-width:1440px){
	.company-box .greeting-box .top .txtbox { padding:50px 0 0 80px; }
	.company-box .greeting-box .top .txtbox dd { margin-top:35px; padding-top:50px; }
	.company-box .greeting-box .top .txtbox p:not(:last-child) { margin-bottom:25px; }
	.company-box .greeting-box .listbox { gap:30px; }
	.company-box .greeting-box .listbox .box { width:calc((100% - 90px) / 4); }
}
@media screen and (max-width:1280px){
	.company-box .greeting-box .top .txtbox { padding:30px 0 0 70px; }
	.company-box .greeting-box .top .txtbox dd { margin-top:30px; padding-top:40px; }
	.company-box .greeting-box .top .txtbox p:not(:last-child) { margin-bottom:20px; }
	.company-box .greeting-box .listbox { gap:20px; }
	.company-box .greeting-box .listbox .box { width:calc((100% - 60px) / 4); }
}
@media screen and (max-width:1024px){
	.company-box .greeting-box .toptxt { margin-bottom:30px; }
	.company-box .greeting-box .top .imgbox .img { padding:20px 0 0 20px; }
	.company-box .greeting-box .top .txtbox { padding:20px 0 0 40px; }
	.company-box .greeting-box .top .txtbox dd { margin-top:20px; padding-top:30px; }
	.company-box .greeting-box .top .txtbox p:not(:last-child) { margin-bottom:15px; }
	.company-box .greeting-box .listbox { gap:10px; padding-top:20px; }
	.company-box .greeting-box .listbox .box { width:calc((100% - 30px) / 4); padding:50px 10px 50px; }
	.company-box .greeting-box .listbox .box h5 { top:-25px; height:50px; padding:0 20px; }
	.company-box .greeting-box .listbox .box .icon img { height:120px; }
	.company-box .greeting-box .listbox .box .txt { margin-top:20px; }
	.company-box .greeting-box .listbox .box .txt br { display:none; }
	
}
@media screen and (max-width:860px){
	.company-box .greeting-box .toptxt br { display:none }
	.company-box .greeting-box .top { flex-wrap:wrap; }
	.company-box .greeting-box .top .imgbox { width:100%; }
	.company-box .greeting-box .top .txtbox { width:100%; padding:40px 0 0 0; }
	.company-box .greeting-box .listbox { gap:40px 10px; }
	.company-box .greeting-box .listbox .box { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.company-box .greeting-box .toptxt { margin-bottom:15px; }
	.company-box .greeting-box .top .txtbox { padding:30px 0 0 0; }
	.company-box .greeting-box .top .txtbox dd { margin-top:15px; padding-top:20px; }
	.company-box .greeting-box .top .txtbox p:not(:last-child) { margin-bottom:10px; }
	.company-box .greeting-box .listbox .box { padding:40px 10px 40px; }
	.company-box .greeting-box .listbox .box h5 { top:-20px; height:40px; }
	.company-box .greeting-box .listbox .box .icon img { height:90px; }
	.company-box .greeting-box .listbox .box .txt { margin-top:10px; }
}

/* animation */
.company-box .greeting-box .top .imgbox img { transform:translate(-40px, -40px);}
.company-box .greeting-box .top.subOn .imgbox img { animation:ani_g 0.8s 0.1s; animation-fill-mode:both;}
.company-box .greeting-box .top .txtbox dt,
.company-box .greeting-box .top .txtbox dd { opacity:0; }
.company-box .greeting-box .top.subOn .txtbox dt { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.company-box .greeting-box .top.subOn .txtbox dd { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.company-box .greeting-box .txtCont { opacity:0; }
.company-box .greeting-box .txtCont.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.company-box .greeting-box .listbox .box { opacity:0; }
.company-box .greeting-box .listbox.subOn .box { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
@keyframes ani_g {
	0% { transform:translate(-40px, -40px); }
	100% { transform:translate(0); }
}
@media screen and (max-width:1024px){
	@keyframes ani_g {
		0% { transform:translate(-20px, -20px); }
		100% { transform:translate(0); }
	}
}


.company-box .history-box .history-list { display:flex; flex-wrap:wrap; }
.company-box .history-box .history-list .title { width:320px; flex-shrink:0; position:sticky; top:100px; height:80px; margin-top:60px; }
.company-box .history-box .history-list .title h4 { color:var(--mainColor); font-size:var(--font40); font-weight:700; line-height:1.3; }
.company-box .history-box .history-list .title .txt { margin-top:12px; color:#aaa; font-size:var(--font22); font-weight:500; line-height:1.3; }
.company-box .history-box .history-list .historyCont { position:relative; padding-left:140px; width:calc(100% - 320px); }
.company-box .history-box .history-list .historyCont .arrbox { position:absolute; left:0; top:0; width:80px; height:100%; }
.company-box .history-box .history-list .historyCont .arrbox:before { content:""; display:block; width:2px; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); background:#eee; }
.company-box .history-box .history-list .historyCont .arrbox .circle { position:sticky; top:0; left:0; z-index:2; overflow:hidden; height:220px; display:block; }
.company-box .history-box .history-list .historyCont .arrbox .circle span { transition:all 0.3s;position:absolute; left:0; top:50px; width:80px; height:80px; margin:0 auto; display:flex; align-items:center; justify-content:center; background:rgba(193, 37, 43, 0.10); border-radius:80px; }
.company-box .history-box .history-list .historyCont .arrbox .circle span:before { content:""; display:block; width:2px; height:170px; position:absolute; bottom:46px; left:50%; transform:translateX(-50%); background:var(--mainColor); }
.company-box .history-box .history-list .historyCont .arrbox .circle span:after { content:""; display:block; width:24px; height:24px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:var(--mainColor) url(/img/svg/history_arr.svg) center center no-repeat; border-radius:24px; }
.company-box .history-box .history-list.on .historyCont .arrbox .circle span { top:100px; transition:all 0.2s; }
.company-box .history-box .history-list .historyCont .listbox { border-top:1px solid #ddd; }
.company-box .history-box .history-list .historyCont .listbox .tabCont dl { padding:60px 40px; border-bottom:1px solid #ddd; display:flex; }
.company-box .history-box .history-list .historyCont .listbox .tabCont dl dt { flex-shrink:0; width:200px; color:#111; font-size:var(--font28); font-weight:700; line-height:1.3; letter-spacing:-0.02em; }
.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd { width:calc(100% - 200px); }
.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li:not(:last-child) { margin-bottom:20px; }
.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li { position:relative; display:flex; gap:60px; color:#333; font-size:var(--font20); font-weight:300; line-height:1.6; letter-spacing:-0.02em; }
.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li span { color:var(--mainColor); font-weight:500; flex-shrink:0; }
@media screen and (max-width:1440px){
	.company-box .history-box .history-list .title { width:260px; }
	.company-box .history-box .history-list .historyCont { width:calc(100% - 260px); }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dt { width:160px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd { width:calc(100% - 160px); }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li { gap:50px; }
}
@media screen and (max-width:1280px){
	.company-box .history-box .history-list .title { width:200px; }
	.company-box .history-box .history-list .historyCont .arrbox { width:70px; }
	.company-box .history-box .history-list .historyCont .arrbox .circle span { width:70px; height:70px; }
	.company-box .history-box .history-list .historyCont { width:calc(100% - 200px); padding-left:120px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl { padding:50px 30px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dt { width:120px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd { width:calc(100% - 120px); }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li { gap:40px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li:not(:last-child) { margin-bottom:15px; }
}
@media screen and (max-width:1024px){
	.company-box .history-box .history-list .title { width:160px; }
	.company-box .history-box .history-list .title .txt { margin-top:6px; }
	.company-box .history-box .history-list .historyCont .arrbox { width:60px; }
	.company-box .history-box .history-list .historyCont .arrbox .circle span { width:60px; height:60px; }
	.company-box .history-box .history-list .historyCont .arrbox .circle span:before { bottom:36px; }
	.company-box .history-box .history-list .historyCont { width:calc(100% - 160px); padding-left:100px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl { padding:30px 20px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dt { width:80px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd { width:calc(100% - 80px); }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li { gap:30px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li:not(:last-child) { margin-bottom:10px; }
}
@media screen and (max-width:860px){
	.company-box .history-box .history-list .title { margin-bottom:20px; width:100%; display:flex; gap:10px; align-items:flex-end; position:relative; top:0; height:auto; margin-top:0; }
	.company-box .history-box .history-list .title .txt { margin-top:0; font-size:var(--font20); }
	.company-box .history-box .history-list .historyCont .arrbox { width:40px; }
	.company-box .history-box .history-list .historyCont .arrbox .circle span { width:40px; height:40px; }
	.company-box .history-box .history-list .historyCont .arrbox .circle span:before { bottom:28px; }
	.company-box .history-box .history-list .historyCont .arrbox .circle span:after { width:18px; height:18px; background-size:8px auto; }
	.company-box .history-box .history-list .historyCont { width:100%; padding-left:50px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl { padding:20px 5px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dt { width:55px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd { width:calc(100% - 55px); }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li { gap:10px; }
	.company-box .history-box .history-list .historyCont .listbox .tabCont dl dd li:not(:last-child) { margin-bottom:5px; }
}


.company-box .location-box .mapbox { border-radius:var(--borderR20); overflow:hidden; }
.company-box .location-box .mapbox > div { width:100%; border:none !important; }
.company-box .location-box .mapbox > div > div,
.company-box .location-box .mapbox > div > div > div { border:none !important; }
.company-box .location-box .mapbox.google-map { position:relative; overflow:hidden;  }
.company-box .location-box .mapbox.google-map:after { content:''; display:block; padding-bottom:680px; }
.company-box .location-box .mapbox.google-map iframe { position:absolute; left:0; top:-140px; width:100%; height:calc(100% + 280px); }
.company-box .location-box .infobox { margin-top:50px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.company-box .location-box .infobox .list { display:flex; align-items:center; gap:20px 80px; flex-wrap:wrap; }
.company-box .location-box .infobox .box { display:flex; align-items:center; gap:20px; color:#333; font-size:var(--font28); font-weight:500; line-height:1.3; }
.company-box .location-box .infobox .address .box { font-size:var(--font28); font-weight:500; font-family:var(--mainFont); }
.company-box .location-box .infobox .list .box { flex-shrink:0; gap:20px 10px; font-size:var(--font20); font-weight:300; font-family:var(--subFont); }
.company-box .location-box .infobox .list .box strong { margin-left:10px; font-size:var(--font20); font-weight:500; font-family:var(--subFont); }
.company-box .location-box .infobox .list .box .icon { width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:rgba(193, 37, 43, 0.08); border-radius:60px; }
.company-box .location-box .infobox .box .icon { flex-shrink:0; }
@media screen and (max-width:1440px){
	.company-box .location-box .mapbox.google-map:after { padding-bottom:540px; }
}
@media screen and (max-width:1280px){
	.company-box .location-box .mapbox.google-map:after { padding-bottom:480px; }
	.company-box .location-box .infobox .list { gap:20px 60px; }
}
@media screen and (max-width:1024px){
	.company-box .location-box .mapbox.google-map:after { padding-bottom:360px; }
	.company-box .location-box .infobox { margin-top:25px; }
	.company-box .location-box .infobox .box { gap:10px; }
	.company-box .location-box .infobox .address .box img { height:30px; }
	.company-box .location-box .infobox .list { gap:20px 40px; }
	.company-box .location-box .infobox .list .box .icon { width:46px; height:46px; }
}
@media screen and (max-width:640px){
	.company-box .location-box .mapbox.google-map:after { padding-bottom:280px; }
	.company-box .location-box .infobox { margin-top:15px; }
	.company-box .location-box .infobox .address .box img { height:22px; }
	.company-box .location-box .infobox .list { gap:10px 30px; }
	.company-box .location-box .infobox .list .box { gap:10px 5px; }
	.company-box .location-box .infobox .list .box .icon { width:35px; height:35px; }
	.company-box .location-box .infobox .list .box .icon img { height:16px; }
}

/* animation */
.company-box .location-box .mapbox { opacity:0; }
.company-box .location-box .mapbox.subOn { animation:bgs3 0.8s 0.3s; animation-fill-mode:both;}
.company-box .location-box .infobox { opacity:0; }
.company-box .location-box .infobox.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }


.products-box .listbox .box:not(:last-child) { margin-bottom:80px; }
.products-box .listbox .box { position:relative; display:flex; flex-wrap:wrap; }
.products-box .listbox .box .num { position:absolute; top:0; left:calc(50% + 30px); transform:translateX(-50%); width:140px; height:100%; text-align:center; }
.products-box .listbox .box .num:before { content:""; display:block; position:absolute; top:0; left:50%; width:1px; height:100%; background:var(--mainColor); }
.products-box .listbox .box .num span { position:relative; z-index:2; display:block; margin-top:40px; padding:15px 0 10px; color:var(--mainColor); font-size:var(--font96); font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
.products-box .listbox .box .num span:before { content:""; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:6px; height:100%; background:#fff; z-index:-1; }
.products-box .listbox .box .imgbox,
.products-box .listbox .box .txtbox { width:50%; }
.products-box .listbox .box .imgbox { padding:40px; display:flex; align-items:center; justify-content:center; background:#f7f7f7; border-radius:var(--borderR20); min-height:600px; max-height:600px; }
.products-box .listbox .box .imgbox img { max-width:100%; max-height:100%; }
.products-box .listbox .box .txtbox { padding-left:160px; display:flex; justify-content:space-between; flex-direction:column; }
.products-box .listbox .box .txtbox .info h4 { padding-top:30px; color:#111; font-size:var(--font48); font-weight:700; line-height:1.4; letter-spacing:-0.05em; }
.products-box .listbox .box .txtbox .info ul.list { margin-top:40px; }
.products-box .listbox .box .txtbox .btn { margin-top:20px; display:flex; gap:10px; }
.products-box .listbox .box .txtbox .btn a { transition:all 0.3s; width:100%; height:68px; display:flex; align-items:center; justify-content:center; border-radius:var(--borderR12); border:2px solid var(--mainColor); }
.products-box .listbox .box .txtbox .btn a.blk { border-color:#333; }
.products-box .listbox .box .txtbox .btn a span { transition:all 0.3s; color:var(--mainColor); font-size:var(--font18); font-weight:500; line-height:1.3; }
.products-box .listbox .box .txtbox .btn a.blk span { color:#333; }
.products-box .listbox .box .txtbox .btn a:hover { background:var(--mainColor); }
.products-box .listbox .box .txtbox .btn a:hover span { color:#fff; }
.products-box .listbox .box .txtbox .btn a.blk:hover { background:#333; }
.products-box .listbox .box .txtbox .btn a.blk:hover span { color:#fff; }

.products-box ul.list li:not(:last-child) { margin-bottom:16px; }
.products-box ul.list li { position:relative; padding-left:24px; color:#333; font-size:var(--font18); font-weight:300; line-height:1.6; background:url(/img/svg/products_arr.svg) left 6px no-repeat;}
@media screen and (max-width:1440px){
	.products-box .listbox .box .num { left:calc(50% + 20px); width:100px; }
	.products-box .listbox .box .num span { margin-top:35px; padding:20px 0 15px; }
	.products-box .listbox .box .txtbox { padding-left:100px; }
	.products-box .listbox .box .imgbox { min-height:520px; }
}
@media screen and (max-width:1280px){
	.products-box .listbox .box .num { left:calc(50% + 15px); width:80px; }
	.products-box .listbox .box .txtbox { padding-left:80px; }
	.products-box .listbox .box .imgbox { min-height:480px; }
}
@media screen and (max-width:1024px){
	.products-box .listbox .box:not(:last-child) { margin-bottom:40px; }
	.products-box .listbox .box .num span { margin-top:20px; padding:8px 0 5px; }
	.products-box .listbox .box .imgbox { min-height:400px; }
	.products-box .listbox .box .txtbox { padding-left:70px; }
	.products-box .listbox .box .txtbox .info h4 { padding-top:10px; }
	.products-box .listbox .box .txtbox .info ul.list { margin-top:20px; }
	.products-box .listbox .box .txtbox .btn a { height:55px; }

	.products-box ul.list li:not(:last-child) { margin-bottom:8px; }
	.products-box ul.list li { padding-left:20px; background-size:7px auto; }
}
@media screen and (max-width:860px){
	.products-box .listbox .box .num { left:20px; top:20px; width:auto; transform:translateX(0); height:auto; }
	.products-box .listbox .box .num span { padding:0; margin:0;  }
	.products-box .listbox .box .num span:before,
	.products-box .listbox .box .num:before { display:none; }
	.products-box .listbox .box .imgbox,
	.products-box .listbox .box .txtbox { width:100%; }
	.products-box .listbox .box .imgbox { min-height:300px; }
	.products-box .listbox .box .txtbox { padding-left:0; margin-top:20px; }
}
@media screen and (max-width:640px){
	.products-box .listbox .box .num { left:10px; top:10px; }
	.products-box .listbox .box .imgbox { padding:30px 20px; }
	.products-box .listbox .box .txtbox { margin-top:10px; }
	.products-box .listbox .box .txtbox .info h4 { padding-top:5px; }
	.products-box .listbox .box .txtbox .btn a { height:45px; }
	.products-box .listbox .box .txtbox .info ul.list { margin-top:10px; }

	.products-box ul.list li:not(:last-child) { margin-bottom:8px; }
	.products-box ul.list li { padding-left:16px; background-size:5px auto; }
}

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


.products-box .products-location { margin-bottom:120px; }
.products-box .products-location dl { display:flex; gap:5px 44px; align-items:flex-start; border-bottom:1px solid #333; padding-bottom:24px; }
.products-box .products-location dt { display:flex; gap:12px; color:#333; font-size:var(--font18); font-weight:300; line-height:1.3; }
.products-box .products-location dt img { margin-top:-1px; }
.products-box .products-location dd { display:flex; flex-wrap:wrap; gap:5px 44px; }
.products-box .products-location dd span { position:relative; color:#333; font-size:var(--font18); font-weight:300; line-height:1.3; }
.products-box .products-location dd strong { position:relative; color:#333; font-size:var(--font18); font-weight:300; line-height:1.3; }
.products-box .products-location dd span:before,
.products-box .products-location dd strong:before { content:""; display:block; position:absolute; top:42%; left:-30px; transform:translateY(-50%); width:15px; height:15px; background:url(/img/svg/products_location_arr.svg) center center no-repeat; }
.products-box h3.tit { color:#111; font-size:var(--font52); font-weight:700; line-height:1.3; }
.products-box .view-list { margin-top:60px; display:flex; flex-wrap:wrap; gap:20px; }
.products-box .view-list .box { transition:all 0.3s; position:relative; width:calc((100% - 40px) / 3); overflow:hidden; border-radius:var(--borderR20); border:2px solid #eee; }
.products-box .view-list .box a { display:block; }
.products-box .view-list .box .imgbox { position:relative; background:#f5f5f5; }
.products-box .view-list .box .imgbox:before { content:""; display:block; padding-bottom:75%; }
.products-box .view-list .box .imgbox img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:85%; max-height:85%; object-fit:cover; -o-object-fit:cover; }
.products-box .view-list .box .txtbox { text-align:center; padding:60px 60px 180px; }
.products-box .view-list .box .txtbox .top h4 { color:#111; font-size:var(--font22); font-weight:500; line-height:1.3; }
.products-box .view-list .box .txtbox .top .txt { margin-top:12px; color:#333; font-size:var(--font20); font-weight:500; line-height:1.6; }
.products-box .view-list .box .btn { transition:all 0.3s; position:absolute; left:60px; bottom:60px; width:calc(100% - (60px * 2)); height:60px; display:flex; align-items:center; justify-content:center; color:var(--mainColor); font-size:var(--font18); font-weight:500; line-height:1.3; border:2px solid var(--mainColor); border-radius:var(--borderR12); }
.products-box .view-list .box:hover { border-color:var(--mainColor); }
.products-box .view-list .box:hover .btn { background:var(--mainColor); color:#fff; }
@media screen and (max-width:1440px){
	.products-box .view-list .box .txtbox { padding:40px 40px 150px; }
	.products-box .view-list .box .btn { left:40px; bottom:40px; width:calc(100% - (40px * 2)); }
}
@media screen and (max-width:1280px){
	.products-box .view-list { gap:10px; }
	.products-box .view-list .box { width:calc((100% - 20px) / 3); }
	.products-box .view-list .box .txtbox { padding:30px 30px 130px; }
	.products-box .view-list .box .btn { left:30px; bottom:30px; width:calc(100% - (30px * 2)); height:50px; }
}
@media screen and (max-width:1024px){
	.products-box .products-location { margin-bottom:60px; }
	.products-box .products-location dl { padding-bottom:12px; }
	.products-box .products-location dt { gap:8px; }
	.products-box .products-location dt img { width:18px; }
	.products-box .products-location dl,
	.products-box .products-location dd { gap:5px 34px; }
	.products-box .products-location dd span:before,
	.products-box .products-location dd strong:before { left:-25px; }
	.products-box .view-list { margin-top:30px; }
	.products-box .view-list .box .txtbox { padding:20px 20px 90px; }
	.products-box .view-list .box .txtbox .top .txt { margin-top:6px; }
	.products-box .view-list .box .btn { left:20px; bottom:20px; width:calc(100% - (20px * 2)); height:45px; }
}
@media screen and (max-width:760px){
	.products-box .products-location { margin-bottom:30px; }
	.products-box .products-location dl { padding-bottom:8px; }
	.products-box .products-location dt { gap:6px; }
	.products-box .products-location dt img { width:16px; }
	.products-box .products-location dl,
	.products-box .products-location dd { gap:5px 25px; }
	.products-box .products-location dd span:before,
	.products-box .products-location dd strong:before { top:40%; left:-20px; background-size:16px auto; }
	.products-box .view-list { margin-top:15px; gap:5px; }
	.products-box .view-list .box { width:calc((100% - 5px) / 2); }
	.products-box .view-list .box .txtbox { padding:15px 10px 70px; }
	.products-box .view-list .box .txtbox .top .txt { margin-top:6px; }
	.products-box .view-list .box .btn { left:10px; bottom:15px; width:calc(100% - (15px * 2)); height:40px; }
}
@media screen and (max-width:480px){
	.products-box .view-list .box { width:100%; }
}

/* animation */
.products-box .view-list { opacity:0; }
.products-box .view-list.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }



.products-box .detail-box h4.stit { color:#111; font-size:var(--font36); font-weight:400; line-height:1.3; padding-bottom:24px; margin-bottom:40px; border-bottom:1px solid #111; }
.products-box .detail-box .top-view { display:flex; flex-wrap:wrap; }
.products-box .detail-box .top-view .imgbox { width:47%; }
.products-box .detail-box .top-view .imgbox .slide-wrap { position:relative; width:100%; }
.products-box .detail-box .top-view .imgbox .slide-wrap .main-swiper { position:relative; overflow:hidden; border-radius:var(--borderR20); }
.products-box .detail-box .top-view .imgbox .slide-wrap .main-swiper .swiper-slide { position:relative; width:100%; overflow:hidden; background:#f5f5f5; }
.products-box .detail-box .top-view .imgbox .slide-wrap .main-swiper .swiper-slide figure { position:relative; width:100%; }
.products-box .detail-box .top-view .imgbox .slide-wrap .main-swiper .swiper-slide figure:before { content:""; display:block; padding-bottom:75%; }
.products-box .detail-box .top-view .imgbox .slide-wrap .main-swiper .swiper-slide figure img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:80%; max-height:80%; object-fit:cover; }
.products-box .detail-box .top-view .imgbox .slide-wrap .bottom { position:relative; margin-top:24px; padding:0 48px; width:100%; }
.products-box .detail-box .top-view .imgbox .slide-wrap .sub-swiper { position:relative; overflow:hidden; width:100%; }
.products-box .detail-box .top-view .imgbox .slide-wrap .sub-swiper .swiper-slide { position:relative; width:100%; overflow:hidden; cursor:pointer; border-radius:var(--borderR10); }
.products-box .detail-box .top-view .imgbox .slide-wrap .sub-swiper .swiper-slide:before { content:""; display:block; opacity:0; position:absolute; left:-1px; top:-1px; z-index:3; width:calc(100% + 2px); height:calc(100% + 2px); border:3px solid var(--mainColor); transition:all 0.4s; border-radius:var(--borderR10); overflow:hidden; }
.products-box .detail-box .top-view .imgbox .slide-wrap .sub-swiper .swiper-slide-thumb-active:before { opacity:1; }
.products-box .detail-box .top-view .imgbox .slide-wrap .sub-swiper .swiper-slide figure { position:relative; width:100%; background:#f5f5f5; }
.products-box .detail-box .top-view .imgbox .slide-wrap .sub-swiper .swiper-slide figure:before { content:""; display:block; padding-bottom:75%; }
.products-box .detail-box .top-view .imgbox .slide-wrap .sub-swiper .swiper-slide figure img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:70%; max-height:70%; object-fit:cover; }
.products-box .detail-box .top-view .imgbox .slide-wrap .btn-pn { transition:all 0.4s; position:absolute; left:0; top:0; opacity:1; outline:none; margin:0; padding:0; width:36px; height:100%; text-indent:-9999em; overflow:hidden; border:2px solid #eee; background:url(/img/svg/slide_btn.svg) center center no-repeat; border-radius:var(--borderR8); }
.products-box .detail-box .top-view .imgbox .slide-wrap .swiper-button-next { transform:rotate(180deg); left:unset; right:0; }
.products-box .detail-box .top-view .imgbox .slide-wrap .btn-pn:hover { background:var(--mainColor) url(/img/svg/slide_btn_on.svg) center center no-repeat; border-color:var(--mainColor); }
.products-box .detail-box .top-view .imgbox .slide-wrap .btn-pn.swiper-button-disabled,
.products-box .detail-box .top-view .imgbox .slide-wrap .btn-pn.swiper-button-disabled:hover { background-image:url(/img/svg/slide_btn_off.svg); border-color:#f2f2f2; }
.products-box .detail-box .info-box { width:calc(100% - 47%); padding-left:120px; }
.products-box .detail-box .info-box h4 { color:#111; font-size:var(--font44); font-weight:700; line-height:1.3; padding-bottom:25px; border-bottom:1px solid #111; }
.products-box .detail-box .info-box .txtbox { margin-top:60px; }
.products-box .detail-box .info-box .txtbox dl:not(:last-child) { margin-bottom:48px; } 
.products-box .detail-box .info-box .txtbox dt { color:var(--mainColor); font-size:var(--font26); font-weight:500; line-height:1.3; }
.products-box .detail-box .info-box .txtbox dd { margin-top:24px; }
.products-box .detail-box .info-box .txtbox dd ul.list li:not(:last-child) { margin-bottom:8px; }
.products-box .detail-box .mov-list { display:flex; flex-wrap:wrap; gap:20px; }
.products-box .detail-box .mov-list .box { position:relative; width:calc((100% - 20px) / 2); border-radius:var(--borderR20); overflow:hidden; }
.products-box .detail-box .mov-list .box:before { content:""; display:block; padding-bottom:56.25%; }
.products-box .detail-box .mov-list .box .imgbox { position:absolute; left:0; top:0; width:100%; height:100%; }
.products-box .detail-box .mov-list .box .imgbox > img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; }
.products-box .detail-box .mov-list .box .imgbox .play { position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.products-box .detail-box .mov-list .box .imgbox .play span { transition:all 0.3s; width:100px; height:100px; border-radius:100px; background:rgba(0, 0, 0, 0.25); border:4px solid rgba(255, 255, 255, 0.25); display:flex; align-items:center; justify-content:center; }
.products-box .detail-box .mov-list .box .imgbox .play:hover span { background:rgba(0, 0, 0, 0.75);}
.products-box .detail-box .mov-list .box video,
.products-box .detail-box .mov-list .box iframe { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; border-radius:var(--borderR20); }
.products-box .detail-box .function-box .list { display:flex; flex-wrap:wrap; gap:20px; }
.products-box .detail-box .function-box .list .box { width:calc((100% - 80px) / 5); border-radius:var(--borderR20); padding:60px 10px; border:2px solid #fbeaeb; text-align:center; }
.products-box .detail-box .function-box .list .box dt { margin-top:16px; color:#111; font-size:var(--font22); font-weight:500; line-height:1.3; }
.products-box .detail-box .function-box .list .box dd { margin-top:8px; color:#333; font-size:var(--font18); font-weight:300; line-height:1.3; }
@media screen and (max-width:1440px){
	.products-box .detail-box .info-box { padding-left:100px; }
	.products-box .detail-box .function-box .list .box { padding:50px 10px; }
}
@media screen and (max-width:1280px){
	.products-box .detail-box h4.stit { padding-bottom:20px; margin-bottom:32px; }
	.products-box .detail-box .top-view .imgbox { width:50%; }
	.products-box .detail-box .info-box { padding-left:60px; }
	.products-box .detail-box .info-box { width:calc(100% - 50%); }
	.products-box .detail-box .info-box .txtbox { margin-top:40px; }
	.products-box .detail-box .info-box .txtbox dd { margin-top:18px; }
	.products-box .detail-box .mov-list { gap:10px; }
	.products-box .detail-box .mov-list .box { width:calc((100% - 10px) / 2); }
	.products-box .detail-box .mov-list .box .imgbox .play span { width:80px; height:80px; }
	.products-box .detail-box .function-box .list { gap:10px; }
	.products-box .detail-box .function-box .list .box { width:calc((100% - 40px) / 5); padding:40px 10px; }
}
@media screen and (max-width:1024px){
	.products-box .detail-box h4.stit { padding-bottom:12px; margin-bottom:20px; }
	.products-box .detail-box .top-view .imgbox .slide-wrap .bottom { margin-top:12px; padding:0 35px; }
	.products-box .detail-box .top-view .imgbox .slide-wrap .btn-pn { width:30px; }
	.products-box .detail-box .info-box { padding-left:25px; }
	.products-box .detail-box .info-box h4 { padding-bottom:12px; }
	.products-box .detail-box .info-box .txtbox { margin-top:30px; }
	.products-box .detail-box .info-box .txtbox dl:not(:last-child) { margin-bottom:24px; }		
	.products-box .detail-box .info-box .txtbox dd { margin-top:12px; }
	.products-box .detail-box .mov-list { gap:5px; }
	.products-box .detail-box .mov-list .box { width:calc((100% - 5px; ) / 2); }
	.products-box .detail-box .mov-list .box .imgbox .play span { width:60px; height:60px; border-width:2px; }
	.products-box .detail-box .mov-list .box .imgbox .play span img { width:20px; }
	.products-box .detail-box .function-box .list .box { padding:20px 10px; }
	.products-box .detail-box .function-box .list .box .icon img { height:60px; }
	.products-box .detail-box .function-box .list .box dt { margin-top:8px; }
	.products-box .detail-box .function-box .list .box dd { margin-top:4px; }
}
@media screen and (max-width:860px){
	.products-box .detail-box .top-view .imgbox { width:100%; }
	.products-box .detail-box .info-box { width:100%; margin-top:30px; padding:0; }
	.products-box .detail-box .function-box .list { gap:5px; }
	.products-box .detail-box .function-box .list .box { width:calc((100% - 10px) / 3); }
}
@media screen and (max-width:640px){
	.products-box .detail-box h4.stit { padding-bottom:6px; margin-bottom:10px; }
	.products-box .detail-box .top-view .imgbox .slide-wrap .bottom { margin-top:5px; }
	.products-box .detail-box .info-box h4 { padding-bottom:8px; }
	.products-box .detail-box .info-box .txtbox { margin-top:15px; }
	.products-box .detail-box .info-box .txtbox dl:not(:last-child) { margin-bottom:20px; }		
	.products-box .detail-box .info-box .txtbox dd { margin-top:6px; }
	.products-box .detail-box .mov-list { gap:5px; }
	.products-box .detail-box .mov-list .box { width:calc((100% - 5px; ) / 2); }
	.products-box .detail-box .mov-list .box .imgbox .play span { width:50px; height:50px; }
	.products-box .detail-box .mov-list .box .imgbox .play span img { width:18px; }
	.products-box .detail-box .function-box .list .box { width:calc((100% - 5px) / 2); padding:15px 10px; }
	.products-box .detail-box .function-box .list .box .icon img { height:40px; }
}
@media screen and (max-width:480px){
	.products-box .detail-box .mov-list .box { width:100%; }
}

.products-box .detail-box .dataTable { padding-bottom:1px; }
.products-box .detail-box .dataTable table { border-top:1px solid #ddd; }
.products-box .detail-box .dataTable table thead th { padding:20px; color:#333; font-size:var(--font18); font-weight:500; line-height:1.3; text-align:center; border-bottom:1px solid #ddd; background:#f7f7f7; }
.products-box .detail-box .dataTable table thead th span { font-weight:300; }
.products-box .detail-box .dataTable table tbody th { padding:20px; color:#333; font-size:var(--font18); font-weight:500; line-height:1.3; text-align:center; border-bottom:1px solid #ddd; background:#f7f7f7; }
.products-box .detail-box .dataTable table tbody th span { font-weight:300; }
.products-box .detail-box .dataTable table tbody td { padding:20px; color:#333; font-size:var(--font18); font-weight:300; line-height:1.3; text-align:center; border-left:1px solid #ddd; border-bottom:1px solid #ddd; background:#fff; }
@media screen and (max-width:1024px){
	.products-box .detail-box .dataTable table tbody th,
	.products-box .detail-box .dataTable table tbody td { padding:15px 10px; }
}
@media screen and (max-width:760px){
	.products-box .detail-box .dataTable { overflow:auto; }
	.products-box .detail-box .dataTable table { width:800px; }
}
@media screen and (max-width:640px){
	.products-box .detail-box .dataTable table tbody th,
	.products-box .detail-box .dataTable table tbody td { padding:12px 10px; }
}