@import url(../img/youlbit/swf/css/base.css);
* {padding:0;margin:0;}
img {border:0}
img, a{border:0; selector-dummy:expression(this.hideFocus=true);}
th,td,textarea,h1,h2,h3,h4,h5,h6,div {font-family:"Poppins",  sans-serif;font-size:16px;}
th,td,textarea{ line-height:180%;}
img,fieldset{ border:0;}
li{ list-style:none;}
select,input{ font-family:"Poppins",  sans-serif;color:#000000;font-size:1.00em;line-height:180%;}
address,em{ font-style:normal;}
button{ border:none;background:none;cursor:pointer;}
hr,legend{ display:none;}
p,h1,h2,h3,h4,h5,h6,form,input,ul,li,dl,dt,dd {margin:0;padding:0;}
a img {vertical-align:top;}
a:link{font-size:16px;color:#787878;text-decoration:none;}
a:visited{font-size:16px;color:#787878;text-decoration:none;}
a:hover{font-size:16px;color:#787878;text-decoration:none;}
#content_wrap_main{
width:370px;height:570px;padding:38px 0 0 600px;position:relative;
text-align:left;margin:0 auto;
}
#footer_wrap{width:100%;height:85px;position:relative;}
.content_footer{width:970px;position:relative;text-align:left;margin:0 auto;}
#topmenu{width:970px;height:85px;position:relative;text-align:left;margin:0 auto;}
#topmenu h1{position:absolute;margin:29px 0 0 10px;}
#topmenu .global_menu{position:absolute;right:0;top:14px;overflow:hidden;padding-right:30px;}
#topmenu .global_menu a{padding:0 3px 0 6px;margin-left:-1px;}
#topmenu .main_menu{position:absolute;left:214px;top:29px;vertical-align:top;padding:5px 0 0 29px;width:727px;height:56px;}
#topmenu .main_menu a{display:inline-block;vertical-align:top;}
#topmenu .main_menu .fst{width:139px;}
#topmenu .main_menu .snd{width:186px;}
#topmenu .main_menu .trd{width:135px;}
#topmenu .main_menu .fth{width:143px;}
#topmenu .main_menu .last{width:74px;}
#topmenu .sub_menu{position:absolute;top:60px;left:244px;height:22px;padding:0 11px 0 0;background:#2ba7dc;}
#topmenu .sub_menu a{position:relative;display:inline-block;margin:5px 0 0 0;padding:0 0 0 9px;vertical-align:top;}
#topmenu .company{top:60px;left:244px;}
#topmenu .business{top:60px;left:384px;}
#topmenu .products{top:60px;left:562px;}
#topmenu .customer{top:60px;left:697px;}
#topmenu .recruit{top:60px;left:765px;}
.main_banner{width:360px;height:78px;margin:27px 0 0 0;}
.module_link{width:360px;height:131px;padding:18px 0 0 0;margin:26px 0 0 0;}
.module_link ul {list-style:none; padding:0 0 0 17px;}
.module_link ul li {float:left;width:85px;text-align:center;}
.content_footer {vertical-align:top;}
.content_footer .footer_logo{position:relative;top:18px;}
.content_footer .personal_link{position:relative;top:-22px;left:149px;}
.content_footer .address{position:relative;top:-11px;left:149px;}
.content_footer .family_site{position:absolute;right:0;margin:-55px 0 0 0;}
.content_footer .famliy_site_link{position:absolute;right:0;margin:-33px 0 0 0;width:126px;border:1px solid #efefef;}
.content_footer .famliy_site_link a{display:inline-block;width:126px;text-decoration:none}
.content_footer .famliy_site_link a:hover{background:#efefef;}
BODY {  SCROLLBAR-FACE-color: #cfcfcf; SCROLLBAR-SHADOW-color: #595959; SCROLLBAR-3DLIGHT-color: #595959; SCROLLBAR-ARROW-color: #ffffff;       SCROLLBAR-DARKSHADOW-color: #ffffff;    SCROLLBAR-BASE-color: #cfcfcf;}
article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary {display:block;}
ol, ul, li {list-style : none;padding:0;margin:0;}
li img {
 vertical-align: top;
 margin: 0;
 padding: 0;
}
dl img {
 vertical-align: top;
 margin: 0;
 padding: 0;
}
h1, h2, h3, h4, h5, h6 { 
font-weight : normal ; 
font-size : 100% ; 
}
html {min-width:320px; width:100%; height:100%; overflow-y:scroll;}
body {min-width:320px; width:100%; height:100%; font-size:100%;white-space: normal;text-align:center; margin: 0; padding: 0;background:#FFFFFF;}
#wrap{min-width:320px; width:100%; text-align:left; margin: 0 auto;position: relative;}
#bg_mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity='60'); z-index:990}
#top_container_bg{width:100%;margin: 0 auto;position:absolute;z-index:8000;background: #000;}
#top_container{width:100%;height:40px;max-width:1200px;margin: 0 auto;position: relative;}
#logo{width:300px; height:60px;position: absolute; left: 20px; top: 20px;z-index:9999;}
#main_container{width:100%;overflow:hidden;position: relative;margin:0 auto;}
#sub_container{width:100%;overflow:hidden;position: relative;margin:0 auto;}
#head_top{
 width:95%;
 font-size:15px;
 font-weight:400;
 color: #DEDEDE;
 color: rgba(0, 0, 0, .6);
 font-family:"Poppins",  sans-serif;
 line-height:120%; 
 letter-spacing:-1px;
 text-align:center;
 margin:0 auto;
 padding-bottom:30px;
}
#head_title{color:#fff;text-align:center;width:700px;position:absolute;top:50%;left:50%;margin-top:-80px;margin-left:-350px;z-index:999;}
#head_title2{color:#fff;text-align:center;width:700px;position:absolute;top:50%;left:50%;margin-top:-80px;margin-left:-350px;z-index:999;}
#head_title3{color:#fff;text-align:center;width:700px;position:absolute;top:50%;left:50%;margin-top:-80px;margin-left:-350px;z-index:999;}
.head_1{
}
.head_2{
 font-size:60px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
 font-weight:500;
 padding-top:10px;
 letter-spacing:-0.025em;
}
.head_2 span{
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 font-weight:100;
}
.head_3{
 font-size:18px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.5);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
}
#sub_container #head_title{color:#fff;text-align:center;width:700px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-350px;z-index:999;}
#sub_container #head_title2{color:#fff;text-align:center;width:700px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-350px;z-index:999;}
#sub_container #head_title3{color:#fff;text-align:center;width:700px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-350px;z-index:999;}
#sub_container .head_2{
 font-size:50px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.6);
}
#sub_container .head_3{
 font-size:18px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.4);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
}
#footer{clear:both;}
nav{clear:both;}
#mob_menu{display:none;cursor:pointer;}
#menu{clear:both;position:absolute;width:100%;height:50px;padding-top:0px;z-index:9000;overflow:hidden;background: #000;}
#menu #menu_wrap{width:100%;max-width:1200px;margin:0 auto;}
#menu ul li.main_menu{position: relative;}
#menu > #menu_wrap > ul{
 width:100%;
 max-width:830px;
 float:right;
 padding-left: 0;
 }
