@charset "utf-8";

#wrapper { }
.sticky { }

header { }
#header { position:fixed; width:100%; left:0; right:0; top:0; z-index:1000; }
#header, #logo, #logo a, #header ul, #header li a, #header li a, #topmenu, #topmenu a::before {
	transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-transition: all 0.35s cubic-bezier(0.215, 0.610, 0.355, 1.000); 
}

#logo { position:absolute; top:22px; left:26px; }
#logo a { display:block; width:80px; height:43px; background:url(../images/logo.png) left top no-repeat; }

/* GNB */
#gnbopen { }
#gnb a span,#gnb .inbox,#gnb li,#gnbopen a,#gnbopen span,#form-layer-wrap .inbox {
	transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-webkit-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-moz-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-o-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-ms-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
}

#gnbopen a { cursor:pointer; height:48px; position:fixed; right:32px; text-indent:-999em; top:17px; width:48px; z-index:48; }
#gnbopen span { background:#fff; height:2px; right:8px; position:absolute; top:17px; width:30px; }
#gnbopen span + span { top:27px; width:38px; }
#gnbopen span + span + span { top:37px; width:30px; }
#gnbopen a.on span:first-child {
	transform:translate3d(0, 6px, 0) rotate(225deg);
	-webkit-transform:translate3d(0, 6px, 0) rotate(225deg);
	-moz-transform:translate3d(0, 6px, 0) rotate(225deg);
	-o-transform:translate3d(0, 6px, 0) rotate(225deg);
	-ms-transform:translate(0, 6px) rotate(45deg);
}
#gnbopen a.on span + span { top:23px; opacity:0;
	transform:translate3d(0, 150px, 0) rotate(-720deg);
	-webkit-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-moz-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-o-transform:translate3d(0, 150px, 0) rotate(-720deg);
}
#gnbopen a.on span + span + span { top:29px; opacity:1;
	transform:translate3d(0, -6px, 0) rotate(-225deg);
	-webkit-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-moz-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-o-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-ms-transform:translate(0, -6px) rotate(-45deg);
}


/* GNB - nav */
#gnb { position:fixed; left:-100%; top:0; width:100%; height:100%; z-index:30; visibility:hidden; }
#gnb .back { position:absolute; right:-100%; top:0; width:100%; height:100%; background:#000; opacity:0; }
#gnb .back:before { position:absolute; right:0; top:0; width:100%; height:100%; content:''; background:#000; display:block; opacity:0.4; z-index:1; }
#gnb .inbox { position:absolute; right:-100%; top:0; width:260px; height:100%; margin-right:-260px; background:rgba(226,31,47,0.9); z-index:3; overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#gnb nav { margin:84px 0; }
#gnb a { display:block; padding-left:48px; font-size:16px; color:#878787; line-height:42px; color:#fff; text-align:left; }
#gnb li { 
	transform:translate3d(250px, 0px, 0px);
	-webkit-transform:translate3d(250px, 0px, 0px);
	-moz-transform:translate3d(250px, 0px, 0px);
	-o-transform:translate3d(250px, 0px, 0px);
	-ms-transform:translate3d(250px, 0px, 0px);
}
#gnb dl { display:none; margin:0 auto 10px; }
#gnb dt { font-size:0; line-height:0; visibility:hidden; }
#gnb dd a { color:#019ba8; font-size:18px; line-height:37px; text-align:center; }
#gnb .on > a { text-decoration:underline; }
#gnb .m1 {
	transition-delay:0.035s;
	-webkit-transition-delay:0.035s;
	-moz-transition-delay:0.035s;
	-o-transition-delay:0.035s;
	-ms-transition-delay:0.035s;
}
#gnb .m2 {
	transition-delay:0.07s;
	-webkit-transition-delay:0.07s;
	-moz-transition-delay:0.07s;
	-o-transition-delay:0.07s;
	-ms-transition-delay:0.07s;
}
#gnb .m3{
	transition-delay:0.14s;
	-webkit-transition-delay:0.14s;
	-moz-transition-delay:0.14s;
	-o-transition-delay:0.14s;
	-ms-transition-delay:0.14s;
}
#gnb .m4 {
	transition-delay:0.175s;
	-webkit-transition-delay:0.175s;
	-moz-transition-delay:0.175s;
	-o-transition-delay:0.175s;
	-ms-transition-delay:0.175s;
}
#gnb .m5{
	transition-delay:0.21s;
	-webkit-transition-delay:0.21s;
	-moz-transition-delay:0.21s;
	-o-transition-delay:0.21s;
	-ms-transition-delay:0.21s;
}
#gnb .m6 {
	transition-delay:0.245s;
	-webkit-transition-delay:0.245s;
	-moz-transition-delay:0.245s;
	-o-transition-delay:0.245s;
	-ms-transition-delay:0.245s;
}
#gnb .m7 {
	transition-delay:0.28s;
	-webkit-transition-delay:0.28s;
	-moz-transition-delay:0.28s;
	-o-transition-delay:0.28s;
	-ms-transition-delay:0.28s;
}
#gnb .m8 {
	transition-delay:0.315s;
	-webkit-transition-delay:0.315s;
	-moz-transition-delay:0.315s;
	-o-transition-delay:0.315s;
	-ms-transition-delay:0.315s;
}
#gnb .m9 {
	transition-delay:0.350s;
	-webkit-transition-delay:0.350s;
	-moz-transition-delay:0.350s;
	-o-transition-delay:0.350s;
	-ms-transition-delay:0.350s;
}
#gnb .m10 {
	transition-delay:0.385s;
	-webkit-transition-delay:0.385s;
	-moz-transition-delay:0.385s;
	-o-transition-delay:0.385s;
	-ms-transition-delay:0.385s;
}
#gnb .inquiry li {
	transition-delay:0.42s;
	-webkit-transition-delay:0.42s;
	-moz-transition-delay:0.42s;
	-o-transition-delay:0.42s;
	-ms-transition-delay:0.42s;
}
#gnb.show { visibility:visible; }
#gnb.show .back { opacity:0.7; }
#gnb.show .inbox { margin-right:0; }
#gnb.show .inbox,#gnb.show li {
	transform:translate3d(0, 0, 0);
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	-o-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
}
#gnb .inquiry { position:absolute; bottom:0; left:0; right:0; background:rgba(226,31,47,0.9); }
#gnb .inquiry a { line-height:78px; }


#topmenu { display:none; position:absolute; top:35px; right:98px; }
#topmenu ul.menu { position:relative; font-size:0; letter-spacing:0; word-spacing:0; box-sizing:border-box; vertical-align:baseline; }
#topmenu ul.menu li { display:inline-block; margin:0 10px; }
#topmenu ul.menu li a { font-size:14px; }
#topmenu ul.menu li a:hover { color:#ff2739; }




#container { }

/* main */

