@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css');
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
}
/* font-family: 'Pretendard Variable'; */
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Thin.woff2') format('woff');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraLight.woff2') format('woff');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Light.woff2') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.woff2') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Medium.woff2') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-SemiBold.woff2') format('woff');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.woff2') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Black.woff2') format('woff');
    font-weight: 900;
    font-display: swap;
}


body {
	font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    margin: 0 !important;
}

html {scroll-behavior: smooth;}

input,
select {
    font-family: 'Pretendard', sans-serif;
}

p {
    margin: 0px 0px 0px 0px;
    line-height: 1;
}

.inner{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}
.inner2{
    width: 100%;
    margin: 0 auto;
}
.inner3 {
        width: 100%;
        max-width: 1482px;
        margin: 0 auto;
    }
.pc_hide {
    display: none! important;
}

.sp5 {
    height: 5px;
    clear: both;
}

.sp10 {
    height: 10px;
    clear: both;
}

.sp12 {
    height: 12px;
    clear: both;
}

.sp15 {
    height: 15px;
    clear: both;
}

.sp20 {
    height: 20px;
    clear: both;
}

.sp25 {
    height: 25px;
    clear: both;
}

.sp30 {
    height: 30px;
    clear: both;
}

.sp35 {
    height: 35px;
    clear: both;
}

.sp40 {
    height: 40px;
    clear: both;
}

.sp45 {
    height: 45px;
    clear: both;
}

.sp50 {
    height: 50px;
    clear: both;
}

.sp55 {
    height: 55px;
    clear: both;
}

.sp60 {
    height: 60px;
    clear: both;
}

.sp65 {
    height: 65px;
    clear: both;
}

.sp70 {
    height: 70px;
    clear: both;
}

.sp75 {
    height: 75px;
    clear: both;
}

.sp80 {
    height: 80px;
    clear: both;
}

.sp90 {
    height: 90px;
    clear: both;
}

.sp100 {
    height: 100px;
    clear: both;
}

.sp110 {
    height: 110px;
    clear: both;
}

.sp120 {
    height: 120px;
    clear: both;
}

.sp130 {
    height: 130px;
    clear: both;
}

.sp140 {
    height: 140px;
    clear: both;
}

.sp150 {
    height: 150px;
    clear: both;
}

.sp160 {
    height: 160px;
    clear: both;
}

.sp165 {
    height: 165px;
    clear: both;
}

.sp200 {
    height: 200px;
    clear: both;
}

.t_bold {
    font-weight: bold
}

.pc_hider {
    display: none;
}

/* 기본 상태는 light */
.l_mode { display: inline; }
.d_mode { display: none; }

/* dark 모드일 때 전환 */
body[data-theme="dark"] .l_mode { display: none; }
body[data-theme="dark"] .d_mode { display: inline; }

#wrap{
    max-width: 1920px;
    margin: auto;
}
/* 공통 input 시작 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/select.png);
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size: 8px auto;
}

input,
select {
    appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border: none;
    -webkit-border: none;
    -moz-border: none;
    -webkit-padding: 0 10px;
    -moz-padding: 0 10px;
}

input[type='checkbox'] {
    -webkit-appearance: checkbox
}

input[type='radio'] {
    -webkit-appearance: radio
}

input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
a {
    text-decoration: none;
    color: inherit !important;
}
select::-ms-expand {
    display: none;
    /*for IE10, 11*/
}
/* 공통 input 끝 */

/* #header */
    #header {
        height: 100px;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 999;
        width: 100%;
        display: flex;
        align-items: end;
        padding-bottom: 45px;
    }

body[data-theme="light"] #header{
  background-color: #fff;
}
body[data-theme="dark"] #header{
  background-color: #121212;
}


    #header .inner {
       max-width: 1482px;
    }


.scrolled{
  background:rgb(255,255,255);
}

#header .inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header .inner .logo{
  position: relative;
  z-index: 99;
}
body[data-theme="light"] #header .inner .logo .logo_dark{
  display: none;
}
body[data-theme="light"] #header .inner .logo .logo_light{
  display: block;
}
body[data-theme="dark"] #header .inner .logo .logo_dark{
  display: block;
}
body[data-theme="dark"] #header .inner .logo .logo_light{
  display: none;
}
#header .inner .logo a{
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header .inner .logo a .logo_svg {
  height: 20px;
}
#header .inner .logo a .logoname{
  font-size: 32px;
  font-weight: 400;
  color: #ffa800;
}
#header .inner .menuArea{
  display: flex;
  align-items: center;
  margin-left: auto;
  position: absolute;
  left: 50%;
  width: fit-content;
  transform: translateX(-50%);
}
#header .inner .menuArea .menusc{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 130px;
  justify-content: center;
}
#header .inner .menuArea .menusc .mList {
  width: fit-content;
  margin-right: 25px;
  padding: 0 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
}
.menuArea{
  width: 100%;
}

/* 국가 선택 */
.lang_select {
  position: relative;
  cursor: pointer;

}

.bright_mode {
  width: 40px;
  height: 40px;
overflow: hidden;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
}
.bright_mode img{
width: 100%;
}
.lang_select .img_style {
  width: 40px;
  height: 40px;
overflow: hidden;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lang_select .img_style img{
width: 100%;
}

.lang_select .lang_select_list {
background: #ffffff;
position: absolute;
top: 68px;
border-top: 3px solid #007AFF;
z-index: 9999;
right: -15px;
padding: 10px 20px;
display: none;
box-shadow: 0 0 5px 0 #d2d2d2;
}

.lang_select .lang_select_list::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 3px solid #007AFF;
  border-left: 3px solid #007AFF;
  background-color: #fff;
  rotate: 45deg;
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translate(-50%);
}
body[data-theme="dark"] .lang_select .lang_select_list::before {
  background-color: #222;
}
body[data-theme="dark"] .lang_select .lang_select_list {
  background-color: #222;
  box-shadow: 0 0 5px 0px #333;
}
.lang_select .lang_select_list p {
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 2px;
justify-content: center;
}

.lang_select .lang_select_list p:last-of-type {
margin-bottom: 0px;
}

.lang_select .lang_select_list p img {
width: 30px;
margin-right: 10px;
border: 1px #d4d4d4 solid;
}

/*language*/
.top_section {
	display: none;
}

.language_btn {
	position: absolute;
	top: 14px;
	right: 20px;
}

.language_btn01 {
	border: 1px #e4e4e4 solid;
	width: 110px;
	height: 35px;
	color: #646464;
	line-height: 35px;
	cursor: pointer;
}

.language_img {
	width: 20px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
	margin-top: 13px;
}

.bottom_img {
	width: 10px;
	float: right;
	margin-top: 15px;
	margin-right: 10px;
}

.language_btn01:hover .dep_01 {
	display: block;
}

.dep_01 {
	display: none;
	position: absolute;
	top: 33px;
	left: 0px;
	width: 100px;
	z-index: 999999;
	width: 110px;
	border: 1px #e4e4e4 solid;
}

.dep_02 li {
	background: #ffffff;
}

.dep_02 li a {
	color: #333333;
}

.login_lang {
	position: absolute;
	right: 0px;
	top: 0px;
}


/**/

/* //국가 선택 */
#header .inner{
  position: relative;
  border-bottom: none; /* 기본은 없음 */

}

/* ✅ border 표시용 클래스 */
#header .inner.active::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #e2e2e2;
  bottom: 1px;
  position: absolute;
  left: 0;
  z-index: -1;
}
body[data-theme="dark"] #header .inner.active::after{
  background-color: #555;
}
.menu_background{
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 350px;
  z-index: -1;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 0 15px 0 #e2e2e2;
  display: none;
}
body[data-theme="dark"] .menu_background {
  background-color: #222;
  box-shadow: unset;
}
#header .inner .menuArea .menusc {
  margin: 0 auto;
}
#header .inner .menuArea .menusc .mList {
  width: fit-content;
  padding: 0;
  display: block;
  margin-right: 0;
}
#header .inner .menuArea .menusc .mList a.list_title{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: .3s;
  font-weight: 500;
  opacity: .8;
}

#header .inner .menuArea .menusc .mList a.list_title:hover{
  color: #aec6ff;
}
#header .inner .menuArea .menusc .mList a:hover{
  font-weight: 700;
  opacity: 1;
}
.scrolled .rightArea .active{
  color: #1e1e1e !important;
}
.logo_scrolled {
    display: none; /* 기본적으로 보이지 않음 */
}

