@charset "utf-8";
@import url('fonts.css');
@import url('open-color.css');

:root {
	--color-point:		#5c7cfa;
	--color-point-dark:	#3b5bdb;
	--color-point-a:	#dbe4ff;
	--color-point-b:	#bac8ff;

	--color-bg1:	rgba(255, 255, 255, 0.3);
	--color-bg2:	rgba(255, 255, 255, 0.7);
	--color1:		186,200,255;
	--color2:		165,216,255;
	--color3:		153,233,242;
	--color4:		150,242,215;

	--color-interactive: 208,191,255;
	--circle-size: 140%;
	--blending: hard-light;
	--blur: 80px;

	--font-title:	'Montserrat', 'Spoqa Han Sans Neo', 'Noto Sans KR', sans-serif;
    --font-text:	'Roboto', 'Pretendard', 'Noto Sans KR', 'AppleGothic', '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, sans-serif;
	--font-num:		'Roboto Mono', 'Roboto', 'Pretendard', 'Noto Sans KR', 'AppleGothic', '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, sans-serif;
	--font-icon :	'Font Awesome 6 free', 'xeicon', 'Pretendard', sans-serif;
	
	--transition: all .3s ease-in-out;
	
	--font-size: 30px;
	--font-size-md: 30px;
}

/* --- component --- */
.round-box.pd { background-color:#fff; }

/* --- header --- */
#hd, #wrapper, #ft { font-size:1em; }
#hd, #wrapper, #ft, #hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr, #ft_copy { min-width:auto; width:100%; }
#hd { background:transparent; border-color:rgba(0,0,0,0.1);
	-webkit-backdrop-filter: blur(10px) brightness(1.2); backdrop-filter: blur(10px) brightness(1.2); }
#hd .inner {height:inherit;justify-content:center;}
#hd .inner a img { max-height:36px; }
@media all and (max-width:1200px) {
	#hd { height:50px; }
}
@media all and (max-width:768px) {
	#hd, #container, #ft { font-size:16px; }
	#hd .hd_login li span { display:none; }
	#hd .hd_login li i { font-size:20px; }
}

