@charset "utf-8";

.sub_vis { position:relative; width: 100%; max-width:192rem; margin: 0 auto; height: 41.6rem;  border-radius: 0 0 5rem 5rem; } 
.sub_vis.spot_784, .sub_vis.spot_807 {background:url("/layout/images/www/sub/spot_aboutus.jpg") no-repeat center top / cover;}
.sub_vis.spot_785, .sub_vis.spot_808 {background:url("/layout/images/www/sub/spot_products.jpg") no-repeat center top / cover;}
.sub_vis.spot_786, .sub_vis.spot_809 {background:url("/layout/images/www/sub/spot_facilities.jpg") no-repeat center top / cover;}
.sub_vis.spot_787, .sub_vis.spot_810 {background:url("/layout/images/www/sub/spot_brand.jpg") no-repeat center top / cover;}
.sub_vis.spot_788, .sub_vis.spot_811 {background:url("/layout/images/www/sub/spot_support.jpg") no-repeat center top / cover;}
.sub_vis.spot_101, .sub_vis.spot_812 {background:url("/layout/images/www/sub/spot_sup.jpg") no-repeat center top / cover;}


.sub_vis .inner{display:flex;align-items:center;justify-content:space-between;height:100%;}
.sub_vis h2.tit{font-size:4.4rem;font-weight:700;color:#fff;}
.sub_vis .path{display:inline-flex;align-items:center;gap:0 1rem;margin-top:2rem; color: #fff;}
.sub_vis .path a{font-size:1.5rem;font-weight:600;color:#fff;}
.sub_vis .path a.btn_home{display:inline-flex;}
.sub_vis .path a.btn_home + a,
.sub_vis .path a.btn_home + a + a::before{display:none;}
.sub_vis .snb{display:inline-flex;align-items:center;gap:0 1.6rem;}
.sub_vis .snb > li{position:relative;}
.sub_vis .snb > li > a{display:inline-flex;align-items:center;justify-content:space-between;width:25rem;height:6.2rem;font-weight:600;color:#fff;word-break:keep-all;border-radius:5rem;background-color:rgba(255,255,255,.2);padding:0 1rem 0 3rem;overflow:hidden;}
.sub_vis .snb > li > a:hover { background-color:#212f74; transition:ease-in-out 0.3s; }
.sub_vis .snb > li > a .open{transform:rotate(0);width:4.3rem;height:4.3rem;border-radius:2rem 2rem 2rem .5rem; text-indent:-9999rem;transition:transform .2s; background-color:rgba(217,217,217,.4); }
.sub_vis .snb > li > a .open:after { content: ''; display: block; width: 1.6rem; height: 1rem; background:url(/layout/images/www/main/pnb_sp.png) no-repeat  -7.3rem -4.7rem; margin: -.5rem auto 0;}
.sub_vis .snb > li.on > a .open{transform:rotate(180deg);}
.sub_vis .snb > li ul{ display:none; position:absolute;top:calc(100% + 1.5rem);width:100%;border-radius:2rem;background-color:#212F74;padding:3.2rem;z-index:1;}
.sub_vis .snb > li ul li + li{margin-top:2.4rem;}
.sub_vis .snb > li ul li a{color:#fff;opacity:.7;transition:opacity .2s;}
.sub_vis .snb > li ul li.on a, .sub_vis .snb > li ul li a:hover{opacity:1;}

.sub_lnb{position:relative;}
.sub_lnb::before{position:absolute;top:9rem;left:50%;transform:translateX(-50%);content:'';display:block;width:100%;height:.1rem;background-color:#e0e0e0;}
.sub_lnb .inner{overflow-x:auto;}
.sub_lnb ul{display:flex;align-items:center;justify-content:space-around;width:max-content;min-width:100%;height:9rem;line-height:1;border:0;padding:0;margin:0;}
.sub_lnb ul > li,
.sub_lnb ul > li > a{position:relative;display:inline-flex;align-items:center;justify-content:center;height:100%;font-size:2rem;color:#3f3f3f;background:none !important;}
.sub_lnb ul > li > a { padding: 0 1.2rem;}
.sub_lnb ul > li.on > a { border-bottom:.3rem solid #212F74;}
.sub_lnb ul > li.on,
.sub_lnb ul > li.on > a{font-weight:700;color:#212F74;}
.sub_lnb ul > li.on::before
.sub_lnb ul > li.on > a::before{position:absolute;bottom:0;left:0;content:'';display:block;width:100%;height:.4rem;border-radius:5rem;background-color:#212F74;}


.page_title { position: relative;}
.page_title.inner:after { content: ''; display: block; position: absolute; width: 54rem; height: .1rem; background-color:#e8e8e8; left: 50%; transform: translateX(-50%); bottom: 0;  }
.page_title h3 {  text-align:center; font-size: 4.4rem; font-weight: 600; padding: 10rem 0 5rem; }
#content{padding:10rem 0 20rem;}

.contents_tool { position: absolute; right: 0; top: 10rem;}
.contents_tool button { border: 1px solid #D9D9D9; width: 6rem; height: 6rem; border-radius: 25rem; transition:ease-in-out 0.3s;}
.contents_tool button:hover { border: none; background-color:#212F74;}
.contents_tool button:hover .tool.ico_share::before {filter: contrast(0) brightness(10);}
.contents_tool .list li.close{display:none;}

@media screen and (max-width: 1690px){
	.contents_tool .drop_cnt{left:initial;right:0;transform:translate(0, 100%);}
	.contents_tool .drop_in::before{left:initial;right:2.4rem;transform:translate(0, -100%);}
	.contents_tool .drop_in::after{left:initial;right:2.5rem;transform:translate(0, -100%);}
}
@media screen and (max-width: 1600px) { .contents_tool {right: 5rem;}}
@media screen and (max-width: 990px) { 
	.sub_vis { height: 38rem;}
	.sub_vis .inner { justify-content: space-evenly; flex-direction: column;}
	.sub_vis h2.tit { text-align: center;}
}
@media screen and (max-width: 640px) {
	.sub_vis { height: 27rem;}
	.r_area { display: none;}
	.sub_vis .path { margin-top: .5rem;}
	.sub_vis h2.tit {font-size: 2.9rem;}
	.page_title h3 { padding-top: 5rem; font-size: 2.8rem;}
	.contents_tool { top: 5rem; right: 1rem}
	.contents_tool button{width:4rem;height:4rem;}
	.contents_tool button .tool.ico_share::before{background-position:-47.1rem -2.8rem;width:1.6rem;height:1.8rem;}
	.contents_tool .drop_in{min-width:auto;border:0;padding:0;}
	.contents_tool .drop_in::before,
	.contents_tool .drop_in::after{display:none;}
	.contents_tool .drop_cnt{bottom:-.6rem;}
	.contents_tool .list li span{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important;}
	.contents_tool .list li .tool.ico_facebook_sm::before{background-position:-3.3rem -7.9rem;width:4rem;height:4rem;}
	.contents_tool .list li .tool.ico_x_sm::before{background-position:-8.3rem -7.9rem;width:4rem;height:4rem;}
	.contents_tool .list li .tool.ico_blog_sm::before{background-position:-13.3rem -7.9rem;width:4rem;height:4rem;}
	.contents_tool .list li .tool.ico_close{display:inline-flex;width:4rem;height:4rem;border:.1rem solid #d9d9d9;border-radius:5rem;}
	.contents_tool .list li.close{display:block;}
	
	.page_title.inner:after { width: 50%; }
	#content { padding: 8rem 0 10rem;}
}