#menu > #menu_wrap > ul:after{
display:block;clear:both;content:""
}
#menu #submenu_1,#menu #submenu_2,#menu #submenu_3,#menu #submenu_4,#menu #submenu_5,#menu #submenu_6{
 width:100%;
}
#menu ul li.main_menu ul{ 
 position: absolute;
 width:100%;
 height:100px;
 top:50px;
    padding-left: 0;
}
#menu > #menu_wrap > ul > li{ 
 position: relative;
 float:left;
 width:25%;
 padding-top:0;
 padding-bottom:20px;
 }
#menu > #menu_wrap > ul > li > a{ 
 font-family:"Poppins",  sans-serif;
 font-weight:500;
 font-size:18px;
 text-align:center;
 padding: 3px 0;
 color: #FFFFFF;
 color: rgba(255, 255, 255, 0.9);
 display: block;
 text-decoration: none;
 letter-spacing:-1px;
}
#menu > #menu_wrap > ul > li > a.on{
  background:#009ddd;
  color:#000;
}
#menu ul li ul li a{
 font-family:"Poppins",  sans-serif;
 font-size:14px;
 font-weight:600;
 text-align:center;
 margin-left:1px;
 padding: 5px 0; 
 color: #FFFFFF;
 color: rgba(255, 255, 255, 0.8);
 display: block;
 text-decoration: none; 
}
#menu ul li ul li a:hover{ 
 color: #FFFFFF;
 color: rgba(255, 255, 255,1);
 text-decoration:underline; 
}
#menu ul li a.pc .menu_line{ 
  width:0;
  height:1px;
  display:block;
  background:#9C9C9C;
  margin:18px auto 0;
}
#menu > #menu_wrap > ul > li > a.mob{display:none;}
#menu > #menu_wrap > ul > li > a.pc{display:block;}
a i.fa{color:#BCBCBC;}
a:hover i.fa{color:#888888;}
#sns_bottom{float:left;}
#sns_bottom li{float:left;margin-right:10px;}
#mob_gnb{display:none;margin-top:30px;}
#mob_gnb ul{overflow:hidden;text-align:center;}
#mob_gnb ul li{width:40%;display:inline-block;list-style:none;}
#mob_gnb ul li.end{background:none;}
#mob_gnb ul li a{ 
 font-size:13px;
 text-align:center;
 padding:5px 10px 5px 10px;
 color: #FFFFFF;
 display: block;
 text-decoration: none; 
 letter-spacing:-1px;
 border:1px solid #B3B3B3;
 background:#333;
 font-family:"Poppins",  sans-serif;
 font-weight:500;
}
#mob_gnb ul li a:hover{
 color: #FFF;
 background:#767676;
}
#gnb{position: absolute; right: 10px; top: 5px;z-index:9999;}
#gnb ul{overflow:hidden;text-align:center;}
#gnb ul li{display:inline-block;list-style:none;}
#gnb ul li a{
 font-family:"Poppins",  sans-serif;
 font-size:9px;
 font-weight:bold;
 text-align:center;
 padding: 5px 10px;
 color:#B2B2B2;
 display: block;
 text-decoration: none;  
 background:;
}
#gnb ul li a:hover{
 color:#CBCBCB;
}
a.more_btn{
  display:block;
  width:150px; 
  margin:20px auto;
  padding:10px;
  border: 1px solid transparent;
  border-radius: 300px;
  color: #A5936F;
  font-size:16px;
  font-family: "Poppins",  sans-serif;
  font-weight: 700;
  background-color: white;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  text-align:center;
}
a.more_btn:hover{
  color: #222222;
  text-decoration:none;
}
#main_quick_bg{width:100%;margin:-40px auto 20px;position:relative;z-index:10;}
#main_quick{
width:95%;
margin:0 auto;
display: flex;
align-items: center;
    justify-content: space-between;
