@charset "utf-8";

/******** Common ********/
#wrap { width:100%; min-width:320px; max-width: 100%; margin:0 auto; overflow:hidden; background-color:  #fff; color: #494A4B; }
#skipnavi li a {  display:block; font-size:16px; width:100%; position:absolute; top:-10000px; left:0; text-align:center; z-index:999999; line-height:1; letter-spacing:0; }
#skipnavi li a:focus { position:absolute; top:0; left:0; font-weight:bold; color:#fff; background:#272727; padding:20px 0; line-height:1; }
.full-hidden { display: none; }
.mo-hidden { display: block; }
.pc-hidden { display: none; }
/******** layout ********/
.default-wrap { overflow: hidden; position: relative; width:100%; max-width:992px; margin-left:auto; margin-right:auto; padding-left: 144px; padding-right: 144px; }
.default-wrap.wide { width:100%; max-width:1600px; padding-left: 160px; padding-right: 160px; }
.default-wrap.table { width:100%; max-width:1600px; padding-left: 160px; padding-right: 160px; }
.default-wrap.medium { width:100%; max-width:1600px; padding-left: 0; padding-right: 0; }
#seoul-common-gnb { position: absolute; left: 0px; top: 0px; width: 100%; z-index: 2; }
#headerWrap { position: absolute; width: 100%; height: 80px; max-width: 100%; top: 0px; left: 0; z-index:4;}
#headerWrap h1 { height: 20px; position: absolute; top: 24px; left: 50%; transform:translateX(-50%) ; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; }
#headerWrap h1 a { display: block; width: 126px; height: 20px; background-image: url(/static/images/logo_b.png); background-repeat: no-repeat; background-position: left center; transition: all .2s; background-size: 126px auto; margin: auto;}
#headerWrap .btn-gnb { position: relative; float: left; width: 32px; height: 32px; margin-left: 0; margin-top: 0; padding-top: 5px; padding-bottom: 5px;margin-top: 24px; margin-left: 24px; }
#headerWrap .btn-gnb > span { display: block; width: 32px; height: 2px; background-color: #ffffff; }
#headerWrap .btn-gnb > span + span { margin-top: 8px; }
#headerWrap #gnbWrap .gnb { position: absolute; width: 100%; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); top: 0; left: -400px; float: left; z-index: 2; margin-left: 0px; max-width: 360px; min-width: 320px; background: rgba(0,0,0,0.80); transition:all 0.2s ; -webkit-transition:all 0.2s ; -moz-transition:all 0.2s ; -ms-transition:all 0.2s ; -o-transition:all 0.2s ; overflow-y: auto; overflow-x: hidden; height: 100%; }
#headerWrap.active #gnbWrap .gnb {left: 0;}
#headerWrap #gnbWrap .gnb > div { position: relative; padding: 80px 48px 186px; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100);}
#headerWrap #gnbWrap .gnb > div > .nav > li { width: 100%;}
#headerWrap #gnbWrap .gnb > div > .nav > li + li { margin-top: 24px; }
#headerWrap #gnbWrap .gnb > div > .nav > li > a {font-weight: 600;  font-size: 20px; color: #D7AA68; line-height: 1.3; display: block; margin-bottom: 8px; }
#headerWrap #gnbWrap .gnb > div > .nav > li > ul > li + li {margin-top: 4px; }
#headerWrap #gnbWrap .gnb > div > .nav > li > ul > li > a { display: block; font-size: 16px; color: #FFFFFF; line-height: 1.3; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; position: relative; }
#headerWrap #gnbWrap .gnb > div > .nav > li > ul > li.active > a { padding-left: 24px; color:#839AB7;}
#headerWrap #gnbWrap .gnb > div > .nav > li > ul > li.active > a:after { position: absolute; width: 16px; height: 2px; top: 50%; left: 0; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%); display: block; content: ''; background-color: #839AB7; margin-top: -1px;}
#headerWrap #gnbWrap .gnb .sns-wrap { position: absolute; bottom: 0; left: 0; width: 100%;}
#headerWrap #gnbWrap .gnb .sns-wrap .link-wrap { overflow: hidden; padding: 0 24px; margin-bottom: 24px; }
#headerWrap #gnbWrap .gnb .sns-wrap .link-wrap a { display: block; float: left; width: calc(50% - 4px); border: 1px solid #666666; font-size: 14px; color: #FFFFFF; text-align: center; line-height: 20px; padding-top: 10px; padding-bottom: 7px; }
#headerWrap #gnbWrap .gnb .sns-wrap .link-wrap a + a { margin-left: 4px; }
#headerWrap #gnbWrap .gnb .sns-wrap .sns-link { border-top: 1px solid #666666; padding:24px 0;}
#headerWrap #gnbWrap .gnb .sns-wrap ul { width: 296px; margin: auto;}
#headerWrap #gnbWrap .gnb .sns-wrap ul li {float: left; }
#headerWrap #gnbWrap .gnb .sns-wrap ul li + li { margin-left: 11%; }
#headerWrap #gnbWrap .gnb .sns-wrap ul li a { display: block; width: 48px; height: 48px; position: relative; }
#headerWrap #gnbWrap .gnb .sns-wrap ul li a img { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
#headerWrap #gnbWrap .gnb .btn-gnb-close { display: block; position: absolute; width: 32px; height: 32px; left: 24px; top: 24px; background-repeat: no-repeat; background-position: center; background-image: url(../../images/common/icon_close_w.svg); }
#headerWrap #gnbWrap .utill-wrap { position: absolute; top: 24px; right: 24px; text-align: right;overflow: hidden; height: 32px; }
#headerWrap #gnbWrap .utill-wrap .btn.icon { padding-left: 7px; padding-right: 5px;}
#headerWrap #gnbWrap .utill-wrap .btn.icon > span { display: block; float: left;}
#headerWrap #gnbWrap .utill-wrap .btn.icon > span + span { margin-left: 5px; }
#headerWrap #gnbWrap .utill-wrap .btn.icon.login_action > span:first-child { width: 16px;}
#headerWrap #gnbWrap .utill-wrap .btn.icon.mypage_action > span:first-child { width: 19px; }
#headerWrap #gnbWrap .utill-wrap .btn.icon.login_action > span + span {margin-left: 8px; }
#headerWrap #gnbWrap .utill-wrap .btn.icon img { width: 100%; margin-top: -3px; }

