@charset "utf-8";

@charset "utf-8";

/* # dongju company 2019_0920 */

/* Reset */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption {margin:0; padding:0;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family:'Noto Sans KR', 'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}

/* 폰트 스타일 초기화 */
em,address {font-style: normal;}

/* 블릿기호 초기화 */
ul,li,ol {list-style:none;}

/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}

/* 테두리 초기화 */
img,fieldset {border:0 none;}

/* 버튼 초기화 */
button {border: 0;}

/* 반응형 */
video, img {width: 100%;}

/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}

/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* icon Loading */
.icon {background-image: url(../img/icons.png);}

/* Layout */
#header_sub {position: relative; height:300px; background:url("../img/mbg_01.jpg") center no-repeat;}
#footer {height:300px; background:#222;}
#contents {min-height:600px;}

/* Container & Row */
.container {position:relative; width:1200px; margin: 0 auto; /*background:rgba(0,0,0,0.4);*/}
.row {padding: 0;}

/* Header */
.header_sub {z-index: 10;}
.header_sub .top_area {width: 1200px; padding-top:34px; margin:0 auto;}
.header_sub .top_area h1 {float:left;}
.header_sub .top_area h1 img {width:290px;}
.header_sub	.top_brand {float:right;}
.header_sub	.top_brand img {width: 210px; border-radius:10px 0 10px;}

