body { background:#323a45; padding:0; }
.p_color { color:#3d6eb1 }
.banner_area { margin:0px auto; text-align:center; width:100%; }
.banner_area img { max-width:100%; }
* { box-sizing:border-box; }
 .collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height 0.35s ease}


#mof_wrap { width:100%; max-width:2000px; margin:0 auto; display:flex; min-height:100vh; position:relative; background:#323a45;  }
#left_wrap { width:250px; flex-shrink:0; flex-grow:0; height:100%; }
#left_wrap > div.sidebar { width:250px; background:#323a45; height:100%;}
.mof_right { flex-grow:1; width:100%; margin:0 auto; }
.mof_contents { background:#fff; border-radius:20px 20px 0 0;  margin-top:-130px; min-height:100%; margin-right:20px; padding:50px; }

.top_logo { width:250px; height:80px; position:absolute; top:0; left:0; text-align:center; display:flex; align-items:center; padding-left:20px; }
.top_logo img { max-height:55px; }

@media(max-width:1000px){
.mof_contents { background:#fff; border-radius: 0;  margin-top:-140px; min-height:100%; margin-right:0px; padding:20px; }
.top_logo { width:250px; height:60px; position:absolute; top:0; left:20px; text-align:center; display:flex;; align-items:center;  padding-left:40px; }
.top_logo img { max-height:45px; }
}


.mof_right .top_area_1 {  width:100%; background: rgb(24,113,240); background: linear-gradient(90deg, rgba(24,113,240,1) 0%, rgba(82,107,124,1) 100%); height:200px; }
.mof_right .top_area_1 .inner { display:flex; justify-content:space-between; align-items:center; height:70px; }
.top_area_1 .right_menu { display:flex; padding-right:20px; }
.top_area_1 .right_menu li { margin-left:10px; position:relative; padding-left:10px; }
.top_area_1 .right_menu li::after { display:block; position:absolute; left:0; top:14px; width:1px; height:12px; background:rgba(255,255,255,0.5); content:""; }
.top_area_1 .right_menu li:first-child::after { display:none; }
.top_area_1 .right_menu li a { height:40px; line-height:40px; padding:0 5px; font-size:13px; color:#fff; }

@media(max-width:1000px){
.top_area_1 .right_menu { display:none; }
.mof_right .top_area_1 .inner { display:flex; justify-content:space-between; align-items:center; height:50px; }
}



#left_wrap .top_area_1 { width:100%; }
#left_wrap .left_area_2 {  width:96%; margin:0 auto; }

.mof_logoarea { background:#1871f0;padding:20px; height:200px;  padding-top:60px; }
@media(max-width:1000px){
.mof_logoarea { background:#1871f0;padding:20px; height:170px;  padding-top:20px; }
}


.mof_menulist { padding:20px; }
.mof_menulist a { color:#fff; }



.mof_profile { color:#fff;  margin:20px 0 0; display:flex; align-items:center; }
.mof_profile .mylevel {  width:60px; }
.mof_profile .mylevel p { background:#fdda3b; height:60px; width:60px;; border-radius:30px;text-align:center; font-size:0; color:#333; font-weight:bold; line-height:57px; }
.mof_profile .mylevel p::first-letter { font-size:40px; }
.mof_profile .mylevel p.lv,
.mof_profile .mylevel p.lv::first-letter { font-size:25px; }
.mof_profile .mylevel span { font-size:12px; text-align:center; display:block; font-weight:bold; color:#fdda3b; margin-top:5px; }
.mof_profile ul { margin-left:20px; }
.mof_profile li { font-size:14px; }
.mof_profile li.myname { font-size:14px; }
.mof_profile li.myname strong { font-weight:bold; font-size:18px; margin-right:5px; }
.mof_profile li.myid { font-size:13px; }
.mof_profile li.myid span { font-size:11px; font-weight:bold; margin-right:5px; }
.mof_profile i { font-style:normal; }
.mof_btn_logout { margin-top:5px; }
.mof_btn_logout a { background:#323a45; color:#fff !important; font-size:12px; padding:1px 10px 2px 10px; display:block; text-align:center; }



.st_02_out { color:#fff; margin:20px 0;}
.st_02_out h2 { font-size:16px; padding:15px 0; text-align:center; }
.st_02_out ul { display:flex; justify-content:center; }
.st_02_out li { flex-grow:1; }
.st_02_out li:first-child { margin-right:10px; }
.st_02_out li a { color:#222; font-size:14px; background:#fdda3b; display:block; padding:3px 0px 4px; text-align:center; border-radius:3px; }






.top_menu { flex-grow:1; }
.top_menu > ul { }
.top_menu > ul > li { position:relative; }
.top_menu > ul > li > a { font-size:20px; display:block; padding:0px 10px; white-space:nowrap; height:100px; line-height:100px; color:#222; }
.top_menu > ul > li > span { display:none; }
.top_menu > ul > li:hover > a { color:#34508a; }
.top_menu > ul > li > ul { display:none; position:absolute; top:100px; left:50%; background:#fff; border:1px solid #ddd; z-index:3;
margin-left:-80px; width:160px; }
.top_menu > ul > li > ul > li { border-top:1px solid #ddd; }
.top_menu > ul > li > ul > li:first-child { border-top:0; }
.top_menu > ul > li > ul > li > a { text-align:center; font-size:15px; letter-spacing:-1px; white-space:nowrap; padding:10px 0 ; display:block; line-height:20px; color:#333; }
.top_menu > ul > li > ul > li:hover { background:#f5f5f5; }
.top_menu > ul > li > ul > li > a:hover { color:#111; }
.top_menu > ul > li:hover > ul { display:block; }

.top_icon_mypage { display:none; }

@media(max-width:1000px){
#left_wrap .top_area_1 { display:none; }
#left_wrap  { display:none;  position:fixed; left:0; top:0; height:100%; width:100%; z-index:999999999;  }



#left_wrap > div.sidebar { width:250px; background:#323a45; height:100%; overflow-y:auto;  padding-bottom:30px; box-sizing:border-box; }

.close_area { position:absolute; top:0; right:0; width:calc(100% - 250px); height:100%; z-index:5;background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; }
.close_area .sidemenu_close_btn {  background:#111; border-radius:30px; height:60px; width:60px; display:flex; align-items:center; justify-content:center; }


.top_menu { position:fixed; top:0; left:0; z-index:999; background:rgba(0,0,0,0.7); width:100%; height:100%; display:none; }
.top_menu > ul { display:block; width:70%; background:#fff; height:100%; padding:0px 0 70px 0; position:relative; box-shadow:30px 0px 30px rgba(0,0,0,0.5); overflow-y:auto;}
.top_menu > ul > li { position:relative; border-bottom:1px solid #ddd;  }
.top_menu > ul > li:first-child { border-top:0; }
.top_menu > ul > li > a { display:none; font-size:18px; padding:0px 20px; white-space:nowrap; height:45px; line-height:45px; color:#222; }
.top_menu > ul > li > span { display:block;  font-size:18px;  padding:0px 20px; white-space:nowrap; height:45px; line-height:45px; color:#222;  }
.top_menu > ul > li:hover > a { color:#34508a; }
.top_menu > ul > li > ul { display:none; position:static; top:40px; left:0; background:#f1f1f1; border:0; z-index:3; margin-left:0px; width:auto; padding:10px 0;   border-top:1px solid #ddd;  ; }
.top_menu > ul > li > ul > li { border-top:0; }
.top_menu > ul > li > ul > li:first-child {}
.top_menu > ul > li > ul > li > a { text-align:left; font-size:15px; letter-spacing:-1px; white-space:nowrap;padding:5px 20px; display:block; line-height:20px; color:#333; }
.top_menu > ul > li > ul > li:hover { background:none; }
.top_menu > ul > li > ul > li > a:hover { color:#111; }
.top_menu > ul > li:hover > ul { display:block; }
#mof_wrap .sidemenu_open_btn { width:20px; position:absolute; top:16px; left:20px;  cursor:pointer; }
#mof_wrap .sidemenu_open_btn i { width:20px; height:2px; background:#fff; margin:5px 0; display:block; }


.top_icon_mypage { position:absolute; top:11px; right:15px; text-align:center; }
.top_icon_mypage .menu_t_mypage { width:30px; text-align:center; }
.top_icon_mypage .menu_t_mypage img { width:25px; margin-bottom:0; }
.top_icon_mypage .menu_t_mypage span { font-size:9px; white-space:nowrap; color:#222; display:block; }
.top_icon_mypage .menu_t_link { border:1px solid #fff; display:flex; align-items:center; padding:4px 8px 5px; border-radius:15px; margin-top:6px; cursor:pointer; }
.top_icon_mypage .menu_t_link span { font-size:12px; white-space:nowrap; color:#fff; font-weight:bold; }
.top_icon_mypage .menu_t_link_a { border:1px solid #fff; display:flex; align-items:center; padding:4px 8px 5px; border-radius:15px; margin-top:6px; cursor:pointer; }
.top_icon_mypage .menu_t_link_a a { font-size:12px; white-space:nowrap; color:#fff; font-weight:bold; }

}


@media(min-width:1001px){
.top_menu { display:block !important; }
}



#footer { background:#f5f5f5; padding:0px; width:100%; }
#footer .footer_menu { background:#222; }
#footer .footer_menu ul { display:flex; justify-content:center; padding:15px 0; }
#footer .footer_menu ul li { padding:0 10px; }
#footer .footer_menu ul li a { font-size:15px; color:#fff; display:block; padding:3px 10px; }

.footer_address { display:flex; max-width:1400px; width:96%; margin:0 auto; padding:50px 0; }
.footer_address .bottom_logo { width:170px; margin-right:50px; flex-shrink:0; }
.footer_address .bottom_info { display:flex; flex-wrap:wrap; line-height:160% }
.footer_address .bottom_info span { font-size:13px; margin:0 10px; color:#777; white-space:nowrap; }
.footer_address .bottom_info a {  font-size:13px; color:#777; }
.footer_address .bottom_info span.s_w100 { width:100%; margin-top:5px; }



@media(max-width:1000px){
#footer { background:#f5f5f5; padding:0px; width:100%; padding-bottom:30px; }
#footer .footer_menu { background:#222; }
#footer .footer_menu ul { display:flex; justify-content:flex-start; padding:10px 5px; flex-wrap:wrap; }
#footer .footer_menu ul li { padding:0 5px; }
#footer .footer_menu ul li a { font-size:11px; color:#fff; display:block; padding:1px 5px; }

.footer_address { display:flex; max-width:1400px; width:96%; margin:0 auto; padding:20px 0; flex-wrap:wrap; }
.footer_address .bottom_logo { width:cacl(100% - 10px); margin:0 10px; flex-shrink:0; }
.footer_address .bottom_logo img { max-width:150px; height:30px; margin-bottom:10px;  }
.footer_address .bottom_info { display:flex; flex-wrap:wrap; line-height:16px }
.footer_address .bottom_info span { font-size:9px; margin:0 5px; color:#777; line-height:12px; white-space:wrap;  }
.footer_address .bottom_info a { font-size:9px; color:#777; }
.footer_address .bottom_info span.s_w100 { width:cacl(100% - 10px); margin:5px 5px; }
}

.page_loadding { font-size:11px !important; position:fixed; bottom:10px; left:10px; background:rgba(0,0,0,0.7); color:#fff; padding:3px 10px; max-width:calc(100% - 20px ); }

@media(max-width:1000px){
.page_loadding { display:none; }
}
 
/* 모바일 하단 픽스 배너 */
.bottom_banner { position:fixed; bottom:0; width:100%; z-index:90; background:#fff;box-shadow:0 0 5px rgba(0,0,0,0.4); }
.bottom_banner ul { display:flex; justify-content:space-between; width:100%; margin:0 auto; }
.bottom_banner ul li { height:46px; width:calc(100% / 5); color:#222; line-height:43px; font-size:12px; text-align:center; }
.bottom_banner ul li a { display:block; }
.bottom_banner ul li.m_btn_home { position:relative; }
.bottom_banner ul li.m_btn_home a { position:absolute; bottom:10px; background:#333; display:flex; justify-content:center; align-items:center; 
width:50px; height:50px; border-radius:25px; left:50%; margin-left:-25px; font-size:14px; color:#fff; box-shadow:0 0 5px rgba(0,0,0,0.4); }
.bottom_banner ul li.m_btn_home img { width:25px; }

/* 모바일 사이드 메뉴 */
.sidemenu_toparea { padding:0px; }
.sidemenu_toparea .st_01 { padding:15px 20px; }
.sidemenu_toparea .st_01 img { height:30px; }
.sidemenu_toparea .st_02 { background:#e8eef8;  padding:20px 20px; }
.sidemenu_toparea .st_02 .st_myinfo { margin-bottom:10px; }
.sidemenu_toparea .st_02 .st_myinfo li { color:#222; font-size:14px; display:flex; align-items:center; }
.sidemenu_toparea .st_02 .st_myinfo li i { font-style:normal; margin-right:10px; color:#777; }
.sidemenu_toparea .st_02 .st_myinfo li strong { font-weight:500; color:#222; }
.sidemenu_toparea .st_02 .st_myinfo li span { font-size:11px; margin-left:3px; }
.sidemenu_toparea .st_02 .st_menu a { display:block; background:rgba(0,0,0,0.7); color:#fff; text-align:center; padding:7px 0; width:100%; border-radius:5px; font-size:12px }
.sidemenu_toparea .st_02_out { background:#444; padding:15px 20px 20px 20px; margin:0px 0 10px; }
.sidemenu_toparea .st_02_out h2 { text-align:center; margin-bottom:10px; font-size:13px; color:#fff; }
.sidemenu_toparea .st_02_out ul { display:flex; justify-content:space-between; }
.sidemenu_toparea .st_02_out ul li { width:calc(50% - 3px); }
.sidemenu_toparea .st_02_out a { display:block; color:#fff; text-align:center; padding:5px 0; width:100%; border-radius:5px; font-size:14px; 
background:#111; }







.link_toggle { position:fixed; width:100%; left:0; top:0;  z-index:999; align-items:center; height:100%; display:none; }
.link_toggle_colose { position:absolute; top:40px; right:40px; }
.link_toggle_inner { width:100%; max-width:700px; padding:50px 0; margin:0 auto;  background:rgba(0,0,0,0.9); height:100%; position:relative; 
 display:flex; align-items:center; } 
 .link_toggle_inner > div { width:100%; }
.link_toggle h1 { padding:30px; font-size:25px; text-align:center; color:#fff; }
.link_toggle #text3 { font-size:15px;   display:flex;  flex-wrap:wrap; align-items:center; }
.link_toggle #text3 span { display:block; margin:5px 10px 5px 0; }
.link_toggle #text2 { font-size:16px; display:flex;  flex-wrap:wrap; align-items:center; }
.link_toggle #text2 span { display:block; margin:5px 10px 5px 0; color:#fff; width:100%; text-align:Center;  }
.link_toggle .copy_btn { font-size:13px; border:0; width:80%; max-width:200px; text-align:center; margin:10px auto; font-size:18px; 
background:#f37b22; color:#fff; border-radius:5px; padding:0px 4px 2px; height:36px; cursor:pointer; }
.link_toggle > ul { display:flex; justify-content:space-between; }


.link_toggle .sns_link { text-align:center; padding:20px 0; }
.link_toggle .sns_link ul { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; }
.link_toggle .sns_link ul li { margin-right:10px; margin-top:10px;  border-radius:15px; height:35px; width:35px;
display:flex; justify-content:center; align-items:center; }
.link_toggle .sns_link ul li img { border-radius:50%; }
.link_toggle .sns_link ul li.kakaotalk { background:#f9e000; width:125px; }
.link_toggle .sns_link ul li.kakaotalk a { display:block;  font-size:13px; font-weight:400; }
.link_toggle .sns_link ul li.kakaotalk img { width:30px; }







.color_a { color:#204fae; }
.color_a_bg { background-color:#204fae !important; }
.category > li > a.on { color:#204fae !important; }

.pc_on { display:block; }
.m_on { display:none; }

@media(max-width:1000px){
.pc_on { display:none; }
.m_on { display:block; }
}





.menu_list { padding:20px; }
.menu_list a { color:#fff; }

.menu_list .accordion {  width: 100%; }
.menu_list .accordion .link { cursor: pointer;  display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:18px;  padding:10px 0;  -webkit-transition: all 0.4s ease;  -o-transition: all 0.4s ease;  transition: all 0.4s ease; }
.menu_list .accordion .link span.arrow { font-size:12px; color:rgba(255,255,255,0.5); }
.menu_list .accordion .open .link { color: #fdda3b; }

.menu_list .submenu {  display: none; padding:10px 0;  }
.menu_list .submenu li { position:relative; padding-left:20px; height:30px; }
.menu_list .submenu li::after { position:absolute; left:3px; top:0; height:30px; width:1px; background:#fff; content:""; display:block; }
.menu_list .submenu a {  font-size:15px; display:block; line-height:18px; padding:6px 0; color:#fff;   -webkit-transition: all 0.25s ease;  -o-transition: all 0.25s ease;  transition: all 0.25s ease;}
.menu_list .submenu a:hover { color:#fdda3b; }
.menu_list .submenu li:hover::before { position:absolute; left:1px; top:12px; height:6px; width:6px; background:#fdda3b; content:""; display:block; border-radius:3px; }


/*
.menu_list .accordion li.open .link { color: #333; }
.menu_list .accordion li.open i { color: #aaa; }
.menu_list .accordion li.open i.fa-chevron-down {  -webkit-transform: rotate(180deg);  -ms-transform: rotate(180deg);  -o-transform: rotate(180deg);  transform: rotate(180deg);}
*/



.fixed_btn_prev { display:none; }
.fixed_btn_top  { position:fixed; right:30px; bottom:30px; background:#fff; border-radius:25px; width:50px; height:50px; box-shadow:0 0 5px rgba(0,0,0,0.5); 
display:flex; justify-content:center; align-items:center; cursor:pointer }
.fixed_btn_top a { transform:rotate( 90deg ); display:block;  width:60%; }
.fixed_btn_top img { }


@media(max-width:1000px){
.fixed_btn_prev { position:fixed; left:10px; bottom:60px; background:#fff; border-radius:20px; width:40px; height:40px; box-shadow:0 0 5px rgba(0,0,0,0.5); 
display:flex; justify-content:center; align-items:center; cursor:pointer }
.fixed_btn_prev img { width:60% }
.fixed_btn_top  { position:fixed; right:10px; bottom:60px; background:#fff; border-radius:20px; width:40px; height:40px; box-shadow:0 0 5px rgba(0,0,0,0.5); 
display:flex; justify-content:center; align-items:center; cursor:pointer }
}