@charset "utf-8";
/* CSS Document */
.box0{ width:92%; margin:0 auto; max-width:1920px}
.box0L{ margin-left:4%}
.box1{ width:1400px; margin:0 auto}

.gnb li.m_hide{ display:none}

body:not(.pop){ display:flex; flex-direction:column}
body:not(.isIE){ min-height:100vh}
#footer{ margin-top:auto}

.headerT{ padding-top:8em}
.main .headerT{ padding-top:0}

#header{ position:fixed; left:0; top:0; width:100%; z-index:1000; background:#fff}
#header .top_wrap .wrapH{ height:8em; box-sizing:border-box}
#header .top_wrap .logo{ padding-bottom:1.5em}
#header .top_wrap .logo > a{ display:block; height:5em; overflow:hidden}
#header .top_wrap .logo .in{ display:block; height:100%}
#header .top_wrap .logo .in img{ display:block; height:100%}
#header .top_wrap .gnb_wrap{ margin-left:auto}
#header .top_wrap .gnb_wrap .gnb > li{position:relative;}
#header .top_wrap .gnb_wrap .gnb > li .dp1{ padding:1.5em 2em; box-sizing:border-box; min-width:10em; text-align:center; position:relative; text-transform:uppercase; font-weight:500; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; left:50%; top:.25em; width:0; height:1px; background:#000; transform:translateX(-50%); transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.188em}
#header .top_wrap .gnb_wrap .gnb > li.on .dp1,
#header .top_wrap .gnb_wrap .gnb > li .dp1:hover{ color:#c00000}
#header .top_wrap .gnb_wrap .gnb > li.on .dp1:after,
#header .top_wrap .gnb_wrap .gnb > li .dp1:hover:after{ width:2em}
#header .top_wrap .gnb_wrap .gnb > li .dp2{}
.scroll #header{ box-shadow:0 .5em 1em rgba(0,0,0,.1)}

#header .gnb_wrap .gnb > li .dp2:not(.more){ display:none}
#header .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; width:10em; box-sizing:border-box; padding:.5em 1em 1em 1em; background:#fff; display:block; box-shadow:0 1em 1em rgba(0,0,0,.2); transition:transform .3s; opacity:0; visibility:hidden; transform:translate(-50%, -2em); transform-origin:left top}
#header .gnb_wrap .gnb > li:hover .dp2{ opacity:1; visibility:visible; transform:translate(-50%, 0)}
#header .gnb_wrap .gnb > li .dp2 > li > a{ padding:.625em .5em; color:#777; position:relative; transition:.3s}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt{ position:relative}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt:after{ content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:#111; transition:.3s}
#header .gnb_wrap .gnb > li .dp2 > li:hover > a,
#header .gnb_wrap .gnb > li .dp2 > li.on > a{ color:#111}
#header .gnb_wrap .gnb > li .dp2 > li:hover > a .tt:after,
#header .gnb_wrap .gnb > li .dp2 > li.on > a .tt:after{ width:100%}
#header .gnb_wrap .gnb > li .dp2 > li:last-child > a{ border-bottom:none}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:.938em}

/**/
#footer{ background:#222; color:#fff}
#footer .goTop{ width:3.5em; height:3.5em; background:rgba(0,0,0,.7); color:#fff; position:fixed; z-index:10; right:1.5em; bottom:1.5em; border-radius:50%; opacity:0; transform:translateY(2em); transition:.3s}
#footer .goTop .xi{ display:block; font-size:1.75em; line-height:1}
#footer .goTop:hover{ background:#c00000}
.scroll #footer .goTop{ transform:translateY(0); opacity:1}
#footer .info_wrap{ padding:4em 0 4em 0}
#footer .info_wrap .menu{ text-align:right}
#footer .info_wrap .menu > li > a{ padding:.5em 0; opacity:.5; font-size:.875em}
#footer .info_wrap .menu > li > a:hover{ text-decoration:underline}
#footer .info_wrap .menu > li.point > a{ opacity:1}
#footer .info_wrap .info{}
#footer .info_wrap .info > li{ position: relative; float:left; margin-right:3em; margin-bottom:.75em; font-size:.875em; letter-spacing:0;}
#footer .info_wrap .info > li.br{ clear:left}
#footer .info_wrap .info > li:before{ content:""; position:absolute; left:-1.4em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity: .65;}
#footer .info_wrap .info > li.tit:before{ opacity: 0;}
#footer .info_wrap .info > li.copyright{ font-size:.75em; font-weight:300; opacity:.5; margin-top:1.5em}
#footer .info_wrap .info:after{ content:""; display:block; clear:both}
#footer .info_wrap .logo img{ height:6em}

/**/
#contents{ min-height:100vh;}
#contents .doc{ padding:4em 0 16em 0}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

