@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none}
input,button,textarea{background-color: transparent; border:none; -webkit-border-radius:0; -webkit-appearance:none}

html, body { margin: 0; width: 100%; position: relative; padding: 0; font-size: 0.625em;  -webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none;  /* IE */ -moz-text-size-adjust : none;  /* 파이어폭스 */ -o-text-size-adjust : none;  /* 오페라 구버전 */ }
* {margin:0; padding:0; list-style:none; text-decoration:none; font-family: 'Roboto', sans-serif; box-sizing: border-box; }

ul>li>a { text-decoration:none; }

a {text-decoration: none; color: #333; cursor: pointer;}
table { border-collapse: collapse; }
textarea {box-sizing: border-box; resize: none;}
select {-webkit-border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer;}
input,select,textarea,strong,em,p,h1,h2,h3,h4,span,td,button,th,li,a,i,b {font-style:normal; margin: 0; letter-spacing: -0.5px;}
ul { margin: 0;padding: 0;list-style: none;}
img {max-width:100%;}
button {cursor: pointer; border: none;}

html.scrollHidden,
body.scrollHidden {
    overflow: hidden !important;
}
.limit {max-width: 1520px; width: 100%; padding: 0 10px; margin: 0 auto;}
.mobile {display: none !important;}
@media screen and (max-width: 1024px) {
    .pc {display: none !important;}
    .mobile {display: block !important;}
    img.mobile {display: inline-block !important;}
}
/************************************************/
.header {position: absolute; height: 10rem; left: 0; top: 0; width: 100%; border-bottom: 1px solid #dddddd; background: #fff; z-index: 10;}
.headerInner {position: relative; display: flex; height: 100%; align-items: center;}
.logo {position: relative; display: inline-block; width: 22rem; height: 100%; margin: 0 2rem 0 0;}
.logo a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/images/common/logo.png') no-repeat; background-position: center !important; background-size: contain !important; text-indent: -9999px;}

.mainNav {flex: 1; height: 100%;position: relative;}
.mainNav .navList {position: absolute; left: 50%; top: 0; transform: translate(-50%,0); display: flex; height: 100%;width: 100%;justify-content: space-around;}
.mainNav .navItem  {position: relative; height: 100%;flex: 1;}
.mainNav .navItem:nth-of-type(1) {margin: 0;}
.mainNav .navItem__link {display: flex; align-items: center; justify-content: center; height: 100%;}
.mainNav .navItem__link span {font-size: 1.6rem; font-weight: 500; color: #222222; transition: .3s ease;}
.mainNav .navItem__link:hover span {color: #349e8f;}
.mainNav .twoDepth  .nav__depth2 {display: none; position: absolute; left: 50%; top: 100%; width: 20rem; text-align: center; transform: translate(-50%,0); padding: 1rem 0; background: #ffffff;}

.mainNav .nav__depth2{ display: none; width: 200px; position: absolute; right: 0px;}
.mainNav .nav__depth2 a {display: inline-block; padding: 0.7rem 0; width: 100%;}
.mainNav .nav__depth2 span {position: relative; display: inline-block; font-size: 1.5rem; font-weight: 400; color: #999999; transition: .3s ease;}
.mainNav .nav__depth2 span::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #a1ccc5; opacity: 0; transition: .3s ease;}
.mainNav .nav__depth2 li{}
.mainNav .nav__depth2 li a{border-top: 1px solid #e9e9e9;padding: 1.5rem 1.8rem;color: #555;font-size: 1.3rem;font-weight: 600;text-transform: none;background: #fff;letter-spacing: 0;}
.mainNav .nav__depth2 li:hover span {color: #349e8f;}
.mainNav .nav__depth2 li:hover span::after {opacity: 1;}

.headerUtil {position: relative; display: flex; height: 100%; align-items: center; /* margin : 0 7rem 0 0; */}
.header__searchWrap {display: flex; position: relative; border: 1px solid #dddddd; border-radius: 4px; overflow: hidden; align-items: center;}
.header__searchWrap form {display: flex; height: 4rem; align-items: center;border-bottom:1px solid #ddd}

.header__searchInput {border: none; width: 20rem; height: 100%; padding: 0 1rem; font-size: 1.5rem; font-weight: 400; color: #333;}
.header__searchInput::placeholder {text-align: center; font-size: 1.5rem; font-weight: 400; color: #999999;}
.header__searchBtn {display: flex; width: 4rem; height: 100%; border: none; background: none; align-items: center; justify-content: center;}

.header__authWrap { display: flex; align-items: center; margin: 0 0 0 1.5rem;}
.profile__img { width: 2.7rem; height: 2.7rem; background-position: center !important; background-size: cover !important; border-radius: 50%;}
.current__user {display: flex; cursor: pointer; align-items: center; width: 10rem;}
.profile__name {font-size: 1.5rem; margin: 0 0 0 0.5rem; font-weight: 500; color: #222222; flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.auth__utilList {display: none; background: #fff; position: absolute; left: 50%; transform: translate(-50%,0); top: 100%; width: 100%; padding: 0.5rem 0;}
.auth__utilList a {display: inline-block; width: 100%; padding: 0.8rem 1rem;}
.auth__utilList span {color: #999999; font-size: 1.4rem; font-weight: 400;}
.auth__utilList a:hover span {color: #666666; }

.btn__login {display: flex; background: #349e8f; height: 4rem; width: 8rem; align-items: center; justify-content: center; padding: 0 0.6rem; border-radius: 4px; border: none;}
.btn__login strong {display: inline-block; color: #fff; font-size: 1.5rem; font-weight: 600; font-family: 'Open Sans', sans-serif;}

.sideNavWrap {position: fixed; right: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); z-index: 3; opacity: 0; visibility: hidden; transition: .3s ease; cursor: pointer;}
.sideNavWrap.on {opacity: 1; visibility: visible;}
.sideNav {position: absolute; right: 0; top: 0; max-width: 96rem; width: 100%; height: 100vh; background: #fff; padding: 4rem 8rem; overflow: auto; cursor: auto;}
.sideNav__logo {margin: 0 0 4rem;}

.side.navList {display: block; height: auto;}
.side.navList .nav__depth2 {display: flex; flex-wrap: wrap; position: relative; left: auto; top: auto; transform: translate(0); height: auto;}
.side .navItem {display: flex; height: auto; border-bottom: 1px solid #ddd; padding: 40px 0 30px; align-items: center;}
.side .navItem__link {display: inline-block; padding: 0; width: 20rem;}
.side .navItem__link span {font-size: 2.5rem; font-weight: 800; color: #666666; transition: .3s ease;}
.side .nav__depth2 {padding: 2px 0 0; flex: 1;}
.side .nav__depth2 li {margin: 0 4rem 1rem 0;}
.side .nav__depth2 a {padding: 0;}
.side .nav__depth2 a span {display: inline-block; position: relative; font-size: 1.7rem; font-weight: 600; color: #999999;}
.side .nav__depth2 a span::before {content: ''; position: absolute;left: 0; bottom: 0; width: 100%; height: 1px; background: #878787; opacity: 0; transition: .3s ease;}
.side .navItem:hover .navItem__link span {color: #349e8f;}

.side__util {position: fixed; z-index: 3; right: 20px; top: 50%; transform: translate(0,-50%); transition: .3s ease;}
.side__util.hidden {opacity: 0; visibility: hidden;}
.side__util li + li {margin: 10px 0 0;}
.side__btn {display: flex; width: 64px; height: 64px; justify-content: center; align-items: center; border-radius: 50%; border: none;}
.side__btn.call {background: #26282b;}
.side__btn.kakao {background: #f1d901;}
.side__btn.close {background: #cccccc;}

.hamburger_wrap { position: absolute;  cursor: pointer; display: flex; transition: .15s ease; height: 100%; align-items: center; top: 0; right: 10px; z-index: 14;}
.hamburger__inner {width: 3.4rem; height: 2.4rem; position: relative; transition: .3s ease;}
.hamburger_wrap .hamburger__inner.has-new-noti:after {content: attr(data-new_count); position: absolute; display: block; line-height: 15px; border-radius: 20px;background-color: red; color: #ffffff;left: 2.5rem;top: -1rem;padding: 0 4px;font-size: 8px;}

#nav-icon3 {position: absolute; width: 100%;height: 100%; -webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer; transform: translate(-50%,-50%); left: 50%; top: 50%;}
#nav-icon3 span {display: block;position: absolute; height: 0.4rem;width: 100%; background: #666666; border-radius: 9px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon3 span:nth-child(1) {top: 0px;}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {top: 1.2rem;}
#nav-icon3 span:nth-child(4) {top: 2.3rem; width: calc(100% - 1.7rem); left: 1.7rem;}
#nav-icon3.open span:nth-child(1) {top: 12.5px;width: 0%;left: 50%;}
#nav-icon3.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#nav-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
#nav-icon3.open span:nth-child(4) {top: 12.5px;width: 0%;left: 50%;}

.footer {background: #30323a; /* padding: 9rem 0; */ padding: 6rem 0; }
.ft__topPart {display: flex; justify-content: space-around; border-bottom: 1px solid #4e4f56; padding: 0 0 7rem;}
.ft__topPart li {text-align: center;}
.ft__topPart .imgWrap {display: flex; height: 11rem; align-items: center; justify-content: center;}
.ft__topTit {font-size: 2rem; font-weight: 600; color: #fff;}
.ft__topTxt {display: block; font-size: 1.6rem; font-weight: 400; color: #dddfe5; margin: 1.5rem 0 0;}

.ft__btmPart {display: flex; justify-content: space-between; /* padding: 9rem 0 0; */}
.ft__btmLeft {display: flex;}
.ft__btmLeft > li {margin: 0 10rem 0 0;}
.ft__btmLeft > li.two {margin: 0 4rem 0 0;}
.ft__btmLeft > li:last-child {margin: 0;}

.ft__btmTit {height: 3rem; margin: 0 0 2rem;}
.ft__btmTit a {font-size: 2rem; font-weight: 600; color: #349e8f; display: block; cursor:auto;}
.ft__btmList a {display: block; padding: 0.3rem 0;}
.ft__btmList span {font-size: 1.6rem; font-weight: 400; color: #999ba1;}
.snsList {display: flex; margin: 0 0 4rem; justify-content: flex-end;}
.snsList li {display: flex; margin: 0 2.4rem 0 0; align-items: center; justify-content: center;}
.snsList li:last-child {margin: 0;}

.ft__linkList {display: flex; justify-content: flex-end;}
.ft__linkList li:nth-of-type(1) {position: relative; margin: 0 1.5rem 0 0; padding: 0 1.5rem 0 0;}
.ft__linkList li span {color: #dddfe5; font-size: 1.5rem;}
.ft__linkList li::after {content: ''; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 2px; height: 1.2rem; background: #fff;}

.copyright {display: inline-block; font-size: 1.5rem; font-weight: 400; color: #dddfe5; margin: 1rem 0 0;}

.header__searchBtnWrap--hidden {display: none; height: 100%; align-items: center;}
.header__searchBtn--hidden {width: 4rem; height: 4rem; display: flex; background: #fff; border: none; justify-content: center; align-items: center;}

.modal {/* cursor: pointer; */position: fixed; left: 0; top: 0; width: 100%; height: 100vh; overflow: auto; z-index: 100; background: rgba(0,0,0,0.6);  opacity: 0; visibility: hidden; transition: .3s ease;}
.modal.active {opacity: 1; visibility: visible;}
.modal__inner {background: #fff; max-width: 580px; width: calc(100% - 20px); margin: 10rem auto 5rem; padding: 6rem 7rem; cursor: auto; box-shadow: 8px 8px 20px 0 rgba(0,0,0,0.6);position: relative;}
.modal--close{position: absolute;top: 2rem;right: 2rem;padding: 1rem;}

.cropLayer .modal__inner {padding: 2rem;}
.modal__topTit {font-size: 2.2rem; font-weight: 600; color: #222222; font-family: 'Poppins', sans-serif; text-align: center; margin: 0 0 5rem;}
.modal__topTxt {font-size: 1.5rem;color: #666666;font-family: 'Poppins', sans-serif;font-weight: 400;}
.modal__topTxt + .modal__topTxt{margin: 1.5rem 0 0 0;}

.social__btnWrap {margin: 0 0 2.5rem;}
.social__btn {display: flex; height: 5.5rem; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid transparent; overflow: hidden;}
.social__btn + .social__btn {margin: 1rem 0 0;}
.social__btn.google {background: #4285f3;}
.social__btn.github {background: #000000;}
.social__btnTxt {text-align: left; flex: 1; font-size: 1.6rem; padding: 0 2rem; font-weight: 600; color: #fff;}
.social__iconWrap {background: #fff; display: flex; width: 5.5rem; height: 100%; justify-content: center; align-items: center;}
.modal__txt--or {font-size: 1.6rem; font-weight: 400; color: #222222; text-align: center; margin: 0 0 3.5rem;}
.login__tit {display: block; font-size: 1.6rem; font-weight: 600; color: #222222; margin: 0 0 1rem;}
.login__item + .login__item {margin: 2rem 0 0;}
.login__input {border: 1px solid #ddd; padding: 0 2rem; height: 6.5rem; font-size: 1.4rem; font-weight: 400; color: #333; width: 100%;}
.login__input::placeholder {color: #cccccc;}

.modal__txt {text-align: center; margin: 0 0 2rem; font-size: 1.8rem; font-weight: 500;}
.modal__btNWrap {display: flex; gap: 1rem;}
.modal__btNWrap button:nth-of-type(1) {background: #999999;}


.login__form {margin: 0 0 3rem;}
.form__btm {display: flex; justify-content: space-between; margin: 1.5rem 0 3rem;}
.labelChk {display: flex; align-items: center; cursor: pointer;}
.labelChk__box {position: relative; display: inline-block; width: 2rem; height: 2rem; border: 1px solid #dddddd;}
.labelChk__box::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50%; height: 50%; background: #349e8f; opacity: 0; transition: .3s ease;}
input:checked + .labelChk__box::before {opacity: 1;}
.labelChk__txt {font-size: 1.5rem; font-weight: 400; color: #666666; margin: 0 0 0 0.8rem;}
.btn__find {font-size: 1.5rem; font-weight: 400; color: #349e8f;}
.btnSubmit {width: 100%; height: 6rem; background: #349e8f; border-radius: 4px; color: #fff; font-weight: 600; font-size: 1.6rem;}
.login__form ul + .btnSubmit {margin: 2rem 0 0;}

.joinTxt__wrap {display: flex; justify-content: center;}
.joinTxt__wrap p {font-size: 1.5rem; font-weight: 400; color: #666666; }
.joinTxt__wrap button {display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 400; color: #349e8f; background: none; margin: 0 0 0 1rem;}
.joinTxt__wrap + .joinTxt__wrap {margin: 1rem 0 0;}
.form__btmTxt {font-size: 1.5rem; font-weight: 400; color: #666666;}
.form__btmTxt a {color: #349e8f;}


/* Suggest modal */
.modal-inTxtBoxWrap{display: flex;justify-content: space-between;gap: 1rem;margin: 3rem 0 0 0;}
.modal-inTxtBox{width: calc((100% - 1rem)/2);}
.modal-inTxtBox__Tit{color: #222;font-size: 1.8rem;font-family: 'Poppins', sans-serif;font-weight: 700;margin: 0 0 0.3rem 0;}

.modal-detailBox + .modal-detailBox{margin: 0.5rem 0 0 0;}
.modal-detailBox__tit{color: #666666;font-size: 1.5rem;font-family: 'Poppins', sans-serif; margin: 0 0 0.3rem 0;}
.modal-detailBox__point{font-size: 1.4rem;font-family: 'Poppins', sans-serif; font-weight: 400;}
.goodType .modal-detailBox__point{color: #349e8f;}
.badType .modal-detailBox__point{color: #e23232;}

.modalForm{margin: 3.5rem 0 0 0;}
.modal__line{margin: 0 0 2.5rem 0;}
.modal__Name{display: block;font-size: 1.5rem;font-weight: 600;color: #222222;font-family: 'Poppins', sans-serif;margin: 0 0 0.5rem 0;}
.modalForm_input{width: 100%;height: 5rem;border: 1px solid #ddd;padding: 0 1rem;font-size: 1.5rem;font-weight: 400;color: #222;font-family: 'Poppins', sans-serif;}


/* Pageing Style */
.paging_all{width:100%; margin:6rem auto 0; font-size:0; line-height:0; text-align:center; position:relative;}
.board_btn + .paging_all{margin-top:0;}
.paging_all .btns,
.paging_all>.num>strong,
.paging_all>.num>a{width:4rem; height:4rem; background-color: #fff; border:1px solid #dbdbdb; text-align: center; display:inline-block; vertical-align:top; position: relative;}

.paging_all .btns,
.paging_all .btns *{font-size:0 !important; line-height:0 !important;}
.paging_all .btns:before,
.paging_all .btns:after{content: ""; width: 1.2rem; height: 1.2rem; border-width:1px 0 0 1px; border-style:solid; border-color:#666; display: inline-block; position:absolute; left: 50%; top:50%;}
.paging_all .btns:after{opacity: 0;}
.paging_all .btns.prev:before{margin:-0.6rem 0 0 -0.3rem; transform:rotate(-45deg);}
.paging_all .btns.next:before{margin:-0.6rem 0 0 -0.9rem; transform:rotate(135deg);}

.paging_all>.num{margin:0; display:inline-block; vertical-align:top}

.paging_all>.num>strong,
.paging_all>.num>a{margin-left:0.5rem; font-weight: 300; font-size:1.6rem; line-height:3.8rem; color:#666;}
.paging_all>.num .pg_start{margin-left:0;}
.paging_all>.num .pg_end{}

.paging_all .btns:hover{background-color: #349e8f; border-color:#349e8f;}

.paging_all .btns:hover:before,
.paging_all .btns:hover:after{border-color:#fff;}

.paging_all>.num>strong,
.paging_all>.num>a:hover{background-color: #349e8f; border-color:#349e8f; color:#fff; z-index:2;}

.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.header-notification {position: relative;font-size: 14px;}
.header-notification.has-new-noti:after {content: attr(data-new_count); position: absolute; display: block; line-height: 15px; border-radius: 8px;background-color: red; color: #ffffff;left: 50%;top: -7px;padding: 0 4px;font-size: 8px;}
.header-notification a {}
.header-notification .header-noti-list {display: none;position: absolute;width: 400px;right: 0;}
.header-notification .header-noti-list .header-noti-box {border: 1px solid #dddddd;background-color: #ffffff;margin-top: 15px;}
.header-notification .header-noti-list .notification-header {padding: 10px;text-align: right;font-weight: bold;border-bottom: 1px solid #dddddd;}
.header-notification .header-noti-list .notification-header a {color: #349e8f;}
.header-notification .header-noti-list ul {max-height: 400px;overflow-y: auto;}
.header-notification .header-noti-list ul li {padding: 10px;border-bottom: 1px solid #dddddd}
.header-notification .header-noti-list ul li .message {}
.header-notification .header-noti-list ul li .message a {font-weight: bold;}
.header-notification .header-noti-list ul li .date {}
.header-notification .header-noti-list .notification-footer {padding: 10px 0;text-align: center;font-weight: bold;border-top: 1px solid #dddddd;}

.mainVisArea .swiper-slide {position: relative;}

.contest-notice-surf5 {
    font-size: 1.8rem;
    margin: 0 auto 40px auto;
    width: 1000px;
    max-width: 80vw;
    line-height: 1.6;
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #fafafa;
}

.contest-notice-surf5 ul {
    list-style: circle;
    padding-left: 40px;
}
.contest-notice-surf5 ul li {
    list-style: circle;
}
.contest-notice-surf5 p {
    margin: 1em 0;
}

@media screen and (min-width: 1025px) {

    .hamburger_wrap {display: none;}
}

@media screen and (max-width: 1420px) {
    /* .headerUtil {margin: 0 4rem 0 0;} */
    .header__searchWrap {position: absolute; left: 80%; transform: translate(-50%,0); top: 100%; max-width: 100%; width: 30rem; background: #fff; border-radius: 0; border: none; border-top: 1px solid #ddd; opacity: 0; visibility: hidden; transition: .3s ease;}
    .header__searchWrap.on {opacity: 1; visibility: visible;}
    .header__searchWrap form {width: 100%;}
    .header__searchInput {width: calc(100% - 4rem);}
    .header__searchBtnWrap--hidden {display: flex;}

}
/* @media screen and (max-width: 1220px) {
    .mainNav .twoDepth .nav__depth2,
    .mainNav .navItem__link {width: 18rem;}
} */
@media screen and (max-width: 1024px) {
    .header {position: fixed;}
    .headerInner {justify-content: space-between;}

    .hamburger_wrap {position: relative; right: auto; margin: 0 0 0 1rem;}
    .header__searchWrap {width: 100%; left: 0; transform: translate(0);}

    .mainNav {position: absolute; left: 0; top: 100%; height: calc(100vh - 100%); background: rgba(0,0,0,0.7); transform: translate(0); width: 100%; opacity: 0; visibility: hidden; transition: .3s ease;}
    .mainNav.on {opacity: 1; visibility: visible;}
    .mainNav .navList {display: block; background: #f6f6f6; height: auto; position: relative; left: auto; top: auto; transform: translate(0);}
    .mainNav .navItem { height: auto; margin: 0;}
    .mainNav .twoDepth .nav__depth2 {position: relative; left: auto; top: auto; transform: translate(0); background: none; padding: 0;}
    .mainNav .twoDepth .nav__depth2,
    .mainNav .navItem__link {position: relative; width: 100%; justify-content: flex-start; }
    .mainNav .navItem__link {padding: 1.5rem 10px;}


    .navArrow {position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); width: 2.4rem; height: 1.4rem; transition: .3s ease;}
    .navArrow img {position: absolute; left: 0; top: 0; transition: .3s ease; opacity: 0;}
    .navArrow img:nth-of-type(1) {opacity: 1;}

    .header__searchBtnWrap--hidden {justify-content: flex-end; flex: 1;}

    .noDepth .navArrow {display: none !important;}

    .active .navArrow {transform: rotate(-180deg);}
    .active .navArrow img:nth-of-type(1) {opacity: 0;}
    .active .navArrow img:nth-of-type(2) {opacity: 1;}

    .mainNav .nav__depth2 a {text-align: left; padding: 1rem 10px;}

    .auth__util {display: flex !important; background: #f6f6f6; padding: 0 10px; align-items: center;}
    .auth__util li {position: relative; height: 100%;}
    .auth__util li:not(:last-child) {margin: 0 1.5rem 0 0; padding: 0 1.5rem 0 0;}
    .auth__util li:not(:last-child)::after {content: ""; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 2.4rem; background: #349e8f;}
    .auth__util a {display: flex; align-items: center;height: 100%; font-size: 1.6rem; padding: 2rem 0;}
    .auth__util span {font-family: 'Open Sans', sans-serif; font-weight: 600; color: #349e8f;}

    .auth__util .mobile-notification {position: relative;}
    .auth__util .mobile-notification.has-new-noti::after {
        content: attr(data-new_count);
        position: absolute;
        display: block;
        line-height: 15px;
        border-radius: 20px;
        background-color: red;
        color: #ffffff;
        left: 1rem;
        top: 1.4rem;
        padding: 0 4px;
        font-size: 8px;
    }

    .header__searchWrap form {height: 6rem;}
    .header__searchInput {width: calc(100% - 8rem);}
    .header__searchBtn {width: 8rem;}

    .ft__btmPart {flex-wrap: wrap;}
    .ft__btmRight {width: 100%; text-align: right; margin: 3rem 0 0;}

    .contestList li {flex-wrap: wrap; height: auto;}
    .contest__photo {flex: initial; width: 100%;}
    .contest__txtWrap {width: 100%; order: 2;}
}

@media screen and (max-width: 768px) {
    html, body {font-size: 0.5rem;}

    .footer {padding: 4rem 0 8rem;}
    .ft__btmPart {padding: 4rem 0 0;}

    .ft__topPart {flex-wrap: wrap;}
    .ft__topPart li {width: 50%;}
    .ft__btmLeft {flex-wrap: wrap; margin: 0 auto; text-align: center;}
    .ft__btmLeft > li.two,
    .ft__btmLeft > li {width: 50%; margin: 2rem 0 0;}
    .ft__btmTit {margin: 0 0 1rem;}

    .ft__linkList,
    .snsList {justify-content: center;}
    .ft__btmRight {text-align: center;}

    .modal__inner {padding: 2rem;}


}
@media screen and (max-width: 480px) {
    /* html, body {font-size: 0.4375rem;} */

    /* .auth__util span{font-size: 2.1rem;} */

    .header__searchInput,
    .header__searchInput::placeholder,
    .mainNav .nav__depth2 span {font-size: 2.1rem;}

    .auth__util li:first-child {margin: 0 2rem 0 0; padding: 0 2rem 0 0;}
    #nav-icon3 span {height: 0.3rem;}
}