.about_cont{
  width: 100%;
}
.visual-sub{
  width: 100%;
  height: 400px;
  background: url('/img/company/visual-sub.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
}
.visual-sub .inr, .greeting .inr, .prc_box .inr, .video_conts .inr{
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
}
.visual-sub .inr{
  display: flex;
  height: 100%;
  align-items: center;
}
.visual-sub .inr .txt_box{}
.visual-sub .inr .txt_box .sub_txt{
  margin: 0 0 45px 0;
  font-size: 18px;
  color: #ffffff;
}
.visual-sub .inr .txt_box .tit{
  font-family: 'Neo_Bold';
  font-size: 55px;
  color: #ffffff;
}
.greeting{}
.greeting .inr{
  padding: 110px 0;
}
.greeting .inr .s_tit{
  margin: 0 0 20px 0;
  font-family: 'Neo_Bold';
  color: #000000;
  font-size: 27px;
  line-height: 40px;
}
.greeting .inr .txt{
  color: #333333;
  font-size: 18px;
  line-height: 33px;
}
.video_conts{
  background-color: #fafafa;
}
.video_conts .inr{
  padding: 100px 0 150px 0;
}
.video_conts .inr .txt_box{
  margin: 0 0 70px 0;
  text-align: center;
}
.video_conts .inr .txt_box .tit{
  position: relative;
  font-size: 26px;
  color: #000000;
  padding: 0 0 50px 0
}
.video_conts .inr .txt_box .tit::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 105px;
  height: 1px;
  background-color: #a7a7a7;
}
.video_conts .inr .txt_box .txt{
  margin: 50px 0 0 0;
  color: #333333;
  font-size: 20px;
}
.video_conts .inr .video_box{
  width: 940px;
  height: 528px;
  margin: 0 auto;
}
.video_conts .inr .video_box video{
  width: 100%;
}

