.scroll-page{
  -webkit-overflow-scrolling : touch;
}

.motion {
	-webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease-out;
	     -o-transition: all 0.2s ease-out;
	        transition: all 0.2s ease-out;
}





.wrap{
  position: relative;
  min-width:1280px;
  padding-top:120px;
  text-align: center;
  box-sizing: border-box;
  transition: all 2s;
}
.wrap.intro{
	padding-top:0px;
}
.wrap.sub{
  padding-bottom:0;
}
@media only screen and (max-width : 1024px){
  .wrap{
    min-width:auto;
    padding-top:95px;
    overflow-x:hidden;
    padding-bottom:50px;
  }
   .wrap.intro{
   padding-top:0px;
   }
   .wrap.sub{
     padding-bottom:0;
   }
}





.introTitle{
  position:absolute;
  top:5vw;
  left:0;
  width:100%;
  text-align:center;
  z-index:9;

}
.introTitle b, .introTitle strong, .introTitle p{
  display:inline-block;
  width:100%;
  text-align:center;
  color:#fff;
}
.introTitle b{
  font-size:3.25rem;
  line-height:3.25rem;
  letter-spacing:-0.15rem;
  font-weight:500;
}
.introTitle strong{
  margin-top:7px;
  font-size:3.125rem;
  line-height:3.125rem;
  font-weight:500;
}
.introTitle p{
  margin-top:15px;
}
.introTitle p>font{
  display:inline-block;
  width:100%;
  font-size:1.5rem;
  line-height:2.0rem;
  font-weight:300;

}


.visual .mob .introTitle{
  top:17vw;
}
.visual .mob .introTitle i{
  display: block;
  width: 30px;
  height: 1px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
  opacity: 0.4;
}
.visual .mob .introTitle b, .visual .mob .introTitle strong{
  font-size: 2.75rem;
  line-height: 2.75rem;
  letter-spacing: -0.15rem;
}
.visual .mob .introTitle p>font{
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight:100;
}
@media only screen and (max-width : 1024px){
  .introTitle b{
    font-size:2.75rem;
    line-height:2.75rem;
  }
  .introTitle strong{
    font-size:2.625rem;
    line-height:2.625rem;
  }
  .introTitle p{
    margin-top:10px;
  }
  .introTitle p>font{
    font-size:1.313rem;
    line-height:1.5rem;

  }
}
@media only screen and (max-width : 640px){
  .visual .mob .introTitle{
    top:14vw;
  }
  .visual .mob .introTitle i{
    margin-top: 20px;
    margin-bottom: 20px;

  }
  .visual .mob .introTitle b, .visual .mob .introTitle strong{
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.10rem;
  }
  .visual .mob .introTitle p>font{
    font-size: 1.313rem;
    line-height: 1.5rem;
  }
}
@media only screen and (max-width : 460px){
  .visual .mob .introTitle{
    top:18vw;
  }
  .visual .mob .introTitle b, .visual .mob .introTitle strong{
    font-size: 1.75rem;
    line-height: 1.75rem;
  }
  .visual .mob .introTitle p>font{
    font-size: 1.125rem;
    line-height: 1.313rem;
  }
}
@media only screen and (max-width : 380px){
  .visual .mob .introTitle b, .visual .mob .introTitle strong{
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  .visual .mob .introTitle p>font{
    font-size: 1rem;
    line-height: 1.125rem;
  }
}


#header{
  position:fixed;
  top:0;
  left:50%;
  width:100%;
  min-width:1440px;

  min-height:120px;
  text-align:center;
  background-color:#fff;
  border-bottom:1px solid #dbdee4;
  transform: translate(-50%,0);
  z-index:10;
  transition: all 2s;
}

#header.intro{
	display:none;
}

#header>.container{
  position:relative;
  display:flex;
  margin: 0 auto;
  /* max-width:1800px; */
  width:100%;
  min-height:110px;
  justify-content:center;
  align-items:center;
  box-sizing: border-box;

}
#header a.logo{
  position:absolute;
  top:50%;
  left:20px;
  transform: translate(0 , -50%);
}

#header a.logo>img{
  width:100%
}
#header a.logo2{
  position:absolute;
  top:0;
  right:0;
  z-index:6;
}
#header .hillstateMob{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:25px;
  padding-top:2px;
  padding-right: 15px;
  text-align:right;
  background:url(../../img/subtitBg.jpg) center no-repeat;
  background-size:cover;
}
#header .hillstateMob img{
  height:20px;
}

#header a.tel{
  display:flex;
  position:absolute;
  top:50%;
  right:150px;
  height:30px;
  transform: translate(0 , -50%);
  justify-content:center;
  align-items: center;/*세로 중앙정렬*/
}
#header a.tel>i{
  display:inline-block;
  width:26px;
  height:26px;
  padding-top:3px;
  border-radius:30px;
  background-color:#fff;
  border:1px solid #92070f;
  vertical-align:top;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease-out;
	     -o-transition: all 0.2s ease-out;
	        transition: all 0.2s ease-out;
}
#header a.tel>i>img{
  width:18px;
  -webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease-out;
	     -o-transition: all 0.2s ease-out;
	        transition: all 0.2s ease-out;
}
#header a.tel>strong{
  display:inline-block;
  padding-left:5px;
  padding-top:3px;
  font-family: 'GmarketSansBold';
  font-size:1.75rem;
  letter-spacing:0.01rem;
  line-height:1.75rem;
  color:#92070f;
}
#header a.tel>strong>font{
  display:inline-block;
  padding-right:5px;
  font-family: 'GmarketSansMedium';
  font-size:1.125rem;
  font-weight:400;
  line-height:1.500rem;
  color:#fff;
}


#header a.tel:hover i img, #header.on a.tel:hover i img{
  transform: rotate(20deg);
}


#header .container .box {
  display:none;
  position:absolute;
  top:60%;
  right:15px;
  transform: translate(0,-50%);
  align-items:center;
  justify-content:center;
}
#header .container .box .telMob{
  display:inline-block;
  width:28px;
  height:28px;
  padding-top:3px;
  margin-right:10px;
  border-radius:30px;
  background-color:#fff;
  border:1px solid #92070f;
  vertical-align:top;
  box-sizing: border-box;
}
#header .container .box .telMob>img{
  width:22px;
}

.menuTrigger,
.menuTrigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menuTrigger {
  position: relative;
  width: 30px;
  height: 26px;
}

.menuTrigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #92070f;
  border-radius: 3px;
}
.menuTrigger span:nth-of-type(1) {
  top: 0;
}
.menuTrigger span:nth-of-type(2) {
  top: 11.5px;
}
.menuTrigger span:nth-of-type(3) {
  bottom: 0;
}
#header .container .box a.telTrigger{
  display:flex;
  height:100%;
  /*width:30px;
  height:30px;
  margin-right:7px;
  padding-top:4px;
  text-align:center;
  border-radius:20px;
  background-color:#f15a22;*/
  margin-right:7px;
  justify-content: center;/*가로 중앙정렬*/
  align-items: center;/*세로 중앙정렬*/
}
#header .container .box a.telTrigger i{
  display:inline-block;
  width:30px;
  height:30px;
  padding-top:4px;
  text-align:center;
  border-radius:20px;
  background-color:#31427a;
  animation: 1.2s ease-out;
  animation-name: telTriggermove;
  animation-iteration-count: infinite;
}

@keyframes telTriggermove {
0% {
  /*margin-right:0px*/
  background-color:#f15a22;
}
50%{
  background-color:#f7941d;
}
100%{
  background-color:#f15a22;
}
}



#header.on{

}

@media only screen and (max-width : 1024px){
  #header{
    min-width:auto;
    min-height:auto;
  }
  #header>.container{
    position:relative;
    margin: 0 auto;
    max-width:100%;
    min-height:95px;
    padding-left:0;
    padding-top:25px;

  }
  #header .left{
    width:auto;
    left:20px;
  }
  #header a.logo{
    width:195px;
    top:63%;
  }
  #header a.logo2{
    display:none;
  }
  #header a.tel{
    display:none;
  }
  #header .container .box {
    display:flex;
  }
  #header .hillstateMob{
    display:block;
  }
}





#quick, #scrollBox{
  z-index:3;
}





#nav{
  display:flex;
  margin:0 auto;
  justify-content:center;/*가로 정렬*/
  align-items: center;/*세로 중앙정렬*/

}
#nav>li{
  position:relative;
  display:flex;
  width:125px;
  margin-left:15px;
  margin-right:15px;
  min-height:119px;
  justify-content: center;/*가로 중앙정렬*/
  align-items: center;/*세로 중앙정렬*/

  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;


}
/*#nav>li:first-child{
  width:135px;
}*/
#nav>li>a{
  position:relative;
  display:flex;
  /*height:98px;*/

  padding-top:15px;
  padding-bottom:8px;
  /*padding: 0 30px;*/
  font-size:1.125rem;
  line-height:1.125rem;
  font-weight:500;
  color:#333;

  justify-content: center;/*가로 중앙정렬*/
  align-items: center;/*세로 중앙정렬*/
  word-break: keep-all;
  box-sizing: border-box;
}


#nav>li:hover>a, #nav>li.active>a{
  font-weight:600;
  color:#771b1a !important;


}

#nav .line{
  position: absolute;
  display: inline-block;
  top:2px;
  height: 1px;
  width: 0%;
  background: #771b1a;
  left:50%;
  z-index:6;
}
/*#nav .motion {
	-webkit-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	   -moz-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	     -o-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	        transition: background-color  0.3s ease-out, color 0.3s ease-out;

}*/


#nav>li:hover .line, #nav>li.active .line{
  width:100% !important; left:0% !important;
}

#nav>li:not(.active) a:before, #nav>li:not(.active) a:after{
	content: "";
	left:0;
	bottom:-5px;
	width:100%;
	position:absolute;
	transition: all 0.5s ease;
}


.dept2{
  position:fixed;
  display:flex ;
  top:119px;
  left:0;
  width:100%;
  /*min-height:100px;*/
  /*padding-top:20px;*/
  background-color:#fff;
  border-bottom:1px solid #dbdee4;
  justify-content: center;/*가로 중앙정렬*/
  align-items:center;;/*세로 중앙정렬*/
  box-sizing: border-box;
  z-index:10;
}
.dept2>.container{
  display:flex ;
  margin: 0 auto;
  font-size:0;
  line-height:0;
  text-align:center;
  border-top:1px solid #dbdee4;
  justify-content: center;/*가로 중앙정렬*/
  align-items: center;/*세로 중앙정렬*/
  box-sizing: border-box;

}
.dept2>.container .block{
  display: flex;
  margin:0 auto;
  justify-content:center;
  align-items:flex-start;
}
.dept2>.container ul{
  display:flex;
  width:125px;
  margin-left:15px;
  margin-right:15px;

  padding: 25px 0;
  flex-flow:column;/*요소 세로정렬*/
  align-items:flex-start;/*세로 중앙정렬*/


}
/*.dept2>.container ul:first-child{

  width:135px;
}*/

.dept2>.container ul>li{
  width:100%;

  vertical-align:top;
}
.dept2>.container ul>li>a{
  display:inline-block;
  position:relative;
  padding:9px 0;
  font-size:1rem;
  line-height:1.25rem;
  color:#333;
  text-align: center;
  opacity:1;

  word-break: keep-all;
  -webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}
.dept2>.container ul>li>a>font{
  display:inline-block;
  font-size:0.875rem;

  line-height:0.938rem;
}

