@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* SNS Login */
#sns_login {max-width:500px;}
#sns_login .item {padding:10px; border: 1px solid; color:#FFF;}
#sns_login .facebook {border-color:#2E4882; background:#3B5999;}
#sns_login .twitter  {border-color:#40B6E0; background:#47D1FF;}
#sns_login .google   {border-color:#811307; background:#C73E2E;}
#sns_login .kakao    {border-color:#C8A000; background:#E5B700;}

/* 약관 */
div.terms {padding:.5em; margin:1em; line-height:1.5em; height:6em; overflow-y:scroll; border:1px solid #eee; background:#fefefe;}
#bo_term > h4 {font-size:1.3em; margin:0;}



* {padding:0; margin:0; list-style: none; box-sizing: border-box;}
html {color: black;}


html, body, #wrap {min-height: 100vh; max-width: 1920px; margin: 0 auto; padding: 0px;}

html, body, p, img, div, input, textarea, select, button, ul, header, footer, mark, article, ul li, dl, dl dt, dl dd, form, legend, caption, h1, h3, h4, h5, fieldset, label, ol, ol li, xmp {font-family: 'Roboto','Apple Gothic','Apple SD Gothic Neo','sans-serif';  font-size: 1em; line-height: 1.7em;}
h2, #gnb .main >li {font-family: 'Roboto','Apple Gothic','Apple SD Gothic Neo','sans-serif'; font-weight: 700;}

a {color: #333333; text-decoration: none}
a:hover, a:active {color: #000000}

select, input[type='text'], input[type='password'], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {border:none;  border-bottom: solid 2px #dddddd; line-height: 1em; margin: 0; padding: 12px 15px;}
select {min-width: 160px;}

.show {display: block;}

#wrap {max-width: 1920px; margin: 0 auto; overflow: hidden;}
#main {width: 100%; position: relative;/* max-height: 100%; min-height: 100vh; height: 100%;display: inline-block*/;}
#contents {margin:80px auto; font-size: 1.3em; font-weight: 200; position: relative;}
.container {width: 1180px; margin: auto; /*max-height: 100%; min-height: 100vh; height: 100%;*/}
#footer {background: #222222;}



/*******************************
header
*******************************/
#header {width: 100%; height: 85px; display: inline-block; background: rgba(255, 255, 255, .8); position: relative;}
#header .inner-header {width: 1180px; margin: auto; position: relative;}
#header .logo {width:202px; display: inline-block; margin: 20px 0;}
.logo a {display: block;}
.gnb {text-align: center; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: -120px; margin-top: 4px;}
.gnb ul {margin: auto;}
.gnb li {display: inline-block; vertical-align: middle; margin-right: 80px;}
.gnb li:last-child {margin-right: 0px;}
.gnb li a { font-size: 1.4em; font-weight: 600; display: block;}
.gnb li.on a {color: #003d96}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, .9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
	line-height: 2em
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.open-btn {width: 85px; height: 85px; position: absolute; top: 0; right: 0; cursor: pointer; background: #003d96; padding:30px 28px; display: grid;
display: inline-grid;}
.open-btn .bar1, .open-btn .bar2, .open-btn .bar3 {width: 30px; height: 2px; background: #ffffff; margin-bottom: 8px; display: inline-block;}
.open-btn .bar3 {margin-bottom: 0px;}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


.middle-cont {width: 1180px; position: absolute; top: 50%; transform: translateY(-50%);}

/*******************************
main container
*******************************/

#main {clear: both; }

/*flexslider*/

.index .flexslider {margin: 0px;}
.index .flexslider .slides img {transform: scale(1.3);}
.index .flexslider .slides li {backface-visibility: hidden;}
.index .flexslider .slides .flex-active-slide li {z-index: 1;}
.index .flexslider .slides .flex-active-slide img {  transition: all 10s linear;  position: relative;  transform: scale(1); z-index: 1;}
.index .flexslider .slides li {position: relative; overflow: hidden;}
/* .index .flexslider .slides > li:first-child {display: block;}
.index .flexslider .slides > li {display: block; visibility: hidden;} */
.index .flexslider .item-tit {margin: 0 0 40px 0; padding: 30px; border-top: solid 1px #000000;  font-size: 24px;}

.index .flexslider .flex-direction-nav  {position: absolute; left: 15%; top: 25%; transform: translateY(-25%); width:60px;}

.index .flexslider .flex-direction-nav a {font-size: 0px; overflow: visible; text-shadow: 0px 0px 0px !important}
.index .flexslider .flex-direction-nav .flex-prev {left: 10px;}
.index .flexslider .flex-direction-nav .flex-next {right: 10px;}
.index .flexslider .flex-direction-nav a, .flex-pauseplay a {opacity: 1; display: inline-block; color: #ffffff; width: 20px; height: 20px;}
.index .flexslider .flex-control-nav {bottom: auto; right: 30px; width: 10px; top: 50%; transform: translateY(-50%); }

/* .index .flex-pauseplay a { top: 36.5%; transform: translateY(-36.5%);} */
.index .flex-control-nav li {margin: 0}
.index .flex-direction-nav a:before {font-size: 17px; color: #ffffff; opacity: 1; text-shadow: 0px 0px 0px !important;}

.index .flex-control-paging li a{background: rgba(255,255,255,.7);}
.index .flex-control-paging li a.flex-active {background: #ffffff}
.index .flex-control-paging li a:hover, .index .flex-control-paging li a.flex-active:hover {background: #ffffff}
.index .flex-pauseplay a {left: 19.5%;  top: 24%; transform: translateY(-24%); margin-top: -8px;}
.index .flex-pauseplay a:before {font-size: 16px; }
.index .flex-control-paging li a {width: 10px; height: 10px;}


.flex-direction-nav a:before {font-size: 30px; color: #ffffff; opacity: 1; text-shadow: 0px 0px 0px !important;}
.flex-control-paging li a.flex-active {background: #e84034}
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active:hover {background: #e84034}


.mv-text {position: absolute; top:50%; transform: translateY(-50%); left: 15%; z-index: 1; color:#ffffff; text-shadow: 5px 5px 5px rgba(0, 0, 0, .2);}
.mv-text .text1 {font-size: 4.5em; line-height: 1.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; padding-top: 50px}
.mv-text .text1 span {width: 100%; display: inline-block}
.mv-text .text2 {width: 100%; display: inline-block; font-size: 1.2em; line-height: 1em; margin-bottom: 60px }

a.btn {border: solid 1px #ffffff; padding: 10px 25px; color: #ffffff;}
a.btn:hover { color: #ffffff;}

a.btn2 {border: solid 1px #ffffff; padding: 5px 40px; color: #ffffff; font-size: .8em; margin-top: 20px; display: inline-block}
a.btn2:hover { color: #ffffff;}

/*******************************
Sub
*******************************/

.sub-visual {width: 100%; height: 620px; display: inline-block; color: #ffffff; position: relative;}
.sub-visual.who {background: url("../images/who/bg_header.jpg") no-repeat; background-size: cover; background-position: center;}
.sub-visual.what {background: url("../images/what/bg_header.jpg") no-repeat; background-size: cover; background-position: center;}
.sub-visual.contact {background: url("../images/contact/bg_header.jpg") no-repeat; background-size: cover; background-position: center;}
.sub-visual.careers {background: url("../images/careers/bg_header.jpg") no-repeat; background-size: cover; background-position: center;}

.page-title {width: 100%; font-size: 4em; line-height: 1.3em; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, .8); position: absolute; top: 50%; transform: translateY(-50%);}

.inner { width: 1180px; margin: auto; }
.tab-box {width: 1180px; margin: auto; position: absolute; bottom: 0; display: inline-block; font-size: 0;}
.tab-box li {width: 25%; display: inline-block; background: rgba(0, 61, 150, .8); border-right: solid 1px rgba(255, 255, 255, .2); }
.tab-box li:last-child {border-right: none;}
.tab-box li a {display: block; font-size: 20px; color: #ffffff; text-align: center; padding: 30px 0px; font-weight: 500;}
.tab-box li.on a, .tab-box li a:hover, .tab-box li a:active {background: #ffffff; color: #003d96}
.tab-box2 li {width: 50%;}

/*.contents {width: 1180px; margin: auto; font-size: 1.6em;}*/
.h-title {text-align: center; padding-bottom: 60px; margin-bottom: 60px; border-bottom: solid 1px #eeeeee;}
.h-title .title {font-size: 2em; line-height: 1.3em; text-transform: uppercase; margin-bottom: 20px;}
.h-title .text {font-size: 1.1em; line-height: 1.3em; font-weight: 300; color: #333333;}
.h-title span, .h-title strong {width: 100%; display: inline-block;}
.h-title strong {font-weight: 400;}

.cont-left, .cont-right {width: 100%; display: inline-block; vertical-align: middle}
.cont-right {text-align: right;}
.ico { display: inline-block;}
.cont {width: 80%; }
.cont-left .cont {float: right;}
.cont-right .cont {float: left;}
.cont-right .ico {float: right;}
.ico {width: 200px; height: 200px; background: #dddddd; border-radius: 50%; position: relative;}
.ico:before {content: ''; display: block; width: 100px; top: 50%; position: absolute; transform: translateY(-50%);left: 24%;}
.ico.ico-item01:before {height: 100px; background: url("../images/who/icon_s01-1_mission.svg") no-repeat;}
.ico.ico-item02:before {height: 100px; background: url("../images/who/icon_s01-1_vision.svg") no-repeat;}
.ico.ico-item03:before {height: 100px; background: url("../images/who/icon_s01-1_business.svg") no-repeat;}
.ico.ico-item04:before {height: 100px; background: url("../images/who/icon_s01-1_value.svg") no-repeat;}

.ico.ico-item05:before {height: 100px; background: url("../images/careers/icon_s04-1_integrity.svg") no-repeat;}
.ico.ico-item06:before {height: 63px; background: url("../images/careers/icon_s04-1_respect.svg") no-repeat;}
.ico.ico-item07:before {height: 100px; background: url("../images/careers/icon_s04-1_responsibility.svg") no-repeat;}
.ico.ico-item08:before {height: 66px; background: url("../images/careers/icon_s04-1_collaboration.svg") no-repeat;}
.ico.ico-item09:before {height: 100px; background: url("../images/careers/icon_s04-1_innovation.svg") no-repeat;}

.text-tit, .text1, .text2 {width: 100%; display: inline-block;}

.text-tit {font-size: 1.3em; line-height: 1.3em; clear: both; color: #003d96; font-weight: 600}
.text1 {font-weight: 500; margin: 10px 0 5px 0;}
.content-line {width: 100%; height: 1px; background: #eeeeee; margin: 50px 0;}

.business-list {width: 100%; display: inline-block;}
.business-list li {width: 48%; display: inline-block; vertical-align: top;}
.business-list li.right {float: right;}
.business-list .cont-img {margin-bottom: 10px;}

.cont-h {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.cont-right {flex-direction: row-reverse;}
.cont-h >* {width: 48%; flex: 0 0 48%;}
.cont-h .cont-image img {/*max-width: none;*/ width: 200%;}
/*.cont-right .cont-image img {transform: translateX(-50%);}*/

.cont-h.cont-right {text-align: left;}

.map {width: 100%; margin-bottom: 40px;}

.hr-cont {margin-top: 60px;}
.hr-bg {width: 100%; min-height: 460px; background: url("../images/careers/img_s04-1_01.jpg") no-repeat; background-position: center center}
.hr-cont .bg-content {width: 40%; min-height: 460px; background: rgba(0,0,0,.2); color: #ffffff; padding: 30px;}
.hr-cont .cont-title {font-size: 22px; margin-bottom: 20px;}

/*******************************
Footer
*******************************/

#footer {width: 100%; display: inline-block; clear: both;}
#footer .banner {position: relative; height: 190px; background: url("../images/common/bg_banner.jpg") no-repeat; background-size: cover; color: #ffffff; text-align: center; font-size: 1.1em;}
#footer .banner .top-text:after {content: ''; display: block; width: 42px; height: 2px; background: #ffffff; margin:20px auto;}
#footer .banner address {font-size: .9em; font-weight: 300; font-style: normal}
#footer .banner .f-info span {border-right: solid 1px rgba(255,255,255,.2); padding: 0px 20px 0px 15px }
#footer .banner .f-info span:last-child {border-right: none;}
#footer small {width: 100%; display: inline-block; padding: 20px 0px; text-align: center; color: #ffffff}
body.index #footer .banner {display: none;}