@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');
:root {
	--gnb_size : 80px;
	--max_width : 1100px;
	--color_main : #38584B;
	--color_point : #d0ff00;
	--color_point2 : #30547a;
	--color_point3: #ffc395;
	--color_point4: #003065;
	--color_point5 : #c4e1ff;
	--color_point6 : #b23121;
	--color_point7 : #f1f8ff;
	--bgColor_main:#fff;
	--bgColor_body : #fefff5;

	--scrollWidth : 20px;
	--scrollBg:#eaeaea;
	--boxshadow:0 0 10px 0 rgba(0,0,0,0.1);
	--boxshadow2:0 0 5px 0 rgba(0,0,0,0.1);
	--font_size:18px;

	--border_main : 1px solid rgba(0,0,0,.1);
	--border_2 : 1px solid rgba(0,0,0,.3);
	
	--tbl_border_1 : 1px solid rgba(0,0,0,.5);
	--tbl_border_2 : 1px solid rgba(0,0,0,.15);
	--tbl_border_3 : 1px solid rgba(0,0,0,.1);
}
@media screen and (max-width:1024px){
	:root {
	--gnb_size : 70px;
	--max_width : 100%;
	}
}
@media screen and (max-width:768px){
	:root {
	--gnb_size : 40px;
	--max_width : 100%;
	--font_size:16px;
	}
}

