/* Common **********************************************************************/ 
html,body {width:100%;}
html {overflow-y:scroll; box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
*{
-webkit-text-size-adjust:none;
-webkit-text-size-adjust - auto | none | N% (default auto)
}
body {word-break:break-all;-ms-word-break:break-all; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0; word-break:keep-all;}
fieldset,img {border:0px none; vertical-align:top;}
dl,ul,ol,menu,li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
button {border:0 none; background-color:transparent; cursor:pointer;}
body { background:#fff;}
body,th,td,input,select,textarea,button {font-size:18px; line-height:1.7; font-family:'Poppins', 'Noto Sans KR'; color:#555;} /* 기본폰트 세팅 */
input, select, textarea, button{vertical-align:middle; }
a:link,a:active,a:visited{color:#7d7d7d; text-decoration:none; border:0px;}
a:hover,a:focus{color:#333; text-decoration:none}

table {border-collapse:collapse; border-spacing:0;}
address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;}
summary, caption, legend, hr {width:0; height:0; font-size: ; line-height: ; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;}
caption {position:static;}
/* label hidden 泥섎━ */
.invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;}
label.invisible{*position:Absolute;}


/* common */
.clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;}
.clfix {display:inline-block;}
.clfix {display:block;}
* html .clfix {height:1%;} /* Hides from IE-mac */
.clfix {zoom:1;} /*for IE 5.5-7*/


.center{text-align:center;}
.inner {width:1200px; margin:0 auto;}
.pc {display:block;}
.tab {display:none;}
.mob {display:none;}
.pc_img {display:inline-block;}
.tab_img {display:none;}
.mob_img {display:none;}


/* === Main === */
.canvas {display:block; position:relative; height:100%; margin:0; padding:0; min-height:10px;}
.container {display:block; position:relative; height:100%; margin:0; padding:0; min-height:10px;}

img{width:100%;}
.mb_75 {margin-bottom: 75px;}

/*------------------------------- tab-menu ------------------- */
.tab-menu {
  font-size: 0;
  overflow:hidden;
  padding: 0 6.2vw;
  margin: 6.2vw 0;
}

.tab-menu a {
  width: calc(49%);
  display: inline-block;
}

.tab-menu a:nth-of-type(2) {
  margin-left: 2%;
}

.tab-menu a img{
  height: 100%;
  vertical-align: middle;
}
.tab-menu a img:last-of-type{
  display: none;
}

.tab-menu a.on img:first-of-type {
  display: none;
}
.tab-menu a.on img:last-of-type{
  display: inline-block;
}

/* ------------------------------hidden-area----------------------------- */
.hidden-area {
  overflow: hidden;
  width: 100%;
  display:none;
}
.hidden-area img {
  width: 100%;
}
.hidden-area.on {
  display:inline-block;
}


/* -------------------------------swiper-------------------------------- */
.swiper-container {
  padding: 0 6.2vw;
}

.swiper-wrapper { 
  display: -webkit-inline-box 
  /* 스와이퍼 세로로 정렬될때 사용 */
}

.swiper-pagination {
  text-align: center;
  margin-top: 5.5vw;
  height: 9.33vw;
  font-size: 0;
}

.swiper-pagination .swiper-pagination-bullet{
  display: inline-block;
  border-radius: 50%;
  width: 2.4vw;
  height: 2.4vw;
  background-color: #c8c8c8;
}

.swiper-pagination .swiper-pagination-bullet {
  margin-right: 1.33vw;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #878787;
}



.slickdots {
  text-align: center;
  margin-top: 5.5vw;
  height: 9.33vw;
  font-size: 0;
}
.slickdots li {
  display: inline-block;
  margin-right: 10px;
}

.slickdots li:last-child {
  margin-right: 0;
}

.slickdots li button {
  display: inline-block;
  font-size: 0;
  border-radius: 50%;
  width: 2.4vw;
  height: 2.4vw;
  background-color: #c8c8c8;
}

.slider .slick-list {
  margin:0 -10px;
}

.sl_1 {
  padding-left: 6.2vw;
}

.slick-slide {
  margin-right: 10px;
}

.slickdots li.slick-active button {
  background: #89887F;
}



.youtube_box {
  width: 100vw;
  height: 56.25vw;
}