/* 초기화 */
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");
/* 공통 */
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 200;
 src:url(../fonts/NotoSansKR-Thin.eot);
 src:url(../fonts/NotoSansKR-Thin.eot) format('embedded-opentype'),
     url(../fonts/NotoSansKR-Thin.woff) format('woff'),
     url(../fonts/NotoSansKR-Thin.otf) format('.otf');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
 src:url(../fonts/NotoSansKR-Light.eot);
 src:url(../fonts/NotoSansKR-Light.eot) format('embedded-opentype'),
     url(../fonts/NotoSansKR-Light.woff) format('woff'),
     url(../fonts/NotoSansKR-Light.otf) format('.otf');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
src:url(../fonts/NotoSansKR-Regular.eot);
src:url(../fonts/NotoSansKR-Regular.eot) format('embedded-opentype'),
    url(../fonts/NotoSansKR-Regular.woff) format('woff'),
    url(../fonts/NotoSansKR-Regular.otf) format('.otf');
 
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
 src:url(/fonts/NotoSansKR-Bold.eot);
 src:url(../fonts/NotoSansKR-Bold.eot) format('embedded-opentype'),
     url(../fonts/NotoSansKR-Bold.woff) format('woff'),
     url(../fonts/NotoSansKR-Bold.otf) format('.otf');
}
#ifrm {
    width: 100%;
   min-height: 300px;
    overflow: hidden;
    border: 0;
}


/* pc */
@media screen and (min-width:1300px){
   #memofile { max-width:1250px; }
}
/* tablet */
@media screen and (min-width:768px) and (max-width:1024px){
   #memofile { width:99%; }
}
/* mobile */
@media screen and (min-width:0) and (max-width:767px){
   #memofile { width:99%; }
}



body,div,p,h1,h2,h3,h4,h5,h6,ol,li,dl,dt,dd,ul,pre,form,fieldset,legend,button,table,th,td {
border:0;
margin:0;
padding:0;
}

ul,ol,li,dl {
list-style:none;
}

img {
border:0;
vertical-align:middle;
font-size:0;
}

address,caption,cite,code,dfn,em,var {
font-style:normal;
}

a {
text-decoration:none;
color:#333;
}

a:hover,a:active,a:focus {
text-decoration:none;
}

table {
border:0;
border-spacing:0;
border-collapse:collapse;
padding:0;
}

strong {
font-weight:500;
}

h1,h2,h3,h4,h5,h6 {
font-weight:400;
}

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

body,th,td,input,select,textarea,button {
color:#333;
font-size:16px;
line-height:2.5;
letter-spacing:-0.05em;
font-family:  'Noto Sans KR', 'Malgun Gothic', Dotum, Arial, Helvetica, sans-serif;
font-weight:200;
}

:focus {
outline:none;
}

.blind,.gnb-open-btn,.gnb-close-btn,.mobile-gnb {
display:none;
}

.gnb:after,.sub-content:after {
clear:both;
display:block;
height:0;
content:"";
visibility:hidden;
}

.Q-top{
position:fixed;
bottom:20px;
right:20px;
z-index:999;
width:70px;
height:70px;
border-radius:9999px;
box-shadow: 0px 0px 5px rgba(255,255,255,0.2);
}

.Q-top img{
width:100%;
}

.quick-menu{
position:fixed;
width:220px;
height:100vh;
border-left:3px solid #bb0438;
top:0;
z-index:9999;
background:#fff;
box-sizing:border-box;
padding:10px 0;
right:-220px;
transition: all .5s;
}

.qm-btn{
width:40px;
height:120px;
line-height:120px;
background:#bb0438;
position:absolute;
box-sizing:border-box;
z-index:9999;
transition: all .5s;
right:220px;
top:50vh;
}

.qm-btn img{
width:100%;
}

.qm-btn.qm-open{
}

.qm-btn.qm-close{
display:none;

}

.qm-tel{
background:#fff;
width:96%;
margin:0 auto;
border:1px #f3dbdd solid;
border-radius:5px;
box-sizing:border-box;
margin-bottom:10px;
}

.qm-tel img{
width:100%;
margin-bottom:10px;
}

.qm-tel{
padding:10px 0px 10px 20px;	
}
.qm-tel p{
color:#5d2036;
font-size:1.125em;
}

.qm-tel span{
display:inline-block;
font-weight:600;
width:50px;
}

.qm-list{
padding:10px 20px;
background:#6d439c;
}
.qm-list li{
border-top:1px rgba(255,255,255,0.1) dashed;
}

.qm-list li:first-child{
border-top-width:0;
}

