@charset "utf-8";
@import url("common.css");

/*--------------------------------------------------------------
font-family: 'Cardo', serif;
font-family: 'kakao', sans-serif;
--------------------------------------------------------------*/

.btn_goto{border: 1px solid #fff;position: absolute;left: 50%;transform:translateX(-50%);top: 50%; background-color: rgba(0,0,0,.2);color: #fff;padding: 10px 16px;}

@media (max-width:768px){
	.btn_goto{top: 80%;width: 70%;}
} 

section{padding: 150px 0;overflow: hidden;}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#topbar{height: 91px;transition:all 0.5s;background-color:#fff;text-align:center;top: -91px;border-bottom: 1px solid #ddd;}
#topbar.topbar-scrolled{top: 0px;}
#topbar a{display: inline-block;padding: 20px 100px ;}
#topbar a:hover{background-color: #F5F5F5;}
#topbar img{height: 50px;}

#header {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9997;
  transition: all 0.5s;
  padding: 15px;
  overflow-y: auto;
}
@media (max-width: 992px) {
  #header {
    width: 300px;
    background: #fff;
    border-right: 1px solid #e6e9ec;
    left: -300px;
  }
}

@media (min-width: 992px) {
  #main {
    margin-left: 100px;
  }
}
@media (max-width:768px){
	#topbar{display: none;}
	section{padding: 50px 0;}
} 
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.nav-menu {
  padding: 0;
  display: block;
}
.nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
}


/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 9998;
  border: 0;
  background: #fff;
  font-size: 28px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 0;
  cursor: pointer;
  border-radius: 50px;
  padding: 5px;
}
.mobile-nav-toggle i {
  color: #45505b;
}

.mobile-nav-active {
  overflow: hidden;
}
.mobile-nav-active #header {
  left: 0;
}
.mobile-nav-active .mobile-nav-toggle {
  color: #fff;
  background-color: #666;
}

#intro_wrap{padding-left: 300px;width: 100%;height: 100%;}
.intro_point_txt1{font-size: 30px;font-family: 'Cardo', serif; transform: skew(-0.1deg);font-weight: bold;letter-spacing:-0.05em;}	
.intro_point_txt2{font-size: 24px;padding-bottom: 30px;text-align: center;}	
.intro_point_txt2 strong{color: #E4322B;}	
.section-title {  padding-bottom: 40px;}
.section-title h3 {font-size: 14px; font-weight: 500;  padding: 0;  line-height: 1px;  margin: 0 0 5px 0;  letter-spacing: 2px;text-transform: uppercase;  color: #aaaaaa;}
.section-title h3::after {  content: "";  width: 120px;  height: 1px;  display: inline-block;  background: #E4322B;  margin: 4px 10px;}
.section-title p {  margin: 0;  font-size: 36px;  font-weight: 700;  text-transform: uppercase;  color: #151515;}

.btn_download{border: 4px solid #E5E5E5;padding: 10px 20px;display: block;text-align: center;margin-bottom: 10px;}
.btn_download i{color: #E4322B;}
.btn_download:hover{background-color: #FAFAFA;transition: background 0.75s;}



/* header */	
	.header{width: 300px;height: 100vh;position: fixed;top: 0;left: 0;bottom: 0;z-index:9997;}
	.header h1{padding-top: 140px;text-align: center;}
	.header ul{padding-top: 100px;text-align: center;width: 80%;margin: 0 auto;}
	.header ul li a{display: block;border: 1px solid #fff;border-radius:40px; line-height: 40px;}
	.header ul li a:hover{color: #000;border: 1px solid #E4322B;transition: 0.5s;}
	

/* goto site */
	#gotosite{display:flex;color: #fff;}
	#gotosite p{text-align: center;font-size: 40px;font-family: 'Cardo';text-shadow:2px 2px 1px #000;position: absolute;width: 100%;left: 0;bottom: 20%;}
	#gotosite > div{width: 50%;height: 100vh;cursor: pointer;position: relative;}
	#gotosite h2{height: 400px;text-align: center;padding-top: 130px;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	position: absolute;top: 0;width: 100%;	}

	#goto_creek{background: url('/images/c_main_img04.jpg') center center no-repeat;}
	#goto_valley{background: url('/images/v_main_img05.jpg') center center no-repeat;}

	.bg_black{width: 100%;height: 100%;background-color: rgba(0,0,0,.3);position: absolute;z-index:2}
	.bg_black:hover{background-color: rgba(0,0,0,0);transition: background 0.75s;}


	

/* ceo */
	.intro_ceo{height: 320px;padding: 30px 0;background: url("/images/c_main_img06.jpg") no-repeat;background-position: center center;background-size: cover;position: relative;}
	.intro_ceo::before {content: "";position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0, 0, 0, 0.7);}
	.intro_ceo > div{text-align: center;color: #fff;position: absolute;width: 80%;left: 10%;}
	.ceoimg{width: 180px;border-radius: 50%;border: 6px solid rgba(255, 255, 255, 0.15);margin: 0 auto;margin-bottom: 20px;}

	/* histroy */
	.history_item{padding: 0 0 20px 20px;  margin-top: -2px;  border-left: 2px solid #0563bb;  position: relative;}
	.history_item::before {  content: "";  position: absolute;  width: 16px;  height: 16px;  border-radius: 50px;  left: -9px;  top: 0;  background: #fff;  border: 2px solid #0563bb;}
	.history_item .year{font-size: 16px;  background: #f7f8f9;  padding: 5px 15px;  display: inline-block;  font-weight: 600;  margin-bottom: 10px;}

/* recruit */
	#recruit ul li p:first-child{color: #045FB4;font-weight: bold;}
	.recute_download{display:flex;}
	.recute_download p{padding-top: 20px;padding-left: 20px;}


	.data{min-height:350px}




/* footer */	
	footer{background-color: #5D5D5D; color: #A8A8A8;font-size: 14px;}
	.footer_logo{padding: 30px 15px;}
	#footmenu{width: 100%;border-top: 1px solid #6b6b6b;border-bottom: 1px solid #6b6b6b;}
	#footmenu a{color: #ddd;padding: 14px;display:inline-block;}
	#footmenu a:hover{color: #fff;}
	#footmenu a:first-child{padding-left: 0;}
	.address{display:flex;}
	#copyright{padding-top: 14px;padding-bottom: 10px;}
	#copyright dl{width: 50%;display:flex;}
	#copyright dt{color: #fff;padding-right: 20px;font-weight: normal;}

	


@media (max-width:992px){
	#intro_wrap{padding-left: 0px;}
	#gotosite{display:block;}
	#gotosite > div{width: 100%;height: 50vh;}
	#gotosite p{display: none;}
	#gotosite h2{padding-top: 100px;}
}

@media (max-width:768px){
	.header h1{padding-top: 100px;}
	.header ul{padding-top: 50px;}
	.recute_download{display: block;}
	.recute_download p{padding: 0;}

	footer{font-size: .8rem;}
	.footer_logo{padding: 15px;}
	#footmenu a{padding: 4px 8px 4px 0;}
	.address{display:block;}
	#copyright dl{width: 100%;display:block;}
	.intro_point_txt1{font-size: 1.5rem;}
}