#contentsWrap { position: relative; max-width: 100%; min-height: 600px; margin: 0px auto;}
#contentsWrap.has-hero { padding-top: 0px; }
.hero-wrap { position: relative; width: 100%; height: 67px; padding-top: 25px; background-repeat: no-repeat; background-position: center; z-index: 2; background-size: cover; }
.hero-wrap::after { width: 100%; height: 67px; display: block; content: ''; background-color: #222222; opacity: 0; top: 0; left: 0; position: absolute; animation: showBg 1s 1 linear; -webkit-animation: showBg 1s 1 linear; }
.hero-wrap h2 {text-align: center; line-height: 1 !important; margin-bottom: 44px; z-index: 1; position: relative; }
#contentsWrap .contents { position: relative; transition: all .3s; opacity: 0; min-height: calc(100vh - 473.5px);}
#contentsWrap .contents.visible { position: relative; transition: all .3s; opacity: 1; }

@-webkit-keyframes showBg {
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
    }
}
@keyframes showBg {
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
    }
}



#footerWrap { opacity: 1; animation: opacityeffect 0.5s 1 linear; -webkit-animation: opacityeffect 0.5s 1 linear; }
#footerWrap .footer-wrap { overflow: hidden; position: relative;  background: url(../../images/common/bg_footer.jpg) repeat top left/175px auto; padding-top: 48px; padding-bottom: 48px; border-top: 1px solid #ffffff; }
#footerWrap .footer-wrap .default-wrap.wide { padding-left: 144px; padding-right: 144px; }
#footerWrap .footer-wrap .default-wrap.table { padding-left: 144px; padding-right: 144px; }
#footerWrap .footer-wrap .footer-text { float: left; color:#ffffff; line-height: 1.5;}
#footerWrap .footer-wrap .footer-text .logo-wrap { height: 31px;}
#footerWrap .footer-wrap .footer-text .logo-wrap img { height: 100%; display: block; }
/* #footerWrap .footer-wrap .etc-nav-wrap .etc-nav ul { overflow: hidden; } */
#footerWrap .footer-wrap .etc-nav-wrap .etc-nav li { position: relative; display: inline-block;  }
#footerWrap .footer-wrap .etc-nav-wrap .etc-nav li a { color: #ffffff; font-weight: 600; }
#footerWrap .footer-wrap .etc-nav-wrap .etc-nav li + li::before { content: "|"; padding-left: 5px; padding-right: 5px; }
#footerWrap .footer-wrap .sitemap { float: right; width: 56%; }
#footerWrap .footer-wrap .sitemap ul { overflow: hidden; }
#footerWrap .footer-wrap .sitemap > ul > li { float: left; width: 16.66%; text-align: left; }
#footerWrap .footer-wrap .sitemap > ul > li.hidden-menu { display: none; }
#footerWrap .footer-wrap .sitemap > ul > li > a { font-size: 20px; color: #D7AA68; display: block;}
#footerWrap .footer-wrap .sitemap > ul > li > ul > li + li { margin-top: 4px;}
#footerWrap .footer-wrap .sitemap > ul > li > ul > li > a {  color: #FFFFFF; display: block;  }
#quickWrap { position: fixed; width: 49px; height: auto; right: 0px; bottom: 0px; z-index: 4; transition: all .2s; }
#quickWrap .btn { width: 40px; height: 40px;background-repeat: no-repeat; background-position: center; padding: 0px; }
#quickWrap .btn.contact { background-image: url(../../images/common/btn_contact.svg);}
#quickWrap .btn.top { background-image: url(../../images/common/btn_top.svg);}

