@charset "utf-8";
/* CSS Document */

/**********************
Publishing : Lee Bit-na
Beginning : 2016-11-2
Final : 
***********************/

 body {font-family: 'Lato', sans-serif, 'BarunGothic', 'NanumBarunGothic'; font-size: 14px}
/* video */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
video{
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	min-width: 100%;
	min-height: 100%;
	width:100%;
	height: auto;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: /* our video */;
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index:-1;
}
/* animation */
.fade_in_up2{
	animation-name: fadeInUp;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay: 0;
}

.fade_in_up{
	animation-name: fadeInUp;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay: 0;
}
.main_summary [class*="fade_in_up"] {
    opacity: 0;
}
.brand_visual .txt_box h2 {
    animation-delay: 0;
}
.txt_box h2 + p {
    animation-delay: 0.5s;
}
.txt_box h2 + p + p {
    animation-delay: 1s;
}
.txt_box h2 + p + p + p {
    animation-delay: 1.5s;
}
.btn_wrap {padding-top:30px}
.btn_link2 {
	display:inline-block; 
	width: 40px; 
	height: 25px; 
	background:url(../images/common/arrow_link_bk.png) no-repeat center center;
	 transition: ease-in .3s;
    -webkit-transition: ease-in .3s;
    -moz-transition: ease-in .3s;
    -ms-transition: ease-in .3s;
    -o-transition: ease-in .3s;
}


