* {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button {
	background:transparent;
	border:0;
	font-size:17px;
	font-weight:normal;
	font-family:"NSR", HelveticaNeue, DroidSans, Sans-serif, Helvetica;
	letter-spacing:-.5px;
	vertical-align:baseline;
}

html {
	font-size:10px;
	overflow-x:hidden;
}

body {
	color:#505050;
	line-height:1.2;
	min-height:100vh;
	min-width:320px;
	overflow-x:hidden;
	width:100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

.tel {cursor: auto;}
body {background: #80735d; color: #fff; overflow-x:hidden;}
#wrap {max-width:1920px; margin: 0 auto; }
#wrap .wrap_in {background: #000; color: #fff;}
.layout {position: relative; max-width:1100px; margin: 0 auto; box-sizing: border-box;}
#header {display: none;}

.only_web {display: inline-block;}
.only_mo {display: none;}
.br_mo {display: none;}


/* main_vis_wrap */
.main_vis_wrap { background:#000; height:100vh; position:relative; overflow: hidden;}
.main_vis_wrap iframe {width: 100%; height: 150%; left: 0; position:absolute; top: -25%; transform: scale(1.5); }
@media screen and (max-width:960px) {
	.main_vis_wrap { height:0; padding-bottom:49%; }
	.main_vis_wrap iframe {height: 150%; top: -13vw;}
}
.yt_dimm { height:100%; left:0; position:absolute; top:0; width:100%; z-index:5; }

.main_vis_wrap .control_play,
.main_vis_wrap .control_sound { background-position:center; background-repeat:no-repeat; background-size:auto 27px; bottom:60px; cursor:pointer; display:block; height:27px; line-height:27px; position:absolute; z-index:9; }
.main_vis_wrap .control_sound { background-image:url("../../../img/main/control_sound.png"); right:50px; width:41px; }

/* 2022-10-22 */
.evt-video { position:relative; height: 0; padding-top: 49%; overflow: hidden;}
.evt-video video {position: absolute; top: 0; left: 50%; width: 100%; transform: translateX(-50%);}
.evt-video .emblem { position:absolute; left:50%; top:35%; max-width:324px; max-width:21%; transform: translateX(-50%) translateY(-35%); z-index:9; }
.evt-video .scroll_bar { position:absolute; left:50%; bottom:0; margin-left:-23px; z-index:9; }
.evt-video .control_play,
.evt-video .control_sound { position:absolute; bottom:66px; display:block; height:27px; line-height:27px; background-repeat:no-repeat; background-position:center; z-index:9; cursor:pointer; }
.evt-video .control_play { right:180px; width:100px; background-image:url('../img/main/btn_video_stop.png');}
.evt-video .control_sound { right:136px; width:40px; background-image:url('../img/main/btn_sound_on.png');}
.evt-video .control_play.off { background-image:url('../img/main/btn_video_play.png'); }
.evt-video .control_sound.off { background-image:url('../img/main/btn_sound_off.png'); }

.section1 {text-align: center; padding-top: 180px; padding-bottom: 100px;}
.section1 .txt1 {margin-top: 100px; font-size: 60px; font-weight: 200; letter-spacing: -0.02em; color: #ed2058; line-height: 1.53;}
.section2 {padding: 62px 0; background: #201f1f;}
.section2 .tit1 {padding-left: 74px; margin-bottom: 50px;}
.section2 .txt1 {margin-bottom: 15px; padding-left: 60px; font-size: 32px; letter-spacing: -0.02em;}
.section2 .txt2 {padding-left: 60px; font-size: 24px;  letter-spacing: -0.02em; font-weight: 100; line-height: 1.34;}
.section2 .w-list {padding: 80px 0 0 0; text-align: center;}
.section2 .w-list li {display: inline-block; margin: 0 15px;}
.section3 .sec3_01 {padding: 60px 0 0 0;}
.section3 .sec3_01 .txt-box {margin: 50px 0;}
.section3 .tit1 {padding-left: 74px;}
.section3 .txt-box {padding-left: 60px;}
.section3 .txt-box .num {margin-bottom: 20px; font-size: 32px; letter-spacing: -0.02em; }
.section3 .txt-box .tit2 {position: relative; margin-bottom: 40px; padding-bottom: 22px; font-size: 42px; letter-spacing: -0.02em;  font-weight: 400;}
.section3 .txt-box .tit2:after {content: ""; position: absolute; left: 0; bottom: 0; width: 80px; border-bottom: 2px solid #fff;}
.section3 .txt-box .txt1 {font-size: 24px; letter-spacing: -0.02em; line-height: 1.34; font-weight: 100;}
.sec3_01 .p-list {text-align: right;}
.sec3_01 .p-list li {display: inline-block; margin-left: 15px;}
.sec3_02 {padding: 100px 0 0 0;}

.section3 .ad-img {text-align: center; }
.sec3_02 .ad-list {padding: 80px 0 0 0; text-align: center;}
.sec3_02 .ad-list li {display: inline-block; margin: 0 15px;}
.sec3_03 {padding: 100px 0 0 0;}
.sec3_02 .txt-box,
.sec3_03 .txt-box,
.sec3_04 .txt-box {margin-bottom: 50px;}
.ad-in-list {margin: 60px 0 0 0;  padding: 60px 0 140px;background: url('../img/main/sec03_05_bg1.png') no-repeat left bottom;}
.ad-in-list:after {content: ""; display: block; clear: both;}
.ad-in-list li {float: left; margin-left: 20px;}
.ad-in-list li:first-child {margin-left: 22px;}

.section4 {padding: 70px 0 100px;}
.section4 .tit1 {padding-left: 74px; margin-bottom: 120px;}
.section4 .m-img {text-align: center;}

.title_top .title01 span {display: block; margin-bottom: 5px; font-size: 14px; font-weight: normal; font-family: 'NanumSquareRound';}
.title_top .title01 strong {display: block; font-size: 42px; letter-spacing: -0.02em; font-weight: normal; font-family: 'NanumSquareRound';}
.title_top .text01 {margin-bottom: 35px; font-size: 28px; line-height: 1.42; letter-spacing: -0.04em; font-weight: normal;}
.section08  {text-align: center; color: #000c45; padding-bottom: 30px;  background: #fff;}
.section08 .sec_top {margin-bottom: 90px;}
.section08 .sec_top .tit01 {padding-top: 100px; margin-bottom: 25px;}
.section08 .sec_top .tit01 span {padding-left: 20px; letter-spacing: 1.4em;}
.section08 .sec_top .tit01 strong {}


/* 2024-02-18 */
.se4 {height: 200px; background: #80735d; display: flex; align-items: center; justify-content: center;}
.se4 .pc-view {position: relative; bottom: 30px; display: flex; gap: 26px;}
.se4 .mo-view {position: relative; bottom: 68px;}
.se4 .mo-view img {width: 24px;}

@media screen and (max-width: 768px){
    .se4 .pc-view {display: none;}
    .se4 .mo-view {display: flex; gap: 18px;}
}









/* right_quick */
.right_quick {display: block; position: fixed; right: 0; top: 0; width: 189px; z-index: 99;}
.rq_fixed .right_quick{position: fixed; top: 0; }
.right_quick .rq_cont1 {position: relative; height: 425px; padding:107px 12px 0; background: #ed2058 url('../img/main/right_quickmenu1.png') no-repeat 0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* .right_quick .rq_cont1:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 185px; background: url('../img/main/right_quickmenu0.png') no-repeat 0 0;} */
.right_quick .rq_cont1 .rq_box0 {margin-bottom: 10px;}
.right_quick .rq_cont1 .rq_box0 textarea {width: 100%; height: 147px; line-height: 1.5; font-size: 15px; color: #333; padding: 10px; letter-spacing: -0.04em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.right_quick .rq_cont1 .rq_box1 {margin-bottom: 10px;}
.right_quick .rq_cont1 .rq_box1 input {width: 100%; height: 32px; font-size: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.right_quick .rq_cont1 .rq_box2 .tit01 {font-size: 13px; color: #fff; margin-bottom: 7px;}
.right_quick .rq_cont1 .rq_check {margin-bottom: 20px;}
.right_quick .rq_cont1 .rq_check input {font-size: 0; width: 0; height: 0;}
.right_quick .rq_cont1 .rq_check label {display: inline-block; padding-left: 21px; line-height: 16px; background: url('../img/main/ico_checkbox.png') no-repeat 0 -16px; color: #fff; font-size: 13px; margin-right: 14px;}
.right_quick .rq_cont1 .rq_check input:checked + label {color: #fff; background-position: 0 0;}  
.right_quick .rq_cont1  button {display: block; width: 100%; height: 43px; font-size:16px ; color: #ed2058; text-align: center; background: #fff;}

#footer{padding: 40px 0 200px 0;background: #fff;border-top: 1px solid #ddd;text-align: center;}
#footer .foot_tit{font-size: 16px;font-weight: 300;line-height: 1.5em;}
#footer .company{margin-top: 10px;color: #666;font-size: 12px;font-weight: 300;line-height: 1.5em;}
#footer address{margin-top: 10px;color: #666;font-size: 12px;font-weight: 300;line-height: 1.5em;}
#footer address strong{font-weight: 700;}
#footer .copyright{padding: 24px 0 40px;color: #a9a9a9;font-size: 12px;font-weight: 300;}
#ch-plugin .sc-ifAKCX  {bottom: 20px !important;}

/* quick */
.quick_wrap {position: fixed; right: 0; top:50%; transform: translateY(-50%); z-index: 10;}
.quick_wrap .q_cont.box2 {height: 181px; padding-top: 138px; background: url('/img/main/quick_img2.png') no-repeat center 0; text-align: center;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

.popup-layer {position: fixed; left: 50%; top: 10%; z-index: 99; transform: translate(-50%,0)}				
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

/* 팝업 2404 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0; max-width:1920px;}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {font-size:12px;padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_reject strong { font-size:12px; }
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}
/* 팝업 2404 end */

/* mobile */
@media all and (min-width:960px) {
	.contact_bot{display: none; position: fixed; left: 0; right: 0; bottom: 0;z-index: 1; background: url('../img/main/quick_bg_pc.jpg') no-repeat center top / cover;;}
	.contact_bot .layout{position: relative; margin: 0 auto; padding: 15px 20px; 
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	}
	.contact_bot .cb_top{margin-bottom: 12px; overflow: hidden;}
	.contact_bot .btn_submit01{position: absolute; right: 35px; top: 44px; width: 215px; height: 90px; line-height: 90px; text-align: center; color: #fff; background: #d81c50; border-radius:5px; font-size: 19px;}
	.contact_bot .cb_top h2{float: left;margin-left: 10px; margin-top: 20px;}
	.contact_bot .cb_top .agree_box{position: absolute;right: 262px;top: 45px;font-size: 13px;color: #fff;}
	.contact_bot .cb_top .agree_box label{display: inline-block; margin-right: 10px; margin-top: 5px;}
	.contact_bot .cb_bot {position: relative; padding-right: 200px;}
	.contact_bot .cb_bot table{width: 100%; color: #fff;}
	.contact_bot .cb_bot th{text-align: left;padding-left: 20px; font-size: 20px; color: #fff; font-weight: normal;}  
	.contact_bot .cb_bot td select, 
	.contact_bot .cb_bot td input{height:54px;width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.contact_bot .cb_bot td textarea{height: 54px;width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.contact_bot .cb_bot td.ph select,
	.contact_bot .cb_bot td.ph input{width: 95px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	
}

.quick_menu {display: none;}


/* mobile */
@media screen and (max-width: 960px){

	.popup-layer {left: 10%; right: 10%; transform: translate(0,0);}

	.only_web {display: none;}
	.only_mo {display: inline-block;}
	.br_mo {display: block;}
	
	.quick_menu{display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; height: 58px; overflow: hidden;}
	.quick_menu:after{content: ""; display: block; clear: both;}
	.quick_menu a{float: left; width: 25%; text-align: center; }
	.quick_menu a img{max-height: 58px;}
	.quick_menu a:nth-of-type(1){background: #80735d;}
	.quick_menu a:nth-of-type(2){background: #80735d; }
	.quick_menu a:nth-of-type(3){background: #80735d; }
	.quick_menu a:nth-of-type(4){background: #80735d;}
	.quick_menu a:nth-of-type(5){background: #80735d;}
	
	.quick_wrap,
	.right_quick {display: none;} 

	/* 상담신청하기 */
	.contact_bot {display: block; position: fixed; left: 0; right: 0; bottom: 58px; height: 78px; padding: 5px 0; background: url('../img/main/quick_bg_pc.jpg') no-repeat center 0 / cover; z-index: 101; color: #fff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.contact_bot .layout {padding: 5px;}
	.contact_bot .cb_top {line-height: 24px; margin-bottom: 5px;}
	.contact_bot .cb_top:after {content: ""; display: block; clear: both;}
	.contact_bot .cb_top h2 {float: left;}
	.contact_bot .cb_top h2 img {width: 124px; max-height:24px; vertical-align: middle;}
	.contact_bot .cb_top .agree_box {float: left; margin-left: 10px; font-size: 11px;}
	.contact_bot .cb_top .agree_box a {position: relative; bottom: 3px;}
	.contact_bot .cb_top .agree_box a img {height: 16px; vertical-align: middle;}
	.contact_bot .cb_wrap {position: relative; padding-right: 67px;}
	.contact_bot .cb_bot tr {display: flex; justify-content: center;}
	.contact_bot .cb_bot th {position: relative; width: 40px; font-size: 12px; font-weight: normal; text-align: center; top: 7px;}
	.contact_bot .cb_bot th:first-child {width: 30px;}
	.contact_bot .cb_bot input[type="text"] {width: 100%; height: 28px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.contact_bot .cb_bot td.ph select {float: left;width: 31%; height: 28px; background: #fff; font-size: 12px; padding: 2px;}
	.contact_bot .cb_bot td.ph .dat {float: left; width: 3.5%;}
	.contact_bot .cb_bot td.ph input[type="number"] {float: left; width: 31%; height: 28px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.contact_bot .mo_dn {display: none;}
	.contact_bot .cb_bot textarea {width: 100%; height: 28px;}
	.contact_bot .btn_submit01 {position: absolute; right: 0; top: 0; width: 62px; height: 28px; line-height: 28px; border-radius:3px; background: #80735d; color: #fff; font-size: 12px; text-align: center; letter-spacing: -0.04em;}
	
	#ch-plugin .sc-ifAKCX {bottom: 140px !important;}
}

/* mobile */
@media screen and (max-width: 768px){
	img {max-width: 100%;}
	.layout {width: 100%; max-width:100%; padding: 0 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	.evt-video .control_play { right: 20px; bottom: 20px; }
	.evt-video .control_sound {display: none;}
	
	
	.section1 {padding: 90px 0 50px;}
	.section1 .txt1 {margin-top: 50px; font-size: 34px;}
	.section1 .txt1 br {display: none;}

	.section2 {padding: 31px 0;}
	.section2 .tit1 {padding: 0 30px; margin-bottom: 25px; text-align: center;}
	.section2 .txt1 {margin-bottom: 10px; padding-left: 30px; font-size: 20px; line-height: 1.32;}
	.section2 .txt2 {padding-left: 30px; font-size: 15px;}
	.section2 .w-list {padding: 40px 0 0;}
	.section2 .w-list li {margin: 30px 0; padding: 0 30px;}

	.section3 .sec3_01 {}
	.section3 .tit1 {padding: 0 30px; margin-bottom: 25px; text-align: center;}
	.section3 .sec3_01 .txt-box {margin: 25px 0; }
	.section3 .txt-box .num {margin-bottom: 10px; font-size: 20px;}
	.section3 .txt-box .tit2 {font-size: 26px; margin-bottom: 25px; padding-bottom: 18px;}
	.section3 .txt-box .tit2:after {border-bottom-width: 1px; width: 50px;}
	.section3 .txt-box .txt1 {font-size: 15px;}
	.section3 .txt-box .txt1 br {display: none;}
	.section3 .txt-box {padding-left: 30px;}
	.sec3_01 .p-list li {margin-left: 3px; width: 20%;}
	.sec3_01 .p-list li img {}
	.sec3_02 .txt-box, .sec3_03 .txt-box, .sec3_04 .txt-box {margin-bottom: 25px;}
	.sec3_02 .ad-list {padding: 0 0 0 0;}
	.sec3_02 .ad-list li {margin: 30px 0; padding: 0 15px;}

	.section3 .ad-img {padding: 0 15px;}
	.sec3_02,
	.sec3_03,
	.sec3_04,
	.sec3_05 {padding: 80px 0 0 0;}
	.sec3_05 {margin: 0 -15px;}
	
	.section4 {padding: 70px 0;}
	.section4 .tit1 {padding: 0 30px; margin-bottom: 25px; text-align: center;}
	
	.ad-in-list {position: relative; background: none; margin: 0; padding-bottom: 50px;}
	.ad-in-list .slick-list {padding: 57px 5px !important;}
	.ad-in-list .slick-list:after {content: ""; display: block; position: absolute; left:50%; margin-left: -134px; top:0; width: 267px; height: 533px; background: url('../img/mo/mo_sec03_05_bg1.png') no-repeat 0 0;}
	.ad-in-list li {margin-left: 0;}
	.ad-in-list li:first-child {margin-left: 0;}
	.ad-in-list .slick-arrow {position: absolute; width: 30px; height: 46px; top:50%; margin-top: -23px; font-size: 0;  z-index: 55;}
	.ad-in-list .slick-arrow.slick-prev  {left: 5px ;background: url('../img/mo/btn_prev.png') no-repeat center center / 20px; }
	.ad-in-list .slick-arrow.slick-next  {right: 5px ; background: url('../img/mo/btn_next.png') no-repeat center center / 20px;}
	.ad-in-list .slick-arrow.slick-disabled {visibility: hidden;}
	

	.section08 {padding-bottom: 30px;}
	.section08 .sec_top {margin-bottom: 45px;}
	.section08 .sec_top .tit01 {padding-top: 70px; margin-bottom: 12px;}	
	.section08 .sec_top .tit01 span {padding-left: 20px;}
	.section08 .sec_top .tit01 strong {}
	.section08 .sec_body {padding:  0 20px;}
} 


/* 홈페이지제작 */
.homepage .sub-content{width:100%;background-color:#f1f4f7;}
.portfolio-wrap {}
.portfolio-wrap .portfolio-list:after{content:"";display:block;clear:both;}
.portfolio-wrap .portfolio-list li{position:relative;float:left;width:20%;padding-bottom: 20%;}
.portfolio-wrap .portfolio-list li.img-cols02{width: 40%;}
.portfolio-wrap .portfolio-list li  .site_info{display:none;}
.portfolio-wrap .portfolio-list li .port-img{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-repeat: no-repeat;background-position: center center;background-size: cover;
	transition: 0.3s all ease-in;
	-moz-transition: 0.3s all ease-in;
	-webkit-transition: 0.3s all ease-in;
}

.portfolio-wrap .portfolio-list li .por-more{position:absolute;left:0;right:0;top:0;bottom:0;background: url("/img/webdesign/more_img.png") repeat-x center bottom;text-align:center;overflow:hidden;opacity:0; filter:alpha(opacity=00);
	border: 5px solid #47c6e8;

	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
}
.portfolio-wrap .portfolio-list li .por-more span{display: block;}
.portfolio-wrap .portfolio-list li .por-more .h-page-txt{position: absolute;left: 0;right: 0;bottom: 0;padding: 30px;color: #fff;font-size: 22px;line-height: 130%;text-align: left;}
.portfolio-wrap .portfolio-list li .por-more .h-page-txt span{font-size: 14px;}
/* .portfolio-wrap .portfolio-list li .pro-more img{position:absolute;left:50%;margin-left:-31px;bottom:-47px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;

	transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
} */
.portfolio-wrap .portfolio-list li:hover .port-img{}
.portfolio-wrap .portfolio-list li:hover .por-more{opacity:1;filter:alpha(opacity=99);}
/* .portfolio-wrap .portfolio-list li:hover .pro-more img{bottom:40%;
	transform:rotate(0);
	-webkit-transform:rotate(0);
	-moz-transform:rotate(0);
	-ms-transform:rotate(0);
} */
.portfolio-layer{position:fixed;left:50%;top:50%;margin-top:-290px;margin-left:-382px;padding:46px 48px;width:667px;background-color:#FFF;z-index:100;display:none;}
.portfolio-layer .layer-top{margin-bottom:20px;}
.portfolio-layer .layer-top h2{font-size:30px;font-weight:bold;color:#333;margin-bottom:5px;}
.portfolio-layer .layer-top .page-link{display:block;font-size:14px;color:#666;}
.portfolio-layer .layer-top .page-link:hover{color:#000;}
.portfolio-layer .h-page-txt{font-size:16px;color:#666;line-height:18px;margin-bottom:12px;max-height:36px;overflow:auto;display: block;}
.portfolio-layer .h-page-txt span{display: block;font-size: 12px;}
.portfolio-layer .h-page-txt > a{font-size:14px;color:#666;}
.portfolio-layer .h-page-img{position:relative;border:1px solid #ddd;width:665px;height:401px;}
.portfolio-layer .h-page-img .btn_link{position:absolute;right:15px;bottom:15px;width: 46px;height: 46px;background: url("/img/sub/btn_link.png") no-repeat center center;z-index: 1;}
.portfolio-layer .btn_layer_close{position:absolute;right:0;top:0;width:57px;height:57px;text-align:center;background:#000 url('../img/sub/btn_layer_close.png') no-repeat center center;text-indent:-9999em;overflow:hidden;}

@media screen and (max-width: 767px) {
	.portfolio-wrap .portfolio-list li{width: 50%;padding-bottom: 50%;}
	.portfolio-wrap .portfolio-list li.img-cols02{width: 100%;}
	.portfolio-wrap .portfolio-list li .por-more{border: none;opacity:1;filter:alpha(opacity=99);background-size:cover;}
	.portfolio-wrap .portfolio-list li .por-more .h-page-txt{padding: 10px;font-size: 16px;}
	.portfolio-wrap .portfolio-list li .por-more .h-page-txt span{font-size: 12px;}
	.portfolio-wrap .portfolio-list{width:100%;}

	.portfolio-layer{left:0;right:0;top:64px;margin-top:0;margin-left:0;padding:15px 18px;box-sizing:border-box;width:100%;overflow:auto;}
	.portfolio-layer .layer-top{padding-right:42px;}
	.portfolio-layer .layer-top h2{font-size:20px;}
	.portfolio-layer .layer-top .page-link{font-size:12px;}
	.portfolio-layer .h-page-txt{font-size:12px;max-height:auto;overflow:visible;}
	.portfolio-layer .btn_layer_close{width:42px;height:42px;background-size:24px;}
	.portfolio-layer .h-page-img{position:relative;width:100%;height:auto;padding-bottom:60%;}
	.portfolio-layer .h-page-img > img{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;}
}

.portfolio-layer{position:fixed;left:50%;top:50%;margin-top:-290px;margin-left:-382px;padding:46px 48px;width:667px;background-color:#FFF;z-index:100;display:none;}
.portfolio-layer .layer-top{margin-bottom:20px;}
.portfolio-layer .layer-top h2{font-size:30px;font-weight:bold;color:#333;margin-bottom:5px;}
.portfolio-layer .layer-top .page-link{display:block;font-size:14px;color:#666;}
.portfolio-layer .layer-top .page-link:hover{color:#000;}
.portfolio-layer .h-page-txt{font-size:16px;color:#666;line-height:18px;margin-bottom:12px;max-height:36px;overflow:auto;display: block;}
.portfolio-layer .h-page-txt span{display: block;font-size: 12px;}
.portfolio-layer .h-page-txt > a{font-size:14px;color:#666;}
.portfolio-layer .h-page-img{position:relative;border:1px solid #ddd;width:665px;height:401px;}
.portfolio-layer .h-page-img .btn_link{position:absolute;right:15px;bottom:15px;width: 46px;height: 46px;background: url("/img/sub/btn_link.png") no-repeat center center;z-index: 1;}
.portfolio-layer .btn_layer_close{position:absolute;right:0;top:0;width:57px;height:57px;text-align:center;background:#000 url('../img/sub/btn_layer_close.png') no-repeat center center;text-indent:-9999em;overflow:hidden;}

@media screen and (max-width: 767px) {
	.portfolio-layer{left:0;right:0;top:64px;margin-top:0;margin-left:0;padding:15px 18px;box-sizing:border-box;width:100%;overflow:auto;}
	.portfolio-layer .layer-top{padding-right:42px;}
	.portfolio-layer .layer-top h2{font-size:20px;}
	.portfolio-layer .layer-top .page-link{font-size:12px;}
	.portfolio-layer .h-page-txt{font-size:12px;max-height:auto;overflow:visible;}
	.portfolio-layer .btn_layer_close{width:42px;height:42px;background-size:24px;}
	.portfolio-layer .h-page-img{position:relative;width:100%;height:auto;padding-bottom:60%;}
	.portfolio-layer .h-page-img > img{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;}
}