@charset "utf-8";


*{font-family: 'Heebo','Noto Sans KR', sans-serif; margin:0; padding:0; list-style: none; text-decoration: none; color:#212121; font-size: 14px;}


/* 헤더 */
#header {position: absolute; left:0; top:0; width:100%; height:90px; background: transparent; z-index: 10;}
#header .m_btn {display: none;}
#header .top_logo {position: absolute; left:125px; top:30px; z-index: 3;}
#header .top_logo img {width:92px;}
#header .top_menu ul {position: absolute; top: 52px; right:95px; z-index: 3; line-height: 1.4;}
#header .top_menu ul:after {content: '';display: block; clear: both;}
#header .top_menu li {display: inline-block; margin-right:30px;cursor: pointer; float:left;}
#header .top_menu li img {width:100px;}
#header .top_menu li span { color: #fff; font-size: 16px; font-weight: bold; }
#header .top_menu li.m_contact span{color: #e7ef2d;}
#header .top_menu li.top {display: none;}
#header.banner--clone {position: fixed;z-index: 999;top: 0;left: 0;height: 65px;background: rgba(0,0,0,.85);-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
#header.banner--clone .top_logo {top:10px;}
#header.banner--clone .top_logo img {width:80px; margin-top: 5px;}
#header.banner--clone .top_menu ul {top:30px;}
#header.banner--clone .top_menu li.top {display: inline-block;}
.top_menu span {position: relative;display: block;cursor: pointer;}
.top_menu span:before, .top_menu span:after {content: '';position: absolute;width: 0%;height: 2px;top: 48%;margin-top: -0.5px;background: #fff;}
.top_menu span:before {left: -5px;}
.top_menu span:after {right: 5px;background: #fff;transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}
.top_menu span:hover:before {background: #fff;width: 115%;transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
.top_menu span:hover:after {background: transparent;width: 100%;transition: 0s;}
#header.banner--stick {-webkit-transform: translateY(0%);-ms-transform: translateY(0%);transform: translateY(0%);}


/* 메인 비쥬얼 */
.visual_wrap {overflow: hidden; height: 100vh;}
#visual_bg {background:rgba(36,36,36,.5) url(../img/visual_pattern.png); position: absolute; top:0; left:0; width: 100%;height:100vh; z-index: 1;}
#main_visual {-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -100;}


/* 메인 */
#main {position: relative; overflow: hidden;}
#main .main_txt_box {position: absolute; left:50%; margin-left:-400px; top:50%; margin-top: -120px; z-index: 3; width: 800px; height:247px; }
#main .main_txt01,#main .main_txt02,#main .main_txt03 {font-size: 75px; color:rgba(255,255,255,.9); font-weight: bold; line-height: 1; overflow: hidden; letter-spacing: 1px;}
#main .main_txt_box div span {font-size: 85px; color:rgba(255,255,255,.9); font-weight: bold; line-height: 1; overflow: hidden;}
#main .main_txt04:after {content: ''; display: block; width: 170px; height: 2px; background: #fff; position: absolute
; right:244px; bottom: 28px;}
#main .main_txt04 {font-size: 20px; color:#fff; position: absolute; right:-40px; bottom:5px; line-height: 1.4; font-weight: 300; letter-spacing: -1px;}
#main .main_txt04 span {display: block;}
#main .top_scroll {width:52px; height:55px; background: url(../img/top_scroll.png)no-repeat top center; position: absolute; bottom: 52px; left:50%; margin-left:-25px; z-index: 3; text-align: center;}
#main .top_scroll p {color:#fff; font-weight: 300; padding-top: 40px;}
#main .visual_slide {display: none; position: absolute; bottom: 52px; right:125px; z-index: 3;}
#main .visual_slide:after {content: ''; clear: both; display: block;}
#main .visual_slide span {display: block; float: left; width: 78px; height:4px; background: #788b98; margin-right:5px;}
#main .visual_slide span.on {background: #e7ef2d;}
#main .main_txt01 { opacity:0; margin-top:80px; max-width: 100%; overflow: hidden;}     
#main .main_txt02 { opacity:0; margin-top:80px; max-width: 100%; overflow: hidden;}     
#main .main_txt03 { opacity:0; margin-top:80px; max-width: 100%; overflow: hidden;}     


/* 라인 */
#lines { position: fixed; z-index: 9; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; display: none;}
#lines .line { position: absolute; top: 0; width: 1px; height: 100vh; background-color: rgba(204, 204, 204, 0.20); }
#lines .line1 { left: 70px;}
#lines .line2 { right: 70px;}


/* 컨테이너 */
#container {position: relative;}
#container .content {position: relative; width: 1250px; margin: 0 auto; padding-top: 150px;}
#container .about.content {padding-bottom: 150px; width:100%; background: #f8f8f8;}
#container .about.content .about_wrap {opacity: 0;}
#container .about.content .right_wrap { opacity: 0; margin-right:-100px;max-width:100%;}
#container .about.content .right_wrap img {box-shadow: 20px 20px 40px #e5e5e5}
#container .content:after {content: '';clear: both; display: block;}
#container .left_wrap {float:left;}
#container .right_wrap {float:right;}
#container .title {font-size: 34px; font-weight: bold; position: relative; margin-top: 30px; line-height: 1;}
#container .about .txt01 {font-size: 26px; font-weight: 400; line-height: 1.4; text-align:center; letter-spacing:-1px;}
#container .about .txt02 {font-size: 20px; margin-top: 30px; font-weight: 300; line-height: 1.5; text-align:center; letter-spacing:-1px;}
#container .about .history_box {width:1000px; height:700px; background:#f5f5f5; border: solid 1px #666666; position:fixed; top:50%; left:50%; margin:-350px 0 0 -500px; z-index:9999; display:none;} 
#container .about .history_box .history_title {background: #212121; padding:50px 110px 30px 85px; margin-bottom: 20px; position: relative; text-align: center;}
#container .about .history_box .history_title img {position: absolute; left:30px; top:15px; width:70px;}
#container .about .history_box h3 {font-size: 50px; padding-bottom: 3px; color:#fff;}
#container .about .history_box .history_title p {font-size: 15px; color:#fff;}
#container .about .history_box p {font-size: 15px; color:#565656;}
#container .about .history_box .txt_box {padding:0px 110px 0px 110px;}
#container .about .history_box .txt_box:after {content: ''; clear: both; display: block;}
#container .about .history_box .box1:after {position: absolute; top:275px; width: 1090px; height: 2px; background: #e7e7e7; z-index: 1;}
#container .about .history_box .box2:after {position: absolute; top:527px; left: 0; width: 857px; height: 2px; background: #e7e7e7; z-index: 1;}
#container .about .history_box ul {float:left; width: 25%; padding-top: 45px;}
#container .about .history_box li {line-height: 1.4; font-size: 15px; color:#5c5c5c; font-weight: 300;}
#container .about .history_box h4 {font-size: 26px; padding-bottom: 25px;  margin-bottom: 20px; position: relative;}
#container .about .history_box h4:after { content: ''; position: absolute; bottom: 0; left: 0; display: block; background: url(../img/history_line.png)no-repeat 0% 100%; width: 14px; height: 14px; z-index: 10;}
#container .about .title {margin-top: 30px; text-align: center; letter-spacing: -1px;}
#container .about .title:after {/* content: ''; width: 700px; height: 3px; background: #212121; position: absolute; left:-398px; bottom: -10px; */}
#container .about .history_btn {border:none; background: #212121; text-align: center; display: block; width:280px; margin:60px auto 0 auto; height:52px; border-radius: 30px;border:2px solid #212121;box-sizing: border-box; transition: all ease 0.5s;}
#container .about .history_btn:hover {background: #fff; border:2px solid #212121; box-sizing: border-box;}
#container .about .history_btn a {display: block; color:#fff; font-size: 20px; font-weight: 600; line-height: 50px; }
#container .about .history_btn a:hover {color:#212121;}
#container .about .history_box {display: none;}
#container .history {margin-top: 60px; text-align: center; }
#container .history img {padding-bottom: 7px; width: 45px;}
#container .history p {font-size: 18px; font-weight: 500; color: #fff;}
#container .history b {font-size: 50px; font-weight: bold; padding-top: 5px; display: inline-block; color:#fff;}
#container .history > div {text-align: center; display: inline-block; width: 350px;}
#container .services {width:100%; padding:150px 0px 0 0 ; box-sizing: border-box;}
#container .services .service_wrap {margin-top:100px; max-width: 100%; overflow: hidden;}         
#container .services .right_wrap {width:1480px;}
#container .services .txt01 {font-size: 20px; margin-top: 30px; font-weight: 300; line-height: 1.5; text-align:center; letter-spacing:-1px; font-weight: normal; margin-bottom: 80px; }
#container .services .title {text-align: center; margin-top: 30px;font-weight: bold; font-size: 46px; letter-spacing: 3px;}
#container .services .title:after {/* content: ''; width: 3px; height: 90px; background: #212121; position: absolute; left:50%; margin-left:-1px; top:-95px; */}
#container .services ul:after {content: '';clear: both; display: block;}
#container .services li {float:left; z-index: 1; width: 25%; position: relative;overflow: hidden;}
#container .services li {background: #000;}
#container .services li img {opacity: 0.95;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale3d(1.2,1.2,1);transform: scale3d(1,1,1);}
#container .services li figcaption {font-size: 0;}
#container .services li figcaption::before {position: absolute;top: 0;left: 0;width: 135%;height: 100%;background: rgba(255,255,255,0.5);content: '';-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);}
#container .services li h2 {text-align: left;}
#container .services li:hover img {opacity: 0.6;-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);}
#container .services li:hover figcaption::before {-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);}
#container .services li img {width: 100%;}
#container .services li a {position: absolute; width: 100%; height: 100%; text-align: left; top:0; left: 0; color:#fff; box-sizing: border-box; padding:40px;}
#container .services li h3 {color:#fff; margin:15% 0 30px 0; font-size: 30px; margin-left:20px;}
#container .services li b {color:#fff; font-size: 26px; font-weight: 500; display: block; margin:15px 0 30px 0; letter-spacing:-2px; position: relative; margin-left:10%;}
#container .services table td{color:#fff; text-shadow:0px 0px 1px #333; line-height: 1.6; font-size: 17px; font-weight: 300; letter-spacing:-1px; margin-left:10%; vertical-align: top;opacity: 0;}
#container .services table td span {display: block;}
#container .services table td.hyphen {width:15px;}
#container .services li p {color:#fff; text-shadow:0px 0px 1px #333; line-height: 1.5; font-size: 18px; font-weight: 300; letter-spacing:-1px;  margin-left:10%;}
#container .services li p span {color:#fff; line-height: 1.5; font-size: 18px; font-weight: 300; padding-right:15px;}
#container .services li:hover table td {opacity: 1;transition: all ease 1s;}
#container .services .gray_bg {/*display: block; position: absolute; width: 62%; height:400px; top:85px; left:0; background: #f9f9f9; z-index: -1;*/}
#container .portfolio {box-sizing: border-box; padding-top: 150px; padding-bottom: 150px; width: 100%; background: #f7f7f7;}
#container .portfolio .txt01  {font-size: 26px; font-weight: 400; line-height: 1.4; text-align:center; letter-spacing:-1px; }
#container .portfolio .txt02  {font-size: 20px; margin-top: 30px; font-weight: 300; line-height: 1.5; text-align:center; letter-spacing:-1px; }
#container .portfolio .title_wrap {padding-bottom: 80px; letter-spacing: 3px;}
#container .portfolio .title {text-align: center; font-size: 46px;}
#container .portfolio h3 {text-align: center; color: #fff; font-size: 20px; font-weight: 400; line-height: 1.5; }
#container .portfolio .gallery_wrap {width:100%; height:100%;}
#container .portfolio .gallery_wrap:after {content: ''; clear: both; display: block;}
#container .portfolio .gallery_wrap li {position: relative; float:left; width:33.32%; font-size: 0; overflow: hidden; z-index: 8; margin-top: -1px;}
#container .portfolio .gallery_wrap li a {display: block; width: 100%; height:100%; font-size: 0;}
#container .portfolio .gallery_wrap li img {width:100%;}
#container .portfolio .contact_btn { border:2px solid #fff; text-align: center; display: block; width:625px; margin:60px auto 0 auto; height:52px;}
#container .portfolio .contact_btn a {display: block; color:#fff; font-size: 20px; font-weight: 500; line-height: 52px;}
#container .contact {width:100%; background: #252525; padding-bottom: 285px; padding-top: 0;box-sizing: border-box;}
#container .contact .map_wrap {width:1250px; margin:0 auto; position: absolute; left:50%; margin-left:-625px; z-index: 1; bottom:100px;}
#container .contact .map_wrap:after {content: ''; clear: both; display: block;}
#container .contact .title {color:#fff; margin-top: 150px; padding-left:65px; font-size: 50px;}
#container .contact .title:after {/*content: ''; width: 3px; height: 120px; background: #fff; position: absolute; left:0; margin-left:-1px; top:-125px; left:65px;*/}
#container .contact .left_wrap {width:50%; height:383px; background:url(../img/contact_bg.jpg)no-repeat top center; background-attachment: fixed; }
#container .contact .left_wrap p {color:#fff; font-size: 20px; line-height: 1.3; margin:10px 0 0 65px;}
#container .contact .right_wrap {width:50%; height:383px; background: #fff; padding:43px 88px; box-sizing: border-box;}
#container .contact .contact_info li {padding:17px 0;}
#container .contact .contact_info li:after {content: ''; clear: both; display: block; }
#container .contact .contact_info .info_img {float:left; padding-right:20px; padding-top: 3px; display: none;}
#container .contact .contact_info .info_txt {float:left;}
#container .contact .contact_info .info_txt b {font-size: 20px; padding-bottom: 5px; display: block;}
#container .contact .contact_info .info_txt p {line-height: 1.4; font-weight: 400; font-size: 17px;}


/* 연혁 */
.timeline__wrap, .timeline__items {width:100% !important; height:450px !important;}
.timeline--horizontal {width:92%; margin:50px auto 0 auto; }
.timeline--horizontal .timeline__item {width: 268px !important; height:213px !important;}
.timeline-divider,.timeline-nav-button {top:213px !important;}
.timeline--horizontal .timeline__item--bottom {padding-top: 250px !important;}
.timeline--horizontal .timeline__item--bottom:after {top:85% !important;}
.timeline__content h2 {font-size: 30px !important; color:#212121;}
.timeline__content p {line-height: 1.5 !important; margin-bottom: 0 !important;}
.timeline-nav-button--prev {left:10px !important;}
.timeline-nav-button--next {right:10px !important;}
.timeline--horizontal .timeline-divider {left:50px !important; right:50px !important;}


/* 포트폴리오 */
#portfolio .effect-figure {background: #000;}
#portfolio .effect-figure a .site_img {opacity: 1;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}
#portfolio .effect-figure .site_logo {position: absolute; left: 0; top:0; z-index: 90;}
#portfolio .effect-figure figcaption::before {position: absolute;bottom: 0;left: 0;width: 100%;height: 10px;background: #fff;content: '';-webkit-transform: translate3d(0,10px,0);transform: translate3d(0,10px,0); display: none;}
#portfolio .effect-figure h2 {position: absolute;top:55%; left: 0;padding: 0;width: 100%;text-align: left;-webkit-transform: translate3d(0,-10px,0);transform: translate3d(0,-10px,0);color:#fff;font-size:27px;font-weight: bold; opacity: 0; text-align: center;}
#portfolio .effect-figure h2 span {font-weight: normal;color:#fff;font-size: 20px;}
#portfolio .effect-figure h2 i {font-style: normal;opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(0,-30px,0);transform: translate3d(0,-30px,0);color:#999;font-size:20px;font-weight: normal;padding-left:10px;}
#portfolio .effect-figure figcaption::before,
#portfolio .effect-figure h2 {-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;}
#portfolio .effect-figure figcaption {padding: 2em;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
#portfolio .effect-figure figcaption::before,
#portfolio .effect-figure figcaption::after {pointer-events: none;}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
#portfolio .effect-figure figcaption > a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;}
#portfolio .effect-figure .m_touch {display: none; position: absolute; bottom: 20px; right:20px; width:30px;}

@media screen and (min-width: 999px){
#portfolio .effect-figure:hover a .site_img {opacity: 0.4;-webkit-transition: opacity 0.5s, -webkit-transform 1s;transition: opacity 0.5s, transform 1s;-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);}
#portfolio .effect-figure:hover figcaption::before,
#portfolio .effect-figure:hover h2,
#portfolio .effect-figure:hover h2 i {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 1;}
#portfolio .effect-figure:hover a .site_img {-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);}
}

/* 팝업 */
#popup_wrap {width:1350px; height:745px; background:#fff; border: solid 1px #666666; position:fixed; top:50%; left:50%; margin:-372px 0 0 -675px; z-index:9999; display:none;} 
#popup_wrap > div {clear: both; overflow: hidden;}
#popup_wrap .right_wrap {width:350px; padding:80px 35px 60px 35px; box-sizing: border-box; height: 650px;}
#popup_wrap .right_wrap h3 {font-size: 30px; position: relative; border-bottom: 1px solid #000; color:#212121; font-weight: bold; text-align: left;}
#popup_wrap .right_wrap h3:after {content: ''; width:180px; height:1px; background: #000; position: absolute;left:-30px; bottom: -5px; display: none;}
#popup_wrap .right_wrap .site_info {margin-top: 50px;}
#popup_wrap .right_wrap .site_info > div {line-height: 1.2; padding-bottom: 13px; position: relative;}
#popup_wrap .right_wrap .site_info > div:after {content: ''; clear: both; display: block;}
#popup_wrap .right_wrap .site_info div b {font-size: 18px; float:left; width:120px;}
#popup_wrap .right_wrap .site_info div p {font-size: 15px; float:left; color:#616161;}
#popup_wrap .right_wrap .site_description, #popup_wrap .right_wrap .site_development {margin-top: 35px;}
#popup_wrap .right_wrap .site_description p, #popup_wrap .right_wrap .site_development p {font-size: 15px; color:#616161; line-height: 1.4;}
#popup_wrap .right_wrap .site_description p span {color:#616161; width:15px; display: inline-block;}
#popup_wrap .right_wrap .site_description b, #popup_wrap .right_wrap .site_development b {font-size: 18px; padding-bottom: 10px; display: block; margin-top: 30px;}
#popup_wrap .right_wrap .site_description table td {font-size: 15px; color:#616161; line-height: 1.4;}
#popup_wrap .right_wrap .site_description table td.hyphen {display: inline-block; width:10px;}
#popup_wrap .right_wrap .site_description p span {color:#616161; width:15px; display: inline-block;}
#popup_wrap .link {border:none; background: #212121; color:#fff; font-size: 17px; font-weight: bold; text-align: center; display: block; width:240px; height:48px; position: absolute; right:30px; bottom:60px; cursor: pointer;}
#popup_wrap > div.popup-cont {position: absolute; right:20px; top:20px; overflow: hidden;}
#mask {width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.7) repeat; top:0; left:0; z-index:999; display:none;} 
#popup_close {width: 27px; height:27px; background: url(../img/close.png); text-indent: -99999px; border:none; cursor: pointer;}
#about #popup_close {width: 27px; height:27px; background: url(../img/close_w.png); text-indent: -99999px; border:none;}
#count {background:url(../img/count_bg.jpg)no-repeat; background-attachment: fixed; background-position: center; width:100%; height:300px; box-sizing: border-box; padding:30px 0; }


/* slider */
.bx-wrapper {max-width:100% !important;}


/* 푸터 */
#footer {padding:20px 105px 25px 125px; background: #212121;}
#footer .ft_wrap:after {content: ''; clear: both; display: block;}
#footer .ft_wrap img {float:left; width:80px; padding-top: 3px;}
#footer .ft_wrap .ft_txt {float:left; margin-top: 10px; margin-left:40px; width:520px;}
#footer .ft_wrap .ft_txt p {font-size: 14px; color:#999999; line-height: 1.3; display: inline-block;}
#footer .ft_wrap .ft_txt b {font-size: 14px; color:#999999; padding:0 10px 0 30px; font-weight: 500; display: inline-block;}
#footer .ft_wrap .ft_txt div {display: inline-block;}
#footer .ft_wrap .copyrights {float:right; color:#999999; margin-top:30px;}


@media screen and (min-width: 1281px) and (max-width: 1620px){
	#container .services li a {padding:25px;}
	#container .services li h3 {font-size: 25px; margin-left:10px;}
	#container .services table td {font-size: 14px;}
	#container .services table td.hyphen {width:8px;}
}

/* media 1280 */
@media screen and (min-width: 1000px) and (max-width: 1280px){
	#header .top_logo {left:80px;}
	#header .top_menu ul {right:55px;}
	#main .visual_slide {right:80px;}
	#main .main_txt_box {height:230px; margin-top: -115px; width:660px; margin-left:-330px;}
	#main .main_txt01, #main .main_txt02, #main .main_txt03 {font-size: 60px;}
	#main .main_txt_box div span {font-size: 75px;}
	#main .main_txt04 {font-size: 18px; bottom: -14px;}
	#main .main_txt04:after {width:150px; right:215px; bottom: 26px;}
	#container .title {font-size: 26px;}
	#container .content {padding-top: 120px;}
	#container .about.content {padding-bottom: 120px;}
	#container .about .title {margin-top: 25px;}
	#container .about .txt01 {font-size: 24px;}
	#container .about .txt02 {margin-top: 25px; font-size: 18px;}
	#container .about .history_btn {margin-top: 40px; width: 250px;}
	#count {height:270px; padding:20px 0;}
	#container .history b {font-size: 46px;}
	#container .services .title {margin-top: 25px; font-size: 42px;}
	#container .services .txt01 {font-size: 18px; margin-top: 25px; margin-bottom: 60px;}
	#container .services li a {padding:20px;}
	#container .services li h3 {font-size: 23px; margin-left:13px; margin-bottom: 20px;}
	#container .services li b {font-size: 22px;}
	#container .services li p {font-size: 16px; line-height: 1.4;}
	#container .services table td {font-size: 13px; letter-spacing: -1px; line-height: 1.5;}
	#container .services table td.hyphen {width:8px;}
	#container .portfolio .title {font-size: 42px; margin-top: 25px;}
	#portfolio .effect-figure h2 span {font-size: 15px;}
	#container .contact {padding-top: 0;}
	#portfolio .effect-figure h2 {font-size: 20px; line-height: 1.3;}
	#portfolio .effect-figure h2 i {font-size: 16px;}
	#container .contact .map_wrap {width:1000px; margin-left: -500px; bottom: 80px;}
	#container .contact .title {font-size: 46px;}
	#container .contact .left_wrap {height:380px; }
	#container .contact .right_wrap {height:380px; padding:50px 52px;}
	#popup_wrap .right_wrap .site_info > div {padding-bottom: 10px;}
	#popup_wrap .right_wrap .site_info {margin-top: 30px;}
	#container .contact .contact_info .info_txt b {font-size: 18px;}
	#container .contact .contact_info .info_txt p {font-size: 16px;}
	#map_view {height:470px !important;}
	#lines .line1 { left: 50px;}
	#lines .line2 { right: 50px;}
	#footer {padding:20px 80px 25px 80px;}
	#popup_wrap {width: 1150px; height:596px; margin-left: -575px; margin-top: -298px;}
	#popup_wrap .portfolio_img img {width:800px;}
	#popup_wrap .right_wrap {padding:50px 35px 50px 35px; height: auto;}
	#popup_wrap .right_wrap h3 {font-size: 27px; padding-bottom: 0;}
	#popup_wrap .right_wrap h3 img {height:30px;}
	#popup_wrap .right_wrap .site_info div b, #popup_wrap .right_wrap .site_description b, #popup_wrap .right_wrap .site_development b {font-size: 16px;}
	#popup_wrap .right_wrap .site_info div p , #popup_wrap .right_wrap .site_description p, #popup_wrap .right_wrap .site_development p {font-size: 13px;}
}


@media screen and (min-width: 740px) and (max-width: 999px){
	#lines {display: none;}
	#main .main_txt_box {width: 600px; text-align: center; margin-left:-300px;}
	#main .main_txt01, #main .main_txt02, #main .main_txt03,#main .main_txt_box div span {font-size: 65px;}
	#main .main_txt_box div span {font-size: 75px;}
	#main .main_txt04 {width: 600px; margin-left:-300px; right:0; bottom: -25px;}
	#main .main_txt04:after {display: none;}
	#main .main_txt04 span {display: inline-block;}
	#main .visual_slide {right:50px;}
	#header.banner--clone {height:75px;}
	#header.banner--clone .top_logo img {margin-top: 7px;}
	#header .top_logo {top:37px;left:50px;}
	#header .top_menu li {margin-right:24px;}
	#header .top_menu li span {font-size: 17px;}
	#header .top_menu ul {right:20px;}
	#m_menu.open ul li:last-of-type span {color:#e7ef2d;}
	#container .about .txt01 {font-size: 24px;}
	#container .about .txt02 {font-size: 18px;}
	#container .about .title {font-size: 26px;}
	#container .services .txt01 {font-size: 20px;}
	#container .services li a {padding-right:10%; box-sizing: border-box; padding:30px;}
	#container .services table td {font-size: 17px; line-height: 1.5;}
	#container .about.content {padding-bottom: 120px;}
	#container .history > div {border:none; width:33%;}
	#container .history > div:last-of-type {border:none;}
	#container .about .history_box h3 {font-size: 44px;}
	#container .services li h3 {font-size: 28px;}
	#container .services li b {font-size: 26px;}
	#container .services .title {margin-top: 15px; font-size: 40px;}
	#container .portfolio .title {margin-top: 15px; font-size: 40px;}
	#container .portfolio .title_wrap {padding-bottom: 60px;}
	#container .contact .left_wrap { background-attachment: inherit; height:355px;}
	#container .contact .right_wrap {height:355px;}
	#container .contact .map_wrap {width:100%; margin-left:0; position: relative; left: 0; bottom:0;}
	#container .contact {padding-bottom: 0;}
	#map_view {height:400px !important;}
	#container .about .history_box {width:740px; margin-left:-370px;}
	#container .portfolio .gallery_wrap li {width:50%;}
	#popup_wrap {width:720px; border:none; margin:-420px 0 0 -360px; height: auto; height:915px;}
	#popup_wrap .left_wrap img {width:100%;}
	#popup_wrap .right_wrap {width:720px; padding:30px; height: 350px; background: #fff;}
	#popup_wrap .right_wrap:after {content: ''; display: block; clear: both; }
	#popup_wrap .right_wrap .site_info {float:left; width:300px; margin-top: 30px;}
	#popup_wrap .right_wrap .site_description {float:left; width:350px;margin-top: 0px;}
	#popup_wrap .right_wrap .site_info div b {width: 110px;}
	#popup_wrap .right_wrap .site_info > div {padding-bottom: 10px;}
	#popup_wrap .right_wrap h3 {padding-bottom: 0;}
	#popup_wrap .right_wrap h3 img {height:28px;}
	#container .services table td.hyphen {width:10px;}
	#footer {padding:20px 50px 25px 50px;}
	#footer .ft_wrap .ftda_txt {margin-left:0;}
	#container .contact .right_wrap {padding:34px 42px;}
	#container .history b {font-size: 44px;}
	#container .history p {font-size: 16px;}
	#container .services li {width: 50%;}
	#container .contact .title {font-size: 40px; padding-left: 45px;}
	#portfolio .effect-figure h2 {font-size: 22px;}
	#portfolio .effect-figure h2 i {display: none;}
	#container .contact .left_wrap p {margin-left:45px; margin-right:42px;}
	#footer .ft_wrap .ft_txt {margin-left:0;}
	#container .services table td {opacity: 1;}
	#footer .ft_wrap .copyrights {width:100%; text-align: center;}
	#container .services li img{opacity: 0.6;}
	#container .contact .contact_info .info_txt p {font-size: 16px;}
	#container .contact .contact_info .info_txt b {font-size: 18px;}
	#popup_wrap .right_wrap .site_description p, #popup_wrap .right_wrap .site_development p {font-size: 14px;}
	#container #portfolio .effect-figure .m_touch {display: block; position: absolute; bottom: 20px; right:20px; width:40px;}
}
@media screen and (max-width: 739px){
	#lines {display: none;}
	#count {background-position: 65% 70%; background-attachment: inherit;}
	#header .top_logo {top:15px; left:20px;}
	#header .top_logo img {width:80px}
	#main .top_scroll {background: url(../img/top_scroll_m.png)no-repeat top center; background-size: 17px 26px;}
	#main .top_scroll p {font-size: 12px; padding-top: 30px;}
	#main .main_txt_box {width: 330px; text-align: center; margin-left:-165px; height:120px; margin-top: -60px; top: 43%;}
	#main .main_txt01, #main .main_txt02, #main .main_txt03,#main .main_txt_box div span {font-size: 38px; line-height: 1;}
	#main .main_txt_box div span {font-size: 47px;}
	#m_menu.open ul li:last-of-type span {color:#e7ef2d;}
	#container .services .title {margin-top: 0; font-size: 24px;}
	#container .services .txt01 {font-size: 14px; margin-top: 20px; margin-bottom: 40px; padding:0 20px;}
	#container .services .txt01 span {display: block;}
	#container .content {padding-top: 90px;}
	#container .history > div {width: 32%;}
	#container .history b {font-size: 26px;}
	#container .history p {font-size: 12px;}
	#count {height: 240px; padding:15px;}
	#main .main_txt04 {width: 330px; margin-left:-160px; right:0; top: 160px; font-size: 16px;}
	#main .main_txt04:after {display: none;}
	#main .main_txt04 span {display: inline-block;}
	#header.banner--clone {height:60px;}
	#header.banner--clone .top_logo {left:20px; top:10px;}
	#header.banner--clone .top_logo img {margin-top: 1px; width:80px;}
	#header.banner--clone .m_btn {top:0;}
	#header .top_menu ul {display: none;}
	#header.banner--clone .top_menu ul {display: none;}
	#container .about .txt01 {font-size: 16px;}
	#container .about.content {padding-left:20px; padding-right:20px; padding-bottom: 90px; box-sizing: border-box;}
	#container .title {font-size: 20px; line-height: 1.4; margin-top: 20px;}
	#container .about .txt02 {font-size: 13px; margin-top: 20px;}
	#container .about .txt02 span {display: block;}
	#container .about .title {margin-top: 20px;}
	#container .about .history_btn {width:200px; margin:30px auto 0 auto; height:38px; }
	#container .about .history_btn a {font-size: 17px; line-height: 36px;}
	#main .visual_slide {bottom: 10px; right:20px; display: none;}
	#main .visual_slide span {height:3px; width:38px; }
	#container .services .service_wrap {margin-top: 40px;}
	#container .services li {width: 100%;}
	#container .services li img {margin-top: -80px;}
	#container .services li h3 {font-size: 22px; margin:10% 0 20px 13px;}
	#container .services li b {font-size: 20px; margin-top: 10px; margin-bottom: 20px;}
	#container .services li p {font-size: 14px; line-height: 1.4; }
	#container .services li a {padding:20px;}
	#container .services table td {font-size: 13px; line-height: 1.5; }
	#container .portfolio {padding-bottom: 50px;}
	#container .portfolio .title {margin-top: 0; font-size: 24px;}
	#container .portfolio .title_wrap {padding-bottom: 40px;}
	#container .portfolio .gallery_wrap li {width: 100%;}
	#container #portfolio .effect-figure .m_touch {display: block; position: absolute; bottom: 20px; right:20px; width:30px;}
	#portfolio .effect-figure h2 span {font-size: 13px;}
	#portfolio .effect-figure h2 {font-size: 20px;}
	#portfolio .effect-figure h2 i {display: none;}
	#popup_wrap {width:94%; border:none; margin:-285px 0 0 -47%; height: auto;}
	#popup_wrap .left_wrap img {width:100%;}
	#popup_wrap .right_wrap h3 {font-size: 20px; padding-bottom: 0px;}
	#popup_wrap .right_wrap h3 img {height:20px;}
	#popup_wrap.pop_wrap03 .right_wrap h3 img {height:16px;}
	#popup_wrap.pop_wrap04 .right_wrap h3 img {height:16px;}
	#popup_wrap.pop_wrap05 .right_wrap h3 img {height:26px;}
	#popup_wrap.pop_wrap06 .right_wrap h3 img {height:17px;}
	#popup_wrap .right_wrap {width:100%; padding:20px 30px; height: 315px; background: #fff;}
	#popup_wrap .right_wrap:after {content: ''; display: block; clear: both; }
	#popup_wrap .right_wrap .site_info {margin-top: 30px;}
	#popup_wrap .right_wrap .site_description {margin-top: 30px; padding-bottom: 30px;}
	#popup_wrap .right_wrap .site_info div b {width: 110px; font-size: 15px;}
	#popup_wrap .right_wrap .site_info > div {padding-bottom: 5px;}
	#popup_wrap .right_wrap .site_description b {font-size: 15px;}
	#popup_wrap .right_wrap .site_description p {font-size: 13px; line-height: 1.4; }
	#popup_wrap .right_wrap .site_description table td {font-size: 13px; line-height: 1.4; }
	#popup_wrap .right_wrap .site_info div p {font-size: 14px;}
	#popup_wrap .right_wrap .site_description b, #popup_wrap .right_wrap .site_development b {padding-bottom: 7px;}
	#popup_close {width:20px; height:20px; background-size: 20px;}
	#container .contact {padding-top: 0; padding-bottom: 0;}
	#container .contact .title {margin-top: 0; font-size: 32px; padding-left:25px; padding-top: 120px;}
	#container .contact .map_wrap {position: relative; bottom:0;  margin-left: 0; width:100%; left: 0;}
	#container .contact .left_wrap ,#container .contact .right_wrap  {float: none; width:100%; height:315px; background-attachment: inherit;}
	#container .contact .right_wrap {padding:24px 25px;}
	#container .contact .left_wrap { background-size: 246%;}
	#container .contact .left_wrap p {font-size: 15px; margin-left:25px; margin-top: 5px;}
	#container .contact .contact_info .info_txt b {font-size: 16px;}
	#container .contact .contact_info .info_txt p {font-size: 14px;}
	#map_view {height:250px !important;}
	#footer {padding:20px;}
	#footer .ft_wrap {text-align: center;}
	#footer .ft_wrap img {width:63px; float:none; padding-top: 0;}
	#footer .ft_wrap .ft_txt {margin-left:0; margin-top: 15px; width:100%; text-align: center;}
	#footer .ft_wrap .ft_txt p {font-size: 12px; }
	#footer .ft_wrap .ft_txt b {font-size: 12px; padding:0 5px 0 10px;}
	#footer .ft_wrap .ft_txt b:first-of-type {padding-left:0;}
	#footer .ft_wrap .ft_txt .br {display: block;}
	#footer .ft_wrap .ft_txt div {width:100%;}
	#footer .ft_wrap .copyrights {font-size: 12px; margin-top: 20px; width:100%; text-align: center;}
	#container .about .history_box {width:94%; height:96%; top:0; margin:10px 0 0 -47%; overflow: hidden; z-index:9999;}
	#container .about .history_box .history_title {padding:30px 10px 20px 10px; margin-bottom: 20px; }
	#container .about .history_box h3 {font-size: 24px; padding-bottom: 10px;}
	#container .about .history_box .history_title p {font-size: 12px;}
	#about #popup_close {width:20px; height:20px; background-size: 20px;}
	#container .about .timeline--mobile .timeline__item {width:90%;}
	#container .about .timeline__content {padding:20px;}
	#container .about .timeline__content h2 {font-size: 20px !important;}
	#container .about .history_box p {font-size: 12px;}
	#container .about .timeline__wrap {overflow: visible; overflow-y: scroll; }
	#container .about .timeline--mobile:before {left:20px !important;}
	#container .about .timeline--mobile {padding-left:10px; height:100%;}
	#container .about .timeline--mobile .timeline__item:last-of-type {display: none;}
	#container .services table td {opacity: 1; font-size: 14px; line-height: 1.4;}
	#container .services table td.hyphen {width:8px;}
	#container .services table td span {display: block;}
	#container .services li img{opacity: 0.6;}
	#header .m_btn {display: block; top:10px;}
	#popup_wrap > div {overflow: auto;}
	.timeline__wrap, .timeline__items {height:80% !important;}
	#container .history img {padding-bottom: 7px; width: 34px;}
}
	@media screen and (max-width: 330px){
	#main .main_txt01, #main .main_txt02, #main .main_txt03,#main .main_txt_box div span {font-size: 32px; line-height: 1.2;}
	#main .main_txt04 {font-size: 15px; top:130px;}
	#main .main_txt_box {top:47%;}
	#portfolio .effect-figure:hover a .site_img {opacity: 1;-webkit-transition: none; transition: opacity 1;-webkit-transform: none;transform:none;}
}


/* 모바일 메뉴 */
.m_btn { width: 60px; height: 60px; position: absolute; right: 0px; top: 0px; z-index: 1;cursor: pointer; padding-top: 17px; box-sizing: border-box;}
.m_btn span {display: block; width:23px; height:2px; border-radius: 3px; margin:4px auto; background: #fff;}
.m_close  {display: inline-block;position: absolute;right:9px; top:26px;margin: 0 20px 0 7px;padding: 0;width: 2px;height: 23px;background: #fff;transform: rotate(45deg);border-radius:2px;}
.m_close:before {display: block;content: "";position: absolute;top: 50%;left: -10px;width: 23px;height: 2px;margin-top: -2px;background: #fff;border-radius:2px;}
#header #m_menu {text-align: center; display: none; }
#header #m_menu.open {display: block;}
#header #m_menu .m_wrap {position: absolute; top:50%; margin-top: -174px; left:50%; margin-left:-102px;}
#header #m_menu .m_wrap li {height:55px;}
#header #m_menu .m_wrap li img {width:170px; padding-top: 5px;}
#header.banner--clone.banner--stick.off{z-index: 10;}
#header.banner--cloneoff #m_menu {display: none;}
#header.banner--clone #m_menu {display: none;}
/* IE9 */
#header.banner--clone #m_menu { display: block\9; }
/* IE10 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#header.banner--clone #m_menu {display: block;}
}
#m_menu ul li span {color:#fff; font-size: 38px; font-weight: bold; padding:5px 0; display: block; opacity: 0;}
#header .m_page_cover.open .m_close {display: block; top: 26px;}
#m_menu.open ul li span {opacity: 1;}
#m_menu.open ul li.m_contact span{color:#d4de00}
#m_menu.open {opacity: 1;width: 100%; z-index: 99999;} 
.m_page_cover.open { display: block; } 
.m_page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0,0,0,1); z-index: 4; display: none; }