flex-wrap: wrap;
flex-direction:row;
text-align:center;
overflow:hidden;
position:relative;
}
#main_quick a{
display:block;
width:25%;
float:left;
-moz-transition: all ease .3s;
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
#main_quick div{padding-top:30px;padding-bottom:30px;}
#main_quick .quick_01{background:#0059aa;}
#main_quick .quick_02{background:#727272;}
#main_quick .quick_03{background:#209A9F;}
#main_quick .quick_04{background:#0059aa;}
#main_quick .quick_05{background:#209A9F;}
#main_quick .quick_06{background:#727272;}
#main_quick h3{
 font-size:25px;
 color:#FFF;
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 margin:15px auto;
}
#main_quick p{
 font-size:16px;
 color:#FFF;
 color: rgba(255, 255, 255, 0.5);
 font-family:"Poppins",  sans-serif;
 margin:15px auto;
 line-height:130%;
}
#main_quick a:link{line-height:120%;text-decoration:none}
#main_quick a:visited{line-height:120%;text-decoration:none}
#main_quick a:hover{line-height:120%;text-decoration:none}
#main_quick a i.fa{color:#FFFFFF;color: rgba(255, 255, 255, 0.6);}
#main_quick a:hover i.fa{color:#019edd;}
.h_line{display:block;width:50px; height:1px; background:#333;margin:0 auto 10px;}
#main_body_bg{width:100%;padding-top:40px;padding-bottom:40px;overflow:hidden;background:#FFFFFF;}
#main_body{width:100%;max-width:1200px;margin:20px auto 0;overflow:hidden;}
#main_left{float:left;width:35%;overflow:hidden;}
#main_right{float:right;width:60%;overflow:hidden;}
#notice{width:100%;float:left;}
#notice dt{
border-bottom:1px solid #EBEBEB;
margin-bottom:10px;
overflow:hidden;
}
#notice dt a{}
#notice dl dd{}
#contact_ban{
 width:43%;
 float:left; 
 text-align:left;
 margin-top:10px;
 }
#contact_ban dl{ 
 padding-top:10px;
 padding-right:30px;
 }
#contact_ban dt{
 font-size:20px; 
 font-weight:bold;
 margin-bottom:10px;
 color:#525252;
 }
#contact_ban dd{
 color:#6D6D6D;
 font-size:12px; 
 font-weight:400;
}
#contact_ban dd span.phone_no{ 
font-size:29px;
color:#525252;
    font-weight:700;
margin-top:10px;
margin-bottom:5px;
letter-spacing:-0.025em;
}
#contact_ban dd span.bank_no{
display:inline-block;
margin-top:8px;
color:#3B1F1B;
font-size:16px;
    font-weight:500;
