@charset "utf-8";

/* Common */
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
* {margin:0; padding: 0;text-size-adjust: none;-webkit-text-size-adjust: none;}
body {
    font-family: 'Noto Sans KR','Apple SD Gothic Neo','Apple Gothic','AppleGothic','sans-serif','dotum';
    line-height:1em;
    letter-spacing: 0px;
    word-spacing: 0px;
    margin:0 auto;
    color:#222222;
    background-color:#FFF;
    width: 100%;
}

button {background-color: #0000;cursor: pointer;outline: none;}
li{list-style:none;}
form,button{border:0; vertical-align:top;}
img {border:0;
    vertical-align:bottom;
}
em, address{font-style:normal;}
a{color:#222222; text-decoration: none;outline: none;}
a:visited {color: #222222;}
a:active{color: #222222;}
a.visit {}
a.visit:visited {}
a.visit:active{}
a.visit:hover{}
.strong {font-weight: 600;}
textarea {outline: none;border: 0;font-family: 'Noto Sans KR';}
input {outline: none;border: 0;font-family: 'Noto Sans KR';}
input::placeholder {color: #aaaaaa;}


@media all and (max-width:768px) {
	.media_left, .din.din2-11 > div[data-dinnum="1"] {width:100%;float:none;overflow: hidden;}
	.media_right, .din.din2-11 > div[data-dinnum="2"] {width:100%;float:none;}
	.media_s_left{width:100%;float:none;}
	.media_s_right{width:100%;float:none;}
}
@media all and (min-width:769px) {
	.media_left, .din.din2-11 > div[data-dinnum="1"] {width:50%;float: left;overflow: hidden;margin-right:-1px;border-right:1px solid #eee;-webkit-box-sizing:border-box;}
	.media_right, .din.din2-11 > div[data-dinnum="2"] {width:50%;float: left;padding-left:10px;}
	.media_s_left{width:60%;float: left;margin-right:-1px;border-right:1px solid #eee;-webkit-box-sizing:border-box;}
	.media_s_right{width:40%;float: left;}
}

/* 면편집 레이아웃 */
.din {position: relative;clear: both;overflow: hidden;width: 100%;margin: 0 auto;padding:0;}
.din.din100 {width: 100%;} /* 하위 영역에서 폭을 지정할 경우 */

/* 1단 */
.din.din1 {}
.din.din1 > div[data-dinnum] {width:100%;}
.din.din1 > .left {width:50%; float: left;}
.din.din1 > .right {width:50%; margin:15px 0 0 auto;}
.din.din1.flex-between > div[data-dinnum] {display: flex;align-items:center;justify-content: space-between;}
.din.din1.flex-center > div[data-dinnum] {display: flex;align-items:center;justify-content: center;}

div[data-dinnum] > div.din {width: 100%;}
/* //면편집 레이아웃 */

/* din 전체에 border */
.border {margin-bottom: 30px;padding-top: 20px;border-top: 1px solid #000;border-bottom: 1px solid #000;}
.border_bottom  {margin-bottom: 30px;border-bottom: 1px solid #000;}
.border_bottom_yellow {margin-bottom: 0.4rem;border-bottom: 4px solid #ED9824;}
header.header-fixed .border_bottom_yellow {margin-bottom: 0;}

/* 2022/10/31추가 */
.bg-dark-navy {background-color: #12334c;}
.bg-steel-blue {background-color: #27618d;}
.bg-sky-blue {background-color:#bbd0d7};



/* header ================================================================================================== */
header {position: relative;width: 100%;margin: 0 auto;z-index: 999;background-color: #FFF;height: fit-content;}
header .logo {width: 50vw;padding: 20px 10px 10px;display: inline-block;}
header .logo-pd-0 .logo {padding: 0;}
header .logo img {width: 40vw;min-width: 130px;max-width: 200px;height: auto;}
header .logo-50vw .logo img {width: 50vw;max-width: 240px;}


.login {display: flex;align-items: center;padding: 4px;}
.login span {margin: 0 5px;}
.login a {color: #777;font-size: 0.8em;}
.login .fa-user:before {color: #777;font-size: 0.8em;}
header .din3-111 div[data-dinnum="1"] .login {position: absolute;right:10px;top: 20px;}
header.header-fixed .din3-111 div[data-dinnum="1"] .login {top: 10px;}

/* header .sns-link */
header .sns-link {position: absolute;right: 0;top: 25px;display: inline-flex;justify-content: flex-end;align-items: flex-end;padding: 0 10px;}
header .sns-link li {margin-left: 10px;}
header .sns-link li:first-child {margin-left: 0;}
header .sns-link li img {width: 32px;}

header .banner {display: none;}
header .din {display: flex;justify-content: space-between;}

/* header.header-fixed */
header.header-fixed {position: fixed;top: 0;height: fit-content;width: 100%;background-color: #FFF;z-index: 999;}
header.header-fixed .logo {padding: 10px;}
header.header-fixed .logo-pd-0 .logo {padding: 0;}
header.header-fixed .logo img {width: 30vw;min-width: 130px;max-width: 200px;height: auto;transition: all 0.4s ease;}
header.header-fixed .search-cont {transform: translateX(220px);transition: all 0.3s ease-in-out;height: 0;margin: 0;}
header.header-fixed .sns-link {top: 10px;}

header.header-fixed .din > div[data-dinnum="2"] .logo img {width: 40vw;}

/* nav */
header .nav {position: relative;background-color: #222;width: 100vw;padding: 10px;display: flex;align-items: center;flex-wrap: nowrap;white-space: nowrap;overflow-x: auto;box-shadow: 0px -1px 5px 2px #0003;}
header .nav::-webkit-scrollbar {display: none;}
header .nav #btn-bar {position: relative;}
header .nav #btn-bar img {width: 23px;height: auto;}
header .nav .nav-menu {display: flex;align-items: center;}
header .nav .nav-menu li {padding: 0 15px;}
header .nav .nav-menu li:first-child {padding-left: 25px;}
header .nav .nav-menu li a {color: #FFF;font-size: 1.15em;line-height: 1.1;white-space: nowrap;}

/* .nav 배경색 추가 2022/10/31 */
.nav.bg-dark-navy {background-color:#12334c;}

/* .search-cont */
header .search-cont {position: relative;margin: 5px 10px;height: 40px;}
header .search-cont input {float: right;font-size: 15px;height: 40px;width: 200px;padding: 3px 30px 3px 10px;border-radius: 20px;border: 1px solid #ddd;}
header .search-cont input::placeholder {font-size: 14px;}
header .search-cont .btn-search {position: absolute;right: 10px;top: 9px;width: 20px;height: 20px;display: inline-block;background: url(../../img/icon/glass_b.png) no-repeat center;background-size: 100% auto;}

/* #side-menu */
header #side-menu {box-shadow: 2px 0 5px 2px #0002;z-index: 999;position: fixed;left: -340px;display: block;background-color: rgb(241, 241, 241);width: 80vw;max-width: 320px;height: 100%;overflow: scroll;}
/* header #side-menu .close-cont {width: 100%;padding: 10px 10px 0;display: flex;justify-content: flex-end;align-items: center;} */
header #side-menu .close-cont .btn-close {opacity: 0.8;width: 40px;height: 40px;position: absolute;right: 5px;top: 10px;}
header #side-menu .close-cont .btn-close img {width: 20px;height: auto;}
header #side-menu .menu {clear: both;;width: 100%;padding: 55px 10px 40px 13vw;height: inherit;overflow: scroll;}
header #side-menu .menu .cont {margin-bottom: 21px;width: 100%;height: fit-content;}
header #side-menu .main-menu {display: flex;align-items: center;justify-content: space-between;font-size: 1.25em;line-height: 1.2;height: 30px;width:100%;}
header #side-menu .main-menu.on a {color: #e30000;}
header #side-menu .main-menu .btn-drop {height: 100%;width: 40%;max-width: 100px;background: url(../../img/icon/arrow-down-r.png) no-repeat center;background-size: 14px auto;}
header #side-menu .main-menu.on .btn-drop {transform: rotate(180deg);transition: 0.2s ease-in-out;}
header #side-menu .main-menu + .sub-menu {padding-left: 5px;display: none;}
header #side-menu .main-menu.on + .sub-menu {display: block;}
header #side-menu .sub-menu li {margin-top: 10px;}
header #side-menu .sub-menu li a {line-height: 1.2;font-size: 1.13em;}

/* ================================================================================================== header */

/* main */
main {position: relative;width: 100%;margin: 0 auto;padding: 5px 0 20px;}


/* footer ================================================================================================== */
footer {position: relative;width: 100%;margin: 0 auto;border-top: 1px solid #0002;}
footer .company {font-size: 17px;font-weight: 500;letter-spacing: -0.2px;line-height: 1.2;margin-bottom: 10px;padding-top: 20px;}
footer .link-cont {display: flex;margin-bottom: 2vw;flex-wrap: wrap;justify-content: center;}
footer .link-cont li{margin-bottom: 2vw;}
footer .link-cont li a {font-size: 13px;font-weight: normal;letter-spacing: -0.3px;}
footer .link-cont li:not(:last-child)::after {content: '|';display: inline-block;margin: 0 1vw;}
footer .social-cont {display: flex;margin-bottom: 20px;margin-top: 5px;}
footer .social-cont li {height: 32px;margin-right: 10px;}
footer .social-cont li:last-child {margin-right: 0;}
footer .social-cont li img {height: 100%;width: auto;}
footer .logo {width: 145px;padding-bottom: 20px;}
footer .logo img {width: 100%;}
/* footer 모듈 => 박스템플릿 변경으로 인한 din 정렬 수정 2022/10/31 추가 */
footer .din > div[data-dinnum] {display: flex;flex-direction: column;justify-content: center;align-items: center;} 

/* footer 배경색 추가  2022/10/31 */
footer .bg-dark-navy {background-color:#12334c;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
footer .bg-dark-navy * {color: #FFF;}

footer .copyright{padding: 10px;margin: 5px 0;line-height: 17px;font-size: 13px;}

/* ================================================================================================== footer */

/* 이벤트 페이지 ///////////////////////////////////////////////////////////////////////////////////*/
body.event {}
.event main {padding-bottom: 50px;}
/*/////////////////////////////////////////////////////////////////////////////////// 이벤트 페이지 */

/* popup */
.popup {min-width: 250px;display: flex;flex-direction: column;}
.popup.layer {position: fixed;z-index: 1000;border: 1px solid #000000;background-color: #ffffff;}
.popup .popup_content {width: 100%;height: calc(100% - 30px);overflow: auto;}
.popup img {max-width: 100%;}
.popup .popup_footer {height: 30px;line-height: 30px;padding-left: 10px;}
.popup .popup_footer button {background-color: #000000;color: #ffffff;float: right;height: 30px;padding: 3px;cursor: pointer;}


/* margin */
.m-mg-bt-100 {margin-bottom: 100px;}
.m-mg-bt-90 {margin-bottom: 90px;}
.m-mg-bt-40 {margin-bottom: 40px;}
.m-mg-bt-30 {margin-bottom: 30px;}
.m-mg-bt-20 {margin-bottom: 20px;}
.m-mg-tp-100 {margin-top: 100px;}
.m-mg-tp-90 {margin-top: 90px;}
.m-mg-tp-40 {margin-top: 40px;}
.m-mg-tp-30 {margin-top: 30px;}
.m-mg-tp-20 {margin-top: 20px;}


/* padding */
.m-pd-bt-90 {padding-bottom: 90px;}
.m-pd-bt-50 {padding-bottom: 50px;}
.m-pd-bt-40 {padding-bottom: 40px;}
.m-pd-bt-30 {padding-bottom: 30px;}
.m-pd-bt-20 {padding-bottom: 20px;}
.m-pd-tp-180 {padding-top: 180px;}
.m-pd-tp-100 {padding-top: 100px;}
.m-pd-tp-90 {padding-top: 90px;}
.m-pd-tp-60 {padding-top: 60px;}
.m-pd-tp-50 {padding-top: 50px;}
.m-pd-tp-40 {padding-top: 40px;}
.m-pd-tp-30 {padding-top: 30px;}
.m-pd-tp-20 {padding-top: 20px;}
.m-pd-tp-10 {padding-top: 10px;}