@charset "utf-8";

#page_area .page_tit_area{margin-bottom:5rem;text-align:center}
#page_area .page_tit_area .s_tit{margin-bottom:1rem;font-size:1.7rem;font-weight:700;color:var(--pt-color);font-family:'Poppins'}
#page_area .page_tit_area .tit{font-size:4.8rem;font-weight:700;line-height:130%;color:#222;}
#page_area .page_tit_area .txt{margin-top:1rem;font-size:1.7rem;color:#666}

#page_area .hash_list{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
#page_area .hash_list li{padding:1rem 1.5rem;border-radius:3rem;background:#e6ecf9;font-size:1.6rem;font-weight:600;color:#1a2a4a}

#page_area .pension_tab_list{max-width:80rem;width:100%;margin:2rem auto 0;display:flex;flex-wrap:wrap;gap:2%}
#page_area .pension_tab_list li{width:23.5%;padding:1.5rem 2rem;border-radius:5rem;font-size:1.7rem;font-weight:500;color:#33;text-align:center;background:#f7f7f7;cursor:pointer}
#page_area .pension_tab_list li.on, #page_area .pension_tab_list li:hover{background:var(--pt-color);color:#fff}
	
#page_area .cont_box + .cont_box{margin-top:5rem}
#page_area .cont_box.cont_box_top{margin-top:10rem;padding-top:10rem;border-top:1px dashed #ddd}
#page_area .cont_box .cont_tit{margin-bottom: 3rem;border-left: 2px solid var(--pt-color);padding: 1.5rem 2rem;background: #f2f5fc;font-size: 2rem;font-weight: 700;color: #333;}
	
