@charset "utf-8"; 

.container{ position: relative; width: 100%; }
.wrap{ width: 100%; }
.inner{ position: relative; width: 1280px; margin: 0 auto; }
.hidden{ display: none; }


/* header */
.header{ position: relative; width: 100%; height: 160px; }
.header .inner{ height: 105px; }
.header .lnb{ position: absolute; top: 45px; right: 0; }
.header .lnb>ul{ }
.header .lnb>ul>li{ position:relative; float: left; margin-left: 12px; padding-left: 12px; }
.header .lnb>ul>li::before{ display:inline-block; width:1px; height: 10px; top: 50%; left:0; margin-top: -5px; background:#cecece; vertical-align: top; }
.header .lnb>ul>li:first-child::before{ display: none; }
.header .lnb>ul>li a{ color: #656565; font-size: 13px; }
.header .lnb>ul>li a:hover{ color: #339a6b; }
.header h1.logo{ padding-top: 44px; text-align: center; }
.header>.gnb{ position: relative; width: 100%; height: 55px; /*border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;*/ text-align: center; z-index:9999; }
.header>.gnb>.menu{ width: 1280px; height: 55px; margin: 0 auto; padding: 0 110px; line-height: 55px; }
.header .gnb .menu>li{ float: left; width: 14.2%; }
.header .gnb .menu>li:first-child{ margin-left: 0px; }
.header .gnb .menu>li>a{ display: block; color: #111; font-size: 16px; font-weight: 500; }
.header .gnb .menu>li>a:hover{ color: #358f66; transition:All .2s ease; }
.header .gnb .menu li .sub_menu{ display:none; position: absolute; top: 53px; left: 0; width: 100%; padding: 28px 0; border: 1px solid #ececee; background: #fefefe; box-shadow: 0px 6px 10px rgba(0,0,0,0.07); z-index:999; }
.header .gnb .menu li .sub_menu>ul{ width: 1280px; margin: 0 auto; padding: 0; }
.header .gnb .menu li .sub_menu>ul>li{ display: inline-block; float: left; width: auto; margin-left: 52px; padding: 0; }
.header .gnb .menu li .sub_menu>ul>li:first-child, .header .gnb .menu li .menu_all>ul>li>ul>li:first-child{ margin-left: 0; }
.header>.gnb>.menu>li>.sub_menu>ul>li>a{ display: block; color: #555; font-size: 14.5px; line-height: 30px; }
.header .gnb .menu li .sub_menu>ul>li a:hover{ color: #358f66; font-weight: 500; text-decoration: underline; }
.header .gnb .menu li .menu_all>ul{ width: 1280px; margin: 0 auto; padding: 0 !important; }
.header .gnb .menu li .menu_all>ul>li{ position: relative; display: inline-block; float: none; width: 100%; margin: 0; padding: 8px 0; border-top: 1px dashed #ececee; }
.header .gnb .menu li .menu_all>ul>li>a{ position: absolute; top: 21px; left: 0px; color: #395b77; font-size: 16px; font-weight: 500; }
.header .gnb .menu li .menu_all>ul>li:first-child{ padding-top: 0; border-top: 0; }
.header .gnb .menu li .menu_all>ul>li:first-child a{ top: 13px; }
.header .gnb .menu li .menu_all>ul>li>ul{ width: 100%; padding-left: 200px; text-align: left; }
.header .gnb .menu li .menu_all>ul>li>ul>li{ float: left; height: 32px; margin-right: 52px; }
.header .gnb .menu li .menu_all>ul>li>ul>li>a{ color: #555; font-size: 14.5px; }


.right_wrap{ position: absolute; top: 36px; right: 0; width: 345px; height: 846px; padding: 0 0 0 0; vertical-align: top; }
.right_wrap .inner{ position:sticky; width: 345px; padding-left: 40px; }
.right_wrap .inner .login_box{ margin-bottom: 23px; }
.right_wrap .inner .login_box .before_login { width: 100%; margin-bottom: 40px; padding: 6px 0 40px 0; border-bottom: 1px solid #ececec; font-size: 18px; text-align: center; }
.right_wrap .inner .login_box .before_login a.btn_login{ display: inline-block; width: 225px; height: 46px; border-radius: 50px; background: #339a6b; color: #fff; font-size: 18px; line-height: 46px; text-align: center; }
.right_wrap .inner .login_box .before_login p{ margin-bottom: 16px }
.right_wrap .inner .login_box .before_login p strong{ font-weight: 700; }
.right_wrap .inner .login_box .after_login{ width: 100%; padding: 28px 25px; border-radius: 6px; background: #f8f5ec; font-size: 15px; text-align: center; }
.right_wrap .inner .login_box .after_login .user{ margin-bottom: 8px; font-size: 16px; font-weight: 500; }
.right_wrap .inner .login_box .after_login .cash{ margin-bottom: 10px; }
.right_wrap .inner .login_box .after_login .cash span{ margin-right: 8px; font-weight: 500; }
.right_wrap .inner .login_box .after_login .btn_cash{ display: inline-block; width: 135px; height: 36px; border-radius: 50px; background: #d19061; color: #fff; font-weight: 700; line-height: 36px; text-align: center; }
.right_wrap .inner .login_box .after_login ul{ margin-top: 20px; padding: 25px 0 0 8px; border-top: 1px solid #ebe9e0; text-align: left;}
.right_wrap .inner .login_box .after_login ul li{ margin-top: 4px; }
.right_wrap .inner .quick_area{ display: inline-block; margin-bottom: 15px; background: url(../../img/sub/bg_listbox.png) #fafafa no-repeat center top; border-radius: 6px; border-top: 1px solid #dedede; border-right: 1px solid #dedede; border-left: 1px solid #dedede; }
.right_wrap .inner .quick_area li{ float: left; width: 50%; }
.right_wrap .inner .quick_area li a{ display: inline-block; width: 100%; height: 43px; padding: 0 20px; color: #333; font-size: 14px; line-height: 42px; }
.right_wrap .inner .quick_area li.kakao a{ color: #f59600; }
.right_wrap .inner .quick_area li.teleg a{ color: #2160c7; }
.right_wrap .inner .quick_area li a:hover{ font-weight: 500; }
.right_wrap .inner .support{ position: relative; width: 100%; border-radius: 6px; border: 1px solid #ececec; background: url(../../img/main/bg_support.png) #fdfdfd no-repeat 190px center; }
.right_wrap .inner .support a{ display: inline-block; width: 100%; height: 88px; padding: 0 0 0 30px; font-size: 20px; line-height: 88px; }
.right_wrap .inner .support a strong{ font-weight: 700; }
.right_wrap .inner .support a:hover strong{ color: #339a6b; transition: all .2s; }
.right_wrap .inner .customer{ margin-top: 30px; }
.right_wrap .inner .customer h2{ font-size: 16px; font-weight: 500; margin-bottom: 3px; }
.right_wrap .inner .customer em{ font-family: 'Roboto'; font-size: 35px; font-weight: 700; }
.right_wrap .inner .customer ul{ margin-top: 10px; }
.right_wrap .inner .customer ul li{ color: #343434; font-size: 15px; line-height: 22px; }


/* footer */
.footer{ position: relative; width: 100%; background: #28292b; }
.footer .inner{ padding: 50px 0 40px 0; background: #28292b; }
.footer .inner ul{ display: inline-block; width: 100%; margin-bottom: 35px; }
.footer .inner ul li{ position: relative; float: left; margin-left: 15px; padding-left: 15px; }
.footer .inner ul li:first-child{ margin-left: 0; padding: 0; }
.footer .inner ul li a{ color: #fff; font-size: 15px; font-weight: 500; }
.footer .inner ul li::before{ display:inline-block; width:1px; height: 11px; top: 50%; left:0; margin-top: -5px; background:#5d5d5f; vertical-align: top; }
.footer .inner ul::after{ content: ''; display: block; clear: both; }

.footer .inner address, .footer .inner p{ width: 100%; margin-bottom: 10px; color: #818182; font-size: 14px; }

.footer .inner .gotop{ position: absolute; top: -32.5px; right: 0; width: 65px; height: 65px; background: #339a6b;text-align: center; box-shadow: -8px 3px 12px 0px rgba(0, 0, 0, 0.25); }
.footer .inner .gotop a{ display: inline-block; width: 65px; height: 65px; color: #fff; font-size: 16px; line-height: 65px; letter-spacing: 0; }
.footer .inner .gotop a:hover{ background: #2c865d; transition: All .4s ease-in-out; }

/* global */

/* 버튼 디자인*/
.btns_wrap{ position: relative; width: 100%; margin-top: 25px; text-align: center; }
.btns_wrap_l{ position: relative; width: 100%; margin-top: 25px; text-align: left; }
.btns_wrap_r{ position: relative; width: 100%; margin-top: 25px; text-align: right; }
.btn_st01{ display: inline-block; min-width: 75px; padding: 0 8px; height: 33px; font-size: 14px; border-radius: 3px; line-height: 31px; text-align: center; letter-spacing: -1px; cursor: pointer; } /* 작은버튼 */
.btn_st02{ display: inline-block; width: 165px; height: 40px; font-size: 14.5px; font-weight: 500;  border-radius: 5px; line-height: 38px; text-align: center; cursor: pointer; } /* 큰버튼 */
.btn_st03{ display: inline-block; min-width: 55px; height: 33px; padding: 0 8px; font-size: 14px;  border-radius: 3px; line-height: 31px; text-align: center; letter-spacing: -1px; cursor: pointer; }
.b_blue{ border: 1px solid #395b77; background: #395b77; color: #fff; }
.l_blue{ border: 1px solid #395b77; background: #fff; color: #395b77; }
.b_black{ border: 1px solid #3e3e3e; background: #3e3e3e; color: #fff; }
.l_black{ border: 1px solid #3e3e3e; background: #fff; color: #3e3e3e; }
.b_green{ border: 1px solid #358f66; background: #358f66; color: #fff; }
.l_green{ border: 1px solid #358f66; background: #fefefe; color: #358f66; }
.b_d_green{ border: 1px solid #487d6a; background: #487d6a; color: #fff; }
.l_d_green{ border: 1px solid #487d6a; background: #fefefe; color: #487d6a; }
.b_d_gray{ border: 1px solid #737980; background: #737980; color: #fff; }
.l_d_gray{ border: 1px solid #737980; background: #fff; color: #737980; }
.b_sky{ border: 1px solid #3588e8; background: #3588e8; color: #fff; }
.l_sky{ border: 1px solid #3588e8; background: #fff; color: #3588e8; }
.b_lht_sky{ border: 1px solid #0899cc; background: #0899cc; color: #fff; }
.l_lht_sky{ border: 1px solid #0899cc; background: #fff; color: #0899cc; }


.icon_cal{ display: inline-block; width: 34px; height: 33px; border-radius: 0 3px 3px 0; background: url(../../img/sub/icon_calendar.png) #385b77 no-repeat 50% 50%; } /* 달력 */
.elipsis{ display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }

.conts_title{ height: 21PX; margin-bottom: 10px; font-size: 17px; font-weight: 500; line-height: 21px; }
.conts_stitle{ margin: 0 0 10px 0;font-size: 15px; font-weight: 500; }


/* width */
.w10px{ width: 10px; }
.w20px{ width: 20px; }
.w30px{ width: 30px; }
.w40px{ width: 40px; }
.w50px{ width: 50px; }
.w60px{ width: 60px; }
.w70px{ width: 70px; }
.w80px{ width: 80px; }
.w90px{ width: 90px; }
.w100px{ width: 100px; }
.w110px{ width: 110px; }
.w120px{ width: 120px; }
.w130px{ width: 130px; }
.w140px{ width: 140px; }
.w150px{ width: 150px; }
.w160px{ width: 160px; }
.w170px{ width: 170px; }
.w180px{ width: 180px; }
.w190px{ width: 190px; }
.w200px{ width: 200px; }
.w210px{ width: 210px; }
.w220px{ width: 220px; }
.w230px{ width: 230px; }
.w240px{ width: 240px; }
.w250px{ width: 250px; }
.w260px{ width: 260px; }
.w270px{ width: 270px; }
.w280px{ width: 280px; }
.w290px{ width: 290px; }
.w300px{ width: 300px; }
.w350px{ width: 350px; }
.w400px{ width: 400px; }
.w440px{ width: 440px; }
.w450px{ width: 450px; }
.w500px{ width: 500px; }
.w550px{ width: 550px; }
.w600px{ width: 600px; }

.w100p{ width: 100%; }

/* margin */
.mt_5{ margin-top: 5px; }
.mt_10{ margin-top: 10px; }
.mt_15{ margin-top: 15px; }
.mt_20{ margin-top: 20px; }
.mt_25{ margin-top: 25px; }
.mt_30{ margin-top: 30px; }
.mt_35{ margin-top: 35px; }
.mt_40{ margin-top: 40px; }
.mt_45{ margin-top: 45px; }
.mr_5{ margin-right: 5px; }
.mr_10{ margin-right: 10px; }
.mr_15{ margin-right: 15px; }
.mr_20{ margin-right: 20px; }
.mr_25{ margin-right: 25px; }
.mr_30{ margin-right: 30px; }
.mr_35{ margin-right: 35px; }
.mr_40{ margin-right: 40px; }
.mb_4{ margin-bottom: 4px; }
.mb_5{ margin-bottom: 5px; }
.mb_6{ margin-bottom: 6px; }
.mb_8{ margin-bottom: 8px; }
.mb_10{ margin-bottom: 10px; }
.mb_15{ margin-bottom: 15px; }
.mb_20{ margin-bottom: 20px; }
.mb_25{ margin-bottom: 25px; }
.mb_30{ margin-bottom: 30px; }
.mb_35{ margin-bottom: 35px; }
.mb_40{ margin-bottom: 40px; }
.ml_5{ margin-left: 5px; }
.ml_10{ margin-left: 10px; }
.ml_15{ margin-left: 15px; }
.ml_20{ margin-left: 20px; }
.ml_25{ margin-left: 25px; }
.ml_30{ margin-left: 30px; }
.ml_35{ margin-left: 35px; }
.ml_40{ margin-left: 40px; }

/* padding */
.pt_5{ padding-top: 5px; }
.pt_10{ padding-top: 10px; }
.pt_15{ padding-top: 15px; }
.pt_20{ padding-top: 20px; }
.pt_25{ padding-top: 25px; }
.pt_30{ padding-top: 30px; }
.pt_35{ padding-top: 35px; }
.pt_40{ padding-top: 40px; }
.pr_5{ padding-right: 5px; }
.pr_10{ padding-right: 10px; }
.pr_15{ padding-right: 15px; }
.pr_20{ padding-right: 20px; }
.pr_25{ padding-right: 25px; }
.pr_30{ padding-right: 30px; }
.pr_35{ padding-right: 35px; }
.pr_40{ padding-right: 40px; }
.pb_5{ padding-bottom: 5px; }
.pb_10{ padding-bottom: 10px; }
.pb_15{ padding-bottom: 15px; }
.pb_20{ padding-bottom: 20px; }
.pb_25{ padding-bottom: 25px; }
.pb_30{ padding-bottom: 30px; }
.pb_35{ padding-bottom: 35px; }
.pb_40{ padding-bottom: 40px; }
.pl_5{ padding-left: 5px; }
.pl_10{ padding-left: 10px; }
.pl_15{ padding-left: 15px; }
.pl_20{ padding-left: 20px; }
.pl_25{ padding-left: 25px; }
.pl_30{ padding-left: 30px; }
.pl_35{ padding-left: 35px; }
.pl_40{ padding-left: 40px; }

.indt{ padding-left: 15px; }


/* color */
.red{ color: #e4410f; }
.red01{ color: #ed2932; }
.blue01{ color: #3861e1; }
.blue02{ color: #2160c7; }
.sky01{ color: #3588e8; }
.sky02{ color: #0899cc; }
.grn01{ color:#1f9967; }



/* font-size */
.fs_12{ font-size: 12px; }
.fs_13{ font-size: 13px; }
.fs_14{ font-size: 14px; }
.fs_15{ font-size: 15px; }
.fs_16{ font-size: 16px; }
.fs_17{ font-size: 17px; }
.fs_18{ font-size: 18px; }
.fs_19{ font-size: 19px; }
.fs_20{ font-size: 20px; }
.fs_21{ font-size: 21px; }
.fs_22{ font-size: 22px; }
.fs_23{ font-size: 23px; }
.fs_24{ font-size: 24px; }
.fs_25{ font-size: 25px; }
.fs_26{ font-size: 26px; }
.fs_27{ font-size: 27px; }
.fs_28{ font-size: 28px; }
.fs_29{ font-size: 29px; }
.fs_30{ font-size: 30px; }

/* font-weight */
.bold{ font-weight: 700; }
.fw1{font-weight:100 !important;}
.fw3{font-weight:300 !important;}
.fw4{font-weight:400 !important;}
.fw5{font-weight:500 !important;}
.fw7{font-weight:700 !important;}
.fw8{font-weight:800 !important;}
.fw9{font-weight:900 !important;}

/*  line-height */
.lh10px{line-height:10px !important;}
.lh11px{line-height:11px !important;}
.lh12px{line-height:12px !important;}
.lh13px{line-height:13px !important;}
.lh14px{line-height:14px !important;}
.lh15px{line-height:15px !important;}
.lh16px{line-height:16px !important;}
.lh17px{line-height:17px !important;}
.lh18px{line-height:18px !important;}
.lh19px{line-height:19px !important;}
.lh20px{line-height:20px !important;}
.lh21px{line-height:21px !important;}
.lh22px{line-height:22px !important;}
.lh23px{line-height:23px !important;}
.lh24px{line-height:24px !important;}
.lh25px{line-height:25px !important;}
.lh26px{line-height:26px !important;}
.lh27px{line-height:27px !important;}
.lh28px{line-height:28px !important;}
.lh29px{line-height:29px !important;}
.lh30px{line-height:30px !important;}
.lh31px{line-height:31px !important;}
.lh32px{line-height:32px !important;}
.lh33px{line-height:33px !important;}

/* align */
.ta_cen{ text-align: center !important; }
.ta_left{ text-align: left !important;; }
.ta_right{ text-align: right !important; }
.va_top{ vertical-align: top !important; }
.va_bottom{ vertical-align: bottom !important; }
.fl_left{ float: left; }
.fl_right{ float: right; }

.bg_none{ background: none !important; padding-left: 0 !important; }




/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9979; -webkit-transform: translate3d(0,0,0);} /*overflow:hidden; 제거 2021-03-15*/
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity: 0.6;filter: alpha(opacity = 60);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible;  background:#fff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,.1);}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{ }
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../../img/sub/controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:10px; top: 18px; }
        #cboxClose:hover{background-position:-50px -0px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}