.dept2>.container ul>li>a:hover, .dept2>.container ul>li:hover>a, .dept2>.container ul>li.active>a{
  color:#771b1a !important;
  font-weight:500;
  opacity:1;
}
.dept2>.container ul>li>a>font{
  display:inline-block;
  width:100%;
}

#nav .dept2 .line{
  position: absolute;
  display: inline-block;
  top:auto;
  bottom:1px !important;
  height: 1px;
  width: 0%;
  background: #92070f !important;
  left:50%;
  opacity:0.5;
  z-index:5;
}
/*#nav .motion {
	-webkit-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	   -moz-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	     -o-transition: background-color  0.3s ease-out, color 0.3s ease-out;
	        transition: background-color  0.3s ease-out, color 0.3s ease-out;

}*/


#nav .dept2 li:hover .line, #nav .dept2 li.active .line{
  width:100% !important; left:0% !important;
}

#nav .dept2 li:not(.active) a:before, #nav .dept2 li:not(.active) a:after{
	content: "";
	left:0;
  top:auto;
	bottom:1px !important;
	width:100%;
	position:absolute;
	transition: all 0.5s ease;
}

@media only screen and (max-width : 1024px){
  #nav{
    display:none;
  }
}





/*모바일 메뉴*/
.mBg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #000;
  opacity:0.5;
  z-index:100;
}
#mNav{
  position:fixed;
  top:0;
  right:0;
  width:280px;
  height:100%;
  padding-top:95px;
  box-sizing: border-box;
  background-color: #ffffff;
  z-index:100;
  overflow: hidden;
}
#mNav .logo{
  position:fixed;
  display: inline-block;
  top:20px;
  left:8px;
  z-index:5;
}
#mNav .logo img{
 width:160px;
}
#mNav .closeTrigger{
  position:fixed;
  display: inline-block;
  top:40px;
  right:20px;
  width:30px;
  height:30px;
  z-index:5;
}
.closeTrigger span{
  position: absolute;
  top: 47%;
  left:0;
  width: 100%;
  height: 3px;
  border-radius:2px;
  background-color: #92070f;
}
.closeTrigger span:nth-child(1){
  transform: rotate(135deg) translateX(0%);
}
.closeTrigger span:nth-child(2){
  transform: rotate(45deg) translateX(0%);
}
#mNav>ul{
  display: inline-block;
  width:100%;
  border-top:1px solid #eee;
  overflow:hidden;
}
#mNav>ul>li{
  display: inline-block;
  width:280px;
  min-height:48px;
  border-bottom:1px solid #eee;
}
#mNav>ul>li:last-child{
  border-bottom:1px solid #eee;
}
#mNav>ul>li .depth2{
  width:100%;


}
#mNav>ul>li .depth2>ul{
  display:inline-block;
  width:100%;

}
#mNav>ul>li .depth2>ul>li{
  display:inline-block;
  width:100%;
  /* height:36px; */
  padding-left:0;
  background-color:#fff;
  /* padding-bottom:10px; */

}
#mNav>ul>li .depth2>ul>li:first-child{
  padding-top:5px;
  /* height:46px; */
  border-top:1px solid #eee !important;
}
#mNav>ul>li .depth2>ul>li:last-child{
  padding-bottom:5px;
  /* height:46px; */

}


#mNav>ul>li .depth2>ul>li>a{
  display: inline-block;
  width:100%;
  height:100%;
  padding-left:30px;
  line-height:30px;
  font-size:0.938rem;
  text-align:left;
  box-sizing:border-box;

}
#mNav>ul>li:hover{
  color:#202a65;
}
#mNav>ul>li>a{
  display: inline-block;
  width:100%;
  height:48px;
  padding-left:20px;
  font-weight:500;
  line-height:48px;
  text-align:left;
  font-size:1rem;
  color:#333333;
  letter-spacing:-0.01rem;
  box-sizing: border-box;
}



.quick{

  position:fixed;
  top:180px;
  right:0;
  /* right:calc(50% - 1200px - 52.5px); */
  display:flex;
  width:120px;
  flex-flow:column;
  align-items:center;
  justify-content:center;
  /* transform:translate(-50%,0); */
  /* transition: all 0.5s; */
  animation: quickMobAni1 5s ease-in-out forwards;
  opacity:0;
  z-index:4;
}
.quick .box{
  display:flex;
  width:120px;
  height:120px;
  flex-flow: column;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1.15rem;
  color:#fff;
}
.quick .box>a{
  position:relative;
  display:flex;
  width:100%;
  height:100%;
  flex-flow:column;
  align-items:center;
  justify-content:center;
}
.quick .box i{
  display:inline-block;
  position:absolute;
  top:0;
  left:50%;
  transform: translate(-50%,0);
}
.quick .box span.txt{
  display:inline-block;
  font-size:1rem;
  line-height:1.125rem;
  text-align:center;
}
.quick .box span.txt>font{
  display:inline-block;
  width:100%;
  font-size:1rem;
  line-height:1.25rem;
  font-weight:300;
}


.quick .box.link1{
  background:url(../../img/quickBg1.jpg) center no-repeat;
}
.quick .box.link1 .ele, .quick .box.link1 span{
  display:inline-block;
  width:100%;
  text-align:center;
  color:#92070f
}
.quick .box.link1 .ele{

  font-size:1.5rem;
  line-height:1.5rem;
  letter-spacing:-0.15rem;
  font-weight:300;
}
.quick .box.link1 .ele font{
  display:inline-block;
  padding-left:2px;
  padding-right:3px;
  font-size:0.875rem;
  font-weight:600;
  line-height:1.5rem;
}
.quick .box.link1 .ele>b{
  display:inline-block;
  width:100%;
  font-size:2.125rem;
  line-height:2.125rem;
  letter-spacing:-0.18rem;
  font-weight:700;
}
.quick .box.link1 strong{
  font-size:1.625rem;
  line-height:1.625rem;
  letter-spacing:-0.1rem;
  color:#92070f;
  font-weight:800;
}
.quick .box.link1 strong>b{
  font-family: 'GmarketSansBold';
  font-size:0.813rem;
  line-height:0.875rem;
}
.quick .box.link1 span{
  display:inline-block;
  width:100%;
  font-size:1.938rem;
  letter-spacing:-0.03rem;
  font-weight:800;
}

.quick .box.link5{
  background:url(../../img/quickBg1.jpg) center no-repeat;
}
.quick .box.link5 .ele{
}
.quick .box.link5 span, .quick .box.link5 font, .quick .box.link5 strong{
  display:inline-block;
  width:100%;
  text-align:center;
  color:#92070f;
  font-weight:800;
}
.quick .box.link5 span{
  font-size:1.5rem;
  line-height:1.5rem;
}
.quick .box.link5 font{
  font-size:1.5rem;
  line-height:1.625rem;
}
.quick .box.link5 strong{
  font-size:1.5rem;
  line-height:1.5rem;
  font-weight:800;
}

.quick .box.link2{
  background:url(../../img/quickBg2.jpg) center no-repeat;
}
.quick .box.link2 i{
  top:17px;
  width:39px;
}
.quick .box.link2 span.txt{
  padding-top:45px;
}
.quick .box.link2 span.txt, .quick .box.link2 span.txt>font{
  color:#fff;
}
.quick .box.link2:hover i{
  animation: quickAni1 0.5s ease-out infinite;
}



.quick .box.link3{
  background:url(../../img/quickBg1.jpg) center no-repeat;
}
.quick .box.link3 i{
  top:17px;
  width:31px;
}
.quick .box.link3 span.txt{
  padding-top:48px;
}
.quick .box.link3 span.txt, .quick .box.link3 span.txt>font{
  color:#333;
}
.quick .box.link3 span.txt{
  font-weight:500;
}
.quick .box.link3:hover i{
  animation: quickAni1 0.5s ease-out infinite;
}

.quick .box.link4{
  background-color:#92070f;
}
.quick .box.link4 b.btn{
  display:block;
  width:30px;
  height:30px;
  padding-top:9px;
  border-radius:30px;
  border:1px solid #fff;
  background-color:rgba(255,255,255,0)
}
.quick .box.link4 b.btn>img{
  opacity:1;
  width:12px;
}
.quick .box.link4:hover b.btn{
  animation: quickAni2 0.5s ease-out infinite;
}
.quick .box.link4 span{
  margin-bottom:5px;
  color:#fff;
  font-weight:500;
}

@keyframes quickAni1 {
  0% {top:17px;}
  40% {top:12px;}
  80% {top:17px;}
}
@keyframes quickAni2 {
  0% {background-color:rgba(255,255,255,0.0)}
  40% {background-color:rgba(255,255,255,0.2)}
  80% {background-color:rgba(255,255,255,0.0)}
}

@media only screen and (min-width : 2400px){
  .quick{
    right:calc(50% - 1200px - 60px);
    transform:translate(-50%,0);
  }
}





@media only screen and (max-width : 1440px){
  .quick{
    right:20px;
  }
}

@media only screen and (max-width : 1439px){
  .quick{
    display:none;
  }
}

.quickM{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:50px;

  z-index:10;
}
.quickM a{
  display:inline-block;
  width:50%;
  height:100%;
  padding-top:15px;
  font-size:1.25rem;
  line-height:1.25rem;
  vertical-align:top;
}
.quickM a:nth-child(1){
  color:#fff;
  background-color:#92070f;
}
.quickM a:nth-child(2){
  color:#92070f;
  font-weight:500;
  background-color:#dfceb4;
}
.quickM span{
  display:inline-block;
  width:50%;
  height:100%;
  padding-top:15px;
  font-size:1.25rem;
  line-height:1.25rem;
  color:#92070f;
  background-color:#dfceb4;
}
.quickM span>font{
  display:inline-block;
  font-family: 'GmarketSansBold';
  font-size:1rem;
  line-height:1.25rem;
}

.quickMob{

  position:fixed;
  bottom:80px;
  right:20px;
  animation: quickMobAni1 8s ease-in-out forwards;
  z-index:10;
  opacity:0;

}
.quickMob a{
  display:block;
  width:60px;
  height:60px;
  padding-top:17px;
  border-radius:60px;
  background-color:#92070f;
}
.quickMob a span{
  display:block;
  width:100%;
  font-size:0.875rem;
  line-height:0.875rem;
  font-weight:500;
  color:#fff;
}
.quickMob a img{
  margin-top:2px;
  width:12px;
}

@keyframes quickMobAni1{
	85% {opacity:0}
	100% {opacity:1}
}
@media only screen and (max-width : 1024px){
  .quickM{
    display:block;
	transition: all 2s;
  }
  .quickM.intro{
    display:none;
	   height:0px;
  }

  .quickMob{

    right:10px;
    display:block;
    animation: quickMobAni1 4s ease-in-out forwards;
  }
}
@media only screen and (max-width : 460px){
  .quickM a, .quickM span{
    padding-top:16px;
    font-size:1.063rem;
    line-height:1.063rem;

  }

}
@media only screen and (max-width : 360px){
  .quickM a, .quickM span{
    padding-top:20px;
    font-size:1rem;
    line-height:1rem;
  }


}
@media only screen and (max-width : 320px){
  .quickM span{
    letter-spacing:-0.08rem;
  }
}

/*비주얼*/
.visual{
  position:relative;
  width:100%;

  /*max-height:1080px;*/
	max-height:100vh;
  /* background-color:#92070f; */
  overflow:hidden;
  transition: all 2s;
}

