@charset "utf-8";
/************************************
 PAGES.css __&. - 2024.04 
************************************/

/* INDEX(viewportMain.php) */
#pgIdx {
	overflow:hidden;
}
#pgIdx #splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(8,5,94);
		background: linear-gradient(180deg, rgba(8,5,94,1) 0%, rgba(0,104,183,1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
		z-index:100000;
    opacity: 1;
    transition: opacity 1s ease;
}
#pgIdx #splashScreen.hiding {
    opacity: 0;
}
#pgIdx .pgIdx__item dt {
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    color: var(--color-main);
}
#pgIdx .pgIdx__item dd {
    font-size: 1.2rem;
    color: var(--color-gray300);
}
#pgIdx .pgIdx__item dd strong {
    font-size: 1.5rem;
    color: var(--txt-color-def);
}
#pgIdx .pgIdx__item dd small {
    font-size: 1.2rem;
    font-weight: var(--txt-medium);
    color: var(--color-gray300);
}
#pgIdx .pgIdx__item dd small b {
    color: var(--color-sub);
}
#pgIdx .pgIdx__item .item_btns {
	padding-bottom:1rem;
    gap: 1rem;
    overflow-x: auto;	
}
#pgIdx .pgIdx__item .item_btns dl {
    min-width: calc(46% - 0.5rem);
    padding: 1.4rem;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 1.6rem;
}
#pgIdx .pgIdx__item .item_btns dl.active {
    background: #fff;
    border: 1px solid var(--color-sub);
    box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgIdx .pgIdx__item .item_btns dt {
    margin-bottom: 1.5ex;
}
#pgIdx .pgIdx__item .item_img {
    width: 100%;
    height: 17rem;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 1rem 2rem 0 var(--shadow-color);
}
#pgIdx .pgIdx__item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#pgIdx .pgIdx__item .item_btns dd {
    margin-top: 1ex;
}
#pgIdx .pgIdx__item .item_details dl {
    padding: 1.4rem;
    background: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgIdx .pgIdx__item .item_details dt {
    min-width: 8rem;
    margin-right: 2rem;
    padding-right: 1rem;
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    color: var(--color-main);
    border-right: 1px solid var(--color-gray200);
}
#pgIdx .pgIdx__item .item_details dd {
    font-size: 1.2rem;
}
#pgIdx .pgIdx__item .item_details dd > div {
    width: 50%;
}
#pgIdx .pgIdx__item .item_map #map {
    width: 100%;
    height: 17rem;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 1rem 2rem 0 var(--shadow-color);
}


