@charset "UTF-8";
@font-face {
    font-family: 'Eulyoo1945-SemiBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/Eulyoo1945-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {height:100%}
body {height:100%}
.p_t { font-family: 'Eulyoo1945-SemiBold';}
 /* Page Title */

 
.top {width:100%; display:inline-block; padding:30px 0; border-bottom:1px solid #ddd; background-color:#fff; position:relative;  min-width:1200px;  height:9 0px;}
.top .in {width:75%; margin:0 auto;min-width:1200px; display:flex; justify-content:space-between;   }
.top .in div {width:20%;  }
.top .in div:nth-child(2) {width:55%}
.top .in div:nth-child(3) {text-align:right;}
.top .in ul.nav { text-align:Center; width:100%; font-size:0}
/*.top .in ul li {display:inline-block; width:16.66666%; font-weight:500; font-size:1.2rem; letter-spacing:-1px;  line-height:30px; padding:0}*/





/* Navigation Styles */

nav { width:100%;  }

nav ul {
  font-size: 0;
  margin: 0;
  padding: 0; width:100%;
}

nav ul li {
  display: inline-block;
  position: relative;     width:16.66666%; text-align:Center;
}

nav ul li a {
  color: #333 !important;
  display:inline-block;
  font-weight:500; font-size:1.25rem; letter-spacing:-1px; padding-bottom:10px;  line-height:30px;
  
  transition: 0.3s linear;
}
nav ul li a:hover {color:#95887c !important}
 
nav ul li ul {
   display: none;
  position: absolute;
  width: 200px; border:1px solid #ddd; left:50%; margin-left:-100px;
}

nav ul li ul li {
   display: block; width:100%;  background-color:#fff
}
 nav ul li ul li:first-child { padding-top:15px}
 nav ul li ul li:last-child { padding-bottom:15px}

nav ul li ul li a {
  background: #fff;
  display: block; font-size:0.95rem; font-weight:400; line-height:30px; padding-bottom:0
 }

nav ul li ul li a:hover {color:#95887c }

nav .fa.fa-angle-down { margin-left: 6px; }



.main_vi {width:100%; display:inline-block; height:100%; background:url('/htm/prugio/img/vi.png');  background-size:cover;   position:relative;}
.main_vi div.box {position:absolute; top:50%; left:50%; transform: translate(-50%, -40%);  font-size:1.5rem; letter-spacing:-1px; font-weight:500; color:#fff; text-shadow:2px 2px 10px rgba(0,0,0,.3)}
.main_vi div.box b {font-size:3rem; font-weight:700; line-height:1.3em; width:100%; display:inline-block; padding-bottom:15px; color:#fff; letter-spacing:-3px}
 .main_vi div.box a {font-size:1.09rem;  margin-top:20px; border:1px solid #fff;  line-height:50px; width:230px; display:inline-block; color:#fff; letter-spacing:1px}




.content {width:100%; display:inline-block;   }

.tit { font-size:2.3rem; letter-spacing:2px;  line-height:2em; font-family: 'Eulyoo1945-SemiBold'; color:#333;}


.content .in {width:75%; margin:0 auto; min-width:1200px;  }
.sub .content .in {width:75%; margin:0 auto; min-width:1200px; }

.main .content ul.bn {width:100%;  margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center}
.main  .content ul.bn li {width:23%; display:inline-block; margin:1%; background:rgba(255,255,255,.8); text-align:center; padding:30px 15px 40px 15px; font-size:1.3rem; color:#433934; font-weight:600; letter-spacing:-1.5px; border:1px solid #e0dad6;  border-radius:5px; box-sizing:border-box;  }
.main  .content ul.bn li span.no   { font-family: 'Eulyoo1945-SemiBold'; font-weight:700; font-size:24px ; line-height:50px;  }
.main  .content ul.bn li span.s_t {font-size:1.15rem; font-weight:400; letter-spacing:-1px; }
.main .content ul.bn li span.bn_line {width:30px; height:1px; background-color:#333; margin-bottom:10px; display:inline-block}

.sub .content ul.bn {width:100%;  margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center}
.sub  .content ul.bn li {width:23%; display:inline-block; margin:1%;  text-align:center; padding:30px 15px 40px 15px; font-size:1.2rem; color:#50443e; font-weight:600; letter-spacing:-1.5px; background-color:#f8f7f6;   border-radius:5px; box-sizing:border-box;  }
.sub  .content ul.bn li span.no   { font-family: 'Eulyoo1945-SemiBold'; font-weight:700; font-size:24px ; line-height:50px;  }
.sub  .content ul.bn li span.s_t {font-size:1.1rem; font-weight:400; letter-spacing:-1px; }



.main_t { font-size:1.5rem; letter-spacing:-2px }
.main_t b {font-size:2.5rem; letter-spacing:2px; width:100%; display:inline-block; padding-top:8px; color:#333}



.map_box { display:flex; height:300px; border:1px solid #ddd;  background-color:#fff; letter-spacing:-.7px ; }
.map_box div {width:40%; box-sizing:border-box; text-align:left; padding:30px; font-size:1.05rem; color:#555; position:relative;}
.map_box div b {font-size:1.2rem; font-weight:600; line-height:40px}
.map_box div a {width:100%; line-height:50px; background-color:#004b8f; color:#fff; position:absolute; bottom:0; left:0; text-align:center; transition: all 0.3s ease-out;}
.map_box div a:hover {line-height:60px;}
.w_bg {width:100%; display:inline-block; background-color:#fff;   text-align:center;  }
 
footer {width:100%; text-align:center; min-width:1200px; background-color:#333; padding:40px 0; font-size:.88rem; line-height:1.3em; color:rgba(255,255,255,.7); letter-spacing:1;  position:relative;  }

.sub footer {margin-top:100px}


/*슬라이드*/

.carousel {
    width: 100%;
    height: 100%;
    display: flex;
    
    overflow: hidden;
  position: relative;
}

.carousel-item {
  visibility:visible;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
      -webkit-align-items: center;
    -webkit-justify-content: flex-end;
    position: relative;
    background-color: #fff;
    flex-shrink: 0;
   -webkit-flex-shrink: 0;
    position: absolute;
    z-index: 0;
  transition: 0.6s all linear;
}

.carousel-item__info {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  
    display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  
  order: 1;
  left: 0;
  margin: auto;
  padding: 0 40px;
  width: 40%;

}

.carousel-item__image {
    width: 60%;
    height: 100%;
    order: 2;
    align-self: flex-end;
    flex-basis: 60%;
  
      -webkit-order: 2;
    -webkit-align-self: flex-end;
    -webkit-flex-basis: 60%;
  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   position:relative;
  transform: translateX(100%);
  transition: 0.6s all ease-in-out;
}

.carousel-item__subtitle {
     letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    margin: 0;
    color: #004b8f;    
    font-weight: 500;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s all ease-in-out;
}

.carousel-item__title {
    margin: 15px 0 0 0;
    font-family: 'Eulyoo1945-SemiBold';
    font-size: 2.2em;
    line-height: 45px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #2C2C2C;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel-item__description {
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
    margin-top: 35px;
    
    font-size:1.1rem; letter-spacing:-1px;
    color: #7e7e7e;
    line-height: 22px;
    margin-bottom: 35px;
}

.carousel-item--1 .carousel-item__image{
  background-image: url('/htm/prugio/img/bn1.png');
}


.carousel-item--2 .carousel-item__image{
  background-image: url('/htm/prugio/img/bn2.png');
}

.carousel-item--3 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/92733/pexels-photo-92733.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--4 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/1008732/pexels-photo-1008732.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--5 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/1029614/pexels-photo-1029614.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}




.carousel-item__container{

}

.carousel-item__btn {
    width: 35%;
    color: #2C2C2C;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 2px;
    font-size: 14px; border-bottom:1px solid #999; padding-bottom:5px;
    text-transform: uppercase;
    margin: 0;
    width: 35%;
    font-weight: 500;
  text-decoration: none;
      transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel__nav {
    position: absolute;
    right: 0;
    z-index: 2;
    background-color: #fff;
  bottom: 0;
}

.carousel__icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
  fill: #5d5d5d;
}

.carousel__arrow {
    cursor: pointer;
    display: inline-block;
    padding: 11px 15px;
    position: relative;
}

.carousel__arrow:nth-child(1):after {
    content:'';
    right: -3px;
    position: absolute;
    width: 1px;
    background-color: #b0b0b0;
    height: 14px;
    top: 50%;
    margin-top: -7px;
}

.active{
   z-index: 1;
  display: flex;
  visibility:visible;
}

.active .carousel-item__subtitle, .active .carousel-item__title, .active .carousel-item__description,.active .carousel-item__btn{
    transform: translateY(0);
    opacity: 1;
  transition: 0.6s all ease-in-out;
    visibility: visible;
}



.active .carousel-item__image{ 
transition: 0.6s all ease-in-out;
transform: translateX(0);
}

.gallery  {width:100%;  float:left; margin-top:50px; margin-bottom:100px}
.gallery li {width:25%; float:left}
.gallery li img {width:100%;}


.menu {width:100%;   font-size:0; margin-top:50px;}
.menu li {display:inline-block; width:25%; font-size:1.1rem;  line-height:45px; text-align:center; border:1px solid #ddd;  box-sizing:border-box; margin-left:-1px; color:#333}
.menu li.ov {background-color:#555; color:#fff;}
h2.guide {width:100%; text-align:center; font-size:2rem; color:#333; font-weight:600; line-height:100px}


.tab {width:100%; display:inline-block}
.tab p {width:50%; float:left;  text-align:center; background-color:#fff; font-size:1.2rem; line-height:50px; }
.tab p a {width:100%; display:inline-block}
.tab p.ov {  background-color:#004b8f; }
.tab p.ov  a {  color:#fff !important;}

.t_box {font-size:1.2rem;  font-weight:500;  color:#555;  line-height:1.7em; letter-spacing:-1px; text-align:Center;}
.t_box b {font-weight:600; color:#333}