/* animation */
.btn-detail, .swiper-slide-active .section .bg {
	transition:all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-webkit-transition:all 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-moz-transition:all 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-o-transition:all 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-ms-transition:all 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
}
.tit-section, .btn-detail, .section .text, .section .list { opacity:0;
	-webkit-transform:translate3d(0,50px,0);
	-moz-transform:translate3d(0,50px,0);
	-o-transform:translate3d(0,50px,0);
	-ms-transform:translate3d(0,50px,0);
	transform:translate3d(0,50px,0);
}
.tit-section { opacity:0;
	transition-delay:0.6s;
	-webkit-transition-delay:0.6s;
	-moz-transition-delay:0.6s;
	-o-transition-delay:0.6s;
	-ms-transition-delay:0.6s;
}
.swiper-slide-active .tit-section, .swiper-slide-active .btn-detail, .swiper-slide-active .section .text, .swiper-slide-active .section .list { opacity:1;
	transform:translate3d(0, 0, 0);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
}
.swiper-slide-active .section .text {
	transition-delay:0.8s;
	-webkit-transition-delay:0.8s;
	-moz-transition-delay:0.8s;
	-o-transition-delay:0.8s;
	-ms-transition-delay:0.8s;
}
.swiper-slide-active .section .list {
	transition-delay:1s;
	-webkit-transition-delay:1s;
	-moz-transition-delay:1s;
	-o-transition-delay:1s;
	-ms-transition-delay:1s;
}
.swiper-slide-active .btn-detail { visibility:visible;
	transition-delay:0.8s;
	-webkit-transition-delay:0.8s;
	-moz-transition-delay:0.8s;
	-o-transition-delay:0.8s;
	-ms-transition-delay:0.8s;
}

.btn-detail:hover { opacity:1; background:rgba(226,31,47,0.6);
		transition-delay:0s !important;
		-webkit-transition-delay:0s !important;
		-moz-transition-delay:0s !important;
		-o-transition-delay:0s !important;
		-ms-transition-delay:0s !important;
	}

.swiper-slide-active .btn-detail:hover {
	transition-delay:0s;
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
}
.swiper-slide-active .section.over .bg {
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
}
.swiper-slide-active .section.over:before { opacity:0.5; background:rgba(0,0,0,1); }