/*여행사 소개*/
.p0101 .about_cont{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:3rem 5rem}
.p0101 .about_cont .img_box{width:40%;border-radius:2rem;overflow:hidden;box-shadow:-1rem 1rem 0 var(--pt-color)}
.p0101 .about_cont .img_box img{width:100%}
.p0101 .about_cont .txt_box{width:calc(60% - 5rem)}
.p0101 .about_cont .txt_box .s_tit{margin-bottom:1rem;font-size:1.7rem;font-weight:700;color:var(--pt-color)}
.p0101 .about_cont .txt_box .tit{font-size:3.5rem;font-weight:700;line-height:130%;color:#222}
.p0101 .about_cont .txt_box .txt{margin-top:3rem;font-size:1.7rem;line-height:150%;color:#666}
.p0101 .about_cont .txt_box .txt p{word-break:keep-all}
.p0101 .about_cont .txt_box .txt p + p{margin-top:1.5rem}	
	
/*오시는 길*/	
.p0102 .map_area{width:100% !important;height:35rem !important;margin-bottom:5rem;border-bottom:1px solid #ddd;}
.p0102 .root_daum_roughmap .wrap_map{width:100 !important;height:100% !important}
.p0102 .info_box{margin-bottom:5rem;display:flex;flex-wrap:wrap;align-items: center;justify-content: center;gap: 2rem 4rem;}
.p0102 .info_box li{font-size:1.8rem;font-weight:500;color:#333;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
.p0102 .info_box li p{font-weight:700;color:var(--pt-color);display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.p0102 .info_box li p span{width:3.6rem;height:3.6rem;border-radius:3.5rem;background:var(--pt-color);display:flex;flex-wrap:wrap;align-items:center;justify-content:center}	
.p0102 .info_box li p span img{width:1.9rem;}
	
/*백령도,대청도 소개*/
.guide_page .img_cont{align-items:center;display:flex;flex-wrap:wrap;gap:5rem}
.guide_page .img_cont .img_box{width:40%;border-radius:2rem;box-shadow:-1rem 1rem 0 var(--pt-color);overflow:hidden}
.guide_page .img_cont .img_box img{width:100%}
.guide_page .img_cont .txt_box{width:calc(60% - 5rem);font-size:1.7rem;line-height:150%;color:#666;word-break:keep-all}
.guide_page .img_cont .txt_box p + p{margin-top:1.5rem}

.guide_page .guide_img{margin-bottom:5rem;text-align:center}
.guide_page .guide_img img{max-width:100%;width:auto}
.guide_page .guide_img .source_txt{font-size:13px;color:#999;text-align:right}


/*배편안내*/
.p0103 .img_area{width:100%;margin-bottom:3rem;display:flex;flex-wrap:wrap;gap:2rem 2%}
.p0103 .img_area li{width:32%;border:1px solid #ddd;border-radius:2rem;overflow:hidden}
.p0103 .img_area li img{width:100%}
.p0103 .cont_info{padding:5rem;border:1px solid #ddd;border-radius:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:2rem 5rem}
.p0103 .cont_info .info_tit{width:20rem;padding:1rem 2rem;border-radius:5rem;background:var(--pt-color);font-size:1.8rem;font-weight:700;text-align:center;color:#fff}
.p0103 .cont_info .info_list{width:calc(100% - 25rem);display:flex;flex-wrap:wrap;gap:1rem 2%}
.p0103 .cont_info .info_list li{width:32%;padding-left:1rem;font-size:1.7rem;color:#666;position:relative}
.p0103 .cont_info .info_list li:before{content:'';width:3px;height:3px;border-radius:3px;background:var(--pt-color);position:absolute;top:.9rem;left:0}
.p0103 .tip_cont{padding:5rem;border-radius:2rem;background:#f2f5fc;text-align:center}
.p0103 .tip_cont .tit{margin-bottom:2rem;padding-bottom:2rem;font-size:2.5rem;font-weight:700;color:#333;position:relative}
.p0103 .tip_cont .tit:before{content:'';width:4rem;height:3px;background:var(--pt-color);position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.p0103 .tip_cont .txt{font-size:1.7rem;line-height:150%;color:#666}
.p0103 .tip_cont .txt .red{color:#c00}
.p0103 .tip_cont .txt .blue{color:var(--pt-color)}
.p0103 .tip_cont .txt p{margin-top:1rem;color:#c00}

.p0103 .tbl_cont{width:100%;overflow-x:auto}
.p0103 .tbl_cont .tbl{width:100%;border-left:1px solid #ddd}
.p0103 .tbl_cont .tbl th{padding:1rem;border-right:1px solid #386bd0;background:var(--pt-color);font-size:1.7rem;font-weight:600;color:#fff}
.p0103 .tbl_cont .tbl th:last-child{border-right:0}
.p0103 .tbl_cont .tbl td{padding:1.5rem 1rem;border:1px solid #ddd;border-left:none;border-top:none;font-size:1.7rem;color:#666;text-align:center}
.p0103 .tip_txt{margin-top:1rem;color:#888;text-align:right}

.p0103 .more_btn{max-width:25rem;width:100%;height:5.5rem;margin:5rem auto 0;border-radius:5.5rem;background:var(--pt-color);font-size:1.7rem;color:#fff;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:1rem;}
.p0103 .more_btn img{width:2rem}
.p0103 .more_btn:hover{background:#333;box-shadow:0 1rem 1rem rgba(0,0,0,.2)}


/*사이트맵*/
#site_map_area{width:100%;display:flex;flex-wrap:wrap;gap:3rem 2%}
#site_map_area .site_map{width:23.5%}
#site_map_area .site_map .menu_tit{margin-bottom:2rem;font-weight:600;font-size:2.2rem;color:#333}
#site_map_area .site_map ul{min-height:26.5rem;border-top:2px solid #333;border-bottom:1px solid #ddd;background:#f9f9f9}
#site_map_area .site_map ul li{padding:1rem 2rem 1rem 3.5rem;border-bottom:1px dashed #ddd;font-size:1.6rem;line-height:2.8rem;word-break:keep-all;position:relative}
#site_map_area .site_map ul li a{color:#666}
#site_map_area .site_map ul li:last-child{border-bottom:0}
#site_map_area .site_map ul li:before{content:'';width:3px;height:3px;border-radius:3px;background:var(--pt-color);position:absolute;left:2rem;top:2.2rem}



@media(max-width:1280px){
	#page_area .page_tit_area .tit{font-size:4.5rem}
	
	/*여행사소개*/
	.p0101 .about_cont .txt_box .tit{font-size:3.2rem}
}
@media(max-width:1024px){
	#page_area .page_tit_area .tit{font-size:4.2rem}
	#page_area .cont_box.cont_box_top{margin-top:5rem;padding-top:5rem}
	#page_area .hash_list li{padding:.5rem 1.5rem}
	
	/*여행사소개*/
	.p0101 .about_cont{gap:6rem}
	.p0101 .about_cont .txt_box{max-width:70rem;width:100%;text-align:center}
	.p0101 .about_cont .txt_box .tit{font-size:2.9rem}
	.p0101 .about_cont .txt_box .txt{margin-top:2rem}
	
	.p0101 .about_cont .img_box{max-width:70rem;width:100%;height:40rem;}
	.p0101 .about_cont .img_box img{width:100%;height:100%;object-fit:cover;object-position:top}
	
	/*오시는 길*/
	.p0102 .info_box li:first-child{width:100%}
	
	/*배편안내*/
	.p0103 .img_area{max-width:70rem;width:100%;margin:0 auto 3rem}
	.p0103 .img_area li{width:49%;border-radius:1rem}
	.p0103 .img_area{justify-content:center}
	.p0103 .cont_info{justify-content:center;}
	.p0103 .cont_info .info_list{width:100%;justify-content:center;}
	
	/*백령도 대청도 소개*/
	.guide_page .img_cont{text-align:center;justify-content:center;}
	.guide_page .img_cont .img_box{max-width:45rem;width:100%}
	.guide_page .img_cont .img_box img{width:100%}
	.guide_page .img_cont .txt_box{max-width:70rem;width:100%}
	
	#site_map_area .site_map{width:32%}
	
}
@media(max-width:767px){
	/*공통*/
	#page_area .page_tit_area{margin-bottom:3rem}
	#page_area .page_tit_area .tit{font-size:3.9rem}
	
	#page_area .pension_tab_list{gap:1rem 2%}
	#page_area .pension_tab_list li{width:49%}
	
	/*여행사소개*/
	.p0101 .about_cont .img_box{height:35rem;}
	
	/*오시는 길*/
	.p0102 .info_box{gap:0}
	.p0102 .info_box li{width:100%;text-align:center}
	.p0102 .info_box li	+ li{margin-top:1rem;padding-top:1rem;border-top:1px dashed #ddd}
	.p0102 .info_box li p{width:100%;justify-content:center}
	
	/*배편안내*/
	.p0103 .cont_info{padding:3rem 2rem}
	.p0103 .cont_info .info_list li{width:49%}
	.p0103 .tip_cont{padding:3rem 2rem}
	.p0103 .tip_cont .txt br{display:none}
	.p0103 .tbl_cont .tbl{min-width:78rem}
	
	#site_map_area .site_map{width:49%}
}
@media(max-width:480px){
	/*공통*/
	#page_area .page_tit_area .tit{font-size:3.6rem}
	
	/*여행사소개*/
	.p0101 .about_cont .img_box{height:30rem;}
	
	
	
	/*배편안내*/
	.p0103 .img_area{max-width:30rem}
	.p0103 .img_area li{width:100%}
	.p0103 .cont_info .info_list li{width:100%}
	
	#site_map_area .site_map{width:100%}
	#site_map_area .site_map ul{min-height:unset}
}
@media(max-width:320px){
	#page_area .page_tit_area .tit{font-size:3.3rem}
}