line-height:100%;
letter-spacing:-0.025em;
}
#qna{width:52%;float:right;}
#qna dt{
border-bottom:1px solid #EBEBEB;
margin-bottom:10px;
overflow:hidden;
}
#qna dt a{}
#qna dl dd{}
#main_contact{width:100%;max-width:1200px;text-align:center;margin:10px auto;padding-top:10px;padding-bottom:35px;}
#main_contact h2{
 font-size:35px;
 color:#111;
 font-family:"Poppins",  sans-serif;
 font-weight:400;
 letter-spacing:-1px;
 margin:0 auto 10px;
}
#main_contact p{
 font-size:15px;
 color:#858585;
 font-family:"Poppins",  sans-serif;
 margin:20px auto 10px;
}
#main_product_gallery{width:100%;max-width:1200px;margin:0 auto 30px;text-align:center;clear:both;}
#main_product_gallery p{
 font-size:15px;
 color:#fff;
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 margin:20px auto 10px;
 font-weight:400;
}
#main_product_gallery dt{
 border-bottom:1px solid #EBEBEB;
 margin-bottom:30px;
 overflow:hidden;
}
#main_portfolio{width:100%;max-width:1200px;margin:0 auto 30px;text-align:center;clear:both;}
#main_portfolio p{
 font-size:15px;
 color:#fff;
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 margin:20px auto 10px;
 font-weight:400;
}
#main_portfolio dt{
 border-bottom:1px solid #EBEBEB;
 margin-bottom:30px;
 overflow:hidden;
}
span.board_title{
font-size:20px;
color:#333333;
font-family:"Poppins",  sans-serif;
margin:20px auto 0;
font-weight:500;
letter-spacing:-0.025em;
display:block;
float:left;
border-bottom:1px solid #333333;
}
span.more{
display:block;
float:right;
margin:20px auto 0;
font-weight:400;
letter-spacing:-0.025em;
}
span.more a{
font-size:15px;
color:#666666;
font-family:"Poppins",  sans-serif;
}
#footer{clear:both;width:100%;margin:20px auto 0;font-family:"Poppins",  sans-serif; background:#f7f7f7;}
#bottom{width:100%;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
#bottom ul{width:360px;margin: 0 auto;overflow:hidden; padding-left:0;}
#bottom ul li{float: left;background:url('../img/youlbit/bottom_line.gif') center right no-repeat;}
#bottom ul li.end{background:none;}
#bottom ul li a{
  font-size:13px;
  letter-spacing:-0.025em;
  color:#9A9A9A;
  font-weight:400;
  display: block;
  padding: 8px 8px;  
  }
#bottom2{
  width:95%;
  margin:0 auto;
  color:#9A9A9A;
  letter-spacing:-0.025em;
  font-weight:400;
  clear:both;
  padding:20px 0;
  line-height:150%;  
   }
#bottom_info{width:100%;max-width:1200px;margin:0 auto;overflow:hidden;}
#bottom_info h4{
  font-size:14px;
  color:#9A9A9A;
  font-family:verdana,arial,helvetica,sans-serif;
  font-weight:bold;
  letter-spacing:0;
  padding:15px 0 10px;
  }
#foot_company{float:left;margin-right:40px;font-size:13px;}
#foot_customer{float:left;margin-right:40px;font-size:13px;}
#copy{
 clear:both;
 color:#9A9A9A;
 font-size:13px;
 letter-spacing:-0.025em;
 font-weight:400;
 text-align:center;
 padding:15px 0;
 border-top:1px solid #ddd;
 }
#sub_body{max-width:1200px;width:100%;margin:45px auto;}
#contentsArea{
   position:relative;
   width:100%;   
 }
 #contentsArea #title_bg{max-width:500px;height:135px;position:relative;margin:0 auto 20px;background: ;}
 #contentsArea #title{
  padding-top:30px;
  padding-bottom:0;
  margin:0 auto;
  clear:both;
  width:100%;
  font-family:"Poppins",  sans-serif;
  font-size:40px;
  text-align:center;
  color: #515151;
  font-weight:bold;
  letter-spacing:-1.5px;
  background: none; 
  background: url("../img/youlbit/sub_title_bg1.png") no-repeat center top;
 }
#sub_menu{
position: relative;
    background-color:#DDDDDD;    
    -moz-transition: all ease .3s;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
}
#sub_menu ul{
    display: flex;
align-items: center;
    justify-content: space-between;