.visual .web{
	height:800px;
    transition: all 2s
}
.visual .web.intro{
	height:100vh;
}

.visual .web .page{
  position:absolute;
  bottom:0;
  left:50%;
  width:1400px;
  text-align:right;
  transform: translate(-50%,0);
  z-index:5;
}
.visual .web .page>a{
  display:inline-block;
  width:60px;
  height:60px;
  padding-top:18px;
  margin-left:0;
  margin-right:0;
  text-align:center;
  animation:none !important;
}
.visual .web .page>a.pre{
  background-color:#92070f;

}
.visual .web .page>a.next{
  background-color:#dfceb4;
}

.visual .web .left{
  position:absolute;
  top:0;
  left:0;
  width:750px;
  height:100%;
  /*background-color:#92070f;*/
  z-index:2;
}
.visual .web .left .title{
  position:absolute;
  top:165px;
  right:35px;
  width:500px;
  z-index:5;
}
.visual .web .left .title strong, .visual .web .left .title span{
  display:inline-block;
  width:100%;
  color:#fff;
  font-weight:100;
  text-align: left;
}
.visual .web .left .title .tit, .visual .web .left .title .tit>font{
  display:block;
  width:100%;

  font-size:2.688rem;
  line-height:2.688rem;
  color:#fff;
  text-align: left;
  letter-spacing:-0.15rem;
}
.visual .web .left .title .tit{


}
.visual .web .left .title .tit>font{
  margin-top:5px;
  font-weight:600;
}
.visual .web .left .title strong{
  font-size:1.75rem;
  line-height:2rem;
  letter-spacing:-0.1rem;
}
.visual .web .left .title strong>b{
  display:block;

  width:100%;
  font-size:1.75rem;
  line-height:2rem;
  letter-spacing:-0.1rem;
  font-weight:100;
}
.visual .web .left .title i{
  display:block;
  width:30px;
  height:1px;
  background-color:#fff;
  margin-top:30px;
  margin-bottom:30px;
  opacity:0.4;
}
.visual .web .left .title span{
  margin-top:10px;
  font-size:2.125rem;
  line-height:2.125rem;

  font-weight:600;
  text-align: left;
}
.visual .web .left .title span>font{
  display:block;
  width:100%;
  margin-top:10px;
  font-family: 'GmarketSansLight';
  font-size:1.875rem;
  line-height:1.875rem;
  font-weight:100;
}
.visual .web .left .title span>font>b{
  font-family: 'GmarketSansBold';
  font-size:1.875rem;
  line-height:1.875rem;

}

.visual .web .left .bg{
  position:relative;
  width:100%;
  height:100%;

}
/*.visual .web .left .bg .ele01{
  position:absolute;
  top:-20px;
  left:380px;
  width: 560px;
  height: 700px;
  transform: skew(47deg);
  background-color:#771b1a;
}

.visual .web .left .bg .ele02{
  position:absolute;
  top:200px;
  left:410px;
  width: 385px;
  height: 1200px;
  transform:rotate(-47deg);
   background-color:#961e1e;
}*/
.visual .web .left .bg .ele01{
  position:absolute;
  top:0;
  left:0;
}
.visual .web .left .bg .ele02{
  position:absolute;
  top:0;
  right:0;
}
.visual .web .left .bg .ele03{
  position:absolute;
  top:0;
  right:0;
}
.visual .web .left .bg .ele04{
  position:absolute;
  top:279px;
  left:32.5px;
}
.visual .web .left .bg .ele05{
  position:absolute;
  bottom:0;
  left:0;

}
.visual .web .left .bg .img{
  position:absolute;
  bottom:0;
  left:0;
  z-index:6;
}

.visual .web .left .bg>div img{
  max-width:none;
}

.visual .visual_imgArea{
	position:absolute;
	top:0;
	right:0;
	opacity:1;
	width:100%;
	height:100%;
  text-align:right;
	-webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s;
}
/*
#visual_bg1{
  background: url(../../img/visual01.jpg) center center no-repeat;
  background-size:cover;
}
#visual_bg2{
  background: url(../../img/visual02.jpg) center center no-repeat;
  background-size:cover;
}
#visual_bg3{
  background: url(../../img/visual03.jpg) center center no-repeat;
  background-size:cover;
}
*/

.visual_bg_area1{
background: url(../../img/intro.jpg);background-size: cover; background-position: center center;
}

.visual_imgArea img{
  max-width:none !important;
}
.visual .mob{
  display:none;
  /* position:relative; */
  width:100%;
  /*height:131vw;*/
  /* height:calc(100vh - 165px); */
  /* max-height:750px; */
  height:145vw;
  /* height:calc(100svh); */

  overflow: hidden;
  -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s;
}

.visual .mob.intro{
	height:100vh;
  max-height:100%;
}

.visual .mob .page{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  text-align:right;

  z-index:3;
}
.visual .mob .page>a{
  display:inline-block;
  width:60px;
  height:60px;
  padding-top:15px;
  margin-left:0;
  margin-right:0;
  text-align:center;
  animation:none !important;
}
.visual .mob .page>a.pre{
  background-color:#92070f;

}
.visual .mob .page>a.next{
  background-color:#dfceb4;
}

.visual .mob .title{
  position:absolute;
  top:12vw;
  left:12vw;
  text-align:left;
  z-index:2;
}
.visual .mob .title strong, .visual .mob .title span, .visual .mob .title p{
  display:inline-block;
  width:100%;
  text-align: left;
}
.visual .mob .title strong font, .visual .mob .title strong b{
  display:inline-block;
  width:100%;
  font-size:3.75rem;
  line-height:3.625rem;
  color:#fff;
  font-weight:100;
  text-align: left;
}
.visual .mob .title strong b{
  font-weight:600;
}
.visual .mob .title span{
  margin-top:5vw;
  font-size:2.75rem;
  line-height:2.75rem;
  color:#fff;
  font-weight:600;
}
.visual .mob .title p{
  margin-top:5vw;
}
.visual .mob .title p>font{
  display:inline-block;
  width:100%;
  font-size:1.75rem;
  line-height:2.125rem;
  color:#fff;
  font-weight:100;
  text-align: left;
}

.visual .mob .title2{
  position:absolute;
  top:15vw;
  left:0;
  width:100%;
  text-align:center;
  z-index:2;
}
.visual .mob .title2 strong, .visual .mob .title2 span, .visual .mob .title2 b{
  display:inline-block;
  width:100%;
  color:#fff;
  font-weight:100;
  text-align:center;
}
.visual .mob .title2 strong{
  font-size:2.75rem;
  line-height:2.75rem;
  letter-spacing:-0.15rem;
  font-weight:100;
}
.visual .mob .title2 strong>b{
  display:block;
  margin-top:5px;
  width:100%;
  font-size:2.75rem;
  line-height:2.75rem;
  letter-spacing:-0.18rem;
  font-weight:600;
}
.visual .mob .title2 i{
  display:block;
  width:30px;
  height:1px;
  background-color:#fff;
  margin:0 auto;
  margin-top:30px;
  margin-bottom:30px;
  opacity:0.4;
}
.visual .mob .title2 b{
  font-size:1.75rem;
  line-height:2rem;
  font-weight:100;
  text-align:center;
}
.visual .mob .title2 span{
  margin-top:5px;
  font-size:2.125rem;
  line-height:2.125rem;
  font-weight:600;
  text-align:center;
}
.visual .mob .title2 span>font{
  display:block;
  width:100%;
  margin-top:10px;
  font-family: 'GmarketSansLight';
  font-size:1.875rem;
  line-height:1.875rem;
  font-weight:100;
}
.visual .mob .title2 span>font>b{
  font-family: 'GmarketSansBold';
  font-size:1.875rem;
  line-height:1.875rem;

}


#visual_mbg1, #visual_mbg2, #visual_mbg3, #visual_mbg4{
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

}






@keyframes mainBgAnimate{
	0% {transform:scale(1.30) rotate(.001deg); }
	100% {transform:scale(1.00) rotate(.001deg);}
}


@keyframes fullImageAni {
    0% {
        transform:scale(1.3);
    }

    100% {
        transform:scale(1);
    }
}

@media only screen and (max-width : 1024px){
  .visual{
    /*height:auto !important;*/
	height:100%;
  }
  .visual .mob{
    display:block;
  }
  .visual .web{
    display:none;
  }

}
@media only screen and (max-width : 860px){
  .visual .mob .title strong font, .visual .mob .title strong b{
    font-size:3.25rem;
    line-height:3.25rem;
  }
  .visual .mob .title span{
    font-size:2.25rem;
    line-height:2.25rem;
  }
  .visual .mob .title p>font{
    font-size:1.25rem;
    line-height:1.625rem;
  }
  .visual .mob .page>a{
    width:40px;
    height:40px;
    padding-top:12px;
  }
  .visual .mob .page>a img{
    width:10px;
  }


}
@media only screen and (max-width : 640px){
  .visual .mob .title strong font, .visual .mob .title strong b{
    font-size:2.75rem;
    line-height:2.75rem;
  }

  .visual .mob .title span{
    font-size:1.75rem;
    line-height:1.75rem;
  }
  .visual .mob .title p>font{
    font-size:1rem;
    line-height:1.25rem;

  }
  .visual .mob .title2{
    top:11vw;
  }
  .visual .mob .title2 strong{
    font-size:2rem;
    line-height:2rem;
    letter-spacing:-0.15rem;
  }
  .visual .mob .title2 strong>b{
    font-size:2rem;
    line-height:2rem;
    letter-spacing:-0.15rem;
  }
  .visual .mob .title2 span{
    font-size:2.125rem;
    line-height:2.125rem;
  }
  .visual .mob .title2 span, .visual .mob .title2 span>font, .visual .mob .title2 span>font>b{
    font-size:1.5rem;
    line-height:1.5rem;
  }
  .visual .mob .title2 b{
    font-size:1.313rem;
    line-height:1.5rem;
  }
  .visual .mob .title2 i{
    margin-top:20px;
    margin-bottom:20px;
  }
}
@media only screen and (max-width : 460px){
  .visual .mob .title{
    top:10vw;
    left:20px;
  }
  .visual .mob .title strong font, .visual .mob .title strong b{
    font-size:2rem;
    line-height:2rem;
  }
  .visual .mob .title span{
    font-size:1.313rem;
    line-height:1.313rem;
  }
  .visual .mob .title p>font{
    font-size:0.875rem;
    line-height:1.125rem;
  }
  .visual .mob .title2{
    top:15vw;
  }
  .visual .mob .title2 strong, .visual .mob .title2 strong>b{
    font-size:1.75rem;
    line-height:1.75rem;
  }
  .visual .mob .title2 span{
    font-size:1.75rem;
    line-height:1.75rem;
  }
  .visual .mob .title2 span, .visual .mob .title2 span>font, .visual .mob .title2 span>font>b{
    font-size:1.25rem;
    line-height:1.25rem;
  }
  .visual .mob .title2 i{
    margin-top:15px;
    margin-bottom:15px;
  }
  .visual .mob .title2 b{
    font-size:1.125rem;
    line-height:1.313rem;
  }
  .visual .mob .page>a{
    width:32px;
    height:32px;
    padding-top:10px;
  }
  .visual .mob .page>a img{
    width:8px;
  }
}
@media only screen and (max-width : 380px){
  .visual .mob .title p>font{
    font-size:0.75rem;
    line-height:1rem;
  }
  .visual .mob .title2 strong, .visual .mob .title2 strong>b{
    font-size:1.5rem;
    line-height:1.5rem;
  }
  .visual .mob .title2 b{
    font-size:1rem;
    line-height:1.125rem;
  }
}