.remote_control {
  width: 83px;
  height: 724px;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  position: fixed;
  top: 5px;
  left: calc(50% - 741px - 103px);
  background-color: #f7f7f7;
  z-index: 9999;
}
body[data-theme="dark"] .remote_control{
  border: 1px solid #333;
  background-color: #121212;
}
.remote_control .remote_inner{
  width: 100%;
  padding: 15px;
  gap: 15px;
  display: flex;
  flex-direction: column;
  height: 700px;
  align-items: center;
}
.remote_control .remote_inner .logobox{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0 10px;
}
.remote_control .remote_inner .logobox img{
  width: 53px;
}
.remote_control .remote_inner a {
  display: block;
}
.remote_control .remote_inner a .iconbox{
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.remote_control .remote_inner a .iconbox img{
  height: 100%;
}
.remote_control .remote_inner .TS .iconbox {
  font-size: 20px;
  font-weight: 900;
  color: #333;
}
body[data-theme="dark"] .remote_control .remote_inner .TS .iconbox{
  color: #fff;
}
.remote_control .remote_inner .Real.on .iconbox{
  position: relative;
  border-radius: 50px;
  overflow: hidden;
}
.remote_control .remote_inner a p{
  width: 100%;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
  line-height: 130%;
}
.remote_control .remote_inner .l_mode_on,
.d_mode_on{
  display: none;
}
.remote_control .remote_inner .on .l_mode_on{
  display: block;
}
.remote_control .remote_inner .on .l_mode{
  display: none;
}
.remote_control .remote_inner .logout{
  margin-top: auto;
}
body[data-theme="dark"] .remote_control .remote_inner .on .d_mode{
  display: none;
}
body[data-theme="dark"] .remote_control .remote_inner .on .l_mode_on{
  display: none;
}
body[data-theme="dark"] .remote_control .remote_inner .on .d_mode_on{
  display: block;
}
.remote_control .remote_inner .logout{
  margin-top: auto;
}

.index_Area_right.open {
  left: calc(50% - 741px - 103px);
  display:block;
}
/* 기본 상태 (라이트 모드) */
.remote_control {
  border: 1px solid #e2e2e2;
}


.quick_menu {}

/* 다크 모드 */
body[data-theme="dark"] .remote_control {
  border: 1px solid #333;
  background-color: #222;
}

/* 열릴 때 border 제거 (테마 상관없이 공통) */
.remote_control.noborder {
  border: 1px transparent solid;
        background-color: inherit;
}
.remote_control.noborder .iconbox{
  opacity: .5;
}
.remote_control.noborder .logout .iconbox,
.remote_control.noborder .remote_login{
  opacity: 1;
}
.index_Area_right {
  width: 100%;
  max-width: 450px;
  position: fixed;
  top: 5px;
  left: 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 725px;
  background: #f7f7f7;
  border-radius: 40px;
  z-index: 999;
  border: 1px solid #e2e2e2;
  padding-left: 95px;
  transition: left 0.4s ease;
  display:none;
}

.index_Area_right_IN {
  left: calc(50% - 741px - 103px);
}
body[data-theme="dark"] .index_Area_right{
  background-color: #222;
  border: 1px solid #333;
}
.index_Area_right .login_tab {
  width: 400px;
  padding: 7px 8px;
  border-radius: 10px;
  background: #282445;
  margin: 0px auto 30px;
}
.index_Area_right .login_tab ul{
  display:flex;
}
.index_Area_right .login_tab ul li {
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}
.index_Area_right .login_tab ul li.on {
  background: #6039b8;
  border-radius: 10px;
  color: #fff;
}
.index_Area_right .inputForm {
  width:100%; 
  padding-right: 30px;
}
.index_Area_right .wordmark_img {
        margin-bottom: 40px;
        margin-top: 32px;
        position: relative;
        height: 12px;
    }
.index_Area_right .wordmark_img img {
        height: 20px;
        position: absolute;
        top: -3px;
        left: 7px;
    }
.index_Area_right .inputForm .tit {
font-size: 40px;
font-weight: 700;
text-align:center;
position: relative;
padding-top: 30%;
color: #388ADE;

}
.index_Area_right .inputForm .tit span{
  color: #CF3685;
}
.index_Area_right .inputForm .tit2 {
  font-size: 16px;
  position: relative;
  padding-top: 10px;
  padding-bottom: 20px;
  font-weight: 400;
  text-align: center;
}
.index_Area_right .inputForm .tit2 a{
font-size: 18px;
font-weight: 400;
position: relative;
padding-top: 40px;
padding-bottom: 60px;
}
.index_Area_right .inputForm .login-input-Area {
overflow: hidden;
width: 100%;
margin: 30px auto 0px;
display: flex;
flex-direction: column;
gap: 5px;
}
.index_Area_right .inputForm .login-input-Area label {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  margin-top: 5px;
  margin-left: 5px;
  width: fit-content;
  margin-left: auto;
}
.index_Area_right .inputForm .login-input-Area label span{
  font-size: 13px;
}
.index_Area_right .inputForm .login-input-Area .form {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  border: 1px solid #e2e2e2;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 50px;
  background-color: #fff;
  align-items: center;
}
body[data-theme="dark"] .index_Area_right .inputForm .login-input-Area .form{
  background-color: #333;
  border: 1px solid #555;
}
.index_Area_right .inputForm .login-input-Area .form .hide_on {
  position: absolute;
  right: 18px;
  width: 24px;
  cursor: pointer;
}
.index_Area_right .inputForm .login-input-Area .form .input_tit {
font-size: 12px;
color: #2c2f40;
margin-bottom: 7px;
}
.index_Area_right .inputForm .login-input-Area .form .input01 {
  font-size: 16px;
  width: calc(100% - 70px);
  background: transparent;
  font-weight: 300;
  margin-left: 20px;
}
body[data-theme="dark"] .index_Area_right .inputForm .login-input-Area .form .input01 {
  color: #fff;
}
.index_Area_right .inputForm .login-input-Area .form .icon {
height: 20px;
}
body[data-theme="dark"] .index_Area_right .inputForm .login-input-Area .form .icon {
  height: 20px;
  filter: brightness(0) invert(1);
  }
.btnArea .clickBt {
width: 100%;
height: 50px;
border-radius: 15px;
cursor: pointer;
font-size: 18px;
margin-bottom: 10px;
color: #fff;
}
.login .btnArea {
display: block;
margin-top: 30px;
}
.login .btnArea .clickBt {
width: 100%;
height: 53px;
border-radius: 7px;
cursor: pointer;
font-size: 17px;
margin-bottom: 10px;
}
.find_flex{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.find_flex .index_p01::after{
  content: '';
  width: 2px;
  height: 10px;
  background-color: #808080;
  position: absolute;
  right: -15px;
  top: 55%;
  transform: translateY(-50%);
}
.index_p01{
  position: relative;
}
.index_p{
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: .3s;
  font-weight: 400;
}
.index_p01:hover{
  color: #336aea;
  font-weight: 700;
}
.gradient01 {
background: #336aea !important;
transition: .3s;
}
.gradient01:hover {
background: #1c4a85 !important;
}

.gradient02 {
background: #2d2f40;
}

.gradient03 {
  border: 1px solid #d2d2d2;
  transition: .3s;
}
body[data-theme="dark"] .gradient03 {
  border-color: #555;
}
.gradient03:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] .gradient03:hover {
  background-color: #333;
}
.inputForm .btnArea {
  margin-top: 20px;
}
.profile_area {
  width: 100%;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.profile_area .user_box{
  gap: 10px;
  margin-bottom: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #e2e2e2;
}
body[data-theme="dark"] .profile_area .user_box {
  background-color: #333;
  box-shadow: none;
  border-color: #555;
}
.profile_area .user_box .user_icon{
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
}
.profile_area .user_box .user_icon img{
  width: 100%;
  float: left;
}
.profile_area .right_box{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.profile_area .user_box .user_name{
  font-size: 20px;
  font-weight: 700;
}
.profile_area .user_box .button{
  font-size: 14px;
  font-weight: 400;
  border-radius: 50px;
  display: flex;
  gap: 10px;
  color: #808080 !important;
}
.profile_area .user_box .mypage_button{
  font-size: 14px;
  font-weight: 400;
  color: #808080;
}
.profile_area .api_button{
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  margin-bottom: 15px;
}
body[data-theme="dark"] .profile_area .api_button {
  background-color: #333;
  border-color: #555;
}
.profile_area .api_button p{
  font-size: 14px;
  font-weight: 500;
}
.profile_area .trans_box{
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
body[data-theme="dark"] .profile_area .trans_box {
  box-shadow: none;
}
.profile_area .trans_box .title_flex{
  display: flex;
  align-items: start;
  gap: 10px;
  flex-direction: column;
}
.profile_area .trans_box .title_flex .icon{
  width: 20px;
  height: 20px;
  border-radius: 100%;
  overflow: hidden;
}
.profile_area .trans_box .title_flex .icon img{
  width: 100%;
}
.profile_area .trans_box .title_flex p{
  font-size: 16px;
  font-weight: 400;
}
.profile_area .trans_box .amount_flex{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 4px 40px;
}
body[data-theme="dark"] .profile_area .trans_box .amount_flex{
  background-color: #333;
  border-color: #555;
}
.profile_area .trans_box .amount_flex .amount{
  font-size: 14px;
  font-weight: 400;
}
.profile_area .trans_box .amount_flex .per{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.profile_area .trans_box .amount_flex .per .imgbox{
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile_area .trans_box .amount_flex .per .imgbox img{
  width: 100%;
}
body[data-theme="dark"] .profile_area .trans_box .amount_flex .per .imgbox img{
  filter: brightness(0) invert(1);
}
.profile_area .trans_box .amount_flex .per p{
  font-size: 12px;
  font-weight: 300;
}
.profile_area .trans_box .date{
  font-size: 12px !important;
  font-weight: 300 !important;
}
.profile_area .profile_list{
  border-radius: 10px;
  margin-bottom: 10px;
}
.profile_area .profile_list .list_title{
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.profile_area .profile_list ul{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.profile_area .profile_list ul .sub_list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
.profile_area .profile_list ul .sub_list .title{
  font-size: 14px;
  font-weight: 400;
  color: #808080;
}
.profile_area .profile_list ul .sub_list .count{
  font-size: 14px;
  font-weight: 400;
  color: #808080;
}
.profile_area .amount_list2{
  margin-bottom: 28px;
}
.profile_area .amount_list{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  background-color: #fff;
  border-radius: 10px;
  /* color: #fff; */
  border: 1px solid #e2e2e2;
  gap: 5px;
}
body[data-theme="dark"] .profile_area .amount_list {
  background-color: #333;
  box-shadow: none;
  border-color: #555;
}
.profile_area .amount_list1{
  margin-bottom: 15px;
}
.profile_area .amount_list h3{
  font-size: 14px;
  font-weight: 400;
}
.profile_area .amount_list p{
  font-size: 14px;
  font-weight: 400;
}
/* #header */

/* #footer */
#footer{
  padding: 50px 0;
  background-color: #f7f7f7;
}
body[data-theme="dark"] #footer{
  padding: 50px 0;
  background-color: #333;
}
#footer .inner{
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  gap: 50px;
}
#footer .inner .left_area{
  display: flex;
  max-width: 1300px;
  margin: 0 auto;
  gap: 20px;
  flex-direction: column;
  width: calc(50% - 50px);
}
#footer .inner .right_area{
  width: calc(50% - 50px);
  display: flex;
}
#footer .inner .right_area ul{
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: auto;
  margin-left: auto;
}
#footer .inner .right_area ul li a{
  height: 40px;
  opacity: .5;
  display: flex;
  align-items: center;
  justify-content: center;
}
#footer .inner .right_area ul li a img{
  height: 100%;
}
body[data-theme="dark"] #footer .inner .right_area ul li a img{
  filter: brightness(0) invert(1);
}
#footer .inner .footer_a .f_logo{
  height:55px;
}
#footer .inner .footer_a .tit{
  font-size:16px;
  color:#8c8f94;
  font-weight:300;
  margin-top:30px;
  margin-bottom:20px;
}
#footer .inner .footer_a ul {
 display:flex;
 flex-direction:column;
 gap:20px;
 margin-top:40px;
}
#footer .inner .footer_a ul li a{
	font-size: 16px;
    color: #8c8f94 !important;
    font-weight: 300;
	transition: .3s;
	position:relative;
}
#footer .inner .footer_a ul li a:hover{
	color: rgb(255, 255, 255, 1);
}
#footer .inner .footer_a ul li a:hover:after {
        content: '';
        width: 0%;
        height: 1px;
        background-color: #fff;
        position: absolute;
        bottom: -5px;
        left: 0;
        display: block;
        animation-name: underbar;
        animation-duration: .5s;
        animation-duration: leaner;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }
#footer .inner .footer_b{
	overflow:hidden;
}
#footer .inner .footer_b .tit {
        font-size: 22px;
        font-weight: 700;
        padding-bottom: 20px;
        border-bottom: 2px solid #272534;
        position: relative;
        color: #fff;
    }
#footer .inner .footer_b .tit:after {
        content: '';
        width: 50px;
        height: 2px;
        background: #336aea;
        position: absolute;
        bottom: -2px;
        left: 0px;
}
#footer .inner .footer_b .site_menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#footer .inner .footer_b .site_menu .main_menu{
  gap: 30px;
}
#footer .inner .footer_b .site_menu ul {
        width:100%;
        display: flex;
        align-items: center;
        gap: 20px;
    }
#footer .inner .footer_c .site_menu ul li{
  color: #808080;
    }
#footer .inner .footer_b .site_menu ul li a {
        font-size:16px;
    font-weight: 500;
    transition: .3s;
    position: relative;
    }
    #footer .inner .footer_b .site_menu ul li a:hover:after{
      content: '';
      width: 0%;
      height: 1px;
      background-color: #fff;
      position: absolute;
      bottom: -5px;
      left: 0;
      display: block;
  /* 애니메이션 이름 */
  animation-name: underbar;
  animation-duration: .5s;
  animation-duration: leaner;
  animation-direction:alternate;
  animation-fill-mode: forwards;
}

/* 키프레임 이름 = 애니메이션 이름 */
@-webkit-keyframes underbar {
  0% {
    left:0;
    width: 0;
  }
  100% {
    left:0;
    width: 100%;
  }
}
    #footer .inner .footer_b .site_menu ul li a:hover{
      color: #fff;
    }
#footer .inner .footer_b .site_menu ul li{
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
}
#footer .inner .footer_b ul li img{
  width: 16px;
  margin-right: 10px;
  filter: brightness(0);
  opacity: .5;
}
body[data-theme="dark"] #footer .inner .footer_b ul li img{
  filter: brightness(0) invert(1);
}
#footer .coperight{
  font-size: 14px;
  color: #808080;
  font-weight: 500;
  margin-top: 40px;
    }
