@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Pen+Script+Stylish&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@700&display=swap');
* {font-family: 'Open Sans', sans-serif;box-sizing: border-box;}



body, html{overflow-x:hidden; color:#666;}

p, body, ul, li, dt, dl, h1, h2, h3, h4, h5,a{margin:0;
padding:0; list-style:none; text-decoration:none; border:0;
}

input[type="checkbox"]:checked+label, input[type="radiobox"]:checked+label, input[type="text"], input[type="number"], input[type="file"], 
input[type="password"],select, textarea {
height:30px;
border-radius:5px;
border:solid 1px #CCC;
text-align:center;
}

input[id="knd1"] + label, input[id="knd2"] + label, input[id="knd3"] + label, input[id="knd4"] + label {
	display: inline-block;
	border: 1px solid #3d4f98;
	cursor: pointer;
	padding:0px 10px;
}

input[id="knd1"]:checked + label, input[id="knd2"]:checked + label, input[id="knd3"]:checked + label,input[id="knd4"]:checked + label {
	display: inline-block;
	background-color: #3d4f98;
	border: 1px solid #3d4f98;
	padding:0px 10px;
	color:#FFF;
}

input[id="knd1"], input[id="knd2"], input[id="knd3"], input[id="knd4"] {
	display: none;
}

a:link { color: #323232; }
a:visited { color:#323232; }
a:hover { color:#6f3737; }
a:active { color:#323232; }

.bg_gray {background:#aaa;}
.bg_sgray  {background:#eee;}
.bg_white {background:#FFF;}
.bg_red{background:#ff6600;}
.bg_blue{background:#264588;}
.bg_green{background:#a0bd2d;}
.cl_blue { color:#2960ca;}

.fnt_col_wh {color:#FFF;}


nav {
position:absolute;
height:11%;
background:#000;
opacity:0.8;
width:100%;
z-index:9;
}

.mg_at {
margin:auto;
}

.clear_both {clear:both;}


.brd_btm {
border-bottom:dashed 1px #CCC;
padding-bottom:10px;
}

.btn {
padding:5px 30px;
border-radius:5px;
color:#FFF;
font-weight:bold;
font-size:20px;
cursor:pointer;
border:none;
transition:all .2s;
}

.btn:hover {
box-shadow: 3px 3px 3px #999;
}

.sbtn {
padding:4px 20px;
border-radius:5px;
color:#FFF;
font-weight:bold;
font-size:16px;
cursor:pointer;
border:none;
transition:all .2s;
}

.sbtn:hover {
box-shadow: 3px 3px 3px #999;
}


.ord_cnt {
line-height:30px;
width:100%;
}

.adm_ord_cnt {
margin:0 50px;
}

/*   °ü¸®ÀÚ °ßÀû¹®ÀÇ ³»¿ë*/
.o_cont { 
position:absolute;
width:850px;
left:50%;
margin-left:-420px;
border:solid 1px #CCC;
top:200px;
background:#eee;
border-radius:10px;
box-shadow:inset 4px 4px 4px #ccc;
padding-bottom:50px;
}

/*  ================================== min-width:1100px   Start ======================
@media (min-width:1100px) {*/

.f_l {float:left;}
.f_r{float:right}

.pd_b_20{padding-bottom:20px;}

/*============== Main ===================*/

.logo {position:absolute;left:50%;width:165px;margin-left:-85px; padding:13px 0;}

.navbar-left {position:absolute; left:50%; margin-left:-540px; padding-top:47px;width:500px; }
.navbar-right {position:absolute; left:50%; margin-left:100px; padding-top:47px;width:600px;}

.navbar-left li a, .navbar-right li a {
color:#FFF; font-size:18px;
float:left;
padding:0 20px;
}


#fly-in {

  color: #fff;
  text-align: center;
  width: 100vw;
  font-weight: 700;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  position:absolute;
  font-size: 4em;
  margin: 10vh auto;
  height: 80vh; 
  text-transform: uppercase;
  padding-top:300px;
}

#fly-in span {
  display: block;
  font-size: .4em;
  opacity: .8;
}

#fly-in div {
 position: absolute; <!--codepen.io/h-kod/-->
  margin: 2vh 0;
  opacity: 0;
  left: 10vw;
  width: 80vw;
  animation: switch 18s linear infinite;
  text-shadow:3px 3px 3px #333;
}

#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}


.msect1 {
height:1080px;
}

.msect_tlt{
text-align:center; font-size:50px ;font-weight:bold; padding-top:60px;
}

.msect_stlt{
text-align:center; font-size:25px ; padding-bottom:60px;
}

.msect1_brd{
width:1320px; margin:auto;
}

.msect1_box {
position: relative;width:650px; height:370px;border:solid 1px #EEE;box-shadow: 4px 4px 4px #EEE;margin: 0 auto;
cursor:pointer;
transition:.5s;
}

.msect1_box:hover {
border:solid 1px #AAA;box-shadow: 4px 4px 4px #AAA;
}

.msect1_box_gab {
width:20px;height:370px;
}

.msect1_box_chpt1_1 {
position:absolute;margin:80px 50px 0 443px; font-size:35px; font-weight:bold;
}

.msect1_box_chpt1_2 {
position:absolute;margin:95px 50px 0 628px;
}

.msect1_box_chpt1_3 {
position:absolute;margin:180px 50px 0 390px; font-size:16px;text-align:right;
}

.msect1_box_chpt1_4 {
position:absolute;margin:250px 50px 0 560px; font-size:50px;text-align:right;z-index:9;transition:.2s;
}
.msect1_box_chpt1_4:hover, .msect1_box_chpt2_4:hover,   .msect1_box_chpt3_4:hover, .msect1_box_chpt4_4:hover {
text-shadow:2px 2px 2px #aaa;
}

.msect1_box_chpt2_1 {
position:absolute;margin:80px 0px 0 60px; font-size:35px; font-weight:bold;
}

.msect1_box_chpt2_2 {
position:absolute;margin:95px 0px 0 0px;
}

.msect1_box_chpt2_3 {
position:absolute;margin:180px 0px 0 60px; font-size:16px;
}

.msect1_box_chpt2_4 {
position:absolute;margin:250px 0px 0 60px; font-size:50px;z-index:9;transition:.2s;
}

.msect1_box_chpt3_1 {
position:absolute;margin:50px 50px 0 400px; font-size:35px; font-weight:bold;text-align:right;
}

.msect1_box_chpt3_2 {
position:absolute;margin:90px 50px 0 628px;
}

.msect1_box_chpt3_3 {
position:absolute;margin:190px 50px 0 380px; font-size:16px;text-align:right;
}

.msect1_box_chpt3_4 {
position:absolute;margin:260px 50px 0 560px; font-size:50px;text-align:right;z-index:9;transition:.2s;
}

.msect1_box_chpt4_1 {
position:absolute;margin:50px 0px 0 60px; font-size:35px; font-weight:bold;
}

.msect1_box_chpt4_2 {
position:absolute;margin:90px 0px 0 0px;
}

.msect1_box_chpt4_3 {
position:absolute;margin:190px 0px 0 60px; font-size:16px;
}

.msect1_box_chpt4_4 {
position:absolute;margin:260px 0px 0 60px; font-size:50px;z-index:9;transition:.2s;
}

.zoom_12 {
    padding: 0px;
    transition: transform .2s; /* Animation */
	width:100%;
    margin: 0 auto;
}

.zoom_12:hover {
transform: scale(1.2);
}

.msect2 {
background:url(/images/main/cs_bg.jpg);background-position:50% 50%; height:400px;background-attachment: fixed ;
}

.msect2_tlt{
text-align:center; font-size:30px ;font-weight:bold; padding-top:60px; text-shadow:3px 3px 3px #000;
}

.msect2_cnt1{
text-align:center; font-size:18px ; padding:60px 0; text-shadow:3px 3px 3px #000;
}

.msect2_cs {
display:inline-block; padding-top:20px;width:100%; color:#FFF;font-size:20px; text-shadow:3px 3px 3px #000;
}

.msect2_cs_tel {
 text-align:center;width:100%;padding-right:30px;
 }

.msect2_cs_tel_num {
color:#ff7e00;font-weight:bold; font-size:50px;
}

 .msect2_cs_hp {
  text-align:left;width:50%;;padding-left:30px;
 }

 .msect2_cs_hp_num {
color:#0ca6e6;font-weight:bold; font-size:30px;
}

 .msect2_cs_mail_txt {
color:#FFF;font-weight:bold; font-size:20px;
}

.msect3 {
background:url(/images/main/menu_bg.jpg);background-position:50% 50%; height:1000px;background-attachment: fixed ;
}

.msect4{
background:url(/images/main/pr_bg.jpg);background-position:50% 50%; height:360px; 
}

.msect4_tlt{
text-align:center; font-size:50px ;font-weight:bold; padding-top:30px; text-shadow:3px 3px 3px #000;
}

.msect4_cnt{
text-align:center; font-size:18px ; padding:30px 0; text-shadow:3px 3px 3px #000;
}

.ord_btn {
background:#0b92ca; color:#FFF;padding:5px 0;width:220px; text-align:center; margin:auto; font-size:20px; cursor:pointer;
transition:.5s;

}

.ord_btn:hover {
border-radius:15px; 
background:#feb326;
}

.copy{
height:190px; background:#21202e; text-align:center; font-size:12px;
}

.copy_logo{width:155px; margin:auto;padding:20px 0;}



/* ==========================  main // =============================== */


.txt_just{  
  word-break: keep-all;
  word-wrap: break-word;
  text-align: justify;
}

.pdt_5 {
padding-top:5px;
}

.wd_100, .w100 {
width:100px;
}

.wd_300 {
width:300px;
}

.wd_400 {
width:400px;
}

.wd_500 {
width:500px;
}


.gab_10 {
clear:both;
padding-top:10px;
border-top:dashed 1px #ccc;
}


.gt_5 {
clear:both;
height:5px;
}


.gt_10 {
clear:both;
height:10px;
}

.gt_20 {
clear:both;
height:20px;
}

.gt_30 {
clear:both;
height:30px;
}

.gt_50 {
clear:both;
height:50px;
}

.gt_60 {
clear:both;
height:60px;
}

.gt_80 {
clear:both;
height:80px;
}

.gt_100 {
clear:both;
height:100px;
}

.gt_130 {
clear:both;
height:130px;
}

.gt_150 {
clear:both;
height:150px;
}

	.top_nav {
	background:#FFF;
	line-height:30px;	
	width:1150px;
	margin:auto;
	padding:5px 40px 30px 20px;
	}

	.top_nav a {
	color:#FFF;
	font-weight:bold;
	font-size:12px;	
	}

	.top_nav_p {
	width:1200px;margin:auto;height:60px;padding:30px 0 10px;
	}

	.logo_p{
	float:left;
	}

	.side_menu{
	display:none;
	}

/*       Top Menu      */

	.hidden_md {
	width:33.33%;
	float:left;
	text-align:center;
	color:#c79e8a;
	}

	.top_join_g {
	float:right;
	width:300px;
	padding:0px 0px;
	text-align:right;
	}

	.top_join_g  a{
	color:#666;
	}

	#nav > ul {		
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  z-index:99;
	}

	#nav {
		float:right;
		padding-top:10px;
		width: 800px;
	}

	#nav > ul > li {
	  width: 100px;
	  float: left;
	  position: relative;
	  text-align:center;
	  cursor:pointer;
	  font-weight:bold;
	  z-index:9999;
	   font-size:16px;
	}

	#nav > ul > li a {
	  display: block;
	  background: #FFF;
	  color: #333;
	  padding: 5px 0px;
	  text-align: center;
	  text-decoration: none;
	  border-radius:5px;
	  border:solid 1px #EEE;
	  font-size:16px;
	  text-shadow:2px 2px 2px #ccc;
	  color:#333;
	  transition:all 0.5s;
	}

	#nav > ul > li a:hover { background: #EEE; }

	#nav > ul > li:hover a + ul { /*    display: block;*/

	}

	#nav > ul > li > ul {
	padding-top:10px;
	  position: absolute;
	  width: 100%;
	  left: 0px;
	  top: 110%;
	  display: none;
	}
/* 
	.nav ul {
		padding:0;
		width:100%;
	}

	.nav li{
		float:left;
		padding-left:100px;
		text-align:center;
		cursor:pointer;
		transition: all .2s;
		font-size:18px;
		height:50px;
	}

	.nav li a {
		font-weight:bold;
		color:#333;
	}

	.nav li a:hover {
		text-shadow:2px 2px 2px #CCC;
	}
*/

	/*           Main BOXS        */



	.mslide {
	clear:both;width:100%;height:630px;
	}

	.slide_txt {
	position:absolute;
	z-index:999;
	color:#FFF;
	font-size:35px;
	font-weight:bold;
	margin-left:400px;
	text-shadow: 2px 2px 2px #000;
	padding-top:400px;
	font-family:'SJEB'; 
	font-weight:600;
	}

	.sslide {
	clear:both;width:100%;height:320px;
	}

	.s1_txt {
	font-weight:bold;
	color:#ff6600;
	font-size:14px;
	}

.ms1_t1 {
font-size:40px;
color:#CCC;
font-weight:bold;
}

.ms1_t2{
font-size:30px;
color:#333;
font-weight:bold;
}

div.polaroid {
  background-color: #EEE;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  transition: font-size 0.1s ease-out;
  cursor:pointer;
  padding-top:5px;
}

div.s1_box > img:hover {
zoom:0.5;
}

div.contain {
  text-align: center;
}

div.contain p {
	padding:10px;
}

.image {
  opacity: 0.8;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

.contain:hover .image {
  opacity: 1;
}

.zoom {
    padding: 0px;
    transition: transform .2s; /* Animation */
	width:250px;
    height: 200px;
    margin: 0 auto;
}

 .zoom:hover {
}

.item {
  position: relative;
  overflow: hidden;
}


	.s1_box {
	text-align:center; 
	display:inline-block;
	width:100%;
	}

	.s_sbox, .ft_box {
	width:1200px;
	margin:auto;
	}

	.ft_box_tln{
	border-top:solid 1px #ccc;
	}

	.s1_box_tlt {
	font-size:25px;
	font-weight:bold;
	padding-bottom:20px;
	color:#333;
	}

	.s1_sbox_L {
	float:left;
	width:350px;
	}

	.s1_sbox_M {
	float:left;
	width:350px;
	}

	.s1_sbox_R {
	float:right;
	width:350px;
	}

	.s1_box_img2 {
	position:absolute;
	width:70px;
	margin:-50px 0 0 125px;
	z-index:9;
	}

	.s1_gw_80 {
	float:left; width:80px; height:200px;
	}

	.s1_his_y {
	float:left;
	font-size:25px;
	padding-right:0px;
	font-style:italic;
	color:#264588;
	font-weight:bold;
	}

	.s1_his_m {
	float:left;
	font-size:16px;
	padding-right:10px;
	color:#264588;
	font-weight:bold;
	text-align:right;
	width:50px;
	}

	.s1_his_t {
	float:left;
	font-size:16px;
	}

	.s2_top_img {
	width:50%;
	}
	.s2_sbox {
	float:left; width:33.33%; cursor:pointer;
	transition: all .2s;
	}

	.s2_sbox:hover {
	text-shadow:2px 2px 2px #aaa;
	}

	.s2_sbox_img {
	float:left;
	}

	.s2_sbox_txt {
	float:left; text-align:left; padding:20px 0 0 20px;
	}

	.s2_txt {
	font-weight:bold;
	line-height:20px;
	}

	.s12_stlt {
	text-align:center; font-size:18px; color:#333; line-height:25px;
	}

	.s12_block {
		display:inline-block; width:100%; background:url(/images/s1_bg.jpg); color:#333; border-radius:10px;
	}

	.s12_sblock{
	float:left; width:50%; text-align:center; padding:50px 0;
	}

/*================= page s21  start ===========*/
	.s21_img {
	width:100%;
	}

	.s21_img_L,
	.s21_img_R {
		width:600px;
		height:400px;
		box-shadow:6px 6px 6px #ccc;
	}

	.s21_img_R {
		margin-top: -350px;
		left:50%;
		margin-left:600px;
		z-index:999;	
	}

	.s21_txt_L,
	.s21_txt_R {		
		width:650px;
		height:400px;
		border:solid 3px #ccc;		
		transition: .2s ease;
	}

	.s21_txt_L:hover,
	.s21_txt_R:hover {
	border:solid 3px #2F76C6;
	color:#2F76C6;
	box-shadow:inset 4px 4px 4px #CCC;
	}

	.s21_txt_L {
		padding:50px 80px 0 50px;
	}

	.s21_txt_R {
		padding:50px 50px 0 80px;
		margin-top: -350px;
		left:50%;
		margin-left:550px;
		z-index:999;		
	}

	.s21_scnt_stlt {
		font-size:50px;
		font-weight:bold;
		font-family: 'Bai Jamjuree', sans-serif;
		color:#333;
	}

	.s21_scnt_stlt1:before {
		content:url(/images/ic_21_1.png);
		padding-right:10px;
		vertical-align:middle;
	}

	.s21_scnt_stlt2:before {
		content:url(/images/ic_21_2.png);
		padding-right:10px;
		vertical-align:middle;
	}

	.s21_scnt_stlt3:before {
		content:url(/images/ic_21_3.png);
		padding-right:10px;
		vertical-align:middle;
	}

	.s21_scnt_stlt4:before {
		content:url(/images/ic_21_4.png);
		padding-right:10px;
		vertical-align:middle;
	}

/*================= page s21  end ===========*/

/*================= page s22  start  ===========*/

.s22_layout {
	width:50%;
	float:left;
}

.s22_box {
	width:475px;
	margin:auto;

}

.s22_txt {
	padding:12% 5%;
	height:300px;
	border-bottom:solid 1px #ccc;
	transition: .5s ease;		
}

.s22_txt_bg1 {
background:url(/images/s22_1_bg.png) no-repeat;
background-position:100% 100%;
}

.s22_txt_bg2 {
background:url(/images/s22_2_bg.png) no-repeat;
background-position:100% 100%;
}

.s22_txt:hover {
    margin-top:-20px;
	border-bottom:solid 12px #2F76C6;
	color:#2F76C6;
}


/*================= page s22  end  ===========*/



/*================= page s23  start  ===========*/

.s23_box{display:inline-block; width:100%; height:220px;}

.s23_sbox_l{
	float:left;
	width:70%;
}

.s23_sbox_r{
	float:right;
	width:80%;
}

.s23_img, .s23_box_txt {
	float:left;
	text-align:center;
}

.s23_box_txt {
	width:60%;
	height:170px;
	border-top: solid 2px #CCC;
	border-right: solid 2px #CCC;
	border-bottom: solid 2px #CCC;
	border-radius: 0px 0px 40px 0px;
	font-size:20px;
	line-height:35px;
	transition: .2s ease;
}

.s23_box_txt:hover {
	border-top: solid 2px #2F76C6;
	border-right: solid 2px #2F76C6;
	border-bottom: solid 2px #2F76C6;
	box-shadow: inset 4px 4px 4px #CCC;
	color: #2F76C6;
}

.s23_box_bg1 {
background:url(/images/s23_1_bg.png) no-repeat;
background-position:100% 100%;
}
.s23_box_bg2 {
background:url(/images/s23_2_bg.png) no-repeat;
background-position:100% 100%;
}

.s23_box_bg3 {
background:url(/images/s23_3_bg.png) no-repeat;
background-position:100% 100%;
}

.s23_box_bg4 {
background:url(/images/s23_4_bg.png) no-repeat;
background-position:100% 100%;
}

.s23_arrbox {float:left; padding:100px 0 0 0;text-align:center;}


/*================= page s23  end ===========*/

/*================= page s24  start ===========*/

	.s24_scnt_stlt1:before {
		content:url(/images/ic_24_1.png);
		padding-right:10px;
		vertical-align:middle;
	}

	.s24_scnt_stlt2:before {
		content:url(/images/ic_24_2.png);
		padding-right:10px;
		vertical-align:middle;
	}

	.s24_scnt_stlt3:before {
		content:url(/images/ic_24_3.png);
		padding-right:10px;
		vertical-align:middle;
	}


/*================= page s24  end ===========*/

	.cs_L {
	float:left; width:60%;
	}

	.cs_R {
	float:left; 
	}

	.cs_top {
	height:350px;
	}

	.cs_top_img {
	position:absolute;width:2000px; left:50%; margin-left:-1000px;
	}

	.mord {
	padding:30px 0;
	}

	/*    TABLE     */

	.tbl  {
	width:96%;
	margin:auto;
	}

	.tbl th {
	padding:10px 0;
	color:#16589a;
	font-weight:bold;
	font-size:18px;
	border-top:solid 2px #333;
	border-bottom:dashed 1px #aaa;
	background:#FFF;
	text-align:center;
	line-height:30px;
	}

	.tbl td {
	padding:10px 0;
	line-height:25px;
	font-size:16px;
	border-bottom:dashed 1px #aaa;
	}

	.tbl .bg {
	background:#EEE;
	}

	/*    TABLE   END  */

	.ft_L {
	width:40%;
	text-align:right;
	}

	.ft_L, .ft_R{
	float:left;
	font-size:12px;
	padding-bottom:20px;
	}

	.ft_R {
	padding-left:50px;
	}

	.tlt_top {
	font-size:32px;
	font-weight:bold;
	color:#264588;
	line-height:35px;
	text-align:center;
	padding-bottom:10px;
	}

	.tlt_top:before {
	content:"	\2044";
	padding-right:15px;
	color:#ff6600;
	font-size:22px;
	}

	.tlt_top:after {
	content:"	\2044";
	padding-left:5px;
	color:#ff6600;
	font-size:22px;
	}

	.stlt_top {
	font-size:25px;
	font-weight:bold;
	color:#264588;
	line-height:35px;
	padding-bottom:10px;
	}

	.contents_contain {
	width:100%;
	margin:auto;
	}

	.ct_gab {
	float:left;
	height:50px;
	border-right:solid 1px #666;
	}


	.scont {
	font-size:14px;
	line-height:20px;
	}

	.ft_box {
	clear:both;
	padding-top:30px;
	}

	.scnt_sL, scnt_sL_s1 {
	float:left;
	width:45%;
	}

	.scnt_L, .scnt_L_s1 {
	float:left;
	width:55%;
	}

	.scnt_sR,  .scnt_sR_s1{
	float:right;
	width:45%;
	text-align:center;
	}

	.scnt_R, .scnt_R_s1 {
	float:right;
	width:55%;
	}

	.scnt_ord_sL {
	float:left;
	width:30%;
	}

	.scnt_ord_R {
	float:right;
	width:70%;
	}

	.scnt_stlt {
	font-weight:bold;
	color:#5b658a;
	float:left;
	font-size:18px;
	line-height:30px;
	}

	.scnt_stlt_dot:before {
	float:left;
	content:url("/images/icon-1.png");
	padding-top:5px;
	padding-right:10px;
	}

	.scnt_stlt_dot2:before {
	float:left;
	content:'\00B0';
	margin-top:5px;
	padding-right:5px;
	font-size:30px;
	color:#345f8d;
	}

	.scnt_stlt_dot3:before {
	float:left;
	content:url("/images/icon-3.png");
	padding-top:5px;
	padding-right:10px;
	}

	.scnt_img {

	}

	.scnt_sc {
	padding-left:10px;
	font-size:16px;
	line-height:25px;
	}

	/*    ORDER TABLE   */


	.tlt , .inp_cnt{
	float:left;
	padding-bottom:10px;
	}

	.tlt {
	font-size:18px;
	font-weight:bold;
	width:150px;
	text-align:right;
	}

	.inp_cnt {
	padding-left:20px;
	}

/* Board Table*/
	.btbl_td {
	width:25%;
	float:left;
	}

	.btbl_img_box{
	width:100%;
	text-align:center;	
	}

	.btbl_img_p {
	position: relative;
    overflow: hidden;
	width:280px;
	height:200px;
	border:solid 1px #EEE;
	transition:all .2s;
	}

	.btbl_img{		
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;	  
	}

	.btbl_img_p:hover{
	box-shadow: 4px 4px 4px #CCC;
	}

	.btbl_subj{
	text-align:center;
	padding-bottom:5px;
	}

	.cmt_nname {
		float:left; background:#F5A34D; padding:5px 10px; color:#FFF; border-radius:10px; width:15%;
	}

	.cmt_inpt {
		float:left; width:75%; padding-left:20px;
	}

	.cmt_btn {
		float:left; width:10%;
	}

	.ctab1, .ctab6 {
	float:left;
	width:24.8%;
	text-align:center;
	font-size:20px;
	line-height:50px;
	color:#FFF;
	}

	.ctab2{
	float:left;
	width:19.9%;
	text-align:center;
	font-size:18px;
	line-height:50px;
	color:#FFF;
	}

	.ctab3, .ctab8 {
	float:left;
	width:33%;
	text-align:center;
	font-size:20px;
	line-height:50px;
	color:#FFF;
	}

	.ctab5 {
	float:left;
	width:14%;
	text-align:center;
	font-size:20px;
	line-height:50px;
	color:#FFF;
	}

	.ctab4, .ctab7, .ctab9 {
	float:left;
	width:49.8%;
	text-align:center;
	font-size:20px;
	line-height:50px;
	color:#FFF;
	}


	/*   LOGIN JOIN*/

	.join_chk {
	border:solid 1px #CCC; width:80%; margin:auto; text-align:center; border-radius:10px;padding:30px;
	}

	.login_box{
	width:60%; padding:20px 50px; margin:auto; border:solid 1px #CCC; text-align:center;line-height:50px;
	}

	.fnd_box {

	}

	/*  Time Line */


	#history {
	  float:left;
	  margin: 0 auto;
	  width:50%;
	}

	.history_tlt{
	font-size:35px;
	font-weight:bold;
	line-height:50px;
	}

	.history_tlt:before {
	  content:"\25E2";
	  padding-right:5px;
	  font-size:12px;
	  color:red;
	}

	#history h2 {
	  font-size: 35px;
	  color: #264588;
	  line-height: 1;
	  margin-top: 40px;
	font-weight:bold;
	}

	.list_right {
	  display: table;
	  width: 100%;
	  table-layout: fixed;
	  padding-left:30px;
	}

	.list_right span {
	  display: table-cell;
	  vertical-align: top;
	}

	.list_right div {
	  position: relative;
	  display: table-cell;
	  vertical-align: top;
	}

	.list_right div:before {
	  content: "";
	  position: absolute;
	  left: 0;
	  width: 1px;
	  height: 100%;
	  background: #dfdfdf;
	}

	.list_right div ul {
	  margin: 20px 0;
	}

	.list_right div ul li {
	  display: table;
	  position: relative;
	  width: 100%;
	  padding-left: 20px;
	}

	.list_right div ul li+li {
	  margin-top: 40px;
	}

	.list_right div ul li:before {
	  content: "";
	  position: absolute;
	  left: -10px;
	  top: 3px;
	  width: 22px;
	  height: 22px;
	  border: 6px solid #0a4a9f;
	  border-radius: 50%;
	}

	.list_right dl {
	  text-align: left;
	  display: table;
	  width: 100%;
	}

	.list_right dl dt {
	  width: 8%;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 16px;
	  color: #444;
	  font-weight: bold;
	  text-align: left;
	}

	.list_right dl dd {
	  width: 90px;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 14px;
	  color: #444;
	  text-align: left;
	}


	.list_left {
	  display: table;
	  width: 100%;
	  table-layout: fixed;
	}

	.list_left span {
	  display: table-cell;
	  vertical-align: top;
	}

	.list_left div {
	  position: relative;
	  display: table-cell;
	  vertical-align: top;
	}

	.list_left div:before {
	  content: "";
	  position: absolute;
	  right: -1px;
	  width: 1px;
	  height: 100%;
	  background: #dfdfdf;
	}

	.list_left div ul {
	  margin: 40px 0;
	}

	.list_left div ul li {
	  display: table;
	  position: relative;
	  width: 100%;
	  padding-left: 20px;
	}

	.list_left div ul li+li {
	  margin-top: 40px;
	}

	.list_left div ul li:before {
	  content: "";
	  position: absolute;
	  right: -10px;
	  top: 3px;
	  width: 12px;
	  height: 12px;
	  border: 3px solid #0a4a9f;
	  border-radius: 50%;
	}

	.list_left dl {
	  text-align: right;
	  display: table;
	  width: 100%;
	  padding-right: 20px;
	}

	.list_left dl dt {
	  width: 10%;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 14px;
	  color: #444;
	  font-weight: bold;
	  text-align: right;
	}

	.list_left dl dd {
	  width: 90px;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 16px;
	  color: #444;
	  text-align: right;
	}

	.sub_menu_t {
	background:#333; width:100%; height:50px;
	}

	.sub_menu {
	display:block; width:1200px; margin:auto;
	}

	.mem_mbl {
		display:none;
	}
/*}*/

/*  ================================== min-width:1100px   End ======================*/

@media (max-width:1099px) {

.wd_100, .w100 {
width:60px;
}

.w150 {
width:100px;
}

.wd_300 {
width:200px;
}


.gab_10 {
clear:both;
padding-top:10px;

}

.gt_5 {
clear:both;
height:5px;
}

.gt_10 {
clear:both;
height:10px;
}

.gt_20 {
clear:both;
height:20px;
}

.gt_30 {
clear:both;
height:10px;
}

.gt_50 {
clear:both;
height:20px;
}

.gt_60 {
clear:both;
height:30px;
}

.gt_70 {
clear:both;
height:30px;
}

.gt_80 {
clear:both;
height:40px;
}

.gt_100 {
clear:both;
height:50px;
}

.gt_130 {
clear:both;
height:50px;
}

.gt_150 {
clear:both;
height:150px;
}

	.top_nav {
	background:#FFF;
	line-height:30px;	
	display:inline-block;
	width:100%;
	position:fixed;
	z-index:999;
	border-bottom:solid 1px #CCC;
	}

	.top_nav a {
	color:#333;
	font-weight:bold;
	font-size:12px;
	}

	.top_nav_p {
	width:100%;padding:40px 0 10px 0;
	}

	.logo_p{
	text-align:center;
	}

	#nav, .cs_top, .mslide, .sslide{
	display:none;
	}

	.hidden_md {
	display:none;
	}

	.top_join_g{
	text-align:right;
	padding-right:10px;
	}


.side_menu {
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	z-index:99999;
}

/* MENU CONTAINER ----- */
	.side_menu {
		background: rgba(0,20,60,.9);
		height: 100vh;
		left: -250px;
		position: fixed;
		top: 0;
		width: 250px;
	}
	.side_menu .contain {
		padding: 0 1em;
	}

/* HAMBURGER STYLES ----- */
	.burger_box {
		position:absolute;
		left:100%;
	}

	.burger_box a.menu-icon {
		display: inline-block;
		float: none;
		height: 25px;
		padding: 5px;
		opacity: .5;
		width: 25px;
		z-index: 100;
	}
	.burger_box a.menu-icon:hover,
	.burger_box a.menu-icon.opened {
		opacity: 1;
	}
	.burger_box a.menu-icon.opened {
		background: rgba(0,20,60,.9);
	}
	.burger_box .menu-icon_box {
		display: inline-block;
		height: 25px;
		position: relative;
		text-align: left;
		width: 25px;
	}
	.burger_box .menu-icon_line {
		background: #000;
		border-radius: 2px;
		display: inline-block;
		height: 3px;
		position: absolute;
		width: 100%;
	}
	.burger_box .menu-icon_line--1 {
		top: 2px;
	}
	.burger_box .menu-icon_line--2 {
		top: 10px;
	}
	.burger_box .menu-icon_line--3 {
		top: 18px;
	}
	.burger_box .menu-icon_line--1 {
		transition: top 200ms 250ms, transform 200ms;
		-webkit-transition: top 200ms 250ms, -webkit-transform 200ms;
	}
	.burger_box .menu-icon_line--2 {
		transition: opacity 0ms 300ms;
		-webkit-transition: opacity 0ms 300ms;
	}
	.burger_box .menu-icon_line--3 {
		transition: top 100ms 300ms, transform 200ms;
		-webkit-transition: top 100ms 300ms, -webkit-transform 200ms;
	}
	.burger_box .menu-icon.opened .menu-icon_box {
		transform: scale3d(0.9, 0.9, 0.9);
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
	}
	.burger_box .menu-icon.opened .menu-icon_line {
		top: 10px;
	}
	.burger_box .menu-icon.opened .menu-icon_line--1 {
		transform: rotate3d(0, 0, 1, 45deg);
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transition: top 100ms, transform 200ms 250ms;
		-webkit-transition: top 100ms, -webkit-transform 200ms 250ms;
	}
	.burger_box .menu-icon.opened .menu-icon_line--2 {
		opacity: 0;
		transition: opacity 200ms;
		-webkit-transition: opacity 200ms;
	}
	.burger_box .menu-icon.opened .menu-icon_line--3 {
		transform: rotate3d(0, 0, 1, -45deg);
		-webkit-transform: rotate3d(0, 0, 1, -45deg);
		transition: top 200ms, transform 200ms 250ms;
		-webkit-transition: top 200ms, -webkit-transform 200ms 250ms;
	}

/* STAGGER LIST ----- */
	.list_load {
		display: none;
		list-style: none;
		padding: 0;
	}
	.list_item {
		margin-left: -20px;
		opacity: 0;
		-webkit-transition: all 200ms ease-in-out;
		transition: all 200ms ease-in-out;
	}
	.list_item a {
		color: #fff;
		display: block;
		padding: 5px 10px;
		text-decoration: none;
	}
	.list_item a:hover {
		background: rgba(255,255,255,.2);
	}
	
.ms1_t1 {
font-size:30px;
color:#CCC;
font-weight:bold;
}

.ms1_t2{
font-size:20px;
color:#333;
font-weight:bold;
}

div.polaroid {
  background-color: #f1f0f5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  transition: font-size 0.1s ease-out;
  cursor:pointer;
}

div.s1_box > img:hover {
zoom:0.5;
}

div.contain {
  text-align: center;
}

div.contain p {
	padding:10px;
}

.image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

.contain:hover .image {
  opacity: 0.5;
}

.zoom {
    padding: 0px;
    transition: transform .2s; /* Animation */
	width:100%;
    margin: 0 auto;
}


 .zoom:hover {
}

.item {
  position: relative;
  overflow: hidden;
}
	.s1_box {
	text-align:center; 
	display:inline-block;
	width:100%;
	}

	.s_sbox, .ft_box {
	width:100%;
	}

	.s1_box_tlt {
	font-size:25px;
	font-weight:bold;
	padding-bottom:10px;
	color:#333;
	}

	.s1_sbox_L, .s1_sbox_M, .s1_sbox_R {
	width:90%;
	margin:auto;
	}

	.s1_box_img2 {
	display:none;
	}

	.s1_gw_80 {
	display:none;
	}

	.s1_his_y {
	float:left;
	font-size:25px;
	padding-right:10px;
	font-style:italic;
	color:#264588;
	font-weight:bold;
	}

	.s1_his_m {
	float:left;
	font-size:16px;
	padding-right:10px;
	font-style:italic;
	color:#264588;
	font-weight:bold;
	text-align:right;
	}

	.s1_his_t {
	float:left;
	font-size:14px;
	width:80%;
	}

	.s2_top_img {
	width:100%;
	}

	.s2_sbox {
	clear:both;
	width:100%;
	}

	.s2_sbox_img {
	float:left;
	}

	.s2_sbox_txt {
	float:left; text-align:left; padding:20px 0 0 20px;
	}

	.s2_txt {
	font-weight:bold;
	line-height:20px;
	}

	.s12_stlt {
	text-align:left; font-size:13px; color:#333; padding-top:10px;
	line-height:20px;
	}

	.s12_block {
		display:-block; width:100%; background:#aaa; color:#FFF; border-radius:10px;
	}

	.s12_sblock{
	   width:80%; text-align:center; padding:20px 0; margin:auto;
	   border-bottom:dashed 1px #FFF;
	}

/*================= page s21  start ===========*/

	.s21_img,
	.s21_img_L,
	.s21_img_R {
		display:none;
	}

	.s21_txt_L,
	.s21_txt_R {		
		width:100%;
		border:dashed 1px #CCC;	
	}

	.s21_txt_L {
		padding:8% 2%;
	}

	.s21_txt_R {
		padding:8% 2%;	
	}

	.s21_scnt_stlt {
		font-size:20px;
		font-weight:bold;
		padding-left:20px;
	}

	.s21_scnt_stlt1:before {
		content:url(/images/ic_21_1.png);
		padding-right:8px;
		vertical-align:middle;
	}

	.s21_scnt_stlt2:before {
		content:url(/images/ic_21_2.png);
		padding-right:8px;
		vertical-align:middle;
	}

	.s21_scnt_stlt3:before {
		content:url(/images/ic_21_3.png);
		padding-right:8px;
		vertical-align:middle;
	}

	.s21_scnt_stlt4:before {
		content:url(/images/ic_21_4.png);
		padding-right:8px;
		vertical-align:middle;
	}

/*================= page s21  end ===========*/

/*================= page s22  start  ===========*/

.s22_layout, .s22_box {
	width:100%;
}


.s22_txt {
	padding:10% 5% 15%;
}

/*================= page s22  end  ===========*/

/*================= page s23  start  ===========*/

.s23_box{width:100%; padding-bottom:50px;}

.s23_sbox_l, .s23_sbox_r, .s23_img {
	width:100%;
}

.s23_box_txt {
	text-align:center;
}

.s23_box_txt {
	padding:30px 0 50px;
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	font-size:18px;
	line-height:25px;
}


.s23_arrbox {display:none;}


/*================= page s23  end ===========*/

/*================= page s24  start ===========*/

	.s24_scnt_stlt1:before {
		content:url(/images/ic_24_1.png);
		padding-right:8px;
		vertical-align:middle;
	}

	.s24_scnt_stlt2:before {
		content:url(/images/ic_24_2.png);
		padding-right:8px;
		vertical-align:middle;
	}

	.s24_scnt_stlt3:before {
		content:url(/images/ic_24_3.png);
		padding-right:8px;
		vertical-align:middle;
	}
/*================= page s24  end ===========*/
	.cs_top {
	height:350px;
	}

	.cs_top_img {
	position:absolute;width:2000px; left:50%; margin-left:-1000px;
	}

	.mord {
	padding:30px 0;
	}

	.cs_L , .cs_R{
	 width:100%;
	 text-align:center;
	}

	.cs_R {
	padding-top:50px;
	}

	.ft_L, .ft_R {
	text-align:center;
	}

	.ft_R{
	font-size:12px;
	padding-bottom:20px;
	}


	/*    TABLE     */

	.tbl  {
	width:96%;
	margin:auto;
	}

	.tbl th {
	padding:5px;
	color:#666;
	font-weight:bold;
	font-size:14px;
	border-top:solid 2px #333;
	border-bottom:dashed 1px #aaa;
	background:#FFF;
	color:#333;
	text-align:center;
	line-height:30px;
	}

	.tbl td {
	padding:5px;
	line-height:25px;
	font-size:12px;
	border-bottom:dashed 1px #aaa;
	}

	.tbl .bg {
	background:#EEE;
	}

	/*    TABLE   END  */

/* Board Table*/

	.btbl_td {
	width:96%;
	margin:auto;
	text-align:center;
	}


	.btbl_img_box{
	width:100%;
	text-align:center;
	}

	.btbl_img_p {
	position: relative;
    overflow: hidden;
	width:90%;
	height:200px;
	margin:auto;
	border:solid 1px #CCC;
	}

	.btbl_img{	
	transition:all .2s;
	border:solid 1px #CCC;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;	  
	}


	.btbl_subj{
	text-align:center;
	padding-bottom:10px;
	}

	.cmt_nname {
		padding:5px 10px; color:#333; border-radius:10px; width:100%; border-top:solid 1px #CCC; font-weight:bold;
	}

	.cmt_inpt, .cmt_btn {
		padding-top:10px;
		 text-align:center;
	}


	.scont {
	font-size:12px;
	line-height:18px;
	width:96%;
	margin:auto;
	}

	.s1_txt {
	font-weight:bold;
	color:#ff6600;
	}

	.tlt_top {
	font-size:22px;
	font-weight:bold;
	color:#264588;
	line-height:25px;
	}

	.stlt_top {
	font-size:16px;
	font-weight:bold;
	color:#264588;
	line-height:35px;
	padding-bottom:10px;
	}

	.scnt_sL, .scnt_sR, .scnt_ord_sL {
	display:none;
	}

	.scnt_L, .scnt_R, .scnt_ord_R {
	width:100%;
	}


	.s11_img, .s12_img {
	display:none;
	}



	.scnt_stlt {
	font-weight:bold;
	color:#5b658a;
	float:left;
	font-size:18px;
	line-height:30px;
	}

	.scnt_stlt_dot:before {
	float:left;
	content:url("/images/icon-1.png");
	padding-top:5px;
	padding-right:10px;
	}

	.scnt_stlt_dot2:before {
	float:left;
	content:'\00B0';
	margin-top:8px;
	padding-right:5px;
	font-size:30px;
	color:#345f8d;
	}

	.scnt_stlt_dot3:before {
	float:left;
	content:url("/images/icon-3.png");
	padding-top:5px;
	padding-right:10px;
	}

	.scnt_img {

	}

	.scnt_sc {
	padding-left:10px;
	font-size:14px;
	line-height:20px;
	}


	.ctab1, .ctab6 {
	float:left;
	width:25%;
	text-align:center;
	font-size:12px;
	line-height:35px;
	color:#FFF;
	}

	.ctab2{
	float:left;
	width:20%;
	text-align:center;
	font-size:12px;
	line-height:35px;
	color:#FFF;
	}

	.ctab4{
	float:left;
	width:100%;
	text-align:center;
	font-size:12px;
	line-height:35px;
	color:#FFF;
	}

	.ctab3, .ctab8 {
	float:left;
	width:33.33%;
	text-align:center;
	font-size:12px;
	line-height:35px;
	color:#FFF;
	}

	.ctab5 {
	float:left;
	width:20%;
	text-align:center;
	font-size:12px;
	line-height:35px;
	color:#FFF;
	}

	.ctab7, .ctab9 {
	float:left;
	width:50%;
	text-align:center;
	font-size:12px;
	line-height:35px;
	color:#FFF;
	}

/* LOGIN JOIN*/

	.join_chk {
	width:100%; margin:auto;text-align:center; border-radius:10px;
	}

	.login_box{
	width:100%; padding:0px 20px 50px 0;  text-align:center;
	line-height:50px;
	}

	.tlt {
	font-size:16px;
	font-weight:bold;
	padding-bottom:5px;
	}

	.inp_cnt {
	padding: 0 0px 10px 20px;
	font-size:16px;
	line-height:25px;
	}

	.fnd_box {
	width:100%;
	text-align:center;
	}

	.fnd_box {
	width:100%;
	}

	/*  Time Line */


	#history {
	  width: 100%;
	  margin: 0 auto;
	}

	#history h2 {
	  font-size: 20px;
	  color: #264588;
	  line-height: 1;
	  margin-top: 10px;
	}

	.history_tlt{
	padding-top:10px;
	font-size:25px;
	font-weight:bold;
	line-height:50px;
	}

	.history_tlt:before {
	  content:"\25E2";
	  padding-right:5px;
	  font-size:12px;
	  color:red;
	}

	.list_right {
	  display: table;
	  width: 100%;
	  table-layout: fixed;
	  padding-left:10px;
	}

	.list_right span {
	  display: table-cell;
	  vertical-align: top;
	}

	.list_right div {
	  position: relative;
	  display: table-cell;
	  vertical-align: top;
	}

	.list_right div:before {
	  content: "";
	  position: absolute;
	  left: 0;
	  width: 1px;
	  height: 100%;
	  background: #dfdfdf;
	}

	.list_right div ul {
	  margin-top: 20px;
	}

	.list_right div ul li {
	  display: table;
	  position: relative;
	  width: 100%;
	  padding-left: 20px;
	}

	.list_right div ul li+li {
	  margin-top: 20px;
	}

	.list_right div ul li:before {
	  content: "";
	  position: absolute;
	  left: -6px;
	  top: 7px;
	  width: 12px;
	  height: 12px;
	  border: 3px solid #0a4a9f;
	  border-radius: 50%;
	}

	.list_right dl {
	  text-align: left;
	  display: table;
	  width: 100%;
	}

	.list_right dl dt {
	  width: 10%;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 14px;
	  color: #444;
	  font-weight: bold;
	  text-align: left;
	}

	.list_right dl dd {
	  width: 90px;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 13px;
	  color: #444;
	  text-align: left;
	}


	.list_left {
	  display: table;
	  width: 100%;
	  table-layout: fixed;
	}

	.list_left span {
	  display: table-cell;
	  vertical-align: top;
	}

	.list_left div {
	  position: relative;
	  display: table-cell;
	  vertical-align: top;
	}

	.list_left div:before {
	  content: "";
	  position: absolute;
	  right: -1px;
	  width: 1px;
	  height: 100%;
	  background: #dfdfdf;
	}

	.list_left div ul {
	  margin-top: 20px;
	}

	.list_left div ul li {
	  display: table;
	  position: relative;
	  width: 100%;
	  padding-left: 20px;
	}

	.list_left div ul li+li {
	  margin-top: 20px;
	}

	.list_left div ul li:before {
	  content: "";
	  position: absolute;
	  right: -10px;
	  top: 7px;
	  width: 12px;
	  height: 12px;
	  border: 3px solid #0a4a9f;
	  border-radius: 50%;
	}

	.list_left dl {
	  text-align: right;
	  display: table;
	  width: 100%;
	  padding-right: 20px;
	}

	.list_left dl dt {
	  width: 10%;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 14px;
	  color: #444;
	  font-weight: bold;
	  text-align: right;
	}

	.list_left dl dd {
	  width: 90px;
	  display: table-cell;
	  vertical-align: middle;
	  font-size: 13px;
	  color: #444;
	  text-align: right;
	}

	.mem_mbl {
		clear:both; display:inline-block; background:#222;
		width:100%;
		padding:10px 0;
		text-align:center;
		opacity: .8;
	}

	.mem_btn1 {
		float:left;
		width:32.5%;
		border:solid 2px #FFF;
		color:#FFF;
		padding:5px 20px;
		border-radius:10px;
		line-height:30px;
		Background:#444;
		box-shadow:inset 2px 2px 2px #000;
	}

	.mem_btn2 {
		float:left;
		width:49.3%;
		border:solid 2px #FFF;
		color:#FFF;
		padding:5px 20px;
		border-radius:10px;
		line-height:30px;
		Background:#444;
		box-shadow:inset 2px 2px 2px #000;
	}

	.ct_mgab {
		float:left;
		height:30px;
		width:4px;
	}
}
/*  ================================== max-width:1099px   End ======================*/


	.ct_active {
	background:#264588; 
	font-weight:bold;
	cursor:default;
	}

	.ct_unactive {
	background:#333;
	transition:all .2s;
	cursor:pointer;
	}

	.ct_unactive:hover {
	box-shadow:inset 4px 4px 4px #222;
	font-weight:bold;
	}

