@charset "utf-8";

/* 스킵 메뉴 */
#skip {position: relative;}
#skip a {position: absolute; left:0; top: -999px; width: 200px; border:1px solid #fff; color:#fff; text-align: center; background:#333; line-height: 30px; z-index: 9;}
#skip a:active,
#skip a:focus {top:0;}

/*******************************

전체 레이아웃

*******************************/

html{height: -webkit-fill-available;}

#header
{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  flex-shrink: 0;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height: 70px;
  -webkit-transition: background 0.3s ease-out, margin-top 0s ease-out;
  transition: background 0.3s ease-out, margin-top 0s ease-out;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(30, 30, 30, 0.03);
}

#wrap
{
  display:flex;
  flex-direction:column;
  height: 100vh;
}

#wrap_sub
{
  display:flex;
  flex-direction:column;
  min-height: 100vh;
  background: #fff;
}

.main_visual
{
  height: calc(100% - 80px);
  width: 100%;
  display:flex;
  flex-direction: row;
  position:relative;
  align-items: center;
  overflow:hidden;
}

.main_visual .bg
{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url(../img/main_visual.jpg) no-repeat center center;
  background-size: cover;
  animation: slidein_img 5s ease 0s 1 normal both;
  -webkit-animation: slidein_img 5s ease 0s 1 normal both;
  transform-origin:50% 50%;
  /* animation: slideright_img 3s ease 0s 1 normal both;
  -webkit-animation: slideright_img 3s ease 0s 1 normal both; */
}

@keyframes slidein_img
{
  0% { -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}
  100% { -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}
}

@keyframes slideright_img
{
  0% { -ms-transform: translate(-30px,0px); -webkit-transform: translate(-30px,0px); transform: translate(-30px,0px);}
  100% { -ms-transform: translate(0px,0px); -webkit-transform: translate(0px,0px); transform: translate(0px,0px);}
}

.sub_visual
{
  height: 380px;
  width: 100%;
  display:flex;
  flex-direction: row;
  position:relative;
  align-items: center;
  overflow:hidden;
}

.sub_visual .bg1
{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url(../img/sub_visual1.jpg) no-repeat center center;
  background-size: cover;
  animation: slidein_img 5s ease 0s 1 normal both;
  -webkit-animation: slidein_img 5s ease 0s 1 normal both;
  transform-origin:50% 50%;
  /* animation: slideright_img 3s ease 0s 1 normal both;
  -webkit-animation: slideright_img 3s ease 0s 1 normal both; */
}

.sub_visual .bg2
{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url(../img/sub_visual2.jpg) no-repeat center center;
  background-size: cover;
  animation: slidein_img 5s ease 0s 1 normal both;
  -webkit-animation: slidein_img 5s ease 0s 1 normal both;
  transform-origin:50% 50%;
  /* animation: slideright_img 3s ease 0s 1 normal both;
  -webkit-animation: slideright_img 3s ease 0s 1 normal both; */
}

.sub_visual .bg3
{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url(../img/sub_visual3.jpg) no-repeat center center;
  background-size: cover;
  animation: slidein_img 5s ease 0s 1 normal both;
  -webkit-animation: slidein_img 5s ease 0s 1 normal both;
  transform-origin:50% 50%;
  /* animation: slideright_img 3s ease 0s 1 normal both;
  -webkit-animation: slideright_img 3s ease 0s 1 normal both; */
}

.sub_visual .bg4
{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url(../img/sub_visual4.jpg) no-repeat center center;
  background-size: cover;
  animation: slidein_img 5s ease 0s 1 normal both;
  -webkit-animation: slidein_img 5s ease 0s 1 normal both;
  transform-origin:50% 50%;
  /* animation: slideright_img 3s ease 0s 1 normal both;
  -webkit-animation: slideright_img 3s ease 0s 1 normal both; */
}

.sub_visual .bg5
{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url(../img/sub_visual5.jpg) no-repeat center center;
  background-size: cover;
  animation: slidein_img 5s ease 0s 1 normal both;
  -webkit-animation: slidein_img 5s ease 0s 1 normal both;
  transform-origin:50% 50%;
  /* animation: slideright_img 3s ease 0s 1 normal both;
  -webkit-animation: slideright_img 3s ease 0s 1 normal both; */
}