#footer .site_map {
  margin-left: auto;
  width: 30%;
  max-width: 410px;
}
#footer .inner .select-style{
  max-width: 300px;
  position: relative;
  display: inline-block;
}
#footer .inner .site_map .select-style .select-button {
  cursor: pointer;
  background-color: inherit;
  border: 1px solid rgb(183, 183, 183);
  font-size: 14px;
  border-radius: 10px;
  font-weight: 500;
  width: 300px;
  text-align: left;
  color: rgb(183, 183, 183);
  height: 50px;
  padding-left: 20px;
}
#footer .inner .site_map .select-style select {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
}
#footer .inner .site_map .select-list-scroll {
  width: 100%;
  position: absolute;
  bottom: 102%;
  left: 0px;
  z-index: 80;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  display: none;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#footer .inner .site_map .select-style.toggle .select-list-scroll {
  display: block;
}
#footer .inner .site_map .list-item-button {
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-size: 16px;
  color: #a3a3a3;
}
#footer .inner .site_map .list-item-button a {
  font-size: 16px;
  color: #a3a3a3;
  width: 100%;
  display: block;
  padding: 10px 20px;
}
/* //#footer */

	/*top css*/

#header .rightArea  {
	display: flex;
	align-items: Center;
	margin-left: auto;
	flex-shrink: 0;
  gap: 10px;
  position: absolute;
  right: 0;
	}
  #header .rightArea .office_menu .login_area{ 
    display: flex;
    align-items: center;
    gap: 15px;
  }
#header .office_menu .logoutBt {
	font-size: 16px;
  font-weight: 400;
	}

#header .rightArea .Lang_choice {
	margin-left: 20px;
	}
#header .rightArea .Lang_choice ul {
	display: flex;
	gap: 23px;
	position: relative;
	}
#header .rightArea .Lang_choice ul:after{
	content: '';
	width: 1px;
	position: absolute;
	top: 2px;
	left: 50%;
	height: 10px;
	background: #000;
	transform: translateX(-50%);
	}
#header .rightArea .Lang_choice ul li p {
	color: #000;
	font-size: 14px;
	cursor:pointer;
    }


body[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #222222;
  --accent-color: #007bff;
}

body[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e5e5e5;
  --accent-color: #66aaff;
}


/* 공통 스타일 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 버튼 */
.theme-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  transition: opacity 0.3s;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

button:hover .theme-icon {
  opacity: 0.8;
}
/* main */
/* #visual */
#visual{
  margin-top: 100px;
  margin-bottom: 50px;
}
.main_banner_mySwiper {
  width: 100%;
  height: fit-content;
  overflow: hidden;
  position: relative;
}

.main_banner_mySwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  position: relative;
  padding-top: 37%;
}

.main_banner_mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.main_banner_mySwiper .swiper-pagination {
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.main_banner_mySwiper .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 100%;
  background: #fff;
  opacity: 1;
}
.main_banner_mySwiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #336AEA;
}
/* //#visual */
/* #section01{
  margin-bottom: 50px;
} */
#section01 .inner2{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.main_wrap .area_box{
  width: calc(50% - 10px);
  height: 330px;
  border-radius: 15px;
}
.main_wrap .utubeArea {
  width: 100%;
}
body[data-theme="light"] .main_wrap .area_box {
  background-color: #f5f5f5;
  border: 1px solid #e2e2e2;
}
body[data-theme="dark"] .main_wrap .area_box {
  background-color: #222;
  border: 1px solid #333;
}
.main_wrap .area_box .sec_title{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 30px;
  border-bottom: 1px solid #e2e2e2;
}
body[data-theme="dark"] .main_wrap .area_box .sec_title {
  border-bottom: 1px solid #333;
}
.main_wrap .area_box .sec_title .plus_icon{
  width: 30px;
  height: 30px;
  cursor: pointer;
}
body[data-theme="dark"] .main_wrap .area_box .sec_title .plus_icon{
  filter: brightness(0) invert(1);
}
.main_wrap .area_box .sec_title .plus_icon img{
  width: 100%;
}
.main_wrap .area_box .tr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 5px 20px;
  transition: .3s;
}
.main_wrap .area_box .tbody .tr:hover{
  background-color: #e2e2e2;
}
body[data-theme="dark"] .main_wrap .area_box .tbody .tr:hover{
  background-color: #333;
}
.main_wrap .area_box .thead{
  padding: 5px 0;
  margin-bottom: 10px;
}
.main_wrap .area_box .th{
  font-weight: 500;
  font-size: 16px;
}
.main_wrap .area_box .tbody{
  position: relative;
}
.main_wrap .area_box .tbody .blur-overlay {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  backdrop-filter: blur(5px);
  background: rgba(255,255,255,0.2); /* 반투명 효과 */
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
.main_wrap .area_box .t_scroll{
  overflow: auto;
  height: 200px;
}
.main_wrap .area_box .t_scroll::-webkit-scrollbar {
  display: none;
}

.main_wrap .area_box .tr .td{
  display: flex;
  align-items: center;
  justify-content: center;
}
.main_wrap .area_box .tr .asset{
  width: 20%;
  gap: 15px;
}
.main_wrap .area_box .tr .array{
  width: 20%;
}
.main_wrap .area_box .tr .level{
  width: 20%;
}
.main_wrap .area_box .tr .approach{
  width: 20%;
}
.main_wrap .area_box .tr .price{
  width: 20%;
}
.main_wrap .area_box .tr .simbol{
  width: 30px;
  height: 30px;
}
.main_wrap .area_box .tr .simbol img{
  height: 100%;
}
body[data-theme="dark"] .main_wrap .area_box .tr .simbol.invert img{
  filter: brightness(0) invert(1);
}
#section01 .left_area .tbody .tr .td{
  font-weight: 600;
}
.main_wrap .area_box .tr .asset .coin_name{
  display: flex;
        flex-direction: column;
        align-items: baseline;
        justify-content: center;
        WIDTH: 80PX;
        text-align: left;
}
.main_wrap .area_box .tr .asset .eng{
  font-size: 16px;
  font-weight: 800;
}
.main_wrap .area_box .tr .asset .kr{
  font-size: 12px;
  color: #808080;
  font-weight: 400;
}

.main_wrap .area_box .tr .num{
  width: 10%;
  gap: 15px;
  font-weight: 600;
}
.main_wrap .area_box .tr .title{
  width: 65%;
  font-weight: 600;
}
.main_wrap .area_box .tr .date{
  width: 15%;
}
.main_wrap .area_box .tr .view{
  width: 10%;
}
/* //#section01 */
/* .utubeArea */
.main_wrap .utubeArea{
  margin-bottom: 70px;
  position: relative;
  margin-top: 20px;
}
.main_title{
  font-size: 22px;
  font-weight: 700;
}
.main_wrap .utubeArea .main_title{
  margin-bottom: 20px;
}
.main_wrap .sec02_mySwiper {
  width: 100%;
  height: fit-content;
  overflow: hidden;
}
.main_wrap .sec02_mySwiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  height: fit-content;
  overflow: hidden;
}

.main_wrap .sec02_mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main_wrap .sec02_mySwiper .swiper-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.main_wrap .sec02_mySwiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
  width: 20px !important;
  border-radius: 50px !important;
}
.main_wrap .sec02_mySwiper .swiper-pagination-bullet {
  transition: .3s;
}
.swiper-button-prev, .swiper-button-next {
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, .3);
  width: 50px !important;
  height: 50px !important;
  background-size: 15px !important;
  margin-top: -10px !important;
  position: relative;
  background-image: none !important;
}
body[data-theme="dark"] .swiper-button-prev, 
body[data-theme="dark"] .swiper-button-next {
  background-color: #333;
}
.swiper-button-prev::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 55%;
  transform: translate(50%, -50%);
  background-color: #007aff; /* 색상만 바꿔도 적용됨 */
  -webkit-mask: url('../img/chevron-left.svg') no-repeat center;
  mask: url('../img/chevron-left.svg') no-repeat center;
  width: 20px !important;
  height: 20px !important;
}
.swiper-button-next::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  background-color: #007aff; /* 색상만 바꿔도 적용됨 */
  -webkit-mask: url('../img/chevron-right.svg') no-repeat center;
  mask: url('../img/chevron-right.svg') no-repeat center;
  width: 20px !important;
  height: 20px !important;
}
body[data-theme="dark"] .swiper-button-prev::after,
body[data-theme="dark"] .swiper-button-next::after {
  background-color: #fff;
}
body[data-theme="dark"] .swiper-pagination-bullet {
  background: #fff;
  opacity: .2;
}
body[data-theme="dark"] .main_wrap .sec02_mySwiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
  width: 20px !important;
  border-radius: 50px !important;
}
.main_wrap .swiper-button-prev {
  left: -20px !important;
  right: auto;
}
.main_wrap .swiper-button-next {
  left: auto;
  right: -20px !important;
}
.main_wrap #section03 {
  margin-bottom: 50px;
}
.main_wrap #section03 .inner2{
  display: flex;
  gap: 20px;
}
.main_wrap #section03 .inner2 .contents{
  padding: 20px 50px;
}
.main_wrap #section03 .inner2 .contents .t_scroll{
  height: 220px;
}
.main_wrap #section03 .cbox{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.main_wrap #section03 .cbox .imgbox{
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.main_wrap #section03 .cbox .imgbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: salmon;
}
.main_wrap #section03 .cbox .textbox {
  width: calc( 100% - 120px);
}
.main_wrap #section03 .cbox .title_flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.main_wrap #section03 .cbox .title_flex h3{
  font-size: 18px;
  font-weight: 600;
}
.main_wrap #section03 .cbox .title_flex .date{
  font-size: 14px;
  font-weight: 400;
  color: #808080;
}
.main_wrap #section03 .cbox .textbox .text{
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  color: #555;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}
body[data-theme="dark"] .main_wrap #section03 .cbox .textbox .text{
  color: #d2d2d2;
}
.main_wrap #section03 .review_flex{
  display: flex;
  gap: 10px;
  padding: 10px 20px;
}
.main_wrap #section03 .review_flex .r_box{
  width: calc(33.33% - 7px);
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  overflow: hidden;
}
body[data-theme="dark"] .main_wrap #section03 .review_flex .r_box{
  background-color: #333;
  border: 1px solid #444;
}
.main_wrap #section03 .review_flex .r_box .imgbox{
  width: 100%;
  height: 120px;
}
.main_wrap #section03 .review_flex .r_box .imgbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main_wrap #section03 .review_flex .r_box .textbox{
  padding: 10px 15px;
  height: 125px;
}
.main_wrap #section03 .review_flex .r_box .textbox .user_flex{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.main_wrap #section03 .review_flex .r_box .textbox .user_flex .profile_img{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  overflow: hidden;
}
.main_wrap #section03 .review_flex .r_box .textbox .user_flex .name{
  font-size: 14px;
  font-weight: 600;
}
.main_wrap #section03 .review_flex .r_box .textbox .user_flex .name span{
  font-size: 12px;
}
.main_wrap #section03 .review_flex .r_box .textbox .user_flex .date{
  font-size: 12px;
  color: #808080;
}
.main_wrap #section03 .review_flex .r_box .textbox .user_flex .profile_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main_wrap #section03 .review_flex .r_box .textbox .review{
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  color: #555;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

body[data-theme="dark"] .main_wrap #section03 .review_flex .r_box .textbox .review{
  color: #d2d2d2;
}

/* //main */