/*커뮤니티*/
.community{
  display:flex;
  width:100%;
  height:950px;
  align-items:center;
  justify-content:center;
  background: url(../../img/communityBg.jpg) center right no-repeat;
  background-size: cover;
}
.community .container{
  display:flex;
  width:1400px;
  height:650px;
  margin: 0 auto;
  align-items:flex-start;
  justify-content:flex-start;
}
.community .left{
  position:relative;
  width:900px;
  height:100%;
}
.community .left i.logo{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}
.community .left ul{

}
.community .left ul>li{
  position:relative;
}
.community .left ul>li.ele01 .tit{
  display:inline-block;
  position:absolute;
  top:70px;
  left:0;
  width:100%;
  text-align:center;
  z-index:2;
}
.community .left ul>li.ele01 .tit>strong, .community .left ul>li.ele01 .tit span{
  display:inline-block;
  width:100%;
  text-align:center;
}
.community .left ul>li.ele01 .tit>strong{
  margin-bottom:4px;
  font-size:2.25rem;
  line-height:2.25rem;
  font-weight:200;
  color:#fff;
}
.community .left ul>li.ele01 .tit span, .community .left ul>li.ele01 .tit span font, .community .left ul>li.ele01 .tit span b, .community .left ul>li.ele01 .tit span i{
  font-size:2.5rem;
  line-height:2.5rem;
  color:#fff;
  font-weight:200;
  letter-spacing:-0.15rem;
  font-style:normal;
}
.community .left ul>li.ele01 .tit span b{
  font-weight:600;
}

