@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Kite+One);
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:500italic);
html {letter-spacing:-1px; width:100%; font-family:'NanumWeb','나눔고딕', '돋움', Dotum, AppleGothic, sans-serif; background-color:#000;}
@font-face {
    font-family: 'NanumWeb';
    src: url('../font/NanumGothic.eot');
    src: url('../font/NanumGothic.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumGothic.woff') format('woff'),
         url('../font/NanumGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Desktop size 1280~1920 */
#all_wrap {background-color:#fff; overflow:hidden;}
#all_wrap .white {background-color:#fff;}
/*header*/
#header {background-color:#fff; z-index: 300}
.m_header_cont {display:none;}
.header_cont {width:980px; margin:0 auto; font-size:14px; letter-spacing:1px;}
.header_cont:after{display:block; clear:both; content:"";}
.header_cont h1 {float:left; padding: 22px 0;}
.header_cont .main_gnb {float:left; margin-left:70px;}
.header_cont .main_gnb:after{display:block; clear:both; content:"";}
.header_cont .main_gnb li {float:left; margin-left:34px; position:relative; padding: 22px 0;}
.header_cont .main_gnb .on{}
.header_cont .main_gnb li a {color:#c0bebe;}
.header_cont .main_gnb li a:hover, .header_cont .main_gnb li a:focus{color:#000;}
.header_cont .main_gnb li .sub_gnb {position:absolute; left:-15px; top:65px;  font-size:13px;  display:none; z-index:400}
.header_cont .main_gnb li .sub_gnb li {float:none; margin-left:0px; background-color:#F4F4F4; padding:15px 0; position:relative;}
.header_cont .main_gnb li .sub_gnb li a {padding:0 45px 0 15px ; color:#c0bebe;}
.header_cont .main_gnb li .sub_gnb li a:hover, .header_cont .main_gnb li .sub_gnb li a:focus {color:#000;}
.header_cont .main_gnb li .sub_gnb .on {}
.header_cont .main_gnb li .sub_gnb .on a {color:#000;}
.header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb {position:absolute; left:145px; top:0; display:none;}
.header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li {background-color:#E4E1E1;}
.header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li a {color:#c0bebe;}
.header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li a:hover,.header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li a:focus {color:#000;}
.header_cont .main_gnb .on a {color:#000;}
.header_cont .top_gnb {float:right; overflow:hidden; margin-top:-5px; padding: 22px 0;}
.header_cont .top_gnb li {float:left; height:26px;}
.header_cont .top_gnb li img {cursor:pointer; position:relative;}
.header_cont .top_gnb .pdf_btn {background-color:#979797; }
.header_cont .top_gnb .pdf_btn a {color:#fff; font-size:11px; position:relative; left:0px; padding:7px 10px;  top:-10px; display:none;}
.header_cont .top_gnb .fb_btn {background-color:#53A5D9;}
.header_cont .top_gnb .fb_btn a { color:#fff; font-size:11px; position:relative; left:0px; padding:7px 10px;  top:-10px; display:none;}
/*content*/
.content {background-color:#000; padding:3px 0px 0; height:100%; overflow:hidden; z-index: 100; position:relative; min-height:800px; opacity:0;}
.content:after {display:block; clear:both; content:"";}
.content ul {width:16.66%; float:left;}
.content ul li {overflow:hidden; cursor:pointer; position:relative; margin:1px;}
.content ul li .img_box {position:relative;}
.content ul li p {display:none; width:88%; position:absolute; bottom:20px; color:#fff; text-align:right; font-size:14px; left:20px;}
.content ul li .launch {display:none;}
.content ul li p span {font-size:11px; color: #eee;}
.content ul li:hover p {display:block;}
.content ul li a {display:block; margin-bottom:-4px;}
.content ul li a img {width:100%; height:auto; opacity:.8;  transition: all .15s ease-in .0s;}
.content ul li:hover a img {opacity:.3; transform: scale(1.2); -moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);}
.content .black {background-color:#000; position:fixed; z-index:350; top:0; left:0; opacity:.9; width:100%; height:100%; display:none;}
.content .view_img_box {position:fixed; top:-50px; left:0; z-index:400; width:100%; text-align:center; display:none;}
.content .view_img_box .view_detail {/*margin:0 auto;*/ margin:8.2% 0 0;}
.content .view_img_box .view_detail .img_btn {display:inline-block; position:relative; overflow:visible;}
.content .view_img_box .view_detail .img_btn iframe {display:block; width:700px; height:400px; margin-bottom:25px;}
.content .view_img_box .view_detail .img_btn img {/*margin:0 auto;*/ max-height:700px; max-width:800px; }
.content .view_img_box .view_detail .img_btn span img {width:100%;}
.content .view_img_box .view_detail .img_btn .close_btn {display:block; position:absolute; right:0; top:-50px; width:33px; cursor:pointer;}
.content .view_img_box .view_detail .img_btn .right_btn {display:block; position:absolute; right:-50px; top:45%; cursor:pointer;  transition: all .15s ease-in .0s;}
.content .view_img_box .view_detail .img_btn .right_btn:hover {right:-55px;  transition: all .15s ease-in .0s;}
.content .view_img_box .view_detail .img_btn .left_btn {display:block; position:absolute; left:-50px; top:45%; cursor:pointer;  transition: all .15s ease-in .0s;}
.content .view_img_box .view_detail .img_btn .left_btn:hover {left:-55px;  transition: all .15s ease-in .0s;}
.content .view_img_box .view_detail .img_btn .launch {display:block; width:150px; border:1px solid #fff; color:#fff; text-align:center; position:absolute; left:0; bottom: -30px; font-weight:normal; font-size:14px; padding:10px 0; opacity:0.8;   transition: all .15s ease-in .0s;}
.content .view_img_box .view_detail .img_btn .launch:hover {background-color:#eee;  transition: all .15s ease-in .0s; color:#000;}

.makin_cont {height:805px;}
.content .making {width:101%; float:none;}
.content .making li {float:left;}
/*.making_8 {top: -465px;}
.making_9 {top: -338px;}
.making_10 {top: -583px;}
.making_11 {top: -583px;}
.making_12 {top: -338px;}*/

.content .client_wrap {background-color:#fff; width:100%; height:100%; margin-top:-4px; min-height:800px;}
.content .client_cont {width:980px; margin:0 auto;}
.content .client_wrap .client_cont ul {overflow:hidden; width:100%;}
.content .client_wrap .client_cont .comp_hide {display:none;}
.content .client_wrap .client_cont ul li {float:left; width:125px; padding:40px 18px; height:55px;}
.content .client_wrap .client_cont ul .txt {font-size:12px; letter-spacing:1px; height:17px; text-align:center; padding:59px 18px; color:#888; transition: all .15s ease-in .0s;}
.content .client_wrap .client_cont ul .comp_more {background-color:#eee;}
.content .client_wrap .client_cont ul #more:hover {color:#fff; background-color:#d1d1d1; transition: all .15s ease-in .0s;}
.content .client_wrap .client_cont ul li img {width:100%; height:100%;}

.content .m_profile_photo {display:none;}
.content .profile_photo {overflow:hidden; width:960px; margin:0 auto;}
.content .profile_photo ul {overflow:hidden; width:2880px; position:relative;}
.content .profile_photo ul li {float:left; width:960px; margin:0px;}
.content .about_txt {width:960px; margin:90px auto;}
.content .about_txt p {font-size:14px; color:#8a8a8a; margin:20px 0;}
.content .about_txt .c_gray {color:#b6b6b6;}
.content .about_txt h3 {font-size:20px; margin-top:40px;}

.content .contact_top {background-color:#7a7a7a;}
.content .contact_bg { background: url("../images/contact/CONTACT_bg.jpg") no-repeat center; background-size:auto; height:580px;}
.content .contact_bg .contact_box {width:960px; margin:0px auto; position:relative; top:290px;}
.content .contact_bg .contact_box:after {clear: both; content: ""; display: block;}
.content .contact_bg .contact_box .contact_txt {float:left; text-align:right; letter-spacing:1px;}
.content .contact_bg .contact_box .contact_txt:after {clear: both; content: ""; display: block;}
.content .contact_bg .contact_box .contact_txt p {font-size:12px;  color:#eee; margin:10px 0;}
.content .contact_bg .contact_box .contact_txt .big {font-size:16px;  color:#fff;}
.content .contact_bg .contact_box .contact_map {float:left; width:350px; height:350px; margin-left:50px; box-shadow:1px 1px 10px #888888; top:23px;}

.content .contact_bottom {}
.content .contact_mail {width:960px; margin:100px auto 0; display:block;}
.content .contact_mail h3 {margin-bottom:10px;}
.content .contact_mail ul {width:100%; overflow:hidden; margin-bottom:100px;}
.content .contact_mail ul li {width:33%; float:left;}
.content .contact_mail ul li img {width:100%;}
/*
.content .contact_mail  textarea {width:955px; border:1px solid #fff; height:500px;}
.content .contact_mail  .name_input {width:300px; padding:20px; color:#888; margin-bottom:30px; border:0px;}
.content .contact_mail  .mail_input {width:550px; padding:20px; color:#888; margin-left:22px; margin-bottom:30px; border:0px;}
.content .contact_mail  .send {width:960px; color:#fff; background-color:#ffa5a5; display:block; padding:15px 0; text-align:center; border:0px; cursor:pointer; margin-top:30px;} */

/*footer*/
.footer {background-color:#9C9C9C; text-align:center; padding:20px 0 30px; letter-spacing:1px;}
.footer .big {font-size:14px; color:#fff;}
.footer p {color:#fff; letter-spacing:0px; font-size:11px; color:#eee;}







/* Desktop size : 1024*~1280*/
@media screen and (max-width:1280px){
.content {padding:3px 0px 0;}
.content ul {width:20%;}
.makin_cont {height:1490px;}
}




/* Desktop size : 768*~1024*/
@media screen and (max-width:1024px){
.content {padding:3px 0px 0;}
.content ul {width:25%; }
.content .making li {float:left; width:24.5%;}
.makin_cont {height:1200px;}
}













/*=================================================================================================================================================*/



































/* Tablet Device : 480~768 이상 */
@media screen and (max-width:768px){
.header_cont {display:none;}
.m_header_cont {width:100%; font-size:14px; display:block; position:relative; z-index: 300;}
.m_header_cont .top_cont {overflow:hidden; padding: 15px 5%;}
.m_header_cont .top_cont h1 {float:left; width:114px; }
.m_header_cont .top_cont h1 img {width:100%; margin-top:3px;}
.m_header_cont .top_cont .top_gnb {float:right; overflow:hidden; margin-top:-5px;}
.m_header_cont .top_cont .top_gnb li {float:left; height:26px;}
.m_header_cont .top_cont .top_gnb li img {cursor:pointer; position:relative;}
.m_header_cont .top_gnb .pdf_btn {background-color:#979797; }
.m_header_cont .top_gnb .pdf_btn a {color:#fff; font-size:11px; position:relative; left:0px; padding:7px 10px;  top:-10px; display:none;}
.m_header_cont .top_gnb .fb_btn {background-color:#53A5D9;}
.m_header_cont .top_gnb .fb_btn a { color:#fff; font-size:11px; position:relative; left:0px; padding:7px 10px;  top:-10px; display:none;}
.m_header_cont .menu {display:block; width:90%; padding:20px 0 20px 10%; background-color:#f1f1f1; color:#a2a1a1;}
.m_header_cont .main_gnb {display:none; position:absolute; width:100%;}
.m_header_cont .main_gnb li {padding:20px 0 20px 10%; background-color:#e8e8e8;}
.m_header_cont .main_gnb li:first-child {padding:0; background-color:#e8e8e8;}
.m_header_cont .main_gnb li:first-child a {padding:20px 0 20px 10%; display:block; width:100%;}
.m_header_cont .main_gnb li a {color:#a2a1a1;}
.m_header_cont .main_gnb li:hover a, .m_header_cont .main_gnb li :focus a {color:#444;}
.m_header_cont .main_gnb li:hover .sub_gnb li a, .m_header_cont .main_gnb li :focus .sub_gnb li a {color:#a2a1a1;}
.m_header_cont .main_gnb li .sub_gnb {display:none;}
.m_header_cont .main_gnb li .sub_gnb li {padding:20px 0 20px 15%; background-color:#dddddd;}
.m_header_cont .main_gnb li .sub_gnb li:hover a, .m_header_cont .main_gnb li .sub_gnb li:focus a {color:#444;}
.m_header_cont .main_gnb li .sub_gnb li:hover .sub_2dep_gnb li a , .m_header_cont .main_gnb li .sub_gnb li:focus .sub_2dep_gnb li a  {color:#a2a1a1;}
.m_header_cont .main_gnb li .sub_gnb li a {padding:0;}
.m_header_cont .main_gnb li .sub_gnb li:first-child {padding:0;}
.m_header_cont .main_gnb li .sub_gnb li:first-child a {padding:20px 0 20px 15%;}
.m_header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb {display:none;}
.m_header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li {padding:20px 0 20px 20%;}
.m_header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li:hover a, .m_header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li:focus a {color:#444;}
.m_header_cont .main_gnb li .sub_gnb li .sub_2dep_gnb li a {padding:0;}
/*content*/
.content {padding:0;}
.content ul {width:33.3333%; margin:0;}
.list_4, .list_5 {display:none;}
.content ul li:hover p {font-size:12px; left:10px;}
.content ul li a img {width:100%; height:auto; opacity:.8;  transition: all 0s ease-in .0s;}
.content ul li:hover a img {transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);}
.content .view_img_box .view_detail .img_btn iframe {display:block; width:300px; height:180px; margin-bottom:10px;}
.content .view_img_box {position:fixed; top:-50px; left:0; z-index:400; width:100%; text-align:center; display:none;}
.content .view_img_box .view_detail {/*margin:0 auto;*/ margin:20% 0 0;}
.content .view_img_box .view_detail .img_btn img {/*margin:0 auto;*/ max-height:450px; max-width:280px; }
.content .view_img_box .view_detail .img_btn .close_btn {top:-30px; width:20px; }
.content .view_img_box .view_detail .img_btn .right_btn {width:15px; right:-25px}
.content .view_img_box .view_detail .img_btn .right_btn:hover {width:15px; right:-25px}
.content .view_img_box .view_detail .img_btn .left_btn {width:15px; left:-25px;}
.content .view_img_box .view_detail .img_btn .left_btn:hover {width:15px; left:-25px;}
.content .view_img_box .view_detail .img_btn .launch {display:block; width:150px; border:1px solid #fff; color:#fff; text-align:center; position:absolute; left:0; bottom: -30px; font-weight:normal; font-size:14px; padding:10px 0; opacity:0.8;   transition: all .15s ease-in .0s;}
.content .view_img_box .view_detail .img_btn .launch:hover {background-color:#eee;  transition: all .15s ease-in .0s; color:#000;}

.content .client_cont {width:100%;}
.content .client_wrap .client_cont ul li { padding:40px 4%;}
.content .client_wrap .client_cont ul .txt {padding:59px 4%;}
.content .client_wrap .client_cont ul .comp_more {background-color:#eee;}

.content .profile_photo {display:none;}
.content .m_profile_photo {display:block; width:100%;}
.content .about_txt {width:80%; margin:50px 10% 0;}
.content .about_txt p {font-size:11px; color:#8a8a8a; margin:10px 0;}
.content .about_txt .c_gray {color:#b6b6b6;}
.content .about_txt h3 {font-size:16px; margin-top:20px;}

.content .contact_bg { height:450px;}
.content .contact_bg .contact_box {width:100%; top:290px; margin-top:250px;}
.content .contact_bg .contact_box .contact_txt {width:90%; padding:0 5%; position:relative; top:-280px; z-index:100;}
.content .contact_bg .contact_box .contact_txt h3 {width:400px; left:40%; position:relative; }
.content .contact_bg .contact_box .contact_txt h3 img {width:100%;}
.content .contact_bg .contact_box .contact_txt p {font-size:12px; position:relative; top:40px;}
.content .contact_bg .contact_box .contact_txt .big {font-size:16px; position:relative; top:40px;}
.content .contact_bg .contact_box .contact_map {z-index:0; float:left; width:100%; height:300px; margin:0px; box-shadow:none; top:-860px;}

.content .making li {float:left; width:32.8%;}

.content .contact_mail {width:80%; margin:0px 10%; display:inline-block; position:relative; top:-50px; }
.content .contact_mail h3 {margin-bottom:10px; display:block;}
.content .contact_mail ul {width:100%; overflow:hidden; margin-bottom:100px; display:block;}
.content .contact_mail ul li {width:32%; float:left;}
.content .contact_mail ul li img {width:100%;}


/*footer*/
.footer {background-color:#9C9C9C; text-align:center; padding:20px 0 30px; letter-spacing:1px;}
.footer .big {font-size:12px; color:#fff;}
.footer p {color:#fff; letter-spacing:0px; font-size:10px; color:#eee;}
}







/* Mobile Device  */
@media screen and (max-width:480px){
.content ul {width:50%; margin:0;}
.list_3 {display:none;}

.content .client_wrap .client_cont ul li { padding:20px 3.7%; height:30px; width:60px;}
.content .client_wrap .client_cont ul .txt {padding:29px 4%; font-size:10px;}

.content .contact_bg { height:300px;}
.contact_mail {padding:20px 0;}
.content .contact_bg .contact_box .contact_txt h3 {width:200px; left:40%; position:relative; }
.content .contact_bg .contact_box .contact_map {top: -794px;}

.content .making li {float:left; width:48.5%;}
.makin_cont {height:100%;}
.content .mail_bot {height:300px;}
.content .contact_mail {top:-180px; }
}