/* side_menu */
.about_wrap #about_visual{
  width: 100%;
  position: relative;
  padding-top: 50%;
  overflow: hidden;
  border-radius: 50px;
  margin-top: 100px;
  margin-bottom: 80px;
}
.about_wrap #about_visual .imgbox{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
.about_wrap #about_visual .imgbox img{
  width: 100%;
}
#side_menu {
  border-bottom: 1px solid #d2d2d2;
  margin-bottom: 80px;
}
body[data-theme="dark"] #side_menu {
  border-bottom: 1px solid #555;
  margin-bottom: 80px;
}
#side_menu .nav_list{
  display: flex;
  align-items: end;
  justify-content: center;
  margin: 0 auto;
}
#side_menu .nav_list li{
  height: fit-content;
  min-width: 260px;
}
.community_wrap #side_menu .nav_list li{
  min-width: 200px;
}
.event_wrap #side_menu .nav_list li{
  min-width: 260px;
}
#side_menu .nav_list li a{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #808080 !important;
  transition: .3s;
  padding-bottom: 20px;
}
#side_menu .nav_list li a span{
  height: 21px;
  display: block;
  display: flex;
  align-items: center;
}
/* side_menu */
/* .about */
.sub_inner{
  width:100%;
  max-width: 1482px;
  margin: 0 auto 100px;
}
.sec_inner{
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
}
.about_wrap #about .section01 .sec_inner{
  background-color: #f5f6fa;
  border-radius: 50px;
  padding: 80px 40px;
}
body[data-theme="dark"] .about_wrap #about .section01 .sec_inner{
  background-color: #222;
}
.about_wrap #about .section01 .sec_inner p{
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  max-width: 1100px;
  margin: 0 auto 80px;
}
.about_wrap #about .section01 .sec_inner .text_title{
  max-width: 1100px;
  margin: 0 auto 25px;
}
.about_wrap #about .section01 .sec_inner .font_point{
  font-size: 24px;
  font-weight: 700;
}
.about_wrap #about .section01 .sec_inner .sign_flex{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 80px;
  max-width: 1100px;
  margin: 0 auto;
}
.about_wrap #about .section01 .sec_inner .sign_flex h3{
  font-size: 26px;
  font-weight: 600;
}
.about_wrap #about .section01 .sec_inner .sign_flex .imgbox{
  width: 110px;
}
.about_wrap #about .section01 .sec_inner .sign_flex .imgbox img{
  width: 100%;
}
body[data-theme="dark"] .about_wrap #about .section01 .sec_inner .sign_flex .imgbox img{
  filter: brightness(0) invert(1);
}
/* //about */
/* vision */
#vision{
  margin-bottom: 100px;
}
#vision .section01 {
  margin-bottom: 150px;
}
#vision .sec_inner {
  max-width: 1150px;
}
#vision .section01 ul{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 40px;
  overflow: hidden;
  gap: 10px;
}
#vision .section01 ul li{
  width: 100%;
  padding: 20px 50px;
  background-color: #efefef;
  border-radius: 10px;
}
body[data-theme="dark"] #vision .section01 ul li{
  background-color: #222;
}
#vision .section01 ul li.list_head{
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  background-color: #7ab7d3;
}
body[data-theme="dark"] #vision .section01 ul li.list_head{
  background-color: #1c4a85;
}
#vision .section01 ul li.list_head .iconbox {
  width: 30px;
}
#vision .section01 ul li.list_head .iconbox img{
  filter: brightness(0) invert(1);
  width: 100%;
  transform: rotate(45deg);
}
#vision .section01 ul li.list_head h3{
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
#vision .section01 ul li.list_content{
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  padding: 20px 50px;
}
#vision .section01 ul li.list_content .list_title{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
#vision .section01 ul li.list_content .text_point{
  color: #1C4A85;
  font-weight: 700;
}
body[data-theme="dark"] #vision .section01 ul li.list_content .text_point{
  color: #007aff;
}
#vision .section01 ul li.list_footer{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background-color: #7ab7d3;
}
body[data-theme="dark"] #vision .section01 ul li.list_footer{
  background-color: #1c4a85;
}
#vision .section02{
  margin-bottom: 150px;
}
#vision .sec_title{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}
#vision .sec_title span{
  font-size: 20px;
  font-weight: 700;
  color: #1c4a85;
}
body[data-theme="dark"] #vision .sec_title span{
  color: #007aff;
}
#vision .sec_title h3{
  font-size: 36px;
  font-weight: 700;
}
#vision .section02 ul{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
#vision .section02 ul li{
  width: 33.33%;
  background-color: #f5f6fa;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 40px 20px;
}
body[data-theme="dark"] #vision .section02 ul li{
  background-color: #222;
}
#vision .section02 ul li h3{
  font-size: 26px;
  font-weight: 500;
  color: #1c4a85;
}
body[data-theme="dark"] #vision .section02 ul li h3{
  color: #007aff;
}
#vision .section02 ul li p{
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
}
#vision .section03 ul{
  display: flex;
  align-items: center;
  gap: 15px;
}
#vision .section03 ul li{
  width: 33.33%;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  height: 200px;
}
#vision .section03 ul li .imgbox{
  height: 40px;
  margin: 0 auto 15px;
  margin-top: 40px;
}
#vision .section03 ul li .imgbox img{
  height: 100%;
}
body[data-theme="dark"] #vision .section03 ul li:first-child .imgbox img{
  filter: brightness(0) invert(1);
}
body[data-theme="dark"] #vision .section03 ul li:nth-child(2) .imgbox img{
  filter: brightness(0) invert(1);
}
#vision .section03 ul li p{
  text-align: center;
  line-height: 140%;
  font-size: 16px;
  word-break: keep-all;
}
/* //vision */
/* history */
.about_wrap #history .section01 {
  margin-bottom: 100px;
}
.about_wrap #history .section01 .sec_inner{
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
  background-color: #f5f6fa;
  border-radius: 50px;
  padding: 80px 40px;
}
body[data-theme="dark"] .about_wrap #history .section01 .sec_inner{
  background-color: #222;
}
.about_wrap #history .section01 .sec_inner .nav{
  max-width: 1000px;
  margin: 0 auto;
}
.about_wrap #history .section01 .sec_inner .nav .history_list{
  display: flex;
  gap: 120px;
}
.about_wrap #history .section01 .sec_inner .nav .history_list .left{
  font-size: 26px;
  font-weight: 700;
  width: calc(15% - 60px);
}
.about_wrap #history .section01 .sec_inner .nav .history_list .right{
  font-size: 24px;
  font-weight: 700;
  width: calc(85% - 60px);
  position: relative;
}
.about_wrap #history .section01 .sec_inner .nav .history_list:not(:last-child) .right::after{
  content: '';
  width: 1px;
  height: 100%;
  background-color: #808080;
  position: absolute;
  left: -60px;
  top: 5px;
  z-index: 1;
}
.about_wrap #history .section01 .sec_inner .nav .history_list .right .title{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.about_wrap #history .section01 .sec_inner .nav .history_list .right .title::after{
  content: '';
  width: 16px;
  height: 16px;
  border: 4px solid #1c4a85;
  border-radius: 100%;
  background-color: #fff;
  position: absolute;
  left: -72px;
  top: 5px;
  z-index: 2;
}
body[data-theme="dark"] .about_wrap #history .section01 .sec_inner .nav .history_list .right .title::after{
  border-color: #007aff;
  background-color: #333;
}
.about_wrap #history .section01 .sec_inner .right .contents{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 50px;
}
.about_wrap #history .section01 .sec_inner .right .contents li{
  display: flex;
  gap: 20px;
  font-size: 20px;
  font-weight: 400;
}
.about_wrap #history .section01 .sec_inner .right .contents li .num{
  width: 30px;
}
.about_wrap #history .section01 .sec_inner .right .contents li .text{
  width: calc(100% - 50px);
}
/* history */
.horizon_line{
  width: 100%;
  height: 1px;
  background-color: #d2d2d2;
  margin: 100px 0;
}
/* location */
#location .map_title {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 50px;
}
#location .section02 {
  margin-bottom: 100px;
}
#location .content_flex{
  display: flex;
  gap: 80px;
}
#location .content_flex .textbox{
  width: 600px;
  padding-left: 50px;
}
#location .content_flex .textbox .s_box{
  margin-bottom: 50px;
}
#location .content_flex .textbox .s_box .name{
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
} 
#location .content_flex .textbox .s_box .address{
  font-size: 22px;
  font-weight: 400;
  line-height: 150%;
} 
#location .content_flex .textbox .s_box ul{
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#location .content_flex .textbox .s_box ul li{
  display: flex;
  align-items: center;
  gap: 15px;
}
#location .content_flex .textbox .s_box ul li .iconbox{
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: #1c4a85;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-theme="dark"] #location .content_flex .textbox .s_box ul li .iconbox{
  background-color: #007bff;
}
#location .content_flex .textbox .s_box ul li .iconbox img{
  width: 45%;
  filter: brightness(0) invert(1);
}
#location .content_flex .textbox .s_box ul li .text p{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}
#location .content_flex .textbox .s_box ul li .text span{
  font-size: 18px;
  font-weight: 500;
}
#location .content_flex .mapbox{
  width: calc(100% - 680px);
  height: 530px;
}
#location .content_flex .mapbox iframe{
  width: 100%;
  height: 100%;
}
/* location */
/* board_wrap  */
.board_wrap #board_visual{
  width: 100%;
  margin-top: 150px;
  margin-bottom: 50px;
}
.board_wrap #board_visual .notice_top{
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.board_wrap #board_visual .notice_top h3{
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 15px;
}
.board_wrap #board_visual .notice_top p{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 120px;
  color: #808080;
}
.board_wrap #board_visual .notice_top .serch{
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 350px;
  height: 40px;
  border: 1px solid #808080;
  border-radius: 50px;
  overflow: hidden;
  padding: 0 20px;
  width: 50%;
}
body[data-theme="dark"] .board_wrap #board_visual .notice_top .serch img{
  filter: brightness(0) invert(1);
}
.board_wrap #board_visual .notice_top .inputbox{
  width: 100%;
  height: 30px;
  background-color: inherit;
  font-size: 16px;
}
body[data-theme="dark"] .board_wrap #board_visual .notice_top .inputbox{
  color: #fff;
}

.board_wrap #side_wrap{
  width: 100%;
  margin-top: 150px;
  margin-bottom: 80px;
}
.board_wrap #side_wrap{
  margin-bottom: 0;
}
.board_wrap #side_menu {
  margin-bottom: 0;
  border-bottom: none;
}
body[data-theme="dark"] .board_wrap #side_menu {
  margin-bottom: 0;
  border-bottom: none;
}
.board_wrap .section01 .table_type02 {
        border-top: 1px solid #d2d2d2;
        min-height: 400px;
    }
.board_wrap .section01 .tr{
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e2e2e2;
  transition: .3s;
}
body[data-theme="dark"] .board_wrap .section01 .tr{
  border-color: #555;
}
.board_wrap .section01 a.tr:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] .board_wrap .section01 a.tr:hover{
  background-color: #222;
}
.board_wrap .section01 .tr .th{
  color: #808080;
  font-weight: 500;
}
.board_wrap .section01 .tr .td{
  text-align: center;
  padding: 10px 20px;
}
.board_wrap .section01 .tr .td .box{
  color: #1c4a85;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board_wrap .section01 .tr .td .box.notice_tab{
  background-color: #1c4a85;
  color: #fff;
}
body[data-theme="dark"] .board_wrap .section01 .tr .td .box.notice_tab{
  background-color: #007aff;
  color: #fff;
}
.board_wrap .section01 .tr .td .box.event_tab{
  background-color: #ffa800;
  color: #fff;
}
.board_wrap .section01 .tr .td .box.inspection_tab{
  background-color: f3441c;
  color: #fff;
}
.board_wrap .section01 .tr .number{
  width: 10%;
  max-width: 130px;
}
.board_wrap .section01 .tr .title{
  width: 70%;
  text-align: start;
  padding: 0 50px;
  max-width: 800px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}