/*================================== CSS TAB =================================*/

.tabbed {
  width: 1200px;
  margin: auto;
  padding-bottom:750px;
}

.tabbed > input {
  display: none;
}

.tabbed > label {
  display: block;
  float: left;
  padding: 12px 40px;
  margin-right: 5px;
  cursor: pointer;
  transition: background-color .3s;
  font-size:20px;
}

.tabbed > label:hover,
.tabbed > input:checked + label {
  color:#264588;
}

.tabbed > input:checked + label:before {
  content: url(/images/icon-1.png);
  padding-right:5px;
  vertical-align:middle;
}

.tabs {
  clear: both;
  perspective: 600px;
}

.tabs > div {
  position: absolute;
  border: 1px solid #EEE;
  padding: 40px 30px 40px;
  line-height: 1.4em;
  opacity: 0;
  transform: rotateX(-20deg);
  transform-origin: top center;
  transition: opacity .3s, transform 1s;
  z-index: 0;
}

#tab-nav-1:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(3),
#tab-nav-4:checked ~ .tabs > div:nth-of-type(4){
  transform: rotateX(0);
  opacity: 1;
  z-index: 1;
}

.vdv {display:none;}
.limg {float:left; margin:0 5px 0 0;}
.rcnt {}

@media screen and (max-width: 700px) {
  .rcnt {clear:both;}
  .vdv { clear:both;display:block; padding-bottom:20px;}
  .tabbed { width: 98%;  padding-bottom:10px; }
  .tabbed > label { display: none }
  .tabs > div {
    width: 98%;
    border: none;
    padding: 0;
    opacity: 1;
    position: relative;
    transform: none;
    margin-bottom: 60px;
  }

}

