/*------------------
------- MAIN -------
------------------*/
#container{}
#container h2{ font-size:50px; text-align:center; text-transform:uppercase; font-weight:400; line-height:110%; padding-bottom:30px;}
#container .stt{ font-size:18px; text-align:center;}
#container .stt2{ font-size:50px; text-align:center; text-transform:uppercase; font-weight:400; line-height:150%;}
#container .stt3{ font-size:18px; text-align:center; padding-bottom:30px;}

#container .m_visual{height:559px; text-align:center; position:relative; overflow:hidden;}
#container .m_visual .vbtn{position:absolute; left:50%; bottom:0; margin-left:-600px; height:50px; background:#233354; z-index:998;}
#container .m_visual .vbtn li:hover{background:#224489;}
#container .m_visual .vbtn li{float:left; width:239px; border-right:1px solid #fff;}
#container .m_visual .vbtn li.b05{width:240px; border:none;}
#container .m_visual .vbtn li a{display:block;  text-align:Center; color:#fff; line-height:50px; font-size:16px; padding-left:18px; position:relative;}
#container .m_visual .vbtn li a img{position:absolute; left:18px; top:12px;}


/* visual */
.video_wrapper {overflow: hidden; position: relative; height:559px;}

.img_roller {height: 100%; min-width: 980px; display: block;}
.img_roller .roll {list-style: none; height: 100%; margin: 0px; padding: 0px;}
.img_roller .roll > li {position: absolute; height: 100%; width: 100%; }
.img_roller .roll > li .img { position: absolute; background-size: cover;}
.img_roller .roll > li .zoom_in {height: 120%; width: 120%; top:-10%; left:-10%;}
.img_roller .roll > li .wrap {width: 1200px; height: 100%; margin: 0 auto; position: relative; }
.img_roller .navi_wrap {position: relative;  z-index: 2; min-width: 980px; margin: 0 auto; }
.img_roller .navi_wrap .roll_navi {position: relative; list-style: none; width: 100%; top:-80px; text-align: center; padding: 0; margin: 0 auto;}
.img_roller .navi_wrap .roll_navi > li { display: inline-block; margin-left: 10px;}
.img_roller .navi_wrap .roll_navi > li:first-child {margin-left: 0px;}
.img_roller .navi_wrap .roll_navi a {display: block; height: 12px; width: 12px; font-size: 0px; background: #ffffff; box-shadow: inset 0 0 7px #babcbc; border: 1px solid #b2b4b4; border-radius: 7px;}
.img_roller .navi_wrap .roll_navi a.on {width: 32px; background: #57b0fe;  box-shadow: inset 0 0 7px #478ac0; border: 1px solid #b2b4b4;}

.img_roller .zoom_in { height: 100%; width: 100%;}
.img_roller .up_50 {top:50px; opacity: 0}

.img_roller .wrap > div {position: absolute; font-size: 20px; font-weight: 400; top:120px; left:50%; letter-spacing: -2px; color: #fff; text-align:center; width:610px; margin-left:-305px; letter-spacing:0.1em;}
.img_roller .wrap > div > strong {font-size:68px; border:1px solid #fff; background:rgba(0, 0, 0, 0.5); display:block !important; text-align:center; line-height:100px; font-weight:normal; letter-spacing:0em; text-transform:uppercase; margin-top:10px;}
.img_roller .wrap > p {position: absolute; left: 50%; top:260px; width:610px;margin-left:-305px;}
.img_roller .wrap > p > span{color:#fff; font-size:15px; border-bottom:1px solid #fff; padding:20px 0; text-align:center; display:block; text-transform:uppercase; }
.img_roller .wrap > p > a{display:block !important; float:right; background:#fff; color:#000; margin-top:20px; line-height:40px; padding:0 20px;}

.img_roller .pic1 .img {background: url('/design/default/images/m01.jpg') no-repeat center top;}
.img_roller .pic2 .img {background: url('/design/default/images/m02.jpg') no-repeat center top;}
.img_roller .pic3 .img {background: url('/design/default/images/m03.jpg') no-repeat center top;}
.img_roller .pic4 .img {background: url('/design/default/images/m04.jpg') no-repeat center top;}
.img_roller .pic5 .img {background: url('/design/default/images/m05.jpg') no-repeat center top;}
/* visual */


/* Bounce To Top */
.hvr-bounce-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active {
  color: white;
}
.hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


/* Outline Out */
.hvr-outline-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
}
.hvr-outline-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

#container .m_speed{background:#1b1612; margin:7px 0; height:120px;}
#container .m_speed .title{width:320px; float:left; text-align:center;}
#container .m_speed .title .stt{ color:#fff; font-family:'NanumBarunGothic'; margin-top:25px; font-size:14px;}
#container .m_speed .title h2{color:#fff; font-size:30px;}
#container .m_speed .cont{width:880px; float:right; margin-top:35px; text-align:right;}
#container .m_speed .cont input{margin:0 15px;}
#container .m_speed .cont input[type="text"]{width:190px; height:40px; border:1px solid #999; color:#999; background:none; padding-left:10px;}
#container .m_speed .cont input[type="text"]:hover { border: 1px solid #fff; }
#container .m_speed .cont input[type="text"]:focus { border: 1px solid #fff; color:#fff;}

#container .m_board{background:#c2c6cf; height:50px; overflow:hidden;}
#container .m_board .inner{background:#233354; height:50px;}
#container .m_board .situ, #container .m_board .qna, #container .m_board .notice{width:33.333%; float:left;}
#container .m_board h3{width:20%; float:left; text-align:center;}
#container .m_board h3 a{color:#fff;  line-height:48px;}
#container .m_board h3 a:hover{color:#ef114c;}
#container .m_board #notice_list01, #container .m_board #notice_list02, #container .m_board #notice_list03{margin-top:12px;}
#container .m_board ul{width:300px; float:left; }
#container .m_board ul li{position:relative;}
#container .m_board ul li a{color:#fff; opacity:0.8;}
#container .m_board ul li span{position:absolute; right:0; opacity:0.6;}

#container .m_about{ padding:80px 0 0; }
#container .m_about li{float:left; margin-right:3%; width:22.7%; height:260px; background:#e6e6e6; text-align:center;}
#container .m_about li:last-child{margin-right:0;}
#container .m_about li img{width:100%;}
#container .m_about li a{display:block; font-size:20px;}
#container .m_about li span{display:block; font-size:12px;}

#container .m_youtube{ padding:130px 0px 0px 0px;  clear:both;}

.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 200px;
}

.ih-item.square {
  position: relative;
  /* width: 316px;
  height: 216px;
  border: 8px solid #fff; */
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  /* 
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
  */
}

.ih-item.square.effect10 {
  overflow: hidden;
}

.ih-item.square.effect10 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  margin-bottom:60px;
}
.ih-item.square.effect10 .info {
  background: #e6e6e6;
  /* visibility: hidden;
  opacity: 0; */
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect10 .info h3 {
  text-transform: uppercase;
  color: #333;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  font-weight:normal;
  margin-top:5px;
  -webkit-transition : all 0.3s ease; transition : all 0.3s ease;
}
.ih-item.square.effect10 .info p {
  font-size: 12px;
  position: relative;
  color: #bbb;
  padding: 20px 20px 20px;
  text-align: center;
}
.ih-item.square.effect10 .info p img{width:40px !important; height:auto; margin-top:20px;}
.ih-item.square.effect10 a:hover .info {
  visibility: visible;
  opacity: 1;
  background: #333333;
}

.ih-item.square.effect10 a:hover .info h3 {
  /*  margin: 30px 0 0 0; */
  color: #fff;
  
}
.ih-item.square.effect10 a:hover .info p {
	font-size: 12px;
	position: relative;
	color: #bbb;
	padding: 20px 20px 20px;
	text-align: center;
	background: #666;
}

.ih-item.square.effect10.bottom_to_top .img {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.ih-item.square.effect10.bottom_to_top .info {
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
}
.ih-item.square.effect10.bottom_to_top a:hover .img {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.ih-item.square.effect10.bottom_to_top a:hover .info {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

#container .m_pofol{padding:0px 0px 10px 0px; clear:both;}
#container .m_pofol{ margin-top:100px; }
#container .m_pofol.section { width:100%; }
#container .m_pofol .best-seller { width:100%; height:800px; overflow:hidden;  margin-bottom:65px; }
#container .m_pofol .best-seller .tabs{ overflow:hidden; border: 1px solid #e1e1e1;  border-bottom:none;}
#container .m_pofol .best-seller .tabs a div.tabbox { width: 132px;/*width: 148px; width: 170px;*/ height: 43px; line-height:42px; color: #666; cursor: pointer; text-align:center; float: left; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; background:#fafafa; font-size:14px;}
#container .m_pofol .best-seller .tabs a div.tabbox.last{  width: 134px; /*width: 150px; width: 172px;*/ border-right:none;}
#container .m_pofol .best-seller .tabs a.current div.tabbox { color: #fff; font-weight:bold; background:#3c323b;}	
#container .m_pofol .slider{}
#container .m_pofol .best-seller-tab { width: 1200px;  position: relative; height:715px; margin-top:40px; position:relative; }
#container .m_pofol .best-seller-tab .more{display:block; position:absolute; background:#ef114c; color:#fff; font-size:14px; text-align:center; width:175px; padding:8px 0; right:0; bottom:0;}
#container .m_pofol .best-seller-tab ul{width:900px; margin:0 auto;}
#container .m_pofol .best-seller-tab li{width:410px; float:left; margin:0 20px; }

.ih-item.square.effect6_2 {
  overflow: hidden;
}

.ih-item.square.effect6_2 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.ih-item.square.effect6_2 .img img{width:410px; height:280px;}
.ih-item.square.effect6_2 .info {
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect6_2 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  margin: 30px 0 0 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect6_2 .info p {
  font-size: 14px;
  position: relative;
  color: #fff;
  padding: 20px 20px 20px;
  text-align: center;
  -webkit-transition: all 0.35s 0.1s linear;
  -moz-transition: all 0.35s 0.1s linear;
  transition: all 0.35s 0.1s linear;
  opacity:0.6;
}
.ih-item.square.effect6_2 .info p img{width:40px; height:auto; margin-bottom:10px;}
.ih-item.square.effect6_2 a:hover .img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.ih-item.square.effect6_2 a:hover .info {
  visibility: visible;
  opacity: 1;
}

.ih-item.square.effect6_2.bottom_to_top .info h3 {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.ih-item.square.effect6_2.bottom_to_top .info p {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.ih-item.square.effect6_2.bottom_to_top a:hover .info h3,
.ih-item.square.effect6_2.bottom_to_top a:hover .info p {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #233354;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


#container .m_banner{ height:380px; margin:100px 0px 150px 0px;}
#container .m_banner .tt{width:210px; float:left; text-align:right; font-size:40px; color:#333; line-height:120%;}
#container .m_banner .tt span{display:block; font-size:14px; color:#999; line-height:140%; padding-top:10px;}
#container .m_banner .event{ width:420px; text-align:center; float:left;}
#container .m_banner .bcont{}
#container .m_banner .bcont ul{width:570px; float:right;}
#container .m_banner .bcont li{width:270px; height:380px; float:left; margin-left:15px; text-align:center; position:relative; }
#container .m_banner .bcont li h3{ color:#333; font-size:20px; padding:10px 0;}
#container .m_banner .bcont li span{display:block; color:#999; font-size:14px;}
#container .m_banner .bcont li .bt{position:absolute; left:0; bottom:0;}


/* Bubble Right */
.hvr-bubble-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
}
.hvr-bubble-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  top: calc(50% - 10px);
  right: 0;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #ef114c;
}
.hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}


/* Forward */
.hvr-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}