body {height:100%}
html {height:100%}
#wrap {height:100%; position:relative; width:100%; display:inline-block}

.main_con {width:100%;   margin:0 auto;  max-width:1240px; margin-top:8vh   }

h2.main_h2 {font-size:2rem; margin-bottom:10px}
.main_h2_p {font-size:1rem; color:#666;}
hr.main_hr {height:70px}

/*PC 비쥬얼*/
@media all and (min-width:1300px) {

     .vi {width:100%; position:Relative; margin:0 auto;  height:580px;  display:flex; background:url('../img/chuttersnap-G7PV6gd-w4g-unsplash.jpg') no-repeat center; background-size:cover; }
     

	.box  {width:33.333333%; background:rgba(0,0,0,.5); border-right:1px solid rgba(255,255,255,.3); height:100%; text-align:center; box-sizing:border-box; padding:30px; color:#fff; transition: all 0.3s ease-out; display:flex; align-items:Center; position:relative ; z-index:99}
	.box:last-child {border-right:none}
	.box p.one {width:150px; padding-bottom:150px;/*  border:3px solid rgba(255,255,255,.7);  */position:relative; display:inline-block; border-radius:50%; }
	.box p.one img.icon {width:45%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
	.box p.one img.one_img {width:100%;  position:absolute; left:0; top:0;  }

	.box_in  {width:100%;}
	.t1 { font-family: 'KOHIBaeumOTF'; display:block; letter-spacing:1px; margin-top:15px; font-size:1.5rem;   }
	.t2 {display:block;  font-size:1.6rem; font-weight:700;margin-top:5px }
	.t3 {display:block; color:rgba(255,255,255,.9); font-size:1.1rem; font-weight:400;  margin-top:10px}
	.box div.none {display:none;  }

	.box:hover {width:50%; background:rgba(0,0,0,.7); marztransition: all 0.3s ease-out;}
	.box:hover div.none {display:block; margin-top:15px; }
	.box:hover div.none a {width:150px; display:block; color:#fff !important; border:1px solid #fff; margin-top:25px; line-height:40px; font-size:1rem;  transition: all 0.3s ease-out; }
	.box:hover div.none a:nth-child(2) {margin-top:10px}       
	.box:hover div.none a:hover {background-color:#fff; color:#333 !important} 

}


.one_img {  -webkit-animation: rotate-center 8s ease-in-out infinite;
	        animation: rotate-center 8s ease-in-out infinite;  }
 
  
  @-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}



.site {width:100%; display:flex; margin-top:50px; margin-bottom:50px}
.site li {border:1px solid #ddd; width:8%; padding:10px; margin-right:10px}
.site li img {width:100%}



.main_map_info {font-size:.97rem; color:#666;}
.main_map_info b {font-size:1.15rem; color:#333; font-weight:600; display:block; margin-bottom:5px}


@media all and (max-width:1300px) { 
    .main_con { padding:0 5%; box-sizing:border-box; }
 
    .vi {width:100%; background:url('../img/chuttersnap-G7PV6gd-w4g-unsplash.jpg') no-repeat center; background-size:cover; }
	.box  {width:100%; border-bottom:1px solid rgba(255,255,255,.5); padding:25px 0;  background:rgba(0,0,0,.2); text-align:center;}
	.box p.one {width:85px; padding-bottom:85px; position:relative; display:inline-block; border-radius:50%; }
	.box p.one img.icon {width:50%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
	.box p.one img.one_img {width:100%;  position:absolute; left:0; top:0;  }

	.box_in  {width:100%; color:#fff;}
	.t1 {display:none; }
	.t2 {display:block; margin-bottom:5px; margin-top:5px;  font-size:1.25rem; font-weight:700; }
   	.t3 {font-size:.95rem}
	.box div.none a {display:none }
 }

 @media all and (max-width:900px) {
	 .site li {width:18%}
 	  h2.main_h2 {font-size:1.6rem;  }
	  .main_h2_p {font-size:0.93rem;  }
	 hr.main_hr {height:50px}
	 .box  {background:rgba(0,0,0,.5); }

	 .main_map_info {font-size:.95rem;}
	 .main_map_info b {font-size:1rem;  }


 }

 
 .bottom_slide {height:70px;   margin-top:5vh }

 
 @media all and (max-width:1300px) {
    .bottom_slide {height:10vw;  }
 }