@charset "utf-8";


/*** main-view ***/
.main-view{
  position:relative;
  height:960px;
  background:#000;
  overflow:hidden;
  margin:auto;
}
/*
.main-view::after{
  content:"";
  width:100%;
  height:100%;
  background: rgba(0,0,0,.4);
  position:absolute;
  left:0;
  top:0
}
*/
.main-view::before{
  content:"";
  width:100%;
  height:200px;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
  position:absolute;
  left:0;
  bottom:0
}

.main-view .video{
  object-fit: fill;
  width:100%;
  height:100%
}

.main-view .text{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  color:#fff;
  text-align:center;
  width:70%
}

.main-view .text .mtit{
  font-size:70px;
  line-height:80px;
  font-weight:800
}

.main-view .text .mtit em{
  color:rgba(255,255,255,.1);
  -webkit-text-stroke: 1px #fff;
  paint-order: stroke fill;
  font-weight:900
}

.main-view .text .stit{
  font-size:25px;
  margin-bottom:40px
}

.main-view .swiper-button{
  position:absolute;
  z-index:2000;
  left:50%;
  transform: translate(-50%);
  bottom:100px;
  text-align:center;
}

.main-view .swiper-pagination{
  position:static;
  width:auto;
  float:left;
  margin:10px 0 0 15px;
  color:#fff;
  font-size:15px
}

.main-view .swiper-pagination .swiper-pagination-current{
  font-size:19px;
}

.main-view .swiper-button-prev,
.main-view .swiper-button-next{
  position:static;
  background-image: none;
  width:45px;
  height:45px;
  line-height:45px;
  backdrop-filter: saturate(200%) blur(15px);
  background: rgba(255, 255, 255, 0.1);
  float:left;
  margin:0
}

.main-view .swiper-button-prev{
  left: auto;
  right: auto;
  top:0
}

.main-view .swiper-button-next{
  left: auto;
  right: auto;
  top: 0;
}

.main-view .swiper-button-next:after,
.main-view .swiper-button-prev:after{
  font-size:13px;
  color:#fff
}

.main-view .swiper-pagination-bullet{
  backdrop-filter: saturate(200%) blur(15px);
  background: rgba(255, 255, 255, 0.5);
  opacity:1;
  margin:0px 7px
}

.main-view .swiper-pagination-bullet-active{
  background: rgba(255, 255, 255, 1);
}





/*** section ***/
section{
  overflow:hidden;
  padding:150px 0
}

section h2{
  font-size:80px;
  line-height:normal;
  font-weight:900;
  margin-bottom:80px
}

section h2 span{
  display:block;
  font-size:19px;
  margin-top:5px
}

section .area{
  max-width:1480px;
  margin:auto;
}



/*** gallery ***/
.gallery {
  max-width:100%;
  height:100%;
  position:relative;
  padding-top:100px;
}

.gallery h2{
  max-width:1680px;
  margin:auto;
}

.gallery ul{
  width:calc(100% - 500px);
  margin-top:50px
}

.gallery li{
  float:left;
  width:490px;
  margin-right:50px;
}
/*
.gallery li:nth-child(2n){
  margin-top:80px
}
*/
.gallery li a{
  display:block;
}

.gallery li .thumb{
  width:100%;
  height:300px;
  overflow:hidden;
}

.gallery li .thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: all 200ms linear;
}

.gallery li:hover .thumb img{
   transform: scale(1.1);
}

.gallery li .text{
  padding:35px 0 0 0;
  color:#fff
}