.community .left ul>li div.img{
  position:relative;
  width:100%;
  height:100%;
}
.community .left ul>li div.img i{
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

.community .right{
  position:relative;
  width:500px;
  height:100%;
  padding: 30px 20px;
  background: url(../../img/communityBannerBg.jpg) center right no-repeat;
}
.community .right i.sign{
  display:inline-block;
  width:100%;
  font-family: 'GmarketSansBold';
  text-align:center;
  font-size:0.625rem;
  line-height:0.625rem;
  letter-spacing:1rem;
  color:#594619;
  font-style:normal;
}
.community .right ul{
  margin-top:55px;
}

.community .right ul>li{
}

.community .right ul>li span{
  display:inline-block;
  width:100%;
  text-align:center;
}
.community .right ul>li span>font{
  display:inline-block;
  width:100%;
  font-size:1.25rem;
  line-height:1.5rem;
  font-weight:400;
}
.community .right ul>li i.line{
  display:block;
  width:30px;
  height:1px;
  background-color: rgba(0, 0, 0, 0.5);
  margin: 25px auto;
}
.community .right ul>li strong{
  display:inline-block;
  width:100%;
  text-align:center;
}
.community .right ul>li strong>font{
  display:inline-block;
  width:100%;
  font-size:2rem;
  line-height:2.25rem;
  letter-spacing:-0.07rem;
  font-weight:700;
  color:#000;
}
.community .right ul>li strong>b{
  display:inline-block;
  width:100%;
  font-size:1.75rem;
  line-height:1.75rem;
  letter-spacing:-0.07rem;
  font-weight:200;
  color:#000;
}
.community .right ul>li div.img{
  position:relative;
  max-width:340px;
  width:100%;
  height:220px;
  margin: 0 auto;
  margin-top:30px;
  margin-bottom:15px;
  overflow:hidden;
  border:4px solid #fff;
  background-color:#fff;

}
.community .right ul>li div.img>img{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  max-width:none;
  width:340px;
}
.community .right ul>li:hover div.img>img{
  transform: translate(-50%, -50%) scale(1.1);
  -webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.2s ease-out;
}
.community .right ul>li:not(:hover) div.img>img{
  transform: translate(-50%, -50%) scale(1.0);
  -webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}

.community .right .icon{
  width:100%;
  margin-top:30px;
  margin-bottom:40px;
  text-align:center;
}

.community .btn{
  margin-top:45px;
}

.community a.next, a.pre{
  display:inline-block;
  width:30px;
  height:32px;
  /* border:1px solid rgba(89,70,25,0.6); */
  /* background-color:#fff; */
  margin: 0 auto;
  margin-left:3px;
  margin-right:3px;

}
.community a.next img, .community a.pre img{
  width:40px;
  opacity:0.5;
}
.community a.next:hover img, a.pre:hover img{
  opacity:1;
}
.community .page{
  display:none;
  width:220px;
  height:21px;
  text-align:center;
  /*background-color:#ff0000;*/
  /*background-color:#eee;*/
}
.community .page .swiper-pagination-bullet{
  margin-left:5px;
  width:22px;
  height:3px;
  border-radius:0;
  margin-left:6px;
  background-color:#987569;
  opacity:0.2;
}
.community .page .swiper-pagination-bullet:first-child{
  margin-left:0;
}
.community .page .swiper-pagination-bullet-active{
  opacity:1;
}
.community .right .explanation{
  position:absolute;
  bottom:30px;
  left:0;
  width:100%;
  padding:0 20px;
  font-size:0.625rem;
  line-height:0.75rem;
  text-align:left;
  border: none;
  opacity:0.7;
}
@media only screen and (max-width : 1024px){
  .community{
    display:block;
    height:auto;
    padding: 80px 0;
    background-image:none;
  }
  .community .container{
    max-width:640px;
    width:100%;
    padding:0 10px;
    height:auto;
    flex-flow: column;
    align-items:center;
    justify-content:flex-start;
  }
  .community .left, .community .right{
    width:100%;
  }
  .community .left i.logo{
    display:none;
  }
  .community .left ul>li.ele01 .tit{
    position:relative;
    top:auto;
    left:auto;
    margin-bottom:40px;
  }
  .community .left ul>li.ele01 .tit>strong{
    font-size:2rem;
    line-height:2rem;
    letter-spacing:-0.1rem;
    font-weight:500;
    color:#333;
  }
  .community .left ul>li.ele01 .tit span, .community .left ul>li.ele01 .tit span font, .community .left ul>li.ele01 .tit span b{
    color:#92070f;
    letter-spacing:-0.15rem;
  }
  .community .left ul>li.ele01 .tit span font{
    font-weight:600;
  }
  .community .left ul>li.ele01 .tit span i{
    display:none;
  }
  .community .right{
    padding: 50px 20px;
    background-position:left top;
    background-size:200%;
  }
  .community .right ul{
    margin-top:30px;
  }
  .community .right .explanation{
    position:relative;
    bottom:auto;
    left:auto;
    margin-top:30px;
    padding:0;
  }
  .community .right ul>li span>font{
    font-size:1.5rem;
    line-height:1.75rem;
    letter-spacing:-0.1rem;
    font-weight:600;
  }
  .community .right ul>li strong>font{
    font-size:2.125rem;
    line-height:2.125rem;
  }
  .community .right ul>li div.img{
    width:300px;
    height:200px;

  }
  .community .right ul>li strong>b{
    margin-top:5px;

  }
}
@media only screen and (max-width : 640px){
  .community .left ul>li.ele01 .tit{
    margin-bottom:30px;
  }
  .community .left ul>li.ele01 .tit strong{
    font-size:1.313rem;
    line-height:1.313rem;
    letter-spacing:-0.1rem;
  }
  .community .left ul>li.ele01 .tit span, .community .left ul>li.ele01 .tit span font, .community .left ul>li.ele01 .tit span b{
    font-size:2.25rem;
    line-height:2.25rem;
  }
  .community .left ul>li.ele01 .tit span font{
    display:inline-block;
    width:100%;
  }
  .community .left ul>li div.img i{
    width:80px;
  }
  .community .right i.sign{
    transform:scale(0.9);
  }
  .community .right ul>li div.img{
    height:170px;
  }
  .community .right .icon>img{
    width:80px;
  }
}
@media only screen and (max-width : 460px){
  .community .left ul>li.ele01 .tit strong{
    font-size:1.25rem;
    line-height:1.25rem;
    letter-spacing:-0.05rem;
  }
  .community .left ul>li.ele01 .tit span, .community .left ul>li.ele01 .tit span font, .community .left ul>li.ele01 .tit span b{
    font-size:2rem;
    line-height:2rem;
    letter-spacing:-0.1rem;
  }
  .community .right{
    background-size:300%;
  }
  .community .right ul>li span>font{
    font-size:1.25rem;
    line-height:1.5rem;
  }
  .community .right ul>li strong>font{
    font-size:1.75rem;
    line-height:2rem;
  }
  .community .right ul>li strong>b{
    font-size:1.5rem;
    line-height:1.5rem;

  }
  .community .right ul>li i.line{
    margin: 20px auto;
  }
}
@media only screen and (max-width : 380px){
  .community .left ul>li.ele01 .tit strong{
    font-size:1.25rem;
    line-height:1.25rem;
  }
  .community .left ul>li.ele01 .tit span, .community .left ul>li.ele01 .tit span font, .community .left ul>li.ele01 .tit span b{
    font-size:1.75rem;
    line-height:1.875rem;
  }
  .community .right{
    padding: 50px 10px;
  }
  .community .right i.sign{
    letter-spacing:0.7rem;
  }
  .community .right ul>li div.img{
    width:280px;
    height:160px;
  }
}


/*프리미엄*/
.premium{
  width:100%;
  height:880px;
  overflow: hidden;

}
.premium .container{
  width:100%;
  height:100%;
}
.premium .web{
  width:100%;
  height:100%;
}

.premium .web ul{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
}
.premium .web ul>li{
  position:relative;
  width:16.5%;
  height:100%;
  box-sizing:none;
}

.premium .web ul>li:hover{
  width:680px !important;
  -webkit-transition: all 0.6s ease-out;
	   -moz-transition: all 0.6s ease-out;
	     -o-transition: all 0.6s ease-out;
	        transition: all 0.6s ease-out;
}


.premium .web ul>li:first-child, .premium .web ul>li:last-child{
  width:17%;
}
/*.premium .web ul>li .basic{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.premium .web ul>li .basic .text{
  text-align:center;
  opacity:0.7;
  z-index:1;
}*/

.premium .web ul>li .basic{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.premium .web ul>li .basic .text{
  position:absolute;
  top:50%;
  left:50%;
  width:400px !important;
  transform: translate(-50%, -50%);
  text-align:center;
  opacity:0.7;
  z-index:1;

}

.premium .web ul>li .basic .text strong, .premium .web ul>li .basic .text span{
  display:inline-block;
  width:100%;
  text-align:center;

}
.premium .web ul>li .basic .text strong{
  font-family: 'Cinzel', serif;
  font-size:1.875rem;
  line-height:1.875rem;
  letter-spacing:0.05rem;
  color:#fff;
  font-weight:100;
}
.premium .web ul>li .basic .text span{
  font-size:1.25rem;
  line-height:1.313rem;
  color:#fff;
  font-weight:100;
}
.premium .web ul>li .basic .text i.line{
  display:block;
  margin: 30px auto;
  width:20px;
  height:1px;
  background-color:#fff;
  opacity:0.5
}
.premium .web ul>li .basic .sign{
  position:absolute;
  bottom:50px;
  left:0;
  width:100%;
  text-align:center;
  z-index:1
}
.premium .web ul>li .basic .sign b, .premium .web ul>li .basic .sign span{
  display:inline-block;
  width:100%;
  text-align:center;
  opacity:0.6
}
.premium .web ul>li .basic .sign b{
  margin-bottom:10px;
  font-size:1rem;
  line-height:1rem;
  font-weight:800;
  color:#a2886d;
}
.premium .web ul>li .basic .sign span{
  font-family: 'Cinzel', serif;
  font-size:0.625rem;
  line-height:0.625rem;
  letter-spacing:1rem;
  color:#fff;
}
.premium .web ul>li .basic .bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}


.premium .web ul>li .box{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  z-index:2;
}
.premium .web ul>li .box .text{
  opacity:0;
  position:absolute;
  top:-65%;
  left:0;
  display:flex;
  width:100%;
  height:65%;
  background:url(../../img/premiumboxBg.jpg) top center no-repeat #fff;
  background-size: cover;
  flex-flow:column;
  align-items:center;
  justify-content:center;
}

.premium .web ul>li .box .text strong, .premium .web ul>li .box .text span{
  display:inline-block;
  width:100%;
  text-align:center;
}
.premium .web ul>li .box .text strong{
  font-family: 'Cinzel', serif;
  font-size:1.875rem;
  line-height:1.875rem;
  letter-spacing:0.05rem;
  color:#fff;
  font-weight:100;
}
.premium .web ul>li .box .text span, .premium .web ul>li .box .text span>b{
  font-size:2.375rem;
  line-height:2.5rem;
  color:#fff;
  font-weight:100;
}
.premium .web ul>li .box .text span>b{
  font-weight:600;
}
.premium .web ul>li .box .text i.line{
  display:block;
  margin: 30px auto;
  width:20px;
  height:1px;
  background-color:#fff;
  opacity:0.5
}
.premium .web ul>li .box .sign{
  width:100%;
  margin-top:40px;
  text-align:center;

}
.premium .web ul>li .box .sign b, .premium .web ul>li .box .sign span{
  display:inline-block;
  width:100%;
  text-align:center;
  opacity:0.6
}
.premium .web ul>li .box .sign b{
  margin-bottom:15px;
  font-size:1rem;
  line-height:1rem;
  font-weight:800;
  color:#a2886d;
}
.premium .web ul>li .box .sign span{
  font-family: 'Cinzel', serif;
  font-size:0.625rem;
  line-height:0.625rem;
  letter-spacing:1rem;
  color:#fff;
}
.premium .web ul>li .box i.icon{
  display:block;
  margin: 30px auto;
}
.premium .web ul>li.ele0 .box i.icon img{
  width:100%;
}

.premium .web ul>li .box .img{
  opacity:0;
  position:absolute;
  bottom:-35%;
  width:100%;
  height:35%;
  overflow:hidden;
}
.premium .web ul>li .box .img img{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
.premium .web ul>li .box p, .premium .web ul>li .box p>font{
  display:inline-block;
  width:100%;
  text-align:center;
}
.premium .web ul>li .box p>font{
  font-size:0.938rem;
  line-height:1.25rem;
  color:#fff;
  font-weight:300;
}
.premium .web ul>li .box p>font>i{
  display:inline-block;
  font-size:0.75rem;
  line-height:1.25rem;
  color:#fff;
  font-size:300;
  font-style:normal;

}



.premium .web ul>li:hover .box .text{

  animation: premiumAni1 1s forwards;
}
.premium .web ul>li:not(:hover) .box .text{

  animation: premiumAni2 1s forwards;
}
@keyframes premiumAni1 {
0% {opacity:0;top:-65%;}
100% {opacity:1;top:0;}
}
@keyframes premiumAni2 {
0% {opacity:1;top:0;}
100% {opacity:0;top:-65%;}
}
.premium .web ul>li:hover .box .img{

  animation: premiumAni3 1s forwards;
}
.premium .web ul>li:not(:hover) .box .img{

  animation: premiumAni4 1s forwards;
}
@keyframes premiumAni3 {
0% {opacity:0;bottom:-35%;}
100% {opacity:1;bottom:0;}
}
@keyframes premiumAni4 {
0% {opacity:1;bottom:0;}
100% {opacity:0;bottom:-35%;}
}


.premium .web ul>li:hover .basic .bg{
  background-position: bottom center no-repeat;
}

.premium .web ul>li:hover .basic .text{
  opacity:0;
  -webkit-transition: all 0.6s ease-out;
	   -moz-transition: all 0.6s ease-out;
	     -o-transition: all 0.6s ease-out;
	        transition: all 0.6s ease-out;
}
.premium .web ul>li:not(:hover) .basic .text{
  opacity:1;
  -webkit-transition: all 0.6s ease-out;
	   -moz-transition: all 0.6s ease-out;
	     -o-transition: all 0.6s ease-out;
	        transition: all 0.6s ease-out;
}



.premium .web ul>li.ele01 .basic .bg{
  background:url(../../img/premium01Bg.jpg) center top no-repeat;
  background-size: cover;
}
.premium .web ul>li.ele01 .box i.icon{
  width:52px
}
.premium .web ul>li.ele02 .basic .bg{
  background:url(../../img/premium02Bg.jpg) center top no-repeat;
  background-size: cover;
}
.premium .web ul>li.ele02 .box i.icon{
  width:52px
}
.premium .web ul>li.ele03 .basic .bg{
  background:url(../../img/premium03Bg.jpg) center top no-repeat;
  background-size: cover;
}
.premium .web ul>li.ele03 .box i.icon{
  width:52px
}
.premium .web ul>li.ele04 .basic .bg{
  background:url(../../img/premium04Bg.jpg) center top no-repeat;
  background-size: cover;
}
.premium .web ul>li.ele04 .box i.icon{
  width:52px
}
.premium .web ul>li.ele05 .basic .bg{
  background:url(../../img/premium05Bg.jpg) center top no-repeat;
  background-size: cover;
}
.premium .web ul>li.ele05 .box i.icon{
  width:52px
}
.premium .web ul>li.ele06 .basic .bg{
  background:url(../../img/premium06Bg.jpg) center top no-repeat;
  background-size: cover;
}
.premium .web ul>li.ele06 .box i.icon{
  width:52px
}

.premium ul>li.ele01 .box{
  left:0;
  transform: translate(0,0);
}
.premium ul>li.ele06 .box{
  left:auto;
  right:0;
  transform: translate(0,0);
}

.premium .mob{
  display:none;
  max-width:640px;
  width:100%;
  margin: 0 auto;
  height:auto;
}
.premium .mob .title{
  position:relative;
  width:300px;
  padding-right:70px;
  margin: 0 auto;
  margin-bottom:50px;

}
.premium .mob .title span, .premium .mob .title strong{
  display:inline-block;
  width:100%;
  text-align:right;
}
.premium .mob .title span{
  font-size:1.5rem;
  line-height:1.5rem;
}
.premium .mob .title strong{
  font-size:3rem;
  line-height:3rem;
}
.premium .mob .title i{
  position:absolute;
  bottom:0;
  right:0;
  font-family: 'GmarketSansBold';
  font-size:6rem;
  line-height:4.5rem;
  font-style:normal;
  font-weight:600;
  color:#92070f;
}
.premium .mob ul>li .box{
  width:100%;
}
.premium .mob ul>li .box .text{
  display:flex;
  width:100%;
  padding: 60px 0;
  background:url(../../img/premiumboxBg.jpg) top center no-repeat #fff;
  background-size: cover;
  flex-flow:column;
  align-items:center;
  justify-content:center;
}

.premium .mob ul>li .box .text strong, .premium .web ul>li .box .text span{
  display:inline-block;
  width:100%;
  text-align:center;
}
.premium .mob ul>li .box .text strong{
  font-family: 'Cinzel', serif;
  font-size:1.875rem;
  line-height:1.875rem;
  letter-spacing:0.05rem;
  color:#fff;
  font-weight:100;
}
.premium .mob ul>li .box .text span, .premium .mob ul>li .box .text span>b{
  font-size:2.375rem;
  line-height:2.5rem;
  color:#fff;
  font-weight:100;
}
.premium .mob ul>li .box .text span>b{
  font-weight:600;
}
.premium .mob ul>li .box .text i.line{
  display:block;
  margin: 30px auto;
  width:20px;
  height:1px;
  background-color:#fff;
  opacity:0.5
}
.premium .mob ul>li .box .sign{
  width:100%;
  margin-top:40px;
  text-align:center;

}
.premium .mob ul>li .box .sign b, .premium .mob ul>li .box .sign span{
  display:inline-block;
  width:100%;
  text-align:center;
  opacity:0.6
}
.premium .mob ul>li .box .sign b{
  margin-bottom:15px;
  font-size:1rem;
  line-height:1rem;
  font-weight:800;
  color:#a2886d;
}
.premium .mob ul>li .box .sign span{
  font-family: 'Cinzel', serif;
  font-size:0.625rem !important;
  line-height:0.625rem !important;
  letter-spacing:1rem;
  color:#fff;
}
.premium .mob ul>li .box i.icon{
  display:block;
  margin: 30px auto;
}
.premium .mob ul>li.ele0 .box i.icon img{
  width:100%;
}

.premium .mob ul>li .box .img{
  position:relative;
  width:100%;
  height:30vw;
  overflow:hidden;
}
.premium .mob ul>li .box .img img{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
.premium .mob ul>li .box p, .premium .mob ul>li .box p>font{
  display:inline-block;
  width:100%;
  text-align:center;
}
.premium .mob ul>li .box p>font{
  font-size:0.938rem;
  line-height:1.25rem;
  color:#fff;
  font-weight:300;
}
.premium .mob ul>li .box p>font>i{
  font-size:0.75rem;
  line-height:1.25rem;
  color:#fff;
  font-weight:300;
  font-style:normal;
}

.premium .mob ul>li.ele01 .box i.icon{
  width:52px
}
.premium .mob ul>li.ele02 .box i.icon{
  width:52px
}
.premium .mob ul>li.ele03 .box i.icon{
  width:52px
}
.premium .mob ul>li.ele04 .box i.icon{
  width:52px
}
.premium .mob ul>li.ele05 .box i.icon{
  width:52px
}
.premium .mob ul>li.ele06 .box i.icon{
  width:52px
}


@media only screen and (max-width : 1024px){
  .premium{
    height: auto;
    padding-top:40px;
    padding-bottom:80px;

  }
  .premium .container{
    width:100%;
    height:auto;
    padding: 0 10px;
  }
  .premium .web{
    display:none;
  }
  .premium .mob{
    display:block;
  }
}
@media only screen and (max-width : 640px){
  .premium .mob .title{
    margin-bottom:30px;
  }
  .premium .mob ul>li .box .text{
    padding: 40px 20px;
    box-sizing: border-box;
  }
  .premium .mob ul>li .box .text strong{
    font-size:1.313rem;
    line-height:1.5rem;
  }
  .premium .mob ul>li .box .text span, .premium .mob ul>li .box .text span>b{
    font-size:2.125rem;
    line-height: 2.125rem;
  }
  .premium .mob ul>li .box p>font{

    word-break: keep-all;
  }
  .premium .mob ul>li .box .img{
    height:58vw;
  }
}
@media only screen and (max-width : 460px){
  .premium .mob .title{
    width:245px;
    padding-right:60px;
  }
  .premium .mob .title span{
    font-size:1.25rem;
    line-height:1.25rem;
  }
  .premium .mob .title strong{
    font-size:2.575rem;
    line-height:2.575rem;
  }
  .premium .mob .title i{
    font-size:5rem;
    line-height:4rem;
  }
  .premium .mob ul>li .box .text strong{
    font-size:1.125rem;
    line-height:1.25rem;
  }
  .premium .mob ul>li .box .text i.line{
    margin: 20px auto;
  }
  .premium .mob ul>li .box .text span, .premium .mob ul>li .box .text span>b{
    font-size:1.75rem;
    line-height:2rem;
  }
  .premium .mob ul>li .box p>font>i{
    font-size:0.625rem;
    line-height:1.25rem;

  }
}
@media only screen and (max-width : 340px){
  .premium .mob ul>li .box p>font{
    font-size:0.875rem;
    line-height:1.125rem;
  }
  .premium .mob ul>li .box p>font.st1{
    letter-spacing:-0.10rem;
  }
}

/*가치*/
.value{
  width:100%;
  height:900px;
  padding-top:110px;
  background:url(../../img/valueBg.png) center center no-repeat #92070f ;
}
.value .container{
  position:relative;
  width:1400px;
  height:calc(100% - 10px);
  margin: 0 auto;
}
.value .text{
  width:100%;
  text-align:center;
   margin-top:10px;
}
.value .text span, .value .text strong, .value .text p{
  display:inline-block;
  width:100%;
  color:#fff;
  letter-spacing:-0.1rem;
}
.value .text span{
  margin-bottom:10px;
  font-size:2.5rem;
  line-height:2.5rem;
  font-weight:100;
}
.value .text strong{
  font-size:3.313rem;
  line-height:3.313rem;
  font-weight:600;
}
.value .text strong>font{
  display:inline-block;
  font-size:3.313rem;
  line-height:3.313rem;
  font-weight:600;
}

.value .text p{
  margin-top:20px;
}
.value .text p>font{
  display:inline-block;
  width:100%;
  font-size:0.813rem;
  line-height:1.125rem;
  font-weight:300;
  letter-spacing:-0.00rem;
}
.value .building{
  position:absolute;
  bottom:0;
  left:50%;
  transform: translate(-50%, 0);
  width:700px;
  height:545px;
  margin: 0 auto;

}
.value .building .cloud{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow: visible;
}
.value .building .cloud span{
  display:inline-block;
  position:absolute;
}
.value .building .cloud span:nth-child(1){
  top:100px;
  left:-150px;
  animation: valuecloudAni1 6s ease-in-out infinite;

}
.value .building .cloud span:nth-child(2){
  top:-10px;
  left:-30px;
  animation: valuecloudAni4 5s ease-in-out infinite;
}
.value .building .cloud span:nth-child(3){
  top:80px;
  left:300px;
  animation: valuecloudAni3 8s ease-in-out infinite;
}
.value .building .cloud span:nth-child(4){
  top:120px;
  left:350px;
  animation: valuecloudAni2 6s ease-in-out infinite;
}
.value .building .cloud span:nth-child(5){
  top:20px;
  left:750px;
  width:29px;
  animation: valuecloudAni4 4s ease-in-out infinite;
}
.value .building .cloud span:nth-child(6){
  top:120px;
  left:950px;
  width:39px;
  animation: valuecloudAni1 3s ease-in-out infinite;
}
.value .building .cloud span:nth-child(7){
  top:300px;
  left:850px;
  width:85px;
  animation: valuecloudAni3 9s ease-in-out infinite;
}

@keyframes valuecloudAni1 {
  0% {
		transform: translateY(0%);
	}

	20% {
		transform: translateY(-10%);
	}

	40% {
		transform: translateY(-21%);
	}

	60% {
		transform: translateY(-5%);
	}

	100% {
		transform: translateY(-0%);
	}
}
@keyframes valuecloudAni2 {
  0% {
    transform: translateY(0%);
  }

  30% {
    transform: translateY(18%);
  }

  48% {
    transform: translateY(2%);
  }

  70% {
    transform: translateY(10%);
  }

  100% {
    transform: translateY(0%);
  }
}
@keyframes valuecloudAni3 {
  0% {
    transform: translateX(0%);
  }

  30% {
    transform: translateX(-18%);
  }

  68% {
    transform: translateX(0%);
  }

  85% {
    transform: translateX(-9%);
  }

  100% {
    transform: translateX(0%);
  }
}
@keyframes valuecloudAni4 {
  0% {
    transform: translateX(0%);
  }

  10% {
    transform: translateX(10%);
  }

  43% {
    transform: translateX(-8%);
  }

  85% {
    transform: translateX(2%);
  }

  100% {
    transform: translateX(0%);
  }
}

.value a.btn{
  display:none;
  align-items:center;
  justify-content:center;
  margin: 0 auto;
  margin-top:30px;
  width:70px;
  height:70px;
  border-radius:80px;
  border:1px solid rgba(255,255,255,0.3);
  z-index:5;
}
.value a.btn>img{
  width:12px;
  padding-left:2px;
  opacity:0.6;
}
.value a.btn:hover{
  animation: valueAni01 1s ease-in-out infinite;
}
@keyframes valueAni01 {
  0% {
    background-color:rgba(255,255,255,0);
  }

  50% {
    background-color:rgba(255,255,255,0.2);
  }
  100% {
    background-color:rgba(255,255,255,0);
  }

}
.value div.building div.btn{
  position:absolute;
  top:-100px;
  left:47%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto;
  width:65px;
  height:65px;
  border-radius:80px;

  border:1px solid rgba(255,255,255,0.3);

  z-index:5;
}
.value div.building div.btn>img{
  width:12px;
  padding-left:2px;
  opacity:0.6;
}
.value div.building:hover div.btn{
  animation: valueAni02 1s ease-in-out infinite;
}
/*.value div.building:hover div.btn{

  transform:scale(1.08);
  background-color:rgba(255,255,255,0.2);
  -webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease-out;
	     -o-transition: all 0.2s ease-out;
	        transition: all 0.2s ease-out;

}*/
@keyframes valueAni02 {
  0% {
    transform:scale(1);
    background-color:rgba(255,255,255,0.0);
  }

  50% {
    transform:scale(1.05);
    background-color:rgba(255,255,255,0.2);
  }
  100% {
    transform:scale(1);
    background-color:rgba(255,255,255,0.0);
  }

}


.value .building .etc{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

}
.value .building .etc .left{
  position:absolute;
  bottom:0;
  left:-30px;
  width:30px;
  height:95%;
}
.value .building .etc .left .line, .value .building .etc .left .txt{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0.5;
}
.value .building .etc .left .line>i{
  position:absolute;
  top:0;
  left:0;
  display:inline-block;
}
.value .building .etc .left .line>.vertical{
  width:1px;
  height:99%;
  background-color:#fff;
}
.value .building .etc .left .line>.horizon{
  width:20px;
  height:1px;
  background-color:#fff;
}
.value .building .etc .left .line>.horizon.ele01{
  top:0;
  left:0;
}
.value .building .etc .left .line>.horizon.ele02{
  top:82%;
  left:0;
}
.value .building .etc .left .line>.horizon.ele03{
  top:99%;
  left:0;
}
.value .building .etc .left .txt{
  opacity:1;
}
.value .building .etc .left .txt>span{
  position:absolute;
  top:0;
  left:-160px;
  display:inline-block;
  width:150px;
  font-size:0.875rem;
  line-height:0.875rem;
  font-weight:200;
  text-align:right;
  color:#fff;
}
.value .building .etc .left .txt>span>font{
  font-size:0.875rem;
  line-height:0.875rem;
  font-weight:200;
  text-align:right;
  color:#fff;
}
.value .building .etc .left .txt>span.ele01{
  top:38.5%;

}
.value .building .etc .left .txt>span.ele02{
  top:85%;
}


.value .building .etc .right{
  position:absolute;
  bottom:0;
  right:-30px;
  width:30px;
  height:95%;
}
.value .building .etc .right .line, .value .building .etc .right .txt{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  opacity:0.5;
}
.value .building .etc .right .line>i{
  position:absolute;
  top:0;
  right:0;
  display:inline-block;
}
.value .building .etc .right .line>.vertical{
  width:1px;
  height:99%;
  background-color:#fff;
}
.value .building .etc .right .line>.horizon{
  width:20px;
  height:1px;
  background-color:#fff;
}
.value .building .etc .right .line>.horizon.ele01{
  top:0;
  right:0;
}
.value .building .etc .right .line>.horizon.ele02{
  top:62%;
  right:0;
}
.value .building .etc .right .line>.horizon.ele03{
  top:76%;
  right:0;
}
.value .building .etc .right .line>.horizon.ele04{
  top:91.5%;
  right:0;
}
.value .building .etc .right .line>.horizon.ele05{
  top:99%;
  right:0;
}
.value .building .etc .right .txt{
  opacity:1;
}
.value .building .etc .right .txt>span{
  position:absolute;
  top:0;
  right:-170px;
  display:inline-block;
  width:160px;
  font-size:0.875rem;
  line-height:0.875rem;
  font-weight:200;
  text-align:left;
  color:#fff;
}
.value .building .etc .right .txt>span>font{
  font-size:0.875rem;
  line-height:0.875rem;
  font-weight:200;
  text-align:left;
  color:#fff;
}

.value .building .etc .right .txt>span.ele01{
  top:30%;

}
.value .building .etc .right .txt>span.ele02{
  top:68%;
}
.value .building .etc .right .txt>span.ele03{
  top:83%;

}
.value .building .etc .right .txt>span.ele04{
  top:95%;
}

.value .building .etc .center{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:3;

}
.value .building .etc .center span{
  display:inline-block;
  position:absolute;
  font-size:0.875rem;
  line-height:0.875rem;
  color:#9c182f;
  font-weight:500;
}
.value .building .etc .center span.ele01{
  top:8%;
  left:14%;
}
.value .building .etc .center span.ele02{
  top:44%;
  left:13%;
}
.value .building .etc .center span.ele03{
  top:79%;
  left:16.5%;
}
.value .building .etc .center span.ele04{
  top:90%;
  left:12.2%;
}

.value .building .etc .center span.ele05{
  top:7%;
  right:7%;
}
.value .building .etc .center span.ele06{
  top:34%;
  right:10%;
}
.value .building .etc .center span.ele07{
  top:62%;
  left:53%;
  color:#fff;
}
.value .building .etc .center span.ele08{
  top:70%;
  right:7%;
}
.value .building .etc .center span.ele09{
  width:75px;
  top:73%;
  left:45.8%;
}
.value .building .etc .center span.ele09 img{
  display:block;
  margin-bottom:3px;
}
.value .building .etc .center span.ele10{
  top:84%;
  right:22%;
}



.value .building .bg{
  position:absolute;
  bottom:0;
  left:50%;
  width:700px;
  height:545px;
  transform: translate(-50%, 0);
}
.value .building .bg>span{
  position:absolute;
  top:0;
  left:0;
}
.value .building .bg>span:nth-child(1){
  z-index:2;
}
.value .building .bg>span:nth-child(2){
  z-index:1;

}
.value .building .bg>span:nth-child(3){
  z-index:3;
}
.value .building .bg>span:nth-child(4){
  z-index:4;
}
.value .aniCommon{
    animation: valueAni03 1.5s  ease-in-out infinite;
}
@keyframes valueAni03 {
0% {
  opacity:1;
}
20%{
  opacity:0.7;
}
40%{
  opacity:1;
  }

}

@media only screen and (max-width : 1024px){
  .value{
    padding-top:60px;
    padding-bottom:525px;
    height:auto;
    overflow: hidden;
  }
  .value .container{
    width:100%;
    padding:0 10px;
  }
  .value .building{
    bottom:-580px;
    left:50%;
    margin-left:-350px;
    transform: translate(0,0);
    transform: scale(0.8);
  }
  .value .building .etc .left, .value .building .etc .right{

  }
  .value .building .cloud span:nth-child(1){
    left:-130px;
  }
  .value .building .cloud span:nth-child(5){
    left:auto;
    right:-60px;
  }
  .value .building .cloud span:nth-child(6){
    left:auto;
    right:-20px;
  }
  .value .building .cloud span:nth-child(7){
    left:auto;
    right:-140px;
  }
  .value .building .etc .left .txt>span>font, .value .building .etc .right .txt>span>font{
    display:inline-block;
    width:100%;
  }
  .value .text span{
    font-size:1.75rem;
    line-height:1.75rem;
  }
  .value .text strong{
    font-size:2.5rem;
    line-height:2.5rem;
  }
  .value .text strong>font{
    width:100%;
    margin-top:4px;
    font-size:2.5rem;
    line-height:2.5rem;
  }
  .value .building .etc .left .txt>span.ele02{
    top:89%;
  }
  .value .building .etc .right .txt>span.ele02{
    top:66.5%;
  }
  .value .building .etc .right .txt>span.ele03{
    top:81%;
  }
  .value .building .etc .right .txt>span.ele04{
    top:92.2%;
  }
  .value div.building div.btn{
    display:none;
  }
  .value a.btn{
    display:flex;
    margin-top:20px;
    width:40px;
    height:40px;
    animation: valueAni01 1s ease-in-out infinite;
  }

  .value a.btn>img{
    width:8px;
  }

}

@media only screen and (max-width : 760px){
  .value{
    padding-bottom:393px;
  }
  .value .building{
    bottom:-502px;
    transform: scale(0.6);
  }
}
@media only screen and (max-width : 640px){
  .value{
    padding-bottom:323px;
  }
  .value .building{
    bottom:-459px;
    transform: scale(0.5);
  }
  .value .web .text span{
    font-size:1.313rem;
    line-height:1.313rem;
  }
  .value .text span{
    margin-bottom:5px;
  }
  .value .text strong, .value .text strong>font{
    font-size:2.125rem;
    line-height:2.313rem;
  }

}
@media only screen and (max-width : 560px){
  .value{
    padding-bottom:300px;
  }
  .value .building{
    bottom:-463px;
    transform: scale(0.4);
  }

}
@media only screen and (max-width : 460px){
  .value{
    padding-bottom:270px;
  }
  .value .building{
    bottom:-444px;
    transform: scale(0.36);
  }
  .value .text span{
    font-size:1.375rem;
    line-height:1.375rem;
  }
  .value .text strong, .value .text strong>font{
    font-size:1.625rem;
    line-height:1.75rem;
  }
  .value .text strong>font{
    margin-top:3px;
  }
  .value .building .etc .left .txt>span, .value .building .etc .left .txt>span>font, .value .building .etc .right .txt>span, .value .building .etc .right .txt>span>font{
    font-weight:600;
  }
}
@media only screen and (max-width : 360px){
  .value{
    padding-bottom:220px;
  }
  .value .building{
    bottom:-444px;
    transform: scale(0.05);
  }
  .value .text strong, .value .text strong>font{
    font-size:1.5rem;
    line-height:1.75rem;
  }
  .value .building{
    bottom:-397px;
    transform: scale(0.35);
  }
  .value a.btn{
    margin-top:10px;
    width:32px;
    height:32px;
  }
}


/*지도*/
.map{
  display:flex;
  width:100%;
  height:850px;
  background-color:#f1ede1 ;
  align-items:center;
  justify-content: center;
}
.map .container{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content: center;
}
.map .left{
	width:600px;
  border:1px solid #e1e1e1;
  overflow:hidden;
}
.map .left img{
  max-width:none;
}
.map .right{
	display:flex;
	width:600px;
  height:552px;
	background:url(../../img/mapBg.jpg) center center no-repeat #aaa;
	justify-content:center;
	align-items:center;
}
.map .right .block{
 	width:465px;
}
.map .right .eng, .map .right .title{
	display:inline-block;
	width:100%;

}
.map .right .eng{
	margin-bottom:20px;
	font-family: 'Cinzel', serif;
	font-size:0.688rem;
	line-height:0.688rem;
	letter-spacing:0.1rem;
	color:#fff;
	font-weight:100;
  text-align: left;
}
.map .right .title, .map .right .title>font{
	font-size:1.75rem;
	line-height:1.75rem;
	color:#fff;
	font-weight:400;
  text-align: left;
}
.map .right .title>font{

	font-weight:700;
}
.map .right .address{
	margin-top:20px;
	width:100%;
	padding:20px 30px ;
	background-color:#fff;
}
.map .right .address>div{
	display:flex;
	width:100%;
	padding-top:13px;
	padding-bottom:13px;
	border-bottom:0.5px solid rgba(147,147,110,0.2);
	justify-content:flex-start;
	align-items:center;
}
.map .right .address>div:nth-child(1){
	padding-top:0;
}
.map .right .address>div:nth-child(3){
	border-bottom:none;
	padding-bottom:0;
}
.map .right .address>div i, .map .right .address>div strong, .map .right .address>div span{
	display:inline-block;
}
.map .right .address>div i{
	margin-right:7px;
}
.map .right .address>div i>img{

}
.map .right .address>div strong, .map .right .address>div span{
	font-size:1rem;
	line-height:1rem;

	font-weight:500;
}
.map .right .address>div strong{
	margin-right:4px;
}
.map .right .address>div:nth-child(3) span{
  font-size:1.25rem;
  line-height:1.25rem;
	font-weight:800;
}
.map .right .info{
	display:flex;
	margin-top:20px;
	width:100%;
	justify-content: space-between;
	align-items:center;
}
.map .right .info div{
	display:flex;
	justify-content: flex-start;
	align-items: center;
}
.map .right .info div>strong, .map .right .info div>span{
	display:inline-block;
	color:#fff;
}
.map .right .info div>strong{
	margin-right:5px;
	font-size:0.688rem;
	line-height:0.688rem;
	font-weight:300;
}
.map .right .info div>strong>font{
  display:inline-block;
  padding-left:3px;
  font-size:0.688rem;
	line-height:0.688rem;
	font-weight:300;
}
.map .right .info div>span{
	font-size:1rem;
	line-height:1rem;
	font-weight:400;
}
.map .right .info div>span img{
  height:32px;
}
.map .right .info div>span.sec{
	padding-left:5px;
}
.map .right .link{
	width:100%;
	margin-top:20px;
}
.map .right .link a{
	position:relative;
	display:block;
	padding: 10px 20px;
	width:180px;
	font-size:0.938rem;
	line-height:0.938rem;
  text-align: left;
	border-radius:30px;
  background-color:#fff;

}
.map .right .link a>b{
	font-size:0.938rem;
	line-height:0.938rem;
	font-weight:600;
}
.map .right .link a>i{
	position:absolute;
	top:9px;
	right:20px;
	display:inline-block;
	width:16px;
	height:16px;
  padding-top:5px;
	margin-left:20px;
	border-radius:20px;
  text-align:center;
}
.map .right .link a:hover>i{
	right:15px;
}
.map .right .link a.naver{
	margin-bottom:7px;
}

.map .right .link a.naver i{
	background-color:#61ae57 !important;
}

.map .right .link a.kakao i{
  background-color:#dcb433 !important;
}

@media only screen and (max-width : 1024px){
  .map{
    display:block;
    padding: 80px 0;
    height:auto;
  }
  .map .container{
    flex-flow: column;
    padding:0 10px;
  }
  .map .right .eng, .map .right .title, .map .right .title>font{
    text-align:center;
  }
  .map .right .link{
    text-align:center;
  }
  .map .right .link a{
    margin: 0 auto;
  }
}
@media only screen and (max-width : 640px){
  .map .left{
    width:100%;
  }
  .map .left img{
    max-width:100%;
    width:100%;
  }
  .map .right{
    width:100%;
    height:auto;
    padding: 50px 20px;
    background-size:cover;
  }
  .map .right .info div>span{
    font-size:0.875rem;
    line-height:0.875rem;
  }
  .map .right .info div>span img{
    height:26px;
  }

}
@media only screen and (max-width : 460px){
  .map .right .info div>strong{
    font-size:0.625rem;
    line-height:0.625rem;
  }
  .map .right .info div>span{
    font-size:0.75rem;
    line-height:0.75rem;
  }
  .map .right .address>div strong, .map .right .address>div span{
    font-size: 0.938rem;
    line-height:0.938rem;

  }
  .map .right .info{
    flex-flow: column;
    align-items:center;
  }
  .map .right .info div>span img{
    height:28px;
  }

}
@media only screen and (max-width : 420px){
  .map .right .address{
    padding: 20px 15px;
  }
  .map .right .address>div i{
    width:14px;
  }

}
@media only screen and (max-width : 370px){
  .map .right{
    padding: 50px 10px;
  }
  .map .right .title, .map .right .title>font{
    font-size:1.563rem;
    line-height:1.563rem;
  }
  .map .right .address{
    padding:20px 20px;
  }
  .map .right .address>div i{
    display:none;
  }
  .map .right .address>div strong, .map .right .address>div span{
    letter-spacing:-0.07rem;
  }
}



/*푸터*/
#footer{
  padding-top:70px;
  padding-bottom:70px;
  border-top:1px solid #e5e5e5;
  background-color:#fff;
}
#footer .container{
  position:relative;
  width:1400px;
  margin: 0 auto;
  padding-left:90px;
}
#footer a.logo{
  display:inline-block;
  position:absolute;
  top:0;
  left:0;
}
#footer .info{
  position:relative;
  max-width:900px;
  width:100%;
  text-align:left;
}
#footer .info.pdB{
  padding-bottom:3px;
}

