@charset 'euc-kr';

body{color:#485a66;font:1.0em/1.7 "Helvetica Neue",Helvetica,NanumBarunGothic,"³ª´®¹Ù¸¥°íµñ","Noto Sans Korean","Apple SD Gothic Neo","Malgun Gothic",AppleGothic,Dotum,"µ¸¿ò",sans-serif;background-color:#f0f3f6;height:100%}
a:link{text-decoration:none;color:#485a66;}
a:visited{text-decoration:none;color:#485a66;}
a:active{text-decoration:none;color:#485a66;}
a:hover{text-decoration:none;color:#485a66;}
/*
.clear{display:block;float:none;clear:both;height:1px;background:#BDBDBD;width:100%;font-size:0 !important;line-height:0 !important;overflow:hidden;margin:0 !important;padding:0 !important}
*/
.clear{display:block;float:none;clear:both;height:1px;width:100%;font-size:0 !important;line-height:0 !important;overflow:hidden;margin:0 !important;padding:0 !important}

.clear2{display:block;float:none;clear:both;height:1px;width:100%;font-size:0 !important;line-height:0 !important;overflow:hidden;margin:0 !important;padding:0 !important}

html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,address,ul,li,dl,dt,dd,
table,caption,th,td,form,fieldset,legend{margin:0;padding:0}
body{font-family:dotum}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th{text-align:left}
img,fieldset,abbr,acronym{border:0}
img{vertical-align:middle}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
q:before,q:after{content: ''}
select,button{font-size:100%;border:0;}
select{font-size:12px !important}
input,button{overflow:visible}
input{vertical-align:middle;}
input{padding:0;margin:0}
:root input{font-size:12px}
table caption {display:none}
input.text{border:1px solid #ddd}
.invisible{position:absolute;width:0;height:0;peninfo_t2overflow:hidden;visibility:hidden;font-size:0}
.circle1{border:5px solid #fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-ms-border-radius:50%;-khtml-border-radius:50%;-o-border-radius:50%;}


.main_logo{width:100%; display:block; clear:both;}
.m_logo{width:84px; margin:0 auto;}
.m_logo a img{width:84px; height:29px; float:left;}
.top_ser_bn{width:35px; margin-top:-5px; float:right;}

.contents_box_sub {font-size:18px}
/*Çܹö°Å*/
header {
    background-color: #fff;
    padding: 10px 10px 0px 10px;
    text-decoration: none;
    position: fixed;
    width: 100%;
    z-index: 999;
}

/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
    padding: 110px 0px 0px 0px;
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    -webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}

.top_search {width:100%;}
.top_search div {float:inherit; font-size:0.95em;}
.top_search div a div {float:left;}
.t_serch{width:100%; cursor: pointer; overflow:hidden;}

/*
the hamburger button with a little gradient effekt
*/
#hamburger {
    border: 1px solid #fff;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    display: block;
    height: 24px;
    padding: 3px 4px 3px;
    position: fixed;
    width: 25px;
    background: #fff;
    background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
    background: -o-linear-gradient(top, #fff 0%, #fff 100%);
    background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0);
}

/*
The white stripes in the hamburger button
*/
#hamburger div {
    background-color: #4c2580;
    border: 1px solid #4c2580;
    border-radius: 2px 2px 2px 2px;
    height: 2px;
    margin-top: 4px;
    margin-left: 4px;
    width: 130%;
}

/*
The navigation container in the background
*/
nav {
    opacity: 0;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: 0;
    width: 70%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*overflow-x: hidden;*/
		display:block;
    overflow-y: auto;
    background: #3e3c3d;
    background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
    background: -o-linear-gradient(top, #fff 0%, #fff 100%);
    background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0);
}

/*
Style the navigation menu
*/
nav ul {
    list-style: none;
    margin: 0;
    width: 100%;
    padding: 0;
}

nav li {
    position: relative;
    font-size: 1em;
    font-weight: bold;
    border-right: 1px solid #D5D5D5;
    border-top: 1px solid #D5D5D5;
    padding: 5px;
}

nav li a {
    color: #fff;
    text-decoration: none;
}

/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    z-index: 5;
}



.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-container2 {
    width: 100%;
    height: 100%;
    margin-top:14px;
}

.swiper-slide {
  font-size:0.8em;
  color: #818c92;
  font-weight:bold;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* 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;
}

a[data-needpopup-show] {
}


.needpopup {
  border-radius: 6px;
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 1);
}

.needpopup div {
}


.needpopup p {
	margin: 0;
}
.needpopup p + p {
	margin-top: 10px;
}

.needpopup div.title {
  color:#4e2b8d;
  font-weight:bold;
  font-size:0.95em;
  margin-left:3%;
}

.search {
  background:#408aec;
  width:100%;
  float:left;
  padding:10px;
}

.search div.act_div {
  text-align:center;
  border: 1px solid #fff;
  background:#fff;
  color:#000;
  float:left;
}

.search div.no_div {
  text-align:center;
  border: 1px solid #fff;
  color:#fff;
  float:left;
}

ul, li {list-style-type:none;margin:0;padding:0}
	.tabs > li { width: 20%; }
    .tabs > li > a { color: #666;display: block; background: #fff; text-align: center; text-decoration: none; font-size: 15px; line-height: 20px; border-bottom: 2px solid transparent; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
	.tabs > li.active { border-bottom: 5px solid #408aec; color: #408aec; font-weight:bold; }
	
	
/*------------------------------------------------------------------
  	[Text Colors]
------------------------------------------------------------------*/
.color-base {
  color: #17bed2;
}

.color-white {
  color: #fff;
}

.color-heading {
  color: #515769;
}

.color-subtitle {
  color: #a6a7aa;
}

.color-link {
  color: #81848f;
}

.color-link-hover {
  color: #999caa;
}

.color-sky-light {
  color: #fafafa;
}

/*------------------------------------------------------------------
  	[Background Colors]
------------------------------------------------------------------*/
.bg-color-base {
  background: #17bed2;
}

.bg-color-white {
  background: #fff;
}

.bg-color-heading {
  background: #515769;
}

.bg-color-subtitle {
  background: #a6a7aa;
}

.bg-color-link {
  background: #81848f;
}

.bg-color-link-hover {
  background: #999caa;
}

.bg-color-sky-light {
  background: #fafafa;
}

/*------------------------------------------------------------------
    [Row]
------------------------------------------------------------------*/
.row-space-1 {
  margin-right: -1px;
  margin-left: -1px;
}

.row-space-1 > [class*="col-"] {
  padding-left: 1px;
  padding-right: 1px;
}

/*------------------------------------------------------------------
  	[Content]
------------------------------------------------------------------*/
.content {
  padding-top: 40px;
  padding-bottom: 40px;
}

.content-sm {
  padding-top: 60px;
  padding-bottom: 60px;
}

.content-md {
  padding-top: 80px;
  padding-bottom: 80px;
}

.content-lg {
  padding-top: 100px;
  padding-bottom: 100px;
}

/*------------------------------------------------------------------
    [Parallax Content]
------------------------------------------------------------------*/
.parallax-content {
  padding-top: 160px;
  padding-bottom: 60px;
}

/*------------------------------------------------------------------
    [Full Width]
------------------------------------------------------------------*/
.full-width {
  width: 100%;
  height: auto;
}

/*------------------------------------------------------------------
    [Container Full Width]
------------------------------------------------------------------*/
.container-full-width {
  width: 100%;
}

.container-full-width:before, .container-full-width:after {
  content: " ";
  display: table;
}

.container-full-width:after {
  clear: both;
}

/*------------------------------------------------------------------
    [Overflow]
------------------------------------------------------------------*/
.overflow-h {
  overflow: hidden;
}

/*--------------------------------------------------
    [Font Weight]
----------------------------------------------------*/
.fweight-300 {
  font-weight: 300 !important;
}

.fweight-400 {
  font-weight: 400 !important;
}

.fweight-500 {
  font-weight: 500 !important;
}

.fweight-600 {
  font-weight: 600 !important;
}

.fweight-700 {
  font-weight: 700 !important;
}

/*------------------------------------------------------------------
    [Left margin]
------------------------------------------------------------------*/
.margin-l-0 {
  margin-left: 0 !important;
}

.margin-l-5 {
  margin-left: 5px !important;
}

.margin-l-10 {
  margin-left: 10px !important;
}

.margin-l-20 {
  margin-left: 20px !important;
}

/*------------------------------------------------------------------
    [Right margin]
------------------------------------------------------------------*/
.margin-r-0 {
  margin-right: 0 !important;
}

.margin-r-5 {
  margin-right: 5px !important;
}

.margin-r-10 {
  margin-right: 10px !important;
}

.margin-r-20 {
  margin-right: 20px !important;
}

/*------------------------------------------------------------------
    [Bottom margin]
------------------------------------------------------------------*/
.margin-b-0 {
  margin-bottom: 0 !important;
}

.margin-b-2 {
  margin-bottom: 2px !important;
}

.margin-b-5 {
  margin-bottom: 5px !important;
}

.margin-b-10 {
  margin-bottom: 10px !important;
}

.margin-b-20 {
  margin-bottom: 20px !important;
}

.margin-b-30 {
  margin-bottom: 30px !important;
}

.margin-b-40 {
  margin-bottom: 40px !important;
}

.margin-b-50 {
  margin-bottom: 50px !important;
}

.margin-b-60 {
  margin-bottom: 60px !important;
}

.margin-b-70 {
  margin-bottom: 70px !important;
}

.margin-b-80 {
  margin-bottom: 80px !important;
}

.margin-b-90 {
  margin-bottom: 90px !important;
}

.margin-b-100 {
  margin-bottom: 100px !important;
}

/*------------------------------------------------------------------
    [Top margin below 992px]
------------------------------------------------------------------*/
@media (max-width: 992px) {
  .md-margin-b-0 {
    margin-bottom: 0 !important;
  }
  .md-margin-b-2 {
    margin-bottom: 2px !important;
  }
  .md-margin-b-5 {
    margin-bottom: 5px !important;
  }
  .md-margin-b-10 {
    margin-bottom: 10px !important;
  }
  .md-margin-b-20 {
    margin-bottom: 20px !important;
  }
  .md-margin-b-30 {
    margin-bottom: 30px !important;
  }
  .md-margin-b-40 {
    margin-bottom: 40px !important;
  }
  .md-margin-b-50 {
    margin-bottom: 50px !important;
  }
  .md-margin-b-60 {
    margin-bottom: 60px !important;
  }
  .md-margin-b-70 {
    margin-bottom: 70px !important;
  }
  .md-margin-b-80 {
    margin-bottom: 80px !important;
  }
  .md-margin-b-90 {
    margin-bottom: 90px !important;
  }
  .md-margin-b-100 {
    margin-bottom: 100px !important;
  }
}

/*------------------------------------------------------------------
    [Top margin below 768px]
------------------------------------------------------------------*/
@media (max-width: 768px) {
  .sm-margin-b-0 {
    margin-bottom: 0 !important;
  }
  .sm-margin-b-2 {
    margin-bottom: 2px !important;
  }
  .sm-margin-b-5 {
    margin-bottom: 5px !important;
  }
  .sm-margin-b-10 {
    margin-bottom: 10px !important;
  }
  .sm-margin-b-20 {
    margin-bottom: 20px !important;
  }
  .sm-margin-b-30 {
    margin-bottom: 30px !important;
  }
  .sm-margin-b-40 {
    margin-bottom: 40px !important;
  }
  .sm-margin-b-50 {
    margin-bottom: 50px !important;
  }
  .sm-margin-b-60 {
    margin-bottom: 60px !important;
  }
  .sm-margin-b-70 {
    margin-bottom: 70px !important;
  }
  .sm-margin-b-80 {
    margin-bottom: 80px !important;
  }
  .sm-margin-b-90 {
    margin-bottom: 90px !important;
  }
  .sm-margin-b-100 {
    margin-bottom: 100px !important;
  }
}

/*------------------------------------------------------------------
    [Top margin below 480px]
------------------------------------------------------------------*/
@media (max-width: 480px) {
  .xs-margin-b-0 {
    margin-bottom: 0 !important;
  }
  .xs-margin-b-2 {
    margin-bottom: 2px !important;
  }
  .xs-margin-b-5 {
    margin-bottom: 5px !important;
  }
  .xs-margin-b-10 {
    margin-bottom: 10px !important;
  }
  .xs-margin-b-20 {
    margin-bottom: 20px !important;
  }
  .xs-margin-b-30 {
    margin-bottom: 30px !important;
  }
  .xs-margin-b-40 {
    margin-bottom: 40px !important;
  }
  .xs-margin-b-50 {
    margin-bottom: 50px !important;
  }
  .xs-margin-b-60 {
    margin-bottom: 60px !important;
  }
  .xs-margin-b-70 {
    margin-bottom: 70px !important;
  }
  .xs-margin-b-80 {
    margin-bottom: 80px !important;
  }
  .xs-margin-b-90 {
    margin-bottom: 90px !important;
  }
  .xs-margin-b-100 {
    margin-bottom: 100px !important;
  }
}

/*--------------------------------------------------
    [Height]
----------------------------------------------------*/
.height-100 {
  height: 100px !important;
}

.height-200 {
  height: 200px !important;
}

.height-300 {
  height: 300px !important;
}

.height-400 {
  height: 400px !important;
}