.sub_visual .bg6
{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: url(../img/sub_visual6.jpg) no-repeat center center;
  background-size: cover;
  animation: slidein_img 5s ease 0s 1 normal both;
  -webkit-animation: slidein_img 5s ease 0s 1 normal both;
  transform-origin:50% 50%;
  /* animation: slideright_img 3s ease 0s 1 normal both;
  -webkit-animation: slideright_img 3s ease 0s 1 normal both; */
}


@keyframes slidein_img
{
  0% { -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}
  100% { -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}
}

@keyframes slideright_img
{
  0% { -ms-transform: translate(-30px,0px); -webkit-transform: translate(-30px,0px); transform: translate(-30px,0px);}
  100% { -ms-transform: translate(0px,0px); -webkit-transform: translate(0px,0px); transform: translate(0px,0px);}
}

#footer
{
  height: 80px;
  width: 100%;
  background:#101010;
}



/******************************

header 영역

*******************************/

.header
{
  padding:0 50px;
}

.header .logo
{
  flex-basis:115px;
  flex-grow:0;
  flex-shrink:1;
}

.header .logo .logo_img
{
  display: block;
  width: 253px;
  height: 67px;
  background: url(../img/logo_w.png) no-repeat center center;
  background-size: 253px auto;
}


.pet_btn a
{
  position: absolute;
  top: 15px;
  right: 160px;
  color: #fff;
  padding: 8px 24px;
  background: rgba(255,255,255,0.15);
  border-radius: 60px;
  vertical-align: middle;
  display:block;
}

.pet_btn a button
{
  color:#fff;
}

.pet_btn_mo a
{
  position: absolute;
  top: 11px;
  right: 90px;
  color: #fff;
  padding: 3px 24px;
  background: rgba(255,255,255,0.15);
  border-radius: 60px;
  vertical-align: middle;
  display:none;
}

.pet_btn_mo a button
{
  color:#fff;
}

.category
{
  position: absolute;
  top: 27px;
  right: 50px;
  width: 40px;
  height: 24px;
  cursor: pointer;
}

.category .bar
{
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border: 0;
  background: #fff;
  transition: opacity 0.3s, top 0.3s, transform 0.5s;
  transition-delay: 0.3s, 0.3s, 0s;
}

.category .bar:nth-child(2) {top:0; transform:rotate(0)}
.category .bar:nth-child(3) {top:12px; transform:rotate(0); width: 70%;}