body::-webkit-scrollbar { width: calc(var(--scrollWidth) - 8px); height: calc(var(--scrollWidth) - 8px); }
body::-webkit-scrollbar-track { background: var(--scrollBg); border-radius: 0; }
body::-webkit-scrollbar-thumb { background: #38584B; border-radius:var(--scrollWidth); border:3px solid var(--scrollBg); }


body {  line-height:1.4;margin:0; padding:0; border:0; font-size:14px; word-break: keep-all; }
body * {box-sizing:border-box;  }
ul, li, dl, dt, dd, ol, input, select, textarea, div, p, span, table, th, td, form, i, a {list-style:none; margin:0; padding:0; border:0;}
a, button { cursor:pointer;  text-decoration:none; color:var(--color_main) }

.ui-tooltip, 
.ui-tooltip-arrow { background-color: var(--color_main) !important;  }
.ui-tooltip {
	word-break:keep-all;
	white-space:nowrap;
	padding: 10px !important; border-radius: 6px !important;
	font-size:12px !important; color:var(--color_point) !important;
	max-width:400px !important; word-break: break-all !important; font-weight:400 !important; font-family:sans-serif !important; margin-bottom:0 !important;
	border:var(--border_main) !important;
	box-shadow:var(--boxshadow2) !important; 
}
.ui-tooltip span {color: var(--oday_mainColor) !important; font-size:11px; font-weight:700} 
.ui-tooltip i { opacity:1; }
.ui-tooltip-arrow { position: absolute;  width: 10px; height: 10px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.ui-tooltip-arrow.bottom { left:calc(50% - 5px); bottom:-6px; border-right:var(--border_main);  border-bottom:var(--border_main);}
.ui-tooltip-arrow.top { left:calc(50% - 5px); top:-6px; border-left:var(--border_main);  border-top:var(--border_main);}
.ui-tooltip-arrow.left {right:-6px; top:calc(50% - 5px); border-top:var(--border_main);  border-right:var(--border_main);}
.ui-tooltip-arrow.right {left:-6px; top:calc(50% - 5px); border-left:var(--border_main);  border-bottom:var(--border_main);}

@media screen and (max-width: 768px){
	.btnBox ul li { padding: 10px; }
	.ui-tooltip { display:none !important; opacity:0; visibility: hidden;}
	input[type="submit"], button.obtn, input.obtn, .obtn { padding:0 calc(var(--oday_iptHeight) * .3); 	}
	.obtn i,
	.obtn span { margin-right:5px; vertical-align:middle; font-size:1.2em }
}


.main_bg { position:absolute; width:100%; height:90vh; background-image: url('/_assets/img/bg1.jpg'); background-size: cover; background-position: bottom; background-repeat: no-repeat;}
.insideBg {position:absolute; top: 0px; left: 0; width: 100%;  margin: 0 0 50px 0; height: 70vh;     z-index: -1;
--gr_size: 200px; 
}
.parallax-mirror:before { content:""; position:absolute; width:100%; height:200px; top:0; background: linear-gradient(180deg,rgba(0,0,0,.8), transparent); z-index: 1; }
.parallax-mirror:after { content:""; position:absolute; width:100%; height:200px; bottom:0; background: linear-gradient(0deg,white, transparent); z-index: 1; }

.head { display:flex; justify-content: space-between; align-items: center; padding:20px; }
.head .company img { width:30px; }
.head .region { display:flex; }
/*
.head .region a { display:flex; flex-direction: column; align-items: center; font-size:8px; color:#fff; width:20px; opacity:.5; transform:scale(80%); transition:0.3s ease}
.head .region a:hover {transform:scale(100%); }
.head .region a + a { margin-left:10px}
.head .region img { width:100%; border-radius:100%; margin-bottom:5px}
*/

.main { margin:0 auto; width:1400px; max-width:100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; }

.main .title_box { display:flex; flex-direction: column; align-items: center; text-align:center; color:#fff; width:80%; max-width:800px; }
.main .title_box .s_title_img { width:80%; max-width:500px;  padding:50px 0 0 0}
.main .title_box h2 { font-size:1.8em; margin:30px 0 20px 0}
.main .title_box p { font-size:1.2em; font-weight:400; line-height:1.6}

.search_box { display:flex; justify-content: center; align-items: center; padding:30px 0 100px 0;}
.search_box .searchreset { display:flex; justify-content: center; align-items: center;  height:60px; width:60px; font-size:20px; margin-left:auto;}
.search_box span { display:flex; justify-content: space-between; align-items: center; border:var(--border_main); border-radius:50px; height:60px; padding:5px 5px 5px 30px; background-color:rgba(255,255,255,.5); transition:0.3s ease; width:80%;  max-width:500px; }
.search_box span:has(input:focus) {border:1px solid var(--color_main); background-color:rgba(255,255,255,1);}
.search_box input { border:none; font-size:1.2em; color:var(--color_main);  font-weight:700; width: 100%; 
text-shadow:unset;
line-height:unset;
background-image:unset;
background-color:transparent;
line-height: 1;
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none;
height:100%; padding-inline: 0;
}
input:-internal-autofill-selected,
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-transition: background-color 5000s ease-in-out 0s !important;
    box-shadow: -10px -10px 0px 1000px transparent inset !important;
	-webkit-box-shadow: -10px -10px 0px 1000px transparent inset !important;
    -webkit-text-fill-color: var(--color_main) !important;
	border: none !important;

	line-height: 1 !important;
}
.search_box :where(input:-internal-autofill-selected,
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active) {
	font-size:20px !important;
}

:where(input, select):focus { outline: none; }
.search_box span button { display:flex; justify-content: center; align-items: center; height:100%;  border:var(--border_main); border-radius:50px; background-color:var(--color_main); color:#fff; line-height:1; padding:0 30px;  transition:0.3s ease; white-space:nowrap }
.search_box span button:hover { background-color:#12211b; color: var(--color_point);}

.riman_list { position:relative;  display:flex; justify-content: center; flex-wrap: wrap; width:90%; max-width:1500px; margin:0 auto;
--img_width: 250px;
--img_height : 300px;
}

.category { display:flex; justify-content: center; align-items: center; height:100px}
.category a { display:flex; justify-content: center; align-items: center; border:2px solid var(--color_main); color:var(--color_main); height:50px; border-radius:50px; line-height:1; padding:0 30px;  transition:0.3s ease;  opacity:.5; background-color:rgba(255,255,255,.5)  }
.category a + a { margin-left:5px; }
.category a:hover  { opacity:1; font-weight:700; background-color:var(--color_main); color:#fff}
.category a.active { opacity:1; font-weight:700; background-color:var(--color_main); color:var(--color_point) }
.category em {  text-decoration:none; font-style: ; margin-left:5px; font-weight:300; font-size:.9em}
.riman_list > li { width:var(--img_width); background: linear-gradient(0deg, white, #999); border-radius:10px; overflow:hidden; margin:10px 5px; box-shadow:0px 0px 10px 0px rgb(56 88 75 / 20%);  }
.riman_list > li .show_img { position:relative; width:100%; height:var(--img_height); overflow:hidden; display:flex; justify-content: center; align-items: center;}
.riman_list > li .show_img .t_category { position:absolute; top:0; font-size:11px; font-weight:400; background-color:var(--color_main); color:var(--color_point); padding:5px 10px; z-index:10; border-radius:0 0 6px 6px}
.riman_list > li .show_img .main_visu { width:100%;   transition:0.3s ease}
.riman_list > li .show_img .main_visu.no {display:flex; justify-content: center; align-items: center; }
.riman_list > li .show_img .main_visu.no i { font-size:50px; opacity:.2}
.riman_list > li .show_img .down_link_box { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content: center; flex-wrap: wrap; align-content: center; padding:0 20px; background-color:rgba(0,0,0,.8); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition:0.3s ease }
.riman_list > li .show_img .down_link_box a { font-size:12px; color:#fff; display:flex; flex-direction: column; align-items: center; margin:5px; transform:scale(90%); opacity: .7; transition:0.3s ease}
.riman_list > li .show_img .down_link_box a:hover {transform:scale(100%); opacity: 1;}
.riman_list > li .show_img .down_link_box a img { width:50px;  border-radius:100%; margin-bottom:5px; }
.riman_list > li:hover .show_img .down_link_box { opacity: 1; visibility: visible; }
.riman_list > li:hover .show_img .main_visu { transform:scale(102%);}
.riman_list > li .down_title { display:flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; height:90px; font-weight:500; background-color:#fff;  color:var(--color_main);}

.riman_list > li .down_title span { font-size:1.2em; font-weight:600;
	color:var(--color_main);
	line-height:1.2;
	letter-spacing:0px;
	word-spacing:1px;
	word-break: keep-all;
	padding:0 20px;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}
.footer { padding:100px 0}
.footer li { display:flex; justify-content: center; }
.footer img { height:16px;}

.pagination li { display:flex; justify-content: center; align-items: center; margin:40px 0}
.pagination :where(a, strong) { width:40px; height:40px;  display:flex; justify-content: center; align-items: center; background-color:#eaeaea; border-radius:100%;  }
.pagination .this { background-color:var(--color_main); color:var(--color_point); }
.pagination a:where(:first-child, :last-child) { background-color:#fff; }
.pagination li > * + * { margin-left:5px;}


.bd-all { width:100%; max-width:1200px; margin:0 auto; font-size:12px; }
.bd-all :where(input[type="text"], select, textarea) { border:none; width:100%;
border:var(--tbl_border_3);
height:30px;
text-shadow:unset;
line-height:unset;
background-image:unset;
background-color:rgba(200,200,200,.1);
line-height: 1;
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none;
padding:0 10px;
}
.bd-all textarea { width:100%; height:100px; padding:10px}
.bd-all select { width:unset; }
.bd-all table { width:100%; border-spacing: 0; border-top:var(--tbl_border_1); border-bottom:var(--tbl_border_1)}
.bd-all table tr > th {width:1%; min-width:100px; white-space:nowrap; text-align:left; font-size:.9em; font-weight:600; color:var(--color_main)}
.bd-all table tr > * { padding:5px 10px; min-height:40px; height:40px; }
.bd-all table tr > * label + input { margin-left:20px;} 
.bd-all table tr > * input { margin-right:2px; }
.bd-all table tr + tr > * { border-top:var(--tbl_border_2)} 
.bd-all .btnBox2 { display:flex; padding:20px 0 }
.bd-all .formBox { display:flex; justify-content: space-between; padding:20px 0 }
.bd-all :where(.formBox, .btnBox2) :where(a, button) { display:flex;  align-items: center; justify-content: center; width: fit-content; border-radius:0; height:40px; border:var(--tbl_border_3); padding:0 20px; transition:.3s; }
.bd-all :where(.formBox, .btnBox2) :where(a, button):hover { background-color:var(--color_main); color:#fff; }
.bd-all .formBox li { display:flex; }
.bd-all .formBox li > * + * { margin-left:10px; }
.bd-all .formBox li div { display:flex; }
.bd-all .formBox li div input { margin-right:2px;}
.bd-all .btnBox2 .m {margin-left:auto; margin-right:10px;}
.bd-all .btnBox2.right { justify-content: flex-end;  padding:0}
.bd-all .btnBox2.center { justify-content: center;}
.bd-all .require { margin:30px 0 10px 0; display:flex; align-items: center; justify-content: flex-end; }
.bd-all .bx.bx-health { color:#f00}

.bd-all .read_header { padding-top:50px}
.bd-all .read_header .r_category { display:block; font-size:12px; font-weight:400}
.bd-all .write_header table { border-bottom:var(--tbl_border_2);}
.exOut { margin-top:10px;}
.bd-all .exForm table { border-top:none;}
.bd-all .exForm table tr:nth-child(n+6) > *,
.bd-all .exOut table tr:nth-child(n+7) > * { background-color:#f9f9f9; } 
.bd-all .exForm table tr:nth-child(6) > *,
.bd-all .exForm table tr:nth-child(12) > *,
.bd-all .exOut table tr:nth-child(7) > *,
.bd-all .exOut table tr:nth-child(13) > *,
.title_top_border > * {border-top:var(--tbl_border_1) !important}
.xe_content, .rhymix_content { padding:50px 0; margin-top:20px; border-top:var(--tbl_border_2); border-bottom:var(--tbl_border_2); width:100%; }
.xe_content img, .rhymix_content img { width:50%; max-width:300px}

.btnBox { display:flex; align-items: center; justify-content: center; }
.btnBox > * { display:flex; align-items: center; justify-content: center; border:var(--border_main); box-shadow:var(--boxshadow2); border-radius:6px; height:40px; padding:0 10px; background-color: var(--color_main); transition:.3s; }
.btnBox > *:hover {background-color:#1f3029}
.btnBox a {color: var(--color_point);}
.btnBox > * + * { margin-left:10px; }
.btnBox input,
.btnBox a i { margin-right:5px;}

.gototop_wrap { padding:0 20px; display:flex; justify-content: flex-end; }
.gototop {display:flex; align-items: center; justify-content: center; width:50px; height:50px; font-size:20px; background-color: var(--color_main);color:#fff;  }

@media screen and (max-width:768px){
	.parallax-mirror:before,
	.parallax-mirror:after { height:10vw}
	.insideBg { height:40vh}
	.head { padding:10px}
	.head .company img { width:20px;}
	.main .title_box { width:70%;}
	.main .title_box .s_title_img { width:50vw; padding:10vw 0 0 0}
	.main .title_box h2 { font-size:1.3em; margin:10px 0 10px 0}
	.main .title_box p { font-size:.9em; font-weight:300; line-height:1.3}
	.search_box { padding-bottom:30px;}
	.search_box span {height: 50px;}
	.search_box span button { padding:0 20px;}
	.category a { height:35px; padding: 0 15px;}
	.riman_list { width:100%;
	--img_width: 48vw;
	--img_height : 60vw;
	}
	.riman_list > li { margin:5px 2px;}
	.riman_list > li .show_img .down_link_ box {
    opacity: 1;
    visibility: visible;	
	}
	.riman_list > li .show_img .down_link_box a { margin:5px 2px}
	.riman_list > li .show_img .down_link_box a img { width:11vw}
	.riman_list > li .show_img .down_link_box a span { width:11vw; overflow:hidden; text-align:center; font-size:8px}
}