#footer .info strong{
  display:inline-block;
  font-size:0.813rem;
  line-height:0.813rem;
  font-weight:600;

}
#footer .info strong::before{
  content: '/';
  display:inline-block;
  padding-left:5px;
  padding-right:5px;
  font-size:0.813rem;
  line-height:0.813rem;
  font-weight:300;
}
#footer .info strong.bar::before{
  display:none !important;
}
#footer .info .banner{
  display:inline-block;
  position:absolute;
  top:0;
  right:140px;
  padding: 10px 5px 8px 5px;
  background-color:#92070f;
  font-family: 'GmarketSansMedium';
  font-size:0.875rem;
  line-height:0.875rem;
  color:#fff;
  font-style:normal;
}
#footer .info .banner>b{
  display:inline-block;
  padding: 0 2px;
  font-family: 'GmarketSansBold';
  font-size:0.875rem;
  line-height:0.875rem;
  color:#fff;
}
#footer p{
  display:block;
  margin-top:10px;
  max-width:900px;
  width:100%;
  text-align:left;
  opacity:0.8;
}
#footer p>font{
  display:inline-block;
  width:100%;
  font-size:0.625rem;
  line-height:0.813rem;
  letter-spacing:-0.01rem;
  color:#000;
  text-align:left;
  word-break: keep-all;
}
#footer i.copy{
  display:block;
  margin-top:5px;
  text-align:left;
  font-size:0.563rem;
  line-height:0.813rem;
  color:#000;
  font-weight:600;
  font-style:normal;
  text-transform: uppercase;
  opacity:0.7;
}