/*============================== CSS TAB END=====================================*/



/*====================================================================
	Board Buttons
============================================================***/

.nw {
border:solid 2px green;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:green;
font-weight:bold;
}

.bl {
border:solid 2px #1e78ae;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#1e78ae;
font-weight:bold;
}

.rpl {
border:solid 2px #1e78ae;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#1e78ae;
font-weight:bold;
}

.del {
border:solid 2px #ff6600;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#ff6600;
font-weight:bold;
}

.edt {
border:solid 2px #1e78ae;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#1e78ae;
font-weight:bold;
}

.nw:hover, .bl:hover, .rpl:hover, .del:hover, .edt:hover{
text-shadow:2px 2px 2px #CCC;
box-shadow:inset 2px 2px 2px #CCC;
font-weight:bold;
}

.bd_arr {
background:#666;
padding:5px 10px;
font-weight:bold;
border-radius:10px;
}

#grp1 {
position:absolute;
width:300px;
left:50%;
margin-left:-47px;
margin-top:190px;
}

#grp2 {
position:absolute;
width:300px;
left:50%;
margin-left:-77px;
margin-top:305px;
}

#grp3 {
position:absolute;
width:300px;
left:50%;
margin-left:-300px;
margin-top:190px;
}

#grp4 {
position:absolute;
width:300px;
left:50%;
margin-left:160px;
margin-top:190px;
}