flex-wrap: wrap;
flex-direction:row;
text-align:center;
    width: 100%;
    max-width:1200px;
    margin: 0 auto;   
}
#sub_menu ul.sub_1 li{
width:100%
}
#sub_menu ul.sub_2 li{
width:50%
}
#sub_menu ul.sub_3 li{
width:33.333%
}
#sub_menu ul.sub_4 li{
width:25%
}
#sub_menu ul.sub_5 li{
width:20%
}
#sub_menu a{
 padding:6px 3px;
 font-family:"Poppins",  sans-serif;
 font-size:16px;
 font-weight:600;
 color: #555555;
 display: block;
 text-decoration: none;
 text-align:center;
 line-height:40px; 
}
#sub_menu a:hover{
 color: #333333;
 background-color:#FFFFFF;
}
#sub_menu a.on{
 color: #333333;
 background-color:#FFFFFF;
}
#sub_menu ul li.first_menu{}
.left_title{
 display:block;
 width:100%;
 padding:12px 0;
 font-family:"Poppins",  sans-serif;
 font-size:20px;
 font-weight:600;
 color: #333333;
 padding-left:10px;
 border-top:1px solid #3A3A3A;
 border-bottom:1px solid #3A3A3A;
 background: url('../img/youlbit/left_title_bg.gif') no-repeat right center; 
}
#left_ban{width:95%;margin:50px auto;}
#left_ban ul li.first_menu{margin-top:5px;font-size:16px;font-weight:500;}
#left_ban ul li{font-size:12px;color:#565656;font-family:"Poppins",  sans-serif;}
.left_ban_title{
 display:block;
 width:100%;
 padding:5px 0;
 font-family:"Poppins",  sans-serif;
 font-size:14px;
 font-weight:bold;
 border-bottom:1px solid #bbbbbb;
}
#h_icon{}
.left_align{float: left;}
.cont { 
 width:95%;
 padding:5px;
 margin: 20px auto 30px;
 font-size:14px;
 color:#5C5C5C; 
 font-family:"Poppins",  sans-serif;
 overflow:hidden;
}
.cont.com_history{text-align:left;}
.cont.s_body{max-width:600px;margin:0 auto;}
.center{text-align:center;}
caption {
    display: none;
}
#img_list{
}
#gallery{clear:both;padding-top:17px;}
.bold{font-weight:bold;}
.orange{color:#F78D1E;}
.green{color:#669900;}
.loc_title{border-bottom:1px solid #DED9C7;padding-top:15px;}
.expl{margin-top:15px; margin-bottom:40px;}
.med_title{ 
font-size:16px;
font-family:"Poppins",  sans-serif;
    font-weight:500; 
    letter-spacing:-0.025em;
    line-height:180%;
  }
.eng{font-family: 'helvetica','Open Sans',arial,sans-serif;}
address{font-style:normal;line-height: 180%;}
address strong{font-weight:bold;}
.eng_num{letter-spacing:0;}
cite{
font-family:"Poppins",  sans-serif;
 font-style:normal;
 line-height:150%;
 }
#contentsArea #sub_menu{display:none;}
#contentsArea .left_title{
 display:none; 
}
article#sub_contents p{
color:#5F5F5F;
font-family:"Poppins",  sans-serif;
font-size:16px;
    font-weight:400;
line-height:1.8em;
letter-spacing:-0.025em;
margin-bottom:10px;
}
article#sub_contents figure.img_left{width:35%;float:left;margin-right:40px;}
article#sub_contents figure.img_right{width:35%;float:right;margin-left:40px;}
article#sub_contents figure.img_center{width:100%;}
article#sub_contents figure img{max-width:100%;}
article#sub_contents h2{
  color:#333;
  font-family:"Poppins",  sans-serif;
  font-size:23px;
  font-weight:700;
  margin-top: 5px;
  margin-bottom:25px;
  letter-spacing:-0.05em;
  line-height:120%;
 }
article#sub_contents > ul{padding-top:20px;margin:0 auto;}
article#sub_contents .year{
  display:block;
  width:110px;
  color:#5F5F5F;
  font-family:"Poppins",  sans-serif;
  font-size:40px; 
  letter-spacing:-0.1em;
  background:url('../img/youlbit/history/line_mid.gif') no-repeat right center;
  }
article#sub_contents ul li ul{
  background:url('../img/youlbit/history/line_bg.gif') repeat-y left top;
  margin-left:101px;
}
article#sub_contents ul li ul li{
  padding:10px;
  font-family:"Poppins",  sans-serif;
  font-size:16px; 
}
article#sub_contents .month{
  color:#5F5F5F;
  font-weight:bold;
  font-family:"Poppins",  sans-serif;
  font-size:16px; 
  letter-spacing:-0.05em; 
  margin-right:10px;
}
 .member_txt input[name=addr]{width:100%;}
 .member_txt input[name=addr2]{width:100%;}
 .member_txt input[name=member_img]{width:100%;}
 .row{margin-bottom:25px;overflow:hidden;}
 .cateform{color:#666666;border:1px solid #D4D4D4;}
 .keywordform {width:95%;color:#666666;border:1px solid #D4D4D4;}
 #contact_ban dd.talk_bg{
margin-top:5px;
padding-left:10px;
padding-top:0;
padding-bottom:0;
font-family:"Poppins",  sans-serif;
font-size:15px;
font-weight:500;
color:#666666;
background:#F7F7F7;
}
 .talk img{vertical-align:middle;}


@media (max-width: 1401px) {
#sub_menu ul{ 
 width: 90%;
 max-width:700px;
}
#sub_menu a{
 font-size:15px;
 font-weight:600;
}
#head_title{color:#fff;text-align:center;width:600px;position:absolute;top:50%;left:50%;margin-top:-70px;margin-left:-300px;z-index:999;}
#head_title2{color:#fff;text-align:center;width:600px;position:absolute;top:50%;left:50%;margin-top:-70px;margin-left:-300px;z-index:999;}
#head_title3{color:#fff;text-align:center;width:600px;position:absolute;top:50%;left:50%;margin-top:-70px;margin-left:-300px;z-index:999;}
.head_1{
}
.head_2{
 font-size:55px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
 padding-top:10px;
 padding-bottom:5px;
}
.head_2 span{
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 font-weight:100;
}
.head_3{
 font-size:18px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.5);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
}
#sub_container #head_title{color:#fff;text-align:center;width:600px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-300px;z-index:999;}
#sub_container #head_title2{color:#fff;text-align:center;width:600px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-300px;z-index:999;}
#sub_container #head_title3{color:#fff;text-align:center;width:600px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-300px;z-index:999;}
#sub_container .head_2{
 font-size:40px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.6);
}
#sub_container .head_3{
 font-size:16px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.4);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
}
}


