@charset "utf-8";

/* 
 * layout CSS Document
 * main kimhynho 
 */

/* header */
header{background:transparent;}
header nav > ul > li > a,
header nav > ul > li > a:link,
header nav > ul > li > a:visited{color:#fff;}
header.nav-up nav > ul > li > a,
header.nav-up nav > ul > li > a:link,
header.nav-up nav > ul > li > a:visited{color:#444;}
 
/* visual */
.area_visual{position:relative; overflow:hidden; background:#1e1a19; height: 100vh;}
.area_visual div.txt{position:absolute; top:35%; left:150px; z-index:80; text-align:center;}
.area_visual div.visual_imgtxt{position:absolute; top:25%; left:40px; z-index:80; text-align:left;}
.area_visual div.txt > em{padding-top:30px; font-family:'Raleway', Sans-serif; font-size:16px; color:#919b9d; letter-spacing:1px;}
.area_visual div.txt > p{position:relative; font-size:58px; line-height:1.3em; font-weight:600; color:#fff; letter-spacing:-1px;}
.area_visual div.txt > em,
.area_visual div.txt > p{display:block; opacity:0; transform:translateY(50px);}
.area_visual div.txt > p > span{color:#face49;}
/* .area_visual,
.area_visual .list {height:950px;} */
.area_visual .list li{position:relative; height:100%; background-repeat:no-repeat; background-position:50% bottom;}
.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-family:'Raleway', Sans-serif; 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; bottom:80px; left:150px; padding-left:130px; font-family:'Verdana'; font-size:16px; color:#828c8e; font-weight:500; font-weight:600;}
.area_visual .total:before{content:''; display:block; position:absolute; bottom:13px; left:0px; width:100px; height:1px; margin-right:20px; background:#4d5152;}
.area_visual .total em{padding-right:10px; font-size:30px; color:#face49;}
.area_visual .total span{padding-left:10px;}

.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:#0b95a1; 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:#1a9ca7; color:#fff;
	@media(width<1200px){
		#wrap &{
			float: none;
			width: auto;
			margin-inline: -15px;
		}
	}
}
.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{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 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 #44c6d1; text-align:center; color:#fff; line-height:1.2em; transition:all 0.3s ease 0s;}
.estimate_area .form .btn_send:hover{background:#16868e;}
.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);*/
	@media(width>=360px){ width:calc(100% / 3); }
	@media(300px<=width<360px){ width: calc(100%/2); }
	@media(width<300px){ width: 100%; }
}
.estimate_area .radio.designRadio input[type="radio"] + label{font-size:13px; font-weight:300; letter-spacing:-0.5px;}

/* 공지사항 */
.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-family:'Raleway', Sans-serif; 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 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{width:100%; height:100%; margin-left:-100%; margin-right:-100%; transform:scale(1,1); transition:all 0.5s ease-in 0s;}
/* .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 > 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);} */

@media all and (min-width:1400px){
	.area_visual,
	.area_visual .list{min-width:1400px;}
	.area_visual div.visual_imgtxt{position:absolute; top:25%; left:15px; z-index:80; text-align:left;}

	
}
@media all and (max-width:1399px){
	/* .area_visual,
	.area_visual .list {height:800px;} */
	.area_visual:after{opacity:0.8; top:auto; bottom:0px; width:100%; height:70%; background-position:center 0;}
	.area_visual .bx-controls-direction{left:auto; right:50px; margin-left:0px;}
	.area_visual div.txt > p{font-size:45px;}
	
	.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:1200px){	
	.area_visual div.visual_imgtxt{position:absolute; top:15%; left:15px; z-index:80; text-align:left;}

	.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:1129px){
	/* .area_visual,
	.area_visual .list{height:700px;} */
	.area_visual div.txt,
	.area_visual .total{left:80px;}
	.area_visual .list li:after{content:''; display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.4);}
	.area_visual .bx-controls-direction a[class^="bx-"],
	.area_visual .total{color:#c4ced0;}
}

@media all and (max-width:910px){
	/* .area_visual,
	.area_visual .list{height:600px;} */
	.area_visual .list li{background-size:cover;}
	.area_visual div.visual_imgtxt{display:none;}
	.area_visual div.txt{top:25%; text-align:left;}	
	.area_visual div.txt,
	.area_visual .total{left:30px;}
	.area_visual .bx-controls-direction{right:auto; bottom:40px; width:100%; text-align:center;}

	.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:95px; 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:768px){
	.area_visual:after{opacity:0.8; width:100%;}
	
	.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; font-family:'Raleway', Sans-serif; 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){	
	.area_visual div.txt > p{font-size:35px;}
	.area_visual .list li{background-position:60% 50%;}
	.area_visual div.txt > em{color:#fff;}

	.center_area > div > div:not(.estimate_area){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:400px;} */
	.area_visual div.txt > p{font-size:25px;}
	.area_visual div.txt > em{font-size:14px;}
	.area_visual .total{padding-left:80px;}
	.area_visual .total:before{width:50px;}

	.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){	
	.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;}
}

.estimate_area .form .input > li:first-child {
    /* width: 225px; */
	width: calc((100% / 3 * 2) - 4px);
    margin-right: 0;
}
.estimate_area .form .input > li:nth-of-type(2) {
    /* width: 108px; */
	width: calc((100% / 3) - 6px);
    margin-left: 10px;
    margin-right: 0px;
}
.estimate_area .form .input > li:last-child {
    width: 100%;
}
.estimate_area .form .input > li.tel input[type="text"] {
    width: calc(100% / 3 - 6.8px);
}

.video-container {
	position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}
.video-container video {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-o-object-fit:cover;
	   object-fit:cover;
}
.video-container .overlay {
	position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.45);
        z-index:1;
}
.video-container .txt-container {
	position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        text-align:center;
        color:#fff;
        z-index:2;
        width:100%;
}
.video-container .txt-container p {
	font-size:48px;
            line-height:1.4;
            font-weight:300;
            margin:0;
}
.video-container .txt-container em {
	
            display:block;
            margin-top:20px;
            font-size:18px;
            letter-spacing:2px;
            font-style:normal;
}
@media all and (max-width:768px){
	.estimate_area .form .input > li:first-child {
    /* width: 237px; */
	width: calc(100% - 10.8ch - 10px);
}
.estimate_area .form .input > li:nth-of-type(2) {
    /* width: 113px; */
    width: 10.8ch;
}
	.video-container {
    height: 100%;
	}
	.video-container .txt-container p {
	font-size:32px;
	max-width: 23ch;
	margin-inline: auto;
	br{ display: none; }
}
.video-container .txt-container em {
            font-size:16px;
}
}

header {
	@media (width < 1130px) { position: absolute; inset: 0 0 auto; z-index: 10; color: white;
		.tel { color: inherit;
			@media (width >= 550px) { background-image: url("/images/common/bg_gumi_tel-white.png"); }
		}
		.tel a { color: inherit; }
		.btn_m_menu { background-image: url("/images/common/icon_m_menu-white.png"); }
	}
}

.portfolio_area ul > li .img {
    aspect-ratio: 1 / 1;
}

.box_quick{right:60px; bottom:30px; position: absolute; z-index: 5 }
.box_quick > ul > li > a{display:block; opacity:0.3; padding:19px 80px 19px 0; color:#fff; transition:all 0.4s ease-out 0s;}
.box_quick > ul > li > a > i{font-size:15px;}
.box_quick > ul > li > a > p{margin-top:6px; font-weight:300; font-size:17px;}
.box_quick > ul > li{position:relative; border-bottom:1px solid rgba(255,255,255,0.1);}
.box_quick > ul > li:last-child{border:none;}
.box_quick > ul > li:hover a{opacity:1;}
.box_quick > ul > li > a:after{content:""; position:absolute; opacity:0; top:21px; right:19px; width:54px; height:54px; background:url(../images/main/icon_more.png) no-repeat 50% 50%; transition:all 0.4s ease-out 0s;}
.box_quick > ul > li:hover > a:after{opacity:1; right:0;}
@media all and (min-width:1921px){
	.box_quick > ul > li > a > p{font-size:20px;}
	.box_quick > ul > li > a > i{font-size:16px;}
	.box_quick > ul > li > a{padding:27px 80px 27px 0;}
}
@media all and (max-width:1380px){
	.box_quick{right:4%;}
}
@media all and (max-width:1110px){
	.box_quick > ul > li > a > p{font-size:16px;}
	.box_quick > ul > li > a{padding:19px 70px 19px 0;}
}
@media all and (max-width:1023px){
	.box_quick > ul > li > a:after{width:50px; height:50px; background-size:cover;}
}
@media all and (max-width:639px){
	.box_quick{display:none;}
}