@charset "utf-8";

#wrap {overflow:hidden; position:relative; width:100%; min-width:320px;}


#header {position:fixed; top:0; left:0; width:100%; z-index:100; height:99px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.15); transition:all 0.4s; -webkit-transition:all 0.4s;}
#header .inwrap {position:relative;}
#header h1 {overflow:hidden; position:absolute; top:34px; left:6%; z-index:14; }
#header .logo {display:block; width:158px; height:31px; text-indent:-300px; background:url('../images/common/logo.png') no-repeat center;}

.sub #header {border-bottom:0; background:#fff;}
.sub #header .logo {background-image:url('../images/common/logo_on.png');}
.sub #header #gnb > ul > li > a {color:#282828;}
.sub #header #gnb > ul > li:hover > a {color:#ed1c24;}
.sub #header .icon_menu .icon_menu_bar {background:#ed1c24;}
.sub #header #gnb > ul > li+li:after {background:rgba(219,219,219,0.6);}


#gnb {margin-left:100px; text-align:center;}
#gnb > ul {display:inline-block; vertical-align:top;}
#gnb > ul > li {position:relative; float:left; height:95px;}
#gnb > ul > li+li:after {position:absolute; top:50%; left:0; width:1px; height:11px; margin-top:-5px; background:rgba(255,255,255,0.2); content:'';}
#gnb > ul > li > a {display:block; padding:14px 22px; font-family: 'Montserrat', sans-serif; letter-spacing:0em; font-size:15px; color:#fff; line-height:70px; font-weight:500; transition:all 0.4s; -webkit-transition:all 0.4s;}
#gnb > ul > li:hover a {color:#ed1c24;}

#gnb .m {display:none;}




#menu_open {position:absolute; top:0; right:0; width:0; padding-bottom:0; transition:all .4s ease; -webkit-transition:all .4s ease;}
#menu_open.open {width:100%; padding-bottom:50%;}
#menu_open div {position:absolute; top:0; right:0; width:100%; height:100%;}
#menu_open ul {position:absolute; top:50%; left:50%; width:80%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
#menu_open ul li+li {margin-top:2%;}

#header .btn_menu {overflow:hidden; position:absolute; top:39px; right:6%; z-index:8002; margin-top:-15px; text-align:left;}
#header .icon_menu{position:relative;display:inline-block;width:35px;height:43px; transition:all 500ms ease;}
#header .icon_menu .icon_menu_bar{position:absolute;left:12%;width:76%;height:2px;background:#fff;}
#header .icon_menu .icon_menu_bar1 {top:24%;transition:transform 500ms ease 100ms, background 400ms ease 0ms}
#header .icon_menu .icon_menu_bar2 {top:45%;transition:opacity 500ms ease, background 400ms ease}
#header .icon_menu .icon_menu_bar3 {top:66%;transition:transform 500ms ease 250ms, background 400ms ease 0ms}


.menu_open #header .icon_menu {width:84px; width:84px; margin-right:-15px; margin-top:20px;}
.menu_open #header .icon_menu_bar1 {transform:rotate(45deg) translate3d(6px, 6.5px, 0)}
.menu_open #header .icon_menu_bar2 {opacity:0}
.menu_open #header .icon_menu_bar3 {transform:rotate(-45deg) translate3d(6px, -6.5px, 0)}
.menu_open #header.fixed_top .icon_menu .icon_menu_bar {background:#fff;}

#header.fixed_top {border-bottom:0; background:#fff;}
#header.fixed_top .logo {background-image:url('../images/common/logo_on.png');}
#header.fixed_top #gnb > ul > li > a {color:#282828;}
#header.fixed_top #gnb > ul > li:hover > a {color:#ed1c24;}
#header.fixed_top .icon_menu .icon_menu_bar {background:#ed1c24;}
#header.fixed_top {height:84px; top:-14px;}
#header.fixed_top #gnb > ul > li+li:after {background:rgba(219,219,219,0.6);}