@media screen and (max-width: 1201px) {
#head_title{color:#fff;text-align:center;width:400px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-200px;z-index:999;}
#head_title2{color:#fff;text-align:center;width:400px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-200px;z-index:999;}
#head_title3{color:#fff;text-align:center;width:400px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-200px;z-index:999;}
.head_2{
 font-size:36px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
 padding-top:10px;
 padding-bottom:5px;
}
.head_2 span{
 color: rgba(255, 255, 255, 0.8);
 font-family:"Poppins",  sans-serif;
 font-weight:100;
}
.head_3{
 font-size:11px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.5);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
}
#sub_container #head_title{color:#fff;text-align:center;width:400px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-200px;z-index:999;}
#sub_container #head_title2{color:#fff;text-align:center;width:400px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-200px;z-index:999;}
#sub_container #head_title3{color:#fff;text-align:center;width:400px;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-200px;z-index:999;}
#sub_container .head_2{
 font-size:30px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.6);
}
#sub_container .head_3{
 font-size:11px;
 font-weight:500;
 color: rgba(255, 255, 255, 0.4);
 font-family:"Poppins",  sans-serif;
 line-height:120%;
}


    #main_quick{
width:100%;
}
#main_quick h3{
font-size:22px;
}
#main_quick p{
font-size:14px;
}
#sub_menu a{
 font-size:14px;
 font-weight:600;
}
}
@media screen and  (max-width:1000px) {
 #sub_body{width:100%;clear:both;}
 td.att_title {min-width:45px;}
 td.formmail_title_bgcolor{min-width:50px;}
}
@media screen and (max-width: 991px) {
  #logo{float:none;position:relative;left:0;top:5px;margin:0 auto;z-index:8888;         text-align: center;}
  #logo h1 a img{ padding: 5px 0px 5px 0px;   }
  #top_container_bg{margin: 0 auto;}
  #top_container{width:100%;max-width:990px;height:80px;margin: 0 auto;padding-top:10px;position: relative;}
  #main_container{margin-top:0px;}
  #sub_container{margin-top:0px;}
  #main_body_bg{padding-top:0;padding-bottom:20px;}
  #main_body{width:95%;}  
  #left{display:none;}
  #contentsArea{
  float:none;
  width:98%;
  margin:0 auto;
   } 
  #main_left{float:none;width:100%;border-right:none;}
  #main_right{float:none;width:100%;padding-top:20px;}
  #main_portfolio{float:none;width:100%;height:auto;}
  #main_portfolio .board_output_imgs{}
  #notice{width:100%;float:none;margin-top:20px;}
  #contact_ban{width:45%;float:left;margin-top:15px;background:#f4f4f4;padding-bottom:20px;text-align:center;}
  #contact_ban dl{   
 padding-right:0;
 }
  #qna{width:45%;float:right;margin-top:0;}
  div#post_area img{
   width:95%;
   height:auto;
   max-width:750px;
   }   
  #head_title{display:none;} 
  #head_title2{display:none;}
  #head_title3{display:none;}
  #sub_container #head_title{display:none;}
  #sub_container #head_title2{display:none;}
  #sub_container #head_title3{display:none;}
}
@media screen and (max-width: 959px) {
 #mob_gnb{display:block;}
 #gnb{display:none;}
 #mob_menu{display:block;position:absolute; right: 10px; top: 15px;z-index:9002;}
 #menu{display:none;width:70%;height:100%;background:none;overflow-y:auto;position: fixed;right: 0; top: 0;z-index:9001;background:#FFFFFF;border:1px solid #000;box-shadow: 2px 2px 10px 0 #333333, -2px -2px 10px 0 #333333;}
 #menu > #menu_wrap > ul{ 
  width:100%;
  height:auto;
  position:absolute;
  margin-left:0;  
  left:0;
  top:100px;
  background:#FFFFFF;
  padding-bottom:30px;
  }
 #menu > #menu_wrap > ul > li{ 
   width:100%;
   float:none;
   position:relative;
   border-right:0;
   padding-top:3px;
   padding-bottom:3px;
 }
 #menu > #menu_wrap > ul > li > a{ 