/* --- intro --- */
.main-visual .img-box { text-align:center; }
.main-visual .img-box img { max-height:300px; }
.sec-main.intro .grid-wrap { display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap:40px; aspect-ratio: 3/1; }
.sec-main.intro .grid-item.chat		{ grid-column: 1 / 2;	grid-row: 1 / 3; }
.sec-main.intro .grid-item.minwon	{ grid-column: 2 / 3;	grid-row: 1 / 3; }
.sec-main.intro .grid-item.member	{ grid-column: 3 / 4;	grid-row: 1 / 2; }
.sec-main.intro .grid-item.mypage	{ grid-column: 3 / 4;	grid-row: 2 / 2; }
.sec-main.intro .grid-item a { width:100%; height:100%; display:inline-flex; justify-content:center; align-items:center; }
.sec-main.intro .grid-item .sd-box { border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 4px 34px rgba(0,0,0,0.15);
	background: linear-gradient(135deg, rgb(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 30%); text-align:center;    
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition:var(--transition); }
.sec-main.intro .grid-item .sd-box:hover { -webkit-backdrop-filter: brightness(1.05); backdrop-filter: brightness(1.05); color:var(--oc-gray-9); }
.sec-main.intro .grid-item.chat	.sd-box,
.sec-main.intro .grid-item.minwon .sd-box { flex-direction:column; }
.sec-main.intro .grid-item .sd-box .sec-title { font-size:1.8em; font-family: var(--font-title); }
.sec-main.intro .grid-item .btn-box { gap:40px; width:100%; height:100%; }
.sec-main.intro .grid-item .btn-box a { font-family: var(--font-title); font-size:20px; font-weight:600;
	flex:1; flex-direction:column; height:100%; border-radius: 1rem;
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 34px rgba(0,0,0,0.15); }
.sec-main.intro .grid-item .btn-box a i { font-size: 1.5em; }
.sec-main.intro .grid-item .btn-box .btn_custom.btn_point_bg { background-color:var(--oc-indigo-5); border: 1px solid rgba(255,255,255,0.5); }
.sec-main.intro .grid-item .btn-box .btn_custom.btn_point_bg:hover { background-color:var(--oc-indigo-8); }
.sec-main.intro .grid-item .btn-box .btn_custom.btn_point { background-color:rgba(255,255,255,0.7);	border: 1px solid rgba(255,255,255,0.5); color:var(--oc-indigo-5); }
.sec-main.intro .grid-item .btn-box .btn_custom.btn_point:hover { color:var(--oc-indigo-8); }

@media all and (max-width:1140px) {
	.sec-main.intro .grid-wrap { aspect-ratio: auto; grid-template-columns: repeat(2, 1fr); }
	.sec-main.intro .grid-wrap,
	.sec-main.intro .grid-item .btn-box { gap:20px; }	
	.sec-main.intro .grid-item.chat		{ grid-column: 1 / 2;	grid-row: 1 / 2; }
	.sec-main.intro .grid-item.minwon	{ grid-column: 2 / 3;	grid-row: 1 / 2; }
	.sec-main.intro .grid-item.member	{ grid-column: 1 / 2;	grid-row: 2 / 3; }
	.sec-main.intro .grid-item.mypage	{ grid-column: 2 / 3;	grid-row: 2 / 3; }
	.sec-main.intro .grid-item.chat	.sd-box,
	.sec-main.intro .grid-item.minwon .sd-box { flex-direction:row; }
}
@media all and (max-width:768px) {
	.main-visual .img-box img { width:80%; }
	.sec-main.intro .grid-wrap { display:flex; flex-direction:column; }
	.sec-main.intro .grid-item .sd-box { flex-direction:row; padding:0.5rem 1rem; }
	.sec-main.intro .grid-item .sd-box img { width:8em; }
	.sec-main.intro .grid-item .sd-box .sec-title { font-size:1.6em; }
	.sec-main.intro .grid-item .btn-box a { flex-direction:row; padding:1rem; }
}

/* --- footer --- */
#ft { margin-top:auto; background:var(--oc-gray-9); font-family:var(--font-text); }
#ft #ft_wr { display:flex; gap:20px; max-width:1100px; padding:30px 20px; margin:0 auto; }
#ft #ft_wr:after { display:none; }
#ft #ft_wr .ft_cnt { float:none; width:auto; padding:0; margin:0; }
#ft #ft_link { flex:1; }
#ft #ft_company { flex:3; }
#ft #ft_company .ft_info { display:flex; flex-wrap:wrap; gap:0 20px; line-height:1.6; font-weight:300; padding:0; margin:0; }
#ft #ft_copy { color:var(--oc-gray-6); border-color:var(--oc-gray-7); }
@media all and (max-width:768px) {
	#ft #ft_wr { flex-direction:column; gap:30px; }
	#ft #ft_company { flex:1; }
	#ft #ft_link { line-height:1.5; display:flex; flex-wrap:wrap; }
	#ft #ft_link li:after { content:'　|　'; color:var(--oc-gray-5); }
	#ft #ft_link li:last-child:after { display:none; }
	#ft #ft_link a { display:inline; }
}

/* --- gradient-bg --- */
@keyframes moveInCircle {
	0%		{ transform: rotate(0deg); }
	50%		{ transform: rotate(180deg); }
	100%	{ transform: rotate(360deg); }
}
@keyframes moveVertical {
	0%		{ transform: translateY(-50%); }
	50%		{ transform: translateY(50%); }
	100%	{ transform: translateY(-50%); }
}
@keyframes moveHorizontal {
	0%		{ transform: translateX(-50%) translateY(-10%); }
	50%		{ transform: translateX(50%) translateY(10%); }
	100%	{ transform: translateX(-50%) translateY(-10%); }
}

.gradient-bg {
  width: 100%;
  height: calc(100% + 110px);
  position: absolute;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  top: -110px;
  left: 0;
  z-index:-1;
}
.gradient-bg svg {
    display: none;
  }
.gradient-bg .gradients-container {
    filter: url(#goo) blur(var(--blur)) ;
    width: 100%;
    height: 100%;
  }
.gradient-bg  .g1 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: left center;
    animation: moveVertical 30s ease infinite;

    opacity: 0.8;
    filter: blur(var(--blur));
  }
.gradient-bg .g2 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;

    opacity: 0.8;
    filter: blur(var(--blur));
  }
.gradient-bg  .g3 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);

    transform-origin: calc(50% + 400px);
    animation: moveInCircle 40s linear infinite;

    opacity: 0.8;
    filter: blur(var(--blur));
  }
