  
  
body {height:100%; min-width:1100px}
html {height:100%}

 
.ac {align-items:center !important; }
.as {align-items:flex-start !important; }
.ad {align-items:flex-end !important; }
.jt {justify-content:flex-start !important; }
.jc {justify-content:center !important; }
.js {justify-content:space-between !important; }

#wrap {height:100%; position:relative; width:100%; min-width:1100px;  display:inline-block; }
.sian_tab {min-width:1100px; }

  
#container {  width:100%; display:inline-block;  }

 /* Header */
#header_wrap {width:100%; display:inline-block; border-bottom:1px solid #ddd;  position:fixed; z-index:99999; top:0;  background-color:#fff  }
#header_wrap * {transition: all 0.3s ease-out;}

 
header#header {padding-top:20px;  width:100%; max-width:1100px; margin:0 auto;   display:flex; align-items:center}



 
header#header nav#gnb {
	   display:inline-block; 
	  margin-left:auto; 
	  margin-right:30px
 }
 header#header nav#gnb > ul > li {
	 display:inline-block;  box-sizing:border-box; text-align:center; position:relative;  padding:0 30px; z-index:99999999999; white-space:nowrap
	  
}
  
header#header nav#gnb > ul > li > a {
	display: inline-block;
	
	font-size: 1.3rem;
	line-height:55px;
 
	font-weight: 600;
	color: #000;
}
header#header nav#gnb > ul > li > a:hover {color:#111} 
header#header nav#gnb > ul > li > ul { display:none;  width:200px; background-color:#fff;  position:absolute; left:50%; transform: translate(-50%, 0);   padding:20px 0 }
header#header nav#gnb > ul > li > ul > li {width:100%; padding:5px 5px; box-sizing:border-box; white-space:nowrap; }
header#header nav#gnb > ul > li > ul > li > a{display:inline-block;width:100%; font-size:1.05em; color:#333}
header#header nav#gnb > ul > li > ul > li:hover a {color:var(--main_c); text-decoration:underline} 

