/* header start */
/* top_kakao*/
/* .top_kakao{
  background-color: #fbe201;
  width:100%;
  left:0;
  position: fixed;
  overflow: hidden;
  z-index: 997;
}
.top_kakao_wrap{
  position: relative;
  height:50px;
}
.top_kakao img{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding:0 5px;
} */

/* top */
.top{position:fixed; top:0px; left:0; z-index:997; width:100%; height:80px; background-color: #fff;}
.top.on{background:#fff; border-bottom:1px solid #ccc;}
.top .menubtn{position:relative; float:right; width:63px; margin-top:16px;}
.top .menubtn ul{position:absolute; top:0; left:0; width:63px; height:50px; padding:4px 16px;}
.top .menubtn ul li{height:1px; margin:10px 0; background:#2b3081; transition:all 0.5s; transform-origin: left center;}
.top .menubtn ul li:nth-child(2){width:50%;}
.top .menubtn.on ul .bar_t{transform:rotate(45deg);}
.top .menubtn.on ul .bar_m{width:0;}
.top .menubtn.on ul .bar_b{transform:rotate(-45deg);}
.top .logo{padding-left:15px; padding-top:25px;}
.top .logo img{height:40px;}

/* sidemenu */
.menubox{position:fixed; top:0; left:-100%; z-index:998; width:100%; height:100%; transition:all 0.3s; background:#fff; overflow:auto;}
/* .menubox_top_kakao{
  background-color: #fbe201;
  width:100%;
  height:50px;
  position: relative;
  overflow: hidden;
}
.menubox_top_kakao img{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  height:auto;
  padding:0 5px;
} */

.menubox .logo{position: absolute; padding-left:15px; padding-top:25px; z-index: 999;}
.menubox .logo a{display: block; width:100%;}
.menubox .logo img{height:40px;}
.menubox.on{left:0;}
.sidemenu_head{position:relative; padding:40px 16px 40px; margin-bottom:10px; background-color: #2b3081;}
.sidemenu_head ul{position:absolute; top:15px; right:0; width:63px; height:50px; padding:4px 16px;}
.sidemenu_head ul li{height:1px; margin:10px 0; background:#fff; transition:all 0.5s; transform-origin: left center;}
.sidemenu_head ul .bar_t{transform:rotate(45deg);}
.sidemenu_head ul .bar_m{width:0;}
.sidemenu_head ul .bar_b{transform:rotate(-45deg);}
.sidemenu_head p:nth-of-type(1){font-size:30px; color:#000;}
.sidemenu_head p:nth-of-type(2){margin-top:10px; font-size:16px; color:#000;}
.sidemenu_body{padding:0 10px;}
.sidemenu_body .sidemenu{margin-bottom:5px;}
.sidemenu_body .sidemenu p{position:relative; padding:20px; font-size:16px; font-weight:700; color:#fff; background:#fff; border-bottom:1px solid #ccc;transition:all 0.5s;}
.sidemenu_body .sidemenu p:hover{opacity:1;}
.sidemenu_body .sidemenu p .arrow{position:absolute; top:19px; right:15px; width:15px; height:15px; background:url('../img/mplus.png') no-repeat center; transition:all 0.3s;}
.sidemenu_body .sidemenu p.open .arrow{transform:rotate(135deg);}
.sidemenu_body .sidemenu p a{color:#2b3081; display: block;}
.sidemenu_body .sidemenu ul{display:none; padding:5px 0 20px; background:#fff;}
.sidemenu_body .sidemenu ul li{margin-bottom:5px;}
.sidemenu_body .sidemenu ul li a{display:block; padding:15px 35px; font-size:14px; font-weight:400; color:#333; border-bottom:1px solid #ddd;}
/* header end */

/* visual swiper start */
.visual{
  width:100%;
  height:450px;
  margin-top:80px;
}
.visual .color span:first-child{color:#333;}
.visual .color span:last-child{color:#333; border:1px solid #333;}
.visual .color span:last-child a{
  color:#333;
}
.visual .color span:last-child a::after{color:#333;}

.typo_add{
  position: absolute;
  top:35%;
  left:0;
  width:100%;
  z-index: 99;
}
.typo_add span{
  text-align: center;
  color:#fff;
  display:block;
  opacity:0;
  transform:translate(0,100%);
  transition:all 1s ease-in-out;
}
.typo_add span:first-child{
font-size:24px;
color:#fff;
transition-delay:0s;
}
.typo_add span:first-child strong{font-size:24px;}
.typo_add span:nth-child(2){
  font-size:18px;
  color:#fff;
  transition-delay:0.5s;
}
.typo_add span:last-child{
  overflow: hidden;
  border:1px solid #fff;
  width:160px;
  transition-delay:1s;
  margin:0 auto;
  margin-top:10px;
}
.typo_add span:last-child::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 200%;
  border-radius: 50%;
  transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
  transition: opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1);
  background-color: #ed1f28;
  opacity: 0;
  z-index: -1;
  transition: all .2s ease-in-out;
}
.typo_add span:last-child:hover::before{
  opacity: 1;
  transition-duration: .85s;
  transition: all .2s ease-in-out;
  transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
}
.typo_add span:last-child:hover{border:1px solid #ed1f28;}
.typo_add span:last-child:hover a{color:#fff;transition: all .2s ease-in-out;}
.typo_add span:last-child:hover a::after{color: #fff; transform: translateX(25px);}


.typo_add span:last-child a{
  display: block;
  font-size:14px;
  padding:10px;
  position: relative;
  transition-delay:1s;
  text-align: left;
  color:#fff;
}
.typo_add span:last-child a::after{
  content: '¡æ';
  position: absolute;
  top:6px;
  right:45px;
  color: #fff;
  font-size:24px;
  transition: all .3s ease-in-out;
}

.visual .swiper-slide > img{width:100%; transform:scale(1.1); transition:all 5s ease;}
.visual .swiper-slide.swiper-slide-active > img.zoom{transform:scale(1);}
.visual .swiper-slide.swiper-slide-active .typo_add > span.up{opacity:1; transform:translate(0,0);}

.visual .swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.visual .swiper-slide {
  width:100%;
  text-align: center;
  font-size: 18px;
  background: #fff;
  overflow: hidden;

/* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.visual .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visual .swiper .swiper-pagination span{margin:0 3px;}

.visual .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border:1px solid #fff;
  background: none;
  border-radius: 100%;
}

.visual .swiper-pagination-bullet-active {
  opacity: 1;
  background: #ed1f28;
}
.visual .swiper .swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: .3s opacity;
  -o-transition: .3s opacity;
  transition: .3s opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
  left:50%;
  bottom:30px;
  transform: translate(-50%, 100%);
}
.visual .swiper-button-prev,
.visual .swiper-container-rtl .swiper-button-next {
  background-image: url("../img/swiper_prev.png");
  left:0px;
  right: auto;
  width:20px;
}
.visual .swiper-button-next,
.visual .swiper-container-rtl .swiper-button-prev {
  background-image: url("../img/swiper_next.png");
  right:0px;
  left: auto;
  width:20px;
}
.visual .swiper-button-next,
.visual .swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 40px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 30px 40px;
  background-position: center;
  background-repeat: no-repeat
}
/* visual swiper end */

/* bio */
.bio{padding:20px 0;}
.bio ul{margin-top:10px;}
.bio ul li{height:auto;}
.bio_text h2{
  font-size:24px;
  color:#333;
  text-align: center;
}
.bio_text h2 strong{font-size:24px;}
.bio_text{
  position: relative;
}
/* .bio_text::after{
  content: '¡Ü';
  position: absolute;
  bottom:-15px;
  left:0;
  font-size:35px;
  color: #ed1f28;
}
.bio_text::before{
  content: '';
  position: absolute;
  left:15px;
  bottom:10px;
  width:250px;
  height:2px;
  background-color: #ed1f28;
} */
.bio_text h2 strong{
  color:#2c3084;
}
.bio_text p{
  font-size:16px;
  color:#333;
  text-align: center;
  font-family:'Noto Sans CJK KR'
}
.bio_text span{
  display: block;
  font-size:12px;
  line-height: 24px;
  color:#333;
  opacity: .8;
  font-family:'Noto Sans CJK KR';
  text-align: center;
  margin-top:20px;
  letter-spacing: -1px;
}

.bio li{position: relative;}
.bio li a{
  display: block;
  position: relative;
  background-color: #000;
  overflow: hidden;
}
.bio li a p{
  position: absolute;
  right:0;
  bottom:0;
  font-size:12px;
  padding:10px 50px 10px 20px;
  color:#fff;
  background-color: #333;
  z-index: 1;
}
.bio li a p::after{
  content: '¡æ';
  position: absolute;
  top:6px;
  right:20px;
  font-size:20px;
  color:#fff;
  transition: all .3s ease-in-out;
}
.bio li a img{width:100%;}
.bio_photo_text{
  position: absolute;
  top:30px;
  left:15px;
  z-index: 1;
}
.bio_photo_text span{
  display: block;
  color:#fff;
}
.bio_photo_text span:nth-child(1){font-size:14px; margin-bottom:20px;}
.bio_photo_text span:nth-child(2){font-size:18px;}
.bio_photo_text span:nth-child(3){font-size:24px;}

.bio li a img{transition: all .3s ease-in-out;}
.bio li a:hover img{transition: all .3s ease-in-out; transform: scale(1.1); opacity: .8;}
.bio li a:hover p::after{transition: all .3s ease-in-out; transform: translateX(8px);}
/* bio */

/* middle_slide */
.middle_slide{
  padding:20px 0;
}
.middle_slide .swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.middle_slide .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.middle_slide .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* middle_slide */

/* youtube */
.youtube{padding:30px 0;}
.youtube ul{margin-bottom:20px;}
.youtube_text{
  position: relative;
}
/* .youtube_text::after{
  content: '¡Ü';
  position: absolute;
  bottom:-15px;
  left:0;
  font-size:35px;
  color: #2c3084;
}
.youtube_text::before{
  content: '';
  position: absolute;
  left:15px;
  bottom:10px;
  width:250px;
  height:2px;
  background-color: #2c3084;
} */
.youtube_text h2{
  font-size:24px;
  color:#333;
  text-align: center;
}
.youtube_text p{
  font-size:16px;
  color:#333;
  font-family:'Noto Sans CJK KR';
  text-align: center;
}
.youtube_text span{
  display: block;
  font-size:14px;
  text-align: center;
  color:#333;
  opacity: .8;
  font-family:'Noto Sans CJK KR';
  margin-top:20px;
}
.youtube_video{overflow: hidden; position: relative; height:209px;}
/* .youtube_video::before{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: transparent;
} */

.youtube_video .video_wrap iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
/* youtube */

/* product */
.product{padding:20px 0; position: relative;}
.product h2{
  font-size:24px;
  color:#333;
  padding-left:12px;
}
.product p{
  font-size:16px;
  color:#333;
  padding-left:12px;
}
.product span{
  position: absolute;
  top:35px;
  right:0;
}
.product span a{
  display: block;
  font-size:12px;
  padding:10px 50px 10px 20px;
  color:#333;
  position: relative;
}
.product span a::after{
  content: '¡æ';
  position: absolute;
  top:6px;
  right:20px;
  font-size:24px;
  color:#333;
  transition: all .3s ease-in-out;
}
.product span:hover a::after{transition: all .3s ease-in-out; transform: translateX(8px);color:#ed1f28;}
.product span:hover a{color:#ed1f28;}

.product_photo{padding:15px 0;}
.product_photo a{
  display: block;
  background-color: #000;
  overflow: hidden;
  text-align: center;
}
.product_photo a img{transition: all .3s ease-in-out; width:100%;}
.product_photo a:hover img{transition: all .3s ease-in-out; transform: scale(1.1); opacity: .8;}
.product_photo a:hover ~ p{color:#ed1f28; transition: all .3s ease-in-out;}

.product_photo p{
  font-size:16px;
  color:#333;
  text-align: center;
  margin-top:10px;
  transition: all .3s ease-in-out;
  position: relative;
}
/* product */

/* info */
.info{
  width:100%;
  max-width: 1920px;
  margin:0 auto;
  padding:20px 0;
}
.info h2{
  font-size:24px;
  color:#333;
}
.info p{
  font-size:16px;
  color:#333;
}
.info span{
  position: absolute;
  top:25px;
  right:0;
  z-index: 9;
}
.info span a{
  display: block;
  font-size:12px;
  padding:10px 50px 10px 20px;
  color:#333;
  position: relative;
}
.info span a::after{
  content: '¡æ';
  position: absolute;
  top:6px;
  right:20px;
  font-size:24px;
  color:#333;
  transition: all .3s ease-in-out;
}
.info span:hover a::after{transition: all .3s ease-in-out; transform: translateX(8px);color:#ed1f28;}
.info span:hover a{color:#ed1f28;}

.info .swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin-top:10px;
}
.info .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.info .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info .swiper-button-prev,
.info .swiper-container-rtl .swiper-button-next {
    background-image: url("../img/swiper_prev.png");
    left: 0px;
    right: auto;
    width:20px;
}
.info .swiper-button-next,
.info .swiper-container-rtl .swiper-button-prev {
    background-image: url("../img/swiper_next.png");
    right: 0px;
    left: auto;
    width:20px;
}
.info .swiper-button-next,
.info .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 40px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 30px 40px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;

}
.swiper_arrow_wrap{
  position: absolute;
  top:90%;
  left:85%;
  transform: translate(-50%, -50%);
  width:80px;
  z-index: 999;
}
/* info */

/* footer */
footer{
  width:100%;
  padding-top:20px;
  padding-bottom:60px;
  background-color: #231f20;
}
.foter_top_link{
  overflow: hidden;
  text-align: center;
  padding-left:20px;
  border-bottom:1px solid #ccc;
  margin-bottom:20px;
}
.foter_top_link li{
  float:left;
}
.foter_top_link li a{
  display: block;
  font-size:12px;
  color:#ccc;
  height:40px;
  line-height: 40px;
  margin-right:15px;
  transition: all .2s ease-in-out;
}
.foter_top_link li a:hover{color:#ed1f28; transition: all .2s ease-in-out; transform: translateY(-10px);}

.footer_bottom ul{padding:10px 0;}

.footer_bottom ul:nth-child(1){border-bottom:1px solid #ccc;}
.footer_bottom ul:nth-child(1) p{
  font-size:12px;
  color:#ccc;
}
.footer_bottom ul:nth-child(2) p{
  font-size:12px;
  color:#ccc;
}
.footer_bottom ul:nth-child(2) p img{width:10px; vertical-align: middle;}

.footer_bottom ul:nth-child(3){text-align: center;}
.footer_bottom ul:nth-child(3) img{width:200px;}
/* footer */


/* top_btn */
.topbtn{
  position: fixed;
  bottom:70px;
  right:20px;
  z-index:9999999;
  width:30px;
  height:30px;
  border-radius: 40px;
  background-color:  #ed1f28;
  transition: all 0.5s ease;
  opacity: 0;
}
.topbtn.on{opacity: 1;}

.topbtn img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:20px;
}

.topbtn:active,
.topbtn:hover
{color:#fff; transition:all 0.5s ease; background-color: #ed1f28;}
/* top_btn */

/* m_phone */
.m_phone{
  width:100%;
  max-width:800px;
  min-width:300px;
  position: fixed;
  bottom:0;
  z-index: 99999999999999999;
  text-align: center;
}