.board_wrap .section01 .tr .th.title{
  text-align: center;
}
.board_wrap .section01 .tr .date{
  width: 20%;
  max-width: 150px;
}
.sub_wrap .pagination {
  margin-top: 50px;
}
.sub_wrap .pagination ul{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.sub_wrap .pagination ul li a{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid #e2e2e2;
  color: #808080 !important;
  transition: .3s;
}
.sub_wrap .pagination ul li a:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] .sub_wrap .pagination ul li a{
  border: 1px solid #555;
}
body[data-theme="dark"] .sub_wrap .pagination ul li a:hover img{
  filter: brightness(0) invert(0);
}
.sub_wrap .pagination ul li.active a{
  background-color: #1c4a85;
  color: #fff !important;
  border: 1px solid #1c4a85;
}
body[data-theme="dark"] .sub_wrap .pagination ul li.active a {
  background-color: #007aff;
  color: #fff !important;
  border: 1px solid #007aff;
}

.sub_wrap .pagination ul a img{
  height: 30%;
}
body[data-theme="dark"] .sub_wrap .pagination ul a img {
  filter: brightness(0) invert(1);
}

.board_wrap #notice_view .section02{
  margin-bottom: 50px;
}
.board_wrap #notice_view .section02 .notice_title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px
}
.board_wrap #notice_view .section02 .notice_title h3{
  font-size: 32px;
  font-weight: 600;
}
.board_wrap #notice_view .section03 .notice_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.board_wrap #notice_view .section03 .notice_title a{
  font-size: 20px;
  font-weight: 600;
}
.board_wrap #notice_view .section03 .notice_title h3{
  font-size: 32px;
  font-weight: 600;
}
.board_wrap #notice_view .section02 .notice_title p{
  font-size: 16px;
  font-weight: 400;
  color: #808080;
}
.board_wrap #notice_view .section02 {
  padding: 50px 63px;
  border: 1px solid #e2e2e2;
  min-height: 60vh;
}
.board_wrap #notice_view .section02 .horizon_line{
  margin: 50px 0;
}
.board_wrap #notice_view .section02 .textbox{
  padding: 0 10px
}
.board_wrap #notice_view .section02 .textbox p{
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  word-break: keep-all;
}
.board_wrap #notice_view #board_visual {
  width: 100%;
  margin-top: 150px;
  margin-bottom: 0;
}
/* //board_wrap  */
/* community_wrap */
.community_wrap #community_visual{
  width: 100%;
  margin-top: 150px;
  margin-bottom: 100px;
}
.community_wrap #community_visual .review_top h3{
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 15px;
}
.community_wrap #community_visual .review_top p{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 120px;
  color: #808080;
}
.community_wrap #community_visual .rankbox{
  position: relative;
}
.community_wrap #community_visual .rankbox .position_area p{
  font-size: 120px;
  font-weight: 800;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -3;
  position: absolute;
  width: 100%;
  color: #000;
  opacity: .1;
  display: block;
  width: fit-content;
}
body[data-theme="dark"] .community_wrap #community_visual .rankbox .position_area p {
  color: #fff;
}
.community_wrap #community_visual .rankbox .position_area .arrow{
  position: absolute;
  height: 250px;
  width: 180px;
  z-index: -3;
}
.community_wrap #community_visual .rankbox .position_area .arrow img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: .1;
}
body[data-theme="dark"] .community_wrap #community_visual .rankbox .position_area .arrow img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: .1;
  filter: brightness(0) invert(1);
}
.community_wrap #community_visual .rankbox .position_area .left_arrow{
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
}
.community_wrap #community_visual .rankbox .position_area .right_arrow{
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}
.community_wrap #community_visual .rank{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.community_wrap #community_visual .rank li{
  width: 33.33%;
  max-width: 350px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  position: relative;
  z-index: -2;
}
.community_wrap #community_visual .rank li:nth-child(2){
  margin-top: -100px;
}
body[data-theme="dark"] .community_wrap #community_visual .rank li{
  background-color: #222;
  border-color: #333;
}
.community_wrap #community_visual .rank li .imgbox{
  height: 200px;
  width: 100%;
  position: relative;
  background-color: #d2d2d2;
  z-index: -1;
}
.community_wrap #community_visual .rank li .imgbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community_wrap #community_visual .rank li .imgbox .number{
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: start;
  opacity: .5;
  
}
.community_wrap #community_visual .rank li .imgbox .number p{
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}
.community_wrap #community_visual .rank li .imgbox .number span{
  font-size: 20px;
  color: #fff;
  margin-top: 0px;
  font-weight: 700;
}
.community_wrap #community_visual .rank li .databox {
  padding: 0 30px 30px;
  margin-top: -40px;
}
.community_wrap #community_visual .rank li .databox .profile_iflex{
  display: flex;
  gap: 15px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 25px;
}
.community_wrap #community_visual .rank li .databox .profile_iflex .ibox{
  width: 80px;
  height: 80px;
  border-radius: 100%;
  position: relative;
}
.community_wrap #community_visual .rank li .databox .profile_iflex .ibox .profile{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community_wrap #community_visual .rank li .databox .profile_iflex .ibox .rank{
  width: 120%;
  object-fit: cover;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.community_wrap #community_visual .rank li .databox .profile_iflex .tag{
  padding: 5px 20px;
  background-color: #1c4a85;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  /* margin-top: 50px; */
}
body[data-theme="dark"] .community_wrap #community_visual .rank li .databox .profile_iflex .tag{
  background-color: #007aff;
}
.community_wrap #community_visual .rank li .databox .name_flex{
  display: flex;
  align-items: center;
  gap: 10px;
}
.community_wrap #community_visual .rank li .databox .name_flex .icon{
  width: 20px;
  height: 20px;
}
.community_wrap #community_visual .rank li .databox .name_flex .icon img{
  width: 100%;
}
.community_wrap #side_menu .nav_list {
  justify-content: start;
}
.community_wrap #side_menu .nav_list {
  margin: 0;
  max-width: 800px;
}
/* //community_wrap */
/* review */
#review .sec_title{
  margin-bottom: 50px;
}
#review .sec_title h3{
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}
#review .sec_title p{
  font-size: 20px;
  font-weight: 700;
  color: #1c4a85;
  text-align: center;
  margin-bottom: 5px;
}
body[data-theme="dark"] #review .sec_title p{
  color: #007aff;
}
#review .section01{
  margin-bottom: 80px;
}
#review .best_review {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
#review .best_review li{
  width: 25%;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  padding: 50px 40px;
  cursor: pointer;
  transition: .3s;
}
#review .best_review li:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] #review .best_review li{
  border-color: #555;
}
body[data-theme="dark"] #review .best_review li:hover{
  background-color: #333;
}
#review .best_review li .profile_flex{
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}
#review .best_review li .profile_flex .imgbox{
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
}
#review .best_review li .profile_flex .imgbox img{
  width: 100%;
}
#review .best_review li .profile_flex .name p{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}
#review .best_review li .profile_flex .name span{
  font-size: 14px;
  font-weight: 500;
  color: #808080;
}
#review .best_review li .content p{
  font-size: 18px;
  font-weight: 300;
  line-height: 130%;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical
}
#review .best_review li .content{
  margin-bottom: 30px;
}
#review .best_review li .package{
  font-size: 18px;
  font-weight: 600;
}
#review .section02 .button_flex{
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
  margin-bottom: 20px;
  margin-left: auto;
}
.community_wrap .button_flex{
  width: fit-content;
  height: 35px;
  margin-bottom: 19px;
}
.community_wrap .button_flex .button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #d2d2d2;
  border-radius: 50px;
  transition: .3s;
  width: 86px;
  height: 100%;
}
.community_wrap .button_flex .write_button:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] .community_wrap .button_flex .write_button:hover{
  background-color: #333;
}
body[data-theme="dark"] .community_wrap .button_flex .button{
  border-color: #555;
}
body[data-theme="dark"] #review .section02 .button_flex .button span{
  color: #fff;
}
body[data-theme="dark"] #review .section02 .button_flex .button .iconbox img{
  filter: brightness(0) invert(1);
}
#review .section02 .button_flex .button .iconbox{
  width: 15px;
  margin-top: 2px;
}
#review .section02 .button_flex .button .iconbox img{
  width: 100%;
}
#review .section02 .writebox{
  width: 100%;
  height: 250px;
  background-color: #f5f6fa;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 30px;
}

body[data-theme="dark"] #review .section02 .writebox{
  background-color: #333;
  border-color: #555;
}
#review .section02 .writebox {
  display: none;
  margin-top: 15px;
}

#review .section02 .writebox.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
#review .section02 .textarea-box {
  position: relative;
  width: 100%;
}
#review .section02 .textarea-box textarea {
  width: 100%;
  height: 180px;
  border: none;
  outline: none;
  background-color: inherit;
  resize: none;
  padding: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

#review .section02 .textarea-box .placeholder {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 90%;
  text-align: center;
  transform: translate(-50%, -50%);
  color: #aaa;
  pointer-events: none; /* 클릭 방해 X */
  font-size: 14px;
  line-height: 1.4;
  transition: opacity 0.2s ease;
}

/* 다크모드 대응 */
body[data-theme="dark"]#review .section02 .textarea-box .placeholder {
  color: #777;
}
#review .section02 .writebox button{
  padding: 5px 30px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fff;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  transition: .3s;
}
#review .section02 .writebox button:hover{
  background-color: #333;
  color: #fff;
}
body[data-theme="dark"] #review .section02 .writebox button {
  background-color: #1c4a85;
  border-color: #1c4a85;
  color: #fff;
}
body[data-theme="dark"] #review .section02 .writebox button:hover{
  background-color: #007AFF;
  border-color: #007AFF;
  color: #fff;
}
#review .section02 .total_review{
  border-top: 1px solid #e2e2e2;
}
#review .section02 .total_review .review_list{
  border-bottom: 1px solid #e2e2e2;
  padding: 30px 30px;
}
body[data-theme="dark"] #review .section02 .total_review {
  border-color: #555;
}
body[data-theme="dark"] #review .section02 .total_review .review_list{
  border-color: #555;
}
#review .section02 .total_review .review_list .profile_flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
#review .section02 .total_review .review_list .profile_flex .left{
  display: flex;
  align-items: center;
  gap: 15px;
}
#review .section02 .total_review .review_list .profile_flex .left .imgbox{
  width: 60px;
  height: 60px;
  border-radius: 100%;
}
#review .section02 .total_review .review_list .profile_flex .left .imgbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#review .section02 .total_review .review_list .profile_flex .left h3{
  font-size: 24px;
  font-weight: 600;
}
#review .section02 .total_review .review_list .profile_flex .left h3 span{
  font-size: 16px;
  font-weight: 600;
}
#review .section02 .total_review .review_list .profile_flex .left p{
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
#review .section02 .total_review .review_list .profile_flex .left p::before{
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: #000;
  margin-top: 2px;
}
body[data-theme="dark"] #review .section02 .total_review .review_list .profile_flex .left p::before{
  background-color: #fff;
}
#review .section02 .total_review .review_list .profile_flex .right{
  font-size: 16px;
  font-weight: 400;
  color: #808080;
}
#review .section02 .total_review .review_list .textbox{
  font-size: 18px;
  font-weight: 300;
  line-height: 130%;
  color: #808080;
}
/* //review */
/* PP */
#PP .sec_title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 80px;
}
#PP .sec_title .left h3{
  font-size: 65px;
  font-weight: 700;
  margin-bottom: 10px;
}
#PP .sec_title .left p{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
#PP .sec_title p span{
  color: #00a80e;
}
#PP .sec_title .right p{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
#PP .pp_review {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#PP .pp_review .PP_view{
  border: 1px solid #e2e2e2;
  display: flex;
  align-items: center;
  gap: 50px;
  transition: .3s;
}
body[data-theme="dark"] #PP .pp_review .PP_view{
  border-color: #555;
}
#PP .pp_review .PP_view:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] #PP .pp_review .PP_view:hover{
  background-color: #222;
}
#PP .pp_review .PP_view .left{
  width: calc(100% - 550px);
  padding: 25px 30px;
}
#PP .pp_review .PP_view .left .profile_flex{
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 50px;
}
#PP .pp_review .PP_view .left .profile_flex .imgbox{
  width: 70px;
  height: 70px;
  border-radius: 100%;
}
#PP .pp_review .PP_view .left .profile_flex .imgbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#PP .pp_review .PP_view .left .profile_flex h3{
  font-size: 30px;
  font-weight: 500;
}
#PP .pp_review .PP_view .left .profile_flex h3 span{
  font-size: 25px;
  font-weight: 500;
}
#PP .pp_review .PP_view .left .profile_flex p{
  font-size: 16px;
  font-weight: 400;
  color: #808080;
  margin-top: 10px;
}
#PP .pp_review .PP_view .left p{
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #808080;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical

}
#PP .pp_review .PP_view .right{
  width: 500px;
  height: 100%;
}
#PP .pp_review .PP_view .right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community_wrap #side_menu {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.community_wrap #side_menu .nav_list{
  width: 90%;
}

