@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@font-face {font-family: Frutiger LT 45 Light; src: url(webfonts/Frutiger LT 45 Light.eot);}
@font-face {font-family: Frutiger LT 45 Light; src: url(webfonts/Frutiger LT 45 Light.woff);}
@font-face {font-family: Frutiger LT 45 Light; src: url(webfonts/Frutiger LT 45 Light.ttf);}
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
/* reset css */
html,body{margin:0;padding:0;}
body{}
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td{margin:0;padding:0;}
input,textarea,select,td,th,button{vertical-align:middle;}
input[type="image"]{vertical-align:baseline;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
table{border-spacing:0;border-collapse:collapse;}
ol,ul,li{list-style:none;}
hr, legend, caption, .skip{position:absolute;left:-5000px;top:0;visibility:hidden;overflow:hidden;line-height:0.1%;font-size:0.1%;width:0.1%;height:0.1%;}
caption{position:relative;}
img,fieldset{border:0 none;}
label,button{cursor:pointer;}
em,address{font-style:normal;}

a:focus{text-decoration:underline;}

/* layout */
#bg{}
#bg .opacity{display:none; width:100%; height:100%; z-index:2; position:fixed; left:0; top:0; background:url('../image/opacity_bg.png') repeat;}
#bg ul li{position:fixed; right:0; top:0; display:none;}
#bg ul li:first-child{display:block;}

.m_quick .opacity{display:none; width:100%; height:100%; z-index:2; position:fixed; left:0; top:0; background:url('../image/opacity_bg.png') repeat;}
.m_quick ul li{display:none;}
.m_quick ul li:first-child{display:inline-block;}
/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/*메인*/
.logo{position:fixed; z-index:3;left:53px; top:43px;}
.navi{position:fixed; z-index:3;left:53px; top:143px; font-family: 'Open Sans', sans-serif; font-size:17px;}
.navi ul li{/*height:28px;*/}
.navi ul li a{/*height:28px;*/ color:#1d1d1b; text-decoration:none;}
.navi ul li a:hover{text-decoration:underline; color:#CDA1A2;}
.navi .active{color:#000;}
.navi .abr_menu{display:none; padding-left:21px; padding-top:3px; padding-bottom:4px;}
.navi .por_menu{display:none; padding-left:21px; padding-top:3px; padding-bottom:4px;}
.quick_box{position:absolute; bottom:35px; left:53px; z-index:3;}
.mimes{margin-top:37px;}
.copyright{position:absolute; bottom:35px; right:32px; z-index:2;}

/*포트폴리오*/
.port_list{position:absolute; z-index:3; left:50%; top:50%; width:800px; height:696px; margin:-348px 0 0 -400px; }
.pyung li{float:left; font-family: 'Open Sans', sans-serif; font-size:13px;}
.pyung li+li{margin-left:20px;}
.pyung li a{color:#b5b5b5; text-decoration:none;}
.pyung .active{color:white; text-decoration:underline;}
.pyung li a:hover{color:white;}
.pyung{width:145px;overflow:hidden;}
.port_top li{float:left;}
.port_top .pt_la{margin-left:470px;}
.port_top{overflow:hidden; padding-bottom:14px;}

.lis_box li{float:left; width:263px; height:314px; background:url('../image/pot_op_bg.png');}
.lis_box li a{display:block; text-decoration:none;}
.lis_box li a p{color:black; height:23px; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:16px; margin-top:8px; margin-left:13px;}
.lis_box li a span{color:black; font-family: 'Nanum Gothic', sans-serif; margin-left:13px; font-size:14px; margin-top: 2px; display:block;}
.lis_box .lis_margin{margin-left:5px;}
.lis_box .top_margin{margin-top:5px;}
.lis_box{overflow:hidden;}
.p_page{width:70px; margin:0 auto; padding-top:15px; color:#CDA1A2; font-family: 'Open Sans', sans-serif; font-size:12px;}

/*포트폴리오 상세 전체화면*/
.black_bg{width:100%; height:100%; background-color:black; opacity:.8; position:absolute;z-index:5;}
.port_view{}
.po_v_prev{position:absolute; top:50%; left: 40px; z-index:7;}
.po_v_next{position:absolute; top:50%; right: 40px; z-index:7;}
.po_v_cont{position:absolute; top:50%; left:50%; width:815px; height:559px; border:2px solid #878787; margin:-279px 0 0 -407px; z-index:6;}
.po_v_nav{color:white; font-family: 'Open Sans', sans-serif; font-size:13px; margin:0 auto; width:36px; margin-top:10px;}
.po_v_close{position:absolute; z-index:7; right:-15px; top:-15px;}
.po_water{position:absolute; z-index:10; left:50%; top:50%; margin:-39px 0 0 -115px;}

/*프로젝트 리스트*/
.prj_cont{position:absolute; z-index:3; width:569px; height:529px; left:50%; top:50%; margin:-264px 0 0 -284px;}
.prjb01{float:left; margin-right:7px; margin-bottom:7px; position:relative;width:227px; height:240px; background:url('../image/prj_01.png') no-repeat 0 0; }
.prjb01 div{position:absolute; bottom:0; height:50px; width:214px; padding:7px 0 0 13px; overflow:hidden; background-color:rgba(255, 255, 255, 0.5);}
.prjb01 p{font-family: 'Open Sans', sans-serif; font-weight: 700;  font-size:16px; color:black;}
.prjb01 span{display:block; margin-top:0; font-family: 'Nanum Gothic', sans-serif; font-size:13px; color:black;}
.prjb02{float:right; margin-bottom:7px; position:relative; width:335px; height:334px; background:url('../image/prj_02.png') no-repeat 0 0;}
.prjb02 div{position:absolute; bottom:0; height:50px; width:322px; padding:7px 0 0 13px; overflow:hidden; background-color:rgba(255, 255, 255, 0.5);}
.prjb02 p{font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:15px; color:black;}
.prjb02 span{display:block; margin-top:0; font-family: 'Nanum Gothic', sans-serif; font-size:13px; color:black;}
.prjb03{float:left; position:relative; width:227px; height:282px; background:url('../image/prj_03.png') no-repeat 0 0;}
.prjb03 div{position:absolute; bottom:0; height:50px; width:214px; padding:7px 0 0 13px; overflow:hidden; background-color:rgba(255, 255, 255, 0.5);}
.prjb03 p{font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:15px; color:black;}
.prjb03 span{display:block; margin-top:0; font-family: 'Nanum Gothic', sans-serif; font-size:13px; color:black;}
.prjb04{float:right; position:relative; width:335px; height:187px; background:url('../image/prj_04.png') no-repeat 0 0;}
.prjb04 div{position:absolute; bottom:0; height:50px; width:322px; padding:7px 0 0 13px; overflow:hidden; background-color:rgba(255, 255, 255, 0.5);}
.prjb04 p{font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:15px; color:black;}
.prjb04 span{display:block; margin-top:0; font-family: 'Nanum Gothic', sans-serif; font-size:13px; color:black;}

/* 프로젝트 뷰 -- 레지던스 */
.black_bg2{display:none;width:100%; height:100%; background-color:black; opacity:.8; position:absolute;z-index:5;}
.prj_view{display:none; position:absolute; top:50%; left:50%; width:786px; height:637px; margin:-318px 0 0 -393px; z-index:6; background-color:#2e2e2e; border-radius:12px;}
.prj_view h3{float:left; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:18px; color:#b3b3b3;}
.prj_view h4{float:left; margin:5px 0 0 10px; font-family: 'Nanum Gothic', sans-serif; font-size:14px; color:#b3b3b3;}
.prj_title{width:749px; height:40px; border-bottom:1px solid #464646; padding:30px 0 0 36px;}
.prj50p{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj50p p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj50p ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj50p ul li+li{margin-top:8px;}
.prj40p{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj40p p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj40p ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj40p ul li+li{margin-top:8px;}
.prj30p{float:left; width:262px; min-height:100px;font-family: 'Nanum Gothic', sans-serif;}
.prj30p p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj30p ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj30p ul li+li{margin-top:8px;}
.prj_v1_close{position:absolute; z-index:7; right:-15px; top:-15px;}

/* 프로젝트 뷰 -- HOSPITAL */
.black_bg3{display:none;width:100%; height:100%; background-color:black; opacity:.8; position:absolute;z-index:5;}
.prj_view2{display:none;position:absolute; top:50%; left:50%; width:786px; height:637px; margin:-318px 0 0 -393px; z-index:6; background-color:#2e2e2e; border-radius:12px;}
.prj_view2 h3{float:left; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:18px; color:#b3b3b3;}
.prj_view2 h4{float:left; margin:5px 0 0 10px; font-family: 'Nanum Gothic', sans-serif; font-size:14px; color:#b3b3b3;}
.prj_title2{width:749px; height:40px; border-bottom:1px solid #464646; padding:30px 0 0 36px;}
.prj50p2{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj50p2 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj50p2 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj50p2 ul li+li{margin-top:8px;}
.prj40p2{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj40p2 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj40p2 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj40p2 ul li+li{margin-top:8px;}
.prj30p2{float:left; width:262px; min-height:100px;font-family: 'Nanum Gothic', sans-serif;}
.prj30p2 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj30p2 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj30p2 ul li+li{margin-top:8px;}
.prj_v1_close2{position:absolute; z-index:7; right:-15px; top:-15px;}

/* 프로젝트 뷰 -- COMMERCIAL */
.black_bg4{display:none;width:100%; height:100%; background-color:black; opacity:.9; position:absolute;z-index:5;}
.prj_view3{display:none;position:absolute; top:50%; left:50%; width:786px; height:637px; margin:-318px 0 0 -393px; z-index:6; background-color:#2e2e2e; border-radius:12px;}
.prj_view3 h3{float:left; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:18px; color:#b3b3b3;}
.prj_view3 h4{float:left; margin:5px 0 0 10px; font-family: 'Nanum Gothic', sans-serif; font-size:14px; color:#b3b3b3;}
.prj_title3{width:749px; height:40px; border-bottom:1px solid #464646; padding:30px 0 0 36px;}
.prj50p3{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj50p3 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj50p3 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj50p3 ul li+li{margin-top:8px;}
.prj40p3{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj40p3 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj40p3 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj40p3 ul li+li{margin-top:8px;}
.prj30p3{float:left; width:262px; min-height:100px;font-family: 'Nanum Gothic', sans-serif;}
.prj30p3 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj30p3 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj30p3 ul li+li{margin-top:8px;}
.prj_v1_close3{position:absolute; z-index:7; right:-15px; top:-15px;}

/* 프로젝트 뷰 -- OFFICIAL */
.black_bg5{display:none;width:100%; height:100%; background-color:black; opacity:.8; position:absolute;z-index:5;}
.prj_view4{display:none;position:absolute; top:50%; left:50%; width:786px; height:637px; margin:-318px 0 0 -393px; z-index:6; background-color:#2e2e2e; border-radius:12px;}
.prj_view4 h3{float:left; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:18px; color:#b3b3b3;}
.prj_view4 h4{float:left; margin:5px 0 0 10px; font-family: 'Nanum Gothic', sans-serif; font-size:14px; color:#b3b3b3;}
.prj_title4{width:749px; height:40px; border-bottom:1px solid #464646; padding:30px 0 0 36px;}
.prj50p4{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj50p4 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj50p4 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj50p4 ul li+li{margin-top:8px;}
.prj40p4{float:left; width:262px; min-height:100px; font-family: 'Nanum Gothic', sans-serif;}
.prj40p4 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj40p4 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj40p4 ul li+li{margin-top:8px;}
.prj30p4{float:left; width:262px; min-height:100px;font-family: 'Nanum Gothic', sans-serif;}
.prj30p4 p{font-size:16px; color:white; margin:30px 0 20px 63px;}
.prj30p4 ul li{font-size:13px; color:#929292; margin-left:63px;}
.prj30p4 ul li+li{margin-top:8px;}
.prj_v1_close4{position:absolute; z-index:7; right:-15px; top:-15px;}

/* 포트폴리오 메인 */
.mpo_box{position:absolute; width:904px; height:456px; top:50%; left:50%; margin:-228px 0 0 -452px; overflow:hidden;}
.mpo_box a{display:block; float:left; color:black;}
.mpo_wh{background-color:white; opacity:.5; width:205px; height:66px; padding:12px 0 0 15px;}
.mpo_wh p{font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:15px; }
.mpo_wh span{font-family: 'Nanum Gothic', sans-serif; font-size:14px; }
#esm01{font-size:14px; letter-spacing:-0.02em;}
#esm02{font-size:13px; letter-spacing:-0.02em;}
.mpo01{float:left;}
.mpo02{float:left; margin-left:8px;}
.mpo03{float:left; margin-left:8px;}
.mpo04{float:left; margin-left:8px;}

/* 프로세스 */
.process_map{position:absolute; z-index:7; top:50%; left:50%; width:1168px; height:334px; margin:-167px 0 0 -584px;}

/* 찾아오시는길 */
.map{position:absolute; z-index:7; top:50%; left:50%; width:543px; height:541px; margin:-270px 0 0 -271px;}
.map2{ top:63%; left:39%;}

/* 컨설턴트 */
.consult{position:absolute; z-index:7; top:50%; left:50%; width:607px; height:366px; margin:-183px 0 0 -303px;}
.consult tr td{width:607px; border-bottom:1px solid #646464;}
.consult .td{width:93px; height:38px; font-family: 'Nanum Gothic', sans-serif; font-size:13px; color:#646464; padding-left:14px;}
.consult input{height:26px; background-color:#3c3c3c; border:none; width:100%; color:#c8c8c8; font-family: 'Nanum Gothic', sans-serif; }
.consult  textarea{background-color:#3c3c3c; border:none; width:100%; height:157px; color:#c8c8c8;  font-family: 'Nanum Gothic', sans-serif; line-height:140%;}
.consult .td05_box{padding:6px 0 6px 0;}
.c_send{position:absolute; bottom:0; right:0;}
.td01,.td01_box{border-top:1px solid #646464;}

/* 디렉터 */
.directors{position:absolute; z-index:7; top:60%; left:20%; width:374px; height:297px; margin:-87px 0 0 -174px;}

/* philosophy */
.phil{position:absolute; z-index:7; top:50%; left:50%; width:251px; height:225px; margin:-112px 0 0 -125px;}

@media screen and (max-width: 940px) {
.mpo_box{width:100%; left:0; margin-left:0; height:auto;}
.prj_cont{width:100%;}
.prjb01, .prjb03{width:40%;}
.prjb02, .prjb04{width:55%;}
.mpo_box{top:70%;}
.mpo_box > a{width:25%;}
.mpo_box > a > div{padding:5px;}
.mpo_box img{width:100%;}
.mpo_wh{width:auto;}
.mpo_wh p{font-size:13px; letter-spacing:-1px; line-height:16px;}
.mpo_wh span{font-size:12px; letter-spacing:-1px;}
.lis_box li{width:32%; height:auto;}

.port_list{width:100%; left:0; margin-left:0; top:70%; height:auto;;}
.lis_box{width:100%;}
.lis_box img{width:100%;}
.lis_box li{vertical-align:top;}
.lis_box li a p{font-size:13px; letter-spacing:-1px;}
.lis_box li a span{font-size:12px; letter-spacing:-1px;}

.consult{width:100%; height:auto; left:0; margin-left:0;}
.c_send{bottom:-35px;}
}