#grp5 {
position:absolute;
width:300px;
left:50%;
margin-left:-207px;
margin-top:305px;
}

#grp6 {
position:absolute;
width:300px;
left:50%;
margin-left:-275px;
margin-top:452px;
}


#grp7 {
position:absolute;
width:300px;
left:50%;
margin-left:150px;
margin-top:308px;
}

#grp8 {
position:absolute;
left:50%;
margin-left:-300px;
margin-top:0px;
}

.grp {
display:none;
border:solid 1px #CCC;
border-radius:10px;
padding:20px;
background:#FFF;
box-shadow:4px 4px 4px #CCC;
z-index:999;
}

.grp_tlt {
font-weight:bold;
float:left;
width:60%;
}

.grp_close {
float:right;
line-height:20px;
}

.grp_cnt{
clear:both;
padding-top:0px;
line-height:24px;
}

.s14_box {
position:absolute;
width:300px;
left:50%;
margin-left:-333px;
margin-top:600px;
}

.cmmt {
clear:both;
line-height:25px;
padding:30px 0;
border-bottom:dashed 1px #CCC;
text-align:left;
}

.cmmto {
clear:both;
line-height:25px;
padding:30px 0;
border-bottom:dashed 1px #CCC;
text-align:left;
background:#EEE;
}