.gallery li .tit{
  font-size:27px;
  line-height:33px;
  font-weight:600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.gallery li .con{
  font-size:14px;
  line-height: normal;
  margin-bottom:10px
}

.gallery li .etc{
  font-size:14px;
  margin-top:10px
}

.gallery .swiper-button{
  width:140px;
  position:absolute;
  right:7%;
  top:50px
}

.gallery .swiper-button-next, .gallery .swiper-button-prev{
  background: linear-gradient(-170deg, #15284d, #07132b);
  width:65px;
  height:65px;
  top:50%;
}

.gallery .swiper-button-prev.swiper-button-disabled,
.gallery .swiper-button-next.swiper-button-disabled{
  opacity:1
}

.gallery .swiper-button-next{
  right:0
}

.gallery .swiper-button-prev{
  background:#fff;
  left:0
}

.gallery .swiper-button-next::after{
  color:#fff;
  font-size:19px
}



/*** company ***/
.company{
  text-align:center;
  /*background:linear-gradient(-180deg, #15284d, #07132b);*/
  background:#07132b url(../images/about_bg.png) no-repeat left top;
  color:#fff;
}

.company .tit{
  font-size:50px;
  line-height:49px;
  font-weight:800;
  margin-bottom:30px
}

.company strong{
  font-size:21px
}






/***********************************
sub
***********************************/

/*** top-visual ***/
.top-visual {
  position: relative;
}

.visual-wrap {
  width: 100%;
  height: 450px;
  position: relative;
  overflow: hidden;
}

.visual-wrap .visual {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(1);
  animation: topscale 3s both;
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  padding-top:200px;
  text-align: center;
  color: #fff;
}

.visual-wrap.m1 .visual {background-image: url(../images/visual_bg_m1.png);}
.visual-wrap.m2 .visual {background-image: url(../images/visual_bg_m3.png);}
.visual-wrap.m3 .visual {background-image: url(../images/visual_bg_m2.png);}
.visual-wrap.m4 .visual {background-image: url(../images/visual_bg_m4.png);}
.visual-wrap.m5 .visual {background-image: url(../images/visual_bg_m6.png);}
.visual-wrap.m6 .visual {background-image: url(../images/visual_bg_m5.png);}
.visual-wrap.m7 .visual {background-image: url(../images/visual_bg_m7.png);}

/*common*/
.visual-wrap.cm .visual::after {
  content: none
}

.visual-wrap .visual::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(255, 255, 255, 0));
  z-index: -1;
}

@keyframes topscale {
  0% {
    transform: scale(1.0)
  }

  100% {
    transform: scale(1.05)
  }
}

.top-visual .visual h2 {
  font-size: 65px;
  letter-spacing:-1px;
  font-weight:700;
  color: rgba(255, 255, 255, .1);
  -webkit-text-stroke: 1px #fff;
  paint-order: stroke fill;
}

.top-visual .visual span {
  display: block;
  line-height: 20px;
  margin-top: 20px;
  font-size: 17px;
}




/*** location ***/
#location{
  margin:20px auto 0;
  text-align:center;
  display: inline-block;
}

#location li{
  float:left;
  position:relative;
}

#location li::after{
  content:"";
  background: url(../images/arrow_icon_right.png) no-repeat center;
  background-size:13px;
  width:13px;
  height:13px;
  position:absolute;
  right:-7px;
  top:50%;
  transform: translateY(-50%);
}

#location li a{
  display: inline-block;
  font-size:16px;
  text-align:center;
  padding:0px 10px;
  color:#fff
}

#location li.home img{
  height:15px
}

#location li:last-child::after{
  content:none
}





/*** sub-content ***/
.sub-content{
  margin:auto;
  padding-top:100px
}

.sub-content h3{
  font-size:50px;
  font-weight:900;
  text-align:center;
  margin-bottom:100px
}

.a-box{
  text-align: center;
  padding:150px 0
}

.about-cont{
  position:relative;
}

.about-cont .area{
  width:100%;
  padding:150px 80px 500px 80px;
  height:800px;
  display: inline-block;
  text-align:center;
  background-image: url(../images/sub_about_background2.png);
  background-position: center right;
  background-repeat: no-repeat;
  position:relative;
}

.about-cont.ppf .area{
  background-image: url(../images/sub_ppf_background.png);
}

.about-cont .area .tit{
  font-size:50px;
  font-weight:900;
  color:#fff;
  margin-bottom:50px
}

.about-cont .area .con{
  color:#fff;
}

/*
.about-cont .background{
  font-size:250px;
  position:absolute;
  z-index:-1;
  bottom:10px;
  top:0;
}

.about-cont .background MARQUEE{
  line-height:200px;
  color:#f1f8fc;
  font-weight:900;
  letter-spacing:-1px;
}
*/




/*** ppf-cont ***/
.ppf-cont .section{
  overflow:hidden;
  height:460px;
  position:relative;
}

.ppf-cont .section .text{
  float:left;
  width:50%;
  text-align: center;
  padding:8% 100px
}

.ppf-cont .section .text .tit{
  font-size:30px;
  font-weight:800;
  margin-bottom:15px
}

.ppf-cont .section .text .cir{
  padding:8px;
  /*background:#222;
  color:#fff;*/
  font-weight:600;
  margin-bottom:5px
}

.ppf-cont .section .img{
  float:left;
  width:50%
}

.ppf-cont .section .img img{
  width:100%;
  height:100%
}


