body {height:100%; min-width:1400px}
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:1300px;  display:inline-block; }
.sian_tab {min-width:1300px; }

  
#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 { width:100%; max-width:1250px; margin:0 auto;   display:flex; align-items:center}



 
header#header nav#gnb {
	   display:inline-block; 
	  margin-left:auto; 
 }
 header#header nav#gnb > ul > li {
	 display:inline-block;  box-sizing:border-box; text-align:Center; position:relative;  padding:0 40px; z-index:99999999999; white-space:nowrap
	  
}
  
header#header nav#gnb > ul > li > a {
	display: inline-block;
	
	font-size: 1.3rem;
	line-height:80px;
 
	font-weight: 700;
	color: #333;
}
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:flex-end; font-weight:300;  line-height:45px;  color:#fff; font-size:15.5px; gap:27px}


.main_con {width:100%;  margin:0 auto; min-width:1300px;  font-size:16.5px;  font-weight:300; line-height:1.4}
.in {width:100%; margin:0 auto;  min-width:1300px;  max-width:1300px;  }
.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%; margin-top:80px; display:inline-block;  z-index:99; position:relative; border-top:1px solid #ddd;  }
.bottom_site_map div ul {width:25%; padding:25px 30px;  border-right:1px solid #ddd;   }
.bottom_site_map div ul:first-child {border-left:1px solid #ddd} 
.bottom_site_map div ul li {color:rgba(255,255,255,.8);  font-size:1rem; font-weight:300;  padding-bottom:6px} 
.bottom_site_map div ul li.li_tit {font-size:1.25em; color:#111;  font-weight:600; 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 {width:60px; height:60px; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 10px rgba(0,0,0,.15);  border-radius:50%;  position:fixed; right:25px; bottom:70px; background-color:#fff; z-index:9999999999}


footer {width:100%; background-color:#fff; display:inline-block; margin-top:100px;  font-size:16px;  font-weight:300;  padding:43px 0 50px 0; box-sizing:border-box; line-height:1.5em;  border-top:1px solid #ddd;  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 {  padding:0 4%; box-sizing:border-box; width:100%; display:inline-block  }
footer b {font-weight:500; color:#222}
 
 
.main_con section  {  width:100%; max-width:1300px; margin:0 auto}
.main_con section + section {padding-top:150px;  margin-top:-100px}
 

.page  {position:fixed; left:35px; top:50%; margin-top:20px; width:180px; background-color:#fff; /* border:1px solid var(--main_c); border-radius:10px;  box-sizing:border-box; padding:20px 15px; */ display:flex; flex-direction:column; gap:12px}
.page li {display:flex; width:100%; align-items:center;  line-height:1.34; font-weight:400;  gap:13px;   position:relative}
.page li:before {content:''; flex-shrink:0;  display:inline-block;   border-radius:50%;  width:12px; height:12px; border:1px solid var(--main_c);  box-sizing:border-box;}
.page li a {color:#333; font-size:17.3px}
.page li.ov a { color:var(--main_c); font-weight:600}
.page li:hover a { color:var(--main_c) }
.page li.ov:before {  background-color:var(--main_c); }
.page li.ov:after { content:''; flex-shrink:0;  display:inline-block; position:absolute; border-radius:50%;  width:18px; height:18px; border:1px solid var(--main_c); left:-3px; top:50%;  box-sizing:border-box;  margin-top:-9px;}
 
.box {position:relative; overflow:hidden; box-sizing:border-box; border:1px solid #ddd; /* border-bottom:7px solid var(--main_c);  */  line-height:0}
.box a {position:absolute; font-size:19px;  line-height:1; right:50px; bottom:50px; width:170px; text-align:center; line-height:53px;  background-color:var(--main_c); z-index:99;  color:#fff;   transition: all 0.3s ease-out; font-weight:400}
.box a:after { content:'';   display:inline-block; position:absolute;  width:calc(100% + 10px); height:calc(100% + 10px);  border:1px solid var(--main_c); left:-5px; top:-5px;  box-sizing:border-box;  }

.box a:hover {background-color:#0db340;   }
.box a:hover:after {  border:1px solid #0db340 }
.box a i {margin-left:5px}
.box + h2 {margin-top:70px;}
.box span {position:absolute; line-height:1; background-color:var(--main_c); border-radius:50px; padding:10px 23px; display:inline-block; left:30px; top:30px;  text-align:center; z-index:99;  color:#fff;    }



.contactus {  background:url('/railhope/img/ .png') no-repeat center; background-size:cover;   position:relative }
.contactus .link {width:100%; height:50%; transition: all 0.3s ease-out;  display:flex; flex-direction:column; position:relative; z-index:99;  cursor:pointer;  align-items:center; justify-content:center; }
/* .contactus .link:hover {background-color:red; color:#fff}
 */.contactus .link svg {width:25px; transform: rotate(45deg); position:Absolute; right:10px; top:5px}
.contactus .link .icon {font-size:20px; margin:0 auto; margin-bottom:7px; width:45px; height:45px;   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 2%;  }
.contactus .right_box ul {width:100%; display:flex; gap:10px}
.contactus .right_box ul li {width:50%; margin-bottom:15px; 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:#f3f3f3; 
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:10px 30px; font-size:1em; transition: all 0.3s ease-out;}



.sub_con {width:100%;  margin:0 auto; min-width:1300px;  font-size:16.5px;  font-weight:300; line-height:1.4 }


 aside {width:100%; border-radius:10px; background: rgba(255, 255, 255, 1); box-shadow:3px 3px 10px rgba(0,0,0,.1);  position:relative; z-index:99;  }
 aside ul {width:100%; display:flex; justify-content:center;  }
 aside ul li { font-size:1.15em;  padding:20px 0;  margin:0 20px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
 aside ul li a {color:#222}
 aside ul li.ov {border-bottom:4px solid var(--main_c);}
 aside ul li.ov * {color:var(--main_c); font-weight:500}




   

.sub_vi {position:relative; width:100%; height:450px; background:url('../img/sub_vi.png') no-repeat bottom; background-size:cover}
.sub_vi .in {position:relative; z-index:9}