#total_menu {position:fixed; z-index:8000; top:0%; left:0; width:100vw; height:100vh; background-color:transparent;}
#total_menu {transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s;-webkit-transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s;-moz-transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s;-o-transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s; transform:scale(0, 1);-moz-transform:scale(0, 1);-webkit-transform:scale(0, 1);-o-transform:scale(0, 1);-ms-transform:scale(0, 1);-ms-transform-origin:100% 0%;-webkit-transform-origin:100% 0%;transform-origin:100% 0%;}
#total_menu:before {position:fixed; top:0; right:0; display:block;width:370vw;height:auto;padding-top:370vw; background-color:#5f5d59; -ms-transform-origin:100% 0%;-webkit-transform-origin:100% 0;transform-origin:100% 0;border-radius:50%;z-index:1;content:"";}
#total_menu:before {transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);-webkit-transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);-moz-transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);-o-transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);transform:scale(0, 0) translate(50%, -50%);-moz-transform:scale(0, 0) translate(50%, -50%);-webkit-transform:scale(0, 0) translate(50%, -50%);-o-transform:scale(0, 0) translate(50%, -50%);-ms-transform:scale(0, 0) translate(50%, -50%);-webkit-transition-delay:0.35s;-moz-transition-delay:0.35s;-o-transition-delay:0.35s;-ms-transition-delay:0.35s;transition-delay:0.35s;}
#total_menu .bg {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; opacity:0; transition:opacity 0.5s 0.5s; -webkit-transition:opacity 0.5s 0.5s;}
#total_menu .bg > p {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; opacity:0; transition:opacity 0.5s; -webkit-transition:opacity 0.5s;}
#total_menu .bg > p.on {opacity:1;}
#total_menu .bg .about {position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; background: #000 no-repeat center; transition:opacity 0.5s;}
#total_menu ul {position:absolute; top:50%; left:0; right:0; z-index:100; transform: translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); text-align:center;}
#total_menu ul a {font-size:0;}
#total_menu ul b {display:inline-block; font-family: "Montserrat", sans-serif; color:rgba(255,255,255,0.2); font-size:100px; line-height:1.2; font-weight:800; letter-spacing:0; text-align:left; vertical-align:top;}
#total_menu .mask_motion {overflow:hidden;}
#total_menu li .mask {top:0px; left:0px; color:#ed1c24; font-weight:800; letter-spacing:0; text-align:left;}
#total_menu li .mask {transition-duration:0.6s; -webkit-transition-duration:0.6s;}
#total_menu .animate .original {}
#total_menu li {opacity:0; padding-left:800px; transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);}
#total_menu li:nth-child(1) {transition-delay: 0s;}
#total_menu li:nth-child(2) {transition-delay: 0.05s;}
#total_menu li:nth-child(3) {transition-delay: 0.1s;}
#total_menu li:nth-child(4) {transition-delay: 0.15s;}
#total_menu li:nth-child(5) {transition-delay: 0.2s;}
#total_menu li:nth-child(6) {transition-delay: 0.25s;}
#total_menu .copy {position:absolute; bottom:50px; left:6%; opacity:0; z-index:100; font-family: "Montserrat", sans-serif; letter-spacing:0; font-size:16px; color:#858b91; font-weight:700; transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);}

.menu_open #total_menu li {opacity:1; padding-left:0; transition-duration:0.6s; -webkit-transition-duration:0.6s;}
.menu_open #total_menu li:nth-child(1) {transition-delay: 0.8s;}
.menu_open #total_menu li:nth-child(2) {transition-delay: 0.85s;}
.menu_open #total_menu li:nth-child(3) {transition-delay: 0.9s;}
.menu_open #total_menu li:nth-child(4) {transition-delay: 0.95s;}
.menu_open #total_menu li:nth-child(5) {transition-delay: 1.0s;}
.menu_open #total_menu li:nth-child(6) {transition-delay: 1.05s;}
.menu_open #total_menu {transform:scale(1, 1);-moz-transform:scale(1, 1);-webkit-transform:scale(1, 1);-o-transform:scale(1, 1);-ms-transform:scale(1, 1);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;-ms-transition-delay:0s;transition-delay:0s;top:0%;left:0%;bottom:0%;right:0%}
.menu_open #total_menu:before {transform:scale(1, 1) translate(50%, -50%);-moz-transform:scale(1, 1) translate(50%, -50%);-webkit-transform:scale(1, 1) translate(50%, -50%);-o-transform:scale(1, 1) translate(50%, -50%);-ms-transform:scale(1, 1) translate(50%, -50%);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;-ms-transition-delay:0s;transition-delay:0s}
.menu_open #total_menu .bg {opacity:1;}
.menu_open #total_menu .copy {opacity:1; transition-delay: 0.7s;}