.cmmt1 {
float:left;
font-size:12px;
width:20%;
}

.cmmt2 {
float:right;
font-size:12px;
width:80%;
}

/*                    HP_BOARD       START               */


#hp_board table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

#hp_board table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

#hp_board table th {
  background-color: #f8f8f8;
  border-top: 1px solid #333;
  border-bottom: 1px solid #ddd;
  padding: .35em;
  font-weight:bold;
  font-size:20px;
  letter-spacing: .1em;
  text-transform: uppercase;
   text-align: center;
}

#hp_board table tr:hover {
  background:#FAFAFA;
}

#hp_board table td {
  border-bottom: 1px solid #ddd;
  padding: .35em;
  font-size:16px;
}

#hp_board table th,
#hp_board table td {
  padding: .625em;
 }

.bd_td_tlt {width:50%;}

.bd_tlt_ct {text-align:center;}

@media screen and (max-width: 600px) {
  #hp_board table {
    border: 0;
  }

  #hp_board table tbody {
   padding-bottom:20px;
  }

 #hp_board  table caption {
    font-size: 1.3em;
  }
  
  #hp_board table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  #hp_board table tr {
    clear:both;
    display: block;
  }
  
  #hp_board table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 12px;
    text-align: right;
  }
  
 #hp_board  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
	font-size: 12px;
  }
  
    #hp_board table td:first-child {
    clear:both;
	padding-top:40px;
  }

  #hp_board table td:last-child {
    border-bottom: solid 3px #666;
  }


}


