body{ padding : 0; overflow : hidden; }

.PAGE{
	position : relative;
	width : 100%;
	height : 100%;
	padding : calc( 7vh + 70px ) 0 7vh 0;
	box-sizing : border-box;
	overflow : hidden
}
.PAGE[data-page="1"]{ padding : 0 }
.PAGE[data-page="2"]{ background-image:url("/images/main-page2-bg.jpg"); background-attachment: fixed }
.PAGE[data-page="3"]{	padding : 70px 0 0 0; background-image:url("/images/main-page3-bg.jpg"); background-attachment: fixed }
.PAGE[data-page="4"]{ padding : 70px 0 0 0 }

.PAGE > .NEXT-PAGE{
	position : absolute;
	bottom : 24px;
	left : 50%;
	width : 60px;
	height : 32px;
	margin-left : -35px;
	border : 0;
	outline : 0;
	background-color : transparent;
	background-image : url("/images/main-page-next.png");
	background-repeat : no-repeat;
	background-size : cover;
	background-position : center;
	font-size : 0;
	z-index : 990;
	cursor : pointer;
	opacity : .5;
	transition :
		bottom .25s ease-in-out,
		opacity .25s ease-in-out
}
.PAGE > .NEXT-PAGE:hover{
	bottom : 16px;
	opacity : 1
}

.PAGE > .WRAPPER{
	width : auto;
	height : 100%;
	padding : 32px 0;
	margin : 0;
	background-color : rgba(255,253,251,.9);
	box-shadow : 0 4px 6px rgba(0,0,0,.5);
	box-sizing : border-box
}


.PAGE-TITLE{
	height : 120px;
	padding : 0;
	margin : 0;
	text-align : center
}
.PAGE-TITLE > span{
	display : block
}
.PAGE-TITLE > .KR{
	height : 60px;
	font : normal 32px/90px NanumBarunGothic;
	letter-spacing : 8px;
	color : #333
}
.PAGE-TITLE > .EN{
	height : 60px;
	font : normal 16px/30px NanumBarunGothic;
	color : #666
}
.PAGE-TITLE:after{
	content : '';
	display : block;
	width : 80px;
	height : 3px;
	margin : 0 auto;
	background-color : #07C
}

.PAGE[data-page="3"] > .WRAPPER{ padding : 0 }
.PAGE[data-page="3"] > .WRAPPER > .PAGE-TITLE{
	position : relative;
	z-index : 900;
	background : linear-gradient( to bottom, rgba(0,0,0,.75), rgba(0,0,0,0) )
}
.PAGE[data-page="3"] > .WRAPPER > .PAGE-TITLE > span{
	color : #FFF;
}
.PAGE[data-page="3"] > .WRAPPER > .PAGE-TITLE:after{ display : none }

.PAGE[data-page="3.5"]{ padding : 70px 0 0 0 }
.PAGE[data-page="3.5"] > .WRAPPER{ padding : 0 }

.PAGE2-CONTENT{
	margin-top : 36px;
	font-size : 0;
	text-align : center
}
.PAGE2-CONTENT > div{
	position : relative;
	display : inline-block;
	width : 290px;
	height : 310px;
	margin : 32px 24px;
	border : solid 1px #CCC;
	border-radius : 32px 0;
	vertical-align : top;
	background-position : center;
	background-repeat : no-repeat;
	background-size : auto 100%;
	transition : background-size .25s ease-in-out
}
.PAGE2-CONTENT > div > a{
	position : absolute;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	border-radius : 32px 0;
	background-color : rgba(33,33,33,.5);
	transition : background-color .25s ease-in-out
}

.PAGE2-CONTENT > div > a > h2{
	color : #FFF;
	font : 700 20px/28px NanumBarunGothic;
	transition : margin-top .25s ease-in-out
}
.PAGE2-CONTENT > div > a > h2:before{
	content : '';
	display : block;
	width : 60px;
	height : 60px;
	margin : 80px auto 30px auto;
	background-repeat : no-repeat;
	backgorund-position : center;
	background-size : 60px;
	overflow : hidden;
	transition :
		height .3s ease-in-out,
		margin .3s ease-in-out,
		opacity .3s ease-in-out
	
}
.PAGE2-CONTENT > div:nth-child(1) > a > h2:before{ background-image : url("/images/main-page2-icon1.png") }
.PAGE2-CONTENT > div:nth-child(2) > a > h2:before{ background-image : url("/images/main-page2-icon4.png") }
.PAGE2-CONTENT > div:nth-child(3) > a > h2:before{ background-image : url("/images/main-page2-icon3.png") }
.PAGE2-CONTENT > div:nth-child(4) > a > h2:before{ background-image : url("/images/main-page2-icon2.png") }