#total_menu.load .bg .about {background-image:url('../images/common/about.jpg');}
#total_menu.load .bg .web {background-image:url('../images/common/web.jpg');}
#total_menu.load .bg .marketing {background-image:url('../images/common/marketing.jpg');}
#total_menu.load .bg .portfolio {background-image:url('../images/common/portfolio.jpg');}
#total_menu.load .bg .client {background-image:url('../images/common/client.jpg');}
#total_menu.load .bg .contact {background-image:url('../images/common/contact.jpg');}

.menu_open #total_menu .bg .about {background-image:url('../images/common/about.jpg');}






.counsel {overflow:hidden; float:left;}
.counsel .cont {overflow:hidden;}
.counsel .frow_box01 {float:left; width:50%; padding-right:5px;}
.counsel .frow {overflow:hidden; margin:0 -6px;}
.counsel .frow+.frow {margin-top:12px;}
.counsel .fcol {float:left; padding:0 6px;}
.counsel .full {width:100%;}
.counsel .half {width:50%;}
.counsel input[type="text"], .counsel textarea, .counsel input[type="submit"] {padding-right:0;}
.counsel input[type="text"] {width:100%;}
.counsel .cont {overflow:hidden;}
.counsel textarea {width:100%; height:230px;}
.counsel .bottom > div {overflow:hidden;}
.counsel .agree * {vertical-align:top;}
.counsel .agree_wrap {height:97px; padding:16px 18px; overflow-y:scroll; font-size:15px; color:#999; line-height:1.4; background:#282828;}
.counsel input[type="submit"] {float:right; width:28%; height:97px; font-size:24px; color:#ffffff; font-weight:400; border:1px solid #000000; background:#ed1c24; cursor:pointer;}
.counsel .chk_area {margin:10px 0 15px; text-align:center;}
.counsel .chk_area * {vertical-align:middle;}
.counsel .chk_area label {font-size:17px; color:#f6f6f6;}


.counsel .filebox {overflow:hidden; position:relative; height:48px; padding-right:140px;}
.counsel .filebox input[type="file"] {position: absolute; top:-10px; left:0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } 
.counsel .filebox label {position:absolute; top:0; right:0px; width:141px; height:48px; border:1px solid #000000; color:#1c1c1c !important; font-size:20px; text-align:center; line-height:46px; background:#fff; cursor:pointer;}
.counsel .filebox .upload_name {float:left; width:100%;}
.counsel .filebox .btn_add {position:absolute; top:0; right:0; width:140px; height:40px; color:#fff; background:#6b6d6f;}

.counsel select, .counsel input[type="text"], .counsel input[type="password"], .counsel textarea {font-family:"Noto Sans KR",맑은고딕, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif, 나눔고딕, "Nanum Gothic", Dotum; border:0; font-size:20px; font-weight:300; color:#949494; background:#282828;}
.counsel select {height:48px; padding:5px 5px 5px 18px;}
.counsel input[type="text"], .counsel input[type="password"],.counsel input[type="file"] {height:48px; padding:10px 18px;}
.counsel textarea {vertical-align:top; padding:10px 18px;}

.btn_contact {overflow:hidden; position:fixed; bottom:80px; right:4.1%; z-index:20; display:inline-block; width:102px; height:102px; padding-top:61px; font-family: 'Montserrat', sans-serif; letter-spacing:0em; font-size:16px; color:#fff; text-align:center; font-weight:600; border-radius:50%; -webkit-border-radius:50%; background:url('../images/common/ico_chat.png') no-repeat center 23px #ed1c24; transition:right .46s cubic-bezier(0.77, 0, 0.175, 1) 0.2s; -webkit-transition:right .46s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;}
.btn_contact.on {right:-200px; transition-delay:0s; -webkit-transition-delay:0s;}





#q_contact {overflow-y:scroll;}
#q_contact:before {position:fixed; top:100%; left:0px; z-index:999; width:100%; height:100%; background:rgba(17,17,17,0.8); opacity:0; transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); content:'';}
#q_contact.open:before {top:0; opacity:1;}
#q_contact .counsel {position:absolute; right:-930px; z-index:1000; width:910px; padding:50px; border:10px solid #fff; background:#111111; transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0s; -webkit-transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0s;}
#q_contact.open .counsel {right:4.1%; transition-delay:0.1s; -webkit-transition-delay:0.1s;}
#q_contact h2 {margin-bottom:26px;}
#q_contact .btn_close02 {overflow:hidden; position:absolute; top:46px; right:51px; width:40px; height:39px; text-indent:-100px; background:url('../images/common/btn_close02.png') no-repeat center; background-size:100% auto;}
#q_contact textarea {height:76px;}
#q_contact .agree {float:none; overflow:hidden; width:100%;}
#q_contact input[type="submit"] {float:none; display:block; width:60%; max-width:310px; height:62px; margin:0 auto;}
#q_contact .counsel .chk_area {margin-top:9px;}

.resize #q_contact .counsel {transition: top 0s 0s; -webkit-transition: top 0s 0s;}




#info {padding:65px 0; border-top:1px solid #474747; background:#1c1c1c;}
#info .inwrap {overflow:hidden; width:95%; max-width:1220px; margin:0 auto;}
#info .contact {float:left; width:50%; padding-right:20px;}
#info .customer {float:left; width:28%;}
#info .btn_contact2 {float:right; width:22%; max-width:270px; padding:29px 10px 25px; border:1px solid #000; font-size:22px; color:#1c1c1c; line-height:1.2; text-align:center; font-weight:400; background:#ed1c24;}
#info .btn_contact2 i {display:block; width:40px; height:42px; margin:0 auto 16px; background:url('../images/common/icon_counsel.png') no-repeat; background-size:cover;}



#info .contact h2 {font-family: 'Montserrat', sans-serif; letter-spacing:0em; font-size:60px; color:#ed1c24; font-weight:800;}
#info .contact .t01 {margin-top:16px; font-size:27px; color:#fff; font-weight:400; line-height:1.32; word-break:keep-all;}
#info .customer li {position:relative; padding-left:16px; font-family: 'Montserrat', sans-serif; letter-spacing:0; font-weight:normal; font-size:17px; color:#c8c8c8; line-height:1.32;}
#info .customer li:before {position:absolute; top:50%; left:0; width:8px; height:8px; margin-top:-4px; background:url('../images/common/ico_bar.png') no-repeat left center; content:'';}
#info .customer li+li {margin-top:9px;}




#footer {padding:60px 0 80px; text-align:center; border-top:1px solid #474747; background:#1c1c1c;}
#address {margin-top:20px; font-size:14px; color:#999999; line-height:1.57; letter-spacing:0;}
#address p {margin:0 -8px;}
#address p span {display:inline-block; padding:0 8px;}



@media (max-width: 1500px) {
	#total_menu ul b {font-size:80px;}
	#header h1 {left:3%;}
	#header .btn_menu {right:3%;}
}

@media all and (max-width:1100px){
	
 
	#header, .sub #header {min-width:320px; height:57px; border-bottom:0; background:rgba(16,16,16,0.7);}
	#header .inwrap {min-width:auto;}
	#header h1 {top:21px; left:50%; margin-left:-40px;}
	#header .logo {width:79px; height:16px; background-size:100% auto;}
	
	#header .btn_menu {top:21px; left:15px; right:auto; z-index:15; width:16px; height:16px; margin-top:0; text-indent:-100px; background:url('/images/common/btn_menu.png') no-repeat center; background-size:100% auto;}
	.menu_open #header .btn_menu {background-image:url('/images/common/menu_close.png');}

	#header.fixed_top {height:57px; top:0; background:rgba(16,16,16,0.7);}
	#header.fixed_top .logo {background-image: url('../images/common/logo.png');}
	#header.fixed_top #gnb > ul > li > a {color:#ffffff;}
	

	.sub #header .logo {background-image: url('../images/common/logo.png');}
	.sub #header #gnb > ul > li > a {color:#ffffff;}

	#total_menu {display:none;}
	
	#gnb .pc {display:none;}	
	#gnb .m {display:block;}	
	#gnb {position:absolute; top:0; left:-100%; width:100%; height:100%; margin-left:0; transition:left 0.4s ease;}
	#gnb:before {position:absolute; top:57px; left:0; z-index:13; width:100%; height:1px; background:#ed1c24; content:'';}
	#gnb:after {position:fixed; top:0; left:0; z-index:9; width:0; height:100%; background:rgba(17,17,17,0.8); content:''; transition:width 0.4s;}
	.menu_open  #gnb {left:0;}
	.menu_open #gnb:after {width:100%;}
	#gnb > ul {display:block; position:relative; z-index:12; padding:82px 0 20px; background:#111111;}
	#gnb > ul > li {float:none; height:auto; padding:0 20px; }
	#gnb > ul > li+li a {border-top:1px solid #363636;}
	#gnb > ul > li > a {display:block; padding:0; font-weight:300; font-size:17px; color:#ffffff; line-height:2.5;}
	#gnb > ul > li+li:after {display:none;}

	.btn_contact {bottom:30px; right:10px; min-width:71px; height:30px; padding:0 10px 0 37px; font-size:13px; line-height:30px; border-radius:15px; -webkit-border-radius:15px; background:url('../images/common/ico_chat.png') no-repeat 16px center #ed1c24; background-size:16px auto;}
	.btn_contact:after {position:absolute; bottom:-7px; right:15px; width:17px; height:8px; background:url('../images/common/ico_arrow01.png') no-repeat center; background-size:17px auto; content:'';}
	
	

	.counsel {max-width:none;}
	.counsel .frow_box01 {width:100%; padding:0;}
	.counsel .frow_box02 {width:100%; padding:0;}
	.counsel .half {width:100%;}
	.counsel .half+.half {margin-top:8px;}
	.counsel .frow+.frow {margin-top:8px;}


	

	
	.counsel {width:100%;}
	#contact {width:100%; max-width:none; text-align:center;}
	#contact h2 {font-size:36px;}
	#contact .t01 {margin-top:6px; font-size:14px;}
	#contact .customer {margin:20px 0 15px; padding-left:12px;}
	#contact .customer li {padding-left:8px; font-size:13px; text-align:left;}
	#contact .customer li:before {width:5px; height:5px; background-size:5px auto;}
	#contact .customer li+li {margin-top:3px;}

	#q_contact .counsel {height:auto; right:-100%; width:92%; margin:0; padding:20px; border:4px solid #fff;}
	#q_contact.open .counsel {right:4%;}
	#q_contact .btn_close02 {width:20px; height:20px; top:22px; right:25px; background-size:100% auto;}
	#q_contact h2 {margin-bottom:13px;}
	#q_contact h2 img {height:52px;}
	#q_contact input[type="submit"] {height:45px; font-size:18px;}

	
	#info .contact {width:100%; margin-bottom:40px;}
	#info .customer {width:56%;}
	#info .btn_contact2 {width:44%;}
	

}
@media (max-width: 767.98px) {
	#info {padding:30px 0;}
	#info .inwrap {width:auto; margin:0 16px;}
	#info .contact {margin-bottom:20px;}
	#info .contact h2 {font-size:40px;}
	#info .contact .t01 {margin-top:10px; font-size:17px;}
	#info .customer {width:100%;}
	#info .customer li {padding-left:12px; font-size:14px;}
	#info .customer li:before {background-size:5px;}
	#info .customer li+li {margin-top:6px;}
	#info .btn_contact2 {float:left; width:100%; max-width:none; margin-top:20px; padding:15px; font-size:17px; background-size:20px;}
	#info .btn_contact2 i {display:inline-block; width:20px; height:21px; margin:0; margin-right:10px; vertical-align:middle;}


	.counsel input[type="submit"] {width:100%; height:35px; margin-top:6px; font-size:14px;}
	.counsel .chk_area {margin:10px 0 8px;}
	.counsel .chk_area label {font-size:13px;}
	.counsel .agree_wrap {height:70px; padding:10px; font-size:13px;}
	.counsel select,.counsel input[type="text"], .counsel input[type="password"] {height:40px; padding:10px; font-size:15px;}
	.counsel textarea {padding:10px; font-size:15px;}
	.counsel .filebox {height:40px; padding-right:70px;}	
	.counsel .filebox label {width:71px; height:40px; line-height:38px; font-size:15px;}


	#footer {padding:30px 0 40px;}
	#footer img {width:80px;}
	#address {margin-top:10px; font-size:13px;}
	#address p {margin:0 -4px;}
	#address p span {padding:0 4px;}

}