#footer .left{
  position:absolute;
  top:0;
  right:0;

}
#footer .left .top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
#footer .left .top strong{
  display:inline-block;

  text-align:left;
  font-weight:500;
}
#footer .left .top strong>span{
  font-size:0.875rem;
  line-height:0.875rem;
  letter-spacing:-0.05rem;
  color:#000;
}
#footer .left .top strong>span::after{
  content: '/';
  display:inline-block;
  padding: 0 3px;
  font-size:0.875rem;
  line-height:0.875rem;
  font-weight:300;
}
#footer .left .top strong>b{
  font-size:0.875rem;
  line-height:0.875rem;
  color:#000;
  font-weight:700;
}
#footer a.tel{
  display:flex;
  width:156px;
  margin-left:10px;
  height:30px;

  justify-content:center;
  align-items: center;/*세로 중앙정렬*/
}
#footer a.tel>i{
  display:inline-block;
  width:26px;
  height:23px;
  padding-top:1px;
  border-radius:30px;
  background-color:#fff;
  border:1px solid #aaa;
  vertical-align:top;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease-out;
	     -o-transition: all 0.2s ease-out;
	        transition: all 0.2s ease-out;
}
#footer a.tel>i>img{
  width:18px;
  -webkit-transition: all 0.2s ease-out;
	   -moz-transition: all 0.2s ease-out;
	     -o-transition: all 0.2s ease-out;
	        transition: all 0.2s ease-out;
}
#footer a.tel>strong{
  display:inline-block;
  padding-left:5px;
  padding-top:3px;
  font-family: 'GmarketSansBold';
  font-size:1.5rem;
  letter-spacing:0.01rem;
  line-height:1.5rem;
  color:#000;
}
#footer a.tel>strong>font{
  display:inline-block;
  padding-right:5px;
  font-family: 'GmarketSansMedium';
  font-size:1.125rem;
  font-weight:400;
  line-height:1.500rem;
  color:#fff;
}
#footer .left dl{
  width:100%;
  margin-top:10px;
  text-align:left;
}
#footer .left dl>dd{
  margin-left:8px;
}
#footer .left dl>dd:first-child{
  margin-left:0;
}

