@charset "utf-8";

/* # dongju company 2019_0917 */

/* 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 {position:relative; height: 600px;}
#brand_area {height:400px; background:#EBE6E0;}
#business_area {height:500px; background:url( "../img/bg_section01.jpg") center top no-repeat; background-attachment: fixed;}
#service_area {height:760px;}
#counsel_area {height: 350px; background:url( "../img/bg_section02.jpg") no-repeat center; background-size:cover;}
#info_area {height:310px;}
#footer {width:100%; height:300px; background:#222;}
#header_sub {height: 260px;}
#sub_bg {height:260px; background:url( "../img/mbg_01.jpg") center no-repeat;}
#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 */
.top_area {position: relative; width: 1200px;margin: 0 auto; padding-top: 30px; padding-bottom: 6px; overflow: hidden;z-index: 20;}
.top_area h1 {float: left;}
.top_area h1 img { width:290px;}
.top_area .top_brand {display:block; position: absolute; right: 0; padding-top:0;}
.top_area .top_brand img {width: 210px;border:1px solid #000; 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-weight:900; 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; 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; 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; 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}

/* Slider */
.slider {position:absolute; left:0; top: 0; width:100%; height:600px;}
.slider .ss1 {background:url(../img/mbn_0.jpg) no-repeat center center; background-size: cover;}
.slider .ss2 {background:url(../img/mbn_1.jpg) no-repeat center center; background-size: cover;}
.slider .ss3 {background:url(../img/mbn_2.jpg) no-repeat center center; background-size: cover;}
.slider .ss4 {background:url(../img/mbn_3.jpg) no-repeat center center; background-size: cover;}
.slider .ss5 {background:url(../img/mbn_4.jpg) no-repeat center center; background-size: cover;}
.slider .swiper-slide {}
.slider .swiper-slide h3 {position: relative; display: inline-block; font-size: 50px; font-weight:500; line-height: 56px; color:#FAB205; margin-top: 220px;}
.slider .swiper-slide h3:after {content:''; width:100%; height:1px; text-align: center; background:rgba(255,255,255,0.7); position:absolute; left:0; bottom:-18px;}
.slider .swiper-slide h3 em {display: block; font-size: 46px; font-weight:100; color:#fff;}
.slider .swiper-slide p {font-size: 22px; color: #fff; padding-top: 30px;}
.slider .swiper-slide .tel {border:1px solid #FDE300; background-color:#FAE100; padding:10px 20px; margin-top:10px; width:370px; font-size: 21px; color:#1E1D1E;}
.slider .swiper-slide .tel a {color:#1E1D1E;}

/* Section - Brand */
.brand_area {overflow: hidden;}
.brand_area .brand_tt {text-align: center; padding: 40px 0 30px;}
.brand_area .brand_tt h2 {font-size:36px; font-weight: 700;}
.brand_area .brand_tt p {font-size: 20px; color:#888;}
.brand_area .swiper-slide .brand_img {border:1px solid #CECECE;}
.brand_area .swiper-slide .brand_img img {display:block;}
.brand_area .swiper-slide .brand_info {background:#fff; height:130px;}
.brand_area .swiper-slide .brand_info h3 {font-size:18px; padding:20px 0 10px 30px;}
.brand_area .swiper-slide .brand_info p {font-size:15px; padding:0 30px; color: #888;}

/* Section - business */
.business_area {padding-top: 100px;}
.business_area .busi_left {float: left; width: 50%;}
.business_area .busi_left img {border-radius:0;}
.business_area .busi_right {overflow: hidden;}
.business_area .busi_right > div {float: left; display: inline-block; width:50%;}

/* Section - Service */
.service_area {text-align: center;}
.service_area .serv_tt {padding:60px 0;}
.service_area .serv_tt h3 {font-size: 36px; font-weight: 700;}
.service_area .serv_tt p {font-size: 20px; color:#888;}
.service_area .service_box {overflow: hidden;}
.service_area .service_box > div {float: left; width: 31.33%; margin:1%;}
.service_area .service_box > div img {display: block; border-radius:20px 20px 0 0}
.service_area .service_box .serv_info {width: 100%; height:140px; padding:20px 0; background:#EBE6E0; border-radius:0 0 20px 20px;}
.service_area .service_box .serv_info h4 {font-size: 22px; padding-bottom: 6px;}
.service_area .service_box .serv_info p {font-size: 15px; line-height:20px; color:#666;}

/* Section - Counsel */
.counsel_area {text-align: center;}
.counsel_area h2 {font-size: 36px; color: #fff; font-weight:500; padding-top:86px;}
.counsel_area h2 em {color: #fab205;}
.counsel_area p {font-size: 20px; padding: 4px 0; color: #fff;}
.counsel_area a {display:block; width:240px; height:60px; line-height:60px; font-size:18px; font-weight: 400; color:#fff; background:rgba(0,0,0,0); border:1px solid #fff; 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; }
.counsel_area a:hover {color:#000; background:#FAB205;  border:1px solid #FAB205;}

/* Section - Info */
.info_area {margin-top: 60px; /* background:rgba(0,0,0,0.4); */}
.info_area .notice {float: left; width:33%; padding:0 10px; border-right:1px solid #ddd;}
.info_area .notice h2 {font-size:22px; color:#000; font-weight:600;}
/* .info_area .notice h2:after { content: " ";display: block;  width:58px; height:2px; margin-top:25px; background-color:#000; clear: both;} */
.info_area .notice .notice_latest {height:240px;}
.info_area .qna {float: left; width:33%; border-right:1px solid #ddd; padding:0 10px;}
.info_area .qna h2 {font-size:22px; color:#000; font-weight:600;}
/* .info_area .qna h2:after { content: " ";display: block;  width:58px; height:2px; margin-top:25px; background-color:#000; clear: both;} */
.info_area .qna .qna_latest {height: 240px;}

.info_area .location {float: left; width:33%; padding:0 0 0 20px;}
.info_area .location h2 {font-size:22px; color:#000; font-weight:600;}
.info_area .location h2:after { content: " ";display: block;  width:58px; height:2px; margin-top:20px; background-color:#000; clear: both;}
.info_area .location .location_wrap {height: 170px; margin-top: 20px; /* background: #f5f5f5; */}

/* 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 {}
.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 {text-align:center;}
.contents h2 span {margin:60px 0 20px; text-align:center; font-size:40px; color:#000; font-weight:700;}
.contents h2:after {content:""; display:block; height:1px; width:8%; margin:20px auto 0; background-color:#666;}
.contents .sub_txt {text-align:center; font-size:18px; line-height:30px; color:#999; letter-spacing:1px;}

/* Header SUB */


/* Media Query */
@media (max-width:1220px) {
.container {width: 100%;}
#footer_info .row {padding:0 15px;}
#bd_area .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}
.slider .swiper-slide {width: 100%; text-align: center;}
.slider .swiper-slide h3 {font-size: 50px; margin-top:240px;}
.slider .swiper-slide .tel {margin:10px auto;}
#business_area .row {padding: 0 20px;}
#footer_info .row {padding:0 20px;}
}

@media screen and (max-width:960px) {
#business_area {height:auto;}
.business_area {padding-top:40px; display: inline-block; text-align: center;}
.business_area .busi_left {width:100%; margin-bottom:15px;}
.business_area .busi_right {width:100%; margin-bottom:30px;}
#footer_info .row {padding:0 15px;}
}

@media (max-width:768px) {
.header .top_area {padding: 15px 15px;}
#service_area {height:auto; margin-bottom:20px;}
.service_area .service_box > div {float: left; width: 46%; margin:2% 2%;}
.service_area .service_box > div:nth-child(3) {display: none;}
#info_area {height:auto;}
.info_area .notice {width: 50%;}
.info_area .qna {width: 50%;}
.info_area .location {display:block; width:98%; }
.info_area .location .location_wrap {width: 100%; height:420px;}

#footer_info {height:auto;}
.footer_sns {height: 120px;}
.footer_sns ul {width: 100%; text-align: center;}
}

@media (max-width:480px) {
#header {height:340px;}
#m-hd {width:100%;}
.slider .swiper-container {height:340px;}
.slider .swiper-slide {height:340px; text-align:center;}
.slider .swiper-slide h3 {font-size:36px; line-height:40px; margin-top:110px;}
.slider .swiper-slide h3 em {font-size:24px;}
.slider .swiper-slide p {font-size: 18px;}
.slider .swiper-slide .tel {width: 310px;}
.swiper-button-prev,.swiper-button-next {display: none;}
.swiper-pagination-bullets {display: none;}
.brand_area .brand_tt h2 {font-size: 32px; font-weight: 700;}
.brand_area .brand_tt p {font-size: 16px; color: #888;}
#service_area {height:auto; padding-bottom: 40px;}
#service_area .row {padding: 0 10px;}
.service_area .serv_tt h3 {font-size: 32px; font-weight: 700;}
.service_area .serv_tt p {font-size: 16px; color: #888;}
.service_area .service_box > div { width: 96%; margin-bottom:20px;}
.service_area .service_box > div:nth-child(3) {display:block;}
#counsel_area {height:280px;}
.counsel_area h2 {font-size:28px; color:#FAB205; padding-top:60px;}
.counsel_area h2 em {display:none;}
.counsel_area p {font-size:16px;}
#info_area {display:none;}
.info_area .notice {width: 100%;}
.info_area .qna {width: 100%;}
.info_area .location {width: 100%;}
.footer_sns {position: absolute; left:0; top:14px;}
.footer_info {padding-top:120px}
#footer {height:380px; background:#222;}
}