.PAGE2-CONTENT > div > a > p{
	margin-top : 60px;
	color : #FFF;
	font : 500 13px/20px 'Noto Sans KR', sans-serif;
	opacity : 0;
	transition : opacity .5s ease-in-out, margin-top .25s ease-in-out
}
.PAGE2-CONTENT > div:hover{
	/*background-size : 140%*/
}
.PAGE2-CONTENT > div:hover > a{
	background-color : rgba(33,44,55,.75)
}
.PAGE2-CONTENT > div:hover > a > h2{
	margin-top : 80px
}
.PAGE2-CONTENT > div:hover > a > h2:before{
	height : 0;
	margin-bottom : 0;
	opacity : 0
}
.PAGE2-CONTENT > div:hover > a > p{
	margin-top : 0;
	opacity : 1
}


.PAGE3-GOODS{
	position : absolute;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	overflow : hidden;
	z-index : 800
}
.PAGE3-GOODS > ul{
	width : auto;
	height : 100%;
	padding : 0;
	margin : 0;
	white-space : nowrap;
	font-size : 0
}
.PAGE3-GOODS > ul > li{
	display : inline-block;
	width : 100%;
	height : 100%;
	list-style : none;
	vertical-align : middle
}
.PAGE3-GOODS > ul > li > a{
	display : block;
	width : 100%;
	height : 100%;
	background-repeat : no-repeat;
	background-size : cover;
	background-position : center
}
.PAGE3-GOODS > ul > li > a > p{
	padding : 0;
	margin : 0;
	font-size : 21px;
	font-family : MalgunGothic;
	color : #FFF
}
.PAGE3-BULLET{
	position : absolute;
	bottom : 0;
	left : 0;
	width : 100%;
	height : 30px;
	padding-bottom : 70px;
	font-size : 0;
	z-index : 900;
	line-height : 30px;
	text-align : center;
	background : linear-gradient( to top, rgba(0,0,0,.75), rgba(0,0,0,0) )
}
.PAGE3-BULLET > i{
	display : inline-block;
	max-width : 12px;
	height : 26px;
	margin-right : 12px;
	font : normal 14px/26px MalgunGothic;
	color : #000;
	overflow : hidden;
	transition : max-width .25s ease-in-out, color .25s ease-in-out;
	cursor : pointer;
	vertical-align : middle
}
.PAGE3-BULLET > i:before{
	content : '';
	display : inline-block;
	width : 12px;
	height : 12px;
	margin : -2px 4px 0 0;
	background-color : #000;
	border-radius : 6px;
	vertical-align : middle;
	transition : background-color .25s ease-in-out
}
.PAGE3-BULLET > i:after{
	content : '';
	width : 0;
	height : 1px;
	margin : 0 0 0 4px;
	display : inline-block;
	background-color : #000;
	vertical-align:middle;
	transition : width .25s ease-in-out
}
.PAGE3-BULLET > i.ON{
	max-width : 500px;
	color : #000
}
.PAGE3-BULLET > i.ON:before{
	background-color : #000
}
.PAGE3-BULLET > i.ON:after{
	width : 100px
}

.PAGE3-BUTTON{
	position : absolute;
	top : 50%;
	width : 64px;
	height : 120px;
	margin-top : -60px;
	background-color : #FFF;
	background-repeat : no-repeat;
	border : 0;
	font-size : 0;
	opacity : .5;
	cursor : pointer;
	z-index : 900
}
.PAGE3-BUTTON:hover{
	opacity : 1
}
.PAGE3-BUTTON.PREV{
	left : 70px;
	background-image : url("/images/main-page3-buttons-prev.png")
}
.PAGE3-BUTTON.NEXT{
	right : 70px;
	background-image : url("/images/main-page3-buttons-next.png")
}

.PAGE3-ADMIN-BUTTONS > button{
	width : 160px;
	height : 32px;
	background-color : #000;
	border : 0;
	border-radius : 5px;
	color : #FFF;
	vertical-align : bottom;
}
.PAGE3-ADMIN-BUTTONS > input{
	width : 300px;
	height : 32px;
	padding : 0 8px;
	border : solid 1px #000;
	box-sizing : border-box;
}

.PAGE3-ADMIN-BUTTONS{
	position : absolute;
	right : 100px;
	bottom : 100px;
	z-index : 900;
}

.PAGE35-YOUTUBE > div{
	display : inline-block;
}

.PAGE35-INSTAGRAM{
	text-align : center
}