.ppf-cont .section:last-child .text{
  float:right;
}

.ppf-cont .section:last-child .img{
  float:left;
}




/*** price ***/
.price-cont{
  margin:auto;
  max-width:1280px;
  padding:50px 0
}

.price-cont:first-child{
  padding-top:0
}

.price-cont .area-table{
  padding:70px;
  background:#222;
}

.price-cont:last-child{
  padding-bottom:90px
}





/*** cont-table ***/
.area-table thead th {
  padding: 15px 11px;
  font-weight: bold;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  color: #fff;
  position: relative;
  vertical-align: middle;
}

.area-table thead th::after {
  content: "";
  width: 100%;
  border-bottom: 1px solid #fff;
  position: absolute;
  left: 0;
  bottom: 0
}

.area-table td {
  padding: 18px 11px;
  font-weight: bold;
  border: 1px solid #fff;
  border-left: 0;
  font-weight: normal;
  vertical-align: middle;
  text-align:center;
}

.area-table td:last-of-type {
  border-right: 0
}

.area-table tbody th {
  border: 1px solid #fff;
  padding: 13px 11px;
  border-left: 0;
  color: #fff;
  font-weight:bold;
  vertical-align: middle;
}

.area-table .r-line{
  border-right: 1px solid #dde2e6 !important;
}





/*** info-table ***/
.info-table table {
  border-top: 2px solid #fff
}

.info-table thead th {
  padding: 15px 11px;
  font-weight: bold;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  color: #fff;
  background:#000;
  position: relative;
  vertical-align: middle;
}

.info-table thead th::after {
  content: "";
  width: 100%;
  border-bottom: 1px solid #053863;
  position: absolute;
  left: 0;
  bottom: 0
}

.info-table thead th:last-of-type {
  border-right: 0
}

.info-table td {
  padding: 18px 11px;
  font-weight: bold;
  border: 1px solid #dde2e6;
  border-left: 0;
  font-weight: normal;
  vertical-align: middle;
  text-align:center
}

.info-table td:last-of-type {
  border-right: 0
}

.info-table tbody th {
  border: 1px solid #fff;
  padding: 13px 11px;
  border-left: 0;
  background:#222;
  color: #fff;
  vertical-align: middle;
}

.info-table .r-line{
  border-right: 1px solid #dde2e6 !important;
}




/*** photo-gallery ***/
.photo-gallery-wrap{
  max-width:1680px;
  margin:0 auto 90px;
}

.photo-gallery{
  margin: auto;
  display: inline-block;
  width:100%
}

.photo-gallery li{
  float:left;
  width:17.5%;
  margin:0 3% 2% 0;
}

.photo-gallery li:nth-child(5n){
  margin-right:0
}

.photo-gallery li a{
  display:block;
  color:#fff
}

.photo-gallery li .thumb{
  width:100%;
  height:220px;
  overflow:hidden;
}

.photo-gallery li .thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: all 200ms linear;
}

.photo-gallery li:hover .thumb img{
   transform: scale(1.1);
}

.photo-gallery li .text{
  padding:35px 0 0 0;
}

