@charset "UTF-8";

@font-face {
    font-family: 'Binggrae-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#main h2 {font-size:30px;  line-height:30px;  color:#333; }



.wrapper{
  width:100%;
  position:relative;

   
}


 
.carousel{
	width: 100%;
	position: relative;
	height:650px;
margin-bottom:50px;
	overflow: hidden;
}


.inner{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
}

 .slide{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
	left:0;
	z-index: 1;
	opacity: 0;
  
}



.slide.active,
.slide.left,
.slide.right{
	z-index: 2;
	opacity: 1;
}

/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left{left:auto}

/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
.slide.left{
	left:-100%;
	right:0;
}

.slide.right{
	right:-100%;
	left: auto;
}

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

/**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}

/**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
.transition .slide{
	-webkit-transition-property: right, left, margin;
	transition-property: right, left, margin;
}

/**
 * ==========================
 * Indicators
 *
 */
.indicators{
  width:100%;
  position: absolute;
  bottom:30px;
  z-index: 4;
  padding:0;
  text-align: center;
}

.indicators li{
	width: 13px;
	height: 13px;
	display: inline-block;
	margin: 5px;
	background: #fff;
	list-style-type: none;
	border-radius: 50%;
  cursor:pointer;
  -webkit-transition:background 0.3s ease-out;
  transition:background 0.3s ease-out;
}

.indicators li.active{background:#289c09}

.indicators li:hover{background-color:#289c09}

/**
 * ==========================
 * Arrows 
 *
 */
.arrow{
  width: 20px;
  height: 20px;
  position:absolute;
  top:50%;
  z-index:5;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  cursor:pointer;
  -webkit-transition:border-color 0.3s ease-out;
  transition:border-color 0.3s ease-out;
}

.arrow:hover{border-color:#93278f}

.arrow-left{
  left:30px;
  -webkit-transform:rotate(225deg);
          transform:rotate(225deg);
}

.arrow-right{
  right:30px;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
}

/**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
.slide{
   padding-left:6%;
padding-top:7%; 
box-sizing:border-box;
  background-size:cover;
}

.vi_bg1 {background:url('/common/img/vi_bg.png') no-repeat top;}
.vi_bg2 {background:url('/common/img/vi2.png') no-repeat top;}
.vi_bg3 {background:url('/common/img/vi_bg.png') no-repeat top;}



.slide   b { font-size:3.5em; letter-spacing:-3px; font-weight:800; color:#333; line-height:1.15em; width:100%; float:left;  margin-bottom:10px;}
.slide p { font-size:1.5em; font-weight:500; color:#333}
.slide a.btn { font-size:1.2em; font-weight:500; color:#fff !important; width:250px; margin-top:30px; line-height:60px; display:inline-block; background: linear-gradient(to right, #289c09, #32c40b); text-align:center; transition: all 0.3s ease-out;   }
.slide a.btn:hover { width:280px;}





.main_con {width:70%; margin:20px 15% 0 15%;  box-sizing:border-box; float:left;  position:relative;   }

.con_border {box-shadow:2px 2px 6px #f1f1f1}

.main_con ul {width:100%; float:left; }
.main_con ul li {width:100%; display:inline-block; border-bottom:1px solid #ddd; font-size:1em; font-weight:400; color:#444; padding-bottom:6px; margin-bottom:6px; padding-left:3px; padding-right:3px; box-sizing:border-box;  }
.main_con ul li span.date {float:right; color:#999; font-size:0.9em; font-weight:300}


.main_con h3 {width:100%; display:inline-block; line-height:40px; height:40px; font-size:18.5px;  font-weight:600; margin-bottom:13px; color:#fff; background: linear-gradient(to right, #289c09, #32c40b); box-sizing:border-box; padding-left:10px;  }
.main_con h3 a {float:right;  color:#fff; width:40px; text-align:center; border-left:1px solid #fff;   }

.main_con section  {box-sizing:border-box; padding:20px; border:1px solid #ddd; }


.main_con section.about {width:100%; background:url('/common/img/about_bg.png') no-repeat right top ;  background-size:55%; float:left; margin-top:20px;  padding-bottom:40px; margin-bottom:50px;  border:1px solid #f1f1f1}
.main_con section.about p {width:44%; margin-top:10px;float:left; font-size:17px; line-height:1.4em; font-weight:300}
.main_con section.about p  b {font-size:1.3em; line-height:1.43em; font-weight:700; font-family:'Binggrae-Bold'}


.main_con section.ing_list {width:33.33333%; float:left; border-right:none; height:400px;}
.main_con section.ing_list h3 {margin-bottom:5px}
.main_con section.ing_list li {padding-bottom:9.3px; margin-bottom:9.3px; color:#666}
.main_con section.ing_list span.label {background-color:#fff; font-size:0.93em; color:#59ba12; padding:2px 0px; font-weight:500; margin-right:3px;  }
.main_con section.ing_list span.label1 {background-color:#fff; font-size:0.93em; color:#1692d6; padding:2px 0px; font-weight:500; margin-right:3px;  }
.main_con section.ing_list span.label2 {background-color:#fff; font-size:0.93em; color:#fc9400; padding:2px 0px; font-weight:500; margin-right:3px;  }
.main_con section.ing_list span.label3 {background-color:#fff; font-size:0.93em; color:#2c65d9; padding:2px 0px; font-weight:500; margin-right:3px;  }
.main_con section.ing_list span.label4 {background-color:#fff; font-size:0.93em; color:#e81308; padding:2px 0px; font-weight:500; margin-right:3px;  }
.main_con section.ing_list span.label5 {background-color:#fff; font-size:0.93em; color:#8c16aa; padding:2px 0px; font-weight:500; margin-right:3px;  }
.main_con section.ing_list span.label6 {background-color:#fff; font-size:0.93em; color:#666; padding:2px 0px; font-weight:500; margin-right:3px;  }

 
.main_con section.faq {width:33.33333%; position:absolute; right:0; height:200px; border-bottom:none;}
.main_con section.notice {width:33.33333%; position:absolute; right:0; bottom:0; float:right; height:200px;  }

.main_con section.bn {width:33.33333%;  border-right:none;   height:400px;float:left; }
.main_con section.bn table {width:100%; margin-top:5px;}
.main_con section.bn table  td {width:50%;border:5px solid #fff; text-align:center;   font-size:1.12em; font-weight:500; color:#333; border-radius:3px;  }
.main_con section.bn table  td a {width:100%; display:inline-block;   padding:20px 0; background: linear-gradient(to bottom, #f9f9f9, #f1f1f1); transition: all 0.3s ease-out;   }
.main_con section.bn table  td a:hover { background: linear-gradient(to right, #289c09, #32c40b); color:#fff !important; }

.main_con section.bn .call {margin-top:20px; color:#666; position:relative;}
.main_con section.bn .call b {font-size:25px; font-weight:800; color:#555;}
.main_con section.bn .call img {position:absolute; right:10px; top:0;  margin-top:55px;float:right;}




.one_label {width:20px; line-height:20px; text-align:center; background-color:#ddd; font-size:15px; border-radius:50px; color:#fff; display:inline-block} 

.s_line {width:20px; height:1px; display:inline-block; background-color:#333;}






@media all and (max-width:1500px){

 .main_con {width:94%; margin-left:3%}

}

@media all and (max-width:1100px){

 

#main h2 {font-size:1.4em; line-height:30px; margin-bottom:10px }

  
.carousel{
	width: 100%;
	position: relative;
	height:450px;
margin-bottom:40px;
	overflow: hidden;
}

 .slide{
   padding:0
 }


.slide   b { font-size:2em; letter-spacing:-3px; font-weight:700; color:#333; line-height:1.15em; width:100%; float:left;  margin-bottom:5px; display:none }
.slide p { display:none}
.slide a.btn { display:none}

.vi_bg1 {background:none}
.vi_bg2 {background:none}
 
.arrow-left{
display:none
}

.arrow-right{
display:none
}

.indicators{
   bottom:15px;
 }



.main_con {width:94%; box-sizing:border-box; margin-left:3%; position:static ; margin-top:0;}
 #main .con_border {box-shadow:none}


.main_con section {padding:2%;}

#ipay_slide {height:260px !important;}
.main_con section.ing_list {width:100%; border-right:1px solid #ddd; height:auto; margin-bottom:10px;  }
.main_con section.ing_list li {padding-bottom:6px; margin-bottom:6px;}
.main_con section.ing_list li:nth-child(4) {margin-bottom:6px;}
 
.main_con section.ing_list li:nth-child(5) {display:none;}
.main_con section.ing_list li:nth-child(6) {display:none;}
.main_con section.ing_list li:nth-child(7) {display:none;}

.main_con section.faq {width:100%; position:static; border-bottom:1px solid #ddd; height:auto; margin-bottom:10px; float:left;}
.main_con section.notice {width:100%; position:static; height:auto; margin-bottom:10px; float:left;}

.main_con section.about {width:100%;background:none; text-align:center;   float:left;  height:auto; margin-bottom:10px; margin-top:0;  padding:5%;}

.main_con section.about p {width:100%; margin-top:0; font-size:1em }
.main_con section.about p b {line-height:1.3em;  font-size:1.1em; font-family:'Binggrae-Bold'}
.main_con section.bn { width:100%; background-color:#fff;  height:auto; margin-bottom:10px; position:static; border-right:1px solid #ddd;}

.main_con section.bn table {  margin-top:0}
.main_con section.bn table  td { padding:0 0; border:1px solid #fff;   font-size:1em;    }
.main_con section.bn .call {margin-top:10px; font-size:0.95em; line-height:1.35em; color:#666; position:relative; padding-bottom:7px;}
.main_con section.bn .call b {font-size:25px; line-height:1.3em; width:100%; float:left; margin-bottom:5px;   font-weight:800; color:#555;}
 


.main_con section.bn .call img {display:none}
.main_con ul li span.date {display:none}


.m_y_bm30 {margin-bottom:30px;  }

 
}





@media all and (max-width:700px) {

  
.carousel{ height:300px; }

}

@media all and (max-width:500px) {

  
.carousel{ height:250px; }

}

@media all and (max-width:400px) {

  
.carousel{ height:200px; }

}
@media all and (max-width:320px) {

  
.carousel{ height:170px; }

}


 @media all and (min-width:1100px) {

.pc_del {display:none}

}