@charset "UTF-8";

:root {
    --cursor-size: 10px;
    --cursor-bg: rgba(0,0,0,.50);
    --cursor-text-color: #fff;
    --cursor-font-size: 0;
  }
  

.main-visual {height:960px; position: relative; overflow:hidden;}
.main-visual  #myVideo{position: absolute;bottom: 0;top:0;right:0;width: 100%;height: 100%;background-size: 100% 100%;background-color: black;object-fit: cover;z-index:3;}
.main-visual .content {position:absolute; bottom:30%; left: 0; width:100%; color:var(--white-color);  text-align: center; z-index:4}
.main-visual .content h2 {font-size:var(--font-size-80); line-height:1.4em; font-weight: 700; margin-bottom:20px;}
.main-visual .content .txt {font-size:var(--font-size-50); line-height:1.2em; font-weight: 500;}

.main-title {text-align:center; margin-bottom: 20px;}
.main-title h2 {font-size:var(--font-size-55); line-height:1.4em; font-weight: 700; margin-bottom:15px; color:var(--dark-color);}
.main-title .cnt {font-size:var(--font-size-24); line-height:1.4em; color:var(--dark-color-55)}

.main-business {background:#f6f6f6; padding:100px 0 75px;}
.main-business ul {margin:0 -15px;}
.main-business ul li {padding:0 15px;}
.main-business ul li a {display:block; height: 460px; display:flex; align-items: center; justify-content: center; text-align:center;}
.main-business ul li .box {width:100%; height:380px; background:#fff; border-radius: 30px; padding: 40px 20px 0; transition: .3s;}
.main-business ul li .box .icon {width:160px; height: 160px; background-color:#007df3; background-position: 50% 50%; background-repeat: no-repeat; border-radius: 100%; margin:0 auto 40px; transition: .3s;}
.main-business ul li .box h3 {font-size:var(--font-size-24); line-height:1.4em; color:var(--dark-color-44); font-weight: 700; margin-bottom:34px; transition: .3s;}
.main-business ul li .box .cnt {font-size:var(--font-size-18); line-height: 1.6em; color:var(--white-color); opacity:0; height:0; overflow:hidden; font-weight: 500; transition: .3s; }
.main-business ul li .box .more {position: relative; width:180px; height: 50px; margin:0 auto; border:1px solid #bcbcbc; border-radius: 50px; padding:0 24px;  display:flex; align-items: center; font-weight: 500; font-size:var(--font-size-16); line-height:1.2em; color:var(--dark-color);}
.main-business ul li .box .more:after {content:""; position: absolute; top:0; right:24px; width:14px; height: 100%; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain;} 
.main-business ul li:nth-child(even) .box .icon {background-color:#004b92; }
.main-business ul li.icon1 .box .icon {background-image:url('../img/main/bus_ico1.png');}
.main-business ul li.icon2 .box .icon {background-image:url('../img/main/bus_ico2.png');}
.main-business ul li.icon3 .box .icon {background-image:url('../img/main/bus_ico3.png');}
.main-business ul li.icon4 .box .icon {background-image:url('../img/main/bus_ico4.png');}
.main-business ul li a:hover .box {height: 100%; background:#007df3} 
.main-business ul li:nth-child(even) a:hover .box {background:#004b92}
.main-business ul li a:hover .box .icon {height: 76px; background-color:none; margin: 0 auto 30px; border-radius: 0;}
.main-business ul li a:hover .box h3 {margin-bottom:24px; color:var(--white-color);}
.main-business ul li a:hover .box .cnt {opacity:1; height:calc(1.6em * 1 * 5);  overflow: visible; margin-bottom:30px;}
.main-business ul li a:hover .box .more {background:#fff;}

.main-company {padding:150px 0 110px;}
.main-company .inner {display:flex;}
.main-company .info {width:50%;}
.main-company .info h2 {color:var(--dark-color-66); font-size:var(--font-size-24); line-height:1.4em; font-weight: 700; margin-bottom: 48px;}
.main-company .info .text {margin-bottom: 33px; font-size:var(--font-size-46); line-height:1.56em; color:#bcbcbc; font-weight: 700; transition: color 1s ease;}
.main-company .info .text .text-line {
  --fill: 0%;
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #0a0b30 var(--fill), #bcbcbc var(--fill));
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
.main-company .info .cnt {font-size:var(--font-size-30); line-height:1.6em; color:#000; margin-bottom:55px;}
.main-company .info .more {position: relative; width:180px; height: 50px; border:1px solid #bcbcbc; border-radius: 50px; padding:0 24px;  display:flex; align-items: center; font-weight: 500; font-size:var(--font-size-16); line-height:1.2em; color:var(--dark-color);}
.main-company .info .more:after {content:""; position: absolute; top:0; right:24px; width:14px; height: 100%; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain;} 
.main-company .photo {width:50%;}
.main-company .photo ul {display:flex; flex-wrap:wrap; margin:0 -10px -50px;}
.main-company .photo ul li {width:50%; padding:0 10px; margin-bottom:50px;}
.main-company .photo ul li:nth-child(1) {margin-top: 185px;}
.main-company .photo ul li:nth-child(4) {margin-top: -185px;}
.main-company .photo ul li .pic {overflow:hidden; border-radius: 24px;}

.main-call {margin-bottom: 120px;}
.main-call .box {display:flex; align-items: center; color:var(--white-color); padding:0 175px; width:100%; height:230px; background:url('../img/main/call_bg.jpg') 50% 50% no-repeat; background-size:cover; border-radius: 24px; overflow:hidden;}
.main-call .box .title {font-size:var(--font-size-30); line-height:1.1em; font-weight: 500; margin-right: 90px;}
.main-call .box .tel {font-size:var(--font-size-70); line-height:1.1em; font-weight: 700; text-shadow: 10px 10px 10px rgba(0,0,0,.70); letter-spacing: .09em;}

.main-customer {height: 600px; display:flex; align-items: center;  background:url('../img/main/customer_bg.jpg') 50% 50% no-repeat; background-size:cover;}
.main-customer .inner {display:flex; align-items: center;}
.main-customer .title {width:490px;}
.main-customer .title .main-title {text-align: left; margin-bottom:0;}
.main-customer .title .main-title h2 ,
.main-customer .title .main-title .cnt {color:var(--white-color);}
.main-customer .info {flex:1 1 auto; min-width:0; width:1%;}
.main-customer .info ul {display:flex; margin-left:-30px;}
.main-customer .info ul li {width:calc(50% - 30px); margin-left:30px; color:var(--white-color); background:rgba(34,34,34,.80); border-radius: 24px; transition: .3s;}
.main-customer .info ul li a {display:block; position: relative; padding:30px 45px;}
.main-customer .info ul li h3 {font-size:var(--font-size-30); line-height:1.4em; font-weight: 700; margin-bottom:14px;}
.main-customer .info ul li .cnt {font-size:var(--font-size-22); line-height:1.3em; font-weight: 500; margin-bottom: 60px;}
.main-customer .info ul li .more {position: relative; padding-right: 30px; display:inline-block; font-size:var(--font-size-14); line-height:1.4em; color:var(--white-color);font-weight: 500;}
.main-customer .info ul li .more:after {content:""; position: absolute; top:0; right:0; width:14px; height: 100%; background:url('../img/main/more_w.png') 50% 50% no-repeat; background-size:contain;}
.main-customer .info ul li .icon {position:absolute; bottom:30px; right:30px;}
.main-customer .info ul li:hover {background:rgba(2,127,244,.80);}


/* #main .pin-spacer {
	z-index: auto !important;
	pointer-events: none !important;
} */