#footer .web{
  display:inline-block;
}
#footer .mob{
  display:none
}
@media only screen and (max-width : 1024px){
  #footer .container{
    width:100%;
    padding: 0 10px;
  }
  #footer a.logo{
    position:relative;
    top:auto;
    left:auto;
  }
  #footer .info{
    max-width:none;
    width:100%;
    text-align:center;

  }
  #footer .info.st2{
    opacity:0.8;
  }
  #footer .info.st2 strong{
    font-weight:500;
  }
  #footer .info.pdB{
    margin-top:10px;
  }
  #footer .info i.banner{
    display:block;
    position:relative;
    width:165px;
    margin: 0 auto;
    margin-bottom:10px;
    line-height:1.25rem;
    top:auto;
    right:auto;
  }
  #footer .info strong{
    font-weight:600;
  }
  #footer p{
    display:block;
    max-width:600px;
    width:100%;
    margin: 0 auto;
    margin-top:10px;
    opacity:1;
  }
  #footer p>font{
    text-align:left;
    font-size:0.688rem;
    line-height:0.938rem;
    letter-spacing:-0.05rem;
    word-break: break-all;
  }

  #footer .left{
    position:relative;
    top:auto;
    right:auto;
    margin: 0 auto;
    text-align:center;
  }
  #footer .left .top{
    display:block;
    margin-top:10px;
  }
  #footer a.tel{
    margin: 0 auto;
    margin-top:10px;
  }
  #footer .left dl{
    text-align:center;
  }
  #footer .web{
    display:none;
  }
  #footer .mob{
    display:inline-block;
  }
}
@media only screen and (max-width : 640px){
  #footer{
    padding-top:40px;
    padding-bottom:40px;

  }
  #footer a.logo{
    display:block;
    width:60px;
    margin: 0 auto;
  }
  #footer .left dl>dd img{
    height:25px;
  }
  #footer .info strong{
    font-size:0.813rem;
    line-height:1rem;
  }
}
@media only screen and (max-width : 380px){
  #footer .info strong{
    display:inline-block;
    width:100%;
  }
  #footer .info strong::before{
    display:none !important;
  }
  #footer .left dl>dd img{
    height:20px;
  }
}

/*서브*/
.subVisual{
  position:relative;
  width:100%;
  height:370px;

  box-sizing: border-box;
  overflow:hidden;

}
.subVisual .container{
  position:relative;
  max-width:1800px;
  width:100%;
  height:100%;
  margin:0 auto;
  box-sizing: border-box;

}
.subVisual .bg{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);

  z-index:1;
}
.subVisual strong{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  margin-top:50px;
  font-size:2.375rem;
  line-height:2.375rem;
  letter-spacing:-0.07rem;
  color:#fff;
  font-weight:100;
  text-align:center;
  z-index:2;
}
.subVisual strong>b{
  padding-left:4px;
  font-size:2.375rem;
  line-height:2.375rem;
  font-weight:600;
  color:#fff;
}


.subVisual .visualS_imgArea{
	position:absolute;
	top:0;
	right:0;
	z-index:-2;
	visibility:hidden;
	opacity:1;
	width:100%;
	height:100%;
	text-align:center;
	-webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s;
  background-color:#000;
}
.subVisual .visualS_imgAreaActive{
	visibility:visible; opacity:1; top:0;
}
#visualS_bg1{
	background: url(../../img/subvisual01.jpg) center center no-repeat;

}





@media only screen and (max-width : 1024px){
  .subVisual{
    height:150px;
  }
  .subVisual .bg{
    display:block;

  }
  .subVisual strong{
    margin-top:40px;
    font-size:1.75rem;
    line-height:2rem;
    font-weight:400;
    letter-spacing:-0.07rem;

  }
  .subVisual strong>b{
    display:inline-block;
    width:100%;
    padding-top:3px;
    padding-left:0;
    font-size:1.75rem;
    line-height:2rem;
  }
  #visualS_bg1{
  	background-size:cover;

  }
}
@media only screen and (max-width : 460px){
  .subVisual strong{
    margin-top:50px;
    font-size:1.5rem;
    line-height:1.75rem;
    letter-spacing:-0.07rem;

  }
  .subVisual strong>b{
    display:inline-block;
    width:100%;
    padding-top:3px;
    padding-left:0;
    font-size:1.5rem;
    line-height:1.75rem;
  }
}




#subNav{
  width:100%;
  height:80px;
  padding-top:30px;
  text-align:center;
  background: url(../../img/subtitBg.jpg) center top repeat-x;
}
#subNav ul{
  display:block;
  height:100%;
  text-align:center;
  margin: 0 auto;
}

#subNav ul>li{
  display:inline-block;
  height:100%;
  padding: 0 25px;
  vertical-align:top;
}

#subNav ul>li a{
  display:inline-block;
  font-size:1.5rem;
  line-height:1.5rem;
  color:#fff;
  font-weight:100;
  opacity:0.8;
}
#subNav ul>li:hover a, #subNav ul>li.active a{
  font-weight:500;
  opacity:1;
}
@media only screen and (max-width : 1024px){
  #subNav ul:nth-child(2){
    max-width:540px;
    width:100%;

  }

  #subNav{
    height:60px;
    padding-top:20px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
  }

  #subNav ul.st1{
    justify-content:center;
    text-align: center;
  }
  #subNav ul>li a{
    font-size:1.25rem;
    line-height:1.25rem;
  }
}
@media only screen and (max-width : 460px){
  #subNav ul>li{
    padding: 0 15px;
  }
  #subNav ul>li a{
    font-size:1.125rem;
    line-height:1.125rem;
  }
}
@media only screen and (max-width : 640px){

}


#title{

  max-width:1200px;
  width:100%;
  margin: 0 auto;
  text-align:center;

}
#title strong{
  display:inline-block;
  width:100%;
  margin-top:20px;
  font-size:1.5rem;
  line-height:1.5rem;
  font-weight:300;
  text-align:center;
  letter-spacing:-0.12rem;
}
#title i{
  display:block;
  width:30px;
  height:1px;
  margin: 0 auto;
  margin-top:60px;
  background-color:#000000;

}

@media only screen and (max-width : 1024px){
  #title{
    margin-top:10px;
  }
  #title strong{
    margin-top:0;
    font-size:1.5rem;
    line-height:1.5rem;
    letter-spacing:-0.10rem;
    text-align:center;
  }
  #title i{
    margin-top:30px;
    background-color:#000000;

  }
}



#container{
  position:relative;
  padding-top:40px;
  margin-bottom:100px;
  /* background: url(../../img/containerBg.jpg)  center -18px no-repeat; */
}
@media only screen and (max-width : 1024px){
  #container{
    padding-top:30px;
    margin-bottom:50px;
    background-size:20px;
  }
}










.content{
  width:100%;

  margin: 0 auto;
  margin-top:60px;
}
.content.limit{
  max-width:1200px;

}

.content .web{
  display:block;
}
.content .mob{
  display:none;
}
@media only screen and (max-width : 1024px){
  .content{
    width:100%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    box-sizing: border-box;
  }
  .content .web{
    display:none;
  }
  .content .mob{
    display:block;
  }
}







ul.tab{
  display:flex;
  max-width:1200px;
  width:100%;
  margin: 0 auto;
  margin-bottom:50px;
  justify-content: center;/*가로 정렬*/
  align-items:top;/*세로 정렬*/
}
ul.tab>li{
  position:relative;
  width:24.25%;
  height:60px;
  margin-left:1%;
  text-align: center;
  border:5px solid #333;
  opacity:0.2;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}
ul.tab>li:first-child{
  margin-left:0;
}
ul.tab>li:hover, ul.tab>li.active{
  border:5px solid #9c182f;
  opacity:1;
}
ul.tab>li a{
  display:inline-block;
  width:100%;
  height:100%;
}
ul.tab>li font{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  display:inline-block;
  font-size:1.125rem;
  line-height:1.125rem;
  color:#333;
  word-break: keep-all;
  -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}
ul.tab>li.long>a{
  letter-spacing:-0.1rem;
}
ul.tab>li:hover>a, ul.tab>li.active>a{
  color:#539b46;

}
ul.tab>li:hover font, ul.tab>li.active font{
  color:#000 !important;
  font-weight:500;
}


@media only screen and (max-width : 1024px){
  ul.tab>li{
    height:50px;
    border:2px solid #333;
  }
  ul.tab>li:hover, ul.tab>li.active{
    border:2px solid #9c182f;
  }
  ul.tab>li font{
    position:absolute;
    font-size:1rem;
    line-height:1rem;
  }
}
@media only screen and (max-width : 640px){
  ul.tab{
    flex-flow: column;
  }
  ul.tab>li{
    width:100%;
    height:50px;
    margin-left:0;
    margin-top:1%;
  }
    ul.tab>li:first-child{
      margin-top:0;
    }

}





@media only screen and (min-width : 2400px){
  .wrap{
    min-width:2400px !important;
    width:2400px;
    margin: 0 auto;
    /* border-left:1px solid #ddd; */
    /* border-right:1px solid #ddd; */
    box-sizing: inherit;
    overflow:hidden;

  }
  #header{
    min-width:2400px !important;
    width:2400px;
    left:50%;
    transform: translate(-50%, 0%);
    /* border-left:1px solid #ddd; */
    /* border-right:1px solid #ddd; */
  }
}


.noArticle{
  display:inline-block;
  width:100%;
  padding-top:50px;
  padding-bottom:50px;
  text-align:center;
  font-size:1.1rem;
  line-height:1.1rem;
}