#contents .sub_visual_wrap{ position:relative}
#contents .sub_visual_wrap .bg{}
#contents .sub_visual_wrap .wrap_in{ position:relative; height:29.5em}
#contents .sub_visual_wrap .wrap_in .twrap{ height:100%; color:#fff}
#contents .sub_visual_wrap .wrap_in .twrap .t1{ font-size:1em; letter-spacing:.5em; text-transform:uppercase; opacity:.7; margin:0 0 .5em 0; transform:translateY(3em); opacity:0}
#contents .sub_visual_wrap .wrap_in .twrap .t2{ font-size:3.125em; font-weight:700; text-transform:uppercase; transform:translateY(1em); opacity:0; transform-origin:left top; transition:1.4s}
.load #contents .sub_visual_wrap .wrap_in .twrap .t1{transform:translateY(0); opacity:1; transition:1.3s; transition-delay:.5s}
.load #contents .sub_visual_wrap .wrap_in .twrap .t2{ transform:translateY(0); opacity:1; transition:1.3s; transition-delay:1s}

#contents .sub_tab{}
#contents .sub_tab .gnb > li{ width:100%;}
#contents .sub_tab .gnb > li .dp2 > li{ flex:1 1 1%; max-width:12.5%}
#contents .sub_tab .gnb > li .dp2 > li > a{ position:relative; background:rgba(0,0,0,.5); padding:0 1em; height:4.375em; }
#contents .sub_tab .gnb > li .dp2 > li > a .tt{ position:relative; z-index:1; display:flex; justify-content:center; align-items:center; color:#fff; opacity:.7; font-size:1.125em; font-weight:500; }
#contents .sub_tab .gnb > li .dp2 > li:hover > a{}
#contents .sub_tab .gnb > li .dp2 > li.on{ z-index:1}
#contents .sub_tab .gnb > li .dp2 > li.on > a{background:#fff; }
#contents .sub_tab .gnb > li .dp2 > li.on > a .tt{ color:#111; opacity:1;}

#contents .sub_tit_wrap{ border-bottom:1px solid #ddd; padding:2.5em 0 1em 0; position:relative}
#contents .sub_tit_wrap .ak_wrap{ position:absolute; left:0; top:0; width:0; height:0; z-index:-1; transform:translateY(-100%)}
#contents .sub_tit_wrap .tit{ font-weight:500; font-size:2.625em; color:#333}
#contents .sub_tit_wrap .tit .ts{ font-size:.438em; margin-left:.5em; vertical-align:baseline; transform:translateY(-.125em)}
#contents .sub_tit_wrap .nav > li{ color:#999; font-size:.938em;}
#contents .sub_tit_wrap .nav > li:before{ content:"\e940"; font-family:xeicon; padding:0 .5em; vertical-align:middle}
#contents .sub_tit_wrap .nav > li:first-child:before{ display:none}