.swiper-slide {text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;}
.swiper-slide .inbox { display:table; width:100%; height:100%; background:#000; }
.swiper-slide .inbox .section { display:table-cell; width:100%; height:100%; vertical-align:middle; box-sizing:border-box; overflow:hidden; }
.main-bg .section:before, .main-bg .section:after{ content:'';position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background:#000;opacity:0.2;z-index:1;}
.main-bg { position:absolute; top:0; left:0; width:100%; height:100%; }
.main-bg .swiper-container { width:100%; height:100%; margin-left:auto; margin-right:auto; }
.main-bg .swiper-slide .bg { position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; background-size:cover; background-position:center; }
.main-bg .swiper-slide .bg:before { content:''; position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); overflow:hidden; }

.tit-section { font-family:'Montserrat', sans-serif; font-size:42px; letter-spacing:0.1em; margin:30px 0 28px; opacity:0; position:relative; color:#fff; text-shadow:0 3px 5px rgba(0, 0, 0, 0.25); z-index:50; }
.section-1 .tit-section { width:768px; margin:0 auto; }
.section-1 .tit-section img { width:100%; max-width:100%; }
.section-2 .tit-section { font-size:67px; }
.section-2 .text { font-family:'Montserrat', sans-serif; font-size:28px !important; }
.tit-section-sub span { display:block; }
.section .text { position:relative; margin:0 28px 56px; color:#fff; font-size:18px; line-height:120%; letter-spacing:-0.065em; font-weight:normal; text-shadow:0 3px 5px rgba(0, 0, 0, 0.25); z-index:50; }
.btn-godown { display:block; position:absolute; bottom:100px; left:50%; width:46px; height:26px; margin-left:-23px; background:url("../images/btn_godown.png") center center no-repeat; background-size:100% 100%; z-index:50; text-indent:-9999em; }
.swiper-slide-active .btn-godown {
	animation: verical-slow 1.2s linear 0s infinite normal none;
	-webkit-animation: verical-slow 1.2s linear 0s infinite normal none;
	-moz-animation: verical-slow 1.2s linear 0s infinite normal none;
	-o-animation: verical-slow 1.2s linear 0s infinite normal none;
	-ms-animation: verical-slow 1.2s linear 0s infinite normal none;
}
.btn-detail{display:inline-block;position:relative;width:192px;height:60px;margin:0 10px 10px;border:1px solid rgba(255,255,255,0.4);color:#fff;font-size:16px;letter-spacing:1px;line-height:58px;text-align:center;box-sizing:border-box;visibility:hidden;z-index:50;}

@-webkit-keyframes verical-slow {
  0%{-webkit-transform: translate3d(0, 0, 0);}
  40%{-webkit-transform: translate3d(0, 16px, 0);}
  100%{-webkit-transform: translate3d(0, 0, 0);}
}
@-moz-keyframes verical-slow {
  0%{-moz-transform: translate3d(0, 0, 0);}
  40%{-moz-transform: translate3d(0, 16px, 0);}
  100%{-moz-transform: translate3d(0, 0, 0);}
}
@-ms-keyframes verical-slow {
  0%{-ms-transform: translate3d(0, 0, 0);}
  40%{-ms-transform: translate3d(0, 16px, 0);}
  100%{-ms-transform: translate3d(0, 0, 0);}
}
@-o-keyframes verical-slow {
  0%{-o-transform: translate3d(0, 0, 0);}
  40%{-o-transform: translate3d(0, 16px, 0);}
  100%{-o-transform: translate3d(0, 0, 0);}
}
@keyframes verical-slow {
  0%{transform: translate3d(0, 0, 0);}
  40%{transform: translate3d(0, 16px, 0);}
  100%{transform: translate3d(0, 0, 0);}
}

/* sub 공통 */
.section-top { position:relative; height:527px; width:100%; background:#000; }
.section-top .swiper-tit { position:relative; display:table; width:100%; z-index:2; }
.section-top .tit-wrap { position:relative; display:table-cell; height:527px; box-sizing:border-box; vertical-align:middle; text-align:center; }
.section-top .tit-wrap h2 { font-family:'Montserrat', sans-serif; font-size:46px; color:#fff; }
.section-top .tit-wrap p { font-size:13px; color:#fff; padding:0 6%; }
.section-top .tit-wrap p strong { color:#ff2739; } 
.section-top .tit-wrap h2, .section-top .tit-wrap p {
	opacity:0;
	-webkit-transform:translate3d(0,-50px,0);
	-moz-transform:translate3d(0,-50px,0);
	-o-transform:translate3d(0,-50px,0);
	-ms-transform:translate3d(0,-50px,0);
	transform:translate3d(0,-50px,0px);
}
.section-top .tit-wrap h2 {
	transition-delay:0.3s;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
}
.section-top .tit-wrap p {
	transition-delay:0.5s;
	-webkit-transition-delay:0.5s;
	-moz-transition-delay:0.5s;
	-o-transition-delay:0.5s;
	-ms-transition-delay:0.5s;
}
.loaded .section-top .tit-wrap h2, .loaded .section-top .tit-wrap p  {
	opacity:1;
	transform:translate3d(0, 0, 0);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
}

.sub-bg { position:absolute; top:0; left:0; width:100%; height:100%; }
.sub-bg .swiper-container { width:100%; height:780px; margin-left:auto; margin-right:auto; }
.sub-bg .swiper-slide .bg { position:relative; width:100%; height:100%; background-size:cover; background-position:center; }
.sub-bg .swiper-slide .bg:before { content:''; position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); overflow:hidden; }


.section { width:92%; margin:0 auto; }
.section.fbox { max-width:1920px; margin:0 auto; }
.section .article { width:100%; margin-bottom:28px; }
.section .inbox { margin:14px 0; }

.bold { font-weight:bold; }
.red { color:#e21f2f; }
.grid-reset { font-size:0; }


/* PROJECT FORM */
.formclose a { cursor:pointer; height:48px; position:fixed; right:40px; text-indent:-999em; top:24px; width:48px; z-index:48; background:url(../images/btn_close.png) center center no-repeat;}


#form-layer-wrap { position:fixed; left:-100%; top:0; width:100%; height:100%; z-index:1100; visibility:hidden; }
#form-layer-wrap .back { position:absolute; right:-100%; top:0; width:100%; height:100%; background:#000; opacity:0; }
#form-layer-wrap .back:before { position:absolute; right:0; top:0; width:100%; height:100%; content:''; background:#000; display:block; opacity:0.4; z-index:1; }
#form-layer-wrap .inbox { position:absolute; right:-100%; top:0; width:708px; height:100%; margin-right:-708px; background:rgba(43,43,43,0.9); z-index:4; overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }

#form-layer-wrap.show { visibility:visible; }
#form-layer-wrap.show .back { opacity:0.9; }
#form-layer-wrap.show .inbox { margin-right:0; }

#form-layer-wrap .tit-wrap { }
#form-layer-wrap .tit-wrap h2 { color:#adadad; font-size:32px; }
#form-layer-wrap .tit-wrap p { color:#adadad; }

.application { width:100%; color:#adadad; }
.application .form-section { margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed #474747; overflow:hidden; vertical-align:middle; box-sizing:border-box; }
.application .form-section p.sec-title { margin-bottom:10px; padding-left:18px; font-size:14px; background:url('../images/form_tit_icon.png') left center no-repeat; }
.application .form-section p { margin:0; }
.application .item { width:100%; border-radius:7px; margin-bottom:4px !important; background:#363636; padding:10px; clear:both; box-sizing:border-box; }
.application .item.l { clear:none; float:left; width:49.65%; }
.application .item.r { clear:none; float:right; width:49.65%; }
.application ul.fld { position:relative; width:100%; margin-bottom:4px; padding:10px; font-size:0; letter-spacing:0; word-spacing:0; vertical-align:middle; border-radius:7px; background:#363636; display:block; box-sizing:border-box; }
.application ul.fld li { max-width:50%; width:50%; display:inline-block; font-size:13px; margin:2px 0; } 
.application input[type="text"] { position:relative; width:100%; padding-left:10px; background:#363636; font-size:16px; border:0; color:#aaa; vertical-align:middle; box-sizing:border-box; -webkit-appearance:none; -webkit-border-radius:0; outline-style:none; }
.application input[type="checkbox"], .application input[type="radio"] { display:none; }
.application input[type="checkbox"] + label, .application input[type="radio"] + label { vertical-align:middle; cursor:pointer; background:url(../images/checkbox.png) no-repeat; width:18px; height:18px; display:inline-block; padding:0 8px 0 0; }
.application input[type="checkbox"]:checked + label, .application input[type="radio"]:checked + label { background:url(../images/checkbox_on.png) no-repeat; }
.application textarea { position:relative; width:100%; padding-left:10px; background:#363636; font-size:16px; border:0; color:#aaa; vertical-align:middle; box-sizing:border-box; -webkit-appearance:none; -webkit-border-radius:0; outline-style:none; }

.form-box input[type="submit"] { width:100%; background:#e21f2f; border:0; padding:18px 0; color:#fff; cursor:pointer; border-radius:7px; }

/* ABOUT */
.about-intro { width:100%; background:url('../images/about_intro_bg.jpg') center top no-repeat; background-size:cover; padding:88px 0; }
.about-intro .inbox { position:relative; border:8px solid #ff2739; padding:74px 42px; box-sizing:border-box; }
.about-intro h3 { font-weight:400; font-size:28px; text-align:left; color:#ff2739; }
.about-intro .txt-type-1 { color:#d1d1d1; text-align:left; width:68%; }
.about-intro .img { position:absolute; right:3.875em; bottom:3.875em; }

.about-who .image img { width:100%; max-width:100%; vertical-align:middle; }
.about-who .description { font-size:15px; font-weight:600; color:#464646; text-align:center; }
.about-pp { }
.about-pp img { width:100%; max-width:100%; }

.about-history { }
.about-history .description { font-size:15px; font-weight:600; color:#464646; text-align:center; }

.about-history .column-2 li { max-width:50%; width:50%; }
.about-history .history-list { position:relative; font-size:0; letter-spacing:0; word-spacing:0; box-sizing:border-box; vertical-align:baseline; }
.about-history .history-list li { display:inline-block; box-sizing:border-box; text-align:left; margin:4px 0; vertical-align:top; font-size:14px; }
.about-history .history-list li span { display:inline-block; font-weight:bold; width:60px; }
.about-history .history-list li span.size-0 { font-size:0; }

#timeline { width:100%; height:350px; overflow:hidden; margin:100px auto; position:relative; background:url('../images/dot.gif') left 45px repeat-x; }
#dates { width:100%; height:60px; overflow:hidden; }
#dates li { list-style:none; float:left; width:100px; height:50px; font-size:20px; text-align:center; background:url('../images/biggerdot.png') center bottom no-repeat; }
#dates a { color:#464646; line-height:38px; padding-bottom:10px; }
#dates .selected { font-size:20px; font-weight:bold; color:#e21f2f; }
#issues { width:1114px; height:350px; overflow:hidden; }
#issues > li { width:1114px; height:350px; list-style:none; float:left; box-sizing:border-box; }
#issues > li > ol > li { width:50%; padding:0 42px; box-sizing:border-box; }
#issues li h1 { color:#464646; font-size:48px; margin:20px 0 20px 42px; }
#issues li p { font-size:14px; margin-right:70px; font-weight:normal; line-height:22px;	}
#next, #prev { position:absolute; top:0; font-size:70px; top:170px; width:22px; height:38px; background-position:0 0; background-repeat:no-repeat; text-indent:-9999px; overflow:hidden; }
#next:hover, #prev:hover { background-position:0 -76px; }
#next { right:0; background-image: url('../images/next.png'); }
#prev { left:0; background-image: url('../images/prev.png'); }
#next.disabled, #prev.disabled { opacity:1; }

.about-behavior { width:100%; }
.about-behavior .grid-list.column-3 { }
.about-behavior .grid-list.column-3 li .info { position:relative; border:0; margin:0; padding:0; overflow:hidden; background:rgba(0,0,0,0.3); }
.about-behavior .grid-list.column-3 li .info img { width:100%; max-width:100%; opacity:1; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; -webkit-transform:scale(1); transform:scale(1); }
.about-behavior .grid-list.column-3 li .info:hover img { opacity:.2; -webkit-transform:scale(1.1); transform:scale(1.1); } 
.about-behavior .grid-list.column-3 li .info:hover { opacity:1; background:rgba(226,31,47,1); }
.about-behavior .grid-list.column-3 li .info .hover-txt { position:absolute; width:100%; color:#a9a9a9; z-index:999; font-size:16px; text-align:center; opacity:0; top:50%; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; }
.about-behavior .grid-list.column-3 li .info:hover .hover-txt { top:41%; opacity:1; }
.about-behavior .grid-list.column-3 li .atc-tit-2 { color:#fff; }
.about-behavior .grid-list.column-3 li .description { color:#fff; }

.about-visual .description { font-size:15px; font-weight:600; color:#464646; text-align:center; }
.about-visual .grid-list.column-2 { margin-bottom:48px; }
.about-visual .grid-list.column-2 li .info { border:1px solid #efefef; margin:0 16px; padding:0; }

.about-business { width:100%; background:url('../images/about_business_bg.jpg') center top no-repeat; background-size:cover; padding:28px 0; }
.about-business .grid-list .description  { color:#b5b5b5; }

.about-business .grid-list.column-5 li { text-align:left; }
.about-business .grid-list.column-5 li .info { border-top:none; padding-top:0; color:#fff; text-align:center; }
.about-business .grid-list.column-5 li .atc-tit-2 { font-family:'Nanum Gothic', sans-serif; font-weight:500; }
.about-business .grid-list.column-5 li ul li { width:100%; max-width:100%; display:block; text-align:center; }

.about-business .grid-list.column-4 li { text-align:left; margin-bottom:8px; }
.about-business .grid-list.column-4 li:nth-child(1n) .info { margin:0 12px; }
.about-business .grid-list.column-4 li .info { padding:24px; text-align:center; background-color:rgba(0,0,0,0.2); border:1px solid rgba(234,234,234,0.3); color:#fff; }
.about-business .grid-list.column-4 li .atc-tit-2 { display:block; font-family:'Nanum Gothic', sans-serif; font-weight:500; }
.about-business .grid-list.column-4 li p { margin:0; }

.about-business .grid-list.column-4 .btn-detail { display:inline-block; position:relative; width:199px; height:30px; margin:10px 0 0 0; padding:0; border:1px solid rgba(255,255,255,0.4); color:#fff; font-size:13px; letter-spacing:0; line-height:30px; text-align:center; box-sizing:border-box; visibility:visible; z-index:50; }
.about-business .grid-list.column-4 .btn-detail { opacity:1;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}

.about-info .grid-list.column-2 li { text-align:left; margin-bottom:8px; }
.about-info .grid-list.column-2 li:nth-child(1n) .info { margin-right:8px; }
.about-info .grid-list.column-2 li .info { border-top:none; padding:0; }
.about-info .grid-list.column-2 li ul li { font-size:13px; }

.about-map { width:100%; }
#map-google { width:100%; height:189px; }


/* PEOPLE */
.people-intro { width:100%; background:#e21f2f; padding:74px 0; }
.people-intro .inbox { position:relative; border:8px solid #ff2739; padding:74px 42px; box-sizing:border-box; }
.people-intro h3 { font-weight:400; font-size:28px; text-align:left; color:#ff2739; }

.people-intro .section-stit { color:#fff; }
.people-intro .primary { background:#fff; }
.people-intro .description { font-size:16px; color:#fff; text-align:center; }

.metro { width:100%; margin:42px auto 0; *zoom:1; }
.metro:after { content:""; display:block; clear:both; }
.pull-left { float:left; }
.pull-right { float:right; }
.md { position:relative; width:12.5%; height:214px; margin:0; overflow:hidden; }
.lg { position:relative; width:25%; height:428px; margin:0; overflow:hidden; }

.metro .lg, .metro .md { position:relative; border:0; margin:0; padding:0; overflow:hidden; background:rgba(0,0,0,0.5); }
.metro .lg .img, .metro .md .img { width:100%; max-width:100%; opacity:1; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; -webkit-transform:scale(1); transform:scale(1); }
.metro .lg:hover .img, .metro .md:hover .img { opacity:.4; -webkit-transform:scale(1.1); transform:scale(1.1); } 
.metro .lg .hover-txt, .metro .md .hover-txt { position:absolute; color:#a9a9a9; z-index:51; font-size:16px; text-align:right; opacity:0; bottom:0; right:10%; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; }
.metro .lg:hover .hover-txt, .metro .md:hover .hover-txt { bottom:10px; opacity:1; }
.metro .lg .hover-txt .atc-tit-2, .metro .md .hover-txt .atc-tit-2 { color:#fff; font-size:18px; font-family:'Nanum Gothic', sans-serif; font-weight:normal; margin:0; }
.metro .lg .hover-txt .description, .metro .md .hover-txt .description { color:#fff; font-family:'Nanum Gothic', sans-serif; font-size:14px; }

.pp-01 { position:relative; left:0; height:100%; width:100%; background:url(../images/people/pp01.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-02 { position:relative; left:0; height:100%; width:100%; background:url(../images/people/pp02.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-03 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp03.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-04 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp04.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-05 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp05.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-06 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp06.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-07 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp07.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-08 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp08.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-09 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp09.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-10 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp10.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-11 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp11.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-12 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp13.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-13 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp13.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }
.pp-14 { position:relative; top:0; height:100%; width:100%; background:url(../images/people/pp14.jpg) no-repeat center top; background-size:cover; transition:all 1s; z-index:50; }


.people-visual .description { font-size:15px; font-weight:600; color:#464646; text-align:center; }
.people-visual .grid-list.column-2 { margin-bottom:48px; }
.people-visual .grid-list.column-2 li .info { border:1px solid #efefef; margin:0 16px; padding:0; }


/* RECRUITING */
.recruiting  { }
.recruiting ul li { display:table; width:100%; padding:30px 0; border-bottom:1px dashed rgba(217,217,217,1); box-sizing:border-box; }
.recruiting ul li .image { float:left; width:128px; margin:0 29px; }
.recruiting ul li .txt_box { display:table-cell; width:100%; vertical-align:middle; }
.recruiting ul li:nth-child(2n) { background:#f7f7f7; }
.recruiting ul li dl { }
.recruiting ul li dl dt { font-size:24px; font-weight:600; }
.recruiting ul li dl dd { margin:16px 0; }
.recruiting ul li dl dd a { color:#e21f2f; font-weight:600; }
.recruiting ul li dl dd .dd-tit { display:block; font-weight:600; padding-left:14px; font-size:15px; background:url(../images/recruiting_list_dot.gif) left 8px no-repeat; }
.recruiting ul li dl dd .dd-dec { display:block; padding-left:14px; }

/* Performance */
.performance  { }
.performance ul li { display:table; width:100%; padding:30px 0; border-bottom:1px dashed rgba(217,217,217,1); box-sizing:border-box; }
.performance ul li .image { float:left; width:128px; margin:0 29px; }
.performance ul li .txt_box { display:table-cell; width:100%; vertical-align:middle; }
.performance ul li:nth-child(2n) { background:#f7f7f7; }
.performance ul li dl { }
.performance ul li dl dt { font-size:24px; font-weight:600; }
.performance ul li dl dd { margin:16px 0; }
.performance ul li dl dd a { color:#e21f2f; font-weight:600; }
.performance ul li dl dd .dd-tit { display:block; font-weight:600; padding-left:14px; font-size:16px; background:url(../images/recruiting_list_dot.gif) left 8px no-repeat; }
.performance ul li dl dd .dd-dec { display:block; padding-left:14px; font-size:14px;}

/* OTOP-X */

.otopx-graph { width:100%; padding:48px 0; background:url('../images/otopx_graph_bg.jpg') center top no-repeat; background-size:cover; }
.otopx-graph .image img { width:100%; max-width:100%; vertical-align:middle; }

.otopx-item { width:100%; background:url('../images/otopx_item_bg.jpg') center top no-repeat; background-size:cover; padding:68px 0; }
.otopx-item .grid-list.column-5 li a { display:block; border:1px solid rgba(43,43,43,0.8); background:rgba(0,0,0,0.3); margin-top:-1px; margin-left:-1px; padding:24px; box-sizing:border-box; text-decoration:none;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
}
.otopx-item .grid-list.column-5 li a:hover { opacity:1; background:rgba(226,31,47,0.6);
		transition-delay:0;
		-webkit-transition-delay:0;
		-moz-transition-delay:0;
		-o-transition-delay:0;
		-ms-transition-delay:0;
	}
.otopx-item .grid-list.column-5 li a .atc-tit-1 { color:#fff; }
.otopx-item .grid-list.column-5 li a .description { color:#fff; margin-top:8px; }
.otopx-item .grid-list.column-5 li a .image { margin-bottom:12px; }

/*
.otopx-tab .detail-tab { position:relative; font-size:0; letter-spacing:0; word-spacing:0; box-sizing:border-box; vertical-align:baseline; }
.otopx-tab .detail-tab.column-5 li { display:inline-block; box-sizing:border-box; text-align:center; vertical-align:top; }
.otopx-tab .detail-tab.column-5 li a { display:block; font-size:13px; color:#464646; background-color:rgba(230,230,230,0.2); border:1px solid rgba(201,201,201,0.5); margin-top:-1px; margin-left:-1px; padding:24px 0; box-sizing:border-box; text-decoration:none; }
.otopx-tab .detail-tab.column-5 li a:hover, .otopx-tab .detail-tab.column-5 li a.on { color:#fff; background-color:rgba(1,155,168,1); }

.otopx-info { width:100%; padding:28px 0; background-color:rgba(230,230,230,0.6); }
.otopx-info .atc-tit-2 { display:block; text-align:center; font-family:'Nanum Gothic', sans-serif; padding-bottom:18px; margin-bottom:18px; font-weight:bold; background:url('../images/txt_line.jpg') center bottom no-repeat; }
.otopx-info dl { text-align:center; }
.otopx-info dl dt { font-size:24px; font-weight:600; color:#019ba8; }
.otopx-info dl dd { color:#464646; margin:10px 0; }
.otopx-info dl dd a { color:#019ba8; font-weight:600; }
*/

.otopx-detail { width:100%; padding:48px 0; background:url('../images/otopx_detail_bg.jpg') center top no-repeat; background-size:cover;  } /*background-color:rgba(230,230,230,0.6);*/

.swiper-container-tab { overflow:hidden; position:relative; }
.swiper-tab-cont .swiper-wrapper { }
.swiper-tab-cont .swiper-slide { width:100%; display:block; background:transparent; *zoom:1; }
.swiper-tab-cont .swiper-slide:after { content:""; display:block; clear:both; }
.swiper-tab-cont .swiper-slide .info { float:left; box-sizing:border-box; width:50%; padding-left:54px; }
.swiper-tab-cont .swiper-slide .info .atc-tit-2 { display:block; text-align:left; font-family:'Nanum Gothic', sans-serif; padding-bottom:18px; margin-bottom:18px; font-weight:bold; background:url('../images/txt_line.jpg') left bottom no-repeat; }
.swiper-tab-cont .swiper-slide .info dl { text-align:left; }
.swiper-tab-cont .swiper-slide .info dl dt { font-size:16px; font-weight:600; color:#e21f2f; }
.swiper-tab-cont .swiper-slide .info dl dd { color:#464646; margin:6px 0; font-size:13px; }
.swiper-tab-cont .swiper-slide .info dl dd a { color:#019ba8; font-weight:600; }
.swiper-tab-cont .swiper-slide .image { float:left; box-sizing:border-box; width:50%; margin-top:0; padding:18px 54px 18px 24px; }
.swiper-tab-cont .swiper-slide .image img { width:100%; max-width:100%; vertical-align:bottom; }
.swiper-tab-cont .swiper-slide .price { color:#e21f2f; font-weight:600; margin-top:18px; font-size:20px; text-align:left; }
.swiper-tab-cont .swiper-slide .price span { color:#464646; font-size:13px; }

.otopx-price { }
.otopx-price .description { text-align:center; }
.otopx-price .grid-list.column-2 .info { border:1px solid rgba(217,217,217,1); margin:0 6px; padding:38px 0; }
.otopx-price .grid-list.column-2 .info .atc-tit-2 { width:45%; margin:0 auto; color:#fff; padding:38px 0; background-color:#e21f2f; }
.otopx-price .grid-list.column-2 .info .price { color:#e21f2f; font-weight:600; margin-top:18px; font-size:26px; text-align:center; }


.proc-app { }
.proc-app .grid-list.column-1 .grid-item { border:1px solid rgba(217,217,217,1); margin-bottom:10px; padding:24px; }
.proc-app .grid-list.column-1 .grid-item .atc-tit-2 { display:block; text-align:center; font-family:'Nanum Gothic', sans-serif; font-weight:bold; }
.proc-app ul li p a { color:#e21f2f; font-weight:600; }


/* META WORKS */
.metaworks { }
.metaworks-item { width:100%; padding:28px 0; background-color:rgba(230,230,230,0.6); }
.metaworks-item .image img { width:100%; max-width:100%; vertical-align:middle; }

.metaworks-detail { width:100%; padding:48px 0; background:url('../images/metaworks_detail_bg.jpg') center top no-repeat; background-size:cover;  }
.metaworks-detail .swiper-tab-cont .swiper-slide .info .atc-tit-2 { background:url('../images/txt_line.jpg') left bottom no-repeat; }
.metaworks-detail .swiper-tab-cont .swiper-slide .info dl dt { color:#e21f2f; }
.metaworks-detail .swiper-tab-cont .swiper-slide .info dl dd { color:#464646; }
.metaworks-detail .swiper-tab-cont .swiper-slide .info dl dd a { color:#fff; }


/* WEB PROGRAM */
.program-bg .section:before, .program-bg .section:after{ content:'';position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background:#000;opacity:0.2;z-index:1;}
.program-bg { position:absolute; top:0; left:0; width:100%; height:100%; }
.program-bg .swiper-container { width:100%; height:100%; margin-left:auto; margin-right:auto; }
.program-bg .swiper-slide { text-align:left; }
.program-bg .swiper-slide .bg { position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; background-size:cover; background-position:center; }
.program-bg .swiper-slide .bg:before { content:''; position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; overflow:hidden; }
.program-bg .swiper-slide .bg-1:before { background-color:rgba(33,30,42,0.7); }
.program-bg .swiper-slide .bg-2:before { background-color:rgba(31,41,54,0.7); }
.program-bg .swiper-slide .bg-3:before { background-color:rgba(58,52,41,0.7); }
.program-bg .swiper-slide .bg-4:before { background-color:rgba(38,36,53,0.7); }
.program-bg .swiper-slide .bg-5:before { background-color:rgba(45,46,48,0.7); }
.program-bg .swiper-slide .section { padding:4%; z-index:30; }
.program-bg .swiper-slide .section .tit-section { font-size:28px; letter-spacing:0; }
.program-bg .swiper-slide .section .text { font-size:18px; margin:0 0 26px 0; }
.program-bg .swiper-slide .section dl { margin-bottom:12px; }
.program-bg .swiper-slide .section dl dt { font-size:16px; font-weight:600; color:#0fdeef; }
.program-bg .swiper-slide .section dl dd { color:#e8e8e8; margin:4px 0; font-size:13px; }


/* 247 DESIGN */
.design { }
.design .grid-list.column-4 li .atc-tit-2, .design-reason .grid-list.column-4 li .atc-tit-2  { display:block; font-size:18px; font-family:'Nanum Gothic', sans-serif; font-weight:500; margin-top:12px; }

.design-responsive { width:100%; background:#e21f2f; padding:68px 0; }
.design-responsive .section-stit { color:#fff; }
.design-responsive .primary { background:#fff; }
.design-responsive .description { font-size:16px; color:#fff; text-align:center; }

.design-item { width:100%; background:url('../images/design_item_bg.jpg') center top no-repeat; background-size:cover; padding:68px 0; }
.design-item .grid-list.column-3 li .info { border:1px solid rgba(49,46,41,1); background:rgba(0,0,0,0.3); margin-top:-1px; margin-left:-1px; padding:24px; box-sizing:border-box; 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
}
.design-item .grid-list.column-3 li .info:hover { opacity:1; background:rgba(226,31,47,0.4);
		transition-delay:0;
		-webkit-transition-delay:0;
		-moz-transition-delay:0;
		-o-transition-delay:0;
		-ms-transition-delay:0;
	}
.design-item .grid-list.column-3 li .info .atc-tit-1 { color:#fff; }
.design-item .grid-list.column-3 li .info .description { color:#fff; margin-top:8px; }
.design-item .grid-list.column-3 li .info .image { margin-bottom:12px; }

.design-type { width:100%; padding:28px 0; background-color:rgba(230,230,230,0.6); }
.design-type .atc-tit-3 { margin:48px 0 16px 0; text-align:center; }
.design-type .grid-list.column-1 li .info,
.design-type .grid-list.column-3 li .info { background:#fff; border:1px solid rgba(217,217,217,1); padding:48px 18px; }
.design-type .grid-list.column-1 li .info .atc-tit-2,
.design-type .grid-list.column-3 li .info .atc-tit-2 { color:#e21f2f; font-family:'Nanum Gothic', sans-serif; display:block; margin:28px 0; }
.design-type .grid-list.column-1 li .info ul.type-description,
.design-type .grid-list.column-3 li .info ul.type-description { font-size:14px; }
.design-type .grid-list.column-1 li .info ul.type-description li,
.design-type .grid-list.column-3 li .info ul.type-description li { max-width:100%; width:100%; display:block; text-align:center; margin:4px 0; }

.design-service { padding:28px 0; }
.design-service .atc-tit-3 { margin:48px 0 16px 0; text-align:center; }
.design-service .grid-list.column-5 { }
.design-service .grid-list.column-5 li .info-2 .image { margin:32px 0; }
.design-service .grid-list.column-5 li .info-2 .atc-tit-1,
.design-service .grid-list.column-5 li .info-2 .atc-tit-2 { font-family:'Nanum Gothic', sans-serif; display:block; }
.design-service .grid-list.column-5 li .info-2 .atc-tit-2 { margin-bottom:34px; }
.design-service .grid-list.column-5 li .info-2 ul.type-description { font-size:13px; padding:12px 0; } /*background-color:rgba(86,86,86,0.1);*/
.design-service .grid-list.column-5 li .info-2 ul.type-description li { max-width:100%; width:100%; display:block; text-align:center; margin:2px 0; }


/*
.swiper-tab-cont .swiper-tab-prev {  background-image:url(../images/slide_prevnext.png); background-position:0 0; }
.swiper-tab-cont .swiper-tab-next {  background-image:url(../images/slide_prevnext.png); background-position:64px 0; }
.swiper-tab-cont .swiper-tab-prev, .swiper-tab-cont .swiper-tab-next { position:absolute; top:50%; width:64px; height:64px; margin-top:-32px; z-index:999; cursor:pointer; background-repeat:no-repeat; }
*/
/*
.swiper-tab-thumb { }
.swiper-tab-thumb .swiper-wrapper {  }
.swiper-tab-thumb .swiper-slide { width:25%; display:inline-block; font-size:14px; border-top:2px solid rgba(52,52,52,1); border-bottom:2px solid rgba(52,52,52,1); }
*/

/* PRINTING */
.print { }
.print .grid-list.column-4 li .atc-tit-2, .design-reason .grid-list.column-4 li .atc-tit-2  { display:block; font-size:18px; font-family:'Nanum Gothic', sans-serif; font-weight:500; margin-top:12px; }

.print-process .grid-list.column-3 li { position:relative; border-right:1px solid #464646; }
.print-process .grid-list.column-3 li .num { position:absolute; top:-10px; right:26px; color:#ddd; font-size:74px; font-weight:600; }
.print-process .grid-list.column-3 li .atc-tit-2 { text-align:left; margin:0; }
.print-process .grid-list.column-3 li .atc-tit-3 { text-align:left; font-size:18px; font-weight:500; }
.print-process .grid-list.column-3 li .description { text-align:left; }

.print-responsive { width:100%; background:#e21f2f; padding:68px 0; }
.print-responsive .section-stit { color:#fff; }
.print-responsive .section-stit strong { font-size:44px; font-family:'Montserrat', sans-serif; }
.print-responsive .primary { background:#fff; }
.print-responsive .description { font-size:16px; color:#fff; text-align:center; }

.print-item { width:100%; background:url('../images/design_item_bg.jpg') center top no-repeat; background-size:cover; padding:68px 0; }
.print-item .grid-list.column-3 li .info { border:1px solid rgba(49,46,41,1); background:rgba(0,0,0,0.3); margin-top:-1px; margin-left:-1px; padding:24px; box-sizing:border-box; 
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
}
.print-item .grid-list.column-3 li .info:hover { opacity:1; background:rgba(226,31,47,0.4);
		transition-delay:0;
		-webkit-transition-delay:0;
		-moz-transition-delay:0;
		-o-transition-delay:0;
		-ms-transition-delay:0;
	}
.print-item .grid-list.column-3 li .info .atc-tit-1 { color:#fff; }
.print-item .grid-list.column-3 li .info .description { color:#fff; margin-top:8px; }
.print-item .grid-list.column-3 li .info .image { margin-bottom:12px; }

.print-portfolio { width:100%; padding:68px 0; }


/* MARKETING */
.mktg { }

.mktg-list { width:100%; background:url('../images/mktg_bg.jpg') center top no-repeat; background-size:cover; padding:68px 0; }
.mktg-list .grid-list.column-1 li { background:#efefef; border-radius:30px; padding:2px 0; margin:9px 0; }
.mktg-list .grid-list.column-1 li .atc-tit-2 { display:block; color:#e21f2f; font-size:18px; font-family:'Nanum Gothic', sans-serif; font-weight:500; margin-top:12px; }

.mktg-process .grid-list.column-3 li { position:relative; border-right:1px solid #464646; }
.mktg-process .grid-list.column-3 li .num { position:absolute; top:-10px; right:26px; color:#ddd; font-size:74px; font-weight:600; }
.mktg-process .grid-list.column-3 li .atc-tit-2 { text-align:left; margin:0; }
.mktg-process .grid-list.column-3 li .atc-tit-3 { text-align:left; font-size:18px; font-weight:500; }
.mktg-process .grid-list.column-3 li .description { text-align:left; }

.mktg-graph { width:100%; background:url('../images/marketing_graph_bg.jpg') center top no-repeat; background-size:cover; padding:68px 0; }
.mktg-graph .section-stit { color:#fff; }
.mktg-graph .image { width:679px; margin:48px auto 0; }

.mktg-share { padding:68px 0; }
.mktg-share .image { width:1032px; margin:48px auto; }
.mktg-share .description { font-size:15px; font-weight:600; color:#464646; text-align:center; }

.mktg-item { width:100%; background:url('../images/marketing_item_bg.jpg') center top no-repeat; background-size:cover; padding:68px 0; }
.mktg-item .grid-list.column-3 li a { display:block; border:1px solid rgba(43,43,43,0.8); background:rgba(0,0,0,0.3); margin-top:-1px; margin-left:-1px; padding:24px 0; box-sizing:border-box; text-decoration:none;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
}
.mktg-item .grid-list.column-3 li a:hover { opacity:1; background:rgba(226,31,47,0.6);
		transition-delay:0;
		-webkit-transition-delay:0;
		-moz-transition-delay:0;
		-o-transition-delay:0;
		-ms-transition-delay:0;
}
.mktg-item .grid-list.column-3 li a .atc-tit-1 { color:#fff; }
.mktg-item .grid-list.column-3 li a .description { color:#fff; margin-top:8px; }
.mktg-item .grid-list.column-3 li a .image { margin-bottom:12px; }

.mktg-info { }


/* GRID LIST STYLE */
.column-1 li { max-width:100%; width:100%; display:block !important; }
.column-2 li { max-width:50%; width:50%; }
.column-3 li { max-width:33.33333%; width:33.33333%; }
.column-4 li { max-width:25%; width:25%; }
.column-5 li { max-width:20%; width:20%; }
.column-6 li { max-width:16.66666666666667%; width:16.66666666666667%; }
.column-6 li img { max-width:100%; width:100%; }

.grid-list { position:relative; font-size:0; letter-spacing:0; word-spacing:0; box-sizing:border-box; vertical-align:baseline; }
.grid-list li { display:inline-block; box-sizing:border-box; text-align:center; vertical-align:top; }
.grid-list li .info { border-top:2px solid rgba(52,52,52,1); box-sizing:border-box; padding:18px 0; }
.grid-list li .info-2 { border:1px solid rgba(230,230,230,1); background-color:rgba(230,230,230,0); box-sizing:border-box; }
.grid-list .image { }
.grid-list .description { font-size:13px; margin-top:15px; }
.section-stit { font-size:26px; font-weight:500; font-family:'Nanum Gothic', sans-serif; text-align:center; }
.primary { display:block; width:50px; height:3px; background:#e21f2f; margin:18px auto 28px; }
.atc-tit-1 { font-size:15px; font-weight:600; color:#464646; }
.atc-tit-2 { font-size:24px; font-weight:700; font-family:'Montserrat', sans-serif; }
.atc-tit-3 { font-size:24px; font-weight:700; font-family:'Nanum Gothic', sans-serif; }
.atc-tit-4 { font-size:15px; font-weight:500; color:#fff; font-family:'Nanum Gothic', sans-serif; text-align:center; }


footer { background:#3a3a3a; color:#686868; }
#footer-wrap { }
#copyright { text-align:center; padding:14px 0; font-size:11px; border-top:1px solid #4e4e4e; }



@media only screen and (min-width : 1224px) {

#topmenu { display:block; }

}


@media only screen and (min-width:980px) {

#header { height:90px; }
.sticky #header { height:74px; border-bottom:none; background-color:rgba(0,0,0,0.7); }
.sticky #header #logo { top:15px; }
.sticky #header #logo a { background:url(../images/logo_white.png) left top no-repeat; }
.sticky #header #gnbopen a { top:10px; }
.sticky #header #topmenu { top:28px; }

.tit-section { font-family:'Montserrat', sans-serif; font-size:80px; letter-spacing:0.1em; margin:30px 0 28px; opacity:0; position:relative; color:#fff; text-shadow:0 3px 5px rgba(0, 0, 0, 0.25); z-index:50; }
.section-2 .tit-section { font-size:124px; }
.section-2 .text { font-family:'Montserrat', sans-serif; font-size:61px !important; }


.section-top { height:912px; }
.section-top .tit-wrap { height:912px; }
.section-top .tit-wrap h2 { font-size:73px; color:#fff; }
.section-top .tit-wrap p { font-size:22px; }

.section { max-width:1114px; margin:102px auto; }
.section .article { width:100%; margin-bottom:68px; }
.section .inbox { max-width:1114px; margin:68px auto; }

#form-layer-wrap .inbox { width:800px; margin-right:-800px; }
#form-layer-wrap .form-box { width:94%; margin:68px auto; }
.application ul.fld li { max-width:33.33333%; width:33.33333%; }
.application .column-4 ul.fld li { max-width:25%; width:25%; }


/* ABOUT */
.about-intro h3 { font-size:47px; margin-bottom:24px; }
.about-intro .inbox { min-height:592px; }
.about-intro .txt-type-1 { font-size:16px; }

.about-who .mgT540 { margin-top:570px; }

.about-behavior .grid-list.column-3:nth-child(2) .info { margin:0; }
.about-behavior .grid-list.column-3 .info img { width:100%; max-width:100%; }

.about-visual .grid-list.column-2 li .info { border:1px solid #efefef; margin:0 16px; padding:0; }
.about-visual .grid-list.column-2 li .info img { width:100%; max-width:100%; }

.about-business { padding:74px 0; }
.about-business .grid-list.column-5 li { margin:28px 0; }
.about-business .grid-list.column-5 li ul li { margin:0; }
.about-business .grid-list.column-2 li { text-align:left; margin-bottom:16px; }
.about-business .grid-list.column-2 li:nth-child(1n) .info { margin-right:16px; }
.about-business .grid-list.column-2 li .atc-tit-2 { font-size:37px; }

.about-info { padding:74px 0; }
.about-info .grid-list.column-2 li .atc-tit-2 { font-size:31px; }
.about-info .grid-list.column-2 li ul { margin-top:18px; }
.about-info .grid-list.column-2 li ul li { font-size:14px; }
.about-info .grid-list.column-2 li ul li:nth-child(1n) { padding-right:10px; box-sizing:border-box; }

/* PEOPLE */
.people-intro.section .article { margin-bottom:0; }


/* OTOP-X */
.otopx-info .atc-tit-2 { font-size:37px; }
.otopx-item .grid-list.column-5 li a { min-height:198px; }

/* META WORKS */
.metaworks-item .image img { width:1079px; margin:0 auto; }

/* WEB PROGRAM */
.program-bg .swiper-slide .section .tit-section { font-size:48px; letter-spacing:0; }
.program-bg .swiper-slide .section .text { font-size:28px; margin:0 0 26px 0; }

/* 247 DESIGN */
.design .grid-list.column-4 li, .design-reason .grid-list.column-4 li { padding:0 18px; }

.design-item .grid-list.column-3 li .info { min-height:248px; }
.design-item .grid-list.column-3 li:nth-child(2) .info { margin:-1px 0 0 -1px; }

.design-type .grid-list.column-3 li .info { min-height:498px; }
.design-type .grid-list.column-3 li:nth-child(2) .info { margin:0 10px; }

.design-service .grid-list.column-5 li .info-2 ul.type-description { min-height:136px; }

/* PRINTING */
.print-process .grid-list.column-3 li { padding:0 44px; }
.print-process .grid-list.column-3 li:last-child { border-right:none; }

.print-item .grid-list.column-3 li .info { padding:44px 0; }
.print-item .grid-list.column-3 li:nth-child(2) .info { margin:-1px 0 0 -1px; }

/* MARKETING */
.mktg-process .grid-list.column-3 li { padding:0 44px; }
.mktg-process .grid-list.column-3 li:last-child { border-right:none; }


#map-google { width:100%; height:324px; }

/* GRID LIST STYLE */

.grid-list .description { font-size:14px; }

.grid-list.column-3 li:nth-child(2) .info { margin:0 32px; }

.grid-list.column-5 li:nth-child(2n) .info-2 { margin:0 4px; }



#footer-wrap { display:block; max-width:1114px; margin:0 auto; }


}


@media all and (max-width:767px) {

#header { height:54px; }
#header #logo {  }
#header #logo a { width:154px; height:23px; background:url(../images/logo_m.png) left top no-repeat; }
.sticky #header { border-bottom:none; background-color:rgba(0,0,0,0.7); }
.sticky #header #logo { top:16px; }
.sticky #header #logo a { width:154px; height:23px; background:url(../images/logo_m_white.png) left top no-repeat; }
.sticky #header #gnbopen a { top:10px; }

#gnbopen a { right:16px; top:14px; width:28px; height:28px; margin-top:0 !important; }
#gnbopen a span { left:6px; top:8px; width:17px; }
#gnbopen span+span { top:13px; }
#gnbopen span+span+span { top:18px; width:17px; }
#gnbopen a.on span { width:22px; }
#gnbopen a.on span:first-child {
	transform:translate3d(0, 5px, 0) rotate(45deg);
	-webkit-transform:translate3d(0, 5px, 0) rotate(45deg);
	-moz-transform:translate3d(0, 5px, 0) rotate(45deg);
	-o-transform:translate3d(0, 5px, 0) rotate(45deg);
	-ms-transform:translate(0, 5px) rotate(45deg);
}
#gnbopen a.on span+span+span {opacity:1;
	transform:translate3d(0, -16px, 0) rotate(135deg);
	-webkit-transform:translate3d(0, -16px, 0) rotate(135deg);
	-moz-transform:translate3d(0, -16px, 0) rotate(135deg);
	-o-transform:translate3d(0, -16px, 0) rotate(135deg);
	-ms-transform:translate(0, -16px, 0) rotate(135deg);
}

#gnb nav {margin:48px 0; }
#gnb .inbox { width:100%; margin-right:-100%; }
#gnb a {font-size:16px; line-height:39px; text-align:center; padding-left:0; }
#gnb dd a { font-size:12px; line-height:25px; }
#gnb .inquiry a { line-height:60px; }

.btn-godown { bottom:40px; }


.section-1 .tit-section { width:92%; margin:0 auto; }
.section-1 .tit-section img { width:100%; max-width:100%; }

.section { width:92%; margin:28px auto; }
.section.fbox { width:100%; }
.section.fbox .inbox { width:92%; margin:28px auto; }


#form-layer-wrap .inbox { width:100%; margin-right:-100%; }
#form-layer-wrap .form-box { width:94%; margin:38px auto; }
.application input[type="text"] { font-size:13px; }


.grid-list .description { margin-top:6px; }

/* ABOUT */
.about-intro .inbox { min-height:642px; }
.about-intro .txt-type-1 { width:84%; }

.about-who { min-height:320px; background-position:center center !important; }
.about-who .mgT540 { margin-top:240px !important; }

.about-history .column-2 li { max-width:100%; width:100%; }
.about-history .history-list { position:relative; font-size:0; letter-spacing:0; word-spacing:0; box-sizing:border-box; vertical-align:baseline; }
.about-history .history-list li { display:inline-block; box-sizing:border-box; text-align:left; margin:4px 0; vertical-align:top; font-size:14px; }
.about-history .history-list li span { display:inline-block; font-weight:bold; width:60px; }
.about-history .history-list li span.size-0 { font-size:0; }

#timeline { height:100%; margin:60px auto; }
#issues { width:767px; height:100%; }
#issues > li { width:767px; height:100%; }
#issues > li > ol > li { width:100%; padding:0 22px; }
#issues li h1 { font-size:28px; margin:20px 0 20px 22px; }


.about-behavior .grid-list.column-3 li { margin:0; }
.about-behavior .grid-list.column-3 .info img { width:100%; max-width:100%; }

.about-visual .grid-list.column-2 li { max-width:100%; width:100%; display:block; margin:16px 0; }
.about-visual .grid-list.column-2 li .info img { width:100%; max-width:100%; }

.about-business .grid-list.column-2 .btn-detail { width:100%; }
.about-info .grid-list.column-2 li { max-width:100%; width:100%; display:block; margin:7px 0; }

/* PEOPLE */
.md { max-width:33.33333%; width:33.33333%; height:164px; }
.lg { max-width:33.33333%; width:33.33333%; height:164px; }


/* RECRUITING */
.recruiting ul li .image { display:none; float:left; width:70px; margin-right:18px; }
.recruiting ul li .image img { max-width:100%; width:100%; }
.recruiting ul li { padding:12px 28px; }

/* Performance */
.performance ul li .image { display:none; float:left; width:70px; margin-right:18px; }
.performance ul li .image img { max-width:100%; width:100%; }
.performance ul li { padding:12px 28px; }

.otopx-item { padding:28px 0; }

.swiper-tab-cont .swiper-slide .info { max-width:100%; width:100%; display:block; padding:0 28px; }
.swiper-tab-cont .swiper-slide .image { max-width:100%; width:100%; display:block; margin-top:24px; padding:0 48px; }

/* OTOP-X */
.otopx-price .grid-list.column-2 li { max-width:100%; width:100%; margin:16px 0; }
.otopx-price .grid-list.column-2 li:nth-child(1) .info { margin-right:0; }


/* 247 DESIGN */
.design .grid-list.column-2 li { max-width:100%; width:100%; margin:16px 0; }
.design .grid-list.column-2 li:nth-child(1) .info { margin-right:0; }

/* PRINTING */
.print-process .grid-list.column-3 li { margin:8px 0; padding:8px 0; border-right:none; border-bottom:1px solid #464646; }
.print-process .grid-list.column-3 li:last-child { border-bottom:none; }


/* MARKETING */
.mktg-process .grid-list.column-3 li { margin:8px 0; padding:8px 0; border-right:none; border-bottom:1px solid #464646; }
.mktg-process .grid-list.column-3 li:last-child { border-bottom:none; }
.mktg-graph .image, .mktg-share .image { width:100%; }
.mktg-graph .image img, .mktg-share .image img { max-width:100%; width:100%; }



.about-intro .grid-list.column-3 li, .otopx .grid-list.column-3 li, .metaworks .grid-list.column-3 li { margin:46px 0; }

.grid-list.column-1 li { max-width:100%; width:100%; display:block; margin:16px 0; }
.grid-list.column-2 li { max-width:50%; width:50%; margin:16px 0; }
.grid-list.column-3 li { max-width:100%; width:100%; display:block; margin:16px 0; }
.grid-list.column-4 li { max-width:100%; width:100%; display:block; margin:16px 0; }
.grid-list.column-5 > li { max-width:100%; width:100%; display:block; margin:16px 0; }
.grid-list.column-6 li { max-width:33.33333%; width:33.33333%; }



#footer-wrap { display:none; }

}