/**********************/ /** 최종 190207_v1 **/ /**********************/ @charset "utf-8"; /*@import url("html5reset-1.6.1.css");*/ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR'); @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic'); body, html {width:100%; height:100%;} body {font-family: 'Nanum Gothic', Dotum, '돋움', Helvetica, "Apple SD Gothic Neo",'Noto Sans KR', sans-serif; color:#333;} *, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } input:-ms-clear {display:none} li {list-style:none;} h1, h2 {font-family:'Noto Sans KR', sans-serif;} .blind {position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: 0; width: 0; height: 0;} .clear {clear:both;} .btn1, .btn1:visited { background:#0075a9; padding:15px 25px; color:#FFF; font-weight:bold; border:none; text-shadow:none;} .btn1:hover, .btn1:active {text-decoration:none; background:#72d1fc;} .btn2, .btn2:visited {text-decoration:none; color:#72d1fc; background:none; border:#72d1fc solid 2px; padding:15px 25px; font-weight:bold;} .btn2:hover, .btn2:active {text-decoration:none; color:#FFF; background:#0075a9; border:#72d1fc solid 2px;} /* loding */ .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../img/loding/loader-64x/Preloader_2.gif) center no-repeat #fff; } /* header */ .header {height:auto; *zoom:1;} .header:after {content:""; display:block; clear:both;} /*.header>.navbar {position:relative;}*/ .navbar-brand {height:auto; padding:10px;} .navbar-nav {float:right; margin-top:20px;} .navbar-nav a {cursor:pointer !important;} .navbar-inverse {background:url(../img/bg_black_opaity50.png) repeat;} .navbar-inverse .navbar-nav>li>a {color:#FFF; font-size:120%; font-weight:bold;} .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li.active>a, .navbar-inverse .navbar-nav>li.active>a:hover {color:#72d1fc !important;} .dropdown-menu {background:#000;} .dropdown-menu>li>a {color:#FFF !important;} .dropdown-menu>li>a:hover {background:none; color:#CCC !important;} /* footer */ .footer {/*position:relative;*/ background:#111; color:#999; font-size:90%; width:100%;} .footer .row {padding:20px 0;} .footer .row h5 {font-size:140%; font-weight:bold;} .footer .link { text-align:right; font-size:100%; margin-top:20px;} .copyright {clear:both; background:#111; border-top:#333 solid 1px; text-align:center; padding:20px 0;} .bottomFix {position:fixed; bottom:0;} /* main */ #main {background:url(../img/bg_main.png) no-repeat center; background-size:cover;} #main .wrap {height:100%; background:url(../img/bg_pattern01.png); position:relative;} #main .wrap:after {content:""; display:block; clear:both;} #main .wrap #contents {height:100%; margin-top:-51px;} #main .wrap #contents .container {height:100%; min-height:250px;} #main .wrap #contents .container .main_visual {position:relative; top:50%; margin-top:-150px; color:#FFF;} #main .wrap #contents .container .main_visual h1 {} #main .wrap #contents .container .main_visual .link {margin-top:50px;} #main .wrap #contents .container .main_visual .link a {display:inline-block;} #main .top_visual, #main .footer .container {display:none !important;} #main .footer {position:fixed; bottom:0;} @media (max-height: 440px){ #main .wrap #contents {height:auto;} #main .wrap #contents .container {height:auto; min-height:auto;} #main .wrap #contents .container .main_visual {position:relative; top:0; margin-top:100px; margin-bottom:50px; color:#FFF;} #main .footer {position:relative;} } /* sub top visual */ .top_wrap { background-color:#111; background-repeat:repeat; background-position:center top; background-size:cover;} .top_visual {text-align:center; padding:150px 0 100px 0; color:#FFF;} .top_visual h1 {} .top_visual .en {color:#999;} /* 회사소개 */ #company .top_wrap, #history .top_wrap, #contactus .top_wrap {background-image:url(../img/bg_top02.png);} /* 회사소개 */ #company .about_us {background:#f0f3f5 url(../img/bg_aboutus.png) no-repeat center; padding:50px 0;} #company .about_us h2 {color:#296d8b; font-size:240%;} #company .about_us em { font-style:normal; font-size:150%; color:#000;} #company .about_us p {color:#666; margin-top:30px;} #company .info {background:#f0f3f5 url(../img/bg_info.png) no-repeat center; background-size:cover; padding:50px 0;} #company .info h2 { background:url(../img/line_title.png) no-repeat center bottom; padding-bottom:20px; color:#FFF; text-align:center; margin-bottom:50px;} #company .info .row {margin:auto;} #company .info .row .box {background-color:#FFF; margin:10px; text-align:center; padding:40px 5px;} #company .info .row .box h3 { font-size:120%; font-weight:bold;} #company .info .row .box p { font-size:96%; color:#999;} /* 연혁 */ #history #contents {background:url(../img/bg_pattern02.gif); padding:50px 0;} #history #contents h2 {color:#999; text-align:center;} #history #contents h2 strong {color:#333; font-weight:normal;} #history #contents .year {background:url(../img/line_history.png) repeat-y center top; padding:20px 0; margin-top:50px;} #history #contents .year:after {content:""; display:block; clear:both;} #history #contents .year dl {clear:both; background-image:url(../img/icon_history_R.png); background-repeat:no-repeat; background-position:center 40px; margin-top:20px;} #history #contents .year dl:after {content:""; display:block; clear:both;} #history #contents .year dt {padding-right:50px;} #history #contents .year dd {padding-left:50px;} #history #contents .year h3 {color:#CCC; font-family:'Noto Sans KR'; font-size:400%; font-weight:bold; text-align:right;} #history #contents .year ul {background:#FFF; border:#CCC solid 1px; box-shadow:2px 2px 2px #CCC; padding:10px 10px 20px 20px;} #history #contents .year ul li {background:url(../img/icon_li_01.png) no-repeat 0 5px; padding-left:20px; margin-top:15px;} #history #contents .year .right { background-image:url(../img/icon_history_L.png)} #history #contents .year .right h3 {text-align:left;} #history #contents .year .right dt {float:right; padding-right:0; padding-left:50px;} #history #contents .year .right dd {padding-left:0; padding-right:50px;} /* 오시는길 */ #contactus #contents {padding:50px 0;} #contactus #contents h2 {color:#362e2b;} #contactus #contents .maps {padding-bottom:100px;} #contactus #contents .maps #map {border: #000 solid 1px;} /* #contactus #contents .maps #map {text-align: center; width: 100%; overflow: hidden;} #contactus #contents .maps #map img {width:100%; /*height:600px;* / border:#CCC solid 1px; display: none;} */ /* 인재채용 */ #recruit .top_wrap {background-image:url(../img/bg_top06.png);} #recruit #contents {padding-top:50px;} #recruit #contents h2 {color:#0075a9; text-align:center; margin-bottom:30px;} #recruit #contents h3 {text-align:center; font-weight:bold; color:#000; margin-bottom:20px;} #recruit #contents p {text-align:center;} #recruit #contents .talent {position:relative; margin:50px 0 70px 0; padding-bottom:100px;} #recruit #contents .talent:after {content:""; display:block; clear:both;} #recruit #contents .talent dl {position:relative; border:#00c2e5 solid 10px; border-radius:50%; padding-top:20px; padding-bottom:30px; max-width:290px; box-shadow:0 5px 10px #CCC;} #recruit #contents .talent dl:after {content:""; display:block; clear:both;} #recruit #contents .talent dl:nth-child(1) {border-color:#01d6e6;} #recruit #contents .talent dl:nth-child(2) {border-color:#00c2e5;} #recruit #contents .talent dl:nth-child(3) {border-color:#0199e5;} #recruit #contents .talent dl:nth-child(4) {border-color:#00e5d1;} #recruit #contents .talent dl dt, #recruit #contents .talent dl dd {text-align:center; margin-bottom:10px;} #recruit #contents .talent dl dt {font-size:150%;} #recruit #contents .talent .plus {position:absolute; top:50%; margin-top:-40px; left:0; margin-left:-50px;} #recruit #contents .table {border-top:#000 solid 2px; border-bottom:#000 solid 1px;} #recruit #contents .table th, #recruit #contents .table td {text-align:center; border-bottom:#CCC solid 1px; border-left:#CCC solid 1px; padding:25px 0;} #recruit #contents .table thead tr th {background:#f6f6f6; border-bottom:#111 solid 1px; padding:15px 0;} #recruit #contents .table thead tr th:first-child, #recruit #contents .table tbody tr th {border-left:none;} #recruit #contents .table tbody tr:last-child th, #recruit #contents .table tbody tr:last-child td { border-bottom:none;} #recruit #contents .apply {background:url(../img/bg_pattern02.gif); padding-top:50px; padding-bottom:100px; margin-top:100px;} #recruit #contents .apply h3 {color:#0075a9;} #recruit #contents .apply input[type="radio"], #recruit #contents .apply input[type="checkbox"] {width:20px; height:20px; margin:10px; margin-right:5px; vertical-align: middle;} #recruit #contents .apply input::placeholder { color:#999;} #recruit #contents .apply .policy .txt_box { background:#FFF; border:#CCC solid 1px; border-top:#000 solid 2px; padding:20px 30px; margin-bottom:10px;} #recruit #contents .apply .policy .txt_box h4 {color:#000; font-weight:bold; margin-bottom:20px;} #recruit #contents .apply .policy .txt_box p {text-align:left; margin-bottom:5px;} #recruit #contents .apply .apply_fome {margin-top:50px;} #recruit #contents .apply .apply_fome .box {background:#FFF; padding:10px; margin-bottom:5px;} #recruit #contents .apply .apply_fome .box strong {margin-right:20px;} #recruit #contents .apply .apply_fome .box strong em { font-style:normal; color:#e60012;} #recruit #contents .apply .apply_fome .box label { font-weight:normal;} #recruit #contents .apply .apply_fome .box input {border:none; background:#f6f6f6; padding:10px;} #recruit #contents .apply .apply_fome .box input[type="radio"] {margin-left:20px;} #recruit #contents .apply .apply_fome .box input[type="file"] {display:inline-block; background:none;} #recruit #contents .apply .apply_fome .link { text-align:center; margin-top:50px;} #recruit #contents .apply .apply_fome .link input[type="button"] { padding:20px 80px;} @media (min-width: 1200px){ #recruit #contents .talent dl {padding-top:50px;} } @media (min-width: 1024px){ #main>.wrap>#contents {background:url(../img/img_m.png) no-repeat 100% center;} #main .main_visual {position:relative; top:50%; margin-top:-160px; color:#FFF;} #main .main_visual .txt_gr h1 {font-size:60px !important; margin-bottom:20px;} #main .main_visual .txt_gr p {font-size:18px !important;} } @media (min-width: 786px){ #main .main_visual h1 {font-size:300%;} #company .about_us {padding:220px 0;} #company .info {padding:150px 0;} #company .info h2 {margin-bottom:80px;} #company .info .row .box {min-height:280px;} #company .info .row .box:hover {margin-top:-5px;} } @media (max-width: 992px){ .navbar-nav { margin-top:0; float:left;} .navbar-brand { padding:0;} #history #contents {padding:20px 0;} #history #contents .year {background:none; padding:0;} #history #contents .year h3, #history #contents .year .right h3 {text-align:center; font-size:300%;} #history #contents .year dl {margin-top:20px;} #history #contents .year dl, #history #contents .year .right {background:none;} #history #contents .year dt, #history #contents .year dd, #history #contents .year .right dt, #history #contents .year .right dd {padding:0} #history #contents .year .right dt {float:none;} #recruit #contents .talent dl {border-radius:25px; padding:10px; height:auto !important; box-shadow:none; /*margin-right:10px;*/ margin-bottom:0;} #recruit #contents .talent .plus {display:none;} } @media all and (max-width: 360px){ .navbar-nav{ margin-top:0; float:left;} .navbar-brand img {width:100%;} #company .info .row .box {padding:5px;} #company .info .row .box .img {display:none;} #recruit #contents .talent .img {display:none;} #recruit #contents .apply .policy input[type="checkbox"] {width:25px; height:25px;} }