.prc_box{

}
.prc_box .inr{
  padding: 110px 0 200px 0;
}
.prc_box .inr .s_tit{
  margin: 0 0 25px 0;
  font-family: 'Neo_Bold';
  color: #000000;
  font-size: 27px;
  line-height: 40px;
}
.prc_box .inr .txt{
  color: #333333;
  font-size: 18px;
  line-height: 32px;
}
.prc_box .frm_box{
  margin: 70px 0 0 0;
}
.prc_box .frm_box > ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
}
.prc_box .frm_box > ul > li{
  flex: 1;
  overflow:hidden;
  position:relative;
  box-sizing:border-box;
  padding: 33px 33px 100px 33px;
}
.prc_box .frm_box > ul > li:after{
  display:block;
  content:"";
  width:100%;
  height:100%;
  background:#ece8df;
  position:absolute;
  left:0;
  top:0;
  z-index: 1;
  transform:scaleY(0);
  transition:all 0.6s;
}
.prc_box .frm_box > ul > li .bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform:scale(1.1);
  transition:all 0.6s;
}
.prc_box .frm_box > ul > li:nth-child(1) .bg{
  background: url('/img/company/prc_img01.png') no-repeat center;
  background-size:cover;
}
.prc_box .frm_box > ul > li:nth-child(2) .bg{
  background:url('/img/company/prc_img02.png') no-repeat center;
  background-size:cover;
}
.prc_box .frm_box > ul > li:nth-child(3) .bg{
  background:url('/img/company/prc_img03.png') no-repeat center;
  background-size:cover;
}
.prc_box .frm_box > ul > li:nth-child(4) .bg{
  background:url('/img/company/prc_img04.png') no-repeat center;
  background-size:cover;
}
.prc_box .frm_box > ul > li .txtwrap{
  position:relative;
  z-index:10;
}
.prc_box .frm_box > ul > li .txtwrap .tit{}
.prc_box .frm_box > ul > li .txtwrap .tit .kr{
  font-family: 'Neo_Bold';
  font-size:21px;
  color:#000000;
}
.prc_box .frm_box > ul > li .txtwrap .tit .en{
  margin: 0 0 15px 0;
  font-family: 'Neo_Bold';
  font-size:15px;
  color:#000000;
}
.prc_box .frm_box > ul > li .txtwrap .txt{
    font-family: 'Neo_Semibold';
  position:relative;
  padding-top:85px;
  margin-top:44px;
  font-size:16px;
  color:#000;
  line-height:30px;
  opacity:0;transform:translateY(-40px);
  transition:all 0.3s;
}
.prc_box .frm_box > ul > li .txtwrap .txt:before{
  display:block;
  content:"";
  width:1px;
  height:57px;
  background:#000000;
  position:absolute;
  left:0;
  top:0;
}
.prc_box .frm_box > ul > li:hover .bg{
  transform:scale(1);
}
.prc_box .frm_box > ul > li:hover:after{
  transform:scaleY(1);
}
.prc_box .frm_box > ul > li:hover .txtwrap .txt{
  opacity:1;
  transform:translateY(0px);
  transition:all 0.6s 0.2s;
}
.prc_box .frm_box > ul > li .btn{
  opacity:0;
  text-align: center;
  position: absolute;
  right: 19px;
  bottom: 19px;
  opacity:0;transform:translateY(-40px);
  transition:all 0.3s;
}
.prc_box .frm_box > ul > li:hover .btn{
  z-index: 10;
  opacity:1;
  transform:translateY(0px);
  transition:all 0.6s 0.2s;
}
.prc_box .frm_box > ul > li .btn i{
  color: #ffffff;
  background: #000000;
  display: inline-block;
  width: 55px;
  height: 55px;
  font-size: 28px;
  line-height: 55px;
}
.visual-bottom{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 660px;
  background: url('/img/company/visual-bottom.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
}
.visual-bottom .txt_box{
  text-align: center;
}
.visual-bottom .txt_box > .txt{
  margin: 0 0 50px 0;
  font-family: 'Neo_Semibold';
  color: #ffffff;
  font-size: 23px;
  line-height: 40px;
}
.visual-bottom .txt_box .logo{
  font-size: 0;
}
.visual-bottom .txt_box .logo img{
  width: 54px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 18px 0 0;
}
.visual-bottom .txt_box .logo .txt{
  display: inline-block;
  vertical-align: middle;
  font-family: 'Noto_B';
  font-size: 40px;
  color: #ffffff;
}
.visual-bottom .txt_box .logo .txt .stl{
  font-family: 'Noto_L';
  color: #ffffff;
}


@media screen and (max-width:1200px){
  .visual-sub{height: 350px; padding: 0 25px;}
  .visual-sub .inr, .greeting .inr, .prc_box .inr, .video_conts .inr{max-width: 100%;}
  .visual-sub .inr .txt_box .sub_txt{margin: 0 0 40px 0;font-size: 16px;}
  .visual-sub .inr .txt_box .tit{font-size: 45px;}
  .greeting .inr{padding: 90px 25px;}
  .greeting .inr .s_tit{margin: 0 0 18px 0;font-size: 25px;line-height: 38px;}
  .greeting .inr .txt{font-size: 16px;line-height: 31px;}
  .video_conts .inr{padding: 95px 25px 100px 25px;}
  .video_conts .inr .video_box {height: auto;}
  .video_conts .inr .txt_box{margin: 0 0 55px 0;}
  .video_conts .inr .txt_box .tit{font-size: 23px; padding: 0 0 45px 0}
  .video_conts .inr .txt_box .tit::after{width: 95px;}
  .video_conts .inr .txt_box .txt{margin: 45px 0 0 0;font-size: 18px;}
  .video_conts .inr .video_box{width: 100%;}
  .prc_box .inr{padding: 90px 25px 180px 25px;}
  .prc_box .inr .s_tit{margin: 0 0 18px 0; font-size: 25px; line-height: 38px;}
  .prc_box .inr .txt{font-size: 16px;line-height: 31px;}
  .prc_box .frm_box{margin: 60px 0 0 0;}
  .prc_box .frm_box > ul{gap:20px;}
  .prc_box .frm_box > ul > li{flex: 0 1 calc(50% - 10px);max-width: calc(50% - 10px);padding: 30px 30px 90px 30px;}
  .prc_box .frm_box > ul > li .txtwrap .tit .kr{font-size:19px;}
  .prc_box .frm_box > ul > li .txtwrap .tit .en{margin: 0 0 13px 0;font-size:13px;}
  .prc_box .frm_box > ul > li .txtwrap .txt{padding-top:80px;margin-top:40px;font-size:14px;line-height:28px;}
  .prc_box .frm_box > ul > li .txtwrap .txt:before{height:52px;}
  .prc_box .frm_box > ul > li .btn{right: 15px; bottom: 15px;}
  .prc_box .frm_box > ul > li .btn i{width: 50px; height: 50px;font-size: 23px; line-height: 50px;}
  .visual-bottom{height: 600px;}
  .visual-bottom .txt_box > .txt{margin: 0 0 45px 0;font-size: 20px;line-height: 37px;}
  .visual-bottom .txt_box .logo img{margin: 0 15px 0 0; width: 38px;}
  .visual-bottom .txt_box .logo .txt{font-size: 35px;}

}

@media screen and (max-width:767px){
  .visual-sub{height: 210px; padding: 0 20px;}
  .visual-sub .inr .txt_box .sub_txt{margin: 0 0 28px 0;font-size: 13px;}
  .visual-sub .inr .txt_box .tit{font-size: 33px;}
  .greeting .inr{padding: 60px 20px;}
  .greeting .inr .s_tit{margin: 0 0 13px 0;font-size: 18px;line-height: 28px;}
  .greeting .inr .txt{font-size: 14px;line-height: 26px;}
  .greeting .inr .txt br{display: none;}
  .video_conts .inr{padding: 50px 20px 50px 20px;}
  .video_conts .inr .txt_box{margin: 0 0 35px 0;}
  .video_conts .inr .txt_box .tit{font-size: 17px; padding: 0 0 30px 0}
  .video_conts .inr .txt_box .tit::after{width: 55px;}
  .video_conts .inr .txt_box .txt{margin: 30px 0 0 0;font-size: 14px; line-height: 22px;}
  .video_conts .inr .video_box {width: 100%;overflow: hidden;  position: relative;height: 300px;}
  .video_conts .inr .video_box video {width: 160%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
  .prc_box .inr{padding: 60px 20px 90px 20px;}
  .prc_box .inr .s_tit{margin: 0 0 14px 0; font-size: 18px; line-height: 28px;}
  .prc_box .inr .s_tit br{display: none;}
  .prc_box .inr .txt{font-size: 14px;line-height: 27px;}
  .prc_box .frm_box{margin: 40px 0 0 0;}
  .prc_box .frm_box > ul {gap: 10px;}
  .prc_box .frm_box > ul > li{flex:100%; max-width: 100%; padding: 0; height: 400px;}
  .prc_box .frm_box > ul > li:after{display: none;}
  .prc_box .frm_box > ul > li .txtwrap{display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
  .prc_box .frm_box > ul > li .txtwrap .tit{padding: 30px 25px;}
  .prc_box .frm_box > ul > li .txtwrap .txt {margin: 0; padding: 30px; opacity: 1;transform: translateY(0px); transition: none; background-color: #ece8df;}
  .prc_box .frm_box > ul > li .bg{transform: scale(1); }
  .prc_box .frm_box > ul > li .txtwrap .txt:before{display: none;}
  .prc_box .frm_box > ul > li .btn {opacity: 1; transform: translateY(0px); transition: none; top: 15px;}
  .prc_box .frm_box > ul > li .btn i{width: 40px; height: 40px;font-size: 22px; line-height: 40px;}
  .visual-bottom{height: 400px;}
  .visual-bottom .txt_box > .txt{margin: 0 0 42px 0;font-size: 17px;line-height: 34px;}
  .visual-bottom .txt_box .logo img{margin: 0 10px 0 0; width: 40px;}
  .visual-bottom .txt_box .logo .txt{font-size: 25px;}
}