@charset "utf-8";

/* 
 * main CSS Document
 */


/* visual */
.area_visual{opacity:0; position:relative; background:#fff; transition:all 0.5s ease 0s;}
.area_visual.active{opacity:1;}
.area_visual div.txt{position:absolute; top:50%; right:50px; z-index:80; transform:translateY(-50%);}
.area_visual div.txt > em{padding-top:30px; font-size:20px; color:#fff; font-weight:300;}
.area_visual div.txt > p{position:relative; font-size:50px; line-height:1.3em; font-weight:500; color:#fff; letter-spacing:-1px;}
.area_visual div.txt > em,
.area_visual div.txt > p{display:block; opacity:0; transform:translateY(50px);}
.area_visual .title{display:block; position:absolute; bottom:30%; left:15px; z-index:80; font-size:70px; font-weight:900; color:#242d2e; line-height:1.2em; transform:rotate(-90deg);}
.area_visual,
.area_visual .list {height:900px;}
.area_visual .list li{position:relative; height:100%;}
.area_visual .list li:before{content:''; display:block; position:absolute; right:0px; top:0px; width:calc(100% / 2); height:100%; background-repeat:no-repeat; background-position:0 0; background-size:cover; transform:scaleY(0); transform-origin:0 0; transition:all 1s ease-out 0s;}
.area_visual .list li.active:before{transform:scaleY(1);}
.area_visual .list li[data-visual="00"]:before{background-image:url(../images/main/bg_visual01.jpg);}
.area_visual .list li[data-visual="01"]:before{background-image:url(../images/main/bg_visual02.jpg);}
.area_visual .list .img{display:block; opacity:0; position:absolute; top:20%; left:0; width:100%; text-align:center; transform:translateY(-80px);}
.area_visual .list .img img{max-width:100%; margin-left:1px;}
.area_visual .show{opacity:1 !important; transform:translateY(0px) !important;}
.area_visual .bx-controls-direction{position:absolute; bottom:80px; left:50%; margin-left:-300px;}
.area_visual .bx-controls-direction a[class^="bx-"]{display:inline-block; position:relative; padding:0 20px; font-size:16px; color:#828c8e;}
.area_visual .bx-controls-direction a[class^="bx-"]:before{content:''; display:block; position:absolute; top:50%; left:0px; width:1px; height:13px; margin-top:-7px; background:#757f81;}
.area_visual .bx-controls-direction a.bx-prev:before{display:none;}
.area_visual .total{position:absolute; top:15%; left:130px; font-size:20px; color:#e0e8ea; font-weight:900;}
.area_visual .total em{display:block; font-size:70px; color:#d6e0e1; line-height:1em;}
.area_visual .total span{padding-left:10px;}
.area_visual .area_estimate{position:absolute; bottom:0px; left:0px; z-index:80; width:calc(100% / 2 + 100px); height:100px; background:url(../images/common/bg_black.gif) repeat 0 0;}
.area_visual .area_estimate a{display:block; position:absolute; top:0px; right:0px; height:100%; box-sizing:border-box; padding:22px 90px 0 0; font-size:15px; color:#fff; font-weight:300;}
.area_visual .area_estimate a span{display:block; font-size:20px; font-weight:400;}
.area_visual .area_estimate a:after{content:''; display:block; position:absolute; top:50%; right:35px; width:26px; height:8px; margin-top:-4px; background:url(../images/main/icon_arrow.png) no-repeat 0 0;}
.area_visual .area_estimate .scroll{display:block; position:absolute; top:45px; left:160px; font-size:14px; color:#c1cacb;}
.area_visual .area_estimate .scroll i{display:inline-block; margin-left:30px;}
.area_visual .area_estimate .scroll .line{display:block; position:absolute; top:-3px; left:50%; width:1px; height:110px; margin-left:-1px;}
.area_visual .area_estimate .scroll .line{overflow:hidden; background:#242d2e;}
.area_visual .area_estimate .scroll .line:after{content:''; display:block; height:120%; background:#fff; animation:scroll 4s ease-out 0s infinite; animation-timing-function:cubic-bezier(0.77, 0, 0.175, 1);}

.center_area{position:relative; width:100%; box-sizing:border-box; margin:0 auto;}
.center_area > div{max-width:1400px; box-sizing:border-box; padding:60px 15px; margin:0 auto;}
.center_area > div:after{content:''; display:block; clear:both;}
.center_area > div > div{float:left; position:relative; box-sizing:border-box;}
.center_area > div > div h2{font-size:18px; font-weight:500; letter-spacing:-1px; width:90%; padding-bottom:10px; margin:10px;}
.center_area > div > div .more{display:block; position:absolute; right:0px; top:0px; height:38px; box-sizing:border-box; padding-right:40px; line-height:38px; font-size:13px; color:#919191;}
.center_area div[class^="status"] ul li:first-child{margin-top:15px;}
.center_area div[class^="status"] ul li{margin-top:7px; line-height:1.2em;}
.center_area div[class^="status"] ul li > a{display:inline-block; width:85%; color:#666; letter-spacing:-0.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.center_area div[class^="status"] ul li > a em{display:inline-block; padding-right:7px; color:#2e3636; font-weight:500;}
.center_area div[class^="status"] ul li .new{display:inline-block; width:26px; height:11px; margin-top:3px; margin-left:10px; background:url(../images/main/icon_new.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap; vertical-align:top;} 
.center_area div[class^="status"] ul li .new2{display:inline-block; width:26px; height:11px; margin-top:3px; margin-right:7px; background:url(../images/main/icon_new02.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap; vertical-align:top;} 

/* 견적문의 */
.estimate_area{position:relative; width:31%; margin-right:5%; box-sizing:border-box; background:#fda54e; background-image:linear-gradient(top , #fda54e, #facd49); background-image:-ms-linear-gradient(top , #fda54e, #facd49); background-image:-webkit-linear-gradient(top , #fda54e, #facd49); background-image:-moz-linear-gradient(top , #fda54e, #facd49); background-image:-o-linear-gradient(top , #fda54e, #facd49) color:#fff;}
.estimate_area .title{color:#fff;}
.estimate_area .title h2{font-size:27px; margin:0 auto; width:95% !important; font-weight:600; letter-spacing:-1px; text-align:center;}
.estimate_area .title h2 + p{margin-top:10px; text-align:center; line-height:1.2em; word-break:keep-all;}
.estimate_area .title em{display:none;}
.estimate_area .title em a{display:inline-block; color:#fff;}
.estimate_area .title{position:absolute; left:0px; top:0px; width:100%; box-sizing:border-box; padding:30px 0px;}
.estimate_area .form{position:relative; padding:150px 40px 40px 40px; border-left:1px solid #fff;}
.estimate_area .form .input:after{content:''; display:block; clear:both;}
.estimate_area .form .input > li{float:left; width:48%; margin-right:2%;}
.estimate_area .form .input > li:nth-of-type(2){margin-left:2%; margin-right:0px;}
.estimate_area .form .input > li:nth-of-type(3){width:100%; margin-right:0px; margin-top:5px;}
.estimate_area .form .input > li:nth-of-type(4){width:100%; margin-right:0px; margin-top:5px;}
.estimate_area .form .input > li.tel{font-size:0px;}
.estimate_area .form .input > li.tel span{display:inline-block; width:10px; font-size:14px; text-align:center;}
.estimate_area .form .input > li.tel input[type="text"]{width:calc(100% / 3 - 7px);}
.estimate_area .form .input > li.tel input[type="text"]:nth-of-type(2){margin:0 10px;}
.estimate_area .form .input input[type="text"]{width:100%; height:30px; border:0px; color:#666; font-size:14px; letter-spacing:-0.5px;}
.estimate_area .form .btn_send{display:block; position:relative; margin-top:20px; padding:10px 15px; border:1px solid #ffefc4; text-align:center; color:#fff; line-height:1.2em; transition:all 0.3s ease 0s;}
.estimate_area .form .btn_send:hover{background:#fda54e; border-color:#fda54e; box-shadow:0 3px 10px rgba(0,0,0,0.10);}
.estimate_area .form .btn_send br{display:none;}
.estimate_area .radio{margin-top:15px;}
.estimate_area .radio ul:after{content:''; display:block; clear:both;}
.estimate_area .radio ul > li{float:left; display:inline-block; width:calc(100% / 3);}
.estimate_area .radio.designRadio input[type="radio"] + label{font-size:13px; font-weight:300; letter-spacing:-0.5px; color:#fff;}

/* 공지사항 */
.center_area .status01{margin-top:20px; width:32%;}
.center_area .status02{margin-top:20px; width:32%;}

.center_area02{position:relative; width:100%; height:410px; box-sizing:border-box; margin:0 auto; background:url(../images/main/bg_center.jpg) no-repeat center top; background-attachment:fixed;}
.center_area02 > div{position:relative; max-width:1400px; padding:60px 15px; box-sizing:border-box; margin:0 auto;}
.center_area02 > div > div{float:left; position:relative; box-sizing:border-box;}

/* 제작서비스 */
.info_area{float:left; width:1000px; box-sizing:border-box;}
.info_area h2{font-size:35px; color:#fff; font-weight:500; letter-spacing:-1px; text-align:center;}
.info_area h2 + p{font-weight:600; color:#a3adaf; text-align:center;}
.info_area ul{margin:45px auto; width:1000px;}
.info_area ul:after{content:''; display:block; clear:both;}
.info_area ul > li{float:left; position:relative; width:33.33%; color:#b3b4b4; font-weight:300; letter-spacing:-0.5px; text-align:center; line-height:1.2em;}
.info_area ul > li em{display:block; margin-bottom:10px; color:#fff; font-size:17px; letter-spacing:-1px; font-weight:400;}
.info_area ul > li:before{content:''; display:block; width:81px; height:81px; box-sizing:border-box; margin:0 auto 10px; background:url(../images/main/img_circle_bg.png) no-repeat 0 0;}
.info_area ul > li:after{content:''; display:block; position:absolute; left:50%; top:25px; width:32px; height:32px; margin-left:-16px; background:url(../images/main/sp_main.png) no-repeat 0 0;}
.info_area ul > li:nth-of-type(2):after{background-position:-32px 0px;}
.info_area ul > li:nth-of-type(3):after{background-position:-64px 0px;}
.info_area ul > li:nth-of-type(4):after{background-position:-96px 0px;}

/* 고객센터 */
.center{position:relative;}
.center h2{margin-bottom:10px; font-size:18px; font-weight:500; color:#fff;}
.center .tel{font-family:'Verdana'; font-weight:900; color:#face49; font-size:32px; line-height:1.2em;} 
.center .tel span{display:block; font-size:25px;}
.center .tel a{color:#face49;}
.center p:not(.tel){margin-top:30px; font-size:16px; font-weight:300; color:#fff;}
.center p:not(.tel) i{display:block; margin-bottom:10px; font-size:18px; font-weight:600;}
.center > a{display:inline-block; margin-top:20px; border:1px solid #fff; border-radius:3px; padding:10px 20px; color:#fff; font-size:16px; transition:all 0.3s ease 0s;}
.center > a:hover{background:#fff; color:#bd8e00;}

.portfolio_area{max-width:1400px; box-sizing:border-box; padding:60px 15px 100px; margin:0 auto;}
.portfolio_area h2{font-size:35px; color:#303030; font-weight:600; letter-spacing:-1px; text-align:center;}
.portfolio_area h2 + p{font-weight:600; color:#999; text-align:center;}
.portfolio_area ul{margin-top:30px;}
.portfolio_area ul:after{content:''; display:block; clear:both;}
.portfolio_area ul > li{float:left; width:32%;}
.portfolio_area ul > li:nth-child(3n+2){margin:0 2%;}
.portfolio_area ul > li > a{display:block; overflow:hidden; position:relative; margin-top:30px;}
.portfolio_area ul > li > a:after,
.portfolio_area ul > li > a:before{content:''; display:block; opacity:0; position:absolute; top:0px; left:0px; width:100%; height:100%; transition:all 0.5s ease 0s;}
.portfolio_area ul > li > a:after{z-index:2; background:#a77d00}
.portfolio_area ul > li > a:before{z-index:3; transform:scale(1.1,1.1); transform-origin:50% 50%; transition:all 0.5s ease 0s;}
.portfolio_area ul > li span{display:block;}
.portfolio_area ul > li .txt{opacity:0; position:absolute; left:0px; top:0px; z-index:5; width:100%; padding-top:25%; text-align:center; transform:translateY(50px); transition:all 0.3s ease 0s;}
.portfolio_area ul > li .txt em{display:inline-block; line-height:1em; font-weight:500; color:#fff; font-size:30px; letter-spacing:-1px; word-break:keep-all;}
.portfolio_area ul > li .txt em:after{content:''; display:inline-block; width:70%; height:2px; background:#fff;}
.portfolio_area ul > li .txt i{display:block; padding-top:3.5em; font-size:16px; color:#fff; font-weight:300;}
.portfolio_area ul > li .img{overflow:hidden; width:100%; height:350px; box-sizing:border-box; text-align:center;}
.portfolio_area ul > li .img img{height:100%; margin-left:-100%; margin-right:-100%; transform:scale(1,1); transition:all 0.5s ease-in 0s;}
.portfolio_area ul > li > a:hover:after{opacity:0.6;}
.portfolio_area ul > li > a:hover:before{opacity:1; transform:scale(0.9,0.9);}
.portfolio_area ul > li > a:hover .img img{transform:scale(1.1,1.1);}
.portfolio_area ul > li > a:hover .txt{opacity:1; transform:translateY(0);}

/* layer pop */
.layerPop{position:absolute; z-index:90;}
.layerPop a{display:block;}
.layerPop img{max-width:100%;}
.layerPop .btn{padding:3px 10px; background:#292b42; text-align:right;}
.layerPop .btn button{display:inline-block; margin-left:15px; background:none; color:#fff; font-size:12px;}

@media all and (max-width:500px){
	.layerPop img{width:300px; max-width:inherit;}
}

@keyframes scroll{
	0%{-webkit-transform:translateY(-100%); transform:translateY(-100%)}
	5%{-webkit-transform:translateY(-100%); transform:translateY(-100%)}
	45%{-webkit-transform:translateY(0); transform:translateY(0)}
	55%{-webkit-transform:translateY(0); transform:translateY(0)}
	95%{-webkit-transform:translateY(120px); transform:translateY(120px)}
	100%{-webkit-transform:translateY(120px); transform:translateY(120px)}
}

@media all and (max-width:1700px){
	.area_visual .list .img img{max-width:55%;}
}

@media all and (max-width:1550px){
	.area_visual div.txt{top:auto; bottom:10%; transform:translateY(0);}
}

@media all and (max-width:1399px){		
	.center_area02 {height:auto; overflow:hidden;}
	.center_area02 > div{position:relative; max-width:inherit; padding:60px 15px; box-sizing:border-box; margin:0 auto;}
	.center_area02 > div > div{float:inherit; margin:0 auto; box-sizing:border-box;}
	.info_area{float:inherit; width:100%; border-bottom:1px solid rgba(255,255,255,0.5);}
	.info_area ul{width:100%;}
	.center{position:relative; float:inherit; padding-top:40px; width:90%; overflow:hidden;}	
	.center > h2{margin:0 5% 10px 0; font-size:18px; color:#fff; font-weight:400; letter-spacing:-1px;}
	.center > p{float:left; margin:0 5% 0 0;}
	.center > p:not(.tel){margin-top:15px;}
	.center > p br{display:none;}
	.center a{display:block; position:absolute; top:50%; right:0px; width:95px; height:70px; line-height:70px; margin-top:-30px;}
}

@media all and (max-width:1300px){
	.area_visual div.txt{bottom:15%;}
}

@media all and (max-width:1200px){	
	.area_visual .area_estimate .scroll{left:20px;}

	.center_area > div{padding:40px 15px;}
	.center_area > div > div{padding-right:45px;}
	.center_area{background-size:cover;}
	.center_area .status01,
	.center_area .status02{margin-bottom:30px;}
	.center_area .status01{width:50%; padding-right:0 !important}
	.center_area .status02{width:50%; padding-right:0px !important;}
	.estimate_area{width:100%; margin:0 0 30px 0; padding-right:0 !important;}
	
	.center{position:relative; float:inherit; padding-top:40px; width:90%; overflow:hidden;}	
	.center > p br{display:block;}
	.center a{display:block; position:absolute; top:50%; right:0px; width:95px; height:70px; line-height:70px; margin-top:-20px;}
	
	.portfolio_area ul > li .img{text-align:center;}
	.portfolio_area ul > li .img img{width:auto; height:100%; margin-left:-100%; margin-right:-100%;}
}

@media all and (max-width:1100px){
	.area_visual,
	.area_visual .list{height:650px !important;}
	.area_visual .title{bottom:35%; font-size:50px;}
	.area_visual .total{top:10%; left:100px;}
	.area_visual div.txt > p{font-size:40px;}
	.area_visual div.txt > em{padding-top:10px; font-size:18px;}
}

@media all and (max-width:910px){
	.area_visual div.txt{bottom:20%;}
	.area_visual div.txt > p{font-size:35px; line-height:1.2em;}
	.area_visual div.txt > em{font-size:15px;}

	.center_area{background-size:cover;}
	.center_area > div{padding:40px 15px;}
	.center_area > div > div{padding-right:45px;}
	.center_area .status01,
	.center_area .status02{margin-bottom:30px;}
	.center_area .status01{width:55%;}
	.center_area .status02{width:45%; padding-right:0px !important;}

	.center_area02{background-size:cover;}
	
	.center > p br{display:none;}
	.center a{display:block; position:absolute; top:50%; right:0px; width:100px; height:70px; line-height:70px; margin-top:-40px;}

	.portfolio_area{padding:40px 15px;}
	.portfolio_area ul > li .img{height:210px;}
	.portfolio_area ul > li .txt em{font-size:20px;}
}

@media all and (max-width:770px){
	.area_visual .total{left:50px;}
	.area_visual .title{left:-40px;}
	.area_visual div.txt{right:0; width:50%; box-sizing:border-box; padding:0 10px;}
	.area_visual div.txt > em{word-break:keep-all;}
	.area_visual div.txt > em br{display:none;}
}

@media all and (max-width:768px){
	.area_visual .list .img img{max-width:70%;}

	.info_area ul{width:100%;}
	.info_area ul > li{font-size:13px; word-break:keep-all;}
	.info_area ul > li br{display:none;}
	
	.estimate_area{width:100%; margin:0 0 30px 0; padding:0px;}
	.estimate_area h2 + p{padding-left:15px; padding-right:15px;}
	.estimate_area h2 + p br{display:block;}
	.estimate_area .title em{display:block; margin-top:10px; text-align:center; font-size:35px; font-weight:800;}
	.estimate_area .title{position:static; width:auto; padding:20px 0px;}
	.estimate_area .form{margin-left:0px; padding:20px; border-left-width:0px; border-top:1px solid #fff;}
	
	.center > h2{margin:0 0 5px 0; font-size:18px; color:#fff; font-weight:400; letter-spacing:-1px;}
	.center > p{float:inherit; margin:0;}
	.center > p:not(.tel){padding-right:0; margin-top:20px; margin-left:0px;}
	.center .tel{font-size:32px;}
	.center .tel span{font-size:25px;}
}

@media all and (max-width:600px){	
	.center_area > div > div{float:none; width:100% !important; padding-right:0px;}
	.center_area > div > div .more{padding-right:0px !important;}
	.center_area > div > div h2{width:100%; margin:0 auto;}
	.center_area .status02{margin-top:40px;}

	.center_area02{background-attachment:inherit;}

	.center{position:relative; float:inherit; padding-top:40px; width:100%; overflow:hidden;}	

	.portfolio_area ul > li{width:49%;}
	.portfolio_area ul > li:nth-child(3n+2){margin:0px;}
	.portfolio_area ul > li:nth-child(2n){float:right;}
	.portfolio_area ul > li .txt em{font-size:17px; word-break:break-all;}
	.portfolio_area ul > li .txt em:after{display:block; margin:5px auto 0;}
	.portfolio_area ul > li .txt i{font-size:14px;}
}

@media all and (max-width:480px){	
	.area_visual,
	.area_visual .list{height:550px !important;}
	.area_visual .list .img img{margin-left:0px;}
	.area_visual .title{left:-10px; font-size:30px;}
	.area_visual div.txt > p{font-size:30px;}
	.area_visual .total{left:30px;}
	.area_visual .total em{font-size:50px;}
	.area_visual .area_estimate a{padding-right:50px;}
	.area_visual .area_estimate a:after{right:15px;}
	
	.center_area02 > div{padding:30px 15px;}

	.info_area{padding:0 15px;}
	.info_area ul{margin-top:30px;}
	.info_area ul > li{width:100%; margin-top:25px;}
	.info_area ul > li br{display:block !important;}
	
	.center{padding:30px 0;}	
	.center a{display:inline-block; position:static; width:auto; height:auto; line-height:inherit; margin-top:20px;}
	.center > p br{display:block !important;}

	.portfolio_area ul > li .img{height:150px;}
}

@media all and (max-width:400px){	
	.area_visual div.txt{bottom:25%;}
	.area_visual div.txt > em{font-size:14px; line-height:1.2em;}
	.area_visual,
	.area_visual .list{height:500px !important;}
	.area_visual div.txt > p{font-size:23px; letter-spacing:0;}
	.area_visual .area_estimate a{padding-right:30px;}

	.estimate_area .form .input{padding-right:0px;}
	.estimate_area .form .btn_send{position:static; margin-top:10px; text-align:center;}
	.estimate_area .form .btn_send br{display:none;}
	
	.center_area .center p:not(.tel) br{display:block;}
	.center_area02{background-position:100% 0;}
	.info_area ul > li{box-sizing:border-box; padding-left:5px; padding-right:5px;}
}