@font-face {
    font-family: 'Paperlogy-8ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}	

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Light';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSerifKR';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


*{margin: 0; padding: 0; box-sizing: border-box;}
main{overflow: hidden;}
body {background: #fff;}
li{list-style: none;}
a{text-decoration: none; color: #333;}
section{position: relative;}
figure{position: relative; z-index: 1;}
a,button,input{box-shadow: none; border: 0; background-color: transparent;}



h1 {position: relative;text-align: center;color: #353535;font-size: 36px;font-family: 'Paperlogy-8ExtraBold';margin-top: 3%;}
p {text-align: center;font-size: 18px;color: #676767;font-family: 'Paperlogy-8ExtraBold';margin: 28px;font-weight: 100;}
button { margin: 20px; outline: none;}
.frame {max-width: 50%;margin: 40px auto;text-align: center;}
.custom-btn {width: 20%;height: 60px;padding: 10px 25px;border: 2px solid #000;font-family: 'Paperlogy-8ExtraBold';font-weight: 100;background: transparent;cursor: pointer;transition: all 0.3s ease;position: relative;display: inline-block;color: #000;}

.btn { transition: all 0.3s ease;  overflow: hidden;}
.btn:after { position: absolute; content: " "; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; transition: all 0.3s ease; -webkit-transform: scale(.1); transform: scale(.1);}
.btn:hover { color: #fff;}
.btn:hover:after {  background: #000;  -webkit-transform: scale(1);transform: scale(1);}



/* width */
::-webkit-scrollbar {width: 2.5px;}
/* Track */
::-webkit-scrollbar-track {	background: #f1f1f1; }			 
/* Handle */
::-webkit-scrollbar-thumb {background: #888; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #555; }
	
.allBox {display: none; }
.show { display: block;}
#tap_btn_list {margin: 35px auto 25px;text-align: center;} 
.tap_btn {width: 11%;outline: none;padding: 12px 0;cursor: pointer;color: #a9a9a9;font-family: 'Pretendard-Regular';letter-spacing: 1px;margin: 0px 1%;font-size: 12.5px;border-bottom: 1px solid;transition:0.5s;border: 1px solid #a9a9a9;border-radius: 30px;}
.tap_btn:hover { border: 1px solid #333; color: #333; background: rgba(255,255,255,0.5); transition:0.5s;}
.tap_btn.on {background-color: #7685c2;color: white;transition:0.5s;border: 1px solid #7685c2;}

.tap_list{display: flex;flex-wrap: wrap;max-width: 100%;margin: 0% auto 4%;}
.tap_list .max {width: 95%; margin: auto;}

.tap_list .info_txt {width: 100%;text-align: center;background: #f2f2f2;padding: 2% 0;}
.tap_list .info_txt h5 {font-size: 25px;font-family: 'Pretendard-Regular';color: #4d5472;}
.tap_list .info_txt h4 {font-size: 14px;font-family: 'Pretendard-Regular';font-weight: 100;letter-spacing: -0.8px;line-height: 1.8;color: #666;margin: 30px 0;}
.tap_list .info_txt span {font-size: 13px;opacity: 0.5;margin: 5px;font-family: 'Pretendard-Regular';font-weight: 100;border: 1px solid;padding: 4px 20px;border-radius: 100px;}

.tap_list .lodging {width: 31%;margin: 0 1% 45px 1%;float: left;position: relative;/* border: 1px solid #d0d0d0; */padding: 20px;border-radius: 10px;background: #fff;transition: 0.5s;}
.tap_list .lodging .hien_img { overflow: hidden; overflow: hidden;}
.tap_list .lodging .hien_img .img{width: 100%;height: 240px;position: relative;overflow: hidden;background-size: cover;background-position: center;transition: 0.8s;border: 1px solid #d3d3d3;opacity: 0.75;}
.tap_list .lodging:hover .hien_img .img{transform:scale(1.1); transition:  1.5s;}
.tap_list .lodging:hover{box-shadow:0 10px 30px rgba(0,0,0,0.1); transition: 0.5s;}
.tap_list .lodging .box {text-align: center;}
.tap_list .lodging h4 {font-size: 22px;text-align: center;margin: 20px auto 19px;font-family: 'Pretendard-Regular';font-weight: 400;color: #454545;letter-spacing: -0.5px;}
.tap_list .lodging span {color: #fff;font-weight: 200;opacity: 0.5;font-family: 'Pretendard-Regular';font-size: 14px;background: #374374;border-radius: 15px;padding: 7px 34px;text-align: center;}
.tap_list .lodging .btn {margin: auto;left: 0;right: 0;text-align: center;}
.tap_list .lodging .p_tag {display: block;width: 158px;text-align: center;border-bottom: 1px solid #181818;color: #181818;font-size: 14px;padding: 10px 10px;transition: 0.5s;font-family: 'Pretendard-Light';margin: auto;font-weight: 300;}
.tap_list .lodging .p_tag:hover { border-bottom: 1px solid #181818; color: #ffffff; margin-bottom: 0; background: #181818; transition: 0.5s;}
.tap_list .lodging .p_tag .plus { transform: rotate(0deg); transition: 0.8s;}
.tap_list .lodging .p_tag:hover .plus { transform: rotate(145deg); color: #fff; transition: 0.5s;}
.tap_list .lodging:hover .img { opacity: 1; transition: 0.8s;}
/*.tap_list .lodging:hover {box-shadow: 4px 5px 20px 0px #aaa; transition: 0.5s;}*/

	
@media screen and (max-width: 1450px) {	
	.frame{max-width: 80%;}
}
	
@media screen and (max-width: 1025px) {	
	.frame{max-width: 95%;}
	
	h1 {font-size: 30px;margin-top: 13%;letter-spacing: -0.5px;}
	p{font-size: 14px;}
	.custom-btn{width: 100%;margin: 0;margin-bottom: 10px;}
	
	.tap_btn{width: 30%;}
	.tap_list .lodging{width: 100%;}
	
	.tap_list .info_txt span{font-size: 10px; padding: 4px 15px;}
}