.community_wrap .com_title{
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
}
#PP_write .inputbox{
  margin-bottom: 10px;
}
.community_wrap .input_type01 {
  display: flex;
  max-width: 200px;
  align-content: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid #e2e2e2;
}
.community_wrap .input_type05 {
	display: flex;
	max-width: 200px;
	align-content: center;
	gap: 10px;
	padding: 0 15px;
	border: 1px solid #e2e2e2;
}
body[data-theme="dark"] .community_wrap .input_type01{
  border: 1px solid #555;
}
.community_wrap .input_type01 input{
  width: calc(100% - 30px);
  height: 40px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  background: inherit;
}
body[data-theme="dark"] .community_wrap .input_type05{
  border: 1px solid #555;
}
.community_wrap .input_type05 input{
  width: calc(100% - 30px);
  height: 40px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  background: inherit;
}
.community_wrap .input_type01 input::placeholder{
  color: #bbb;
}
body[data-theme="dark"] .community_wrap .input_type01 input{
  color: #fff;
}
.community_wrap .input_type05 input::placeholder{
  color: #bbb;
}
body[data-theme="dark"] .community_wrap .input_type05 input{
  color: #fff;
}
.community_wrap .input_type01 input::placeholder{
  color: #bbb;
}
body[data-theme="dark"] .community_wrap .input_type01 input{
  color: #fff;
}
.community_wrap .input_type01 span{
  width: 20px;
  display: block;
  height: 40px;
  line-height: 40px;
  color: #00a80e;
  font-weight: 700;
  font-size: 20px;
}
.community_wrap .input_type05 input::placeholder{
  color: #bbb;
}
body[data-theme="dark"] .community_wrap .input_type05 input{
  color: #fff;
}
.community_wrap .input_type05 span{
  width: 20px;
  display: block;
  height: 40px;
  line-height: 40px;
  color: #00a80e;
  font-weight: 700;
  font-size: 20px;
}
.community_wrap .input_type02 textarea{
  width: 100%;
  height: 350px;
  max-width: 100%;
  max-height: 100%;
  padding: 20px;
  border: none;
  outline: none;
  background-color: inherit;
  resize: none;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #e2e2e2;
  margin-bottom: 10px;
}
body[data-theme="dark"] .community_wrap .input_type02 textarea{
  border: 1px solid #555;
  color: #d2d2d2;
}
.community_wrap .input_type02 p{
  font-size: 20px;
  font-weight: 400;
  color: #bbb;
  text-align: end;
}
.community_wrap .input_type02 textarea::placeholder{
  color: #bbb;
}

.community_wrap .upload-area {
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.community_wrap .upload-area.dragover {
  border-color: #7b61ff;
  box-shadow: 0 8px 24px rgba(123, 97, 255, 0.1);
}

/* 앨범 아이콘 */
.community_wrap .album_position{
  position: relative;
}
.community_wrap .album-icon {
  width: 80px;
  height: 80px;
  position: absolute;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.3s;
}
body[data-theme="dark"] .community_wrap .album-icon{
  border: 1px solid #555;
}
.community_wrap .album-icon::before {
  content: "";
  position: absolute;
  bottom: 21px;
  left: 25px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 18px solid #c1c7d0;
}
.community_wrap .album-icon::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #c1c7d0;
  border-radius: 50%;
}
.community_wrap .upload-area.has-images .album-icon {
  opacity: 0;
  pointer-events: none;
}

/* 썸네일 레이아웃 */
.community_wrap .album-box {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: fit-content;
  height: 80px;
  /* min-width: 80px; */
}
.community_wrap .thumb {
  width: 80px;
  height: 80px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #f2f4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #e0e3e7;
}
.community_wrap .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.community_wrap .thumb .remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
  border: 0;
}

.community_wrap .controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.community_wrap .controls {
  appearance: none;
  border: 0;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #e0e3e7;
  transition: .3s;
  position: relative;
}
body[data-theme="dark"] .community_wrap .controls{
  border: 1px solid #555;
}
.community_wrap .controls:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] .community_wrap .controls:hover{
  background-color: #333;
}
.community_wrap .controls label{
  width: 80px;
  height: 80px;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}
.community_wrap .controls label img{
  height: 25px;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: .2;
}
body[data-theme="dark"] .community_wrap .controls label img{
  filter: brightness(0) invert(1);
}
.community_wrap .hint {
  color: #667085;
  font-size: 13px;
}
.community_wrap .counter {
  text-align: center;
  font-weight: 700;
  color: #0f172a;
  opacity: .3;
  width: 70px;
  position: absolute;
  bottom: 10px;
  z-index: 1;
}
body[data-theme="dark"] .community_wrap .counter{
  color: #fff;
}
.community_wrap .small {
  font-weight: 500;
  color: #667085;
  font-size: 13px;
}
@media (max-width: 420px) {
  :root {
    --box-size: 100%;
  }
  .community_wrap .uploader {
    width: 100%;
  }
  .community_wrap .thumb {
    width: calc(33.333% - var(--gap));
  }
}

.community_wrap .input_type03 {
  float: left;
}
.community_wrap .input_type04 {
  display: flex;
  gap: 16px;
  float: right;
  height: 80px;
}
.community_wrap .custom-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  user-select: none;
}
.community_wrap .custom-check .check-img {
  width: 22px;
  height: 22px;
  transition: 0.2s;
}
.community_wrap .custom-check.active .check-img {
  content: url("../img/check_on1.svg");
}
body[data-theme="dark"] .community_wrap .custom-check.active .check-img {
  content: url("../img/check_on2.svg");
}
.community_wrap .custom-check span {
  font-size: 16px;
  margin-bottom: 2px;
}
.community_wrap .input_type04 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.community_wrap .input_type04 .chk {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.community_wrap .input_type04 input[type="checkbox"] {
  display: none;
}

.community_wrap .input_type04 .chk_img {
  width: 20px;
  height: 20px;
  background: url("../img/check_off.svg") no-repeat center/contain;
  transition: 0.3s;
}

.community_wrap .input_type04 input[type="checkbox"]:checked + .chk_img {
  background: url("../img/check_on.svg") no-repeat center/contain;
}

/* 버튼 영역 */
.community_wrap .btn_box {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  clear: both;
}

.community_wrap .btn_box .btn {
  width: 130px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
  font-size: 16px;
  margin-top: 50px;
}

/* 취소 버튼 */
.community_wrap .cancel_btn {
  background-color: #ccc;
  color: #333;
}
body[data-theme="dark"] .community_wrap .cancel_btn {
  background-color: #444;
  color: #d2d2d2;
}

/* 확인 버튼 기본 비활성화 */
.community_wrap .confirm_btn {
  background-color: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  transition: 0.3s;
}
body[data-theme="dark"] .community_wrap .confirm_btn {
  background-color: #808080;
  color: #555;
  cursor: not-allowed;
  transition: 0.3s;
}

/* 확인 버튼 활성화 상태 */
.community_wrap .confirm_btn.active {
  background-color: #007aff;
  color: #fff;
  cursor: pointer;
}
body[data-theme="dark"] .community_wrap .confirm_btn.active {
  background-color: #007aff;
  color: #fff;
  cursor: pointer;
}
/* //PP */

/* gallery */
.community_wrap #gallery .control_flex .serch{
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 400px;
  height: 40px;
  border: 1px solid #808080;
  border-radius: 50px;
  overflow: hidden;
  padding: 0 20px;
}
body[data-theme="dark"] .community_wrap #gallery .control_flex .serch img{
  filter: brightness(0) invert(1);
}
.community_wrap #gallery .control_flex .serch .inputbox{
  width: 100%;
  height: 30px;
  background-color: inherit;
  font-size: 16px;
}
body[data-theme="dark"] .community_wrap #gallery .control_flex .serch .inputbox {
  color: #fff;
}
.community_wrap #gallery #side_menu {
  border-bottom: 1px solid #d2d2d2;
  margin-bottom: 30px;
}
#gallery .control_flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}

#gallery .my_post { 
  margin-bottom: 12px; 
}
body[data-theme="dark"]  #gallery .toggle-btn{
  color: #fff;
}
#gallery .toggle-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0px 12px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  transition: background .18s, border-color .18s;
}
#gallery .toggle-btn .indicator{
  width: 36px;
  height: 20px;
  border-radius: 12px;
  background: #d2d2d2;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
body[data-theme="dark"] #gallery .toggle-btn .indicator {
  background-color: rgba(105, 105, 105, 0.5);
}
#gallery .toggle-btn .indicator::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .18s;
}
/* 활성화 스타일 */
#gallery .toggle-btn[aria-pressed="true"] .indicator{
  background-color: #1c4a85 !important;
}
body[data-theme="dark"] #gallery .toggle-btn[aria-pressed="true"] .indicator{
  background-color: #007aff !important;
}
#gallery .toggle-btn[aria-pressed="true"] .indicator::after{
  transform: translateX(16px);
}

/* 게시글 리스트 스타일 (예시) */
#gallery .post-list {
    list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 60px 22px;
}
#gallery .post { 
  width:100%;
  transition: .3s;
  border: 2px solid #e2e2e2;
  box-sizing: border-box;
}
#gallery .post a{ 
  width:100%;
  
}
#gallery .post:hover{
  border: 2px solid #007AFF;
}
body[data-theme="dark"] #gallery .post {
  border-color: #555;
}
body[data-theme="dark"] #gallery .post:hover{
  border: 2px solid #CF3685;
}
#gallery .post.hidden { 
  display: none; 
}
#gallery .post .imgbox {
        position: relative;
        width: 100%;
        background-color: #e2e2e2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 75.7%;
    }
#gallery .post .imgbox img {
        width: 100%;
        position: absolute;
        height: 100%;
        top: 0px;
		left:0px;
        object-fit: cover;
    }
#gallery .post .imgbox img.not_img {
        max-width: 194px;
		max-height: 150px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		object-fit: fill;
		width: 40%;
    }
#gallery .post .textbox{
  padding: 30px 15px;
  height:149px
}
#gallery .post .textbox .profile_flex{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}
#gallery .post .textbox .profile_flex .profile_img{
  width: 50px;
  height: 50px;
  border-radius: 100%;
  overflow: hidden;
}
#gallery .post .textbox .profile_flex .profile_img img{
  width: 100%;
}
#gallery .post .textbox .profile_flex h3{
  font-size: 20px;
  font-weight: 600;
}
#gallery .post .textbox .profile_flex h3 span{
  font-size: 16px;
  font-weight: 600;
}
#gallery .post .textbox .profile_flex p{
  font-size: 16px;
  font-weight: 400;
  color: #808080;
  margin-left: auto;
}
#gallery .post .textbox .title {
	font-size: 18px;
	font-weight: 700;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