.qm-list li a{
display:block;
font-weight:500;
padding:2px 0;
color:#fff;
}

.qm-sns{
padding:10px 20px;
}
.qm-sns img{
width:35px;
margin-right:5px;
}

.qm-sns a{
display:block;
padding:6px 0;
border-top:1px #f3e9ea solid;
font-weight:600;
background:url(/img/arrow.png);
background-repeat:no-repeat;
background-position:100% 50%;
background-size:20px;
}

.qm-sns li:first-child a{
border-top-width:0;
}

/*footer*/
footer{
width:100%;
background:#2c2b2b;
box-sizing:border-box;
padding:55px 5% 45px;
text-align:center;
box-sizing:border-box;
}


.foot-info{
padding:0 150px;
box-sizing:border-box;
}


.foot-info p{
margin-bottom:15px;
color:#fff;
display:inline-block;
margin:3px 20px;
letter-spacing:0em;
opacity:0.5;
}

.foot-info p strong{
font-weight:600;
}


.foot-copy{
margin-top:30px;
padding-top:20px;
border-top:1px rgba(255,255,255, 0.1) solid;
color:#fff;
letter-spacing:0;
opacity:0.6;
font-weight:300;
}

.foot-link{
margin-bottom:20px;
}

.foot-link a{
display:inline-block;
color:#fff;
font-size:1.125em;
}
.foot-link a:before{
content:"";
display:inline-block;
width:1px;
height:16px;
margin:0 20px;
background:#fff;
opacity:0.5;
}

.foot-link a:first-child:before{
display:none;
}

.layer-popup{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,.85);
z-index: 99999999999999999999;
overflow: auto;
display:none;
}

.layer-pop-area{
width:70%;
height:70vh;
background:#fff;
position:absolute;
left:50%;
margin-left:-35%;
top:50%;
margin-top:-35vh;
}

.layer-tit{
background:#ffeef4;
color:#270b15;
font-weight:600;
font-size:1.25em;
box-sizing:border-box;
height:55px;
line-height:55px;
position:absolute;
width:100%;
padding:0 15px;
}

.layer-content{
color:#555;
height:100%;
overflow-y:scroll;
box-sizing:border-box;
padding:65px 30px;
box-sizing:border-box;
}

.layer-content table{
width:100%;
}
.layer-content table th{
background:#555;
color:#fff;
font-size:20px;
padding:10px;
text-align:center;
}
.layer-content table td{
padding:5px 10px;
border-bottom:1px solid #ccc;
}

.close-box{
position:absolute;
right:-55px;
top:-2px;
}
.close-box img{
width:55px;
}

/********************* main *********************************/
.img-box {
width:100%;
overflow:hidden;
position:relative;
}

.img-box-img{
position:relative;
left:50%;
margin-left:-1000px;
z-index:1;
}

.mobile-box{
display:none;
}

.ibi-ma50{
margin-top:50px;
}

#banner01 ul{
position:absolute;
z-index:10;
left:50%;
bottom:10%;
width:35%;
text-align:center;
}

#banner01 ul li{
margin-bottom:-7px;
}

#banner04{
background:url(/img/banner04-bg.jpg);
background-size:cover;
background-position:50%;
padding:100px 0;
}

.online-form-box{
width:95%;
max-width:760px;
margin:20px auto 0;
box-sizing:border-box;
background:rgba(255,255,255,0.9);
padding:60px;

}

.online-form-box li{
margin-bottom:20px;
}

.online-form-box input[type="text"]{
border:1px #000 solid;
padding:20px;
border-radius:0;
width:100%;
box-sizing:border-box
}

.online-form-box input[type="text"]::placeholder,
.online-form-box textarea::placeholder{
color:#333;
opacity:1;
}

.online-form-box textarea{
border:1px #000 solid;
padding:20px;
border-radius:0;
width:100%;
height:100px;
box-sizing:border-box
}

.online-form-box .ofb-li50 input{
width:49%;
float:left;
margin:0;
color:#333;
}

.online-form-box .ofb-li50 input:first-child{
margin-right:2%;
}

.online-form-box .ofb-li50:after{
clear:both;
display:block;
height:0;
content:"";
visibility:hidden;
}

.online-form-box .ofb-li50 .btn_large {
	padding:18px 21px;
	font-size:15px;
	line-height:1.222;
	font-weight:600;
}

.online-form-box .ofb-radio{
border:1px #000 solid;
padding:20px;
background:#fff;
box-sizing:border-box;
}
.online-form-box .ofb-radio span{
display:inline-block;
margin-right:20px;
}
.online-form-box .ofb-radio input{
margin-left:15px;
}
.online-form-box .ofb-radio label{
color:#999;
}

