@charset "UTF-8";

#header { position:fixed; left:0; top:0; width:100%; height:35px; background:rgba(255,255,255,0.8); border-bottom: 1px solid #e9e9e9; z-index:999; }
/*#header .helppr_logo { width:120px; height:35px; margin:0 auto; background: url('../../Images/helppr_logo.svg') no-repeat center center;background-size:60%; }*/
#header .helppr_logo { width:100%; height:35px; color:#f35400;padding-top:10px;text-align:center;font-size:18px }

#visual { position:relative; width:100%; height:auto; margin-top:35px;
background: #f35400;
background: -moz-linear-gradient(left, #f35400 0%, #f77500 100%);
background: -webkit-linear-gradient(left, #f35400 0%,#f77500 100%);
background: linear-gradient(to right, #f35400 0%,#f77500 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f35400', endColorstr='#f77500',GradientType=1 ); }
#visual { position:relative; width:100%; height:auto; margin-top:35px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f35400', endColorstr='#f77500',GradientType=1 ); /* IE6-9 */ }
#visual .visual_logo { width:100%; height:85%; background: url('../../Images/helppr_logo_white.svg') no-repeat center center;background-size:50%; }
#visual .visual_infoTxt { position:absolute; left:0; bottom:0; width:100%; height:30px; line-height:32px; background: rgba(230,230,230,0.8); text-align:center; font-size: 1rem; color:#000; z-index:999; }
#visual .swiper-slide > img { width:100%; }

#wrap { position:relative; width:100%; height:100%; }
#container { position:relative; padding:20px; }

.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;} 
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;} 

/*  ============================
	GNB
================================ */
.gnbArea { position:relative; /* margin-bottom:30px; */ }
.gnb_nav { width:100%; padding:20px 0; overflow:hidden; /* border-bottom:1px solid #c4c4c4; */ }
.gnb_nav > li { float:left; width:25%; margin-bottom:10px; }
.gnb_nav > li > a { text-align:center; padding-top:55px; }
.gnb_nav > li:nth-child(1) > a { background: url('../../Images/btn_m_1.png') no-repeat center 15px;background-size:30px auto; }
.gnb_nav > li:nth-child(2) > a { background: url('../../Images/btn_m_11.png') no-repeat center 15px;background-size:30px auto; }
/*.gnb_nav > li:nth-child(2) > a { background: url('../../Images/btn_menu02.png') no-repeat center 18px;background-size:32px auto; }
.gnb_nav > li:nth-child(3) > a { background: url('../../Images/btn_menu03.png') no-repeat center 15px;background-size:26px auto; }*/
.gnb_nav > li:nth-child(3) > a { background: url('../../Images/btn_menu04.png') no-repeat center 15px;background-size:30px auto; }
.gnb_nav > li:nth-child(4) > a { background: url('../../Images/btn_menu05.png') no-repeat center 15px;background-size:32px auto; }
/*.gnb_nav > li:nth-child(6) > a { background: url('../../Images/btn_menu06.png') no-repeat center 15px;background-size:30px auto; }*/
.gnb_nav > li:nth-child(5) > a { background: url('../../Images/btn_menu06.png') no-repeat center 15px;background-size:30px auto; }
.gnb_nav > li:nth-child(6) > a { background: url('../../Images/btn_m_10.png') no-repeat center 15px;background-size:30px auto; }
.gnb_nav > li:nth-child(7) > a { background: url('../../Images/btn_m_9.png') no-repeat center 20px;background-size:33px auto; }
.gnb_nav > li:nth-child(8) > a { background: url('../../Images/btn_menu08.png') no-repeat center 20px;background-size:33px auto; }

.sidebar{ position:absolute; top:0; right:-260px; width:260px; height:100%; transition:.3s;	z-index:99998; }
.sidebar .sideBox{height:100%;overflow-y:scroll;background:#f6f6f6;/*background-image:linear-gradient(to bottom, #280046, #000);*/z-index:2;}

@media only screen and (orientation: landscape) { 
	.sidebar .sideBox{height:100%;}
}

.sidebar .userMypage{border-bottom:1px solid #ededed;border-bottom:1px solid rgba(0,0,0,.1);padding:35px 0 30px 0;text-align:center;}
.sidebar .userMypage1{border-bottom:1px solid #ededed;border-bottom:1px solid rgba(0,0,0,.1);padding:0 0 15px 0;text-align:center;}
.sidebar .userMypage .btn_home{display:inline-block;width:80px;height:30px;line-height:35px;text-align:center;color:#fff;background:#e63d3d;border-radius:3px;vertical-align: middle;}
.sidebar .userMypage .btn_login,
.sidebar .userMypage .btn_logout{display:inline-block;width:80px;height:30px;line-height:30px;text-align:center;margin:0 3px;color:#fff;background:#e63d3d;border-radius:3px;}
.sidebar .userMypage1 .btn_qna{display:inline-block;width:180px;height:30px;line-height:30px;text-align:center;margin:0 3px;color:#fff;background:#e63d3d;border-radius:3px;}

.sidebar .black_back{ 
	display:none;
	position:fixed;
	right:0;
	top:0;
	bottom:0;
	background: rgba(0,0,0,0.8);
	width:100%;
	height:100%;
	transition:.3s;
	z-index:-1;
}
.sidebar .black_back.active{ 
	display:block;
	/* z-index:inherit; */
}

.active{
	position:fixed;
	right:0;
	top:0;
	bottom:0;
}
.sidebar_area{
	margin:0;
	padding:0 0 20px 0;
}
.sidebar_area li{
	list-style:none;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.sidebar_area li a{
	padding:15px 0 15px 10px;
	/*font-weight:bold;*/
	font-size:1.1rem;
	color:#000;
	display:block;
	text-decoration:none;
}
.copyright{position:relative;width:95%;margin:0 auto;text-align:center;font-size:10px;color: rgba(0,0,0,0.3);letter-spacing:-0.02em;}
.sidebarBtn{
	position:absolute;
	top:7px;
	right:285px;
	width:32px;
	height:45px;
	background:transparent;
	border:none;
	outline:none;
	cursor:pointer;
	z-index:9999;
}
.sidebarBtn span{
	display:block;
	text-align:right;
	width:25px;
	height:2px;
	background:#c7c6c6;
	position:absolute;
	top:10px;
	left:20px;
	transition:.3s;
}
.sidebarBtn span:before{
	content:'';
	position:absolute;
	top:-6px;
	right:0;
	width:100%;
	height:2px;
	background:#c7c6c6;
	transition:.3s;
}
.sidebarBtn span:after{
	content:'';
	position:absolute;
	top:6px;
	right:0;
	width:100%;
	height:2px;
	background:#c7c6c6;
	transition:.3s;
}
.sidebarBtn.toggle span{ 
	width:30px;
	background:transparent;
}
.sidebarBtn.toggle span:before{
	top:0;
	width:30px;
	background:#c7c6c6;
	transform:rotate(45deg);
}
.sidebarBtn.toggle span:after{
	top:0;
	background:#c7c6c6;
	transform:rotate(-45deg);
}

/*  ============================
	MAIN - GALLERY
================================ */
.main .gallery { position:relative; }
.main .gallery h3{ width:70%; font-size:1.5rem; color:#171717; margin-bottom:10px;}
.main .gallery .gallery_thumb { width:100%; overflow:hidden; }
.main .gallery .gallery_thumb > li{ float:left; width:24.25%; margin:0 1% 3px 0; }
.main .gallery .gallery_thumb > li:nth-child(4n+4){ margin-right:0; }
.main .gallery .gallery_thumb > li > a > img{ width:100%; }

/*  ============================
	MAIN - BOARD
================================ */
.main .board { position:relative; margin-top:30px; }
.main .board h3{ width:100%; font-size:1.5rem; color:#171717; margin-bottom:10px;}
.main .board .board_list { width:100%; border-top:1px solid #e9e9e9; }
.main .board .board_list > li { width:100%; overflow:hidden; border-bottom:1px solid #e9e9e9; }
.main .board .board_list > li a { height: 30px; line-height: 30px; padding:0 10px; }
.main .board .board_list > li a .board_tit { display:inline-block; float:left; width: 70%; font-size:1.1rem; color:#8e8e8e; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }
.main .board .board_list > li a .board_date { display:inline-block; float:right; width:30%; text-align:right; font-size:1.1rem; color:#8e8e8e; }

/*  ============================
	GALLERY
================================ */
#header_sub { position: fixed; left:0; top:0; width:100%; height:60px; background: rgba(255,255,255,1); border-bottom:1px solid #e9e9e9; z-index:999; }
#header_sub .btn_back { position: absolute; left:0; top:0; width:60px; height:60px; background: url('../../Images/btn_back.png') no-repeat center center; background-size:10px auto; }
#header_sub .btn_home { position: absolute; right:0; top:0; width:60px; height:60px; background: url('../../Images/btn_home.png') no-repeat center center; background-size:23px auto; }
#header_sub .title{ width:100%; height:60px; line-height:60px;text-align:center; font-size:1.5rem; color:#000; }

/* GALLERY - LIST */
.sub .gallery { position:relative; margin:60px 0 30px 0; }
.sub .gallery .gallery_thumb { width:100%; overflow:hidden; }
.sub .gallery .gallery_thumb > li{ float:left; width:24.25%; margin:0 1% 3px 0; }
.sub .gallery .gallery_thumb > li:nth-child(4n+4){ margin-right:0; }
.sub .gallery .gallery_thumb > li > a > img{ width:100%; }

/* GALLERY - VIEW */
.sub .gallery .gallery_view { width:100%; overflow:hidden; }
.sub .gallery .gallery_view > li{ float:left; width:100%; /*min-height:400px;*/ }
.sub .gallery .gallery_view > li .content_date { width:100%; text-align:left; font-size:1.1rem; color:#000; margin:20px 0 5px 0;}
.sub .gallery .gallery_view > li > img{ width:100%; }

/* BOARD - LIST */
.sub .board { position:relative; margin:60px 0 30px 0; }
.sub .board .board_list { width:100%; }
.sub .board .board_list > li { width:100%; overflow:hidden; border-bottom:1px solid #e9e9e9; }
.sub .board .board_list > li a { height: 35px; line-height: 35px; padding:0 10px; }
.sub .board .board_list > li a .board_num { display:inline-block; float:left; width: 10%; font-size:1.1rem; color:#f35400; }
.sub .board .board_list > li a .board_tit { display:inline-block; float:left; width: 65%; font-size:1.1rem; color:#8e8e8e; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }
.sub .board .board_list > li a .board_date { display:inline-block; float:right; width:25%; text-align:right; font-size:1.1rem; color:#8e8e8e; }

/* BOARD - VIEW */
.sub .board .board_view { width:100%; }
.sub .board .board_view > li { width:100%; overflow:hidden; }
.sub .board .board_view > li .board_date { display:block; float:right; width:100%; text-align:right; font-size:1.1rem; color:#8e8e8e; padding:0px 0 15px 0;  }
.sub .board .board_view > li.content_body { min-height:350px; padding:10px 0 15px 0; border-top:1px solid #e9e9e9; }
.sub .board .board_view > li.board_tit { display:block; float:left; width: 100%; font-size:1.2rem; color:#000; margin-bottom:15px; } 

/* LOTTO - LIST */
.sub .lotto { position:relative; margin:60px 0 30px 0; }
.sub .lotto .lotto_list { width:100%; }
.sub .lotto .lotto_list > li { width:100%; overflow:hidden; border-bottom:1px solid #e9e9e9; padding:10px 0; }
.sub .lotto .lotto_list > li .lotto_num { float:left; display:inline-block; width: 15%; text-align:center; font-size:1.1rem; color:#f35400; }
.sub .lotto .lotto_list > li .lotto_tit { float:left; display:inline-block; width: 45%; text-align:left; font-size:1.1rem; color:#000; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }
.sub .lotto .lotto_list > li .lotto_rank { float:left; display:inline-block; width:15%; text-align:center; font-size:1.1rem; color:#8e8e8e; }
.sub .lotto .lotto_list > li .lotto_date { float:left; display:inline-block; width:25%; text-align:right; font-size:1.1rem; color:#8e8e8e; }
.sub .lotto .lotto_list > li .lotto_rank1 { float:left; display:inline-block; width:25%; text-align:center; font-size:1.1rem; color:#8e8e8e; }
.sub .lotto .lotto_list > li .lotto_date1 { float:left; display:inline-block; width:15%; text-align:center; font-size:1.1rem; color:#8e8e8e; }

/* REVIEW - LIST */
.sub .review { position:relative; margin:60px 0 30px 0; }
.sub .review .review_list { width:100%; }
.sub .review .review_list > li { width:100%; overflow:hidden; border-bottom:1px solid #e9e9e9; }
.sub .review .review_list > li a { height: 35px; line-height: 35px; padding:0 10px; }
.sub .review .review_list > li a .board_num { display:inline-block; float:left; width: 10%; font-size:1.1rem; color:#f35400; }
.sub .review .review_list > li a .board_tit { display:inline-block; float:left; width: 65%; font-size:1.1rem; color:#8e8e8e; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }
.sub .review .review_list > li a .board_date { display:inline-block; float:right; width:25%; text-align:right; font-size:1.1rem; color:#8e8e8e; }

/* REVIEW - VIEW */
.sub .review .review_view { width:100%; }
.sub .review .review_view > li { width:100%; overflow:hidden; }
.sub .review .review_view > li .review_date { display:block; float:right; width:100%; text-align:right; font-size:1.1rem; color:#8e8e8e; padding:0px 0 15px 0;  }
.sub .review .review_view > li.content_body { min-height:350px; padding:10px 0 15px 0; border-top:1px solid #e9e9e9; }
.sub .review .review_view > li.review_tit { display:block; float:left; width: 100%; font-size:1.2rem; color:#000; margin-bottom:15px; } 

/* LOCATION - MAP */
.sub .location { position:relative; margin:60px 0 30px 0; }
.sub .location .map{ text-align:center; min-height:350px; background:#f1f1f1; }
.sub .location .location_txt { position: relative; width:100%; }
.sub .location .location_txt .location_head { display:block; width:100%; text-align:left; font-size:1.5rem; color:#000; padding:20px 0 10px 0; }
.sub .location .location_txt .location_add { width:100%; text-align:left; font-size:1.2rem; line-height:20px;}

/* REVIEW - WRITE */
.picture_area { position: relative; width:100%; height:50px; background:#f1f1f1; border-bottom: 1px solid #e9e9e9; margin-top:60px; }
.picture_area .picture_view { position: absolute; left:0px; top:8px; width:auto; height:30px; line-height:30px; padding-left:65px; text-align:center; font-size:1.2rem; color:#9c9c9c; background: url('../../Images/photo_thumb.png') no-repeat 20px 5px; background-size:32px auto; }
.picture_area .picture_view > img{ position: absolute;left:18px;top:0; width:40px; height:32px; border-radius:3px; }
.picture_area .btn_com { position: absolute; right:10px; top:10px; width:70px; height:30px; line-height:30px; background:#f35400; text-align:center; font-size:1.1rem; color:#fff; margin-bottom:10px; }

.picture_area2 { position: relative; width:100%; height:50px; background:#f1f1f1; border-bottom: 1px solid #e9e9e9; margin-top:5px; }
.picture_area2 .btn_com { position: absolute; right:10px; top:10px; width:70px; height:30px; line-height:30px; background:#f35400; text-align:center; font-size:1.1rem; color:#fff; margin-bottom:10px; }

.sub .review .review_write { width:100%; }
.sub .review .review_write > li { width:100%; overflow:hidden; }
.sub .review .review_write > li .board_date { display:block; float:right; width:100%; text-align:right; font-size:1.1rem; color:#8e8e8e; padding:0px 0 15px 0;  }
.sub .review .review_write > li.content_body { min-height:350px; padding:10px 0 15px 0; border-top:1px solid #e9e9e9; }
.sub .review .review_write > li.board_tit { display:block; float:left; width: 100%; font-size:1.2rem; color:#000; margin-bottom:15px; } 

.sub .loginBox { position:relative; margin:50px 0 0 0; }
.sub .loginBox > li { width:100%; padding:15px 0; }
.sub .loginBox > li .btn_login { width:100%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#fff; background:#f35400; }
.sub .loginBox > li .btn_member { width:100%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#f35400; border:1px solid #f35400; box-sizing:border-box;}

.sub .loginBox > li #login_con { margin-right:5px; }
.sub .loginBox > li #login_con + label { margin-right:20px; }
.sub .loginBox > li #id_save { margin-right:5px; }

.sub .loginBox > li #man { margin:0 5px 0 10px; }
.sub .loginBox > li #man + label { margin-right:10px; }
.sub .loginBox > li #woman { margin-right:5px; }

.sub .loginBox1 { position:relative; margin:0px 0 0 0; }
.sub .loginBox1 > li { width:100%; padding:15px 0; }
.sub .loginBox1 > li .btn_login { width:100%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#fff; background:#f35400; }

.sub .loginBox2 { position:relative; margin:0px 0 0 0;}
.sub .loginBox2 { width:100%; padding:15px 0;}
.sub .loginBox2 .btn_login { width:20%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#fff; background:#f35400; display:inline-block}
.sub .loginBox2 .btn_login1 { width:40%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#fff; background:#f35400; display:inline-block}

/*  ============================
	FOOTER
================================ */
#footer{ position:relative; width:100%; overflow:hidden; border-top:10px solid #e3e3e3; }
#footer .copyright_txt{ width:100%; text-align:left; font-size:1.1rem; line-height:20px; padding:30px 20px; }

/*  ============================
	FOOTER
================================ */

.pb0 { padding-bottom:0 !important; }
.m0 { margin:0px !important; }
.m10 { margin-top:10px !important; }
.m20 { margin-top:20px !important; }

.textarea { width:100%; height:200px; border:1px solid #e9e9e9; padding:10px; }
.input { width:100%; height:30px; border-left:0;border-top:0; border-right:0; border-bottom:1px solid #e9e9e9; padding:0 10px; }
.input1 { width:100%; height:30px; border-left:0;border-top:0; border-right:0; border-bottom:1px solid #e9e9e9; padding:0 10px 7px; color:#8e8e8e}

/* BTN */
.btn_write { float:right; width:100px; height:30px; line-height:30px; background:#f35400; text-align:center; font-size:1.1rem; color:#fff; margin-bottom:10px; }
.btn_finished { width:100%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#fff; background:#9c9c9c; }
.btn_finished2 { width:100%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#fff; background:#f35400; }
.btn_finished1 { width:40%; height:45px; line-height:45px; text-align:center; font-size:1.2rem; color:#fff; background:#9c9c9c; display:inline-block}

/* PAGING */
.sub .paging{ overflow:hidden;height:35px;margin-top:30px;text-align:center; }
.sub .paging > *{ display:inline-block;vertical-align:middle; }
.sub .paging a { width:35px; height:35px; font-size:1.1rem; padding:11px 5px 0; text-align:center; vertical-align:middle; border:1px solid #e0e0e0; background:#fff; box-sizing:border-box; }
.sub .paging strong{ position:relative; width:35px; height:35px;font-size:1.2rem;padding:11px 5px 0;text-align:center;vertical-align:middle; color:#fff; background:#000c;box-sizing:border-box;}
.sub .paging .page_prev{ width:35px; height:35px; line-height:35px; background: url('../../Images/btn_arrow_left.png') no-repeat center center; background-size:9px auto; }
.sub .paging .page_next{ width:35px; height:35px; line-height:35px; background: url('../../Images/btn_arrow_right.png') no-repeat center center; background-size:9px auto; }


/*1012-추가*/
.galleryNext_prev{
	display: inline-block; 
	width: 100%;
}
.galleryNext_prev > li{
	display:inline-block; 
	width:50%; 
	float: left;
	text-align: left;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -80%);
}
.galleryNext_prev > li:nth-child(2){
	text-align: right;
	left: unset;
	right: 0;
}
.galleryNext_prev > li > a{
	font-size: 18px;
}
.galleryNext_prev > li > a > img{
    vertical-align: middle;
}