#gallery_write .input_type01 {
  padding: 0;
  max-width: 50%;
  margin-bottom: 10px;
}
#gallery_write .input_type01 input {
  text-align: start;
  padding: 0 15px;
  width: 100%;
}

.view_wrap #side_menu {
  margin-bottom: 30px;
}
.view_wrap .nav{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
  margin-bottom: 30px;
}
.view_wrap .nav li a{
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  min-width: 100px;
}
.view_wrap .nav li a.list_button{
  min-width: 76px;
}
body[data-theme="dark"] .view_wrap .nav li a{
  border: 1px solid #555;
}
.view_wrap .nav li a .imgbox{
  width: 20px;
  height: 10px;
  display: flex;
  align-items: center;
}
.view_wrap .nav li a .imgbox img{
  width: 100%;
}
body[data-theme="dark"] .view_wrap .nav li a .imgbox img {
  filter: brightness(0) invert(1);
}
.view_wrap .view_contents {
  border: 1px solid #e2e2e2;
  padding: 50px;
}
body[data-theme="dark"] .view_wrap .view_contents {
  border: 1px solid #555;
}
.view_wrap .view_contents .view_title{
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 30px;
}
.view_wrap .view_contents .profile_flex{
  display: flex;
  align-items: center;
  gap: 25px;
}
.view_wrap .view_contents .profile_flex .profile_img{
  width: 70px;
  height: 70px;
  border-radius: 100%;
  overflow: hidden;
}
.view_wrap .view_contents .profile_flex .profile_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view_wrap .view_contents .profile_flex .profile_text .name{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
.view_wrap .view_contents .profile_flex .profile_text .name span{
  font-size: 18px;
}
.view_wrap .view_contents .profile_flex .profile_text .date{
  font-size: 16px;
  font-weight: 400;
  color: #808080;
}
.view_wrap .view_contents .profile_flex .modify{
  margin-left: auto;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #d2d2d2;
  border-radius: 50px;
  padding: 5px 20px;
  transition: .3s;
}
.view_wrap .view_contents .profile_flex .modify:hover{
  background-color: #f5f6fa;
}
body[data-theme="dark"] .view_wrap .view_contents .profile_flex .modify{
  border-color: #555;
}
body[data-theme="dark"] .view_wrap .view_contents .profile_flex .modify:hover{
  background-color: #333;
}
.view_wrap .horizon_line {
  margin: 40px 0;
}
body[data-theme="dark"] .view_wrap .horizon_line {
  background-color: #555;
}
.view_wrap .view_contents{
  margin-bottom: 30px;
}
.view_wrap .content_box .textbox{
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.view_wrap .content_box .imgArea{
  position: relative;
}
.view_wrap .g_mySwiper {
  width: 100%;
  height: 380px;
  overflow: hidden;
  margin-top: 50px;
}
.view_wrap .g_mySwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
  overflow: hidden;
}

.view_wrap .g_mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view_wrap .g_mySwiper .swiper-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.view_wrap .g_mySwiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
  width: 20px !important;
  border-radius: 50px !important;
}
.view_wrap .g_mySwiper .swiper-pagination-bullet {
  transition: .3s;
}
.view_wrap .g_mySwiper .swiper-button-prev, 
.view_wrap .g_mySwiper .swiper-button-next {
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, .3);
  width: 50px !important;
  height: 50px !important;
  background-size: 30% !important;
  margin-top: -10px !important;
}
body[data-theme="dark"] .view_wrap .g_mySwiper .swiper-button-prev, 
body[data-theme="dark"] .view_wrap .g_mySwiper .swiper-button-next {
  background-color: #555;
}
body[data-theme="dark"] .swiper-pagination-bullet {
  background: #fff;
  opacity: .2;
}
body[data-theme="dark"] .view_wrap .g_mySwiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
  width: 20px !important;
  border-radius: 50px !important;
}
.view_wrap .swiper-button-prev {
  left: -20px !important;
  right: auto;
  transform: translateY(-50%);
}
.view_wrap .swiper-button-next {
  left: auto;
  right: -20px !important;
  transform: translateY(-50%);
}

.view_wrap .my_post {
  padding: 5px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  width: fit-content;
}
body[data-theme="dark"] .view_wrap .my_post {
  border: 1px solid #555;
}
.view_wrap #PP_view .view_contents .title_flex{
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}
.view_wrap .view_contents .title_flex .view_title {
  margin-bottom: 0;
  color: #808080;
  font-weight: 500;
}
.view_wrap .view_contents .title_flex p{
  font-size: 36px;
  font-weight: 800;
}
.view_wrap .view_contents .title_flex p span{
  font-size: 30px;
  font-weight: 800;
  color: #00a80e;
  margin-left: 5px;
}
/* //gallery */

/* event */
/* .event_wrap */
.event_wrap #event_visual{
  width: 100%;
  margin-top: 150px;
  margin-bottom: 100px;
}
.event_wrap .review_top h3{
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 15px;
}
.event_wrap .review_top p{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 120px;
  color: #808080;
}
.event_wrap .rankbox{
  position: relative;
}
.event_wrap .rankbox .position_area p{
  font-size: 80px;
  font-weight: 800;
  position: absolute;
  width: 100%;
  color: #e9e9e9;
  display: block;
  width: fit-content;
}
.event_wrap .rankbox .position_area .top_left{
  top: -70px;
  left: 200px;
  z-index: -3;
}
.event_wrap .rankbox .position_area .bottom_right{
  bottom: -60px;
  right: 200px;
  z-index: 1;
}
body[data-theme="dark"] .event_wrap .rankbox .position_area p {
  color: #333;
}
.event_wrap .rankbox .position_area .arrow{
  position: absolute;
  height: 250px;
  width: 180px;
  z-index: -3;
}
.event_wrap .rankbox .position_area .arrow img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: .1;
}
body[data-theme="dark"] .event_wrap .rankbox .position_area .arrow img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: .1;
  filter: brightness(0) invert(1);
}
.event_wrap .rankbox .position_area .left_arrow{
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
}
.event_wrap .rankbox .position_area .right_arrow{
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}
.event_wrap .rank{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.event_wrap #event_visual .rank li:nth-child(2) {
  margin-top: -100px;
}
.event_wrap .rank li{
  width: 33.33%;
  max-width: 350px;
  border-radius: 20px;
  /* overflow: hidden; */
  border: 2px solid #e2e2e2;
  background-color: #fff;
  position: relative;
  z-index: 1;
  transition: .3s;
}
.event_wrap .section02 .rank li:hover{
  border-color: #007AFF;
}
body[data-theme="dark"] .event_wrap .section02 .rank li:hover{
  border-color: #ff0080;
}
.event_wrap .rank .rbox01{
  box-shadow: 0 0 10px 0 rgba(216, 207, 207, 0.3);
}
.event_wrap .rank .rbox02{
  box-shadow: 0 0 10px 0 rgba(218, 183, 28, 0.3);
}
.event_wrap .rank .rbox03{
  box-shadow: 0 0 10px 0 rgba(230, 108, 51, 0.3);
}
body[data-theme="dark"] .event_wrap .rank li{
  background-color: #222;
  border-color: #333;
}
.event_wrap .rank .rbox02{
  margin-top: -100px;
}
.event_wrap .rank li .imgbox{
  height: 200px;
  width: 100%;
  position: relative;
  background-color: #d2d2d2;
  z-index: -1;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.event_wrap .section01 .rankbox {
  margin-bottom: 100px;
}
.event_wrap .section01 .rank li .imgbox{
  border-top: 5px solid #007aff;
}
.event_wrap .section01 .rank .rbox01 .imgbox{
  border-color: #CFCFCF;
}
.event_wrap .section01 .rank .rbox02 .imgbox{
  border-color: #EACD85;
}
.event_wrap .section01 .rank .rbox03 .imgbox{
  border-color: #E0BBA3;
}
.event_wrap .rank li .bet_img{
  position: absolute;
  width: 40px;
  height: 40px;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.event_wrap .rank .rbox02 .bet_img{
  width: 50px;
  height: 50px;
  top: -25px;
}
.event_wrap .rank li .bet_img img{
  height: 100%;
}
.event_wrap .rank li .imgbox>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event_wrap .rank li .imgbox .number{
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: start;
  opacity: .5;
  
}
.event_wrap .rank li .imgbox .number p{
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}
.event_wrap .rank li .imgbox .number span{
  font-size: 20px;
  color: #fff;
  margin-top: 0px;
  font-weight: 700;
}
.event_wrap .rank li .databox {
  padding: 0 30px 30px;
  margin-top: -40px;
}
.event_wrap .rank li .databox .profile_iflex{
  display: flex;
  gap: 15px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 25px;
}
.event_wrap .rank li .databox .profile_iflex .ibox{
  width: 80px;
  height: 80px;
  border-radius: 100%;
  position: relative;
}
.event_wrap .rank li .databox .profile_iflex .ibox .profile{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event_wrap .rank li .databox .profile_iflex .ibox .rank{
  width: 120%;
  object-fit: cover;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.event_wrap .rank li .databox .profile_iflex .tag{
  padding: 5px 20px;
  background-color: #1c4a85;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  /* margin-top: 50px; */
}
body[data-theme="dark"] .event_wrap .rank li .databox .profile_iflex .tag{
  background-color: #007aff;
}
.event_wrap .rank li .databox .name_flex{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.event_wrap .rank li .databox .name_flex .icon{
  width: 20px;
  height: 20px;
}
.event_wrap .rank li .databox .name_flex .icon img{
  width: 100%;
}
.event_wrap .rank li .databox .textbox{
  height: 120px;
  overflow: auto;
  scrollbar-width: thin;
}
.event_wrap .rank li .databox .textbox p{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.event_wrap #side_menu .nav_list {
  justify-content: start;
}
.event_wrap #side_menu .nav_list {
  margin: 0;
  max-width: 800px;
}

.event_wrap .section01 {
  display: flex;
}
.event_wrap .section01 .left_area{
  width: calc(100% - 350px);
  position: relative;
}
.event_wrap .section01 .left_area::after{
  content: url(../img/rank_bg.svg);
  position: absolute;
  top: -60px;
  left: 0px;
  width: 400px;
  z-index: -15;
  rotate: -15deg;
  opacity: .1;
}
.event_wrap .section01 .right_area{
  width: 350px;
}
.event_wrap .section01 .review_top{
  margin-bottom: 100px;
}
.event_wrap .section01 .review_top h3 {
  text-align: center;
}
.event_wrap .section01 .review_top h3 span{
  color: #ff0080;
}
.event_wrap .section01 .review_top p {
  text-align: center;
  font-size: 18px;
  margin-bottom: 50px;
}
.event_wrap .section01 .review_top p span{
  font-size: 16px;
  color: #808080;
}

.event_wrap .section01 .CommentArea p{
  font-size: 16px;
  font-weight: 400;
}
.event_wrap .section01 .CommentArea>p{
  margin-bottom: 20px;
  opacity: .5;
}
.event_wrap .section01 .CommentArea .title{
  font-size: 16px;
  font-weight: 700;
  color: #f00;
  margin-bottom: 10px;
}
.event_wrap .section01 .CommentArea li{
  margin-bottom: 8px;
}
.event_wrap .section01 .CommentArea .main_ul{
  margin-left: 20px;
}
.event_wrap .section01 .CommentArea .main_li{
  list-style: decimal;
  opacity: .5;
}
.event_wrap .section01 .CommentArea .mid_ul{
  margin-top: 8px;
}
.event_wrap .section01 .CommentArea .mid_li{
  padding-left: 10px;
  position: relative;
}
.event_wrap .section01 .CommentArea .mid_li::after{
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #000;
  top: 7px;
  left: -2px;
}
.event_wrap .section01 .CommentArea .sub_ul{
  position: relative;
  margin-left: 10px;
  margin-top: 8px;
}
.event_wrap .section01 .CommentArea .sub_ul::after{
  content: 'ex)';
  position: absolute;
  font-size: 16px;
  font-weight: 400;
  left: -25px;
  top: -3px;
}
/* misstion */
.event_wrap .right_area{
  padding-left: 50px;
}
.event_wrap .mission h3{
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}
.event_wrap .mission ul {
  box-shadow: 0 0 10px 0 #d2d2d2;
  border-radius: 20px;
  padding: 50px 30px;
  margin-bottom: 30px;
}
body[data-theme="dark"] .event_wrap .mission ul {
  box-shadow: 0 0 10px 0 #333;
}
.event_wrap .mission ul li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 80px;
  position: relative;
  max-width: 220px;
  margin: 0 auto;
}
.event_wrap .mission ul li:last-child{
  padding-bottom: 0;
}
.event_wrap .mission ul li .circle{
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background-color: #e2e2e2;
}
.event_wrap .mission ul .success .circle{
  background-color: #007aff;
}
.event_wrap .mission ul .ing .circle{
  background-color: #ff0080;
}
.event_wrap .mission ul li:not(:last-child):after{
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: #e2e2e2;
  top: 7px;
  left: 6px;
  content: '';
  z-index: -1;
}
.event_wrap .mission ul .success::after{
  background-color: #007aff !important;
}
.event_wrap .mission ul .success p{
  opacity: 1;
}
.event_wrap .mission ul li p{
  font-size: 18px;
  font-weight: 500;
  opacity: .5;
}
.event_wrap .mission ul li .check-icon{
  width: 15px;
}
.event_wrap .mission .entry_button{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007aff;
  border-radius: 10px;
  color: #fff !important;
  font-weight: 700;
  font-size: 18px;
  transition: .3s;
  margin-bottom: 30px;
}
.event_wrap .mission .entry_button:hover{
  background-color: #1C4A85;
}
/* //misstion */
/* //.event_wrap  */
.event_wrap .countdown-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-bottom: 30px;
}

.event_wrap .time {
  display: flex;
  gap: 4px;
}
.event_wrap .one_flex {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.event_wrap .one_flex .one{
  width: 5px;
  height: 5px;
  background-color: #1C4A85;
  border-radius: 2px;
}
.event_wrap .digit {
  position: relative;
  width: 35px;
  height: 50px;
  background: #1C4A85;
  color: #ffffff;
  font-size: 25px;
  font-weight: 600;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.event_wrap .utube_link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #e2e2e2;
  height: 80px;
  width: 100%;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  transition: .3s;
}
.event_wrap .utube_link:hover{
  box-shadow: 0 0 15px 0 #007AFF;
}
body[data-theme="dark"] .event_wrap .utube_link:hover{
  box-shadow: 0 0 15px 0 #e2e2e2;
}
.event_wrap .utube_link .imgbox{
  width: 30px;
}
.event_wrap .utube_link .imgbox img{
  width: 100%;
}

.event_wrap .section02 .rank {
  justify-content: start;
  flex-wrap: wrap;
}
.event_wrap .section02 .rank .name_flex span{
  font-size: 16px;
  font-weight: 400;
  margin-left: auto;
  gap: 10px;
  opacity: .5;
}
.event_wrap .horizon_line {
  margin: 50px 0;
}

.event_wrap #ch_board_write .com_title{
  display: flex;
  align-items: center;
  gap: 20px;
}
.event_wrap #ch_board_write .custom-select {
  position: relative;
  width: 280px;
}

.event_wrap #ch_board_write .selected {
  background: #f4f4f4;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #ccc;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
body[data-theme="dark"] .event_wrap #ch_board_write .selected {
  background-color: #222;
  border-color: #333;
}
.event_wrap #ch_board_write .selected .iconbox{
  width: 30px;
  height: 30px;
}
.event_wrap #ch_board_write .selected .iconbox img{
  width: 100%;
}
body[data-theme="dark"] .event_wrap #ch_board_write .selected .iconbox img{
  filter: brightness(0) invert(1);
}
.event_wrap #ch_board_write .selected .imgbox{
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
.event_wrap #ch_board_write .selected .imgbox img{
  width: 100%;
}
body[data-theme="dark"] .event_wrap #ch_board_write .selected .imgbox .Coinness{
  filter: brightness(0) invert(1);
}
.event_wrap #ch_board_write .selected .text {
  width: calc(100% - 40px);
}
.event_wrap #ch_board_write .selected .text .eng {
  font-weight: 600;
  font-size: 18px;
}