.submit-btn{
width:95%;
max-width:760px;
margin:0 auto;
box-sizing:border-box;
display:block;
}

.submit-btn img{
width:100%;
}

#banner06{
background:url(/img/banner06-bg.jpg);
background-size:cover;
background-position:50% 0;
padding:100px 0;
}

.youtube-list{
width:95%;
max-width:1280px;
margin:50px auto 0;
}

.youtube-list li{
float:left;
width:32%;
margin-left:2%;
margin-bottom:20px;
}

.youtube-list li:nth-child(3n+1){
margin-left:0;
}
.youtube-list:after{
clear:both;
display:block;
height:0;
content:"";
visibility:hidden;
}

.youtube-box{
position:relative; 
overflow:hidden; 
width:100%; 
margin:0 auto;
padding-top:56.25%;
}

.youtube-box iframe,
.youtube-box object,
.youtube-box embed{
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%;
}

#banner11{
background:url(/img/banner11-bg.jpg);
background-size:cover;
background-position:50%;
padding:100px 0;
}

.banner11-youtube{
width:95%;
max-width:1280px;
margin:50px auto;
}

#banner12{
background:#222;
padding:100px 0;
}

.btn-img{
display:block;
text-align:center;
margin-top:50px;
}

.btn-img img{
width:80%;
max-width:618px;
}

#main-location{
background:url(/img/banner18-bg.jpg);
background-size:cover;
background-position:50%;
padding:100px 0;
}

.map-box{
width:95%;
max-width:1280px; 
margin:50px auto 0;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.map-box .root_daum_roughmap .wrap_map{
height:500px!important;
}

.info-img{
position:relative;
z-index:2;
margin-top:-30px;
width:100%;
}



#banner15{
background-color:#008852;
padding:100px 0;
}

.webtoon-list{
width:95%;
max-width:1280px;
margin:50px auto 0;
display:flex;
flex-wrap: wrap;
}

.webtoon-list li{
margin-left:10px;
margin-bottom:10px;
box-sizing:border-box;

overflow:hidden;
text-align:Center;
}

.webtoon-list li:nth-child(3n+1){
margin-left:0;
}

.webtoon-list li img{
	border:4px #333 solid;
box-sizing:border-box;
}



/*20230116-갤러리페이지*/
.sub-header{
width:100%;
background:url(/img/gallery-visual01.jpg);
background-size:cover;
background-position:50%;
}
.sub-header-top{
width:1280px;
position:absolute;
left:50%;
margin-left:-640px;
top:20px;
}

.sub-logo{
width:150px;
}
.sub-logout{
position:absolute;
right:0;
display:inline-block;
padding:5px 20px;
background:#e60062;
color:#fff;
border-radius:999px;
}
.sub-header-table{
display:table;
table-layout:fixed;
width:100%;
height:350px;
padding-top:20px;
text-align:Center;
}

.sub-header-table p{
display:table-cell;
width:100%;
vertical-align:middle;
color:#fff;
font-weight:700;
font-size:55px;
}
.snb{
border-bottom:1px #e0e0e0 solid;
width:100%;
text-align:center;
}
.snb a{
display:inline-block;
height:60px;
line-height:60px;
padding:0 60px;
}

.snb a:hover{
font-weight:700;
}

.snb a.current{
font-weight:700;
color:#e81e65;
position:relative;
}
.snb a.current:after{
content:"";
display:block;
width:80px;
height:3px;
background:#e81e65;
position:absolute;
left:50%;
margin-left:-40px;
bottom:-1px;
}