#header_wrap  > div.util_wrap  {background-color:var(--main_c);  height:45px}
#header_wrap.over > div.util_wrap {margin-top:-45px}
.util  {justify-content:center;  font-weight:300;  line-height:53px; color:#333;  font-size:15.5px; gap:27px}


.main_con {width:100%;  margin:0 auto; min-width:1100px;  font-size:16.5px;  font-weight:300; line-height:1.4}
.in {width:100%; margin:0 auto;  min-width:1100px;  max-width:1100px;  }
.flex {display:flex}
.main_con h2 {font-size:1.9em; margin-bottom:30px}
.main_con h2:before {content:' '; width:10px;height:3px; margin:0 10px; margin-top:-1px; vertical-align:middle;  background-color:#111; display:inline-block;  }
.main_con h2:after {content:' ';  width:10px;height:3px; margin:0 10px; margin-top:-1px;  vertical-align:middle;  background-color:#111; display:inline-block;  }

hr {height:100px}
h3 {font-size:2em}

section {}

.arrow { position: absolute;   }
.arrow::after {
	position: absolute;
    right:0; 
	top: 30%;
	content: '';
	width: 35%;  
	height: 35%; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
		transform: rotate( 45deg );

} 
.arrow::before {
  content:'';
  width:80%;
  height:2px;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  background:#fff
}




.bottom_site_map {background-color:#f9f9f9; width:100%;   display:inline-block;  z-index:99; position:relative;   }
.bottom_site_map div ul {width:25%; padding:25px 30px;   }
 
.bottom_site_map div ul li {color:rgba(255,255,255,.8); text-align:center;   font-size:16px;  font-weight:300;  padding-bottom:6px} 
.bottom_site_map div ul li:last-child {padding-bottom:0; } 
.bottom_site_map div ul li.li_tit {font-size:1.2em; color:#111;  font-weight:500; padding-bottom:15px}
.bottom_site_map div ul li img {width:100%}
.bottom_site_map div ul li a {color:#333  }
.bottom_site_map div ul li a:hover {  text-decoration:underline }

 
.up_btn   { position: fixed; z-index:999999999;  right:20px; bottom:130px; display: flex; align-items: center; justify-content: center; width:90px; height:90px;   background-color: #fff; border-radius: 10px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); cursor: pointer; }
.up_btn svg { width: 35%; height:35%; object-fit: contain; transition: transform 0.3s, fill 0.3s; }
.up_btn2   {text-align:center;    display: flex; flex-direction:column; align-items: center; justify-content: center; width:90px; height:90px;   background-color:var(--main_c); color:#fff; border-radius: 10px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); cursor: pointer; }
.up_btn2  span {font-weight:200; font-size:15px; line-height:1.3}

.footer_util span { margin-left:1px; background-color:#fff;box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);font-size:15.3px;  color:#444;  border-radius:5px; padding:8px 20px; display:inline-block; font-weight:400}
footer {width:100%; background-color:#fff; display:inline-block;  font-size:16px;  font-weight:300;  padding:43px 0 50px 0; box-sizing:border-box; line-height:1.5em;    color:#444 }
footer h2 {margin-bottom:10px; font-size:1.2em;  }
footer .top_link {width:60px;  line-height:60px; background-color:#ffa00b; text-align:Center; font-size:1rem; display:inline-block; color:#fff; margin-right:4%;  float:right; }
footer div {   }
footer b {font-weight:500; color:#222}
 

a.basic_btn {border:1px solid var(--main_c); font-size:18px; color:var(--main_c); border-radius:50px;  padding:11px 50px; display:inline-block}
a.basic_btn2 {background-color: var(--main_c); font-size:18px; color:#fff; border-radius:50px;  padding:11px 50px; display:inline-block}

 
.board * {transition: all 0.3s ease-out; word-break: normal}

.board ul.flex {width:100%; flex-wrap:wrap;  gap:15px; }
.board ul.flex li {width:calc(33% - 7px);   position:relative; cursor:pointer }
.board ul.flex li img {width:100%;   }
.board ul.flex li .img {position:relative;  overflow:hidden; cursor:pointer;/*   box-shadow:3px 3px 10px rgba(0,0,0,.1); */}
.board ul.flex li span {z-index:999; position:absolute; left:20px; top:20px; background-color:var(--main_c);  color:#fff; border-radius:5px; padding:7px 20px; display:inline-block; font-size:16px}

.board ul.flex li  div.img_bg {width:100%; height:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);   }
.board ul.flex li:hover  div.img_bg {border:1px solid red; width:115%; height:115%}
 

.board ul.flex li h5 {font-size:1.2em; color:#222; font-weight:400; margin-bottom:7px; overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-wrap: break-word; 
 	}
.board ul.flex li h5  b {font-weight:700}
.board ul.flex li .text { margin-top:15px; box-sizing:border-box; color:#555; font-size:15px;    box-sizing:border-box;}
.board ul.flex li p + p {font-size:14px; margin-top:4px;   letter-spacing:0;  color:#777; font-weight:200}


.contactus {  background-color:#fff; position:relative }
 .link {height:33.333%;  border-radius:5px;  background-color:var(--main_c); display:flex;  flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; font-size:16px ; line-height:1.35 }
 
.contactus .link .icon {font-size:20px; flex-shrink:0; width:40px; height:40px;   display:flex;    justify-content: center;   align-items: center; background-color:var(--main_c); border:1px solid var(--main_c); color:#fff; border-radius:50%; transition: all 0.1s ease-out; }
 
.contactus h3.tit {font-size:3.5em; margin-bottom:20px;  line-height:1.1; font-weight:600 }
.contactus .right_box {width:100%; padding:70px 10px  }
.contactus .right_box ul {width:100%; display:flex; flex-wrap:wrap;  gap:10px}
.contactus .right_box ul li {width:100%; display:flex; align-items:center;  }
.contactus .right_box ul li:nth-child(2n) {margin-left:auto}
.contactus .right_box ul li input { height:50px; padding:10px; box-sizing:border-box; border:none;  color:#333; background-color:#fff; 
font-size:15px}
.contactus .right_box ul li input::placeholder {color:#333}
.contactus .right_box form {position:relative; z-index:99}
.contactus .right_box ul li label {margin-right:10px}
.contactus .right_box ul li.li_100 {width:100%}
.contactus .right_box  textarea {width:100%; font-size:15px; height:150px; padding:10px; box-sizing:border-box; border:none;  color:#111; background:rgba(255,255,255,1);  }

.contactus .check_div input {margin-right:5px}

.check_div {width:100%; display:flex; align-items:center;   font-size:17px; }
.check_div a {margin-left:auto; color:#111; border:1px solid #111;   padding:8px 25px; font-size:15.5px; transition: all 0.3s ease-out;}
 