.seeworks_wrap{position:absolute; width:120px; height:77px; bottom:25px; left:50%; transform: translate(-50%,0); }
.seeworks_wrap > p{font-size:15px; color:#fff; font-weight: 300;}
.seeworks_wrap > div{background-color:#fff; width:1px; height: 43px; margin:10px auto 0 auto; animation:seemore 1s infinite alternate; }

.request_fix_wrap{position:fixed; top:50%; right:30px; width:31px; cursor: pointer; z-index:3;}


.request_fix_wrap > a:hover .is-outer{
		stroke-dashoffset: 0;
}

.is-inner {
    stroke-width: 2;
	opacity:.7;
}
.circle-action2 {
    fill: #fff;
    stroke: #8f8f8f;
}

.circle-action {
    fill: transparent;
    stroke: #000;
}
.is-outer {
    stroke-width: 3;
    stroke-dasharray: 227;
    stroke-dashoffset: 227;
    transform-origin: 50%;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 400ms linear;
}

.request_fix_wrap .circle_action{
	fill:transparent;
	stroke:#000;
}
.request_fix_wrap a > img{width:15px; position:absolute;z-index: 2; top:15.7px; left:12.5px;}
.request_fix_wrap a > p{font-size:12px; width:55px; height:15px; font-weight: 200; color:#000; transform: rotate(90deg);
	position:absolute; top:65px; left:-6px;}

@-webkit-keyframes seemore{
	0%{height:20px;}
	100%{height: 43px;}
}



@keyframes closeStickback{
	0%{left:50%; top:0px; transform: translate(-50%,0) rotate(45deg);}
	100%{left:-50%; top:120%; transform: translate(-50%,0) rotate(-90deg);}
}




@-webkit-keyframes closeStickback{
	0%{left:50%; top:0px; transform: translate(-50%,0) rotate(45deg);}
	100%{left:-50%; top:120%; transform: translate(-50%,0) rotate(-90deg);}
}

@-webkit-keyframes closeStick2back{
	0%{left:50%; top:0px; transform: translate(-50%,0) rotate(-45deg);} 
	100%{left:100%; top:120%; transform: translate(-50%,0) rotate(90deg);}
}

@keyframes closeStickback{
	0%{left:50%; top:0px; transform: translate(-50%,0) rotate(45deg);}
	100%{left:-50%; top:120%; transform: translate(-50%,0) rotate(-90deg);}
}

@keyframes closeStick2back{
	0%{left:50%; top:0px; transform: translate(-50%,0) rotate(-45deg);} 
	100%{left:100%; top:120%; transform: translate(-50%,0) rotate(90deg);}
}


 
@-webkit-keyframes closeStick{
	0%{left:-50%; top:120%; transform: translate(-50%,0) rotate(-90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(45deg);}
}

@-webkit-keyframes closeStick2{
	0%{left:100%; top:120%; transform: translate(-50%,0) rotate(90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(-45deg);}
}

@-moz-keyframes closeStick{
	0%{left:-50%; top:120%; transform: translate(-50%,0) rotate(-90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(45deg);}
}

@-moz-keyframes closeStick2{
	0%{left:100%; top:120%; transform: translate(-50%,0) rotate(90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(-45deg);}
}

@-o-keyframes closeStick{
	0%{left:-50%; top:120%; transform: translate(-50%,0) rotate(-90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(45deg);}
}

@-o-keyframes closeStick2{
	0%{left:100%; top:120%; transform: translate(-50%,0) rotate(90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(-45deg);}
}

@keyframes closeStick{
	0%{left:-50%; top:120%; transform: translate(-50%,0) rotate(-90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(45deg);}
}

@keyframes closeStick2{
	0%{left:100%; top:120%; transform: translate(-50%,0) rotate(90deg);}
	100%{left:50%; top:0px; transform: translate(-50%,0) rotate(-45deg);}
}




.mainimg_wrap{width:100%; height:100vh; position:fixed; z-index: 0; top:0; left:0; background-color: #000000;}
.mainimg_wrap .mov_wrap{width:100%; height:100%; position:relative;  background-color: #000; opacity:0.3; verflow: hidden;}
.mainimg_wrap .mov_wrap .mian-video{opacity:.75; position:absolute; top:50%; left:50%; z-index: 0; transform: translate(-50%,-50%);}
.mainimg_wrap .txt_wrap{width:734px; height:233px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 1;}
.mainimg_wrap .txt_wrap > p{word-break: keep-all; position:absolute;}
.mainimg_wrap .txt_wrap .mes1{top:0; left:0px; font-size:75px; font-weight: 700; color:#fff; font-variant: small-caps; line-height: 70px; opacity: 0;}
.mainimg_wrap .txt_wrap .mes2{top:150px; left:-50px; font-size:26px; font-weight: 400; color:#fff; opacity: 0;}
.mainimg_wrap .txt_wrap .mes3{top:190px; left:50px; font-size:20px; font-weight: 400; color:#fff; opacity: 0;}

.mainimg_wrap .txt_wrap .stick .circle{width:9px; height:9px;  background-color: #fff; border-radius: 50%; float:left;}
.mainimg_wrap .txt_wrap .stick .line{height:1px; width:0; background-color: #fff; margin:4px 0; float:left;}
.mainimg_wrap .txt_wrap .stick:nth-child(1){position:absolute; left:30px; transform: rotate(135deg)}
.mainimg_wrap .txt_wrap .stick:nth-child(2){position:absolute; right:50px; transform: rotate(-45deg); bottom:50px;}


.main_rest_wrap{width:100%; position:absolute; z-index: 1; top:100vh; background-color: #fff;}
.recent_pofol_wrap{width:calc(100% - 30px); max-width: 1400px; margin:0 auto;}
.recent_pofol_wrap .title_wrap{width:100%; text-align: left; margin-top:67px;}
.recent_pofol_wrap .title_wrap .stick{width:51px; height:5px; background-color: #000; margin-bottom:30px;}
.recent_pofol_wrap .title_wrap p.title{font-size:3.125rem; font-weight: 700; color:#000; line-height: 2rem;}
.recent_pofol_wrap .title_wrap p.sub{font-size:20px; font-weight: 400; color:#000;}
.recent_pofol_wrap .pofol{width:100%; margin-top:250px;}
.recent_pofol_wrap .pofol:after{content:""; display:block; clear:both;}

.recent_pofol_wrap .pofol .img_wrap{ position:relative; overflow: hidden;  box-shadow:80px 60px 50px rgba(0,0,0,0.3); width:100%;}
.recent_pofol_wrap .pofol .img_wrap .empty_box{ content: ""; display: block;}
.recent_pofol_wrap .pofol .img_wrap .inner_box{overflow: hidden; position:absolute; }
.recent_pofol_wrap .pofol .img_wrap .inner_box > img{position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}

.recent_pofol_wrap .pofol .txt_wrap{float:left;}
.recent_pofol_wrap .pofol .txt_wrap p:nth-child(1){font-size:1.5625rem; font-weight: 400; color:#000;}
.recent_pofol_wrap .pofol .txt_wrap p:nth-child(2){font-size:2.5rem; line-height: 2.18rem; font-weight: 700; color:#000; text-transform: uppercase;}
.recent_pofol_wrap .pofol .txt_wrap p:nth-child(3){font-size:1.25rem; font-weight: 400; color:#000;}

.recent_pofol_wrap .pofol.left .img_wrap{float:left;}
.recent_pofol_wrap .pofol.right .img_wrap{float:right;}
.recent_pofol_wrap .pofol.left .txt_wrap{float:left; margin-left:39px;}
.recent_pofol_wrap .pofol.right .txt_wrap{float:right; text-align: right; margin-right:39px;}

.recent_pofol_wrap .pofol.sel1 .img_wrap{ width:100%; max-width:645px; }


.recent_pofol_wrap .pofol.sel1 .img_wrap .empty_box{ content: ""; display: block; padding-top:54%; /* 1:1 비율 */}
.recent_pofol_wrap .pofol.sel2 .img_wrap{ width:100%; max-width:645px;}
.recent_pofol_wrap .pofol.sel2 .img_wrap:before { content: ""; display: block;  padding-top:54%; /* 1:1 비율 */}
.recent_pofol_wrap .pofol.sel3 .img_wrap{ width:100%; max-width:645px;}
.recent_pofol_wrap .pofol.sel3 .img_wrap:before { content: ""; display: block;  padding-top:54%; /* 1:1 비율 */}
.recent_pofol_wrap .pofol.sel4 .img_wrap{ width:100%; max-width:477px;}
.recent_pofol_wrap .pofol.sel4 .img_wrap:before { content: ""; display: block;  padding-top:137.31%; /* 1:1 비율 */}
.recent_pofol_wrap .pofol.sel5 .img_wrap{ width:100%; max-width:425px;}
.recent_pofol_wrap .pofol.sel5 .img_wrap:before { content: ""; display: block;  padding-top:128%; /* 1:1 비율 */}

.ourservices_wrap{width:100%; padding:60px 0; background-color: #1e1f20; margin-top:50px; text-align: center;}
.ourservices_wrap p.title{font-size:1.875rem; font-weight:700; text-align: center; color:#fff;}
.ourservices_wrap .inner_wrap{width:calc(100% - 30px); max-width:1400px; margin:0 auto; margin-top:139px;}
.ourservices_wrap .inner_wrap:after{content:""; display:block; clear:both;}
.ourservices_wrap .inner_wrap .box{float:left; width:25%; height:258px; text-align: center; border-right:1px solid #a9a9a9;position:relative;  box-sizing: border-box;}
.ourservices_wrap .inner_wrap .box:last-child{border:none;}
.ourservices_wrap .inner_wrap .box > p{position:absolute; top:32px; font-size:20px; font-weight: 400; color:#fff; left:50%; transform: translate(-50%,0); letter-spacing: 3px;}
.ourservices_wrap .inner_wrap .box > a{position:absolute; top:205px; left:50%; font-size:11px;font-weight: 200; color:#fff; width:88px; height:31px; border: 1px solid #fff; display:block; text-align: center; line-height: 31px; transform: translate(-50%,0); transition: all 0.5s;}

.ourservices_wrap .inner_wrap .box > a:hover{
	 border: 1px solid #1e1f20;  background-color: #ef5a5a; transition: all 0.5s;
}


@media only screen and (max-width: 768px){
.recent_pofol_wrap .pofol.left .txt_wrap{margin-left:0; margin-top:30px;}
.recent_pofol_wrap .pofol.right .txt_wrap{margin-right:0; margin-top:30px;}
}

@media only screen and (max-width: 640px){
	.ourservices_wrap .inner_wrap .box{width:50%;}
	.ourservices_wrap .inner_wrap .box:nth-child(2){border:none;}
	.ourservices_wrap .inner_wrap .box:nth-child(3){margin-top:50px;}
	.ourservices_wrap .inner_wrap .box:nth-child(4){margin-top:50px;}
}