font-size:18px;
text-align:left;
background:#FFFFFF url('../img/youlbit/menu_arrow.png') no-repeat 98% center;
border-bottom:1px solid #CCCCCC;    
padding:10px;
color:#333333;
 }
 #menu > #menu_wrap > ul > li > a.on{
color:#000;
background:#FFF url('../img/youlbit/menu_arrow_on.png') no-repeat 98% center;
  } 
 #menu ul li ul li a{ 
text-align:left;
padding: 10px;
color: #555555;
   }
 #menu ul li ul li a:hover{ 
  color: #333333;
  text-decoration:none; 
}
 #menu ul li ul li{ 
display:inline-block;
 }
 #menu #submenu_1 ul, #menu #submenu_2 ul,#menu #submenu_3 ul,#menu #submenu_4 ul,#menu #submenu_5 ul,#menu #submenu_6 ul{ 
   display:none;
   position:relative;
   left: 0;
   top: 0;
   background:#F2F2F2;
   width:100%;
   height:auto;
 }
  #menu > #menu_wrap > ul > li > a.mob{display:block;}
  #menu > #menu_wrap > ul > li > a.pc{display:none;}
  #main_product_gallery{width:95%}
  #main_portfolio{width:95%}
  #foot_company{width:90%;}
  #foot_customer{width:90%;margin-left:0px;}
  #sns_bottom{margin-left:0px; padding-left:0;}
  #main_quick_bg{margin:0 auto 20px;position:relative;z-index:10;}
  #sub_menu ul{
      justify-content: flex-start;
      width: 90%;
      padding-left: 0px;
   }
 #sub_menu ul.sub_1{   
    width: 50%;
   } 
 #sub_menu ul.sub_5 li{
width:33.333%
}
}
@media screen and (max-width: 768px) {
 th,td,textarea,h1,h2,h3,h4,h5,h6,div {font-size:14px;}
 a:link{font-size:14px;color:#787878;text-decoration:none;}
 a:visited{font-size:14px;color:#787878;text-decoration:none;}
 a:hover{font-size:14px;color:#787878;text-decoration:none;}
 article#sub_contents p{
font-size:14px;
    font-weight:400;
}
article#sub_contents ul li ul li{ 
  font-size:14px; 
}
article#sub_contents .month{  
  font-size:14px;
}
 #logo{top:5px;margin:0 auto 0;} 
 .board input[type=text]{width:95%;}
 .board input[name=name]{width:60%;}
 .board input[name=phone_no1]{width:15%;}
 .board input[name=phone_no2]{width:20%;}
 .board input[name=phone_no3]{width:20%;}
 .board input[type=file]{width:95%;}
 .board textarea {width:95%;}
 .table_02 input[type=text]{width:95%;}
 .table_02 input[name=name]{width:60%;}
 .table_02 input[name=phone_no1]{width:15%;}
 .table_02 input[name=phone_no2]{width:20%;}
 .table_02 input[name=phone_no3]{width:20%;}
 .table_02 input[type=file]{width:95%;}
 .table_02 textarea {width:95%;}
 .comment_txt {display:block; }
 .comment_name {display:block; }
 .comment_txt textarea {width:60%;}
 .bbsnewf5 td a img {width:;max-width:100%;height:auto;}
 .login_box input[type=image]{width:95%;max-width:86px;} 
 .member_txt input[name=member_img]{width:250px;}
 .member_txt select[name=pw_question]{width:250px;}
 .member_txt input[name=pw_answer]{width:250px;}
 .member_txt input[name=email1]{width:120px;}
 .member_txt select[name=email2]{width:120px;}
  .member_txt input[name=email3]{width:120px;}
  .member_txt input[name=com_member_secede_email]{width:170px;} 
   div#post_area img{
   width:95%;
   height:auto;
   max-width:750px;
 }
 #copy{text-align:center;}   
 #main_portfolio .board_output_imgs{}
 #main_quick a{width:50%;}
 #main_quick div{border-bottom:1px solid rgba(255,255,255,0.2);} 
}
@media screen and (max-width: 639px) { 
 #notice{width:100%;float:none;margin-top:35px;}
 #contact_ban{
  width:100%;
  float:none;
  margin-top:20px;
 }
 #qna{width:100%;float:none;margin-top:35px;}
}
@media screen and (max-width:600px) {
 article#sub_contents .year{  
 background:none;   
  } 
 article#sub_contents ul li ul{
   background:none;
   margin-left:20px;
   margin-top: 10px;
   margin-bottom:25px;
   border-top:1px solid #C9C9C9;
 }
}
@media screen and (max-width: 520px) {
    #contentsArea #title_bg{max-width:500px;;height:125px;position:relative;margin:0 auto 20px;}
    #contentsArea #title{ 
    width:100%;
    font-family:"Poppins",  sans-serif;
    font-size:35px;
    background: url("../img/youlbit/sub_title_bg1.png") no-repeat center top;
   } 
 .center img{width:100%;height:auto;}
}
@media screen and (max-width: 480px) {
 article#sub_contents figure.img_left{width:100%;clear:both;}
 article#sub_contents figure.img_right{width:100%;clear:both;} 
 .member_txt input[name=member_img]{width:170px;}
 .member_txt select[name=pw_question]{width:170px;}
 .member_txt input[name=pw_answer]{width:170px;}
 .member_txt input[name=email1]{width:150px;}
 .member_txt select[name=email2]{width:150px;}
 .member_txt input[name=email3]{width:150px;}
 .member_txt input[name=com_member_secede_email]{width:150px;} 
 #main_portfolio .board_output_imgs{} 
}
@media screen and (max-width: 360px) {  
 article#sub_contents h2{ 
  font-size:20px;
  font-weight:bold;
  margin-top: 5px;
  margin-bottom:25px;
  letter-spacing:-0.05em;
  line-height:120%;
 } 
}
@media screen and (min-width: 1200px) {
}