.PAGE4-CONTENT{
	width : auto;
	margin-top : 36px;
	font-size : 0;
	text-align : center
}
.PAGE4-CONTENT > div{
	display : inline-block;
	width : 412px;
	height : 332px;
	margin : 0 8px;
	background-color : #FFF;
	border : solid 1px #DDD;
	vertical-align : top;
	box-sizing : border-box
}
.PAGE4-CONTENT > div.PAGE4-CONTENT1{
	text-align : center
}
.PAGE4-CONTENT > div.PAGE4-CONTENT1 > img{
	width : 100%;
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2{
	padding : 12px;
	
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 > h3{
	text-align : center;
	font : 500 19px/normal NanumBarunGothic
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 > p{
	text-align : center;
	font : 500 15px/normal NanumBarunGothic;
	color : #333;
	vertical-align:middle;
	margin-top: 55px;

	
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 > button{
	padding : 10px 14px;
	margin-top: 55px;
	background-color : #FFF;
	border : solid 1px #CCC;
	font : 500 14px/normal NanumBarunGothic;
	color : #333;
	cursor : pointer
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 > hr{
	margin : 32px 0;
	border : dotted #CCC;
	border-width : 1px 0 0 0;
}

.PAGE4-CONTENT > div.PAGE4-CONTENT2 > .DOWNLOAD_PDF{
	display : block;
	text-align : left;
	padding : 6px;
	margin : 0 14px;
	overflow : hidden
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 > .DOWNLOAD_PDF:hover{
	background-color : #E9E9E9;
	cursor : pointer
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 >  .DOWNLOAD_PDF > img{
	float : left;
	height : 80px
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 >  .DOWNLOAD_PDF > span.DOWNLOAD_TITLE{
	display : block;
	margin : 10px 0 0 70px;
	font : 500 13px/normal NanumBarunGothic;
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 >  .DOWNLOAD_PDF > span.DOWNLOAD_LASTEST{
	display : block;
	margin : 10px 0 0 70px;
	font : normal 11px/normal Dotum;
	color : #666
}
.PAGE4-CONTENT > div.PAGE4-CONTENT2 >  .DOWNLOAD_PDF > span.DOWNLOAD_FILESIZE{
	display : block;
	margin : 4px 0 0 70px;
	font : normal 11px/normal Dotum;
	color : #666
}

.PAGE4-CONTENT > div.PAGE4-CONTENT3{
	padding : 32px;
	text-align : left
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > h3.NOTICE{
	padding : 0 4px;
	margin : 0;
	font : 500 15px/normal NanumBarunGothic;
	overflow : hidden
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > h3.NOTICE > a{
	float : right
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE{
	padding : 8px 0;
	margin : 6px 0;
	border-top : solid 1px #CCC
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE > li{
	padding : 4px 0;
	list-style : none
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE > li > a{
	display : block;
	height : 15px;
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE > li > a > span{
	display : inline-block;
	font : normal 11px/15px Dotum;
	vertical-align : middle
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE > li > a > span:first-child{
	width : 280px;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE > li > a > span:last-child{
	width : 66px;
	text-align : right;
	color : #666
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > h3.GALLERY{
	padding : 0 4px;
	margin : 16px 0 0 0;
	font : 500 15px/normal NanumBarunGothic;
	overflow : hidden
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > h3.GALLERY > a{
	float : right
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.GALLERY{
	padding : 8px 0;
	margin : 6px 0;
	border-top : solid 1px #CCC;
	font-size : 0;
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.GALLERY > li{
	display : inline-block;
	width : 110px;
	height : 90px;
	padding : 0;
	margin : 0 8px 0 0;
	list-style : none
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.GALLERY > li:last-child{
	margin : 0;
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.GALLERY > li > a{
	display : block;
	height : 90px;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.GALLERY > li > a > span{
	display : flex;
	align-items : center;
	width : 90px;
	height : 70px;
	padding : 10px;
	background-color : rgba(0,0,0,.75);
	font : normal 11px/normal MalgunGothic;
	color : #FFF;
	opacity : 0;
	transition : opacity .3s ease-in-out;
}
.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.GALLERY > li > a:hover > span{
	opacity : 1;
}

.PAGE4-CONTENT > div.FISHING-INFO{
	width : auto;
	border : 0;
	margin-top : 16px;
	text-align : center;
	font-size : 0;
}
.PAGE4-CONTENT > div.FISHING-INFO > a{
	display : inline-block;
	width : 340px;
	height : 163px;
	margin : 0 8px;
	background-color : #FFF;
	border : solid 1px #DDD
}
.PAGE4-CONTENT > div.FISHING-INFO > a > img{
	width : 100%;
	height : 100%
}


@media ( max-width : 571px ){
	
	.PAGE > .WRAPPER{
		overflow:hidden
	}
	
	.PAGE-TITLE{
		height : auto;
	}
	.PAGE-TITLE > .KR{
		height : auto;
		font : normal 24px/normal MalgunGothic;
		letter-spacing : 4px;
	}
	.PAGE-TITLE > .EN{
		height : auto;
		padding : 6px 0;
		font : normal 15px/normal MalgunGothic;
		color : #666
	}
	.PAGE-TITLE:after{
		width : 60px;
		margin : 12px auto;
	}
	
	.PAGE2-CONTENT{
		margin-top : 36px;
		overflow : hidden
	}
	.PAGE2-CONTENT > div{
		width : 40%;
		height : 280px;
		margin : 16px 1%;
		border : 0;
		border-radius : 0
	}
	.PAGE2-CONTENT > div > a{
		border-radius : 0;
	}
	
	.PAGE2-CONTENT > div > a > h2{
		margin-top : 80px;
		font : normal 1.2rem/1.2rem MalgunGothic;
		line-height:1.2;
		
	}
	
	.PAGE2-CONTENT > div > a > h2:before{
		content : '';
		display : block;
		width : 60px;
		height : 60px;
		margin : 80px auto 30px auto;
		background-repeat : no-repeat;
		backgorund-position : center;
		background-size : 60px;
		overflow : hidden;
		transition :
			height .3s ease-in-out,
			margin .3s ease-in-out,
			opacity .3s ease-in-out
	
	}
	
	.PAGE2-CONTENT > div > a > p{
		padding:0 0.1rem;
		font : normal 0.8rem/1rem MalgunGothic;
		line-height:1.1rem
	}
	
	.PAGE3-BULLET{
		position : absolute;
		bottom : 0;
		left : 0;
		width : 100%;
		height : 30px;
		padding-bottom : 20px;

	}
	.PAGE3-BULLET > i{
		display : inline-block;
		max-width : 12px;
		height : 20px;
		margin-right : 12px;
		font : normal 12px/20px MalgunGothic;

	}


	.PAGE3-BULLET > i.ON{
		max-width : 250px;
		color : #000
	}

	.PAGE3-BUTTON.PREV{
		left : 10px;
		background-position:center; 
		background-size:cover;
	}
	.PAGE3-BUTTON.NEXT{
		right : 10px;
		background-position:center; 
		background-size:cover;
	}
	
	.PAGE3-BUTTON{
		top : 50%;
		width : 30px;
		height : 60px;
		margin-top : -30px;
	}
	
	.PAGE4-CONTENT {text-align:center;}
	.PAGE4-CONTENT > div{
		display:block;
		width : 90%;
		height :auto;
		margin : 0 auto 8px;
		background-color : #FFF;
		border : solid 1px #DDD;
		vertical-align : top;
		box-sizing : border-box
	}
	
	.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE > li > a > span:first-child{
		width :80%;
		overflow : hidden;
		text-overflow : ellipsis;
		white-space : nowrap
	}
	.PAGE4-CONTENT > div.PAGE4-CONTENT3 > ul.NOTICE > li > a > span:last-child{
		width :15%;
		text-align : right;
		color : #666
	}
	
	.PAGE4-CONTENT > div.FISHING-INFO{
		width : 95%;
		margin:8px auto;;
	}
	.PAGE4-CONTENT > div.FISHING-INFO > a{
		display : inline-block;
		width : 85%;;
		height : 163px;
		margin : 5px auto;
		background-color : #FFF;
		border : solid 1px #DDD
	}

}




.SLIDES{
	position : relative;
	height : 100%;
	overflow : hidden
}
.SLIDES > div{
	position : absolute;
	top : 50%;
	left : 50%;
	width : 1920px;
	height : 1024px;
	margin : -512px 0 0 -960px;
	transition :
		margin 3s linear,
		width 3s linear,
		height 3s linear,
		opacity 3s linear,
		filter 3s linear
}
.SLIDES > div > img{
	width : 100%;
	height : 100%
}
.SLIDES > div.ON{
	
	width : 2142px;
	height : 1142px;
	margin : -571px 0 0 -1071px;
	opacity : 0;
	filter : blur(10px);
	
}

.POPUP{
	position : absolute;
	background-color : #FFF;
	border : solid 1px #DDD;
	font-size : 0;
	box-shadow : 2px 2px 3px rgba(0,0,0,.15);
}
.POPUP.H-CENTER{
	left : 50%;
	transform : translateX(-50%);
}
.POPUP > .FOOTER{
	height : 30px;
	padding : 0 12px;
	text-align : right;
	line-height : 30px;
}
.POPUP > .FOOTER > a{
	margin-left : 16px;
	font-size : 12px;
	color : #666;
	cursor : pointer;
}