.photo-gallery li .tit{
  font-size:27px;
  line-height:33px;
  font-weight:600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.photo-gallery li .con{
  font-size:14px;
  margin-bottom:10px
}

.photo-gallery li .etc{
  font-size:13px;
  margin-top:20px
}

.photo-gallery input, .photo-gallery select{
  background-color:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff
}

.photo-gallery option{
  color:#000
}

.none-list{
  padding:90px 0 50px 0 !important;
  background:url(../images/fd_icon.png) no-repeat center 50px;
  background-size: 30px;
  border:1px solid rgba(255,255,255,.3);
  text-align:center;
  font-size:15px;
}





/*** board-view ***/
.gallery-view{
  max-width:1280px;
  margin:0 auto 100px;
}

.gallery-view table {
  font-size: 16px;
}

.gallery-view .subject .new{
  height:20px;
  width:20px;
  line-height:20px;
  display: inline-block;
  font-size:15px;
  margin-left:10px;
  background:#274ea2;
  color:#fff;
  text-align:center;
}

.gallery-view .subject th {
  border: 0;
  background: none;
  text-align: left;
  padding: 0 0 30px 0;
  font-weight: 600;
  font-size: 35px;
  line-height: 38px;
}

.gallery-view th {
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-weight: 500;
  vertical-align: middle;
  padding: 18px 13px;
  width: 120px
}

.gallery-view th label{
  font-weight: 500;
}

.gallery-view td {
  padding: 18px 13px;
  height: 62px;
  font-weight: 400;
  border-bottom: 1px solid rgba(255,255,255,.3);
  vertical-align: middle;
}

.gallery-view .contview {
  height: 200px;
  padding: 20px;
  font-weight: normal;
  border-top:0;
  white-space: normal;
}

.gallery-view .contview .tit{
  display:inline-block;
  vertical-align:top;
  width:60px;
  margin-right:10px;
  border-radius:60px;
  line-height:30px;
  text-align:center;
  font-weight:500;
  color:#fff
}

.gallery-view .contview .con{
  display:inline-block;
  vertical-align:top;
  width:calc(100% - 80px)
}

.gallery-view-list {
  font-size: 17px;
}

.gallery-view-list li {
  border-bottom: 1px solid rgba(255,255,255,.3);
  border-top: 0;
  padding: 20px
}

.gallery-view-list .tit {
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
  width: 55px
}

.gallery-view-list .con {
  display: inline-block;
  vertical-align: middle;
  width:calc(100% - 70px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-view-list .con a{
  color:#fff
}





/*** btn-wrap ***/
.btn-wrap {
  margin-top: 30px;
  text-align: center;
}

.btn-wrap a.btn {
  display: inline-block;
  padding: 0px 20px;
  line-height: 50px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.3);
  font-size:16px;
  color:#fff
}

.btn-wrap a.bg {
  background: linear-gradient(-170deg, #15284d, #07132b);
  border: 1px solid #15284d;
}




/*** sch-box ***/
.sch-box{
  display: inline-block;
  width:100%;
  margin-bottom:40px;
  font-size:16px;
}

.sch-box table th{
  border:1px solid rgba(255,255,255,.5);
  padding:5px 11px;
  font-weight:600
}

.sch-box table th label{
  font-weight:600
}

.sch-box table td{
  border:1px solid rgba(255,255,255,.5);
  padding:11px
}

.sch-btn {
  display: inline-block;
  vertical-align: middle;
  line-height: 50px;
  background: linear-gradient(-170deg, #15284d, #07132b);
  border: 1px solid #15284d;
  color: #fff;
  font-size:16px;
  padding: 0px 15px;
  border-radius:5px;
  margin-top:15px;
  float:right;
}

.sch-btn:hover{
  color:#fff
}




/*** hd-cont ***/
.hd-cont {
  overflow: hidden;
  width: 100%;
  margin-bottom: 30px
}

.hd-btn {
  display: inline-block;
  vertical-align: middle;
  line-height: 50px;
  background: linear-gradient(-170deg, #15284d, #07132b);
  color: #fff;
  font-size:16px;
  padding: 0px 15px;
}

.hd-btn:hover{
  color:#fff
}

.hd-cont .count {
  float:left;
  margin-bottom: 0
}

.hd-cont .r-cont{
  float: right;
  width: 70%;
  text-align: right;
}

.hd-cont input, .hd-cont select{
  height:50px;
  margin: 1% 0
}




/*** input-cont ***/

.input-cont{
  overflow: hidden;
  max-width:1280px;
  margin:0 auto 90px;
}

.input-cont .text{
  float:left;
  width:500px;
  font-size:35px;
  line-height:35px;
  padding:0px 20px;
  font-weight:700
}

.input-cont .text span{
  display: block;
  font-size:18px;
  margin-top:5px
}

.input-cont .cont{
  float:right;
  width:calc(100% - 520px);
  /*background:#111;*/
  padding:0 50px
}

.input-cont .cont label{
  display: block;
  font-weight:500;
  margin-bottom:5px
}

.input-cont .cont input{
  height:55px;
  width:100%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
}

.input-cont .cont textarea{
  width:100%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
}

.input-cont .cont span{
  font-size:16px;
  line-height:20px;
  margin-top:10px;
  opacity:0.7;
  display:block;
}

.input-cont .cont li{
  margin-bottom:30px;
  line-height:normal;
}

.input-cont .cont li:last-child{
  margin:0
}

.input-cont .cont .btn{
  display: inline-block;
  float:right;
  margin:30px auto 0;
  padding:0px 25px;
  line-height:55px;
  color:#fff;
  background: linear-gradient(-170deg, #15284d, #07132b);
}



/*** paging ***/
#paging {
  margin: 30px auto 0px;
  width: 100%;
  text-align: center
}

#paging .paging-wrap {
  display: inline-block;
}

#paging ul {
  float: left;
  padding: 0px 5px;
}

#paging li {
  float: left;
  margin: 0px 1px
}

#paging li:last-child {
  margin-right: 0
}

#paging li i{
  font-size:12px
}