/**/
.visualSlider{ transition:1s}
.visualSlider .el{ position:relative; overflow:hidden; height:100vh; overflow:hidden}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.visualSlider_wrap{ position:relative}
.visualSlider_wrap .wrapL{ left:10%; width:50%; box-sizing:border-box}
.visualSlider_wrap .slogan{ color:#fff; z-index:10; position:absolute; top:33%; padding-left:5%; width:100%; box-sizing:border-box}
.visualSlider_wrap .slogan .logo{ height:6em; transform:translateY(3em); opacity:0}
.visualSlider_wrap .slogan .t1{ font-size:3.25em; line-height:1}
.visualSlider_wrap .slogan .t1 > i{ vertical-align:baseline; transform:scaleX(0); opacity:0; transform-origin:left top; transition:1.4s}
.visualSlider_wrap .slogan .t1 > i:first-child{ font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; font-size:1.75em; padding:.5em .063em 0 0}
.visualSlider_wrap .slogan .t2{ font-size:1.5em; margin-top:1em; transform:translateY(2em); opacity:0; line-height:1.5; text-shadow:0 0 10em #fff}
.visualSlider .el.swiper-slide-active .slogan .transT.on > i{ transform:scaleX(1); opacity:1}
.visualSlider .el.swiper-slide-active .slogan .logo{ transform:translateY(0); opacity:1; transition:1.5s; transition-delay:.5s}
.visualSlider .el.swiper-slide-active .slogan .t2{ transform:translateY(0); opacity:1; transition:1.5s; transition-delay:1s}
.visualSlider_wrap .swiper_control{ position:absolute; bottom:2em; left:3%; z-index:10; color:#fff}
.visualSlider_wrap .paging{ display:flex}
.visualSlider_wrap .paging > span{ position:relative; background:rgba(255,255,255,.5); opacity:1; height:2px; width:2em; margin:0; margin-top:2em; border-radius:0; position:relative; transition:.3s}
.visualSlider_wrap .paging > span:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:100%; background:#fff}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active{ width:7em}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:before{ opacity:1}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:after{ width:100%; transition:4s; transition-delay:.5s; transition-timing-function:ease-out}
.scroll .visualSlider{ border-radius:0 0 25% 25%}

.mainScroll{ position:absolute; left:50%; bottom:2em; transform:translateX(-50%); z-index:100}
.mainScroll a{ line-height:1; color:#fff; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite; position:relative}
.mainScroll a .xi{ font-size:2.5em}
.mainScroll a:before{ content:""; position:absolute; left:calc(50% - 1px); top:100%; width:1px; height:4em; background:#fff}
@keyframes downAni{
70% { transform:translateY(0)}
85% { transform:translateY(.5em)}
100% { transform:translateY(0)}
}

.main_business{ margin:0 0 0 -3em}
.main_business > li{ width:33.33%}
.main_business > li .in{ margin:3em 0 0 3em; text-align:center; position: relative;}
.main_business > li .in .ico_wrap .line_wrap{ position:relative}
.isIE .main_business{ margin-top:3em}
.isIE .main_business > li .in .ico_wrap .line_wrap{ display:none}
.main_business > li .in .ico_wrap .line_wrap:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#eee}
.main_business > li .in .ico_wrap .line{ width:50%; max-width:12em; margin:0 auto}
.main_business > li .in .ico_wrap .line .resize{ padding-bottom:50%}
.main_business > li .in .ico_wrap .line svg .bar { stroke: #eee; stroke-dasharray: 400%; stroke-dashoffset: 0; stroke-width: 1em; r:50%; cx:50%; cy:100%; fill:#fff}
.main_business > li .in .ico_wrap .line svg .bar.after{ stroke-dashoffset: 400%;stroke-dashoffset: 400%; transition:stroke-dashoffset 2s; stroke:#e8cab7}
.main_business > li .in .ico_wrap .ico{ width:40%; max-width:4.8em; margin:auto; transform:translateY(-50%); margin-bottom:-1.5em}
.main_business > li .in .ico_wrap .ico svg{ stroke:#999; stroke-width:2; transition:.3s}
.main_business > li .in .ico_wrap .ico svg .point{ stroke:#be5007}
.main_business > li .in .tit_wrap{ font-weight:700; font-size:1.25em; transition:.3s}
.main_business > li .in .img_wrap{ margin-top:1.5em; overflow:hidden; position:relative; transition:.3s}
.main_business > li .in .img_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:2em; box-sizing:border-box; border:1px solid transparent; transition:.3s}
.main_business > li .in .img_wrap .bg{ transition:1s}

.main_business > li .in:hover .ico_wrap .line_wrap:before{ background:#e8cab7}
.main_business > li .in:hover .ico_wrap .line svg .bar.after{stroke-dashoffset: 0}
.main_business > li .in:hover .ico_wrap .ico svg{ stroke:#be5007}
.main_business > li .in:hover .tit_wrap{ color:#c00000}
.main_business > li .in:hover .img_wrap{ border-radius:2em}
.main_business > li .in:hover .img_wrap .bg{ transform:scale(1.2)}
.main_business > li .in:hover .img_wrap:after{ border-color:#c00000}

.main_business > li .in:hover .mtxt_wrap{ border-radius: 2em; transition: .3s;}
/*new_busin*/
.main_business.ncss{     margin: 5em 0 0 -3em;}
.mtxt_wrap{  position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 1.5em; border-radius: 2em 2em 0 0; height: 8em; background: rgba(0,0,0,.35); box-sizing: border-box; transition: .3s; backdrop-filter: blur(2px);}
.mtxt_wrap .ttl{ color: #fff; font-size: 1.15em; font-weight: 500; margin-bottom: .7em;}
.mtxt_wrap .txt{ color: #fff; font-size: 1em; }
.line2{ /*position: relative; margin: .6em 0; height: 2px; width: 40px; background: #c00000;*/}
.main_business.ncss > li .in .flip_wrap{  position: absolute; top: 0; left: 0; transition: .5s; opacity: 0; padding: 2.5em 2em; width: 100%; height: 100%; box-sizing: border-box;}
.main_business.ncss > li:hover .in .flip_wrap{ opacity: 1; background: #fff;}
.main_business.ncss > li .in:hover .img_wrap{ box-shadow: -5px 5px 15px rgba(0,0,0,.1);}
.main_business.ncss > li:hover .in .img_wrap .bg,
.main_business.ncss > li:hover .in .mtxt_wrap{ opacity: 0; transition: .5s;}
.main_business.ncss > li .in .flip_wrap .f_img {  margin: auto; position: relative; background: #fff;  z-index: 111;transition: .35s; border-radius: 2em; overflow: hidden; border: 1px solid #c00000;}
.main_business.ncss > li .in .flip_wrap .f_img > img{ width: 100%; height: 10em; object-fit: cover;}
.main_business.ncss > li .in .flip_wrap .f_txt{ position: relative; margin-top: 3em; padding-top: 1em; text-align: center;}
.main_business.ncss > li .in .flip_wrap .view{ display: inline-block; padding: .8em 1.5em; border: 1px solid  #111;}
.main_business.ncss > li .in .flip_wrap .f_txt:before{  content: ''; position: absolute; width: 10px; height: 10px; left: 50%; top: -0.75em; background: #c00000; transform: translateX(-50%); border-radius: 50%; z-index: 111;}
.main_business.ncss > li .in .flip_wrap .f_txt:after{ content: ''; position: absolute; left: 50%; top: calc(-4em + 0.25em);  width: 1px; height: 3em; background: #ddd; transform: translateX(-50%); z-index: 0;}
.main_business.ncss > li .in:hover .img_wrap:after{ border: none !important;}

.resize.cir svg{ /*top: -94px;*/}


.main_portfolio{ margin:1em 0 0 -2em}
.main_portfolio > li{ width:20%}
.main_portfolio > li > .in{ display:block; margin:2em 0 0 2em; cursor:pointer; position:relative; ; border-radius:1em; overflow:hidden}
.main_portfolio > li > .in .img{ display:block; position:relative; overflow:hidden}
.main_portfolio > li > .in .img img{ width:100%; filter: grayscale(1); transition:.5s}
.main_portfolio > li > .in .tit{ position:absolute; left:0; bottom:0; width:100%; background:rgba(0,0,0,.5); color:#fff; box-sizing:border-box; padding:.75em 1em; font-size:.938em; border-radius:0 0 1em 1em; transform:translateY(100%); transition:.3s}
.main_portfolio > li > .in:hover .tit{ transform:translateY(0)}
.main_portfolio > li > .in:hover .img img{ filter: grayscale(0); transform:scale(1.1)}

.main_product .wrap_tit{ width:24em; margin-right:2em}

.prodSlider .el{ width:14em}
.prodSlider .el .prod_st{ margin:0 0 0 1.5em}
.prodSlider-pagination{ margin:3em 0 0 1.5em; width:calc(92vw - 27.5em)}

.prod_wrap{ margin:-3em 0 0 -3em}
.prod_wrap .prod_st{ margin:3em 0 0 3em}
.prod_st{ border:1px solid #ddd; border-radius:.5em; overflow:hidden; cursor:pointer; transition:.3s}
.prod_st .con_wrap{ text-align:center; padding:1em; border-top:1px solid #eee}
.prod_st .con_wrap .t1{ font-weight:500}
.prod_st .con_wrap .t2{ font-size:.875em; color:#666; margin-top:.5em}
.prod_st:hover{ border-color:#c00000}

.main_box{ padding:5em 0 6em 0}
.main_box.bg1{ background:#f5f5f5}

/**/
.tit1{ font-weight:700; font-size:1.75em}
.tit2{ font-weight:700; font-size:2.25em}
.tt1{ color:#777; font-size:1.063em; line-height:1.8}
.tt2{ font-size:1.125em; line-height:1.8}
.tt3{ color:#666; line-height:1.7}

.page_tt1{ color:#888; font-size:1.125em; line-height:1.8; max-width:50em; margin:0 auto 4em auto}

.more_st{ padding:1em 2em; border:3px solid #ddd; border-radius:.5em; background:#fff; color:#888; transition:.3s}
.more_st .tt{ font-weight:500; font-size:1.125em}
.more_st .arrow{ margin-left:1em; transition:.3s}
.more_st .arrow:before{ content:"\e93f"}
.more_st:hover{ border-color:#111; color:#111}
.more_st:hover .arrow{ transform:translateX(.5em)}
.more_st.s1{ font-size:.875em; border-width:2px; padding:.75em 1.5em}
.more_st.c1{ background:#c00000; color:#fff; border-color:transparent}
.more_st.c2{ background:#111; color:#fff; border-color:transparent}

.list_st .in{ position:relative; padding-left:1em}
.list_st .in:before{ content:""; position:absolute; left:0; top:.375em; width:5px; height:5px; border-radius:50%; background:#666;}

.line_st{ border-top:1px solid #ddd; margin:5em 0}
.line_st.m1{ margin:1em 0}
.line_st.c1{ border-color:#666}

.line_st2{ height:1px; width:1.5em; margin:1em auto; background:#333}

.agree_box{ border-radius:.5em; overflow:hidden; box-shadow:0 0 1em rgba(0,0,0,.1)}
.agree_box .agree_con{ padding:4em 3em; line-height:1.5; color:#666}
.agree_box .agree_con > *{ margin-bottom:.5em}
.agree_box .agree_con p > strong{ font-size:1.25em; font-weight:500; margin:2em 0 .5em 0; color:#111; color:var(--co1)}
.agree_box .agree_con p:first-child > strong{ margin-top:0}
.agree_box .agree_con .div_page{ margin-bottom:3em}
.agree_box.st1 .agree_con{ padding:1.5em; font-size:.938em; color:#666; color:var(--co6)}
.agree_box .agree_con .tit{ font-weight:500; color:#333; color:var(--co3); font-size:1.125em; margin-bottom:1em}
.agree_box .agree_check{ padding:1em 1.5em; border-top:1px solid #eee; border-top-color:var(--lineE)}
.agree_box.st1{ box-shadow:none; border:1px solid #eee}
.agree_box.st1 .agree_con{ padding:2em}
.agree_box.st2{ box-shadow:none}
.agree_box.st2 .agree_con{ padding:0; font-size:.938em}

/**/
.page_customer_wrap{ position:relative}
.page_customer_wrap{ margin:0 0 -1em -1em;}
.page_customer_wrap .el{width:25%;}
.page_customer_wrap .el .wrap_in{ display:block; text-align:center; background:#fff;  margin:0 0 1em 1em; /*border-radius:.5em; box-shadow:0 0 .5em rgba(0,0,0,.1);*/ border:1px solid #eee; padding:1.5em 1em;}
.page_customer_wrap .el .wrap_in .in{ display:block; position:relative; height:100%}
.page_customer_wrap .el .wrap_in img{ max-height:100%}
.page_customer_wrap .el:hover .wrap_in{transition:.5s; border:1px solid #c00000; border-radius:2em;}

.sub_company_overview .w1{ width:40%}
.sub_company_overview .w1 img{ width:100%}
.sub_company_overview .w2{ width:56%; margin-left:auto}
.sub_company_overview .moveL{ transform:translateX(-6em)}

.quote_wrap{ padding:1.5em 2.5em; position:relative}
.quote{ position:absolute; right:0; bottom:.5em; width:3em}
.quote.start{ left:-.5em; top:.5em; transform: rotateY(180deg)}
.quote svg{ fill:#eee}
.quote_wrap p{ position:relative}

.sub_organization .wrap_in{ display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; position:relative; text-align:center; line-height:1.2}
.sub_organization .division .wrap_in{ width:13em; margin:0 auto; color:#fff; background:#222; border-radius:.5em; height:5em}
.sub_organization .division .wrap_in .t1{ font-size:1.375em; font-weight:700}
.sub_organization .division:not(:first-child) .wrap_in{ margin-top:3em}
.sub_organization .division:not(:first-child) .wrap_in:before{ content:""; position:absolute; left:50%; bottom:100%; width:1px; height:4em; background:#ddd}
.sub_organization .list{ display:flex; position:relative; margin-top:4em; padding-top:4em}
.sub_organization .list:before{ content:""; position:absolute; left:50%; bottom:100%; height:4em; width:1px; background:#ddd}
.sub_organization .list > li{ flex:1 1 1%; position:relative}
.sub_organization .list > li:before,
.sub_organization .list > li:after{ content:""; position:absolute; background:#ddd;}
.sub_organization .list > li:before{ left:50%; bottom:100%; height:4em; width:1px;}
.sub_organization .list > li:after{ right:50%; bottom:calc(100% + 4em); height:1px; width:100%}
.sub_organization .list > li:first-child:after{ display:none}
.sub_organization .list > li > .wrap_in{ background:#666; margin:0 1em; height:4em; border-radius:1em; overflow:hidden; padding:.5em; color:#fff; box-sizing:border-box}
.sub_organization .list > li > .wrap_in.c1{ border:2px solid #999; color:#666; background:#fff}
.sub_organization .list > li .t1{ font-weight:500; font-size:1.125em}
.sub_organization .list > li .t2{ font-weight:500; font-size:1.063em}
.sub_organization .list > li .t3{ color:#777; font-size:.938em}
.sub_organization .list > li > .wrap_sub{ padding:1em; background:#f5f5f5; margin:.5em 1em; border-radius:1em}
.sub_organization .list > li > .wrap_sub > li{ margin:.75em 0}
.sub_organization .list.st1{ margin-top:0; justify-content:center; align-items:center}
.sub_organization .list.st1:before{ height:100%; top:0}
.sub_organization .list.st1:after{ display:none}
.sub_organization .list.st1 > li.left:before{ left:auto; right:0; width:6em; height:1px; top:50%}
.sub_organization .list.st1 > li.left .wrap_in{ margin:0 6em 0 auto; width:16em}
.sub_organization .list.st1 > li.right .wrap_in{ margin:1em auto 1em 8em; width:10em; position:relative}
.sub_organization .list.st1 > li.right:before{ left:0; width:4em; height:1px; top:50%}
.sub_organization .list.st1 > li.right:after{ left:4em; top:3em; height:calc(100% - 6em); width:1px}
.sub_organization .list.st2{ flex-direction:column; margin:0; padding:0}
.sub_organization .list.st2:before,
.sub_organization .list.st2 > li:after{ display:none}
.sub_organization .list.st2 > li > .wrap_in{ margin:0}
.sub_organization .list.st2 > li:before{ width:4em; height:1px; left:4em; top:50%}

.sub_history_wrap .wrap_img{ width:30em; margin-right:7em}
.sub_history{ position:relative; margin:2em 0}
.sub_history:before{ content:""; position:absolute; left:13em; top:1.125em; width:1px; height:100%; background:#ddd}
.sub_history .wrap_in{ position:relative}
.sub_history .wrap_in:last-child:after{ content:""; position:absolute; left:13em; top:1.125em; width:1px; height:100%;}
.sub_history .wrap_in:not(:first-child){ margin-top:6em}
.sub_history .wrap_year{ width:20em}
.sub_history .wrap_year .t1{ font-size:1.5em}
.sub_history .wrap_year .t1 .no{ font-size:1.25em; vertical-align:baseline; font-weight:700; letter-spacing:-.063em; margin-right:.125em}
.sub_history .wrap_con .list{ position:relative; margin-top:.5em}
.sub_history .wrap_con .list:before{ content:""; position:absolute; top:.625em; right:calc(100% + 7em); width:5em; height:1px; background:#ddd}
.sub_history .wrap_con .list > li{ position:relative}
.sub_history .wrap_con .list > li:before{ content:""; position:absolute; top:.625em; right:calc(100% + 2em); width:5em; height:1px; background:#ddd}
.sub_history .wrap_con .list > li:after{ content:""; position:absolute; top:.625em; right:calc(100% + 7em); transform:translate(50%,-50%); margin:1px 0 0 1px; width:.375em; height:.375em; background:#333; border-radius:50%; z-index:1}
.sub_history .wrap_con .list > li:not(:first-child){ margin-top:3em}
.sub_history .wrap_con .list .month{ width:6em}
.sub_history .wrap_con .list .month .t1{ font-weight:500; font-size:1.188em}
.sub_history .wrap_con .list .con{ margin-top:.25em}
.sub_history .wrap_con .list .con .t1{color:#777}
.sub_history .wrap_con .list .con .t1:not(:first-child){ margin-top:.875em}
.sub_history .wrap_con .list .con .t1 .sub{ display:block; position:relative; padding-left:.75em; margin-top:.5em}
.sub_history .wrap_con .list .con .t1 .sub:before{ content:"-"; position:absolute; left:0; top:0}

.sub_services_business{ margin:0 0 0 -2em}
.sub_services_business > li{ width:33.33%}
.sub_services_business > li .wrap_in{ margin:-3em 0 0 2em; padding:0 2em; height:calc(100% + 3em)}
.sub_services_business > li .wrap_in .tit_wrap{ position:relative; background:#fff; padding:0 1em; display:inline-flex; transform:translate(-3.5em,3em); z-index:1}
.sub_services_business > li .wrap_in .tit_wrap .ico{ width:4.5em; padding:1em; background:#fff}
.sub_services_business > li .wrap_in .tit_wrap .ico img{ width:100%}
.sub_services_business > li .wrap_in .tit_wrap .ico svg .line{ fill: none; stroke: #111111; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round}
.sub_services_business > li .wrap_in.c1 .tit_wrap .ico svg .point{ fill: #b0c4ed}
.sub_services_business > li .wrap_in.c2 .tit_wrap .ico svg .point{ fill: #ffcf9f}
.sub_services_business > li .wrap_in.c2 .tit_wrap .ico svg .point2{ fill: #ffbbbb}
.sub_services_business > li .wrap_in.c3 .tit_wrap .ico svg .point{ fill: #cfedbc}
.sub_services_business > li .wrap_in .tit_wrap .t1{ font-weight:700; font-size:1.75em; line-height:1.1}
.sub_services_business > li .wrap_in .tit_wrap .t2{ font-weight:700; font-size:1.75em; line-height:1.1; color:#333}
.sub_services_business > li .wrap_in .tit_wrap .t2 .c1{ color:#777}
.sub_services_business > li .wrap_in.c1 .tit_wrap .t1{ color:#b0c4ed}
.sub_services_business > li .wrap_in.c2 .tit_wrap .t1{ color:#ffcf9f}
.sub_services_business > li .wrap_in.c2 .tit_wrap .t1 .c1{ color:#ffbbbb}
.sub_services_business > li .wrap_in.c3 .tit_wrap .t1{ color:#cfedbc}
.sub_services_business > li .wrap_in .con_wrap{ position:relative}
.sub_services_business > li .wrap_in .con_wrap .shadow{ position:absolute; left:0; top:0; width:calc(100% - 2.5em); height:calc(100% - 2.5em); box-shadow:2.5em 2.5em 1em rgba(0,0,0,.2)}
.sub_services_business > li .wrap_in .con_wrap .con{ border:1px solid #ddd; padding:4em; position:relative; background:#fff; box-sizing:border-box; height:100%}
.sub_services_business > li .wrap_in .con_wrap:before,
.sub_services_business > li .wrap_in .con_wrap:after{ content:""; position:absolute; width:3em; height:3em; background:#fff; transform:rotate(45deg); z-index:1}
.sub_services_business > li .wrap_in .con_wrap:before{ right:-1.5em; top:-1.5em; border-bottom:1px solid #ddd;}
.sub_services_business > li .wrap_in .con_wrap:after{ left:-1.5em; bottom:-1.5em; border-top:1px solid #ddd}

.sub_services_solution > li{ width:25%}
.sub_services_solution > li .wrap_in{ padding:2em 2em 4em 2em; text-align:center; box-sizing:border-box; height:100%; position:relative}
.sub_services_solution > li .wrap_in:before{ content:""; position:absolute; left:0; top:0; width:calc(100% + 1px); height:calc(100% + 1px); box-sizing:border-box; border:1px solid #ddd}
.sub_services_solution > li .wrap_in:after{ content:""; position:absolute; right:-1.5em; bottom:-1.5em; width:3em; height:3em; background:#fff; transform:rotate(45deg); border-left:1px solid #ddd}
.sub_services_solution > li:nth-child(2n-1) .wrap_in{ background:#f5f5f5}
.sub_services_solution > li .wrap_in .ico{ height:5em; margin-bottom:1em}
.sub_services_solution > li .wrap_in .ico img{ height:70%; display:block}

.sub_services_process{ margin:-3em 0 0 -3em}
.sub_services_process > li{ width:16.66%}
.sub_services_process > li .wrap_in{ margin:3em 0 0 3em; position:relative}
.sub_services_process > li .wrap_in:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:.25em solid #ddd; border-radius:50%; box-sizing:border-box}
.sub_services_process > li .wrap_in .line{ position:absolute; left:0; top:0; width:100%; height:50%; overflow:hidden; box-sizing:border-box}
.sub_services_process > li .wrap_in .line:before{ content:""; position:absolute; left:0; top:0; width:100%; height:200%; border:.5em solid #333; border-radius:50%; box-sizing:border-box}
.sub_services_process > li:nth-child(2n) .wrap_in .line{ top:50%; transform:rotate(180deg)}
.sub_services_process > li .wrap_in .arrow{ position:absolute; left:100%; top:50%; height:1em; width:4.25em; background:#fff; transform:translate(-.5em,-50%); z-index:1}
.sub_services_process > li .wrap_in .arrow .xi{ position:absolute; left:0; top:50%; width:100%; transform:translate(0,-50%); text-align:center; color:#ddd}
.sub_services_process > li .wrap_in .arrow .xi:before{ content:"\e93e"; font-size:1.5em}
.sub_services_process > li:last-child .wrap_in .arrow{ display:none}
.sub_services_process > li .wrap_in .no{ font-weight:700; font-size:1.125em; letter-spacing:-.063em; transform:translateY(-.5em)}
.sub_services_process > li .wrap_in .ico{ font-size:2.25em; line-height:1.5}
.sub_services_process > li .wrap_in .t1{ font-weight:500; color:#666}

.sub_achievement{ margin:-5em 0 0 -3em}
.sub_achievement > li{ width:50%}
.sub_achievement > li .wrap_in{ margin:5em 0 0 3em; border-radius:.5em; border:1px solid #ddd; padding:2em 2.5em; position:relative}
.sub_achievement > li .wrap_in .tit{ position:absolute; left:1em; top:0; padding:0 1em; background:#fff; transform:translateY(-50%); z-index:1}
.sub_achievement > li .wrap_in .tit .no{ font-weight:700; font-size:2em; letter-spacing:-.063em; margin-right:.125em}
.sub_achievement > li .wrap_in .tit .tt{ font-size:1.125em; color:#777; margin-top:.5em}
.sub_achievement > li .wrap_in .list > li .in{ margin-top:1em}

.sub_project_view .top_wrap .info{ width:62%}
.sub_project_view .top_wrap .info .tit{ border-left:.5em solid #c00000; padding:0 0 0 2em; line-height:1}
.sub_project_view .top_wrap .info .tit .t1{ font-size:4em; font-weight:700; letter-spacing:-.063em; color:#ccc}
.sub_project_view .top_wrap .info .tit .t2{ font-weight:500; font-size:1.5em; margin:.5em 0}
.sub_project_view .top_wrap .info .tit .t3{ font-size:1.125em; color:#666}
.sub_project_view .top_wrap .info .img{ margin-top:4em; border-radius:.5em; overflow:hidden}
.sub_project_view .top_wrap .info .img img{ width:100%}
.sub_project_view .top_wrap .img_list{ width:32%; margin-left:auto}
.sub_project_view .top_wrap .img_list > li .wrap_in{ border-radius:.5em; overflow:hidden; margin-bottom:1em}
.sub_project_view .top_wrap .img_list > li .wrap_in img{ /*width:100%*/}
.sub_project_view .top_wrap .img_list2{ margin:3em 0 0 -1em}
.sub_project_view .top_wrap .img_list2 > li{ width:20%}
.sub_project_view .top_wrap .img_list2 > li .wrap_in{ border-radius:.5em; overflow:hidden; margin:1em 0 0 1em}
.sub_project_view .editor{ padding:5em 0}

.sub_catalog{}
.sub_catalog .img{ width:20em; box-shadow:0 0 1em rgba(0,0,0,.2)}
.sub_catalog .con{  margin:0 0 1em 3em}
.sub_catalog .con .btn{ padding:.75em 1.5em; background:#333; color:#fff; transition:.3s}
.sub_catalog .con .btn .xi{ margin-right:.25em}
.sub_catalog .con .btn:hover{ background:#c00000; border-radius:.5em}

.mapH{ height:100vh; visibility:hidden; position:absolute; width:0; z-index:-1}

.sub_equip .tit_wrap{ width:10em; margin-right:2em; background:#666; color:#fff; transition:.3s}
.sub_equip:hover .tit_wrap{ background:#333}
.sub_equip .tit_wrap .ico img{ height:2em; margin-bottom:1.5em}
.sub_equip .list{ margin:-1em 0 0 -1em}
.sub_equip .list > li{ width:25%}
.sub_equip .list > li .wrap_in{ margin:1em 0 0 1em}
.sub_equip_wrap > li:not(:first-child){ margin-top:6em}
.sub_equip_wrap > li:not(:first-child) .tit_wrap{ position:relative}
.sub_equip_wrap > li:not(:first-child) .tit_wrap:before{ content:""; position: absolute; left:50%; bottom:100%; width:1px; height:6em; border-left:1px dotted #000}
.sub_equip_wrap > li:not(:first-child) .tit_wrap:after{ content:""; position: absolute; left:50%; bottom:calc(100% + 3em); width:.5em; height:.5em; background: #c00000; transform:translate(-50%,50%); border-radius:50%}

/**/
/*quick*/
#quick{ position:fixed; z-index:999; top:79%; right:1vw; transform:translateY(-50%);}
#quick .quick_wrap{ display: flex; flex-direction: column; align-items: flex-end;}
#quick .quick_wrap:before{ /*content:""; position:absolute; top:2em; left:0; bottom:0; width:100%; background:#fff; */}
#quick .quick_wrap > li{ position:relative; margin-bottom: .8em; position:relative; display: flex; align-items: center; justify-content: center; width: 3.8em; height: 3.8em; min-width: 3.8em; min-height: 3.8em; border-radius: 6em; box-shadow:0 .375em .75em rgba(27,60,111,.1); text-align:center; background: #fdfdfd; border: 1px solid #f0f0f0; /*background: #f1f1f1;*/  }
#quick .quick_wrap > li .in{ position: relative; align-items: center;}
#quick .quick_wrap > li .in .ico{ display:inline-block; width: 1.1em; font-size: 1.85em; transition:.3s; color: #fff;}
#quick .quick_wrap > li .in .tt{ position: absolute; min-width: 8em; font-size: .95em; padding: 0.35em 1em; border-radius: 1em; background: #faa; color: #fff; transform: translate( -190px, -30px); opacity: 0; transition: .35s ease-in-out; background: rgba(0,0,0,.5);}
#quick .quick_wrap > li .in:hover .tt{ opacity: 1; transition: .35s ease-in-out;}
#quick .quick_wrap > li .in .ico_t{ color: #fff; margin-top: .2em; font-size: .85em; font-weight: 500; opacity: .75;}
#quick .quick_wrap > li .in.tel .ico_t{ font-weight: 600; color: #fff; font-size: 1em; opacity: 1;}
#quick .quick_wrap > li .in .ico > img{ }
#quick .quick_wrap > li .in .ico.youtube{ color: #ff0000;}
#quick .quick_wrap > li .in .ico img{ width:100%;}
#quick .quick_wrap > li .in .t1{ font-size:1.125em;}
#quick .quick_wrap > li .in .t2{ font-size:.875em; font-weight: 600;}
#quick .quick_wrap > li.tel .ico{ /*width:1.825em;*/}
#quick .quick_wrap > li.tel .ico.img_l{ width: 100%;}
#quick .quick_wrap > li.tel img{ width: 4.825em;}
#quick .quick_wrap > li.time{ padding:0 .625em;}
#quick .quick_wrap > li.time .in{ background:#f5f5f5;}
#quick .quick_wrap > li.top{ padding:1.25em 1.25em;}
#quick .quick_wrap > li.top .in{ width:3.75em; height:3.75em; background:#0f6238; border-radius:50%; color:#fff; transition:.2s;}
#quick .quick_wrap > li.top .in > div{ margin-top: .5em;}
#quick .quick_wrap > li.top .in .xi{ font-size:1.125em;}
#quick .quick_wrap > li.top .in .tt{ font-size:.750em;}
#quick .quick_wrap > li .in[href]:hover .ico{ transform:rotateY(180deg);}
#quick .quick_wrap > li.top .in:hover{ background:#333;}

/**/