@charset "utf-8";

::selection {background-color:#fbaf0d;}
::-moz-selection {background-color:#fbaf0d;}


#wrap {position:relative; width:100%; min-width:320px; margin:0 auto; text-align:center;}
.wrap {display:inline-block; vertical-align:middle; position:relative; width:1200px; text-align:left;}

/* background */
.background {display:inline-block; position:fixed; left:0; right:0; top:0; bottom:0;}
.background .b_effect {}
.background .b_effect:before {content:''; position:fixed; left:0; right:0; top:0; bottom:0; z-index:2; background-image:url('../images/b_effect.png');}
.background .b_effect:after {content:''; display:inline-block; vertical-align:middle; position:absolute; left:0; right:0; top:0; bottom:0; z-index:3; background:linear-gradient(to top, rgba(35, 109, 232, 0.5) 0%, rgba(27, 67, 139, 0) 50%);}
.background .b_img {display:inline-block; position:fixed; left:0; right:0; top:0; bottom:0; z-index:1; background-repeat:no-repeat; background-position:center; background-size:cover;}
#main.background .b_img {background-image:url('../images/main.jpg');}
#sub.background .b_img {background-image:url('../images/sub.jpg');}

/* header */
#header {display:inline-block; position:fixed; left:0; right:0; top:0; z-index:99999; height:180px; background:linear-gradient(to bottom, rgba(32, 33, 35, 0.7) 50%, rgba(32, 33, 35, 0) 100%);}
#header .logo {display:inline-block; position:absolute; left:70px; width:250px; height:60px; margin:70px 0; background-image:url('../images/logo.png'); background-image:url('../images/ie/logo.png') \9; background-repeat:no-repeat; background-position:center; background-size:250px auto; transition:0.2s;}
#header .logo h1 {text-indent:-9999px;}
#header .h_btn {display:none; z-index:1;}
#header .h_bg {display:inline-block; position:fixed; right:0; top:0; bottom:0; z-index:0; background-color:#236de8;}

/* nav */
#nav {display:inline-block; position:absolute; right:70px; top:70px;}
#nav ul {display:inline-block; float:right;}
#nav ul li {display:inline-block; vertical-align:middle; float:left; margin-left:90px;}
#nav ul li a {display:block; position:relative; font-size:18px; font-weight:400; line-height:40px; color:#fff;}
#nav ul li a:before {content:''; position:absolute; left:50%; right:50%; bottom:0; height:2px; background-color:#fbaf0d; transition:0.2s;}
#nav ul li.on a, #nav ul li a:hover {color:#fbaf0d;}
#nav ul li.on a:before, #nav ul li a:hover:before {left:0; right:0;}

/* footer */
#footer {display:block; position:relative; z-index:9999; padding:70px;}
#wrap.fixed #footer {display:inline-block; position:fixed; left:0; right:0; bottom:0;}
#footer .f_info {display:block; text-align:left;}
#wrap.fixed #footer .f_info {display:inline-block;position:absolute; left:70px; bottom:70px;}
#footer .f_info h1 {margin-bottom:10px; font-size:14px; font-weight:700; color:#fff;}
#footer .f_info ul {margin-bottom:10px;}
#footer .f_info li {font-size:12px; line-height:22px; color:#fff;}
#footer .f_info li a {display:inline-block; font-size:12px; line-height:22px; color:#fff;}
#footer .f_info li a:hover {text-decoration:underline;}
#footer .f_info p {font-size:10px; color:#fff;}
#footer .f_info p mark {color:#236de8;}
#footer .f_download {display:inline-block; position:absolute; right:70px; bottom:70px; width:150px; height:28px; border:1px solid #fff; border-radius:5px; text-align:center; transition:0.2s;}
#footer .f_download:hover {border-color:#236de8; background-color:#236de8;}
#footer .f_download p {display:inline-block; vertical-align:middle; margin-right:3px; font-size:12px; line-height:28px; color:#fff;}
#footer .f_download i {display:inline-block; vertical-align:middle; width:12px; height:12px; background-image:url('../images/i_download.png'); background-image:url('../images/ie/i_download.png')\9; background-repeat:no-repeat; background-size:12px auto; background-position:center;}

/* main */
#contents.main {position:fixed; left:140px; right:140px; top:50%; margin-top:-180px; padding:0; text-align:left;}
#contents.main .m_title {margin-bottom:50px; font-family:'Roboto Slab'; font-weight:700; font-size:80px; line-height:80px; color:#fff; letter-spacing:5px;}
#contents.main .m_title mark {position:relative; color:#fff;}
#contents.main .m_title mark:before {content:''; position:absolute; z-index:-1; left:-5px; right:-5px; top:10px; bottom:10px; background-color:#fbaf0d;}
#contents.main .m_txt {margin-bottom:60px; font-size:20px; line-height:20px; color:#fff; letter-spacing:3px;}
#contents.main .m_txt mark {font-weight:700; color:#fbaf0d;}
#contents.main .m_btn {display:inline-block; position:relative; width:300px; height:70px; border-radius:10px; font-size:16px; line-height:70px; text-align:center; color:#fff;}
#contents.main .m_btn:before {content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; border:1px solid #fff; border-radius:10px; transition:0.2s;}
#contents.main .m_btn:hover {font-weight:500;}
#contents.main .m_btn:hover:before {border-color:#236de8; background-color:#236de8;}

/* contents */
#contents {position:relative; z-index:999; padding-top:180px;}
#contents .c_top {margin-bottom:60px;}
#contents .c_top h2 {position:relative; margin-top:30px; margin-bottom:20px; padding-top:70px; font-size:50px; font-weight:400; line-height:50px; color:#fff;}
#contents .c_top h2:before {content:''; position:absolute; left:50%; top:0; width:6px; height:6px; margin-left:-9px; border-radius:30px; border:5px solid #236de8;}
#contents .c_top h2:after {content:''; position:absolute; left:50%; top:26px; width:2px; height:20px; margin-left:-1px; background-color:#fbaf0d; }
#contents .c_top p {font-size:20px; line-height:20px; color:#d5d5d5;}

/* 문의하기 */
.c_request {position:relative; width:800px; margin:0 auto; text-align:left;}
.c_request li {display:block; position:relative; margin-bottom:20px; padding-left:200px;}
.c_request li:last-child {margin-bottom:0;}
.c_request li .cr_txt {display:inline-block; position:absolute; left:0; top:0; width:200px; font-size:18px; font-weight:400; line-height:50px; color:rgba(255,255,255,0.7);}
.c_request li .input {width:100%; height:50px; margin:0; padding:0; border:0px; border-radius:10px; font-size:16px; text-indent:20px; color:#8e8e8e; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}
.c_request li .textarea {display:block; width:100%; height:150px;  margin:0; padding:20px; border:0px; border-radius:10px; font-size:16px; line-height:26px; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}
.c_request .cr_agree input {display:none;}
.c_request .cr_agree label {cursor:pointer;}
.c_request .cr_agree label i {display:inline-block; vertical-align:middle; position:relative; width:50px; height:50px; overflow:hidden; border-radius:10px; background-color:#fff; transition:0.2s; -webkit-transition:0.2s; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}
.c_request .cr_agree label i:after {content:''; display:inline-block; vertical-align:middle; position:absolute; left:17px; top:18px; width:14px; height:6px; border-bottom:3px solid currentColor; border-left:3px solid currentColor; color:#d2d2d2; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transition:0.2s; -webkit-transition:0.2s;}
.c_request .cr_agree input:checked + label i:after {color:#236de8;}
.c_request .cr_agree label span {display:inline-block; vertical-align:middle; margin-left:10px; font-size:16px; color:rgba(255,255,255,0.7); line-height:50px;}
.c_request .cr_agree input:checked + label span {color:rgba(255,255,255,1);}
.c_request .cr_agree a {display:inline-block; vertical-align:middle; margin-left:10px; font-size:16px; font-weight:400; color:#fbaf0d;}
.c_request .cr_agree a:hover {text-decoration:underline;}
.c_request .cr_btn {display:inline-block; position:absolute; right:-150px; top:50%; width:100px; height:100px; border-radius:100px; margin-top:-50px; transition:0.2s;}
.c_request .cr_btn:hover {background-color:#236de8;}
.c_request .cr_btn:before {content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:3px solid #fff; border-radius:100px;}
.c_request .cr_btn i {display:inline-block; position:relative; width:0px; height:20px; transform:rotate(45deg);}
.c_request .cr_btn i:before {content:''; display:inline-block; position:absolute; right:0; top:0;width:14px; height:4px; background-color:#fff; border-radius:10px;}
.c_request .cr_btn i:after {content:''; display:inline-block; position:absolute; right:0; top:0; width:4px; height:14px; background-color:#fff; border-radius:10px;}
.c_request .cr_btn p {font-size:18px; font-weight:500; color:#fff;}

/* 회사소개 */
.c_info {width:1200px; margin:0 auto 80px auto; text-align:left;}
.c_info .ci_box {width:700px; margin:0 auto 80px auto; text-align:center;}
.c_info .ci_box strong {color:#fff;}
.c_info .ci_box .cib_title {margin-bottom:30px; font-size:30px; font-weight:500; line-height:40px; color:#236de8;}
.c_info .ci_box .cib_txt {color:#dadfe7; line-height:24px;}
.c_info .ci_list {display:inline-block; vertical-align:middle; width:100%; letter-spacing:0.5px;}
.c_info .ci_list > li {display:inline-block; vertical-align:middle; float:left; width:25%;}
.c_info .ci_list > li > div {margin:0 30px;}
.c_info .ci_list > li i {display:block; width:80px; height:80px; margin:0 auto; background-image:url('../images/i_info.png'); background-image:url('../images/ie/i_info.png') \9; background-repeat:no-repeat; background-size:80px auto;}
.c_info .ci_list > li:first-child i {background-position:top center;}
.c_info .ci_list > li:nth-child(2) i {background-position:0 -80px;}
.c_info .ci_list > li:nth-child(3) i {background-position:0 -160px;}
.c_info .ci_list > li:nth-child(4) i {background-position:0 -240px;}
.c_info .ci_list > li .cil_title {margin-top:10px; margin-bottom:30px; font-size:22px; font-weight:700; line-height:22px; color:#fff; text-align:center;}
.c_info .ci_list > li .cil_type {margin-bottom:20px;}
.c_info .ci_list > li .cil_type li {position:relative; padding-left:10px; line-height:30px; color:#999; font-weight:400;}
.c_info .ci_list > li .cil_type li:before {content:''; position:absolute; left:0; top:14px; width:3px; height:3px; border-radius:10px; background-color:#236de8;}
.c_info .ci_list > li .cil_txt {color:#c1c5ca; line-height:24px;  letter-spacing:-0.5px;}

/* 포트폴리오 */
.c_portfolio {width:1200px; margin:0 auto; text-align:left;}
.c_portfolio .cp_list {position:relative; width:100%;}
.c_portfolio .cp_list:before {content:''; position:absolute; left:0; right:0; top:0; height:1px; background-color:rgba(255,255,255,0.1);}
.c_portfolio .cp_list > li {position:relative; padding:50px 0;}
.c_portfolio .cp_list > li:before {content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:rgba(255,255,255,0.1);}
.c_portfolio .cp_list .cpl_title {position:relative; margin:20px 0; padding-top:30px; font-size:30px; font-weight:500; line-height:30px; color:#fff;}
.c_portfolio .cp_list .cpl_title:before {content:''; position:absolute; left:0; top:0; width:24px; height:6px; background-color:#236de8; border-radius:5px;}
.c_portfolio .cp_list .cpl_info {margin-bottom:20px;}
.c_portfolio .cp_list .cpl_info li {position:relative; padding-left:20px;}
.c_portfolio .cp_list .cpl_info li:before {content:''; position:absolute; left:0; top:15px; width:4px; height:4px; border:3px solid #fbaf0d; border-radius:5px;}
.c_portfolio .cp_list .cpl_info li span, .c_portfolio .cp_list .cpl_info li p {display:inline-block; vertical-align:middle; font-size:18px; line-height:40px; letter-spacing:-0.5px;}
.c_portfolio .cp_list .cpl_info li span {width:130px; color:rgba(255,255,255,0.6);}
.c_portfolio .cp_list .cpl_info li p {color:#fff;}
.c_portfolio .cp_list .cpl_info li a {color:#fff; transition:0.2s;}
.c_portfolio .cp_list .cpl_info li a:hover {color:#fbaf0d;}
.c_portfolio .cp_list .cpl_img {display:inline-block; position:absolute; right:0; top:50px; width:450px; height:240px; border-radius:10px; background-repeat:no-repeat; background-position:top center; background-size:cover; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}
.c_portfolio .cp_list .cpl_img.haemoro {background-image:url('../images/p_haemoro.jpg');}
.c_portfolio .cp_list .cpl_img.serim {background-image:url('../images/p_serim.jpg');}
.c_portfolio .cp_list .cpl_img.hyemin {background-image:url('../images/p_hyemin.jpg');}
.c_portfolio .cp_list .cpl_img.lg {background-image:url('../images/lg.PNG');}
.c_portfolio .cp_list .cpl_img.coway {background-image:url('../images/coway.PNG');}
.c_portfolio .cp_list .cpl_img.cu {background-image:url('../images/cu.PNG');}
.c_portfolio .cp_list .cpl_img.dino {background-image:url('../images/dino.PNG');}
.c_portfolio .cp_list .cpl_img.kyunggi {background-image:url('../images/kyunggi.PNG');}
.c_portfolio .cp_list .cpl_img.bbwood {background-image:url('../images/bbwood.PNG');}
.c_portfolio .cp_list .cpl_img.tiretrack {background-image:url('../images/tiretrack.PNG');}
.c_portfolio .cp_list .cpl_img.yeil {background-image:url('../images/yeil.PNG');}
.c_portfolio .cp_list .cpl_img.pm {background-image:url('../images/pm.PNG');}
.c_portfolio .cp_list .cpl_img.okhouse {background-image:url('../images/12121212.PNG');}
.c_portfolio .cp_list .cpl_img.ggfvcenter {background-image:url('../images/ggfvcenter.PNG');}
.c_portfolio .cp_list .cpl_img.seoul {background-image:url('../images/seoulseason.PNG');}
.c_portfolio .cp_list .cpl_img.rental01 {background-image:url('../images/borammember.PNG');}
.c_portfolio .cp_list .cpl_img.rental02 {background-image:url('../images/boramlife.PNG');}
/* 오시는길 */
.c_contact {display:inline-block; vertical-align:middle; width:1200px; text-align:center;}
.c_contact iframe {width:100%; height:400px; border:0px;}
.c_contact ul {display:inline-block; margin-top:30px;}
.c_contact ul li {display:inline-block; vertical-align:middle; position:relative; margin:5px 10px; padding-left:20px; color:#fff; font-size:16px; line-height:20px;}
.c_contact ul li:before {content:''; display:inline-block; position:absolute; left:0; top:0; width:20px; height:20px; margin-right:5px; background-image:url('../images/i_contact.png'); background-image:url('../images/ie/i_contact.png')\9; background-repeat:no-repeat; background-size:40px auto;}
.c_contact ul li.i_map:before{background-position:left center;}
.c_contact ul li.i_mail:before {background-position:right center;}
.c_contact ul li a {color:#fff; transition:0.2s;}
.c_contact ul li a:hover {color:#fbaf0d;}

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

#header {height:140px;}
/* contents */
#contents.main {left:100px; right:100px; margin-top:-164px;}
#contents.main .m_title {font-size:70px; line-height:70px;}
#contents.main .m_txt {font-size:18px; line-height:18px;}
#contents.main .m_btn {width:250px; height:60px; line-height:60px;}

.c_request .cr_btn {display:block; position:relative; right:inherit; top:inherit; margin:50px auto 0 auto;}
.c_info {width:100%;}
.c_portfolio {width:900px;}
.c_contact {width:100%;}

}

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

#header .logo {left:50px; width:200px; margin:50px 0; background-size:250px auto;}
#header .h_btn {display:inline-block; position:absolute; right:50px; top:40px; width:60px; height:60px; background-color:#236de8; border-radius:10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}
#header .h_btn i {display:inline-block; position:absolute; top:29px; left:20px; width:20px; height:2px; background-color:#fff; border-radius:5px; transition:0.2s;}
#header .h_btn i:before {content:''; display:inline-block; position:absolute; left:0; top:6px; width:20px; height:2px; background-color:#fff; border-radius:5px; transition:0.2s;}
#header .h_btn i:after {content:''; display:inline-block; position:absolute; left:0; bottom:6px; width:20px; height:2px; background-color:#fff; border-radius:5px; transition:0.2s;}
#header.on .h_btn {box-shadow:none;}
#header.on .h_btn i {transform:rotate(45deg);}
#header.on .h_btn i:before {display:none;}
#header.on .h_btn i:after {left:0; top:0; transform:rotate(-90deg);}
#header.on .h_bg {width:300px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);}

#nav {display:none;}
#header.on #nav {display:inline-block; position:absolute; right:0; top:120px; z-index:1; width:300px;}
#header.on #nav li {margin:0; width:100%;}
#header.on #nav li a {line-height:50px;}

#contents.main {text-align:center;}
#contents.main .m_title {margin-bottom:20px; font-size:40px; line-height:40px;}
#contents.main .m_txt {margin-bottom:30px; font-size:14px; line-height:14px;}
#contents.main .m_btn {width:200px; height:50px; line-height:50px;}

#wrap.fixed #footer .f_info {left:50px; bottom:50px;}
#wrap.fixed #footer .f_download {right:50px; bottom:50px;}
#footer {padding:50px;}

#contents {padding:140px 50px 0 50px;}
#contents .c_top h2 {margin-top:10px; padding-top:60px; font-size:40px; line-height:40px;}
#contents .c_top p {font-size:16px; line-height:26px;}

.c_request {width:100%;}
.c_info .ci_list > li {width:50%;}
.c_info .ci_list > li > div {padding:30px 0;}

.c_portfolio {width:100%;}
.c_portfolio .cp_list .cpl_img {width:350px;}
.c_portfolio .cp_list .cpl_title {font-size:26px;}
.c_portfolio .cp_list .cpl_info li span, .c_portfolio .cp_list .cpl_info li p {font-size:14px;}

}

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

#header {height:80px;}
#header .logo {left:20px; width:170px; margin:20px 0; background-size:160px auto;}
#header .h_btn {right:10px; top:10px;}
#header.on #nav {top:80px;}

#contents.main {left:30px; right:30px;}
#contents.main .m_title {margin-bottom:20px; font-size:20px; line-height:30px; letter-spacing:2px;}
#contents.main .m_txt {font-size:14px; line-height:24px;  letter-spacing:0px;}
#contents.main .m_btn {width:300px; height:40px; line-height:40px; font-weight:700;}
#contents.main .m_btn:before {border-color:#236de8; background-color:#236de8;}
#contents.main .m_title mark:before {left:0; right:0; top:0; bottom:0;}

#contents {padding:80px 20px 0 20px;}
#contents .c_top {margin-bottom:30px;}
#contents .c_top h2 {margin-bottom:10px; padding-top:50px; font-size:30px; line-height:30px;}
#contents .c_top h2:after {height:12px;}

#wrap.fixed #footer .f_info {left:20px; right:20px; bottom:70px;}
#wrap.fixed #footer .f_download {left:20px; right:20px; bottom:20px; width:auto;}
#footer {padding:80px 20px 20px 20px;}
#footer .f_download {display:block; position:inherit; left:inherit; right:inherit; bottom:inherit; width:auto; margin-top:20px;}

.c_request li {margin-bottom:5px; padding-left:0;}
.c_request li .cr_txt {display:block; position:relative; left:inherit; top:inherit; width:auto; padding-left:10px; font-size:16px; line-height:40px; color:rgba(255,255,255,1);}
.c_request li .cr_txt:before {content:''; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:10px; background-color:#236de8;}
.c_request li .input {height:44px; font-size:15px;}
.c_request li .textarea {padding:10px 20px; font-size:15px; line-height:25px;}
.c_request .cr_agree label i {width:30px; height:30px;}
.c_request .cr_agree label i:after {left:7px; top:9px;}
.c_request .cr_agree label span {margin-left:5px; line-height:44px; font-size:14px;}
.c_request .cr_agree a {margin-left:5px; font-size:14px; font-weight:700;}
.c_request .cr_btn {margin-top:30px; width:200px; height:50px; border-radius:10px;}
.c_request .cr_btn:before {border-radius:10px;}
.c_request .cr_btn i {display:none;}
.c_request .cr_btn p {font-size:16px;}

.c_info {margin:0 auto;}
.c_info .ci_box {width:auto; padding:0 30px;}
.c_info .ci_box .cib_title {margin-bottom:10px; font-size:24px; line-height:34px;}
.c_info .ci_box .cib_txt {font-size:14px; line-height:24px;}
.c_info .ci_list {position:relative;}
.c_info .ci_list:before {content:''; position:absolute; left:50%; top:0; width:300px; height:1px; margin-left:-150px; background-color:rgba(255,255,255,0.3);}
.c_info .ci_list > li {position:relative; width:100%;}
.c_info .ci_list > li:before {content:''; position:absolute; left:50%; bottom:0; width:300px; height:1px; margin-left:-150px; background-color:rgba(255,255,255,0.3);}
.c_info .ci_list > li > div {width:280px; margin:0 auto;}

.c_contact ul {display:block;}
.c_contact ul li {display:block; width:auto; margin:5px; text-align:left;}
.c_contact ul li p {font-size:14px;}

}

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

.c_info .ci_box {padding:0; text-align:left;}
.c_portfolio .cp_list > li {padding:30px 0;}
.c_portfolio .cp_list .cpl_img {display:block; position:relative; right:inherit; top:inherit; width:100%; height:250px; margin:0 auto;}
.c_portfolio .cp_list .cpl_title {margin-top:30px; margin-bottom:10px; padding-top:15px; font-size:22px;}
.c_portfolio .cp_list .cpl_info {margin-bottom:0;}
.c_portfolio .cp_list .cpl_info li:before {top:11px;}
.c_portfolio .cp_list .cpl_info li span, .c_portfolio .cp_list .cpl_info li p {line-height:30px;}


}

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

#contents.main .m_btn {width:100%;}

}