/* Top Menu */
.gnb_large {max-width:1200px; margin:0 auto; padding:0 10px 0 10px; z-index: 50;}
.gnb_wrap {position:relative; width:1200px; height:68px; margin: 0 auto; background:rgba(0,0,0,0.6); z-index: 20;}
.gnb_wrap .gnb_large>li a {color:#fff;}
.gnb_wrap .gnb_large>li a:hover {color:#FAB205;}
.gnb_wrap .gnb_large>li {float:left; padding:13px 40px;position:relative;}
.gnb_wrap .gnb_large>li:after {content:''; position: absolute; right: 0px; top: 28px; width: 1px; height:13px;background-color: #8f8f8f;}
.gnb_wrap .gnb_large>li:last-child:after {width: 0; height: 0;}
.gnb_wrap .gnb_large>li:first-child { padding:13px 30px 13px 30px; background-image:none;}
.gnb_wrap .gnb_sub {position:absolute;left:-10px;top:67px;width:190px;display:none;background:#000;opacity:.8;z-index:50;padding:10px 10px 20px 40px;}
.gnb_wrap .gnb_sub li a {color:#fff; font-size:16px;}
.gnb_wrap .gnb_sub li a:hover {color:#FFDA00;}
.gnb_wrap a {line-height:40px;font-size:1.620em; text-decoration:none; font-weight:500; letter-spacing:-1px}
.gnb_wrap a:hover {}
.gnb_wrap li.on > a {}
.gnb_wrap .line {position:absolute;left: 0px; width: 0px;height:2px; overflow: hidden; background-color:#FAB205; z-index:10;} /* javascript로 control */
.gnb_wrap .go_shop a {font-size:20px; font-weight:600; line-height:68px; padding:13px 0;}
.gnb_wrap .go_shop a i {margin-left:10px;}
.gnb_wrap .go_shop {position:absolute; top:0; right:0px; text-align:center; width:210px; height:68px; background: #FAB205;}
.gnb_wrap .go_shop:hover {background: #FF0024; transition:all .4s;}

#m-hd {display:none;width:100%;height:75px;position:fixed; top:0px; border-bottom:1px solid rgba(255, 255, 255, .3);z-index:30;}
#m-hd .logo {position:absolute; left:10px; top:14px; display:inline-block; width:100px; height:50px; }
#m-hd .m-menu {position:absolute; width:300px; background-color:#fff;z-index:40; right:-300px; top:0px; padding-top:50px; transition:right 0.5s;-webkit-transition: right 0.5s; overflow:auto;}
#m-hd .m-menu.on {right:0px;}
#m-hd .m-block {position:fixed; left:0; top:0; z-index:9; width:100%; height:100vh; background-color:#000; opacity:0.5; display:none;}
#m-hd .m-block.on {display:block;}
#m-hd .m-nav .logo_top { padding-top:50px}
#m-hd .m-nav > li {border-bottom:1px solid #f4f1f1; position:relative; }
#m-hd .m-nav > li .btn-down { position:absolute; right:20px; top:10px; font-size: 15px; font-weight:400; width:30px; height:30px; line-height:30px; display:inline-block; text-align:center;  cursor:pointer; transform:rotate(-90deg);transition:transform 0.5s;-webkit-transition: transform 0.5s; overflow:auto;}
#m-hd .m-nav > li .btn-down.on {transform:rotate(90deg)}
#m-hd .m-nav > li .dj-down { display:block; font-size:16px; font-weight:500; padding:15px 10px 15px 35px;}
#m-hd .m-nav > li .dj_tel {font-size:16px; font-weight:700; color:#fff; background:#3ED300; padding:12px 10px 12px 35px;margin:3px 18px 3px 6px;border-radius:6px;}
#m-hd .m-nav > li .dj_kakao {font-size:16px; font-weight:700; color:#fff; background:#FAB205; padding:12px 10px 12px 35px;margin:3px 18px 3px 6px;border-radius:6px;}
#m-hd .m-nav > li .dj_shop {font-size:16px; font-weight:700; color:#fff; background:#E6E6E6; padding:12px 10px 12px 35px;margin:3px 18px 3px 6px;border-radius:6px;}
#m-hd .btn-menu { width: 40px; height:40px; line-height:48px; border:0; color:#fff; font-weight:bold; position:absolute; right:10px; top:18px; font-size:20px; z-index:9999}
#m-hd .btn-menu.on {color:#333;}
#m-hd .m-sub-nav {display:none;}
#m-hd .m-sub-nav > li { border-top:1px solid #e7e7e7;  line-height:35px; }
#m-hd .m-sub-nav > li > a  {display:block; font-size:13px; font-weight:500; padding:6px; background-color:#f4f4f4; padding-left:38px}
.btn-menu{position:fixed;z-index:50;right:5px;top:18px;width:40px;height:40px;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;cursor:pointer;display:block;}
.btn-menu .navicon-line{position:absolute;width:20px;height:2px;border-radius:1px;background-color:#333;-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out;transition:all .4s ease-out}
.btn-menu.on .navicon-line{background-color:#333;}
.btn-menu .nl1 {top: 11px;right: 10px; width:30px;}
.btn-menu .nl2 {top: 19px;right: 10px; width:30px;}
.btn-menu .nl3 {top: 27px;right: 10px; width:30px;}
.btn-menu.on>div{transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);width:25px;position:absolute;top:15px;right:10px;margin:0;padding:0;background-color:#000;}
.btn-menu.on>div:first-child{transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg)}
body.scrolled .btn-menu .navicon-line {background-color: #666;}
body.scrolled .btn-menu.on >div{background-color:#666;}

.sub_navI_warp { display:none}

/* Footer */
.footer {}
.footer_sns {position: absolute; right: 17px; top:26px;  z-index:1;}
.footer_sns li {display:inline-block; margin:0 1px;}
.footer_sns li a {display:block; width: 50px; height: 50px;}
.footer_sns li.s1 {background-position: 0 -50px;}
.footer_sns li.s2 {background-position: -50px -50px;}
.footer_sns li.s3 {background-position: -100px -50px;}
.footer_sns li.s4 {background-position: -150px -50px;}
.footer_sns li.s5 {background-position: -200px -50px;}
.footer_sns li.s6 {background-position: -250px -50px;}
.footer_sns li.s1:hover {background-position: 0 0;}
.footer_sns li.s2:hover {background-position: -50px 0;}
.footer_sns li.s3:hover {background-position: -100px 0;}
.footer_sns li.s4:hover {background-position: -150px 0;}
.footer_sns li.s5:hover {background-position: -200px 0;}
.footer_sns li.s6:hover {background-position: -250px 0;}

.footer_info {padding-top:40px}
.footer_info h2 img {width:260px;}
.footer_info ul {padding:30px 0 20px 0;}
.footer_info li .bold {color:#FAB205; font-weight:400;}
.footer_info li {position: relative; display:inline; padding-right: 16px;}
.footer_info li:after {content:''; position: absolute; right: 5px; top: 5px; width: 1px; height: 11px;background-color: #8f8f8f;}
.footer_info li:last-child:after {width: 0; height: 0;}
.footer_info li a { font-size:14px; color:#f1f1f1;}
.footer_info address p {font-weight:400;}
.footer_info address span {font-size:12px; padding-right:10px; color: #B8B8B8;}
.footer_info address .email {color:#2CB400;}
.footer_info address .copy {display: block; font-size:11px; padding-top:16px; color:#e1e1e1;}
.footer_info address .copy em {color: #fff; padding: 0 6px;}

/* Contents */
.contents {margin-bottom: 100px;}
.contents h2 span {margin:60px 0 20px; font-size:40px; color:#000; font-weight:700;}
.contents h2:after {content:""; display:block; height:1px; width:8%; margin:20px auto; background-color:#666;}
.contents .sub_txt {text-align:center; font-size:18px; font-weight:400; line-height:30px; color:#666; letter-spacing:1px; margin-bottom: 30px;}

/* PG01 - 회사소개*/
.contents .tit {text-align:center; font-size:40px; line-height:54px; letter-spacing:-1px; font-weight:300;}
.contents .s_tit {text-align:center; font-size:28px; color:#111; padding: 30px 0;}
.contents .txt_area {overflow: hidden; margin:50px 0;}
.contents .txt_left {float: left; width: 48%; margin-right: 3%;}
.contents .txt_left img {border-radius:30px;}
.contents .txt_right {float: left; width: 47%;}
.contents h4 {font-size:54px; letter-spacing:-2px; text-align: center;}
.contents .txt_right em {color:#FAB205;}
.contents .txt_right p {font-size: 18px; line-height:36px; padding: 10px 0;}
.contents .txt_right .tit {text-align:center; font-size:42px; line-height:54px; letter-spacing:-1px; font-weight:300; margin:20px 0;}
.contents .txt_right span {display:block; font-size: 24px; color: #000; padding-top: 30px; text-align: right;}

/* PG02 - 회사로고 */
.contents .ci_area {overflow: hidden;}
.contents .ci_area p {font-size: 16px; text-align: center; padding: 20px 0;}
.contents .ci_area strong {font-size: 30px; padding-right: 16px;}
.contents .ci_area a {display:block; text-align: center; width:240px; height:60px; line-height:60px; font-size:18px; font-weight: 400; color:#000; background:rgba(255,255,255,0); border:1px solid #333; margin:20px auto; transition: 0.5s all ease;   -webkit-transition: 0.5s all ease;   -moz-transition: 0.5s all ease;   -ms-transition: 0.5s all ease;   -o-transition: 0.5s all ease; }
.contents .ci_area a:hover {color:#000; background:#FAB205;  border:1px solid #FAB205;}
.contents .ci_left {float:left; width: 48%; margin-right:2%;}
.contents .ci_left img {border-radius:30px;}
.contents .ci_right {float:left; width: 48%;}
.contents .ci_right img {border-radius:30px;}

/* PG03 브랜드 소개 */
.brand {overflow: hidden; padding-bottom:20px;}
.brand > div {float:left; width:11.5%; margin:0.5%; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}
.brand > div:hover{-webkit-box-shadow: 1px 5px 10px -1px rgba(0,0,0,0.34);}
.brand > div img {display: block;}

/* PG05 - 편의시설 이용안내 */
.service {}
.service img {display:block; width:85%; margin:0 auto; border-radius:30px;}
.service h4 {text-align: center; font-size:50px; color:#000; letter-spacing:-1px; font-weight:400; margin: 60px 0 30px;}
.service h4:after {content:""; display:block; height:1px; width:83%; margin:20px auto 0; background-color:#ccc;}
.service p {width: 82%; margin:0 auto 60px; font-size: 21px; color:#797979;}



/*오시는 길*/
.contact_address {width:100%;height:auto;line-height:1.7; margin-top:80px;}
.contact_address ul {max-width:1240px;clear: both;padding:0 20px 20px 20px;border-bottom:1px solid #ddd;}
.contact_address ul li {color: #333;margin-top: 5px;margin-bottom: 5px; font-size:16px}
.contact_traffic { max-width:1240px; padding:20px 20px 0 20px; letter-spacing:-0.8px;  clear:both;}
.contact_traffic:after {content: " ";visibility: hidden;display: block;height: 0;padding-bottom:50px;clear: both;}
.contact_traffic .bus {width:100%;padding:0;}
.contact_traffic .subway {width:100%; padding:0;}
.contact_traffic ul li {color: #555; line-height:33px; font-size:16px}
.contact_traffic h4 { font-size:20px; font-weight:400; letter-spacing:-1px; color:#000; padding:10px 0; margin-top:25px; text-align:left;}
.contact_traffic .bus_tt {font-weight:700; text-align:left;}
.contact_traffic .subway_tt {font-weight:700; text-align:left;}

.map_info {width:283px;height:214px;background:#19cd61;position:absolute;right:0;top:0px;padding: 30px 28px;font-size:16px;color:#f8969a;letter-spacing:0;}
.map_info span {display:block;font-size:20px;color:#fff; font-weight:bold; letter-spacing:-.25px;}
.map_info p { padding-top:20px; color:#f2f2f2; line-height:1.4;}
.map_btn {position:absolute;left:30px;bottom:30px;}
.map_btn a {display:inline-block; padding:7px 10px; height:41px;border:1px solid #f2f2f2;text-align:center; color:#FFF; letter-spacing:-0.5px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.map_btn a:hover {color:#000;background:#fff;border-color:#fff; text-decoration:none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.map_btn a:first-child {margin-right:5px;}
/*오시는 길*/

@media (max-width:1220px) {
.container {width: 100%;}
.row {padding: 0 20px;}
#footer_info .row {padding:0 15px;}
}

@media (max-width:1024px) {
#hd {display:none;}
#m-hd {display:block; background:rgba(255,255,255,0.95);}
#header #top {height:75px}
#m-hd .logo {width: 230px; background-image:url(../img/logo_m.png); background-repeat:no-repeat;}
.scrolled #m-hd {background-color:#fff; border-bottom:1px solid #ddd;}
.scrolled #m-hd .logo {background-image:url(../img/logo-color.png); background-repeat:no-repeat}
.top_area {display:none;}
.gnb_wrap {display:none;}
.contents .txt_left {width:100%; padding-bottom: 20px;}
.contents .txt_right {width:100%;}
.contents .txt_right p {padding:20px 10px;}
#footer_info .row {padding:0 20px;}
}

@media (max-width:768px) {
#header_sub {height:200px;}
#footer_info {height:auto;}
.footer_sns {position:static; text-align:center; padding:20px 0 10px;}
.footer_sns:after {content:""; display:block; height:1px; width:100%; margin:20px auto 0; background-color:#333;}
.contents .ci_left {width:100%; padding-bottom: 60px;}
.contents .ci_right {width:100%;}
.brand > div {width:48%;}
}

@media (max-width:480px) {
#header_sub {height:76px;}
#m-hd {width:100%;}
#footer {height:380px; background:#222;}
.brand > div {width:48%; margin:1%;}
}