/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: calc(100vh - 112px);
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .container {
  z-index: 3;
}

.hero .welcome h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
    color: #fff;
    font-family: "Poppins", sans-serif;
}

.hero .welcome p {
  font-size: 24px;
  margin: 0;
    color: #fff;
    font-family: "Poppins", sans-serif;
}

.hero .content {
  margin-top: 40px;
}

.hero .content .why-box {
  color: #ffffff;
  background: #0059aa;
  padding: 30px;
  border-radius: 4px;
}

.hero .content .why-box h3 {
  color: #ffffff;
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.hero .content .why-box p {
  margin-bottom: 30px;
}

.hero .content .why-box .more-btn {
  color: var(--contrast-color);
  background: color-mix(in srgb, #ffffff, transparent 80%);
  display: inline-block;
  padding: 6px 30px 8px 30px;
  border-radius: 50px;
  transition: all ease-in-out 0.4s;
}

.hero .content .why-box .more-btn i {
  font-size: 14px;
}

.hero .content .why-box .more-btn:hover {
  background: var(--surface-color);
  color: var(--accent-color);
}

.hero .content .icon-box {
  text-align: center;
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff, transparent 20%);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
  width: 100%;
}

.hero .content .icon-box i {
  font-size: 40px;
  color: var(--accent-color);
}

.hero .content .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 20px 0;
}

.hero .content .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, #444444, transparent 30%);
}


/*--------------------------------------------------------------
# 오시는길 Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
  background-color: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
  }
}

.contact .info-item {
  margin-bottom: 40px;
  display: flex;
}

.contact .info-item i {
  font-size: 20px;
  color: ;
  background: #efefee;
  width: 44px;
  height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #333333;
    text-align: left;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: #d9e7f3;
  color: ;
}

.contact .info-item div{
        display: inline-block;
}

.contact .php-email-form {
  background-color: var(--surface-color);
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}


/*--------------------------------------------------------------
# 롤오버 버튼
--------------------------------------------------------------*/

#helloButton{
    font-size: 18pt; 
    display: inline-block; 
    padding: 20px 50px; 
    border-radius: 50px; 
    margin: 10px; 
    color: rgb(255, 255, 255); 
    font-weight: 600;
    font-family: var(--heading-font);
    background-color: #143f8b;
}

#helloButton:hover{
    background-color: #57bde5;
    transition: 0.5s;
    transform: scale(1.1);
    font-family: var(--nav-font) ;
}


#moreButton{
    font-size: 12pt; 
    display: inline-block; 
    padding: 5px 20px; 
    border-radius: 50px; 
    margin: 20px 0px 0 0; 
    color: rgb(255, 255, 255); 
    font-weight: 600;
    font-family: var(--heading-font);
    background-color: #143f8b;
}

#moreButton:hover{
    background-color: #57bde5;
    transition: 0.5s;
    transform: scale(1.1);
}



@media (max-width: 468px) {
    #helloButton {
        font-size: 14pt;
        padding: 10px 30px;
    }
}