@keyframes switch {
    0% { opacity: 0;filter: blur(20px); transform:scale(12)}
    3% { opacity: 1;filter: blur(0); transform:scale(1)}
    10% { opacity: 1;filter: blur(0); transform:scale(1)}
    13% { opacity: 0;filter: blur(10px); transform:scale(1)}
    99% { opacity: 0;filter: blur(10px); transform:scale(1)}
    100% { opacity: 0;filter: blur(10px); transform:scale(1)}
}

/* Included color classes.. 
  .red 
  .blue 
  .yellow 
*/


figure.snip1104 {

  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 320px;
  max-width: 400px;
  max-height: 320px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.snip1104 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

figure.snip1104 img {
  max-width: 100%;
  position: relative;
  opacity: 0.4;
}

figure.snip1104 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

figure.snip1104 h2 {
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block;
  background: #000000;
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  padding: 12px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

figure.snip1104 h2 span {
  font-weight: 800;
}

figure.snip1104:before {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  content: '';
  background: #ffffff;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}

figure.snip1104 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

figure.snip1104.blue {
  background: #123851;
}

figure.snip1104.blue h2 {
  background: #0a212f;
}

figure.snip1104.red {
  background: #581a14;
}

figure.snip1104.red h2 {
  background: #36100c;
}

figure.snip1104.yellow {
  background: #7f5006;
}

figure.snip1104.yellow h2 {
  background: #583804;
}

figure.snip1104:hover img,
figure.snip1104.hover img {
  opacity: 1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

figure.snip1104:hover h2,
figure.snip1104.hover h2 {
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.snip1104:hover:before,
figure.snip1104.hover:before {
  -webkit-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}


/* Demo purposes only */

.pbd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
  margin: 0;
  height: 100%;
}

/*     sub6      */

.s6_box {
float:left;width:24.2%; text-align:center; height:275px;
}

.s6_sbox{
padding:40px 0; border:solid 1px #ccc;
transition:.2s;
}

.s6_sbox:hover{
border:solid 1px #FFF;
background:#EEE;
font-weight:bold;
}

.s6_stxt{
padding-top:40px;  font-size:14px;line-height:25px;
}

.p_more {
width: 50px;
height: 30px;
text-align:center;
font-weight:bold;
border:solid 2px #666;
margin:auto;
border-radius:50px;
font-size:20px;
background:#FFF;
cursor:pointer;
transition: .2s;
}

.p_more:hover {
box-shadow:inset 3px 3px 3px #aaa;
}