@charset "utf-8";

/* 메인과 서브에서 공통으로 쓰는 css */

.point0{color:#5c8698 !important;}
.point0 > *{color:#5c8698 !important;}
.bg_point0{background-color:#5c8698 !important;}
.svg_point0{fill:#5c8698 !important;}
.stroke_point0{stroke:#5c8698 !important;}
.border_point0{border-color:#5c8698 !important;}
.before_point0::before{color:#5c8698 !important;}
.before_bg_point0::before{background-color:#5c8698 !important;}
input:checked + label.checked_before_bg_point0::before{background-color: #5c8698 !important;}
.after_point0::after{color:#5c8698 !important;}
.after_bg_point0::after{background-color:#5c8698 !important;}

.point1{color:#5bcdff !important;}
.point1 > *{color:#5bcdff !important;}
.bg_point1{background-color:#5bcdff !important;}
.svg_point1{fill:#5bcdff !important;}
.stroke_point1{stroke:#5bcdff !important;}
.border_point1{border-color:#5bcdff !important;}
.before_point1::before{color:#5bcdff !important;}
.before_bg_point1::before{background-color:#5bcdff !important;}
input:checked + label.checked_before_bg_point1::before{background-color: #5bcdff !important;}
.after_point1::after{color:#5bcdff !important;}
.after_bg_point1::after{background-color:#5bcdff !important;}

.point2{color:#75fcff !important;}
.point2 > *{color:#75fcff !important;}
.bg_point2{background-color:#75fcff !important;}
.svg_point2{fill:#75fcff !important;}
.stroke_point2{stroke:#75fcff !important;}
.border_point2{border-color:#75fcff !important;}
.before_point2::before{color:#75fcff !important;}
.before_bg_point2::before{background-color:#75fcff !important;}
input:checked + label.checked_before_bg_point2::before{background-color: #75fcff !important;}
.after_point2::after{color:#75fcff !important;}
.after_bg_point2::after{background-color:#75fcff !important;}
.swiper_pagi_bg_point0 .swiper-pagination-bullet {background-color:#5c8698 !important;}

/* util_menu */
#myLangMenu .language_select_wrap{font-size: 14px;}
#myLangMenu .selected_item{position: relative; font-size: 14px; font-weight: 600; line-height: normal; padding-right: 15px; padding-left: 15px; margin-right: 15px; cursor: pointer; color: #fff;}
.myinfo_page #myLangMenu .selected_item{color: #000;}
.fixed_header_wrap #myLangMenu .selected_item{color: #000;}
.header_wrap.active #myLangMenu .selected_item{color: #fff;}
.fixed_active #myLangMenu .selected_item{color: #fff;}
#myLangMenu .selected_item::after{position: absolute; content: ''; border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%; transform: translateY(-50%); right: 0px; left: unset; width: auto;}
.myinfo_page #myLangMenu .selected_item::after{border-top: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%; transform: translateY(-50%); right: 0px;}
.fixed_header_wrap #myLangMenu .selected_item::after{border-top: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%; transform: translateY(-50%); right: 0px;}
.header_wrap.active #myLangMenu .selected_item::after{border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.fixed_active #myLangMenu .selected_item::after{border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent;}
#myLangMenu .selected_item.active{color: #23b9d8;}
#myLangMenu .selected_item.active::after{border-top: 4px solid #23b9d8; border-left: 4px solid transparent; border-right: 4px solid transparent;}
#myLangMenu .selected_item.active::before{display: inline-block; position: absolute; content: '';width: 100%; height: 30px; left: 0; top: 100%;}
#myLangMenu .selected_item.active + .select_style_0_con{display: block;}
#myLangMenu .select_style_0_con{display: none; position: relative; width: 100px; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%);}
#myLangMenu .select_style_0_con.active{display: block;}
#myLangMenu .select_style_0_con.active::before{position: absolute; content: '';width: 100%; height: 30px; left:0; top: -30px;}
#myLangMenu .select_style_0_con.active + .selected_item{color: #23b9d8;}
#myLangMenu .select_style_0_con.active + .selected_item::after{border-top: 4px solid #23b9d8; border-left: 4px solid transparent; border-right: 4px solid transparent;}
#myLangMenu .select_style_0{font-size: 14px; font-weight: 700; line-height: normal; display: flex; flex-direction: column; justify-content: center; background-color: #1cb5d5; padding-top: 10px; padding-bottom: 10px; width: 100%; border-radius: 6px;}
#myLangMenu .select_style_0>li{display: inline-block; width: 100%;}
#myLangMenu .select_style_0>li a{display: inline-block; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; width: 100%; text-align: center; color: #a0e6f4;}
#myLangMenu .select_style_0>li:hover a{color: #fff;}
#myPageMenu{font-size: 14px; line-height: normal; display: flex; gap: 10px;}
#myPageMenu>li+li{position: relative; margin-left: 10px;}
#myPageMenu>li+li::before{position: absolute; content: ''; height: 10px; border-left: 1px solid #fff; top: 50%; transform: translateY(-50%); left: -10px;}
#myPageMenu .myPageTitle{position: relative; font-size: 14px; font-weight: 600; line-height: normal; padding-right: 15px; padding-left: 2px; margin-right: 15px; cursor: pointer; color: #fff;}
#myPageMenu .myPageTitle::after{position: absolute; content: ''; border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%; transform: translateY(-50%); right: 0px;}
.myinfo_page .header_wrap.active #myPageMenu .myPageTitle{color: #fff;}
.myinfo_page .header_wrap.active #myPageMenu .myPageTitle::after{border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%; transform: translateY(-50%); right: 0px;}
.myinfo_page .fixed_active #myPageMenu .myPageTitle{color: #fff;}
.myinfo_page .fixed_active #myPageMenu .myPageTitle::after{border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%; transform: translateY(-50%); right: 0px;}
.fixed_header_wrap .fixed_active #myPageMenu .myPageTitle{color: #fff;}
.fixed_header_wrap .fixed_active #myPageMenu .myPageTitle::after{border-top: 4px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%; transform: translateY(-50%); right: 0px;}
.myinfo_page #myPageMenu .myPageTitle{color: #000;}
.fixed_header_wrap #myPageMenu .myPageTitle{color: #000;}
.myinfo_page #myPageMenu .myPageTitle::after{border-top: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%;}
.fixed_header_wrap #myPageMenu .myPageTitle::after{border-top: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; top: 50%;}
#myPageMenu .myPageTitle::before{position: absolute; content: '';width: 100%; height: 30px; left: 0; top: 100%;}
#myPageMenu .loginMenu:hover .myPage_list_wrap{display: block;}
#myPageMenu .loginMenu:hover .myPageTitle{color: #23b9d8;}
#myPageMenu .loginMenu:hover .myPageTitle::after{border-top: 4px solid #23b9d8; border-left: 4px solid transparent; border-right: 4px solid transparent;}
#myPageMenu .myPage_list_wrap{ display: none; position: absolute; width: 170px; border-radius: 6px; left: 50%; top: calc(100% + 18px); transform: translateX(calc(-50% - 14px)); background-color: #1cb5d5; z-index: 1000; padding: 3px; box-sizing: border-box;}
#myPageMenu .myPage_list_wrap:hover{display: block;}
#myPageMenu .myPage_list_wrap:hover::before{display: inline-block; position: absolute; content: '';width: 100%; height: 30px; left:0; top: -30px;}
#myPageMenu .myPage_list_con{display: inline-flex; position: relative; width: 100%; gap: 2px; flex-direction: column; box-sizing: border-box;}
#myPageMenu .myPage_list_con li{ display: inline-block; width: 100%; text-align: center; box-sizing: border-box;}
#myPageMenu .myPage_list_con li.is_important{background-color: #49c4dd;}
#myPageMenu .myPage_list_con li.last{margin-bottom: 5px;}
#myPageMenu .myPage_list_con li.is_important:hover{background-color: #77d3e6;}
#myPageMenu .myPage_list_con li.is_important a{color: #fff;}
#myPageMenu .myPage_list_con li a{display: inline-block; width: 100%; color: #a0e6f4; font-weight: 700; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box;}
#myPageMenu .myPage_list_con li:hover a{color: #fff;}



@media all and (min-width:992px){
    .h_point0:hover{color:#5c8698 !important;}
    .bg_h_point0:hover{background-color:#5c8698 !important;}
    .svg_h_point0:hover{fill:#5c8698 !important;}
    .border_h_point0:hover{border-color:#5c8698 !important;}

    .h_point1:hover{color:#5bcdff !important;}
    .bg_h_point1:hover{background-color:#5bcdff !important;}
    .svg_h_point1:hover{fill:#5bcdff !important;}
    .border_h_point1:hover{border-color:#5bcdff !important;}

    .h_point2:hover{color:#75fcff !important;}
    .bg_h_point2:hover{background-color:#75fcff !important;}
    .svg_h_point2:hover{fill:#75fcff !important;}
    .border_h_point2:hover{border-color:#75fcff !important;}
}