#paging li a {
  display: block;
  color:#fff;
  border: 1px solid rgba(255,255,255,.2);
  width: 37px;
  height: 37px;
  line-height: 37px;
  font-size: 15px;
}

#paging li.on a {
  color: #fff;
  background: linear-gradient(-170deg, #15284d, #07132b);
  border: 1px solid #15284d;
  font-weight: bold;
}

#paging li img{height:12px}






/*** etc ***/
.count {
  display: inline-block;
  font-size: 15px;
  margin: 15px 0 10px 0;
}

.ntc-text span{
  display:block;
  position:relative;
  font-size:16px;
  padding-left:12px
}

.ntc-text span::after{
  content:"";
  width:4px;
  height:4px;
  border-radius:4px;
  background:#fff;
  position:absolute;
  left:0;
  top:11px
}






/*** modal ***/
.modal{
  position: fixed;
  z-index: 3000;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.4);
  display:none;
}

.modal-content{
  position: absolute;
  z-index:1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:500px;
  height:auto;
  overflow-y: auto;
  background:#333;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}

.modal-content .head{
  position:relative;
  background:#222;
  border-bottom: 1px solid #eee;
  line-height:44px;
  height:44px;
  padding:0px 20px;
  font-weight:500;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
}

.modal-content .head h3{
  font-weight: 500;
  font-size: 16px;
  position: relative;
  padding:0;
  line-height:inherit;
  border:0;
  background:0
}

.modal-content .cont{
  padding:25px
}

.modal-content label{
  display: block;
  font-size:17px;
  font-weight:500;
  margin-bottom:10px
}

.modal-content input{
  height:50px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
}

.modal-content .close {
  position: absolute;
  z-index:10;
  right:15px;
  top: 8px;
  cursor:pointer;
  color:#fff
}

.modal-content .md-btn{
  display: inline-block;
  text-align:center;
  width:100%;
  margin-top:25px
}

.modal-content .md-btn a{
  display: inline-block;
  color: #fff;
  background: linear-gradient(-170deg, #111, #222);
  border-radius: 5px;
  height: 50px;
  font-size:17px;
  line-height: 50px;
  padding: 0px 20px;
}

.ui-datepicker{width:14em !important}
.ui-widget{font-size: inherit !important}
.ui-datepicker .ui-datepicker-title select {font-size: 15px !important; height: auto !important;}
.ui-datepicker .ui-datepicker-title{line-height: inherit !important; font-size: 15px !important;}
.ui-datepicker table{font-size:14px !important}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button{font-size:14px !important;}







/***********************************
reset
***********************************/
section .swiper-button{
  width: 130px;
  position: absolute;
  top: 50px;
  right: 0;
}

section .swiper-button-next, section .swiper-button-prev{
  width:65px;
  height:65px;
  top:60%;
}

section .swiper-button-next{
  right:0;
  background:#274ea2;
}

section .swiper-button-prev{
  left:0;
  background:#fff;
}

section .swiper-button-next::after{
  color:#fff;
  font-size:19px
}

section .swiper-button-prev::after{
   color:#15284d;
   font-size:19px
 }

section .swiper-button-prev.swiper-button-disabled,
section .swiper-button-next.swiper-button-disabled{
   opacity:1
 }

 @media screen and (max-width:1679px) {
   .gallery li .thumb{height:260px}
   .photo-gallery{padding:0px 20px}
   .photo-gallery li .thumb{height:240px}
 }

@media screen and (max-width:1479px) {
  .main-view .text{width:90%}
  .photo-gallery li .thumb{height:200px}
}

@media screen and (max-width:1279px) {
  section{padding:110px 0}
  section h2{font-size:60px}
  .main-view .text .mtit{font-size:50px; line-height:60px}
  .main-view video{height:100%}
  .main-view .swiper-button{bottom:20px}
  .company .tit{font-size:40px}
  .gallery li .thumb{height:200px}
  .price-cont{padding:50px}
  .photo-gallery li .thumb{height:160px}
}

@media screen and (max-width:999px) {
  body, html{font-size:16px}
  section{padding:80px 0}
  section h2{font-size:40px}
  .main-view{height:400px}
  .main-view .text .mtit{font-size:37px; line-height:45px}
  .main-view .swiper-button-prev, .main-view .swiper-button-next{width:35px; height:35px}
  .main-view .swiper-pagination{margin: 5px 0 0 15px;}

  .company{padding:80px 0}
  .company .tit{font-size:40px}
  .gallery{padding-top:80px}
  .gallery .swiper-button{width:70px; right:20px; top:30px}
  .gallery .swiper-button-next, .gallery .swiper-button-prev{width:35px; height:35px}
  .gallery .swiper-button-next:after, .gallery .swiper-button-prev:after{font-size:12px}
  .gallery ul{margin-top:20px}
  .gallery li .text{padding:20px 0 0 0}
  .gallery li .con{font-size:13px; margin:0}
  .gallery li .tit{font-size:22px}
  .gallery li .etc{font-size:13px; margin:0}
  .photo-gallery li{width:48.5%; margin:0 3% 4% 0}
  .photo-gallery li:nth-child(2n){margin-right:0}
  .photo-gallery li .text{padding:20px 0 0 0}
  .photo-gallery li .con{line-height:normal; font-size:13px; margin-bottom:5px}
  .photo-gallery li .tit{font-size:20px}
  .photo-gallery li .etc{line-height:normal; margin-top:5px}
  .gallery-view td{height: auto; padding:13px 11px}
  .gallery-view .contview{line-height:18px}
  .gallery-view-list li{padding:15px; font-size:15px}

  .visual-wrap{height:300px}
  .visual-wrap .visual{padding:120px 30px 0 30px}
  .top-visual .visual h2{font-size:40px}
  .top-visual .visual span{font-size:15px}

  .a-box{padding:40px 20px; line-height:25px}
  .about-cont .area{padding:80px 20px 200px 20px}
  .about-cont .area .tit{font-size:30px}

  .sub-content{padding-top:50px}
  .sub-content h3{font-size:35px; line-height:40px; padding:0 20px; margin-bottom:30px}
  .ppf-cont .section{height:auto;}
  .ppf-cont .section .text{float:none; width:100%; padding:50px 20px}
  .ppf-cont .section .text .tit{font-size:20px}
  .ppf-cont .section .img, .ppf-cont .section:last-child .img{float:none; width:100%}

  .price-cont{padding:30px 20px}
  .price-cont .area-table{padding:0; background:none; font-size:16px}
  .info-table{font-size:16px}
  .info-table thead th{padding:10px}
  .info-table td{padding:13px 10px}

  .ntc-text span{font-size:15px}
  .input-cont{padding:0px 20px 0 20px}
  .input-cont .text{float:none; width:100%; text-align:center; font-size:20px; margin-bottom:30px}
  .input-cont .text span{font-size:14px; line-height:normal;}
  .input-cont .cont{float:none; width:100%; display: inline-block; padding:30px 20px}
  .input-cont .cont input{height:45px}
  .input-cont .cont span{font-size:13px; margin-top:5px}
  .input-cont .cont .btn{text-align:center}
  .input-cont .cont li{margin-right:0}


  #paging li a{width:30px; height:30px; line-height:30px; font-size:13px}
  #paging li i{font-size:11px}
}


@media screen and (max-width:767px) {
  .hd-cont .count{float:none; width:100%}
  .hd-cont .r-cont{float:none; width:100%; text-align:left;}
  .hd-cont select{width:75px; height:48px}
  .hd-cont .hd-btn{width:75px; height:48px; line-height:48px; font-size:14px}
  .hd-cont input{width:calc(100% - 90px); height:48px}
  .hd-cont input.cal-input{width:140px}
  .hd-cont .count{margin:0 0 10px 0}
  .input-cont .cont .btn{float:none; width:100%;}
  .modal .modal-content{height:100% !important; width:100% !important; border-radius:0}
  .modal-content .close{top:10px}
  .modal-content .cont{padding:20px}
  .modal-content .md-btn a{height:42px; line-height:42px; font-size:15px}
  .modal-content label{font-size:15px; margin-bottom:5px}
  .gallery li .thumb{height:110px}
  .gallery-view th{display:none}
  .photo-gallery li .thumb{height:130px}
  .photo-gallery .thumbnail{height:130px}
  .btn-wrap a.btn{line-height:44px; font-size:15px}
  .sch-box table{font-size:14px; line-height:normal;}
  .sch-box input, .sch-box select{font-size:13px}
  .sch-box .cal-input{width:100%}
}