/* SEARCH(kakaoTest.php) */
#pgSearch .map_wrap, 
#pgSearch .map_wrap * {
    margin: 0;
    padding: 0;
    font-family:  'Apple SD Gothic Neo', Pretendard,'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: 1.2rem;
}
#pgSearch .map_wrap a, 
#pgSearch .map_wrap a:hover, 
#pgSearch .map_wrap a:active {
    color: #000;
    text-decoration: none;
}
#pgSearch .map_wrap {
    position: relative;
    width: 100%;
}
#pgSearch #menu_wrap {
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.5rem;
    background: #fff;
    font-size: 1.2rem;
    border-radius: 1rem;
    box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgSearch .bg_white {
    background: #fff;
}
#pgSearch #menu_wrap hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid var(--color-gray200);
    margin: 3px 0;
}
#pgSearch #menu_wrap .option {
    text-align: center;
}
#pgSearch #menu_wrap .option form {
	display:flex;
	justify-content:space-between;
	padding:1rem;
}
#pgSearch #menu_wrap .option form input {
	font-size:1.4rem;
}
#pgSearch #menu_wrap .option p {
    margin: 1rem 0;
}
#pgSearch #menu_wrap .option button {
    margin-left: 0.5rem;
}
#pgSearch #menu_wrap #placesList {
	height:25rem;
	overflow-y: auto;
}
#pgSearch #placesList li {
    list-style: none;
}
#pgSearch #placesList .item {
    position: relative;
		display:flex;
    border-bottom: 1px solid var(--color-gray200);
    overflow: hidden;
    cursor: pointer;
    min-height: 6.5rem;
}
#pgSearch #placesList .item:last-child {
	border:none;
}
#pgSearch #placesList .item span {
    display: block;
    margin-top: 0.4rem;
}
#pgSearch #placesList .item .info {
    padding: 1rem 0 1rem 5.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#pgSearch #placesList .item h5 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
		font-size:1.4rem;
		color:var(--color-main);
}
#pgSearch #placesList .info .gray {
    color: #8a8a8a;
}
#pgSearch #placesList .info .jibun {
    padding-left: 26px;
    background: url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;
}
#pgSearch #placesList .info .tel {
    color: #009900;
}
#pgSearch #placesList .item .markerbg {
    float: left;
    position: absolute;
    width: 3.6rem;
    aspect-ratio:36 / 37;
    margin: 10px 0 0 10px;
    background: url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;
}
#pgSearch #placesList .item .marker_1 {background-position: 0 -10px;}
#pgSearch #placesList .item .marker_2 {background-position: 0 -56px;}
#pgSearch #placesList .item .marker_3 {background-position: 0 -102px}
#pgSearch #placesList .item .marker_4 {background-position: 0 -148px;}
#pgSearch #placesList .item .marker_5 {background-position: 0 -194px;}
#pgSearch #placesList .item .marker_6 {background-position: 0 -240px;}
#pgSearch #placesList .item .marker_7 {background-position: 0 -286px;}
#pgSearch #placesList .item .marker_8 {background-position: 0 -332px;}
#pgSearch #placesList .item .marker_9 {background-position: 0 -378px;}
#pgSearch #placesList .item .marker_10 {background-position: 0 -423px;}
#pgSearch #placesList .item .marker_11 {background-position: 0 -470px;}
#pgSearch #placesList .item .marker_12 {background-position: 0 -516px;}
#pgSearch #placesList .item .marker_13 {background-position: 0 -562px;}
#pgSearch #placesList .item .marker_14 {background-position: 0 -608px;}
#pgSearch #placesList .item .marker_15 {background-position: 0 -654px;}

#pgSearch #pagination {
	padding-top:1rem;
    margin: 1rem auto;
    text-align: center;
		border-top:2px solid var(--color-gray200);
}
#pgSearch #pagination a {
    display: inline-block;
    margin-right: 1rem;
		font-size:1.2rem;
		color:var(--color-gray300);
}
#pgSearch #pagination .on {
    font-weight: bold;
    cursor: default;
    color: var(--color-sub);
}
#pgSearch #map_box {
	width:100%;
	height:50rem;
	border-radius: 1rem;
	box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
	overflow:hidden;
}

/*GUIDE(guide.php)*/
#pgGuide section {
	gap:1rem;
}
#pgGuide dl {
	width:100%;
	padding: 1.4rem;
	background: #fff;
	border-radius: 1.6rem;
	box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgGuide dt {
	min-width: 9rem;
	margin-right: 1rem;
	padding:0 1rem 0.5rem 0;
	font-size: 1.8rem;
	font-weight: var(--txt-bold);
	color: var(--color-main);
	border-right: 1px solid var(--color-gray200);
	gap:1rem;
}
#pgGuide dt b {
	width:100%;
	text-align:left;
}
#pgGuide dd {
    font-size: 1.5rem;
}
#pgGuide dd small {
	color:var(--color-red);
}
#pgGuide .video_wrap {
	width:100%;
	height:auto;
	aspect-ratio:560 / 315;
	border-radius: 1.6rem;
	overflow:hidden;
	box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgGuide .video_wrap iframe {
	width:100%;
	height:100%;
	object-fit:cover;
}
#pgGuide .video_txt {
	padding: 1.4rem;
  font-size: 1.4rem;
	background: #fff;
	border-radius: 1.6rem;
	box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}