.category.close .bar {background:#fff; transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0s, 0s, 0s, 0.3s; }
.category.close .bar:nth-child(2) {top:6px; background:#fff; transform:rotate(-45deg); width: 80%;}
.category.close .bar:nth-child(3) {top:6px; background:#fff; transform:rotate(45deg); width: 80%;}

.scr {overflow-y: hidden;}

/* header 영역 _ on 했을경우 */

.header.on
{
  background: #282b30 !important;
  border-bottom:1px solid #282b30 !important;
  position: fixed;
  z-index:100;
}

.header.on .logo_img
{
  display: block;
  width: 253px;
  height: 67px;
  background: url(../img/logo_w.png) no-repeat center center;
  background-size: 253px auto;
}


.header.on .category:hover .bar
{
  background: linear-gradient(135deg , #fad961 0%,#f76b1c 100%);
}

.header.on .side .contact_btn a button
{
  color: #000;
}

.header.on .pet_btn a:hover
{
  background: linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
  border:0;
  color:#fff;
}

.header.on .pet_btn a:hover button
{
  color:#fff;
}


/******************************

main 영역

*******************************/


.main_visual .tit
{
  margin-right: 30px;
  margin-left: 50px;
}

.main_visual .tit h2
{
  width: 500px;
  color:#fff;
  font-weight: bold;
  line-height: 1.2;
}

.main_visual .tit h5
{
  width: 500px;
  color:rgba(255,255,255,0.6);
  margin-top:20px;
}



.row
{
  padding: 0 50px;
  margin: 0 auto;
  width: 100%;
}

/*버튼*/

.main_btn a
{
  font-weight: 500;
  border-radius: 60px;
  height: 40px;
  line-height: 40px;
  width: 150px;
  text-align: center;
  -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  display:block;
  background-color:rgba(0,0,0,0.25);
  margin-top:40px;
  letter-spacing: -0.5px;
  -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    cursor: pointer;
}

.main_btn a button
{
  font-weight: 400;
  color:rgba(255,255,255,1);
  cursor: pointer;
}

.main_btn a:hover
{
  background:linear-gradient(135deg , #fad961 0%,#f76b1c 100%);
  font-weight: bold;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.main_btn a:hover button
{
  color:#fff;
}

.main_btn2 a
{
  font-weight: 500;
  border-radius: 60px;
  height: 40px;
  line-height: 40px;
  width: 150px;
  text-align: center;
  -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  display:block;
  background-color:rgba(255,255,255,0.2);
  margin-top:40px;
  letter-spacing: -0.5px;
  -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-property: transform;
    transition-property: transform;
}

.main_btn2 a button
{
  font-weight: 400;
  color:rgba(255,255,255,1);
}

.main_btn2 a:hover
{
  background:linear-gradient(135deg , #fad961 0%,#f76b1c 100%);
  font-weight: bold;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.main_btn2 a:hover button
{
  color:#fff;
}

.icon_1
{
  width: 50px;
  height: 50px;
  background: url(../img/icon_1.png) no-repeat center center;
  background-size: 50px auto;
  margin-bottom: 30px;
}

.icon_2
{
  width: 50px;
  height: 50px;
  background: url(../img/icon_2.png) no-repeat center center;
  background-size: 50px auto;
  margin-bottom: 30px;
}

.icon_3
{
  width: 65px;
  height: 50px;
  background: url(../img/icon_3.png) no-repeat center center;
  background-size: 50px auto;
  margin-bottom: 30px;
}

.icon_4
{
  width: 50px;
  height: 50px;
  background: url(../img/icon_4.png) no-repeat center center;
  background-size: 50px auto;
  margin-bottom: 30px;
}

.icon_5
{
  width: 50px;
  height: 50px;
  background: url(../img/icon_5.png) no-repeat center center;
  background-size: 50px auto;
  margin-bottom: 30px;
}

.icon_6
{
  width: 50px;
  height: 50px;
  background: url(../img/icon_6.png) no-repeat center center;
  background-size: 50px auto;
  margin-bottom: 30px;
}

/* .swiper-slide:hover .icon_1,
.swiper-slide:hover .icon_2,
.swiper-slide:hover .icon_3,
.swiper-slide:hover .icon_4,
.swiper-slide:hover .icon_5
{
  display:none;
} */

.swiper-slide:hover .icon_1
{
  background: url(../img/icon2_1.png) no-repeat center center;
  margin-bottom: 10px;
}

.swiper-slide:hover .icon_2
{
  background: url(../img/icon2_2.png) no-repeat center center;
  margin-bottom: 10px;
}

.swiper-slide:hover .icon_3
{
  background: url(../img/icon2_3.png) no-repeat center center;
  margin-bottom: 10px;
}

.swiper-slide:hover .icon_4
{
  background: url(../img/icon2_4.png) no-repeat center center;
  margin-bottom: 10px;
}

.swiper-slide:hover .icon_5
{
  background: url(../img/icon2_5.png) no-repeat center center;
  margin-bottom: 10px;
}

.swiper-slide:hover .icon_6
{
  background: url(../img/icon2_6.png) no-repeat center center;
  margin-bottom: 10px;
}

.swiper-slide h6
{
  display:none;
}

.swiper-slide .main_btn
{
  display:none;
}

.swiper-slide h3{color:#fff; font-weight: bold;}

.swiper-slide:hover
{
  background: rgba(255,255,255,1);
  opacity: 1;
}

.swiper-slide:hover h3
{
  color:#333;
  font-weight: bold;
}

.swiper-slide:hover h6
{
  display:block;
}

.swiper-slide:hover .main_btn
{
  display:block;
}

/*footer 영역*/

#footer
{
  display:flex;
  flex-direction: column;
  justify-content:center;
}

#footer h6
{
  color:rgba(255,255,255,0.35);
  font-weight: 300;
}

#footer span
{
  color:rgba(255,255,255,0.2);
  font-weight: 300;
}

/*전체 사이트맵 */
#full_menu
{
  position:fixed;
  top:70px;
  width: 100%;
  right:-100%;
  height: calc(100% - 70px);
  background:#282b30;
  z-index:9000;
  transition: all ease .5s;
  -webkit-transition: all ease .5s;
  -o-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  overflow: hidden;
  overflow-y: auto;
  padding-top:80px;
}

#full_menu.open
{
  right:0;
}

.full_menu
{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  align-content:space-between;
  margin-top: 100px;
}

.full_menu > div
{
  flex-grow:0;
  flex-shrink:0;
  width: 100%;
  display:flex;
  flex-direction: column;
  padding:10px 0;
}

.full_menu > div:nth-last-child()
{
  padding-right:0px;
}

.full_menu > div .dept01 h2
{
  color:#fff;
  font-weight: bold;
  -webkit-transition-duration: 0.3s;
  text-align: center;
}

.full_menu > div .dept01 h2:hover
{
  color:#f76b1c;
}


#header.sitemap_header
{
  background:#282b30;
}

#header.sitemap_header .logo .logo_img
{
  display: block;
  width: 240px;
  height: 67px;
  background: url(../img/logo_w.png) no-repeat center center;
  background-size: 240px auto;
}

.sitemap_header .gnb .menu
{
  display:none;
}

#bg
{
  background:rgba(0,0,0,0.3);
  position:absolute;
  width: 100%;
  height: 100vh;
  top:0;
  left:0;
  z-index:150;
  display:none;
}

#bg.open
{
  display:block;
}


/* 커밍순 */
/* #comming
{
  background:#22252a;
  position:absolute;
  width: 95%;
  height: 65vh;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:200;
  padding:30px;
  border-radius: 25px;
  display:block;
} */

#comming
{
  background: #22252a;
  position: absolute;
  width: 60%;
  height: 60vh;
  top: 46%;
  left: 60%;
  transform: translate(-50%,-50%);
  z-index: 200;
  padding: 30px;
  border-radius: 25px;
  display: block;
  transition: all .3s;
}

#comming .close_btn
{
  width: 50px;
  height: 50px;
  background: url(../img/close.png) no-repeat center center;
  background-size: 50px auto;
  opacity: 0.5;
  float:right;
}

#comming .close_btn:hover
{
  opacity: 1;
}

#comming .icon
{
  width: 40px;
  height: 40px;
  background: url(../img/comming.png) no-repeat center center;
  background-size: 40px auto;
  margin:0 auto;
  margin-top:50px;
  opacity: 0.8;
}



#comming h5
{
  text-align: center;
  margin-top:10px;
  color:#f76b1c;
}

#comming h1
{
  font-weight: 500;
  text-align: center;
  color:#FFF;
}

#comming .line
{
  width: 60px;
  height: 1px;
  background:rgba(255,255,255,0.5);
  margin:0 auto;
  margin-top:15px;
  margin-bottom:20px;
}

#comming h6
{
  text-align: center;
  font-weight: 300;
  color:#ccc;
}

/* 서브페이지 */
#subpage
{
  background:#fff;
  position:absolute;
  width: 90%;
  height: 75vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 200;
  padding: 30px;
  border-radius: 25px;
  display:none;
  transition: all .3s;
}

#subpage.open
{
  display:block;
}


#subpage .close_btn
{
  width: 40px;
  height: 40px;
  background: url(../img/close.png) no-repeat center center;
  background-size: 40px auto;
  opacity: 0.5;
  float:right;
}

#subpage .close_btn:hover
{
  opacity: 1;
}

#subpage .txt
{
  width: 100%;
  height: calc(75vh - 70px);
  padding: 15px;
  overflow:auto;
}

#subpage .txt h4,
#subpage .txt h6
{
  text-align: center;
}

#subpage .txt .bs
{
  display:block;
  margin-top: 70px;
}

#subpage .txt .bs img
{
  width: 100%;
}

#subpage .txt .bs_mo
{
  display:none;
  margin-top:50px;
}

#subpage .txt .bs_mo img
{
  width: 100%;
}





/* 서브페이지 */
.sub_visual .tit
{
  width: 100%;
  text-align: center;
  margin-top: 50px;
}

.sub_visual .tit h2
{
  color: #fff;
  font-weight: bold;
  line-height: 1.2;
  font-size: 50px;
}

.content
{
  padding:100px 0;
  width: 1280px;
  margin:0 auto;
  overflow:hidden;
}

.content .tit
{
  text-align: center;
}

.content .tit h6
{
  color:#f76b1c;
  letter-spacing: -1px;
  font-weight: 400;
  margin-bottom:5px;
}

.content .tit h3
{
  letter-spacing: -1px;
  font-size: 40px;
  color: #000;
}

.content .map
{
  height: 280px;
  width: 100%;
  background: #ccc;
  margin-top:50px;
}

.content p
{
  color: #666;
  text-align: left;
  margin-top: 10px;
  font-weight: normal;
}

.content h5
{
  color: #333;
  text-align: left;
  margin-top: 40px;
  margin-bottom: 15px;
  font-weight: bold;
}

.service_tit h3
{
  color: #fff;
}

.service_tit h6
{
  color: #fff;
}

.service_txt h5
{
  color: #fff;
  margin-top: 15px;
  margin-bottom:40px;
  font-weight: normal;
  width: 43%;
}

.serpic_1
{
  width: 1280px;
  height: 450px;
  background: url(../img/decop.jpg) no-repeat center center;
  background-size: 100% auto;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content:center;
  margin-bottom: 40px;
}

.serpic_2
{
  width: 1280px;
  height: 450px;
  background: url(../img/wonderppl.jpg) no-repeat center center;
  background-size: 100% auto;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content:center;
}

.content img
{

}

.content .table
{
  width: 100%;
  border-top:1px solid #333;
}

.content .table .row
{
  width: 100%;
  clear:both;
  overflow:hidden;
  padding:0;
}

.content .table .row .tit
{
  width: 200px;
  height:100%;
  background:#f8f8f8;
  float:left;
  color:#333;
  font-weight: bold;
  padding: 14px 0;
  border-bottom:1px solid #dddddd;
  margin-top:0;
}

.content .table .row .txt
{
  width: calc(100% - 200px);
  height:100%;
  float:left;
  color:#333;
  font-weight: 400;
  padding: 14px 0;
  text-align: left;
  padding-left:20px;
  border-bottom:1px solid #dddddd;
}

.partner
{
  margin:0 auto;
  width:100%;
  margin-top: 50px;
}

.partner .partner_list
{
  display:inline-block;
  width: 31.76%;
  margin-right:2%;
  margin-bottom: 15px;
}

.partner .partner_list:nth-child(3n)
{
  margin-right:0;
}

.partner .partner_list img
{
  border: 1px solid #ddd;
  box-sizing: border-box;
  width: 100%;
}

.partner .partner_list p
{
  text-align: center;
  color:#666;
  margin-top:5px;
}

.subbg
{
  background-color:#f5f5f5;
  width: 100%;
}



.bsn3
{
  width: 49%;
  height: 860px;
  display:inline-block;
  float:left;
  margin-top:60px;
}

.bsn3 .tit
{
  height: 74px;
  background-color:#f28d2c;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  line-height: 74px;
}

.bsn3 .tit h4
{
  color:#fff;
}

.bsn3 .txt
{
  height: 790px;
  background-color: #f6f6f6;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding:30px;
}

.bsn3 .txt img
{
  padding:15px 0;
  max-width: 100%;
}

.bsn3 .info
{
  font-weight: 400;
  padding-bottom:30px;
  border-bottom:1px solid #ccc;
}

.bsn3 .img
{
  position:relative;
  overflow: hidden;
  height: 630px;
}

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

.bsn4
{
  width: 49%;
  height: 860px;
  margin-left:2%;
  display:inline-block;
  float:left;
  margin-top:60px;
}

.bsn4 .tit
{
  height: 74px;
  background-color:#4f81bc;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  line-height: 74px;
}

.bsn4 .tit h4
{
  color:#fff;
}

.bsn4 .txt
{
  height: 790px;
  background-color: #f6f6f6;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding:30px;
}

.bsn4 .txt img
{
  padding:15px 0;
  max-width: 100%;
}

.bsn4 .info
{
  font-weight: 400;
  padding-bottom:30px;
  border-bottom:1px solid #ccc;
}

.bsn4 .img
{
  position:relative;
  overflow: hidden;
  height: 630px;
}

.bsn4 .img img
{
  max-width: 100%;
  position:absolute;
  top:15px;
  left:50%;
  transform: translate(-50%,0);
}



.iot_btn
{
  margin-top:10px;
}

.iot_btn a
{
  top: 15px;
  right: 160px;
  color: #fff;
  padding: 8px 24px;
  background: #f76b1c;
  border-radius: 60px;
  vertical-align: middle;
}

.iot_btn a button
{
  color: #fff;
}

.invation
{
  width: 25%;
  height: 340px;
  display:inline-block;
  float: left;
  position:relative;
}

.invation .one
{
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background-color: #ddeef5;
  display:block;
  text-align: center;
  position:relative;
  margin: 0 auto;
}

.invation .one h5
{
  color:#1d90be;
  text-align: center;
  position:absolute;
  margin:0;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}

.invation .arrow
{
  position:relative;
  width: 100%;
  height: 40px;
}

.invation .arrow img
{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.invation .two
{
  width: 90%;
  height: 90px;
  border-radius: 50px;
  border:2px solid #e30613;
  display:block;
  text-align: center;
  position:relative;
  margin: 0 auto;
}

.invation .two h5
{
  color:#e30613;
  text-align: center;
  position:absolute;
  margin:0;
  font-weight: 500;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}


/* 퀵메뉴 */
.quicknav
{
  position: fixed;
  top:100px;
  right:50px;
  border-radius: 30px;
  z-index:30;
}

.quicknav .menu
{
  width: 50px;
  height: 50px;
  background:#f0f0f0;
  border-radius: 50%;
  margin-bottom:10px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 7%), 0 1px 2px rgb(0 0 0 / 10%);
  position:relative;
}

.quicknav .menu:hover
{
  width:50px;
  height: 50px;
  background:#f28d2c;
  border-radius: 50%;
}

.quicknav .menu.active
{
  width: 50px;
  height: 50px;
  background:#f28d2c;
  border-radius: 50%;
}

.quicknav .menu h6
{
  display:none;
  position: absolute;
  right: 60px;
  top: 12px;
  width: 100px;
  text-align: right;
  color:#f28d2c;
}

.quicknav .menu:hover h6
{
  display:block;
}

.quicknav .menu i
{
  font-size:22px;
  font-weight: 300;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color:#333;
}

.quicknav .menu:hover i
{
  color:#fff;
}

.quicknav .menu.active i
{
  color:#fff;
}

.patent
{
  margin:0 auto;
  width:100%;
  margin-top: 50px;
}

.patent .patent_list
{
  display:inline-block;
  float:left;
  width: 31.76%;
  margin-right:2%;
  margin-bottom:2%;
  background:#f0f0f0;
  height:200px;
  padding:0 20px;
  border-radius: 20px;
}

.patent .patent_list:nth-child(3n)
{
  margin-right:0;
}

.patent .patent_list h5
{
  margin-top:20px;
}

.patent .patent_list h6
{
  color:#666;
}


.bsn1
{
  float:left;
  width: 49%;
}

.bsn1 .info
{
  position: relative;
  top: -60px;
  background-color: #fff;
  padding: 30px;
  width: 90%;
}

.bsn1 .info .tit
{
  font-size: 30px;
  font-weight: bold;
  text-align: left;
  display: block;
  color: #000;
  letter-spacing: -1px;
  margin-bottom: 5px;
}

.bsn2
{
  float:right;
  width: 49%;
}

.bsn2 .info
{
  position: relative;
  top: -60px;
  background-color: #fff;
  padding: 30px;
  width: 90%;
}

.bsn2 .info .tit
{
  font-size: 30px;
  font-weight: bold;
  text-align: left;
  display: block;
  color: #000;
  letter-spacing: -1px;
  margin-bottom: 5px;
}

/* 공지사항 */
.notice
{
  margin:0 auto;
  width:100%;
  margin-top: 50px;
}

.notice .notice_list
{
  display:inline-block;
  width: 31.76%;
  margin-right:2%;
  margin-bottom: 15px;
  cursor: pointer;
}

.notice .notice_list:nth-child(3n)
{
  margin-right:0;
}

.notice .notice_list img
{
  border: 1px solid #ddd;
  box-sizing: border-box;
  width: 100%;
  overflow:hidden;
}

.notice .notice_list .tit
{
  text-align: center;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
  letter-spacing: -0.5px;
}

.notice .notice_list p
{
  text-align: center;
  color:#666;
  margin-top:5px;
}

.notice_view .tit
{
  display: flex;
  flex-direction: column;
  border-top: 1px solid #333;
  border-bottom: 1px solid #ddd;
  padding: 30px 20px;
  text-align: left;
}

.notice_view .tit span
{
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -0.5px;
}

.notice_view .txt
{
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  font-size:16px;
  font-weight: 400;
  line-height: 1.6;
}

.notice_view .txt img
{
  width:720px;
}

.notice_view .prevnext {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.prevnext a
{
  display:flex;
  flex-direction: row;
  flex-grow:0;
  flex-shrink:1;
  padding: 16px 30px;
  overflow: hidden;
}

.prevnext a.prev
{
  border-bottom: 1px solid #ddd;
}


.prevnext a .type
{
  flex-basis: 130px;
  padding-right: 26px;
  box-sizing: border-box;
  font-weight: 400;
  margin-top:0;
}

.prevnext a .type i
{
  padding-left: 15px;
  color:#f28d2c;
  font-weight: 500;
}

.prevnext a .title
{
  flex-basis: calc(100% - 130px);
  color: #444;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 0px;

}

.prevnext a .title:hover
{
  color:#f28d2c;
  text-decoration: underline;
  cursor: pointer;
}

.sub_btn
{
  font-weight: 500;
  border-radius: 60px;
  height: 50px;
  line-height: 50px;
  width: 220px;
  text-align: center;
  -webkit-transition-duration: 0.3s;
  display: block;
  margin: 0 auto;
  margin-top: 40px;
  letter-spacing: -0.5px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
  transform: perspective(1px) translateZ(0);
    -webkit-transition-property: transform;
}

.sub_btn button
{
  cursor: pointer;
  font-weight: 500;
}

.sub_btn:hover
{
  background:linear-gradient(135deg , #fad961 0%,#f76b1c 100%);
  font-weight: bold;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.sub_btn:hover button
{
  color:#fff;
}



/* 미디어쿼리 */

@media (max-width:1600px){
  #comming {left: 66%;}
  #subpage .txt .bs {margin-top: 60px;}
  .full_menu{margin-top: 0;}
}

@media (max-width:1300px){
  .content {padding: 100px 30px; width: 100%;}
  .partner .partner_list {width: 31.5%;}
}

@media (max-width:1100px){
  h1 {font-size:42px; font-weight: normal;}
  h2 {font-size:30px; font-weight: normal;}
  .row {padding: 0 24px;}

  #wrap{height:inherit;}
  #header{height:50px;}
  #full_menu{height: calc(100% - 50px); top: 50px;}
  .main_visual{flex-direction: column; align-items: stretch; height: auto;}
  .main_visual .tit{margin-top:130px; margin-left:24px;}
  .header{padding: 0 24px;}
  .category {right:24px; width: 36px; top: 18px;}
  .category .bar {height: 2px;}
  #footer {padding:15px 0; height: auto;}
  .main_visual .tit h2{width: auto;}
  .main_visual .tit h5{width: auto;}
  .main_btn a{margin-top:20px;}

  .header.on .logo_img {width: 200px; background-size: 200px auto; height: 50px;}
  .header .logo .logo_img {width: 200px; background-size: 200px auto; height: 50px;}

  #header.sitemap_header .logo .logo_img {width: 200px; background-size: 200px auto; height: 50px;}
  .pet_btn a {top: 9px; right: 90px; padding: 5px 20px; border-radius: 20px;}
  .tech .img {height: 210px;}

  .invation {width: 50%; margin-bottom: 30px;}
  .invation .two {width: 75%;}

  .quicknav {right: 20px;}
}

@media (max-width:900px){
  .bsn1 {width: 100%; margin-bottom: 20px; height: 560px;}
  .bsn2 {margin-left: 0; width: 100%; height: 560px;}
  .bsn2 .ocean {width: calc(100% - 94px); padding:0;}
  .bsn2 .ocean h6 {display: inline-block; margin-left: 15px; margin-right:15px;}
  .patent .patent_list {height: 230px;}

  .partner .partner_list {width: 48.5%;}
  .partner .partner_list:nth-child(3n) {margin-right: 2%;}
  .partner .partner_list:nth-child(2n) {margin-right: 0;}

  .serpic_1 {background: url(../img/decop_mo.jpg) no-repeat center center; background-size: cover; width:100%; padding: 30px;}
  .serpic_2 {background: url(../img/wonderppl_mo.jpg) no-repeat center center; background-size: cover; width:100%; padding: 30px;}
  .content .tit h3 {font-size:26px;}

  .notice .notice_list{width:50%;}
  .notice_view .txt img{width:100%;}
}

@media (max-width:640px){
  .main_visual .tit{margin-top:100px;}
  #subpage .txt .bs{display:none;}
  #subpage .txt .bs_mo{display:block;}
  #subpage {height: 90vh; padding: 20px;}
  #subpage .txt {height: calc(90vh - 70px); padding: 15px 0;}
  #subpage .txt .bs {margin-top: 40px;}
  .partner .partner_list {width: 100%; margin-bottom: 20px;}
  .header .logo .logo_img {width: 160px; background-size: 160px auto;}
  #header.sitemap_header .logo .logo_img {width: 160px; background-size: 160px auto;}

  .bsn3 {width: 100%;}
  .bsn4 {width: 100%; margin-left: 0;}

  .tech {width: 48%;}
  .tech:nth-child(2n) {margin-right: 0;}
  .tech:nth-child(3n) {margin-right: 2%;}
  .tech .img {height: 135px;}
  .tech .info h5 {height: 50px; margin-bottom: 10px; opacity: 1;}

  .sub_visual {height: 220px;}
  .sub_visual .tit {margin-top: 35px;}
  .content .table .row .tit {width: 110px;}
  .content .table .row .txt {width: calc(100% - 110px);}

  .content {padding: 50px 25px;}

  .pet_btn a{display:none;}
  .pet_btn_mo a{display:block;}

  .invation .one {width: 165px; height: 165px;}
  .invation .two {width: 90%;}

  .quicknav {display:none;}

  .patent .patent_list {width: 100%; height: 145px; margin-bottom: 4%;}
  .sub_visual .tit h2 {font-size: 36px;}
  .bsn1 .info {padding: 20px;}
  .bsn2 .info {padding: 20px;}

  .bsn1 {height: 450px;}
  .bsn2 {height: 450px;}
  .service_txt h5{width: 100%;}

  .notice .notice_list{width:100%;}
}

@media (max-width:460px){
  .tech {width: 100%;}
  .tech:nth-child(2n) {margin-right: 0;}
  .tech:nth-child(3n) {margin-right: 0;}
  .tech .img {height: 195px;}
  .tech .info h5 {height: 35px;}

  .bsn3 {height: 690px;}
  .bsn4 {height: 723px;}
  .bsn3 .txt {height: 650px;}
  .bsn4 .txt {height: 650px;}
  .invation .one {width: 140px; height: 140px;}
}