.event_wrap #ch_board_write .selected .text .kor {
  font-size: 13px;
  color: #777;

}

.event_wrap #ch_board_write .select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 4px;
  display: none;
  z-index: 10;
}
body[data-theme="dark"] .event_wrap #ch_board_write .select-options{
  background-color: #222;
  border-color: #333;
}
.event_wrap #ch_board_write .select-options li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.event_wrap #ch_board_write .select-options li .imgbox{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  overflow: hidden;
}
.event_wrap #ch_board_write .select-options li .imgbox img{
  width: 100%;
}
body[data-theme="dark"] .event_wrap #ch_board_write .select-options .coinness .imgbox img{
  filter: brightness(0) invert(1);
}

.event_wrap #ch_board_write .select-options li:hover {
  background: #e9f5ff;
}
body[data-theme="dark"] .event_wrap #ch_board_write .select-options li:hover {
  background: #333;
}

.event_wrap #ch_board_write .text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.2;
  width: calc(100% - 40px);
  gap: 10px;
}

.event_wrap #ch_board_write .text .eng {
  font-weight: 600;
  font-size: 18px;
}

.event_wrap #ch_board_write .text .kor {
  font-size: 13px;
  color: #777;
}

.event_wrap #ch_board_write .section02 {
  width: 100%;
  display: flex;
  gap: 30px;
  align-items: start;
}
.event_wrap #ch_board_write .section02 .write_box{
  width: calc(25% - 15px);
}
.event_wrap #ch_board_write .input_type01 {
  max-width: unset;
  margin-bottom: 10px;
}
.event_wrap #ch_board_write .input_type01 input {
  width: 100%;
  text-align: start;
  background: inherit;
}
.event_wrap #ch_board_write .input_type05 {
  max-width: unset;
  margin-bottom: 10px;
}
.event_wrap #ch_board_write .input_type05 input {
  width: 100%;
  text-align: start;
  background: inherit;
}
.event_wrap #ch_board_write .album-box {
  height: auto;
  margin-bottom: 10px;
  justify-content: space-between;
  width: 100% !important;
}
.event_wrap #ch_board_write .upload-area {
  flex-direction: column;
}
.event_wrap #ch_board_write .controls {
  min-width: 80px;
  width: 100%;
  margin-bottom: 5px;
}.event_wrap #ch_board_write .comment {
  font-size: 14px;
  font-weight: 500;
  color: #808080;
}
.event_wrap #ch_board_write .controls label {
  min-width: 80px;
  width: 100%;
  height: 80px;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}
.event_wrap #ch_board_write .input_type03 {
  float: unset;
  margin-bottom: 20px;
}
.event_wrap #ch_board_write .input_type04 {
  float: unset;
  height: auto;
  justify-content: center;
  gap: 20px;
}
.event_wrap #ch_board_write .btn_box {
  margin-top: 0px;
}
.event_wrap #ch_board_write .thumb {
  width: 65px;
  height: 65px;
}
.event_wrap #ch_board_write .album_position {
  position: relative;
  width: 100%;
}



  /* ✅ 연도 선택 select 스타일 */
  .year_select_box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
  }
  
  /* ✅ 셀렉트와 아이콘 감싸는 래퍼 */
  .year_select_wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  
  /* ✅ 기본 select 스타일 */
  .year_select_wrapper select {
    appearance: none; /* 브라우저 기본 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 6px 40px 6px 12px; /* 오른쪽에 아이콘 공간 확보 */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    outline: none;
  }
  body[data-theme="dark"] .year_select_wrapper select {
    border: 1px solid #555;
    background: #222;
    color: #fff;
  }
  
  /* ✅ 아이콘 위치 */
  .year_select_wrapper .imgbox {
    position: absolute;
    right: 10px;
    pointer-events: none; /* 클릭이 select에 전달되도록 */
    width: 20px;
    height: 20px;
  }
  
  .year_select_wrapper .imgbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
body[data-theme="dark"] .year_select_wrapper .imgbox img {
    filter: brightness(0) invert(1);
}

#ch_history .section02 .year_box{
  position: relative;
  margin-bottom: 80px;
}
#ch_history .section02 .slide_title{
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 30px;
}
#ch_history .section02 .history_mySwiper {
  width: 100%;
  overflow: hidden;
  height: fit-content;
}

#ch_history .section02 .history_mySwiper .swiper-slide {
  font-size: 18px;
  background: #f5f6fa;
  border: 1px solid #e2e2e2;
  padding: 30px 20px;
  height: fit-content;
}
body[data-theme="dark"] #ch_history .section02 .history_mySwiper .swiper-slide {
  font-size: 18px;
  background: #222;
  border: 1px solid #555;
}

#ch_history .section02 .history_mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ch_history .section02 .swiper-button-next {
  right: -70px !important;
  left: auto;
}
#ch_history .section02 .swiper-button-prev {
  left: -70px !important;
  right: auto;
}
#ch_history .section02 .history_mySwiper .swiper-slide .month{
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 30px;
}
#ch_history .section02 .history_mySwiper .swiper-slide .month span{
  font-size: 18px;
  font-weight: 600;
  color: #007aff;
}
#ch_history .section02 .table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#ch_history .section02 .table .thead .tr{
  padding: 0 15px;
}
#ch_history .section02 .table .thead .tr .td{
  font-weight: 500;
  opacity: .5;
}
#ch_history .section02 .table .tr{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 15px;
}
#ch_history .section02 .table .tbody .tr{
  background-color: #fff;
  /* border: 1px solid #e2e2e2; */
  box-shadow: 0 0 5px 0 #e2e2e2;
  border-radius: 10px;
  margin-bottom: 5px;
}
body[data-theme="dark"] #ch_history .section02 .table .tbody .tr{
  background-color: #333;
  box-shadow: unset;
}
#ch_history .section02 .table .tr .td{
  font-size: 14px;
  font-weight: 400;
}
#ch_history .section02 .table .tbody .plus {
  border: 1px solid #00a80e;
}
#ch_history .section02 .table .tbody .plus .td:not(:first-child){
  color: #00a80e;
}
#ch_history .section02 .table .tbody .minus{
  border: 1px solid #f00;
}
#ch_history .section02 .table .tbody .minus .td:not(:first-child){
  color: #f00;
}
#ch_history .section02 .table .tbody .tr:last-child{
  margin-top: 50px;
}
#ch_history .section02 .table .tbody .tr:last-child .td{
  font-size: 16px;
  font-weight: 600;
}
#ch_history .section02 .table .tr .week{
  width: 30%;
}
#ch_history .section02 .table .tr .amount{
  width: 50%;
  margin-left: auto;
  text-align: end;
}
#ch_history .section02 .table .tr .percent{
  width: 20%;
  text-align: end;
}

.custom-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.custom-check .check-img {
  width: 15px;
  height: 15px;
  transition: 0.2s;
  content: url("../img/check_off.svg"); /* 기본 이미지 */
}

/* ✅ 라이트모드에서 active일 때 */
.custom-check.active .check-img {
  content: url("../img/check_on1.svg");
}

/* ✅ 다크모드에서 active일 때 */
body[data-theme="dark"] .custom-check.active .check-img {
  content: url("../img/check_on2.svg");
}