/*FAQ(faq.php)*/
#pgFaq .bbs_comm {
	font-size:1.4rem;
	line-height:1.5; 
}
#pgFaq .bbs_comm li {
	padding:1rem 1.5rem;
	margin-top:1rem;
	background-color:#fff;
	border-radius:1rem;
  box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgFaq .bbs_comm li .bbs_comm__title {
	font-weight:var(--txt-medium);
}
#pgFaq .bbs_comm li .bbs_comm__title h2 {
	width:calc(100% - 1.4rem);
	font-size:1.6rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#pgFaq .bbs_comm li .bbs_comm__title.open h2 {	
	white-space:normal;
	color:var(--color-main);
}
#pgFaq .bbs_comm li .bbs_comm__title:after {
	content:"";
	display:block;
	width:0.7rem;
	height:0.7rem;
    margin-top: 1ex;
	border:1.5px solid var(--color-main);
	border-left:0;
	border-top:0;
	transform:rotate(45deg);
	transition:all 0.5s;
}
#pgFaq .bbs_comm li .bbs_comm__title.open:after {	
	transform:rotate(-135deg);
}
#pgFaq .bbs_comm li .bbs_comm__cont {
	display: none;
	padding:0.5rem 0 0;
	font-size:1.4rem;
	color:var(--color-gray300);
}

/*CONTROL(phpShow.php)*/
#pgControl,
#pgControl header {
	width:100%;
	max-width:100%;
}
#pgControl .comm_wrap {
	max-width:1200px;
	margin:0 auto;
	padding-bottom:3rem;
}
#pgControl .comm_wrap article {
	margin-bottom:0;
}
#pgControl .tab_list {
	gap:1rem;
	overflow-x: auto;
}
#pgControl .tab_list button {
    min-width: 7em;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 1.6rem;
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    color: var(--color-main);
}
#pgControl .tab_list dl {
    min-width: 16em;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 1.6rem;
}
#pgControl .tab_list button.active,
#pgControl .tab_list dl.active {
    background: #fff;
    border: 1px solid var(--color-sub);
    box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgControl .tab_list dt {
    margin-bottom: 1.5ex;
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    color: var(--color-main);
}
#pgControl .tab_list dd {
    font-size: 1.2rem;
    color: var(--color-gray300);
}
#pgControl .tab_list dd strong {
    font-size: 1.5rem;
    color: var(--txt-color-def);
}
#pgControl .tab_list  dd small {
    font-size: 1.2rem;
    font-weight: var(--txt-medium);
    color: var(--color-gray300);
}
#pgControl .tab_list  dd small b {
    color: var(--color-sub);
}
#pgControl #myTable .tbl_wrap {
	width:100%;
  overflow-x: auto;
}
#pgControl #myTable table {
	width: 100%;
	margin: 1rem 0;
	border-radius: 1rem;
	border:none;
}
#pgControl #myTable table th {
	padding:1ex;
	border:none;
	font-size: 1.5rem;
	color:var(--color-sub);
	background: #fff;
}
#pgControl #myTable table td {
	padding:1ex;
	font-size: 1.3rem;
	border:none;
	background: #fff;
}
#pgControl #myTable .pager {
	margin:2rem 0;
	font-size:1.5rem;
	gap:0.5rem;
}
#pgControl #myTable .pager span,
#pgControl #myTable .pager strong,
#pgControl #myTable .pager a {
	display:block;
	width:2.5em;
	height:2.5em;
	line-height:2.5em;
	text-align:center;
	background:#fff;
	border-radius:1rem;
	box-shadow: 0 0.7rem 2rem 0 var(--shadow-color);
}
#pgControl #myTable .pager strong {
	color:#fff;
	background:var(--color-main);
}