@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*main*/
.section_visual {position:relative; height:800px;}
.section_visual_back {
    position: fixed;
    width: 100%;
    height: 550px;
    left: 0;
    right: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
	z-index:-1;
}
.section_visual_back.main {background-image:url(../images/main/visual_main.jpg); background-repeat: no-repeat; height: 800px;}
.section_visual_back.company {background-color:#3c3c3c}
.section_visual_back.contact {background-color:#eee}
.section_visual_back.contact .sub_title h2 {color: #000}

.section_visual .key_msg {position:absolute; font-weight:400; top:50%; width:100%; text-align:center; color:#fff; z-index:1; font-size:60px; margin-top:-70px}

.main_summary {position:relative; padding:130px 0; text-align:center; z-index:1; background-color:#fff}
.main_summary h2 {font-size:40px; font-weight:700; display:block; margin-bottom:20px; line-height:1.2em}
.main_summary h2 em {color:#000;font-weight:700;}
.main_summary p {line-height:1.6em}
.main_summary p.shape  {margin-top:50px}
.main_summary p.shape img {height:35px}

/* direct */
.main_direct {position:relative; background-color:#fff}
.main_direct:after {display:block; clear:both; content:""}  
.tile-group {width: 50%; float: left}
.tile-group a {display: block; cursor: pointer}
.tile-group a:after {display: block; clear: both; content: ""}
.tile-group:after {display:block; clear:both; content:""} 
.tile-group.bk {background-color: #000}
.tile-group.gr {background-color: #000}
.tile-group.orange {background-color: #f85a00}
.tile-group.orange:hover .content_in h3 {color:#fff !important}
.tile-group.orange .content_in .list li {color:#ccc}
.tile-group.bk .tile_content .content_in h3, .tile-group.full .content_in h3, .tile-group.full .description, .tile-group.orange .tile_content .content_in h3 {color: #fff}
.tile-group.bk .tile_content .content_in p {color: #999}
.tile-group.full {position: relative}
.tile-group.full .tile-image {width: 100%}
.tile-group.full .tile-image .content_in {position: absolute; height: 100%; top:0; left:0; width: 50%; padding:0}
.tile-group .in_pd {padding: 14%}

.tile-group .tile-image {width: 50%; float: left; overflow: hidden;}
.tile-image img {
    width: 100%;
    transition: ease-in .3s;
    -webkit-transition: ease-in .3s;
    -moz-transition: ease-in .3s;
    -ms-transition: ease-in .3s;
    -o-transition: ease-in .3s;
    transform: scale(1);
    -webkit-transform: scale(1);
}
.tile-image:hover img {transform:scale(1.05); -webkit-transform:scale(1.05)}
.tile-description {position: relative; width: 50%; float: left}
.tile_content {
	position: absolute;
	display: block;
	width: 100%; 
	height: 100%;
	top:0; left: 0; bottom: 0;
}
.content_in {padding:14%;}
.content_in h3 {display: block; font-size: 30px; color: #000; margin-bottom: 7%;
	transition: ease-in .3s;
    -webkit-transition: ease-in .3s;
    -moz-transition: ease-in .3s;
    -ms-transition: ease-in .3s;
    -o-transition: ease-in .3s;
}
.content_in p {line-height: 1.4em; font-size: 14px}
.content_in .list li {display:block; margin-bottom:5px; padding-left:10px; background:url(../images/company/bbs_bullet.gif) no-repeat left 10px}
.tile-group .btn_link {display: block; width: 40px; height: 25px; position: absolute; left: 14%; bottom: 14%; background:url(../images/common/arrow_link.png) no-repeat center center;
	 transition: ease-in .3s;
    -webkit-transition: ease-in .3s;
    -moz-transition: ease-in .3s;
    -ms-transition: ease-in .3s;
    -o-transition: ease-in .3s;

}
.tile-group .btn_link.bk { background:url(../images/common/arrow_link_bk.png) no-repeat center center;}
.tile_content:hover .content_in h3, .tile-group.navy .tile_content:hover .content_in h3, .tile-group.bk:hover .content_in h3, .tile-group.full:hover .content_in h3  {color: #f85a00;}
.tile-vertical {width: 25%; float: left; position: relative}
.tile-vertical:after {display:block; clear:both; content:""} 
.tile-vertical .tile-image {width:100%; float: left; overflow: hidden;}
.tile-vertical .tile-description {width:100%; float: left;}
.sq-ratio {
    width: 100%;
}

/**/
.main_cate {padding:100px 0 150px; background-color:#111; text-align:center}
.main_cate h2 {font-size:40px; font-weight:700; display:block; height: 150px; padding-top: 100px; margin:0 auto 20px; }
.main_cate h2 span {display:inline-block; background-color:#111; padding:3px; line-height: initial;}
.main_cate h2.interior {background:url(../images/main/bbs_interior.png) no-repeat center center; color:#f25a29}
.main_cate h2.modelhouse {background:url(../images/main/bbs_modelhouse.png) no-repeat center center; color:#05b99c}
.main_cate h2.spacedesign {background:url(../images/main/bbs_spacedesign.png) no-repeat center center; color:#25aae2}
.main_cate h2.miniature {background:url(../images/main/bbs_miniature.png) no-repeat center center; color:#fdb712}
.main_cate p {line-height:1.6em}

.visual_area {height:700px; position:relative}
.visual_area.interior {background: url(../images/main/img_interior.jpg) 50% 0 no-repeat fixed; background-size:cover}
.visual_area.modelhouse {background: url(../images/main/img_modelhouse.jpg) 50% 0 no-repeat fixed; background-size:cover}
.visual_area.spacedesign {background: url(../images/main/img_spacedesign.jpg) 50% 0 no-repeat fixed; background-size:cover}
.visual_area.miniature {background: url(../images/main/img_miniature.jpg) 50% 0 no-repeat fixed; background-size:cover}

/*서브디자인*/
.section_sub {height:550px; position:relative;}
.section_sub.project {background-color: #3c3c3c;}
.section_sub.project .sub_title h2 {color: #fff}

.sub_title {position:absolute; width:100%; left:0; top:50%; margin-top:-20px}
.sub_title h2 {font-size:44px; color:#fff; text-align:center; font-weight:700}
.sub_title h2 em {color: #888;font-weight:700}
.sub_title p {text-align:center; margin-top:20px; font-size: 18px; line-height: 1.5em}
.sub_title p.wh {color:#fff}
.sub_title p.mg {margin-top:5px}
.sub_title [class*="fade_in_up"] {
    opacity: 0;
}

/*vision*/
.sub_cate_title {color:#fff; font-size:30px; display:block; text-align:center; padding:0 0 60px; text-transform: uppercase; }
.sub_cate_title.line { background: url(../images/company/bbs_dot.png) repeat-x bottom;}
.sub_cate_title .title {clear:both; margin-bottom:30px}
.sub_cate_title .title span {display:inline-block; background-color:#f85a00; font-size:16px; font-weight:700; padding:5px 15px; color:#fff}
.bbs_shape {display:inline-block; width:230px; height:78px; background: url(../images/company/bg_round.png) no-repeat 0 0; margin-bottom:60px; display: none}

.company_vision {height:950px; position:relative; background: url(../images/company/visual_company.jpg) 50% 0 no-repeat fixed; background-size:cover; padding-top: 120px}
.vision_area {width:1100px; margin:auto; position:relative; height:950px}
.vision_area:after {display:block; clear:both; content:""} 
.space_wrap {position:relative; height:550px; margin-top: 3px; background: url(../images/company/bbs_dot.png) repeat-x top}
.vision_area .space {display:inline-block; width:380px; position:absolute; left:50%; top:57%; margin:-190px 0 0 -190px}
.vision_area .space  img {width:100%}
.vision_area .space h2 {position:absolute; top:130px; left:100px; font-size:24px; text-align:center; color:#fff}
.vision_area dl {display:block; width:300px}
.vision_area dt {color:#fff; font-size:20px; font-weight:700; margin-bottom:10px}
.vision_area dd {color:#c7c7c7;}
.vision_area .position01 {position:absolute; left: 49%; top: 10%;}
.vision_area .position02 {position:absolute; left:56%; top:65%}
.vision_area .position03 {position:absolute; left: 9%; top: 50%;}

.company_ceo {height:695px; padding-top:120px; position:relative; background: url(../images/company/visual_ceo.jpg) 50% 0 no-repeat fixed; background-size:cover; overflow:hidden}
.company_ceo .ceo_area {clear:both; width:1100px; margin:auto}
.company_ceo .content_wrap {margin-top: 3px; background: url(../images/company/bbs_dot.png) repeat-x top}
.company_ceo .content_wrap:after {display:block; clear:both; content:""}   
.company_ceo .content_wrap .content {float:left; width:60%; display:block; color:#fff; padding-top:50px}
.company_ceo .content_wrap .content:after {display:block; clear:both; content:""}  
.company_ceo .content_wrap .content li {width:50%; float:left; color:#dad5d8;  text-align:justify; word-break:break-all}
.company_ceo .content_wrap .content li p {padding:0 30px 0 0}
.company_ceo .content_wrap .content li p em {color: #fff;font-size: 16px;}
.company_ceo .content_wrap .photo {float:right; width:40%; margin-top:-100px}

/*Plan Platform*/
.company_plan {padding:120px 0 100px; position:relative; background:#cfcfd1 url(../images/company/visual_licenses.jpg) 50% 0 no-repeat fixed; overflow:hidden; border-bottom:1px solid #999}
.company_plan .sub_cate_title {color:#000}
.company_plan .content {text-align:center}
.plan_list {display:block; width:1100px; margin:50px auto 0}
.plan_list:after {display:block; clear:both; content:""} 
.plan_list li {width:25%; float:left;}
.plan_list li dt {color:#000; font-size:20px; font-weight:700; height:125px; margin-bottom:20px; padding-top: 75px; background:url(../images/company/plan_dt.png) no-repeat center center}
.plan_list li dt.first {height:115px;  padding-top: 85px; }
.plan_list li .s_title {color:#000; font-weight:700; font-size:16px; height:40px}
.plan_list li dd {font-size:12px; line-height:1.6em; margin-bottom: 5px; padding: 0 10px;}

/*licenses*/
.company_licenses {height:900px; padding:120px 0; position:relative; background:#cfcfd1 url(../images/company/visual_licenses.jpg) 50% 0 no-repeat fixed; overflow:hidden}
.company_licenses .sub_cate_title {color:#000}
.licenses_area {width:1100px; margin:auto;}
.licenses_list .list_block {width:33.3%; float:left; text-align:justify; word-break:break-all}
.licenses_list {display:block; width:800px; margin:auto}
.licenses_list .list_block li {display:block; margin-bottom:20px; padding:0 30px 0 10px; background: url(../images/company/bbs_bullet.gif) no-repeat left 10px}
.licenses_area .img_area {clear:both; padding:40px 0 100px; text-align:center}

/*organization*/
.company_organization {padding:120px 0; position:relative; background:url(../images/company/visual_organization.jpg) 50% 0 no-repeat fixed; background-size:cover; overflow:hidden;}
.company_organization .content {text-align:center}
.company_organization .content img {max-width:100%}

/*History*/
.company_history {padding:120px 0; position:relative; background:#222; overflow:hidden}
.company_history .sub_cate_title {color:#fff}
.licenses_area {width:1100px; margin:auto;}

.history_wrap{position:relative;margin:40px auto 0 auto;max-width:1140px;height:730px; background:url(../images/company/history_dot.png) center top repeat-y}
.history_wrap > ul > li{position:absolute;width:50%}
.history_wrap > ul > li.left{left:0;text-align:right}
.history_wrap > ul > li.left ul li{padding-left:0; padding-right:25px;}
.history_wrap > ul > li.left ul li em {left:auto; right:0}
.history_wrap > ul > li.right{left:50%;text-align:left}
.history_wrap > ul > li.left .year{right:-6px;padding-right:60px;background:url(../images/company/history_left_dot.png) right center no-repeat}
.history_wrap > ul > li.right .year{left:-6px;padding-left:60px;background:url(../images/company/history_right_dot.png) left center no-repeat}
.history_wrap > ul > li.left ul{padding-right:155px}
.history_wrap > ul > li.right ul{padding-left:155px}
.history_wrap > ul > li ul{padding-top:5px}
.history_wrap > ul > li ul li{position:relative; padding-left:25px; font-size:12px; color:#999; margin-bottom:15px}
.history_wrap > ul > li ul li em {position:absolute; left:0; top:0; color:#fff}
.history_wrap .year{position:absolute;top:0;font-size:34px;font-weight:700;line-height:36px}
.history_wrap .year span{color:#f85a00;}
.history_wrap .year2016{top:22px}
.history_wrap .year2015{top:87px}
.history_wrap .year2014{top:142px}
.history_wrap .year2011{top:500px}
.history_wrap .year2009{top:550px}
.history_wrap .year2006{top:600px}
.history_wrap .year2003{top:650px}

/* project */
.pj_wrap {position:fixed; top:190px; width:100%; bottom:62px}
.scroller img {width:100%}

/* contact us */
.contact_wrap {background-color:#fff; position:relative}
.map_area {height:500px; background-color:#fff; clear:both}
.sub_cont_wrap.contact {background-color:#eee9e4}
.map_address {padding:20px 0 10px; letter-spacing:-1px}
.map_address i {display:inline-block; position:relative; width:16px; height:16px; background:url(../images/common/bbs_place.png) no-repeat 0 0; top:4px; margin-right:3px}

.mail_wrap .m_title {font-size: 22px; color: #000; display: block; padding-bottom: 20px;}
.mail_wrap { width:1100px; margin:auto;  padding: 70px 0 100px;  background: url(../images/sub/bar_01.gif) no-repeat top center;}
.mail_wrap:after {display:block; clear:both; content:""}
.mail_wrap .contact_sub {text-align:center; margin-bottom:15px; color:#000; font-family: 'Lato', sans-serif; font-weight:700}
.mail_wrap .txt {display: block; padding:0 0 10px; font-size: 16px; line-height:1.5em; text-align:center}
.mail_wrap .txt em { margin-left:3px}
.sub_title .tell {margin:0 15px}
.sub_title .tell em {font-size:20px; margin-right:15px}
.form_wrap {clear:both}
.form_wrap:after {  clear: both; display: block; content: "";}
.message_form {display:block; margin:30px auto 0}
.message_form:after {display:block; clear:both; content:""}
.message_form li {position:relative; float:left; display:block; width:100%; margin-top:15px; text-align:center}
.message_form li.in_put {width:50%}
.message_form li input {width:100%; border:0; background:none; height:30px}
.message_form li em {position:absolute; left:20px; top:13px; font-size:14px}
.message_form li textarea {width:100%; border:0; background:none}
.message_form .in_wrap {border:1px solid #ddd; background-color:#fff; padding:5px 5px 5px 70px; margin:0 5px}
.more_wrap {text-align:center; padding-top:40px}

.check_box {padding:10px 5px}
.check_box .txt {border:1px solid #ddd; padding:15px 15px 20px; background-color:#f5f5f5; color:#777}
.check_box h1 {font-size:14px; display:block; padding-bottom:20px; color:#000}
.check_box li {font-size:12px; text-align:left}
.check_box .check {padding-top:20px; font-size:14px}
.check_box .check input {margin-right:5px}

.map_area .bbs_shape {position:absolute; left:50%; top:0; margin-left:-115px; z-index:10; background:url(../images/company/bg_round.png) no-repeat 0 -78px}
.kor {font-family:'NanumSquare'}
.section_sub.contact .sub_title h2 {color: #000}


/* intro */
.home_cont {width: 1280px; margin: auto}
.homepage_intro {position: absolute; height: 50%; left: 0; top:0; right: 0; width: 100%; text-align: center}
.homepage_intro .sub_title h2 {color: #999;}
.homepage_intro .sub_title h2 a {position: relative; display: inline-block}
.homepage_intro .sub_title h2 a:active {color: inherit}
.homepage_intro .sub_title h2 a {color: inherit}
.homepage_intro .sub_title h2 a:after {
    border-bottom: 2px solid #999;
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    width: 0;
    transition: width .4s cubic-bezier(.215,.61,.355,1);
}
.homepage_intro .sub_title h2 a.shining
{
    background: -webkit-gradient(linear, left top, right top, from(#ccc), to(#ccc), color-stop(0.9, #333)) 0 0 no-repeat;
    -webkit-background-size: 125px;
    
    color: rgba(000, 000, 000, 0.4);
    -webkit-background-clip: text;
    
    -webkit-animation-name: shine;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shine
{
    0%
    {
        background-position: top left;
    }
    100%
    {
        background-position: top right;
    }
}
.homepage_intro .sub_title h2 a:hover:after {width: 100%}
.homepage_intro .home_cont {}
.homepage_intro .home_cont .copy {font-size: 36px; font-weight: 400;}
.homepage_intro .home_cont .copy em {ㄴdisplay: inline-block; position: relative}
.homepage_intro .home_cont .copy em:after {
    content: "";
    position: absolute;
    bottom: .11111em;
    left: 0;
    border-bottom: 2px solid #212121;
    width: 0;
    transition: width .6s cubic-bezier(.215,.61,.355,1);
    will-change: width;
}
.homepage_intro .home_cont .btn {float: right; margin-top: 3.4375rem; font-size: 18px; background: url('../images/main/bbs_arrow.png') no-repeat right center; border: 0; padding: 0 50px 0 0; color: #000}
.swiper-slide-active .item_heading .home_cont .detail {font-size: 14px; margin-top: 20px; display: none}
.swiper-slide-active .item_heading .home_cont .detail li {margin-bottom: 5px}
.swiper-slide.slide01 .home_cont .detail li em {color: #f47920}
.swiper-slide.slide02 .home_cont .detail li em {color: #6bc9c7}
.swiper-slide.slide03 .home_cont .detail li em {color: #62c3ee}

.swiper-slide-active .item_heading {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    text-align: left;
    z-index: 1;
    font-size: 60px;
}
.item_heading a {display: inline-block; position: relative; font-weight: 400; color: #fff; margin-left: -5px}
.item_heading a:after {
    border-bottom: 2px solid #fff;
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    width: 0;
    transition: width .4s cubic-bezier(.215,.61,.355,1);
}
.item_heading a:hover:after {width: 100%}

.main_intro_inner {
	position:absolute;
	top:50%;
	bottom:30px;
	left: 0;
	right: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    transition: transform 2s ease;
    -webkit-transition: transform 2s ease;
    overflow: hidden;
}
.inner_img {width: 100%;
    height: 50%;
    background-size: cover;
    background-position: center;
    transition: transform 2s ease;
    -webkit-transition: transform 2s ease;
}
.main_intro_inner .inner_img {}
.main_intro_inner .intro01 .inner_img {background: url('../images/main/intro01.jpg') no-repeat center center; background-size: cover}
.main_intro_inner .intro02 .inner_img {background: url('../images/main/intro02.jpg') no-repeat center center; background-size: cover}
.main_intro_inner .intro03 .inner_img {background: url('../images/main/intro03.jpg') no-repeat center center; background-size: cover}
.swiper_copy {color: #fff; position: absolute; left: 50%; margin-left: -640px; top:50px; z-index: 10; font-size: 16px;}

.half_intro {z-index: 10; color: #fff}
.half_intro li {display:block; position: absolute; width: 33.3%; height: 100%; text-align: center; overflow: hidden}
.half_intro li.intro01 {left: 0; width: 33.3%;}
.half_intro li.intro02 {left: 33.3%; width: 33.4%;}
.half_intro li.intro03 {left: 66.7%; width: 33.3%;}

.half_intro li .inner_img {height: 100%}
.half_intro li h2 {position: relative; display: inline-block; color: #fff; font-size: 30px; font-weight: 600}
.half_intro li h2:after {
    border-bottom: 2px solid #fff;
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    width: 0;
    transition: width .4s cubic-bezier(.215,.61,.355,1);
}
.half_intro li a {color: #f5f5f5}
.half_intro li .dim {
	position: absolute; height: 0; left: 0; top:0; right: 0; background: url('../images/common/bg_dim.png'); z-index: 1;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.half_intro li:hover .dim {height: 200px}

.half_intro li .cont {position:absolute; left:0; z-index: 1; top:0; right: 0; padding:25px 30px 20px; text-align: left; z-index: 2}
.half_intro li .cont .detail {font-size: 14px; margin-top: 15px;}
.half_intro li .cont .detail li {position: relative; left: auto; right: auto; margin-bottom: 5px; display: block; text-align: left; clear: both; float: none; width: 100%}
.half_intro li .cont .detail li em {display: inline-block}
.half_intro li.intro01 .cont .detail li em {color: #f47920; width: 150px}
.half_intro li.intro02 .cont .detail li em {color: #6bc9c7; width: 160px}
.half_intro li.intro03 .cont .detail li em {color: #62c3ee; width: 250px}

.half_intro li.intro02 {width: 33.4%}