@charset "utf-8";
/* CSS Document */

/* version 20220302 */

body { background-color:#ffffff; font-family:'Nanum Gothic'}
   

@media only screen and (max-width:440px)  { 
    #header .gnb .top_logo { width:216px; height:36px; top:50%; margin-top:-18px; left:0; position:absolute; }
    #header .gnb .top_logo a { width:216px; height:36px; background:url(../../resources/images/logo_mo.png); background-size:cover; display:block;}
    #header .gnb .navMobile button.navOpen{position:absolute; width:50px; height:50px; top:15px; right:5px; margin:0; padding:0; background:transparent; cursor:pointer;}
}    
@media only screen and (max-width:680px)  { 
    /*본문 스타일 시작 */
    .blind_mo {display: none;}

    /* Header ------------------------------------------------------------------------------------------------------------------------------------- */

    /* header layout */
    #header { width:100%; height:50px; position:fixed; top:0;  z-index: 150; }
    #header .top_line { display: none;}
    #header .gnb { width:100%; height:50px; margin:0 auto; position:relative; background-color:#2a3865;}
    #header .gnb .top_logo { width:216px; height:36px; top:50%; margin-top:-18px; left:0; position:absolute; }
    #header .gnb .top_logo a { width:216px; height:36px; background:url(../../resources/images/logo_mo.png); background-size:cover; display:block;}
    #header .gnb .sitemap_btn {display:none;}
    #header .gnb .spot {display: none;}

    #smaplayer { display:none;}
    #smaplayer .sitemap_area{ display:none;}

    /* admin login */
    .admin_btn { width:20px; height:20px; z-index:999; display:block; position:fixed; top:0; left:0; cursor:default;}

    #admin_login  { width:100%; margin:50px 0;}
    #admin_login .login_box { width:100%; margin:0 auto; box-sizing: border-box; padding:30px;}
    #admin_login .login_box .login_logo { width:300px; height:50px; background:url(../../resources/images/logo_admin.png); background-size:cover; display:block; margin:0 auto; margin-bottom:20px !important;}
    #admin_login .login_box .input_wrap {width:100%;}
    #admin_login .login_box .input_wrap li { width:100%; height:50px; margin:20px 0;}
    #admin_login .login_box .input_wrap li input { width:100%; height:50px; border-top:none; border-left:none ; border-right:none; background-color:#ffffff !important; border-bottom: 1px solid #535353 !important; font-size:20px ; text-indent:15px; border-radius:0 !important;}
    #admin_login .login_box .input_wrap .btn_ok { width:100%; height:70px;}
    #admin_login .login_box .input_wrap .btn_ok .btn_login:link,
    #admin_login .login_box .input_wrap .btn_ok .btn_login:active,
    #admin_login .login_box .input_wrap .btn_ok .btn_login:visited { width:100%; height:60px; text-align:center; line-height:60px; color:#ffffff; background-color:#ef5660; display:block; font-size:25px; font-weight:800;}
    #admin_login .login_box .input_wrap .btn_ok .btn_login:hover { color:#ffffff; background-color:#182c54;}
    #admin_login .login_box .input_wrap .btn_reset { width:100%; text-align:right; font-size: 15px; line-height:25px;}

    #admin_login .login_box .input_wrap .admin_ck { width:100%; height:10vw; position: relative; line-height:10vw; background-color:#f3f3ed; text-indent:2vw; font-size:3.5vw;}
    #admin_login .login_box .input_wrap .admin_ck .ip_ck { width:6vw !important; height:6vw !important; position: absolute; top:2vw; right:2vw;}

    /* passward change */
    #pwchange  { width:100%; height:100%; position: relative;}
    #pwchange .change_box { width:100%;  box-sizing: border-box; padding:4vw; margin-top:10vw;}
    #pwchange .change_box .login_logo { width:60vw; height:10vw; background:url(../../resources/images/logo_admin.png); background-size:cover; display:block; margin:0 auto; margin-bottom:20px !important;}
    #pwchange .change_box .input_wrap {width:100%;}
    #pwchange .change_box .input_wrap li { width:100%; height:50px; margin:20px 0;}
    #pwchange .change_box .input_wrap li input { width:100%; height:50px; border-top:none; border-left:none ; border-right:none; background-color:#ffffff !important; border-bottom: 1px solid #535353 !important; font-size:20px ; text-indent:15px; border-radius:0 !important;}
    #pwchange .change_box .input_wrap .btn_ok { width:100%; height:70px;}
    #pwchange .change_box .input_wrap .btn_ok .btn_check:link,
    #pwchange .change_box .input_wrap .btn_ok .btn_check:active,
    #pwchange .change_box .input_wrap .btn_ok .btn_check:visited { width:100%; height:60px; text-align:center; line-height:60px; color:#ffffff; background-color:#2e8be2; display:block; font-size:25px; font-weight:800;}
    #pwchange .change_box .input_wrap .btn_ok .btn_check:hover { color:#ffffff; background-color:#182c54;}
    #pwchange .change_box .input_wrap .btn_ok .btn_next:link,
    #pwchange .change_box .input_wrap .btn_ok .btn_next:active,
    #pwchange .change_box .input_wrap .btn_ok .btn_next:visited { width:100%; height:60px; text-align:center; line-height:60px; color:#ffffff; background-color:#ef5660; display:block; font-size:25px; font-weight:800;}
    #pwchange .change_box .input_wrap .btn_ok .btn_next:hover { color:#ffffff; background-color:#811c23;}

    /* menu navi */
    #navi { display: none;}

    #header .gnb .navMobile{display:block;}
    #header .gnb .navMobile button.navOpen{position:absolute; width:50px; height:50px; top:0; right:5px; margin:0; padding:0; background:transparent; cursor:pointer;}
    /*#header .gnb .navMobile button.navOpen span{display:block; width:100%; height:100%; background:url('../images/ico_nav_open.png') no-repeat center center; background-size:100%; font-size:0; opacity:1;}*/
    #header .gnb .navMobile button.navOpen span{display:block; position:relative; width:20px; height:2px; margin:0 auto; background:#fff; font-size:0;}
    #header .gnb .navMobile button.navOpen span:before, #header .gnb .navMobile button.navOpen span:after{content:''; display:block; position:absolute; width:20px; height:2px; background:#fff;}
    #header .gnb .navMobile button.navOpen span:before{top:-6px;}
    #header .gnb .navMobile button.navOpen span:after{bottom:-6px;}
    #header .gnb .navMobile button.navOpen:focus span, #header .gnb .navMobile button.navOpen:hover span{}
    #header .gnb .navMobile .navPanel button.navClose{position:absolute; width:50px; height:50px; top:0; right:5px; margin:0; padding:0; background:#961420; cursor:pointer;}
    /*#header .gnb .navMobile .navPanel button.navClose span{display:block; width:100%; height:100%; background:url('../images/ico_nav_close.png') no-repeat center center; background-size:100%; font-size:0; opacity:1;}*/
    #header .gnb .navMobile .navPanel button.navClose span{display:block; position:relative; width:20px; height:2px; margin:0 auto; background:transparent; font-size:0;}
    #header .gnb .navMobile .navPanel button.navClose span:before, #header .gnb .navMobile .navPanel button.navClose span:after{content:''; display:block; position:absolute; width:20px; height:2px; background:#fff;}
    #header .gnb .navMobile .navPanel button.navClose span:before{top:-6px; transform:translate3d(0,6px,0) rotate(45deg);}
    #header .gnb .navMobile .navPanel button.navClose span:after{bottom:-6px; transform:translate3d(0,-6px,0) rotate(-45deg);}
    #header .gnb .navMobile .navPanel button.navClose:focus span, #header .gnb .navMobile .navPanel button.navClose:hover span{}
    #header .gnb .navMobile .navPanel button.navClose:after{content:''; clear:both; display:block;}
    #header .gnb .navMobile .navPanel{display:block; position:fixed; width:100%; height:100%; top:0; right:-100%; background:transparent; overflow-y:auto; overflow:hidden; opacity:0; transition:opacity .3s ease-in-out; z-index:-1;}
    #header .gnb .navMobile .navPanel.open{right:0; opacity:1; z-index:0;}
    #header .gnb .navMobile .navPanel .menuArea{position:fixed; width:100%; height:100%; right:-100%; box-shadow:-4px 0 20px rgba(0,0,0,.1); overflow:hidden; transition:right .3s, opacity .2s ease-in-out;}
    #header .gnb .navMobile .navPanel.open .menuArea{right:0;}
    #header .gnb .navMobile .navPanel .menuArea .menuList { height: 100%;}
    #header .gnb .navMobile .navPanel .menuArea .menuList, 
    #header .gnb .navMobile .menuArea .menuList ul, 
    #header .gnb .navMobile .menuArea .menuList ul li, 
    #header .gnb .navMobile .menuArea .menuList ul li a{display:block; position:relative; line-height:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
    #header .gnb .navMobile .navPanel .menuArea .menuList{height:calc(100%); background:#961420; color:#fff; z-index:0; overflow-y:auto; padding-top:70px;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul{display:none;}
    #header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.active > ul{display:block;}
    #header .gnb .navMobile .navPanel .menuArea .menuList > ul > li > a{padding:20px 42px 20px 20px; background:#ce1c2e; border-bottom:1px solid #d35662; color:#ffffff; font-size:1.2rem; cursor:pointer; z-index:2;}
    #header .gnb .navMobile .navPanel .menuArea .menuList > ul > li > a:focus, #header .gnb .navMobile .menuArea .menuList > ul > li > a:hover{color:#ffffff;}
    #header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.hasSub > a:after{content:''; display:block; position:absolute; top:50%; right:18px; width:17px; height:9px; margin-top:-4.5px; background:url('../../resources/images/ico_plus_01.png') no-repeat center center; background-size:100%; z-index:5;}
    #header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.hasSub.open > a{color:#961420; font-weight:500; background-color:#ffffff;}
    #header .gnb .navMobile .navPanel .menuArea .menuList > ul > li.hasSub.open > a:after{background:url('../../resources/images/ico_minus_01.png') no-repeat center center; background-size:100%;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul li a{padding:15px 42px 15px 22px; background:#f3f3f3; border-bottom:1px solid #eee; color:#333; font-size:1rem; cursor:pointer; z-index:2;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul li a{position:relative; padding-left:32px; background:#c8cacb; border-bottom:1px solid #bbbebf; color:#555; font-size:1rem;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul li a:before{content:''; display:block; position:absolute; top:50%; left:24px; width:2px; height:2px; background:#4e3d32; border-radius:2px;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul li a:focus, #header .gnb .navMobile .navPanel .menuArea .menuList ul ul li a:hover{color:#000;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub > a:after{content:''; display:block; position:absolute; top:50%; right:21px; width:11px; height:11px; margin-top:-5.5px; background:url('../../resources/images/ico_plus_02.png') no-repeat center center; background-size:100%; z-index:5;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub.open > a{font-weight:500;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub.open > a:after{background:url('../../resources/images/ico_minus_02.png') no-repeat center center; background-size:100%;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li a{position:relative; padding-left:34px; background:#c8cacb; border-bottom:none; color:#676767; font-size:0.75rem;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li a:before{content:''; display:block; position:absolute; top:50%; left:28px; width:2px; height:2px; background:#777;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li a:focus, #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul li a:hover{color:#222;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul ul li.active a{color:#222;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul > li.hasSub > a:after{right:19.5px; width:7px; height:7px; margin-top:-3.5px; opacity:0.8;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul ul > li.hasSub.open > a:after{opacity:0.4;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul li.new a:after{content:''; display:inline-block; width:13px; height:13px; margin-left:8px; background:url('../../resources/images/ico_link.png') no-repeat center; vertical-align:bottom;}
    #header .gnb .navMobile .navPanel .menuArea .menuList ul ul li.new a:after{margin-left:4px;}
    #header .gnb .navPanel .menuBg{position:absolute; width:100%; height:100%; right:-100%; background:#000; opacity:0; z-index:-1; transition:opacity .3s ease-in-out;}
    #header .gnb .navPanel.open .menuBg{right:0; opacity:0.5;}

    #mo_spot { width:100%; height:30px; position: absolute; top:15px; left:10px;}
    #mo_spot ul { width:100%; height:20px; position: relative;} 
    #mo_spot ul li  { height:30px; line-height:30px; padding:0 20px; float:left; font-size:14px;}
    #mo_spot ul li a:link,
    #mo_spot ul li a:active,
    #mo_spot ul li a:visited { height:30px; line-height:30px; color:#ffffff; display: block;}

    #top_linker { position: absolute; top:0;}

    /* wrap container ------------------------------------------------------------------------------------------------------------------------------------- */

    /* container start */
    #wrap_con { width:100%; margin-top:50px;}

    /* page container */
    #wrap_con .main_visual { width:100%; height:80vw; mrgin:0 auto; position:relative; overflow: hidden;}
    #wrap_con .container { width:100%; }

    /* index ------------------------------------------------------------------------------------------------------------------------------------- */
        
    /* main image slied  */

    .slider { max-width: 100%; position: relative; }
    .slide-viewer { position: relative; overflow: hidden; height:80vw;}
    .slide-group { width: 100%; height: 100%; position: relative;}
    .slide { width: 100%; height: 100%; display: none; position: absolute; }
    .slide:first-child { display: block; }
    .slide img { width: 100%; }

    /* slide-nav */
    .slide-nav { display:none;}

    /* button */
    .slide-buttons { width:18vw; height:6vw; position: absolute; bottom:1.5vw; left:50%; margin-left:-9vw; z-index:3; text-align: center;}
    .slide-btn {display:none; }


    /* .slide-btn { width:6vw; border:none; background:none; font-size:10vw; color:#9f9f9f; line-height:6vw; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; }
    .slide-btn.active, .slide-btn:hover { color:#FFFFFF; cursor: pointer;} */
    
    .slider .event_pop { width:94vw; height:44vw; background-color:#ffffff; position: absolute; top:3vw; left:50%; margin-left:-47vw; z-index:10; border:1px solid #bdbdbd; box-sizing: border-box; }
    .slider .event_pop .pop_box { height:42vw; padding:1vw; position: relative; }
    .slider .event_pop .pop_box .ev_tit { width:100%; background-color:#f2021b; color:#ffffff; font-size:5vw; text-align:center; line-height:8vw; display:block; }
    .slider .event_pop .pop_box .ev_txt { width:100%;  font-size:2.6vw; line-height:4.5vw; margin-top:1.5vw; }
    .slider .event_pop .pop_box .ev_btn { width:50vw; height:7vw; line-height:7vw; font-size:3.4vw; font-weight:bold; background-color:#3767e3; color:#ffffff; text-align: center; display:block; position: absolute; bottom:1.5vw; left:50%; margin-left:-25vw; border-radius:3.5vw; }
    .slider .event_pop .pop_box ul {line-height:3.4vw; font-size:2.6vw;}
    .slider .event_pop .pop_box .ev_btn:hover { background-color:#2a3865; }    

    .slider .mslogan { position: absolute; width:100%; top:20vw; padding-left:12vw; z-index:10; box-sizing: border-box;}
    .slider .mslogan .slogan_kor01 { letter-spacing:-1px; line-height:9vw; font-size:5.6vw; color:#ffffff; font-weight:bold; text-shadow:3px 2px #000000;}
    .slider .mslogan .slogan_kor02 { letter-spacing:-1px; line-height:16vw; font-size:8vw; color:#ffffff; font-weight:bold; text-shadow:3px 2px #000000;}

    .slider .slide-1 { background:url(../../resources/images/main_img01_mo.jpg) no-repeat center; background-size:cover;}
    .slider .slide-2 { background:url(../../resources/images/main_img02_mo.jpg) no-repeat center; background-size: cover;}
    .slider .slide-3 { background:url(../../resources/images/main_img03_mo.jpg) no-repeat center; background-size: cover;}    

    /* main box container */

    /* main benner2 area */

    #wrap_con .container .ben_area { width:100%; padding:20px 0; }
    #wrap_con .container .ben_area .ben_ul { width:100%; height:150px; margin:0 auto; position: relative;}
    #wrap_con .container .ben_area .ben_ul li { width:calc(50% - 10px); margin:0 5px; height:70px; float:left; position: relative; margin-bottom:10px;}
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn { width:100%; height:70px; display: block; border:1px dashed #c9c9c9;  border-radius:8px; box-sizing: border-box;}
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn:hover { border:1px solid #c9c9c9; background-color:#0e8ee4;}
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn:hover span { color:#ffffff !important;}
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn span { width:calc(100% - 50px); height:70px; display:block; font-size:3.5vw; line-height:70px; color:#4b4b4b; position: absolute; right:1vw; top:0; text-align: right;}
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn .ico_btn {display:inline-block; position:relative; width:50px; height:50px; border-radius:50%; background:#2a3865; margin-top:10px; margin-left:10px; border:1px solid #ffffff; box-sizing: border-box; }
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn .ico_btn:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:#9c1c1f; opacity:0; transform:scale(1.4); z-index:1; transition:transform 0.4s, opacity 0.5s;}
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn:hover .ico_btn:after {transform:scale(1.1); opacity:1;}
    #wrap_con .container .ben_area .ben_ul .quick_li .q_btn .ico_btn img {position:relative; width:100%; z-index:2;}

    /* #wrap_con .container .ben_area { width:100%; height:20vw; position: relative; margin-top:5vw;}
    #wrap_con .container .ben_area .ben_ul { width:100%; height:20vw; position: relative; margin:0 auto;}
    #wrap_con .container .ben_area .ben_ul li { height:10vw; width:50%; position: absolute; z-index:10; }
    #wrap_con .container .ben_area .ben_ul li.ben01 { left:0; top:0; }
    #wrap_con .container .ben_area .ben_ul li.ben02 { right:0; top:0; }
    #wrap_con .container .ben_area .ben_ul li.ben03 { left:0; bottom:0;}
    #wrap_con .container .ben_area .ben_ul li.ben04 { right:0; bottom:0; }
    #wrap_con .container .ben_area .ben_ul li.ben01 a { border:1vw solid #5873b8;background-color:#ffffff; color:#2968b1;}
    #wrap_con .container .ben_area .ben_ul li.ben02 a { border:1vw solid #fee17a;background-color:#ffffff; color:#ad582d;}
    #wrap_con .container .ben_area .ben_ul li.ben03 a { border:1vw solid #40b872; background-color:#ffffff; color:#117c31;}
    #wrap_con .container .ben_area .ben_ul li.ben04 a { border:1vw solid #dd1c34; background-color:#ffffff; color:#dd1c34;}

    #wrap_con .container .ben_area .ben_ul li a { width:100%; height:10vw; line-height:8.6vw; font-size:4vw; color:#474747; text-align: center; font-weight:800; display: block; box-sizing: border-box;}
    #wrap_con .container .ben_area .ben_ul li a:hover { color:#ffffff !important; background-position:98% !important;}
    #wrap_con .container .ben_area .ben_ul li.ben01 a:hover { background:#5873b8; border:1vw solid #859acf; }
    #wrap_con .container .ben_area .ben_ul li.ben02 a:hover { background:#fee17a; border:1vw solid #ffd951; }
    #wrap_con .container .ben_area .ben_ul li.ben03 a:hover { background:#40b872; border:1vw solid #81b892; }
    #wrap_con .container .ben_area .ben_ul li.ben04 a:hover { background:#dd1c34; border:1vw solid #f87484; } */

    #wrap_con .container .ben_area div {display:none;}

    /* main board area */
    #wrap_con .container .board_area { width:100%; padding:3vw 0; box-sizing: border-box;}
    #wrap_con .container .board_area .area_title { width:100%; font-size:6vw; font-weight:bold; color:#3f3f3f; text-align: center; line-height:10vw; margin:5vw 0 3vw 0;  }
    #wrap_con .container .board_area .noti_ul { width:100%; margin:0 auto; position: relative; }
    #wrap_con .container .board_area .noti_ul li.noti_li { margin:2vw; cursor: pointer;  }
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box { border:1px solid #c7c7c7; box-sizing:border-box; position: relative; padding:2vw; box-sizing: border-box; }
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .noti_tit { width:80%; font-size:3.5vw; line-height:4vw; color:#000000; margin-bottom:10px;}
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .noti_date { font-size:3vw; line-height:4vw; color:#868686; text-align:right; margin-bottom:10px; position:absolute; top:50%; margin-top:-2vw; right:1vw;}
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .noti_con { display: none;}

    #wrap_con .container .board_area .noti_ul li.noti_li:hover { background-color:#cd1a31 ;}
    #wrap_con .container .board_area .noti_ul li.noti_li:hover h3,
    #wrap_con .container .board_area .noti_ul li.noti_li:hover div {  color:#ffffff !important; }

    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .mcate {  width:13vw; height:6vw; line-height:6vw; font-size:3vw !important; text-align:center !important; text-indent:0 !important; box-sizing:border-box; display:inline-block; border-radius:3vw;}
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .cate01 { background-color:#2fa5de; color:#ffffff; }
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .cate02 { background-color:#5c8398; color:#ffffff; }
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .cate03 { background-color:#999240; color:#ffffff; }
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .cate04 { background-color:#4f835a; color:#ffffff; }
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .cate05 { background-color:#4849b1; color:#ffffff; }
    #wrap_con .container .board_area .noti_ul li.noti_li .noti_box .cate06 { background-color:#ac477f; color:#ffffff; }


    /* main board area */
    #wrap_con .container .board_area { width:100%; padding:3vw 0; box-sizing: border-box;}
    /* #wrap_con .container .board_area .area_title { width:100%; font-size:5.5vw; font-weight:bold; color:#3f3f3f; text-align: center; line-height:7vw; margin-bottom:2vw;  } */
    #wrap_con .container .board_area .card_ul { width:100%; margin:0 auto; position: relative; overflow:hidden; }
    #wrap_con .container .board_area .card_ul li.card_li { width:calc( 100% - 25px); height:55vw; margin:0 12.5px 12.5px 12.5px; cursor: pointer;  }
    #wrap_con .container .board_area .card_ul li.card_li .noti_box { width:100%; height:55vw; border:1px solid #c7c7c7; box-sizing:border-box; position: relative; padding:2.5vw; box-sizing: border-box;  overflow: hidden; }
    #wrap_con .container .board_area .card_ul li.card_li .noti_box .noti_tit { height:7vw; font-size:3.5vw; line-height:3.5vw; color:#000000; margin-bottom:10px; overflow: hidden;}
    #wrap_con .container .board_area .card_ul li.card_li .noti_box .noti_date {display: none;}
    /* #wrap_con .container .board_area .card_ul li.card_li .noti_box .noti_date { font-size:2vw; line-height:3.5vw; color:#868686; text-align:right; margin-bottom:1.5vw;} */
    #wrap_con .container .board_area .card_ul li.card_li .noti_box .noti_con2 { height:calc(55vw - 15vw); font-size:15px; line-height:28px; color:#868686; overflow: hidden;}
    #wrap_con .container .board_area .card_ul li.card_li .noti_box .noti_con2 .add_img { width:100%; height:400%;}
    #wrap_con .container .board_area .card_ul li.card_li .noti_box .noti_con2 .add_img img { width:100%; height:100%;}

    #wrap_con .container .board_area .card_ul li.card_li:hover { background-color:#cd1a31 ;}
    #wrap_con .container .board_area .card_ul li.card_li:hover h3,
    #wrap_con .container .board_area .card_ul li.card_li:hover div {  color:#ffffff !important; }
    #wrap_con .container .board_area .card_ul li.card_li:hover .noti_con2 a:link,
    #wrap_con .container .board_area .card_ul li.card_li:hover .noti_con2 a:visited,
    #wrap_con .container .board_area .card_ul li.card_li:hover .noti_con2 a:active,
    #wrap_con .container .board_area .card_ul li.card_li .noti_con2 a:hover {  color:#ffffff !important; }

    #wrap_con .container .board_area .card_ul li.card_li .noti_box .mcate {  width:70px; height:30px; line-height:30px; font-size:16px !important; text-align:center !important; text-indent:0 !important; box-sizing:border-box; display:inline-block; border-radius:15px;}
    


    /* food menu */
    #wrap_con .container .food_area { width:100%; padding:20px 0;}
    #wrap_con .container .food_area .food_ul { width:100%; position:relative; background-color:#ffffff; border:1px solid #c9c9c9; box-sizing:border-box; padding:10px; margin:0 auto;}
    #wrap_con .container .food_area .food_ul .con_title03 { width:100%; height:45px; line-height:44px; font-size:20px; text-indent:15px; font-weight:800; color:#e01825; border-bottom:1px solid #eaeaea; box-sizing:border-box; position: relative;}
    #wrap_con .container .food_area .food_ul .con_title03 .food_date { width:200px; height:20px; line-height:20px; text-align:right; position:absolute; top:50%; margin-top:-10px; right:20px; font-size:18px; font-weight:normal; display:block; color: #000000 !important; position: absolute; right:0; display: block; }
    #wrap_con .container .food_area .food_ul .food_table { width:100%; background:#fff; border:1px solid #ddd; border-top:1px solid #665041; border-radius:4px; text-align:center; }
    #wrap_con .container .food_area .food_ul .food_table th { height:40px; background:#f3f3f3; border-right:1px solid #ddd; border-bottom:1px solid #ddd; color:#333; font-size:4vw; font-weight:500; vertical-align:middle; word-break:keep-all; }
    #wrap_con .container .food_area .food_ul .food_table td { padding:1vw 1.4vw; border-right:1px solid #ddd; border-bottom:1px solid #ddd; word-break:keep-all; vertical-align:middle; line-height:4.8vw; font-size:3.6vw; }


    /* main Quick service area */
    #wrap_con .container .qservice_area { width:100%; height:95vw; padding:5vw 0; background-color:#5873b8; box-sizing: border-box;}
    #wrap_con .container .qservice_area .area_title { width:100%; font-size:6vw; font-weight:bold; color:#ffffff; text-align: center; line-height:10vw; margin-bottom:3vw;  }
    #wrap_con .container .qservice_area .m_qs_ul { width:100%; padding:2vw; box-sizing: border-box; margin:0 auto;}
    #wrap_con .container .qservice_area .m_qs_ul .icon_ul { width:100%; position:relative; color:#ffffff;}
    #wrap_con .container .qservice_area .m_qs_ul .icon_ul li { width:30vw; height:36vw; float:left; text-align:center;}

    #wrap_con .container .qservice_area .m_qs_ul .icon_ul li span {display:block; padding-top:1.2vw; font-size:4vw; line-height:5vw; color:#ffffff;}
    #wrap_con .container .qservice_area .m_qs_ul .icon_ul .ico_btn {display:inline-block; position:relative; width:24vw; height:24vw; border-radius:50%; background:#ede0d3; margin-top:2vw; border:1px solid #ffffff; box-sizing: border-box; }
    #wrap_con .container .qservice_area .m_qs_ul .icon_ul .ico_btn:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:#ffe23e; opacity:0; transform:scale(1.4); z-index:1; transition:transform 0.4s, opacity 0.5s;}
    #wrap_con .container .qservice_area .m_qs_ul .icon_ul a:hover .ico_btn:after {transform:scale(1.1); opacity:1;}
    #wrap_con .container .qservice_area .m_qs_ul .icon_ul .ico_btn img {position:relative; width:100%; z-index:2;}



    /* sub page ------------------------------------------------------------------------------------------------------------------------------------- */

    /* sub page container */
    #wrap_con .container .sub_head { width:100%; height:10vw; background-color:#f3f3f3; position: relative;}
    #wrap_con .container .sub_head .root_box { width:100%; height:10vw;}

    /* sub Navigation */
    #wrap_con .container .sub_head .root_box .root_menu { width:100%; height:10vw; position: relative;  border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; border-right:1px solid #dbdbdb;}
    #wrap_con .container .sub_head .root_box .root_menu .home_li { display: none;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li { float: left;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li { width:50%; height:10vw; }
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_btn { width:100%; height:10vw; display:block; line-height:10vw; font-size:4vw; color:#101010; text-indent:1vw; position: relative;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_btn .root_arrow { width:30px; height:30px; display:block; position: absolute; top:50%; margin-top: -15px; right:0; background:url(../../resources/images/root_arrow.png); background-position:top; transition: transform 1s ease-in-out; transition-duration:0.2s;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_btn .l_line{ width:1px; height:10vw; display:block; position: absolute; top:0; left:0; background-color:#dbdbdb;  }

    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_btn:hover { background-color:#0d346d; color:#ffffff; border-bottom:1px solid #ffffff; box-sizing: border-box;}
    /*#wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_btn:hover .root_arrow {  transform: rotate(90deg); transition-duration:0.2s; }*/

    #wrap_con .container .sub_head .root_box .root_menu .menu_li .selected { background-color:#0d346d; color:#ffffff; border-bottom:1px solid #ffffff; box-sizing: border-box;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .selected .root_arrow {  transform: rotate(90deg); transition-duration:0.2s;  background-position:bottom;}

    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_box { position:absolute; top:40px; display:none; left:0;  z-index:100;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_box .depth01 { width:100vw; padding:2vw; box-sizing: border-box; background-color:#0d346d; color:#ffffff; text-align:left; list-style:none; z-index:90;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_box .depth01 a:link, 
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_box .depth01 a:active, 
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_box .depth01 a:visited { width:100%; height:10vw; font-size:3.5vw; color:#ffffff; text-decoration:none; line-height:10vw; display:block; text-indent:3vw;}
    #wrap_con .container .sub_head .root_box .root_menu .menu_li .smenu_box .depth01 a:hover { background-color:#ffffff; color:#000000;}


    #wrap_con .container .contents { width:100%; min-height:500px; margin:0 auto; padding:0 15px 50px 15px; font-size:15px; box-sizing: border-box;}
    #wrap_con .container .contents .sub_title { width:100%; height:15vw; margin-top:5vw; font-size:7.5vw; font-weight:bold; color:#333333; text-align: center; line-height:15vw; border-bottom:1px solid #cfcfcf; box-sizing:border-box;}

    /* Footer ------------------------------------------------------------------------------------------------------------------------------------- */

    /* go to Top */
    .quick { width:25px; right:10px; bottom:10px; position:fixed;}
    .quick .top {width:30px; height:35px; background-color:#990e17; display:block; padding-top:5px; border-radius:3px; opacity:0.5;} 
    .quick .top div { color:#ffffff; line-height:13px; font-size:13px; text-align:center;}

    /* go to back */
    .back { width:40px; left:10px; bottom:10px; position:fixed;}
    .back .btn_back {width:40px; height:40px; background-color:#2a3865; display:block;  border-radius:3px; opacity:0.8;} 
    .back .btn_back img {width:100; height:100;} 

    /* footer layout  */
    #footer { width:100%; height: 60vw; z-index:100; border-top:1px solid #e7e7e7; }
    #footer .address_area { width:100%; height:50vw; position: relative;}
    #footer .address_area .bot_logo { width:20vw; height:20vw; position: absolute; top:50%; margin-top:-15vw; left: 0;}
    #footer .address_area .bot_logo img { width: 100%; height: 100%;}
    #footer .address_area .address_box {  height:40vw; padding:0 2vw; box-sizing: border-box; margin-left:22vw; }
    #footer .address_area .address_box li { padding:3vw 0; padding-top:6vw; box-sizing: border-box;}
    #footer .address_area .address_box li h1 { font-size:3vw; font-weight: bold; color:#000000; line-height:8vw; }
    #footer .address_area .address_box li div { font-size:2.4vw; color:#4e4e4e; line-height:8vw; }

    #footer .address_area .Fsite { width:100%; height:10vw; bottom:0; left:0; position:absolute;}
    #footer .address_area .Fsite .fam_btn { width:100%; height:10vw; display:block; line-height:10vw; border:1px solid #b2b2b2; box-sizing: border-box; font-size:5vw; color:#a8a8a8; text-indent:30px; position: relative; background-color:#ffffff; text-align: center; }
    #footer .address_area .Fsite .fam_btn .plus { width:50px; height:50px; display:block; line-height:50px; font-size:20px; color:#a8a8a8; text-align: center; position: absolute; top:50%; margin-top:-25px; right:20px; transition: transform 1s ease-in-out; transition-duration:0.2s; text-indent:0 !important; }
    #footer .address_area .Fsite .fam_btn:hover .plus {transform:scale(1.5) rotate(360deg); transition-duration:0.2s; }


    /* Site Link*/
    #siteLink01 { position:absolute; bottom:10vw; display:none;  }
    #siteLink01 .fam { width:100vw; padding:5px; border:1px solid #545358; box-sizing:border-box; background-color:#ffffff; color:#000000; text-align:center; list-style:none; z-index:999;}
    #siteLink01 .fam a:link, #siteLink01.fam a:active, #siteLink01 .fam a:visited { width:100%; height:6vw; font-size:4vw; color:##c0926a; text-decoration:none; line-height:6vw; display:block; text-indent:5px;}
    #siteLink01 .fam a:hover { background-color:#6d6d6d; color:#ffffff;}

    #footer .copyright_area {width:100%; height:32vw; background-color:#707070;}
    #footer .copyright_area .copyright_box { width:100%; height:32vw; margin:0 auto; position:relative;}
    #footer .copyright_area .copyright_box .btn_box { width:100%; height:12vw; padding-top:1.2vw;}
    #footer .copyright_area .copyright_box .btn_box .bot_button { width:100%; height:16vw; position:relative;}
    #footer .copyright_area .copyright_box .btn_box .bot_button li { width:33%; height:8vw; float:left;}
    #footer .copyright_area .copyright_box .btn_box .bot_button li .b_btn:link,
    #footer .copyright_area .copyright_box .btn_box .bot_button li .b_btn:active,
    #footer .copyright_area .copyright_box .btn_box .bot_button li .b_btn:visited { width:100%; height:8vw; display:block; text-align:center; font-size:2.8vw; line-height:8vw; color:#ffffff;}
    #footer .copyright_area .copyright_box .btn_box .bot_button li .b_btn:hover { background-color:#dadada; color:#2e2d34;}
    #footer .copyright_area .copyright_box .btn_box .bot_button div { width:1px; height:16px; position:absolute; top:50%; margin-top:-8px; background-color:#ffffff; opacity:0.8; }
    #footer .copyright_area .copyright_box .btn_box .bot_button .line01 { left:130px; }
    #footer .copyright_area .copyright_box .btn_box .bot_button .line02 { left:260px; }
    #footer .copyright_area .copyright_box .copyright { width:100%; height:12vw; line-height:6vw; font-size:2.8vw; color:#ffffff; text-align: center; margin-top:8vw; padding:0 1vw; box-sizing: border-box;position: absolute; bottom:0; letter-spacing:0 !important; font-style: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;}
    #footer .copyright_area .copyright_box .copyright a { display: none;}
    #footer .copyright_area .copyright_box .copyright span { width:100%; display: block;}

   /* main benner area*/
    .main_visual .main_ben { width:100%; height:20vw; position: absolute; top:60vw; left:0; }
    .main_visual .main_ben .ben_ul{ width:100%; height:20vw; position:relative;}
    .main_visual .main_ben .ben_ul li { width:50%; height:20vw; background-color:#ffffff; position: absolute;}
    .main_visual .main_ben .ben_ul li.ben_left { left:0;}
    .main_visual .main_ben .ben_ul li.ben_right { right:0;}
    .main_visual .main_ben .ben_ul li .ben_box { width:100%; height:20vw; position:relative; box-sizing: border-box;}
    .main_visual .main_ben .ben_ul li.ben_left .ben_box { border:4px solid #a11721;}
    .main_visual .main_ben .ben_ul li.ben_right .ben_box { border:4px solid #2c476b;}
    .main_visual .main_ben .ben_ul li .ben_box:hover {width:100% !important; height:20vw !important; border:none;}
    
    
    .main_visual .main_ben .ben_ul li .ben_box a { width:calc(100% - 2vw); height:18vw; display:block; }
    .main_visual .main_ben .ben_ul li .ben_box a:hover { width:100% !important; height:20vw !important; display:block;}
    
    .main_visual .main_ben .ben_ul li .ben_box a span { width:200px; display:block; text-align:left; z-index:2; position:absolute; top:50%; }
    .main_visual .main_ben .ben_ul li .ben_box a .kor { height:35px; line-height:30px; font-size:4.5vw; margin-top:-25px; left:15px; font-weight:800;}
    .main_visual .main_ben .ben_ul li .ben_box a .eng { height:25px; line-height:20px; font-size:2vw; margin-top:5px; left:15px;}
    
    
    .main_visual .main_ben .ben_ul li .ben_box .ben_btn01 { color:#a11721; background:url(../../resources/images/main_ben01.png) right no-repeat; }
    .main_visual .main_ben .ben_ul li .ben_box .ben_btn02 { color:#2c476b; background:url(../../resources/images/main_ben02.png) right no-repeat;  }
    
    .main_visual .main_ben .ben_ul li .ben_box .ben_btn01:hover { background:#a11721; color:#ffffff;}
    .main_visual .main_ben .ben_ul li .ben_box .ben_btn02:hover { background:#2c476b; color:#ffffff;}
    
    .main_visual .main_ben .ben_ul li .ben_box .ben_btn01::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#a11721; opacity:0; transform:scale(1.4);  transition:transform 0.4s, opacity 0.5s; z-index: 1;}
    .main_visual .main_ben .ben_ul li:hover .ben_btn01::after {transform:scale(1); opacity:0.5; color:#ffffff; background:url(../../resources/images/main_ben01_ov.png) right no-repeat; }
    
    .main_visual .main_ben .ben_ul li .ben_box .ben_btn02::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#2c476b; opacity:0; transform:scale(1.4);  transition:transform 0.4s, opacity 0.5s; z-index: 1;}
    .main_visual .main_ben .ben_ul li:hover .ben_btn02::after {transform:scale(1); opacity:0.5; color:#ffffff; background:url(../../resources/images/main_ben02_ov.png) right no-repeat; }

}