.sub-content{
width:96%;
max-width:1280px;
margin:50px auto;
}
.gallery-list li{float:left; width:23.5%; margin-left:2%; margin-bottom:30px; text-align:center;}
.gallery-list li:nth-child(4n+1){margin-left:0;}
.gallery-list ul:after{clear:both; display:block; height:0; content:""; visibility:hidden;}
.sl-box{border:1px #e0e0e0 solid;}
.sl-box a{width:100%; position:relative; padding-top:75%; overflow:hidden; display:block;}
.sl-box a img{max-width:100%; position:absolute; left:50%; top:50%; transition: all 0.3s;}
.sl-box a:hover img{-webkit-transform: scale(1.2); transform: scale(1.2);}
.gallery-list li p{margin-top:10px; height:1.5em; line-height:1.5em; overflow:hidden;}

/*page*/
.paging{width:95%;
max-width:1200px;
margin:30px auto 0;
text-align:center;
}

.paging a,
.paging strong{
display:inline-block;
height:35px;
line-height:35px;
width:25px;
margin:0 10px;
box-sizing:border-box;
color:#777;
overflow:hidden;
}

.paging .page-prev{
margin-right:10px;
border:1px #e0e0e0 solid;
width:35px;
}

.paging .page-next{
margin-left:10px;
border:1px #e0e0e0 solid;
width:35px;
}

.paging .page-prev img,
.paging .page-next img{
width:90%;
position:relative;
margin-top:-20%;
}


.paging strong{
background:#45525f;color:#fff;
width:35px;
}


.view-top{
border-bottom:1px #e0e0e0 solid;
position:relative;
padding-right:60px;
padding-bottom:10px;
}

.view-top p{
font-weight:1.125em;
font-weight:600;
}
.view-top span{
font-size:0.85em;
position:absolute;
right:0;
top:0;
}

.view-content{
padding:20px 0;
border-bottom:1px #999 solid;
}

.view-content img{
max-width:100%;
}

.view-btn{
margin-top:30px;
}

.view-btn a{
display:inline-block;
background:#333;
padding:5px 20px;
color:#fff;
transition: all 0.3s;
border-radius:2px;
}
.view-btn a em{
font-size:0.2em;
display:inline-block;
vertical-align:2px;
}

.view-btn a:hover{
background:#cf1859
}



.slick-slide {
display:inline-block;
}

#gallery01{
background:#cddff6;
padding:100px 0;
}

#gallery02{
background:#d6bcf1;
padding:100px 0;
}

.gallery-slide{
width:100%;
max-width:1280px;
margin:40px auto 0;
position:relative;
}
.slick-list{
width:100%;
position:relative;
overflow:hidden;
}
.gallery-slide .slick-slide > div{
margin:0 10px;
}
.gallery-slide a{
display:block;
}

.gal-img{
position:relative;
padding-top:75%;
width:100%;
overflow:hidden;
background:#fff;

}

.gal-img img{

max-width:100%;
position:absolute;
left:0%;
top:0%;
}

.blur .gal-img img{
filter: blur(20px);
-webkit-filter: blur(20px);
}

.gal-txt{
margin-top:10px;
font-size:1.25em;
line-height:1.5em;
height:1.5em;
overflow:hidden;
}

.gallery-slide .slick-arrow{
position:absolute;
left:10px;
top:-100px;
background:url(/img/ga-arrow-prev.png);
width:60px;
height:60px;
background-size:cover;
cursor:pointer;
z-index:999;
}

.gallery-slide .slick-arrow.slick-next{
background-image:url(/img/ga-arrow-next.png);
left:auto;
right:10px;
}

.more-btn{
text-align:center;
margin-top:20px;
}

.more-btn img{
width:100%;
max-width:200px;
}

/*로그인*/
.login-box{
padding:50px 0;
}
.login-tit{
font-weight:900;
font-size:45px;
color:#e12d5c;
text-align:center;
}
.login-p1{
text-align:center;
font-weight:500;
color:#8a1333;
font-size:1.125em;
display:block;
}
.login-input{
width:90%;
max-width:400px;
margin:20px auto;
}
.login-input input{
display:block;
padding:10px;
box-sizing:border-box;
border:1px #e0e0e0 solid;
border-radius:5px;
width:100%;
margin-bottom:10px;
}

.login-btn input{
width:90%;
max-width:400px;
margin:0 auto;
display:block;
background:#c91455;
border-radius:5px;
padding:15px;
box-sizing:border-box;
color:#fff;
border:0;
}

.join-btn{
text-align:center;
margin-top:30px;
border-top:1px #e0e0e0 dashed;
padding-top:30px;
}

.join-btn a{
display:inline-block;
background:#eee;
padding:5px 20px;
}

.layer-box-login .layer-pop-area{
width:440px;
margin-left:-220px;
height:600px;
margin-top:-300px;
}
.layer-box-login .layer-pop-area .layer-content{
overflow-y:hidden;
}

.layer-box-join .submit-btn{
width:70%;
}
.layer-box-join .online-form-box{
padding:0;
max-width:auto;
}
.layer-box-join .online-form-box input[type="text"]{
padding:10px 20px;
}
.chkList li{
margin-bottom:20px;
}

.chk-box{
height:100px;
overflow-y:scroll;
padding:10px;
box-sizing:border-box;
border:1px #e0e0e0 solid;
margin-top:10px;
}
.chk-box table td{
border-width:0;
font-size:0.85em;
opacity:0.8;
}

@media (max-width:1330px) {
	.webtoon-list li{
	margin-left:5px;
	}
}