.gradient-bg .g4 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 40s ease infinite;

    opacity: 0.7;
    filter: blur(var(--blur));
  }
 .gradient-bg .g5 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));

    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;

    opacity: 1;
    filter: blur(var(--blur));
  }
.gradient-bg .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;

    opacity: 0.7;
    filter: blur(var(--blur));
  }
@media all and (max-width:1200px) {
	.gradient-bg { height: calc(100% + 90px); }
}
@media all and (max-width:1000px) {
	.gradient-bg { background: no-repeat url("../img/front/bg_intro_02.jpg") center center / cover; }
	.gradient-bg > * { display:none; }
}

/* --- login --- */
#container input,
#mb_login input { font-family:var(--font-text); }
#container button,
#mb_login button { font-family:var(--font-title); }
#mb_login .mb_log_cate h2 { padding-left:35px; padding-right:35px; }

/* --- board --- */
#bo_list.bo_list_reserv .con_wr .bo_l_cate { margin-bottom:3px; }
#bo_w.bo_w_reserv .write_div.flex > label { font-family:var(--font-title); font-weight:600; }
@media all and (max-width:1000px) {
	#bo_w.bo_w_reserv .write_div.flex { flex-direction:column; }
	#bo_w.bo_w_reserv .write_div.flex > div { width:100%; }
}
@media all and (max-width:770px) {
	#wrapper .bo_sch_wrap .bo_sch .sch_bar { width:calc(100% - 100px); }
	#wrapper .bo_sch_wrap .bo_sch .sch_input { width:100% !important; }
	#bo_list .tbl_head01 td,
	#bo_v_rel, .tbl_head01 td { border-top:none; border-bottom:none; }
	#bo_list .tbl_head01 tbody tr + tr,
	#bo_v_rel .tbl_head01 tbody tr + tr { border-top:1px solid #ecf0f1; }
	#bo_list .td_name, #bo_v_rel .td_name,
	#bo_list .td_num, #bo_v_rel .td_num,
	#bo_list .td_date, #bo_v_rel .td_date,
	#bo_list .td_datetime, #bo_v_rel .td_datetime { display:none; }
	#bo_list .td_subject,
	#bo_v_rel .td_subject { display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; height:auto; min-height:60px; }
	#bo_list .td_subject .bo_cate_link,
	#bo_v_rel .td_subject .bo_cate_link { margin-right:0; }
	#bo_list .td_subject .bo_info,
	#bo_v_rel .td_subject .bo_info { width:100%; display:flex !important; align-items:center; }
	#bo_list .td_subject .bo_info span,
	#bo_v_rel .td_subject .bo_info span { display:inline-block; }
	#bo_list .td_subject .bo_info span i,
	#bo_v_rel .td_subject .bo_info span i { vertical-align:-0.1em; }
	#bo_list .td_subject .bo_info span + span:before,
	#bo_v_rel .td_subject .bo_info span + span:before { content:'·'; display:inline-block; margin:0 0.5em; }
	.tbl_head01 thead th { padding:0.5em 0; }
}

/* --- pagination --- */
.pg_wrap { display:flex; justify-content:center; float:none; }
.pg_page { background-color:var(--oc-gray-0); border-color:transparent; font-size:1em; }
.pg_page:hover { background-color:var(--color-point-a); border-color:var(--color-point-b); color:var(--color-point); }
.pg_current { background-color:var(--color-point); border-color:var(--color-point); font-size:1em; }
.pg_prev,
.pg_next,
.pg_start,
.pg_end { text-indent:0; background-image:none; }