@-webkit-keyframes opacityeffect {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes opacityeffect {
    0% {
        opacity:0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/******** layerpopup ********/
.layerpop-wrap { overflow-x: hidden; overflow-y: auto; position:fixed; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); left:0px; top:0px; z-index: 99999; display:none; }
.layerpop-wrap .layerpop { position:fixed; overflow: hidden; width: 100%; max-width: 368px; top:50%; left:50%; transform: translate(-50%, -50%);  }
.layerpop-wrap .layerpop hr.bg-000000 { width: 112px; margin: auto; padding: 0px; }
.layerpop-wrap .layerpop.relative { position: relative; overflow: hidden; width: 100%; max-width: 480px; top:auto; left:auto; transform: inherit; margin: 20px auto; }
.layerpop-wrap .layerpop .layer-body { position: relative; overflow: hidden; padding: 48px; background-color: #fff; max-height: 553px; overflow-y: auto; }
.layerpop-wrap .layerpop .btn.close { display: block; position: absolute; width: 32px; height: 32px; line-height: 0px; right: 13px; top: 15px; padding: 0px; border: 0px; background-color: transparent; }
.layerpop-wrap .btn-close { display: block; position: absolute; width: 24px; height: 24px; right: 16px; top: 16px; background-repeat: no-repeat; background-position: center; background-image: url(../../images/common/icon_close_g.svg); }

.layerpop-wrap .btn-wrap.grid2 .btn { width: calc(50% - 8px)!important; float: left !important; }
.layerpop-wrap .btn-wrap.grid2 .btn + .btn { margin-top: 0; margin-left: 16px; }

.layerpop-wrap.ca-popup .layerpop { top: 45%; }

/******** customalert ********/
.layerpop-wrap .custom-alert { position:fixed; text-align:left;  z-index:99999; background-color:#fff; box-shadow:0 4px 8px 0 rgba(0,0,0,0.50); width: 100%; max-width: 320px;  padding: 34px 24px 22px; }
.custom-alert .message { font-size:20px; color:#222222; line-height:26px; word-break:keep-all; text-align: center;}
.custom-alert .btn-wrap { margin-top: 24px; text-align: center; }

.custom-alert .btn-wrap .btn { width:100%; height: 48px; min-width: auto; margin:0px; font-size:18px; font-weight: normal; line-height: 1; color: #232E54; padding: 0px 12px; background-color: #ffffff; border: 1px solid #232E54;}


/******** tabs ********/
.tab-wrap { overflow: hidden; display: block; position: relative; width: auto; margin: 0px auto; text-align: center; z-index: 1;}
.tab-wrap ul { overflow: visible; display: inline-block; position: relative;  }
.tab-wrap.type1 li { position: relative; float: left; margin: 0px 16px;  }
.tab-wrap.type1 li a { position: relative; display: block; font-size: 20px; color: #FFFFFF; height: 31px; }
.tab-wrap.type1 li.active a::before { position: absolute; content: ''; width: 100%; height: 3px; left: 0px; bottom: 0px; z-index: 1; background-color: #ffffff; font-weight: 600; }

.tab-wrap.type2 li { overflow: hidden; position: relative; float: left; z-index: 1; height: 80px;}
.tab-wrap.type2 li a { position: relative; display: block; width: 100%; height: 80px; line-height: 80px; font-size: 24px; color: #115999; text-align: center; z-index: 3; transition: all 0.25s; background-color: #F6F6F6;}
.tab-wrap.type2 li.active a { background-color: #D7AA68; color:#ffffff; }
.tab-contents { position: relative; display: none; }
.tab-contents.active { display: block; }

.tab-wrap.type3 ul { overflow-x: auto; overflow-y: hidden; display: flex; display: -webkit-flex; -webkit-overflow-scrolling: touch;  position: relative; max-width: 704px; margin: auto;}
.tab-wrap.type3 li { position: relative; float: left; padding: 0px 12px; display: inline-block; width: auto; height: auto; flex-shrink: 0;}
.tab-wrap.type3 li + li:after { position: absolute; top: 50%; left:0; width: 1px; height: 13px; content:''; background-color: #888888; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.tab-wrap.type3 li a { position: relative; display: block; font-size: 20px; color: #999999; height: 58px; font-weight: 700; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; padding-top: 16px; padding-bottom: 16px; }
.tab-wrap.type3 li.active a { color: #D7AA68; }



/******** font ********/
.font80 { font-size: 80px !important; line-height: 1.25 !important; }
.font48 { font-size: 48px !important; line-height: 1.25 !important; }
.font42 { font-size: 42px !important; line-height: 1.25 !important; }
.font36 { font-size: 36px !important; line-height: 1.325 !important; }
.font28 { font-size: 28px !important; line-height: 1.28 !important; }
.font24 { font-size: 24px !important; line-height: 1.25 !important; }
.font20 { font-size: 20px !important; line-height: 1.25 !important; }
.font18 { font-size: 18px !important; line-height: 1.25 !important; }
.font16 { font-size: 16px !important; line-height: 1.625 !important; }
.font14 { font-size: 14px !important; line-height: 1.25 !important; }
.font13 { font-size: 13px !important; line-height: 1.25 !important; }

.thin { font-weight:100 !important; }
.light { font-weight:300 !important; }
.normal { font-weight:400 !important; }
.bold { font-weight:700 !important; }
.underline { text-decoration:underline; }

/******** color ********/
.color-000000 { color:#000000 !important; }
.color-FFFFFF { color:#FFFFFF !important; }
.color-232E54 { color:#232E54 !important; }
.color-D7AA68 { color:#D7AA68 !important; }
.color-839AB7 { color:#839AB7 !important; }
.color-222222 { color:#222222 !important; }
.color-444444 { color:#444444 !important; }
.color-666666 { color:#666666 !important; }
.color-888888 { color:#888888 !important; }
.color-CCCCCC { color:#CCCCCC !important; }
.color-F0F0F0 { color:#F0F0F0 !important; }
.color-F6F6F6 { color:#F6F6F6 !important; }

/******** background ********/
.bg-000000 { background-color:#000000 !important; }
.bg-FFFFFF { background-color:#FFFFFF !important; }
.bg-232E54 { background-color:#232E54 !important; }
.bg-D7AA68 { background-color:#D7AA68 !important; }
.bg-839AB7 { background-color:#839AB7 !important; }
.bg-222222 { background-color:#222222 !important; }
.bg-444444 { background-color:#444444 !important; }
.bg-666666 { background-color:#666666 !important; }
.bg-888888 { background-color:#888888 !important; }
.bg-CCCCCC { background-color:#CCCCCC !important; }
.bg-F0F0F0 { background-color:#F0F0F0 !important; }
.bg-F6F6F6 { background-color:#F6F6F6 !important; }

/******** width ********/
.w516 { max-width: 516px; margin: auto;}
.w344 { max-width: 344px; }
.w105 { max-width: 105px; }
.w115 { max-width: 115px; }
.w73 { max-width: 73px;}

/******** btn ********/
.btn { position: relative; text-align:center; width: 100%; height: 72px; line-height: 70px; font-size: 20px; font-weight: 400; color: #fff; text-align: center; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; padding-left: 7px; padding-right: 5px; }
.btn img { vertical-align: baseline; }
button { line-height: 0 !important;}
button.btn:disabled { background-color: #cccccc !important; }
/*type*/
.btn.icon { overflow: hidden;}
.btn.icon > span { display: block; float: left; }
.btn.icon > span + span { margin-left: 8px; }
.btn.icon > span img { vertical-align: middle;}
.btn.blue { background-color: #232E54 !important; }
.btn.brown { background-color: #D7AA68 !important; }
.btn.dark-line { color: #232E54; border: 1px solid #232E54; background-color: transparent; }
.btn.white-line { color: #fff; border: 1px solid #fff; background-color: transparent; }
/*size*/
.btn.xs { height: 32px; line-height: 32px; font-size: 14px; width: 104px; }
.btn.sm { height: 50px; line-height: 50px !important; font-size: 18px;}
.btn.md { height: 58px; line-height: 56px; width: 312px; }
.btn.lg { font-size: 24px; max-width: 690px;}

/*btn-wrap*/
.btn-wrap.grid2 { overflow: hidden; }
.btn-wrap.grid2 .btn { display: block; max-width: calc(50% - 8px); float: left; }
.btn-wrap.grid2 .btn + .btn { margin-left: 16px; }

/*label*/
.label { border-radius: 4px; font-size: 10px; color: #FFFFFF; padding: 4px 8px 2px; line-height: 1.3 !important; vertical-align: top; display: inline-block; margin-right: 4px;}
.label.md { font-size: 14px; line-height: 1.42 !important; padding: 5px 8px 3px; vertical-align: bottom;}
.label.dark-line { border: 1px solid #CCD4DE; color: #232E54; }
.label.end { background-color: #cccccc !important; }

/******** switch ********/
.switch-item { position: relative; }
.switch { display: none; }
.switch + .switch-btn { display: block; position: relative; width: 40px; height: 22px; background-color: #cccccc; border-radius: 24px; margin: 4px 0px; transition: all .4s ease; outline: 0;  cursor: pointer;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.switch + .switch-btn:after { left: 0px; border-radius: 50%; background-color: #fff; transition: all .2s ease; }
.switch + .switch-btn:after, .switch + .switch-btn:before { position: absolute; display: block; content: ""; width: 20px; height: 20px; top: 50%; left: 1px; margin-top: -10px; }
.switch:checked + .switch-btn { background-color: #D7AA68; }
.switch:checked + .switch-btn:after { background-color: #fff; left: 100%; margin-left: -21px; }
.switch.main:checked + .switch-btn { background-color: #839AB7; background-image: url(../../images/common/icon_rock.svg); background-position: center; background-repeat: no-repeat;}
.switch.main:checked + .switch-btn:after { display: none; }

/******** data Entry ********/
.form-wrap { position:relative; }
.input-item { position: relative; }
.input-item label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.input-item input { width:100%; height:48px; line-height:48px; padding:0px 16px;font-size: 16px; color: #222222; border:0; background-color: #FFFFFF; border: 1px solid #CCCCCC;}
.input-item input:focus{ border: 1px solid #D7AA68; background-color: #ffffff;  }
.input-item input:disabled,.input-item input:read-only{ color: #888888; border:0; background-color: #F6F6F6; border: 1px solid #CCCCCC;}
.input-item input[type="file"]{ position: absolute; padding: 0; overflow: hidden; border: 0; opacity: 0; top: 0; left: 0; cursor: pointer;}
.filebox + .filebox { margin-top: 8px; }
.filebox .upload-name { width: 100%; height:48px; line-height:48px; border: 1px solid #CCCCCC; background-color: #FFFFFF; padding:0px 16px; font-size: 16px; color: #888888; padding-right: 64px; background: url(../../images/common/icon_file_g.svg) no-repeat center right 16px; cursor: pointer;}
.filebox .preview-area { background: #F6F6F6; border: 1px solid #CCCCCC; font-size: 16px; color: #888888;padding-left: 16px; width: 100%; padding-right: 50px; position: relative; padding-top: 11px; padding-bottom: 11px; }
.filebox .preview-area + .preview-area { margin-top: 8px; }
.filebox .preview-area:first-of-type { margin-top: 24px; }
.filebox .preview-area a { font-size: 14px; color: #888888; display: inline-block; padding: 0 16px 0 8px;position: absolute; width: 50px; top: 0;right: 0; height: 100%; line-height: 48px;}
.filebox .preview-area a::after { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); content:''; width: 1px; height: 14px; background-color: #cccccc; }


.search-item.type1 { overflow: hidden; position: relative; width: 100%; }
.search-item.type1 > div { float: left; }
.search-item.type1 .input-item { width: calc(100% - 80px); }
.search-item.type1 .input-item input { height: 48px; line-height: 48px; color:#232E54; font-size: 16px; background-image: url(../../images/common/icon_search_g.svg); background-position: right 16px center; background-repeat: no-repeat; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; padding-right: 48px; padding-left: 16px; border: 1px solid #232E54;}
.search-item.type1 .input-item input:focus { background-image: url(../../images/common/icon_search_b.svg); border: 1px solid #232E54;}
.search-item.type1 .btn-wrap { position: absolute; right: 0px; bottom: 0px; text-align: center; }
.search-item.type1 .btn-wrap .btn-search {  margin-right: 0; width: 64px; height: 48px; text-indent: -999999em;}
.search-item.type1 .btn-wrap .btn-search img { max-width: 32px; margin-right: 0; }

.has-select .search-item .select-item { width: 80px; position: relative; }
.has-select .search-item .select-item::after { position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); width: 1px; height: 32px; background: #cccccc; display: block; content:'';z-index: 2;}
.has-select .search-item .select-item select { height: 48px; border: 1px solid #232E54; border-right: 0; color: #444444; line-height: 48px;}
.has-select .search-item.type1 .input-item input { border-left: 0;}

.textarea-item { position: relative; }
.textarea-item textarea { overflow-y:auto; line-height:26px; padding:16px 16px; letter-spacing:-1px; font-size: 16px; color: #888888; border: 1px solid #CCCCCC; background-color: #ffffff; height: 140px;}
.textarea-item textarea:focus { border: 1px solid #C1C4CF; }
.textarea-item textarea::placeholder { color: #888888; }
.textarea-item textarea:disabled,.input-item input:read-only{ color: #9CA3A6; }
.textarea-item .text-num { position: absolute; bottom: 10px; left: 16px; font-size: 14px; color: #888888; line-height: 1.4;}
.select-item select::placeholder { color: #888888; }
.checkbox-item.all input[type="checkbox"]:checked + label:before { background-color: #ffffff; }
.checkbox-item.all input[type="checkbox"]:checked+label:after { border-color: #fff; }


/******** data Display ********/
/* table */
.table.type1 tr th { padding: 16px 0; border:none; border-top: 1px solid #E2E2E2; border-bottom: 1px solid #E2E2E2; font-weight: 400; color: #494A4B; }
.table.type1 tr td { padding: 16px 0; border:none; border-top: 1px solid #E2E2E2; border-bottom: 1px solid #E2E2E2; color: #000000; }
.table.type1 tr:last-child td, .table.type1 tr:last-child th { border-bottom: 0;}


/* accordion */
.accordion-wrap { position: relative; border-top: 1px solid #888888;}
.accordion-item { position: relative; }
.accordion-item .handle { display: block; position: relative; padding: 24px 0; border-bottom: 1px solid #cccccc; font-size: 16px; background: url(../../images/common/btn_arrow_down_b.svg) no-repeat center right; }
.accordion-item.active .handle { border-bottom: 1px solid #ffffff; background: url(../../images/common/btn_arrow_up_b.svg) no-repeat center right;  }
.accordion-item .handle.none-con { cursor:initial; background: none;}
.accordion-item .handle span { display: block; }
.accordion-item .accordion-con { overflow: hidden; display: none; padding: 24px 16px; background-color: #ffffff; font-size: 14px; border-bottom: 1px solid #cccccc; padding-top: 0; }
.accordion-wrap .none { text-align: center; padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid #E9E9E9; }

/* dropdown */
.dropdown-wrap { position: relative; z-index: 1;}
.dropdown-wrap .dropdown-btn { width:100%; background-color: #ffffff; background-image: url(../../images/common/icon_select_g.svg); background-repeat: no-repeat; background-position: right center; letter-spacing:0; height: 32px; line-height: 32px; color: #222222; border-bottom: 1px solid #cccccc; padding: 8px; font-size: 16px;}
.dropdown-wrap .dropdown-on { border-bottom: 1px solid #121212; display: none; position: absolute; top: 32px; right: 0; width: 100%; }
.dropdown-wrap .dropdown-on ul li { background: #F6F6F6; color: #444444; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; }
.dropdown-wrap .dropdown-on ul li.active {background: #232E54; }
.dropdown-wrap .dropdown-on ul li a{padding: 8px 16px; display: block; border-top: 1px solid #121212; height: 40px; line-height: 1.65; font-size: 16px; width: 100%; }
.dropdown-wrap .dropdown-on ul li.active a { color: #ffffff; }

/******** bullet ********/
.bull { position:relative; padding-left:7px; color:#666666; line-height: 1.4 !important; }
.bull:before { position:absolute; left:0px; top:9px; content:""; background:#839AB7; width:3px; height:3px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; }

.bull.type2 { position:relative; padding-left:8px; color:#6D6D6D; font-size: 16px; padding-left: 16px;  }
.bull.type2:before { position:absolute; content:"-"; left:0; top:0; background:none; color: #00C2AE; font-weight: bold; }

/******** list ********/
.list-wrap.type01 .thumb-list { position: relative; overflow: hidden;}
.list-wrap.type01 .thumb-list li { margin-bottom: 16px; box-sizing: border-box; }
.list-wrap.type01 .thumb-list li a { display: block; color:#222222; height: 0; padding: 0 9.6%; padding-bottom: 100%; position: relative; background-color: #ffffff; border: 1px solid transparent; border-bottom: 1px solid #cccccc; background-repeat: no-repeat; background-position: center; background-size: 100%; box-sizing: border-box; transition: 0.2s all; -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; }
.list-wrap.type01 .thumb-list li a.has-bg { background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; }
.list-wrap.type01 .thumb-list li a.has-bg::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content:''; opacity: 0.6; background-color: #302C27; transition: 0.2s all; -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; }
.list-wrap.type01 .thumb-list li a > span { display: block; z-index: 1; position: relative; }
.list-wrap.type01 .thumb-list li a > span.category { padding-top: 9.6%; color:#232E54;}
.list-wrap.type01 .thumb-list li a > span.title {white-space: initial; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;font-size: 36px; line-height: 1.3; }
.list-wrap.type01 .thumb-list li a > span.date { position: absolute; bottom: 9.6%; left: 9.6%; color:#888888; }

.list-wrap.type01 .thumb-list li a.has-bg > span.category {color:#ffffff;}
.list-wrap.type01 .thumb-list li a.has-bg > span.title { color:#ffffff; }
.list-wrap.type01 .thumb-list li a.has-bg > span.date {color:#ffffff; }
.list-wrap.type02 {overflow: hidden;}
.list-wrap.type02 .thumb-list {overflow: hidden; width: 100%;}
.list-wrap.type02 .thumb-list.has-title {position: relative; }
.list-wrap.type02 .list-title { color: #222222;}
.list-wrap.type02 .thumb-list .text-wrap { margin-top: -420px; }
.list-wrap.type02 .thumb-list .text-wrap > div { max-width: 504px; width: 100%; padding: 96px; height: 578px; position: relative; z-index: 1;}
.list-wrap.type02 .thumb-list .text-wrap > div.bg-brown { background: rgba(215,170,104,0.95);}
.list-wrap.type02 .thumb-list .text-wrap > div.bg-blue { background: rgba(131,154,183,0.95);}
.list-wrap.type02 .thumb-list .text-wrap .text { font-size: 36px; word-break:keep-all; line-height: 1.325;}
.list-wrap.type02 .thumb-list .text-wrap .comment { position: absolute; bottom: 80px; left: 96px;}
.list-wrap.type02 .thumb-list.left {float: left; padding-right: 200px;}
.list-wrap.type02 .thumb-list.left .text-wrap { float: right; }
.list-wrap.type02 .thumb-list.right {float: right; padding-left: 200px; }
.list-wrap.type02 .thumb-list.right .img-wrap { text-align: right; }
.list-wrap.type03 > ul > li { position: relative; padding-bottom: 32px; border-bottom: 1px solid #CCCCCC; margin-top: 32px; }
.list-wrap.type03 ul li .text-wrap { display: block; }
.list-wrap.type03 ul li .text-wrap > span { display: block; }
.list-wrap.type03 ul li .text-wrap > span.user-date span+ span { padding-left: 4px; }
.list-wrap.type03 ul li .btn-wrap { position: absolute; bottom: 32px; right: 0;}
.list-wrap.type03 ul li .btn-wrap li { position: relative; }
.list-wrap.type03 ul li .btn-wrap button { line-height: 20px !important;}
.list-wrap.type03 ul li .btn-wrap button span { display: block; font-size: 14px; color: #888888; }
.list-wrap.type03 ul li .btn-wrap li + li:after { width: 1px; height: 14px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); content: ''; background-color: #cccccc;}
.list-wrap.type03 .thumb-list li a { display: block; }
.list-wrap.type03 ul li .text-wrap > span.user-title .comment-num { margin-left: 4px; }
.list-wrap.type04 > ul > li { position: relative; height: 296px; margin-bottom: 16px; }
.list-wrap.type04 .thumb-list li a { display: block; padding: 40px; background-color: #ffffff; width: 100%; height: 100%; position: relative; transition: 0.2s all; -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; border: 1px solid transparent; border-bottom: 1px solid #cccccc; }
.list-wrap.type04 ul li .text-wrap { display: block;}
.list-wrap.type04 ul li .text-wrap > span { display: block; }
.list-wrap.type04 ul li .text-wrap span.ellipse.lh3  { display: -webkit-box; }
.list-wrap.type04 ul li .text-wrap > span.user-title { font-size: 36px; }
.list-wrap.type04 ul li .text-wrap > span.user-title > span { float: left; }
.list-wrap.type04 ul li .text-wrap > span.user-title .ellipse.lh1{ display: inline-block; width: auto; max-width: calc(100% - 105px); }
.list-wrap.type04 ul li .text-wrap > span.user-title .comment-num { margin-left: 4px; width: 52px; display: block; }
.list-wrap.type04 ul li .text-wrap > span.user-title .comment-num::before { content: "["; }
.list-wrap.type04 ul li .text-wrap > span.user-title .comment-num::after { content: "]"; }
.list-wrap.type04 .list-info { position: absolute; bottom: 40px; left: 0;}


.list-wrap.type05 .thumb-list li { margin-bottom: 48px; }
.list-wrap.type05 .thumb-list li a { display: block; color:#222222; position: relative; background-color: #ffffff; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; padding: 0 13.4%; }
.list-wrap.type05 .thumb-list li a > span { display: block; border-bottom: 1px solid #cccccc;  }
.list-wrap.type05 .thumb-list li a > span > span { display: block; z-index: 1; position: relative;}
.list-wrap.type05 .thumb-list li a > span > span.title { white-space: initial; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-wrap.type05 .thumb-list li a > span > span.img-wrap { position: relative; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; overflow: hidden; height: 0; padding-bottom: 72%; }
.list-wrap.type05 .thumb-list li a > span > span.img-wrap::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.05); }
.list-wrap.type05 .thumb-list li a:not(.has-info-wrap) > span > span.img-wrap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; background-position: center; background-repeat: no-repeat; transform: translate(-50% , -50%); -webkit-transform: translate(-50% , -50%); -moz-transform: translate(-50% , -50%); -ms-transform: translate(-50% , -50%); -o-transform: translate(-50% , -50%); }
.list-wrap.type05 .thumb-list li a > span > span.img-wrap.naver::after { background-image: url(../../images/common/icon_blog_w.svg); }
.list-wrap.type05 .thumb-list li a > span > span.img-wrap.youtube::after { background-image: url(../../images/common/icon_youtube_w.svg); }
.list-wrap.type05 .thumb-list li a > span > span.img-wrap.instagram::after { background-image: url(../../images/common/icon_insta_w.svg); }
.list-wrap.type05 .thumb-list li a > span > span.img-wrap.faceBook::after { background-image: url(../../images/common/icon_facebook_w.svg); }
.list-wrap.type05 .thumb-list li a > span > span.img-wrap img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.list-wrap.type05 .thumb-list li a.has-info-wrap { padding: 0; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span { overflow: hidden; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span { float: left; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.img-wrap { position: relative; width: 312px; min-height: 312px; overflow: hidden; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.img-wrap::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.05); }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.img-wrap img { position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); -webkit-transform: translate(-50% , -50%); -moz-transform: translate(-50% , -50%); -ms-transform: translate(-50% , -50%); -o-transform: translate(-50% , -50%); }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap { width: calc(100% - 312px); padding-top: 32px; padding-left: 48px; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap > span { display: block; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap > .ellipse.lh3 { display: -webkit-box; height: 4.5em; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap > .date-wrap > span { display: inline-block; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap > .date-wrap > span:first-child { padding-right: 12.4%; }
.list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap > .date-wrap > span > span { display: block; }

.list-info { width: 100%; padding-left: 40px; padding-right: 40px; }
.list-info > span { display: block; }
.list-info > span > span { display: block; overflow: hidden;float: left; }
.list-info > span + span { margin-left: 16px;  }
.list-info > span > span + span {margin-left: 16px; }
.list-info > span span .icon { margin-right: 2px; }
.list-info > span span .icon img { vertical-align: initial;}
.list-info > span > span > span + span { padding-right: 2px; }

/******** pagination ********/
.pagination-wrap { text-align: center; max-width: 312px; margin: auto;}
.pagination { position: relative; display:inline-block; }
.pagination .num-wrap { float: left; }
.pagination button { position: relative; display: block; float: left; width: 32px; height: 32px; color: #888888; font-size: 20px; padding-top: 2px; }
.pagination button.prev {background-image: url(../../images/common/icon_prev_s.svg); margin-right: 40px; margin-left: 0;}
.pagination button.next {background-image: url(../../images/common/icon_next_s.svg); margin-left: 40px; margin-right: 0; }
.pagination button.active { width: 32px; height: 32px; color: #ffffff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: #D7AA68;}


/******** step ********/


/******** menu ********/

/*display*/
.d-block { display:block; }
.d-inline-block { display:inline-block; }
.d-inline { display:inline; }

/*hr*/
hr { height: 1px; }
hr.title { height: 2px; }

/*divide*/
.divide { width:1px; height:8px; background-color:#999999; margin:0px 5px; display:inline-block; }
.txt-box { padding:15px 20px; padding:1.5rem 2rem; }

/*loading*/
.loading-wrap { position: fixed; top: 0; right:0; bottom:0;	left:0; width: 100%; height: 100%; background-color: transparent;	z-index: 7900; }
.loading-wrap.relative { position: relative; top: auto; right:auto; bottom:auto; left:auto; width: 100%; height: 52px; }
.loading-wrap.absolute { position: absolute; top: 0; right:0; bottom:0;	left:0; width: 100%; height: 100%; background-color: transparent; z-index: 0; }
.spinner { width: 70px; height: 70px; position: absolute; z-index: 4000; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.spinner svg{ width: 100%; height: 100%; text-align: center; animation: s-rotate1 0.7s infinite linear; }
.spinner .active{ fill: none; stroke: #000; stroke-width: 2px; stroke-dasharray: 150; stroke-dashoffset: 120; animation: s-rotate2 1.4s infinite linear; }
.spinner .back{ fill: none; opacity: 0.3; }
@keyframes s-rotate1{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
@keyframes s-rotate2{0%{ stroke-dashoffset: 120;}50%{ stroke-dashoffset: 40;}100%{ stroke-dashoffset: 120;}}

/*video*/
.video-wrap { position: relative; width: 100%; height: 0px; padding-bottom: 56.35%; background-color: #222D3A; }
.video-wrap iframe,.video-wrap video { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/*editor*/
.con-mng { padding-bottom: 24px; padding-top: 24px; padding-left: 8px; text-align: center; }
.con-mng > button { display: inline-block; font-weight: 400; color: #ffffff; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-top: 16px; }
.con-mng > button.ok { background-color: #007bff;border-color: #007bff; box-shadow: none; }
.con-mng > button.modify {background-color: #17a2b8; border-color: #17a2b8; box-shadow: none; }
.con-mng > button.del {background-color: #dc3545; border-color: #dc3545; box-shadow: none;}
.con-mng > button + button { margin-left: 4px; }
.con-mng input { width:100%; height:48px; line-height:46px; padding:0px 8px; letter-spacing:-1px; font-size: 16px; color: #494A4B; background-color: #F6F6F6; max-width: 300px; background-color: #ffffff; border: 1px solid #e2e2e2; }
.con-mng input:focus{ color: #494A4B; border: 1px solid #000000;}
.con-mng > div { text-align: left;}
.con-mng > div + div { margin-top: 8px; }

/*animation*/
.motion1 {
	        -webkit-animation: motion1 0.7s both 1s;
	        animation: motion1 0.7s both 1s;
}
@-webkit-keyframes motion1 {
    0% {
        transform: rotateY(-0deg);
        -webkit-transform: rotateY(-0deg);
        -moz-transform: rotateY(-0deg);
        -ms-transform: rotateY(-0deg);
        -o-transform: rotateY(-0deg);
    }
    50% {
        transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(-360deg);
        -webkit-transform: rotateY(-360deg);
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        -o-transform: rotateY(-360deg);
}
  }
  @keyframes motion1 {
    0% {
        transform: rotateY(-0deg);
        -webkit-transform: rotateY(-0deg);
        -moz-transform: rotateY(-0deg);
        -ms-transform: rotateY(-0deg);
        -o-transform: rotateY(-0deg);
    }
    50% {
        transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(-360deg);
        -webkit-transform: rotateY(-360deg);
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        -o-transform: rotateY(-360deg);
}
  }

@media (max-width: 1600px) {
    #headerWrap { left: 0px; margin-left: 0px;  }
}
/*xl*/
@media (max-width: 1440px) {

}
/* gird 브레이크포인트와 별도로 레이아웃에만 쓰임*/
@media (max-width: 1280px) {
    .default-wrap, .default-wrap.wide { padding: 0 40px;}
    .default-wrap, .default-wrap.table { padding: 0 40px;}
    #footerWrap .footer-wrap .default-wrap.wide { padding-left: 40px; padding-right: 40px; }
    #footerWrap .footer-wrap .default-wrap.table { padding-left: 40px; padding-right: 40px; }

    /*********list*********/
    .list-wrap.type02 .thumb-list.left,
    .list-wrap.type02 .thumb-list.right { padding-left: 0; padding-right: 0;}
    .list-wrap.type02 .thumb-list .img-wrap img { max-width: 1024px;}
}

/*lg*/
@media (max-width: 1024px) {
    .default-wrap, .default-wrap.wide { padding: 0px 40px;}
    .default-wrap, .default-wrap.table { padding: 0px 40px;}
    #footerWrap .footer-wrap .default-wrap.wide { padding-left: 40px; padding-right: 40px; }
    #footerWrap .footer-wrap .default-wrap.table { padding-left: 40px; padding-right: 40px; }
    #footerWrap .footer-wrap .sitemap { display: none; }

    /******** list ********/
    .list-wrap.type02 .thumb-list .img-wrap img { width: 100%; display: block; }
    .list-wrap.type02 .thumb-list.left .text-wrap,
    .list-wrap.type02 .thumb-list.right .text-wrap { float: none; margin-top: -20%; }
    .list-wrap.type02 .thumb-list.left .text-wrap > div,
    .list-wrap.type02 .thumb-list.right .text-wrap > div { margin-left: auto; margin-right: auto;}

    /******* tab *********/
    .tab-wrap.type2 ul.flex-con { display: block !important;}
    .tab-wrap.type2 ul li { display: block; float: none; }

}
/*md*/
@media (max-width: 768px) {
    .mo-hidden { display: none; }
    .pc-hidden { display: block; }
    .default-wrap, .default-wrap.wide { padding: 0px 24px; }
    .default-wrap, .default-wrap.table { padding: 0px; }
    .default-wrap, .default-wrap.table .top .result { padding-left: 24px; }
    .default-wrap, .default-wrap.table .top .toggle-btn { padding-right: 24px; }
/*     #headerWrap { height: 64px; }
    #headerWrap h1 { top: 22px; }
    #headerWrap .btn-gnb { margin-top: 16px; margin-left: 16px;}
    #headerWrap #gnbWrap .utill-wrap { top: 16px; right: 16px;}
    #headerWrap #gnbWrap .utill-wrap li a { width: 32px; padding: 0; margin: auto;}
    #headerWrap #gnbWrap .utill-wrap .btn.icon > span + span { display: none; }
    #footerWrap .footer-wrap { padding-top: 24px; padding-bottom: 32px;}
    #footerWrap .footer-wrap .default-wrap.wide { padding-left: 24px; padding-right: 24px; }
    .hero-wrap { height: 279px; padding-top: 109px; }
    .hero-wrap::after { height: 279px; } */
    #contentsWrap .contents { min-height: calc(100vh - 457.5px);}

    /* table */
    .table.type1 tr { display: block; border-top: 1px solid #E2E2E2; padding: 8px 0px; }
    .table.type1 tr th { display: block; width: 100%; padding: 0px; border: 0px; }
    .table.type1 tr td { display: block; width: 100%; padding: 0px; border: 0px; }

    /******** layerpopup ********/

    .layerpop-wrap .layerpop { padding: 0 20px; }
    .layerpop-wrap .layerpop .layer-body { padding: 48px 24px; }


    /******** customalert ********/
    .layerpop-wrap .custom-alert { padding: 34px 24px 22px; }

    /******** list ********/
    .list-wrap.type01 .thumb-list li { margin-bottom: 16px;}
    .list-wrap.type01 .thumb-list li a { padding: 0 7.7%; padding-bottom: 100%;position: relative; }
    .list-wrap.type01 .thumb-list li a > span.category { padding-top: 7.7%;}
    .list-wrap.type01 .thumb-list li a > span.title { font-size: 28px; line-height: 1.2;}
    .list-wrap.type01 .thumb-list li a > span.date { left: 7.7%; bottom: 7.7%; }
    .list-wrap.type02 .thumb-list.left .text-wrap,
    .list-wrap.type02 .thumb-list.right .text-wrap { padding: 0 24px; margin-top: -9%; }
    .list-wrap.type02 .thumb-list .text-wrap > div { height: 388px; padding: 42px 32px 32px;}
    .list-wrap.type02 .thumb-list .text-wrap .title img { height: 44px; }
    .list-wrap.type02 .thumb-list .text-wrap .text { font-size: 28px; }
    .list-wrap.type02 .thumb-list .text-wrap .comment { bottom: 32px; left: 32px;}

    .list-wrap.type04 > ul > li { height: 312px;}
    .list-wrap.type04 .thumb-list li a { padding: 24px;}
    .list-wrap.type04 ul li .text-wrap > span.user-title { font-size: 28px; }
    .list-wrap.type04 .list-info { bottom: 24px; padding-left: 20px; }
    .list-wrap.type04 .list-info > span{ float: none !important; }

    .list-wrap.type05 .thumb-list { height: auto !important;}
    .list-wrap.type05 .thumb-list li { position: relative !important; height: auto !important; top: 0 !important; }
    .list-wrap.type05 .thumb-list li a { padding: 0; }
    .list-wrap.type05 .thumb-list li a.has-info-wrap > span > span { float: none; }
    .list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.img-wrap { width: 100%; min-height: auto; padding-bottom: 100%; }
    .list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap { width: 100%; padding-left: 0; padding-top: 24px; }
    .list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap > .date-wrap > span { display: block; }
    .list-wrap.type05 .thumb-list li a.has-info-wrap > span > span.info-wrap > .date-wrap > span + span { margin-top: 24px; }
    .list-info > span + span { margin-left: 0; }

    /******** tabs ********/
    .tab-wrap.type1 li:first-child { margin-left: 0px; }
    .tab-wrap.type1 li:last-child { margin-right: 0px; }
    .tab-wrap.type1.hero-tab { overflow: hidden; display: block; position: relative; width: auto; text-align: center; }
    .tab-wrap.type1.hero-tab > ul { overflow-x: auto; overflow-y: hidden; display: flex; display: -webkit-flex; -webkit-overflow-scrolling: touch; position: relative; padding: 0 16px; max-width: max-content; margin: 0 auto; }
    .tab-wrap.type1.hero-tab > ul > li { position: relative; float: left; width: auto; height: auto; flex-shrink: 0; }
    .tab-wrap.type2 ul li { height: 64px; }
    .tab-wrap.type2 li a { height: 64px; line-height: 64px;}

    /******** btn ********/
    .btn.lg { height: 58px; line-height: 56px; font-size: 20px; }

    .btn-wrap.grid2 .btn { max-width: 100%; float: none; }
    .btn-wrap.grid2 .btn + .btn { margin-top: 16px; margin-left: 0; }

    /******** data Entry ********/
    .form-wrap { position:relative; }

    .search-item.type1 .input-item input { background-position: right 12px center; padding-left: 8px; }
    .search-item.type1 .btn-wrap .btn-search { width: 70px; }

    /******** pagination ********/


}
/*sm*/
@media (max-width: 560px) {
}
/*xs*/
@media (max-width: 375px) {



/****customalert****/
.layerpop-wrap .custom-alert { width: 90%; }
}

@media all and (max-width:320px) {
}


/*hover*/
@media all and (min-width:768px) {
    #headerWrap #gnbWrap .gnb > div > .nav > li > ul > li > a:hover , #headerWrap #gnbWrap .gnb > div > .nav > li > ul > li > a:focus , #headerWrap #gnbWrap .gnb > div > .nav > li > ul > li > a:active { padding-left: 24px; position: relative; color:#839AB7;}
    #headerWrap #gnbWrap .gnb > div > .nav > li > ul > li > a:hover:after , #headerWrap #gnbWrap .gnb > div > .nav > li > ul > li > a:focus:after , #headerWrap #gnbWrap .gnb > div > .nav > li > ul > li > a:active:after { position: absolute; width: 16px; height: 2px; top: 50%; left: 0; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%); display: block; content: ''; background-color: #839AB7; margin-top: -1px;}

    #quickWrap .btn:hover { background-color: transparent; color:transparent; }

    /**********dropdown*****/
    .dropdown-wrap .dropdown-on ul li:hover { background-color: #232E54; }
    .dropdown-wrap .dropdown-on ul li:hover a { color: #ffffff; }

    /******** tabs ********/
    .tab-wrap.type1 li a:hover { color: #ffffff; }
    .tab-wrap.type1 li a:hover::before { position: absolute; content: ''; width: 100%; height: 3px; left: 0px; bottom: 0px; z-index: 1; background-color: #ffffff; }
    .tab-wrap.type2 li a:hover { background-color: #D7AA68; color:#ffffff;}

    .tab-wrap.type3 li a:hover { color: #D7AA68; }

    /******** btn ********/
    .btn:not(:disabled):hover { background-color: #ffffff; color:#232E54;}
    .btn:not(:disabled).gray:hover { background-color: #B5B5B5; }
    .btn:not(:disabled).blue:hover { background-color: #839AB7 !important; color:#ffffff;}
    .btn:not(:disabled).blue.lg:hover, #member .btn:not(:disabled).blue:hover { background-color: #232E54 !important; color:#D7AA68; }
    .btn:not(:disabled).brown:hover { background-color: #e9be7e !important; color:#ffffff;}
    .btn:not(:disabled).dark-line:hover, #member .btn:not(:disabled).dark-line.sm:hover { border: 1px solid #839AB7; color: #839AB7; }
    .btn:not(:disabled).dark-line.lg:hover, #member .btn:not(:disabled).dark-line:hover { border: 1px solid #D7AA68; color: #D7AA68; }

    /******* pagenation *******/
    .pagination button.num.active:hover {color: #ffffff; }
    .pagination button.num:hover { color: #232E54;}

    /*******list************/
    .list-wrap.type05 .thumb-list li a:hover > span > span.img-wrap {box-shadow: 0px 0px 12px #B5B5B5; }
    .list-wrap.type01 .thumb-list li:hover a, .list-wrap.type04 .thumb-list li:hover a { border: 1px solid #D7AA68;}
    .list-wrap.type01 .thumb-list li:hover a.has-bg::after { opacity: 0.05; }
    .list-wrap.type01 .thumb-list li:hover a.has-bg > span { display: none; }
}