@charset "utf-8";

/*main*/
.main{position:relative; /*min-height:870px;*/ background:#222;}
.main > .tit{background:rgba(0,0,0,.3); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:max-content; padding:60px 30px; text-align:center;}
.main > .tit > h4{margin-bottom:24px; color:#fff; font-size:28px; font-family: 'Paperlogy-4Regular';}
.main > .tit > h2{color:#fff; font-size:52px; font-family: 'jejuhallasan',  'TTTtangsbudaejjigaeB';}
.main > .tit > span{position:absolute; width:50px; height:50px; }
.main > .tit > span.top{top:0; border-top:3px solid #ffff;}
.main > .tit > span.bot{bottom:0; border-bottom:3px solid #ffff;}
.main > .tit > span.left{left:0; border-left:3px solid #ffff;}
.main > .tit > span.right{right:0; border-right:3px solid #ffff;}
.main > .tit > .telBox{background:#ff5500; display:flex; width:fit-content; align-items:center; margin:16px auto 0; padding:6px 16px; border-radius:50px; }
.main > .tit > .telBox > h5 > img{display:none; height:18px; }
.main > .tit > .telBox > h5{margin-right:5px; color:#fff; font-size:18px;}
.main > .tit > .telBox > p{color:#fff; font-family: 'Paperlogy-7Bold'; font-size:32px;}

/*recommend*/
.recommend{padding:40px 0 80px;}
.recommend > div{display:flex; flex-wrap:wrap;}
.recommend > div > div{width:calc((100% - 20px) / 3); margin-right:10px;}
.recommend > div > div:nth-child(3n){margin-right:0;}
.recommend > div > div > a{display:block;}
.recommend > div > div > a > .img{position:relative; background:#f7f7f7; min-height:280px; overflow:hidden;}
.recommend > div > div > a > .img01{background:url('/images/main/recommend01.png')no-repeat center right; background-size:cover;}
.recommend > div > div > a > .img02{background:url('/images/main/recommend02.png')no-repeat center right; background-size:cover;}
.recommend > div > div > a > .img03{background:url('/images/main/recommend03.png')no-repeat center right; background-size:cover;}
.recommend > div > div > a > .img::after{content:""; display:block; width:100%; height:100%; background:linear-gradient(90deg, rgba(0,0,0,.6), transparent); position:absolute; margin-left:-20px; left:0; top:0;}
.recommend > div > div > a > .img > .tit{position:absolute; left:20px; top:50%; transform:translate(0, -50%); z-index:2;}
.recommend > div > div > a > .img > .tit > h4{background:#ff5500; width:fit-content; padding:4px 16px; margin-bottom:10px; border-radius:50px; font-size:16px; font-family: 'Paperlogy-5Medium'; color:#fff;}
.recommend > div > div > a > .img > .tit > h3{margin-bottom:12px; font-size:28px; font-family: 'Paperlogy-7Bold'; color:#fff;}
.recommend > div > div > a > .img > .tit > h3 > span{font-size:18px; }
.recommend > div > div > a > .img > .tit > p{font-size:18px; line-height:26px; color:#fff;}
.recommend > div > div > a > .img > .tit > p > span{display:block;}
.recommend > div > div > a > .txt{margin-top:18px; padding:0 20px;}
.recommend > div > div > a > .txt > h3{margin-bottom:10px; font-size:20px; font-family: 'Paperlogy-7Bold';}
.recommend > div > div > a > .txt > p{font-size:32px; }
.recommend > div > div > a > .txt > p > span{font-size:20px; font-family: 'Paperlogy-4Regular';}
.recommend > div > div > a > .txt > h5{font-size:16px; line-height:24px;}

/*menu*/
.menu{background:url('/images/main/menuBg02.png')no-repeat center; background-size:cover; padding:30px 0; text-align:center;}
.menu > div > .tit{margin-bottom:46px; }
.menu > div > .tit > h4{margin-bottom:10px; font-size:20px;color:#fff;}
.menu > div > .tit > h3{margin-bottom:16px; font-size:42px; font-family: 'jejuhallasan',  'TTTtangsbudaejjigaeB'; color:#fff;}
.menu > div > .tit > p{font-size:18px; line-height:26px; font-weight:100; color:#fff;;}
.menu > div > .tit > p > span{display:block;}
.menu > div > ul{display:flex; flex-wrap:wrap; justify-content: space-between;}
.menu > div > ul > li > a{display:block;}
.menu > div > ul > li > a > .img{}
.menu > div > ul > li > a > p{font-size:18px; color:#fff;}
.menu > div > .menuBtn{margin-top:30px;}
.menu > div > .menuBtn > a{display:block; width:180px; line-height:42px; border:1px solid #fff; margin:0 auto; color:#fff; font-size:16px;}

/*review*/
.review{padding:80px 0;}
.review > div > .tit{position:relative; margin-bottom:46px; text-align:center;}
.review > div > .tit > h3{margin-bottom:16px; font-size:36px; font-family: 'Paperlogy-7Bold';}
.review > div > .tit > p{font-size:18px; font-weight:400; color:#777;}
.review > div > .tit > a{display:block; position:absolute; right:0; bottom:0; padding:10px 16px; background:#ff5500; border-radius:50px; color:#fff; font-weight:700; font-size:17px; }
.review > div > ul{display:flex; flex-wrap:wrap;}
.review > div > ul > li{width:calc((100% - 60px)/4); margin-right:20px; border:1px solid #ddd; box-sizing:border-box; overflow:hidden;}
.review > div > ul > li:nth-child(4n){margin-right:0;}
.review > div > ul > li:nth-child(n - 4){margin-bottom:40px;}
.review > div > ul > li > a{display:block; }
.review > div > ul > li > a > .img{background:#ddd; height:280px;}
.review > div > ul > li > a > .img > img{width:100%; height:100%; object-fit:cover;}
.review > div > ul > li > a > .txt{padding:20px;}
.review > div > ul > li > a > .txt > h4{display:none; margin-bottom:10px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.review > div > ul > li > a > .txt > p{font-size:16px; line-height:24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

/*contact*/
.contact > div{display:flex;}
.contact > div > div{width:50%; min-height:620px;}
.contact > div > .info{padding:120px; border-top:1px solid #cdcdcd;}
.contact > div > .info > h3{margin-bottom:16px; font-size:56px; font-family: 'Paperlogy-7Bold';}
.contact > div > .info > h4{margin-bottom:46px; font-size:20px;}
.contact > div > .info > h5{margin-bottom:20px; font-size:52px; font-family: 'Paperlogy-8ExtraBold'; color:#ff5500;}
.contact > div > .info > h5 > img{height:30px;}
.contact > div > .info > p{font-size:18px; line-height:26px; font-weight:400; color:#777; }
.contact > div > .info > p > span{display:block;}
.contact > div > .map{}
.contact > div > .map > .view{width:100%; height:100%;}

@media (max-width:1200px) {
	.mainvisual {width:100%;}

	.main{min-height:0;}
	.main > .tit{width:80%; padding:20px 30px;}
	.main > .tit > span{width:30px; height:30px;}
	.main > .tit > h2{font-size:1.6rem;}
	.main > .tit > h2 > span{display:block; margin-bottom:4px; font-size:1rem;}
	.main > .tit > h4{margin-bottom:10px;font-size:.7rem;}
	.main > .tit > .telBox{margin-top:10px; padding:4px 10px; }
	.main > .tit > .telBox > h5{font-size:.8rem;}
	.main > .tit > .telBox > p{font-size:1rem;}
	
	.recommend{padding:26px 3% 40px; box-sizing:border-box;}
	.recommend > div{flex-wrap:wrap;}
	.recommend > div > div{width:100%; margin:0 0 16px;}
	.recommend > div > div > a > .img{min-height:160px;}
	.recommend > div > div > a > .img > .tit > h4{font-size:.9rem;}
	.recommend > div > div > a > .img > .tit > h3{font-size:1.6rem;}
	.recommend > div > div > a > .img > .tit > h3 > span{font-size:.9rem;}
	.recommend > div > div > a > .img > .tit > p{font-size:1rem;}
	.recommend > div > div > a > .txt{display:none;}

	.menu{background-position:right 20% center; padding:20px 0;}
	.menu > div > .tit{margin-bottom:16px;}
	.menu > div > .tit > h4{margin-bottom:8px; font-size:.9rem;}
	.menu > div > .tit > h3{margin-bottom:10px; font-size:1.6rem; }
	.menu > div > .tit > p{font-size:.9rem; line-height:1.5rem;}
	.menu > div > .menuBtn > a{width:126px; line-height:36px; font-size:.9rem;}
	
	.review{padding:40px 3%; box-sizing:border-box;}
	.review > div > .tit{margin-bottom:26px;}
	.review > div > .tit > h3{margin-bottom:10px; font-size:1.6rem;}
	.review > div > .tit > p{font-size:.9rem; line-height:1.5rem;}
	.review > div > .tit > a{display:none;}
	.review > div > ul > li{width:calc((100% - 20px)/3); margin-right:10px; border:0;}
	.review > div > ul > li:nth-child(4n){margin-right:10px;}
	.review > div > ul > li:nth-child(3n){margin-right:0;}
	.review > div > ul > li:nth-child(n + 7){display:none;}
	.review > div > ul > li:nth-child(n - 4){margin-bottom:0;}
	.review > div > ul > li:nth-child(n - 3){margin-bottom:20px;}
	.review > div > ul > li > a > .img{height:120px; border-radius:10px; overflow:hidden;}
	.review > div > ul > li > a > .txt{padding:8px 0 0;}
	.review > div > ul > li > a > .txt > p{font-size:1rem; line-height:1.6rem; -webkit-line-clamp:2;}

	.contact > div{flex-wrap:wrap;}
	.contact > div > div{width:100%; min-height:200px;}
	.contact > div > .info{padding:20px 3%; text-align:center;}
	.contact > div > .info > h3{margin-bottom:8px; font-size:2rem;}
	.contact > div > .info > h4{margin-bottom:10px; font-size:1rem;}
	.contact > div > .info > h5{margin-bottom:10px; font-size:2rem;}
	.contact > div > .info > h5 > img{height:20px;}
	.contact > div > .info > p{font-size:.9rem; line-height:1.5rem;}
	.contact > div > .map > .view{height:240px;}
}