/* --- list --- */
.list_reserv {margin-bottom:20px;}
.list_reserv .list_card { display:flex; gap:3em; border-top:1px solid var(--oc-gray-4); padding:1.5em 0; }
.list_reserv .list_card:last-child { border-bottom:1px solid var(--oc-gray-4); }
.list_reserv .list_card .list_info_wrap { flex:3; }
.list_reserv .list_card .list_btns_wrap { flex:1; position:relative; display:flex; flex-direction:column; gap:1.5em; }
.list_reserv .list_card .list_btns_wrap:before { content:''; position:absolute; top:0; left:-1.5em; width:1px; height:100%; border-left:1px dashed var(--oc-gray-3); }
.list_reserv .list_card .list_btns_wrap .btn_custom { flex:1; font-family: var(--font-title); font-weight:700; }
.list_reserv .list_card .list_info.head { display:flex; align-items:center; gap:1em; }
.list_reserv .list_card .list_info.head .num { color:var(--oc-gray-5); }
.list_reserv .list_card .list_info.head .type { display:inline-block; background:var(--oc-teal-0); color:var(--oc-teal-6); padding:0.25em 0.75em; border-radius:1em; }
.list_reserv .list_card .list_info.body { margin:0.6em 0 1.2em; }
.list_reserv .list_card .list_info.body .title { font-size:2em; font-family: var(--font-title); letter-spacing:-0.01em; }
.list_reserv .list_card .list_info.body .desc { font-size:1.1em; color:var(--oc-gray-6); margin-top:8px; line-height:1.4; }
.list_reserv .list_card .list_info.foot { display:flex; gap:1.5em; background:var(--oc-gray-0); padding:1em; color:var(--oc-gray-6); line-height:1.3; }
.list_reserv .list_card .list_info.foot > div { flex:1; }
.list_reserv .list_card .list_info.foot .tit { color:var(--oc-gray-9); }
.list_reserv .list_card .list_info.foot .t { font-size:1em; color:var(--oc-gray-7); font-weight:600; }
.list_reserv .list_card .list_info.foot .list_dash { margin-top:10px; }
.list_reserv .list_card .list_info.foot .list_dash > li { position:relative; padding-left:1em; margin-top:5px; font-size:1.1em; }
.list_reserv .list_card .list_info.foot .list_dash > li:before { display:block; position:absolute; top:0.6em; left:0; width:0.5em; height:2px; content:""; background:var(--oc-gray-6); }
@media all and (max-width:1000px) {
	.list_reserv .list_card { flex-direction:column; gap:1.5em; }
	.list_reserv .list_card .list_btns_wrap:before { display:none; }
	.list_reserv .list_card .list_btns_wrap { flex-direction:row; }
}
@media all and (max-width:768px) {
	.list_reserv .list_card .list_info.foot { display:block; }
	.list_reserv .list_card .list_info.foot { padding:0.5em 1em; }
	.list_reserv .list_card .list_info.foot .tit { display:none; }
	.list_reserv .list_card .list_info.foot .list_dash { margin:0; }
	.list_reserv .list_card .list_info.foot .list_dash > li { margin:8px 0; }
}

/* --- write form --- */
#wrapper .btn_confirm.flex .btn-lg { font-family:var(--font-title); min-width:5em; font-weight:700; }
.form_reserv dt { font-family:var(--font-title); font-size:24px; }
.form_reserv dd { font-family:var(--font-text); font-size:18px; }
.form_reserv dd.flex { gap:1em; }
.form_reserv .form-control,
.wr_content textarea { font-size:18px; outline:none;
	-webkit-transition:var(--transition-fast); -moz-transition:var(--transition-fast); -ms-transition:var(--transition-fast); -o-transition:var(--transition-fast); }
.form_reserv .form-control:focus,
.wr_content textarea:focus { -webkit-box-shadow:unset; -moz-box-shadow:unset; box-shadow:unset; border:1px solid var(--color-point) !important; }
.form_reserv .form-control::placeholder,
.wr_content textarea::placeholder { color: var(--oc-gray-5); opacity: 1; /* Firefox */ }
.form_reserv .form-control::-ms-input-placeholder,
.wr_content textarea::-ms-input-placeholder { color: var(--oc-gray-5); /* Edge 12 -18 */ }
@media all and (max-width:768px) {
	.form_reserv dt { font-family:var(--font-title); font-size:20px; }
	.form_reserv dd { font-family:var(--font-text); font-size:17px; }
	.form_reserv .form-control,
	.wr_content textarea { font-size:17px; }
	#wrapper .btn_confirm.flex { justify-content: center; }
}

/* --- media --- */
.max_wide, .max_pc, .max_ta, .max_mo { display:none !important; }
@media all and (max-width:1200px) {
	.min_wide { display:none !important; }
	.max_wide { display:block !important; }
}
@media all and (max-width:1000px) {
	.min_pc { display:none !important; }
	.max_pc { display:block !important; }
}
@media all and (max-width:770px) {
	.min_ta { display:none !important; }
	.max_ta { display:block !important; }
}
@media all and (max-width:560px) {
	.min_mo { display:none !important; }
	.max_mo { display:block !important; }
}