@media (max-width:1319px) {
	.webtoon-list li{
	width:48%;
	margin:1%;
	}
	.webtoon-list li:nth-child(3n+1){
	margin:1%;
	}

	.webtoon-list li img{
	width:100%;
	}
}


@media (max-width:1280px) {
	.img-box-img{
	left:-27%;
	margin-left:0;
	width:154%;
	}

	.img-box-img img{
	width:
	}

	#banner01 ul{
	width:50%;
	}

	#banner01 ul li img{
	width:80%;
	}
	
	.sub-header-top{
	width:100%;
	left:0%;
	top:10px;
	margin-left:0;
	}

	.sub-logout{
	right:auto;
	left:0;
	top:-5px;
	}
	
	.sub-logo{
	display:none;
	}
		

}

@media (max-width:1024px) {
	body, th, td, input, select, textarea, button{
	font-size:13px;
	}
	.qm-btn{
	height:40px;
	line-height:40px;
	top:0;
	}
	#banner04,
	#banner06,
	#banner11,
	#banner12,
	#banner15,
	#main-location,
	#gallery01,
	#gallery02{
	padding:30px 0;
	}

	.map-box{
	margin:20px auto;
	}
	.map-box .root_daum_roughmap .wrap_map{
	height:350px!important;
	}

	footer{
	font-size:13px;
	}
	.foot-info{
	padding:0;
	}

	.online-form-box{
	padding:10px;
	font-size:13px;
	}
	.online-form-box input[type="text"]{
	padding:10px;
	}
	.online-form-box li{
	margin-bottom:5px;
	}

	.youtube-list li{
	width:100%;
	margin-left:0;
	margin-bottom:5px;
	}

	.youtube-list{
	margin-top:15px;
	}

	.banner11-youtube{
	margin:10px 0;
	}

	.ibi-ma50{
	margin-top:10px;
	}

	.btn-img{
	margin-top:10px;
	}

	footer{
	padding:20px 2%;
	}

	.foot-link a:before{
	height:12px;
	margin:0 5px;
	}

	.foot-info p{
	margin:0 10px;
	}

	.Q-top{
	width:45px;
	height:45px;
	}
	.close-box{
	right:5px;
	top:0px;
	}

	.close-box img{
	width:40px;
	}

	.layer-pop-area{
	width:90%;
	margin-left:-45%;
	}
	.layer-content{
	padding:65px 15px;
	}

	.webtoon-list{
	margin-top:10px;
	}

	.webtoon-list li{
	width:100%;
	margin:0;
	margin-bottom:10px;
	text-align:center;
	}
	.webtoon-list li:nth-child(3n+1){
	margin:0%;
	margin-bottom:10px;
	}

	
	.webtoon-list li img{
	border-width:3px;
	width:100%;
	max-width:100% !important;
	}

	.pc-box{
	display:none;
	}
	
	.mobile-box{
	display:block;
	}

	.mobile-box .img-box-img{
	width:100%;
	margin-left:0;
	left:0;
	}

	#banner01 .mobile-box{
	background:url(/img/mobile-banner01-bg.jpg); 
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:100%;
	padding-bottom:50%;
	}

	#banner01 ul{
	position:static;
	width:100%;
	}

	#banner02 .mobile-box{
	background:url(/img/mobile-banner02-bg.jpg); 
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:cover;
	padding:50px 5%;
	position:relative;
	box-sizing:border-box;
	}
	.img-map{
	position:absolute;
	left:-5%;
	top:5%;
	width:35%;
	}

	.gallery-slide{
	margin-top:10px;
	}

	.gallery-slide .slick-arrow{
	width:30px;
	height:30px;
	top:-45px;
	left:5px;
	}
	.gallery-slide .slick-arrow.slick-next{
	right:5px;
	}

	.gallery-slide .slick-slide > div{
	margin:0 5px;
	}

	.more-btn img{
	max-width:120px;
	}

	.sub-header-table{
	height:120px;
	}

	.sub-header-table p{
	font-size:35px;
	}

	.snb a{
	padding:0 30px;
	height:40px;
	line-height:40px;
	}

	.gallery-list li{
	width:49%;
	margin-bottom:10px;
	}

	.gallery-list li:nth-child(2n+1){
	margin-left:0;
	}

	.paging{
	margin-top:20px;
	}
	.paging a,
	.paging strong{
	width:15px;
	height:25px;
	line-height:25px;
	}
	.paging .page-prev,
	.paging .page-next,
	.paging strong{
	width:25px;
	}
	
	.layer-box-login .layer-pop-area{
	width:90%;
	margin-left:-45%;
	}

	.layer-box-join .submit-btn{
	width:100%;
	}
	
}