@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;700;900&display=swap');
/*반응형*/
@media (min-width: 415px) {
    *{margin: 0; padding: 0; box-sizing: border-box; font-family: "Jost", "Apple SD Gothic Neo", "Noto Sans KR"; letter-spacing: -0.05em; } 
}

html {
   --White: #fff;
   --Gray-Pale: #f6f7f9;
   --Gray-Lightest:#F3F4F5;
   --Gray-Border: #d5dbe0;
   --Gray-Light: #9EA3AB;
   --Gray-Mid: #6F737A;
   --Gray-Dark:#252D3A ;
   --Black: #000;
   --Orange:#FAB005;
   --Red-color: #FE5F57;
   --Green-color:#9CCF48;
   --Main-color: #FFB800;
   --Main-light: #FFB800;
   --Mint-blue :#00c2d5;
   --Blue: #1C61A6;
   --Main-gra:linear-gradient(to left, #ff9c8b, #ff687c);
   --Main-gra-rev:linear-gradient(to right, #ff9c8b, #ff687c);
   --Width:1200px;
   --Input-rect:18px;
   --Input-h:36px;
   --Cell-h:50px;
   --Type1:#eeca00;
   --Type2:#1C66AF;
   --Type3:#116C43;
   --Type4:#D11E71;
   --Type5:#541D85;
   --Type6:#AC5D3C;
   --Type7:#00b0cf;
   --Font-size:14px;
   --Font-size12:12px;
   --Top-h:50px;
}
/*공통*/
*{margin: 0; padding: 0; box-sizing: border-box; letter-spacing: -0.05em; }
img {border:none; vertical-align: top; }
html,body {height: 100%; color: var(--Gray-Dark);}
body {overflow-x: hidden}
body { margin: 0; padding: 0; font-size: var(--Font-size); }

input,select,td,th {font-size: var(--Font-size12)}
span {font-size: inherit;}
li {list-style: none; margin: 0; padding: 0}
a {color: inherit; text-decoration: none; transition: .2s; font-size: inherit;}
textarea {border: 1px solid #ddd; width: 100%; height: 6em; padding: 15px; font-size: 1rem}



/*GNB*/
.gnb  {position: fixed; width: 100%;  z-index: 100; transition: .2s; top: 0; left: 0;  color: #fff; }
.gnb:after {display: none;}
.gnb .menu {width: var(--Width); margin:auto; display: flex;  align-items: center; font-weight: bold; height: 80px; justify-content: flex-end; flex-wrap: nowrap; flex-direction: row; }
.gnb .menu li {display: inline-block; font-size: 1.08em; margin-left: 50px}
.gnb .menu li.logo {margin-left: 0; flex-grow: 1; height: 36px; background: url(../images/img/logo-mirihae-w.svg) no-repeat left center; background-size: auto 100%; position: relative;}
.gnb .menu li.logo a {width: 100%; height: 100%; position: absolute;}
.gnb .menu li.logo img {display: none;}
.gnb .menu a{display: inline-block; vertical-align: middle;}
.gnb .menu a img {vertical-align: middle;}
.gnb .menu a:hover, .gnb .menu a.active{color: var(--Main-light)}
.gnb .menu .menus .menu-n li.member {width: 26px; height: 26px; border-radius: 50%; background: url(../images/icon/user-w.svg) no-repeat center; position: relative;}
.gnb .menu .menus .menu-n li.member a {width: 100%; height: 100%; left: 0; top: 0; position: absolute;}
.gnb .menu .menus .menu-n {display: flex;}
.gnb .menu .menus .menu-n li.member {display: none;}

.scrolled .gnb {background-color: #fff; color: var(--Gray-Dark);}
.scrolled .gnb:after { content: ""; width: 100%; height: 1px; transform-origin: left top; position: absolute; left: 0; bottom: 0; background-color: var(--Gray-Dark); display: block;}
.scrolled .gnb .menu {height: 70px;}
.scrolled .gnb .menu a:hover,.scrolled  .gnb .menu a.active {color: var(--Main-color);}
.scrolled .gnb .menu li.logo {background-image: url(../images/img/logo-mirihae-yellow.svg);}
.scrolled .gnb .menu .menus .menu-n li.member {background-image: url(../images/icon/user-b.svg);}

.wrap { letter-spacing: -0.3em; height: 100%; word-break: keep-all; }
/*탑 비주얼*/
.wrap .visual-slider {position: relative; min-width: var(--Width); width: 100%; top: 0; left: 0; position: fixed; z-index: 0;}
.scrolled .wrap .visual-slider {z-index: -1;}
.wrap .visual-slider .slider-wrapper {position: relative; z-index: 4;}
.wrap .visual {background-size: cover; height: 700px; background-position: center; display: flex; align-items: flex-end; justify-content: center;  color: #fff; flex-direction: column; position: relative; background-color: var(--Gray-Dark); width: 100%; }
.wrap .visual:after {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.1); z-index: 0; content: ""; display: none;}
.wrap .visual .ment {width: var(--Width); margin: auto;  text-align: right;}
.wrap .visual h1 {font-size: 1.8em; line-height: 1; z-index: 2;}
.wrap .visual h2 {font-size: 3.4em; z-index: 2; line-height: 1; margin:25px 0 10px 0; }
.wrap .visual h3 {font-size: 4.3em; z-index: 2; line-height: 1;}
.wrap .visual .ment span {color: var(--Main-color);}
.wrap .visual-slider a {position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -30px; left:30px; transform-origin: left center; background: url(../images/icon/main-nav-left.svg) no-repeat left center; background-size: auto 100%; display: block; z-index: 15; opacity: .5; display: none;} 
.wrap .visual-slider a.next { transform: scale(-1); left:auto; right: -30px}


/*컨텐츠*/
.wrap .contents { }
.wrap .visual-slider + .section {margin-top: 700px; }
.wrap .section {padding: 75px 0;  text-align: center; position: relative; z-index: 12; background-color: #fff;}
.wrap .section > * {width: var(--Width); margin: auto;}
.wrap .section .head::before {content: ""; margin: 0 auto 40px; width: 60px; height: 5px; background-color: var(--Main-color); display: block;}
.wrap .section .head h1{font-size: 2.6em; margin-bottom: 15px; line-height: 1;}
.wrap .section .head h1 span{color: var(--Main-color);}
.wrap .section .head p {color: var(--Gray-Mid); font-size: 1.25em}

.wrap #mirihae ul {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.wrap #mirihae ul li {width: 210px;  margin-top: 70px; margin-bottom: 20px; flex-grow: 0; flex-shrink: 0; margin-left: 60px; margin-right: 60px;}
.wrap #mirihae ul li:first-of-type {margin-left: 0;}
.wrap #mirihae ul li:nth-child(4) {margin-right: 0;}
.wrap #mirihae ul li .img {margin-bottom: 30px; height: 245px; display: flex; align-items: flex-end; justify-content: center;}
.wrap #mirihae ul li .img img {height: 210px; vertical-align: bottom;}
.wrap #mirihae ul li:first-of-type .img img {height: auto; width: 210px;}
.wrap #mirihae ul li:nth-child(3) .img img { margin-right: -35px;}
.wrap #mirihae ul li:nth-child(6) .img img { margin-left: -35px;}
.wrap #mirihae ul li h2 {margin-bottom: 5px; font-size: 1.4em;}
.wrap #mirihae ul li p {color: var(--Gray-Mid);}

.wrap #feat ul {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.wrap #feat ul li {width: 20%;  margin-top: 70px; margin-bottom: 20px; flex-grow: 0; flex-shrink: 0;}
.wrap #feat ul li .img {height:60px; line-height: 60px; margin-bottom: 20px; }
.wrap #feat ul li .img img {vertical-align: middle;}
.wrap #feat ul li h2 {margin-bottom: 5px; font-size: 1.4em;}
.wrap #feat ul li p {color: var(--Gray-Mid);}

.wrap #portfolio ul {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;  }
.wrap #portfolio ul li {width: 350px;  flex-grow: 0; flex-shrink: 0; text-align: left; margin-top: 70px; }
.wrap #portfolio ul li .img {height:245px; margin-bottom: 20px; background-size: cover; background-position: center; border-radius: 10px; }
.wrap #portfolio ul li h1 {color: var(--Gray-Mid); font-size: 1em;}
.wrap #portfolio ul li h2 {margin-bottom: 5px; font-size: 1.4em;}
.wrap #portfolio ul li p {color: var(--Gray-Mid);}

.wrap #contact .map-area {border-radius: 20px; overflow: hidden;}

.wrap #contact ul.cs {display: flex; align-items: flex-start; justify-content: space-between; margin-top: 70px;}
.wrap #contact ul.cs > li {width: 350px;  flex-grow: 0; flex-shrink: 0; text-align: left;}
.wrap #contact ul.cs > li h2 {margin-bottom: 20px; line-height: 1;}
.wrap #contact ul.cs > li .list li, .wrap #contact ul.cs > li .list li a {color: var(--Gray-Mid); line-height: 28px; display: flex; width: 100%;}
.wrap #contact ul.cs > li .list li p {flex-grow: 1; padding-right: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.wrap #contact ul.cs > li .list li span {align-self: flex-end; color: var(--Gray-Light);}
.wrap #contact ul.cs > li .tel {font-size: 2.8em; font-weight: 200; letter-spacing: 0; line-height: 1}
.wrap #contact ul.cs > li .working-time {color: var(--Gray-Mid); margin-top: 10px; font-size: .85em}
.wrap #contact ul.cs > li .addr {font-size: 1.15em; margin:12px 0 5px 0;}
.wrap #contact ul.cs > li .etc {letter-spacing: 0; font-weight: 300}
.wrap #contact ul.cs > li .etc * {letter-spacing: 0}
.wrap #contact ul.cs > li .etc span +span {margin-left: 20px}
.wrap #contact ul.cs > li .id {font-size: 1.8em; letter-spacing: 0; font-weight: 200; line-height: 1 }
.wrap #contact ul.cs > li .hello {color: var(--Gray-Mid); margin-top: 5px; font-size: 1em}
.wrap #contact ul.cs > li .sns {display: flex; margin-top: 15px;}
.wrap #contact ul.cs > li .sns a {width: 58px; height: 58px; border-radius: 50%; background-position: center; background-color: var(--Gray-Dark); transition: .2s; background-repeat: no-repeat; }
.wrap #contact ul.cs > li .sns a + a {margin-left: 20px}
.wrap #contact ul.cs > li .sns a:hover {background-color: var(--Main-color)}
.wrap #contact ul.cs > li .sns a.fb {background-image: url(../images/icon/fb.svg)}
.wrap #contact ul.cs > li .sns a.insta {background-image: url(../images/icon/insta.svg)}
.wrap #contact ul.cs > li .sns a.twitter {background-image: url(../images/icon/twiiter.svg)}
.wrap #contact ul.cs > li .sns a.blog {background-image: url(../images/icon/blog.svg)}

/*풋터*/
.footer {  color: var(--Gray-Light); padding: 30px 0; position: relative; z-index: 11; background-color: #fff;}
.footer .in {width: var(--Width); margin: auto;}
.footer .in .copyright {letter-spacing: 0; font-size: .85em}
.footer .in .copyright p {letter-spacing: 0}
.footer .in .copyright p span {color: var(--Gray-Dark);}
.footer .in .copyright p a {text-decoration: underline;}
.footer .in .copyright strong{letter-spacing: 0; text-transform: uppercase; font-weight: 600;}
.footer .in .legal {margin-bottom: 10px; color: var(--Gray-Mid); font-weight: bold;}
.footer .in .legal a {margin-right: 20px;}



/* 멤버 */

table {border-bottom: 0;}
.wrap.member {height: 100%; padding: 0 50px;}
.wrap.member {display: flex; flex-direction:column; align-items: center; background: url(../images/img/visual-main.jpg) no-repeat center; background-size: cover; height: 100%; color: #fff; }
.wrap.member > div {z-index: 2; position: relative; transition: .2s;}
.wrap.member:after{content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.6); z-index: 1; position: absolute;}

.wrap.member .top { font-weight: bold; text-align: center; padding: 50px 0; line-height: 1.4;}
.wrap.member .top .typo h1 {font-size: 2.3em;}
.wrap.member .top .typo h1:before {content: "로그인하시면 모든 서비스를\A이용하실 수 있습니다."; white-space: pre-wrap;}
.wrap.member .top .logo {background: url(../images/img/logo_w.svg) no-repeat center; background-size: auto 100%; margin-bottom: 10px; height: 42px; transition: .2s;}

.wrap.member .login-form {flex-grow: 1; flex-shrink: 0; display: flex; justify-content: center; flex-direction: column; width: 500px;}
.wrap.member .login-form .form-input {border-top: 1px solid rgba(255,255,255,.2);}
.wrap.member .login-form .form-input .id, .wrap.member .login-form .form-input .pw {border-bottom: 1px solid rgba(255,255,255,.2); height: 70px; display: flex; flex-direction: column; justify-content: center;}
.wrap.member .login-form .id-pw input { background-color: transparent; border:none; color: #fff; width: 100%; padding-left: 0; outline: none; font-size: 1.2em; transition: .2s; letter-spacing: 0; font-weight: bold; height: 0; overflow: hidden; opacity: 0; }
.wrap.member .login-form .id-pw .focus input {height: 24px; opacity: 1;}
.wrap.member .login-form .id-pw  span { transition: .2s; font-size: 1.15em;}
.wrap.member .login-form .id-pw .focus span {padding: 5px 0 5px 0; font-weight: bold; font-size: .8em;  line-height: 1.2; }
.wrap.member .login-form .id-pw input::placeholder {color: #fff; letter-spacing: -1px; font-weight: normal; filter: brightness(.7);}


.wrap.member .btns {overflow: hidden; margin-top: 20px;}
.wrap.member .btns a {height: 60px; line-height: 60px; color: #fff; font-weight: bold; text-align: center;  background-color: var(--Gray-Mid);  display: block; float: left; font-size: 1.1em; transition: .2s;}
.wrap.member .btns a:hover {background-color: var(--Gray-Dark);}
.wrap.member .btns a.submit {background-color: var(--Main-color); width: 70%;}
.wrap.member .btns a.join, .wrap.member .btns a.cancel { width: 30%;}
.wrap.member .btns a.kakao {background-color: #FFEA00; color: #3D2F34; width: 100%;}

.wrap.member .footer {justify-self: flex-end;}
.wrap.member .footer .in .copyright {filter: brightness(.6);}
.wrap.member .footer .in .logo-service {background: url(../images/img/logo-service.svg) no-repeat center; background-size: auto 100%; margin-bottom: 15px; height: 22px;}
.wrap.member .footer,.wrap.member .footer .in .legal {text-align: center; color: #fff; }

.wrap.member .join-form { color: var(--Gray-Dark); width: 50%; height: 100%; position: absolute; top: 0; right: -120%; background-color: #fff; overflow: hidden; display: flex; flex-direction: column; transition: .2s; z-index: 2;}
.wrap.member.join-complete .join-result {z-index: 3; right: 0;}
.wrap.member.join .join-process {right: 0;}
.wrap.member.join .top {width: 50%;}
.wrap.member .join-form .join-input {overflow-y: auto; flex-grow: 1; padding: 40px; display: flex; flex-direction: column;}
.wrap.member .join-form .btns {flex-grow: 0; flex-shrink: 0; margin-top: 0; width: 100%;}
.wrap.member .join-form .section h1 {font-size: 1.7em;}
.wrap.member .join-form .section .head {margin-bottom: 10px;}
.wrap.member.join .login-form .form-input {display: none;}
.wrap.member.join > div {align-self: flex-start; text-align: left;}
.wrap.member.join .footer, .wrap.member.join .footer .in .legal {align-self: flex-start; text-align: left;}
.wrap.member.join .footer .in .logo-service {background-position: left center;}
.wrap.member.join .top .logo {height: 0; background: none;}
.wrap.member.join .footer {width: 50%; padding-right: 50px;}
.wrap.member .footer .in {width: 100%;}
.wrap.member.join .section + .section {margin-top: 40px;}
.wrap.member.join table td, .wrap.member.join table th {font-size: 1em;}
.wrap.member.join input, .wrap.member.join button {height: 46px; font-size: 1em; vertical-align: top; }
.wrap.member.join table.vertical th {padding-top: 0; vertical-align: middle;}
.wrap.member.join .accordion li h2 {font-size: 1em;}
.wrap.member.join .inputs div {display: flex; align-items: center;}

.wrap.member.join .top h1 {margin-bottom: 20px;}
.wrap.member.join .top h1:before {content: "금은모래 캠핑장\A신규회원가입";}
.wrap.member.join .top p {font-weight: normal;}
.wrap.member.join .top p:before {content: "금은모래캠핑장에 회원가입하시면 토탈 예매,예약 서비스인\ATITO에 자동으로 가입되며 TITO의 서비스를 사용중인 모든\A사이트에서 동일한 아이디로 이용이 가능합니다."; white-space: pre-wrap;}
.wrap.member.join .accordion .pull {font-size: .8em;}
.wrap.member.join .join-result .welcome {flex-grow: 1;}
.wrap.member.join .join-result .welcome .head h1{font-size: 2.3em; line-height: 1.3;}
.wrap.member.join .join-result .btns a.submit {width: 100%;}
.wrap.member.join .join-result td, .wrap.member.join .join-result th {height: 60px;}
.wrap.member.join .join-result .description {font-size: .8em; color: var(--Gray-Light); margin-top: 20px;}
.wrap.member.join .join-result .description li:before {content: "•"; margin-right: 4px;}



/* 개인정보처리방침 */
.privacy .guideCon .subCon {margin-bottom: 30px;}
.privacy .guideCon h3 {margin-bottom: 40px;}
.privacy .guideCon .subCon h4 {margin-bottom: 5px; }
.privacy .guideCon .subCon h5 {font-size: 1em; margin-top: 10px;}
.privacy .guideCon .subCon p, .privacy .guideCon .subCon li {color: var(--Gray-Mid); margin: 5px 0;}
.privacy .guideCon .subCon li a {text-decoration: underline;}
.privacy .guideCon .subCon li ul li {list-style: inside; list-style-type:circle; padding-left: 20px; font-size: .85em;}

/* 에러 */

.error-container {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100%;}
.error-container .message {flex-grow: 0; padding: 50px 0;}
.error-container .message h1 {color: var(--Red-color); font-size: 4em; line-height: 1.2;}
.error-container .message h2 {color: var(--Red-color); font-size: 2em; line-height: 1.4;}
.error-container .message h3 {color: var(--Gray-Mid); font-size: 1em; margin-top: 10px;}
.error-container .btn {flex-grow: 0; padding: 50px 0;}
.error-container .btn a {background-color: var(--Gray-Dark); border-radius: 30px; padding: 15px 25px; color: #fff; font-weight: bold; transition: .2s;}
.error-container .btn a:hover {background-color: var(--Main-color);}
.error-container .img {flex-grow: 1; background: url(../images/img/error.svg) no-repeat center; width: 100%; background-size: auto 80%;}

.loading {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: fixed; pointer-events: none; left: 0; top: 0; background-color: rgba(255,255,255,0.7);  animation-name: loading-baloon; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function:ease-in-out; display: none;}
.loading .img {width: 120px; padding-top: 120px; background: url(../images/img/loading-face.svg) no-repeat center top; position: relative;  animation-name: loading-blink; animation-duration: 3s;  animation-iteration-count: infinite; animation-timing-function:linear;}
.loading .img:before {width: 180px; height: 180px; content: ""; background: url(../images/img/loading-rotate.svg) no-repeat center top; position: absolute; left: -30px; top: -30px; animation-name: loading-rotate; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function:linear; transform-origin: center;}

@keyframes loading-rotate { from {transform: rotate(0); } to { transform: rotate(359deg); } }
@keyframes loading-blink { 0% {background-image: url(../images/img/loading-face.svg); } 98% {background-image: url(../images/img/loading-face.svg); } 100% { background-image: url(../images/img/loading-face-close.svg);} }
@keyframes loading-baloon { 0% {padding-top: 15px; } 50% { padding-top: 0; }  100% { padding-top: 15px; }}

@supports (-webkit-backdrop-filter: none) { 
   .scrolled .gnb, .loading { -webkit-backdrop-filter: blur(8px); background-color: rgba(255,255,255,.8); }
}

/*반응형*/
@media (max-width: 414px) {
   html {
   --Width:100%;
   --visual-h:70vh;
   }
   td,th {word-break: break-all;}
   .grid.horizon td .th {display: inline-block;} 
   .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {display: block; top: auto; bottom: 20px; height: 1px; left: 50px; width: calc(100% - 50px);  background:rgba(255,255,255,0.4)}
   .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: var(--Main-light);}
   body{font-family: -apple-system, BlinkMacSystemFont, sans-serif;}
   .guideCon {padding:0 20px;}
   .privacy .tabs a {display: flex; line-height: initial; align-items: center; padding: 0 5px; font-size: .85em;}
   .privacy .tabs a::first-line { }
   * {letter-spacing: -0.02em;}
   .gnb {padding: 0 0 0 20px;}
   .gnb .menu li.logo {height: 24px;}
   .gnb .menu .menus .menu-n {display: block;}
   .gnb .coll {width:50px ; height:var(--Top-h) ; display: block; text-align: center; line-height:var(--Top-h) ; padding: 20px 17px;   z-index: 2;}
   .gnb .coll:before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; height: 10px; content: ""; display: block}
   .gnb .coll:after {content: ""; display: block; position: absolute; width: 12px; height: 1px; top: 50%; background-color: #fff;  margin-left: 3px;}
   .scrolled .gnb .menu { height: var(--Top-h);}
   .scrolled .gnb:after {width: 300%; transform: scale(0.34);}
   .scrolled .gnb .coll:before { border-top: 1px solid var(--Gray-Dark); border-bottom: 1px solid var(--Gray-Dark); }
   .scrolled .gnb .coll:after { background-color: var(--Gray-Dark); }
   .gnb .menu li.menus {display: block; position: absolute; flex-direction: column; height: 100vh; padding-top:calc(20px + var(--Top-h)); top: 0; right: -100%; z-index: 1; background-color: var(--Gray-Dark); color: #fff; transition: .2s; min-width: 50%;}
   .gnb.active .menu li.menus {right: 0;}
   .gnb.active .coll {background-color: transparent;}
   .gnb.active .coll::before {border-color: #fff;}
   .gnb.active .coll::after {background-color: #fff;}
   .gnb .menu li.menus li {display: block; margin-left: 0; padding: 10px 30px;}
   .gnb .menu {height: 50px;}
   .gnb .menu li.logo img {height: 25px;}
   .gnb .menu .menus .menu-n li.member {background: none !important; width: 100%; height: inherit;}
   .gnb .menu .menus .menu-n li.member:before{content: "로그인";}
   .gnb .menu .menus .menu-n li.member.loged:before {content: "마이페이지";}
   .scrolled .gnb .menu a.active {color: var(--Main-light);}

   .wrap .visual {height: var(--visual-h);}
   .wrap .visual .ment {padding: 0 30px; text-align: left; z-index: 3;}
   .wrap .visual h1 {font-size: 1.2em;}
   .wrap .visual h2 {font-size: 2em; margin-bottom: 5px ; margin-top: 15px;}
   .wrap .visual h3 {font-size: 2.5em;}
   .wrap .visual:after { background-color: rgba(0,0,0,0.5);display: block; z-index: 0;}

   .wrap .visual-slider + .section {margin-top:calc(var(--visual-h) - 30px); border-radius: 30px 30px 0 0;}
   .wrap .section {padding: 40px 0;}
   .wrap .section .head {padding: 0 20px;}
   .wrap .section .head h1 {line-height: initial; font-size: 2em; margin-bottom: 10px;}
   .wrap .section#mirihae .head h1 {padding: 0 20px;}
   .wrap .section .head::before {margin:0 auto 30px; width: 40px; height: 4px;}
   .wrap .section .head p {font-size: 1em;}

   .wrap #mirihae ul li {width: 50%; margin:40px 0 20px; }
   .wrap #mirihae ul li .img {height: calc(50vw - 40px); margin-bottom: 20px;}
   .wrap #mirihae ul li .img img { width: calc(50vw - 60px); height: auto;}
   .wrap #mirihae ul li:nth-child(3) .img img, .wrap #mirihae ul li:nth-child(6) .img img { height:calc(50vw - 60px); width: auto;}
   .wrap #mirihae ul li:nth-child(3) .img img {margin-left: -5.5vw;}
   .wrap #mirihae ul li:nth-child(6) .img img {margin-right: -5.5vw;}
   .wrap #mirihae ul li:first-of-type .img img { width: calc(50vw - 60px); height: auto; }
   .wrap #mirihae ul li h2 {font-size: 1.2em;}
   .wrap #mirihae ul li p {font-size: .85em;}

   .wrap #feat .head h1 span {}
   .wrap #feat .head h1 span:before, .wrap #portfolio .head h1 span:before {content: ""; display: block; }

   .wrap #feat ul {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
   .wrap #feat ul li {width: 50%;   margin-top: 20px; margin-bottom: 30px; flex-grow: 0; flex-shrink: 0;}
   .wrap #feat ul li .img {height:60px; line-height: 60px; margin-bottom: 10px; transform-origin: center; transform: scale(.8); }
   .wrap #feat ul li .img img {vertical-align: middle;}
   .wrap #feat ul li h2 {margin-bottom: 5px; font-size: 1.2em;}
   .wrap #feat ul li p {color: var(--Gray-Mid); font-size: .85em;}

   .wrap #portfolio ul li {width: 100%; padding: 0 20px; margin-top: 40px;}
   .wrap #portfolio ul li .img {width: 100%; height: 56vw;}
   .wrap #portfolio ul li h2 {font-size: 1.4em; margin-top: 5px;}
   .wrap #portfolio ul li p {font-size: .85em;}

   .wrap #contact .map-area {margin: 0 20px; width: initial; border-radius: 10px;}
   .wrap #contact ul.cs {display: block; padding: 0 20px; margin-top: 40px;}
   .wrap #contact ul.cs > li {width: 100%; margin-bottom: 40px;}
   .wrap #contact ul.cs > li .list li {font-size: .85em;}
   .wrap #contact ul.cs > li .list li, .wrap #contact ul.cs > li .list li a {line-height: 2; }


   .wrap #contact ul.cs > li h2 {margin-bottom: 10px; font-size: 1.3em;}
   .wrap #contact ul.cs > li .tel {font-size: 2em; font-weight: 100;}
   .wrap #contact ul.cs > li .addr {margin: 5px 0;}
   .wrap #contact ul.cs > li .working-time {margin-top: 5px;}
   .wrap #contact ul.cs > li .id {font-size: 1.6em; font-weight: 100;}
   .footer {padding:30px 20px; font-size: .85em;}
   .wrap #contact ul.cs > li .sns a {transform-origin: left center; transform: scale(.85); }







   .wrap.member {padding: 0}
   .wrap.member .top {padding: 40px 0;}
   .wrap.member .top .logo {height: 30px;}
   .wrap.member .top .typo h1 {font-size: 1.8em;}
   .wrap.member .login-form {width: 100%; padding: 0 40px;}
   .wrap.member .footer .in .logo-service {height: 16px;}
   .wrap.member .login-form .form-input .id, .wrap.member .login-form .form-input .pw {height: 70px;}
   .wrap.member .login-form .id-pw span {}
   .wrap.member .btns a {height: 60px; line-height: 60px; font-size: 1em;}
   .wrap.member .login-form .id-pw input {font-size: 1.1em;}
   .wrap.member.join .footer, .wrap.member.join .top {width: 100%;}
   .wrap.member .join-form {width: 100%;}
   .wrap.member .join-form .join-input {padding:30px 20px;}
   .wrap.member .join-form .accordion {margin: 0;}
   .wrap.member .join-form .section h1 {font-size: 1.3em;}
   .wrap.member .form .grid.vertical tr {padding:0; padding-top: 10px;}
   .wrap.member .form .grid.vertical tr:first-of-type {padding-top: 20px;}
   .wrap.member .form .grid.vertical tr:before {display: none;}
   .wrap.member.join .form.grid.vertical th {margin-left: 5px; font-size: .85em; color: var(--Gray-Dark);}
   .wrap.member.join .grid.vertical {position: relative;}
   .wrap.member.join .grid.vertical.form {position: relative;}
   .wrap.member.join .grid.vertical.form tr{position: relative; width: calc(100% + 5px); margin-left: -5px;}
   .wrap.member.join .grid.vertical th,.wrap.member.join .grid.vertical th:first-child {padding: 0; padding-right: 20px;}
   .wrap.member.join .grid.vertical:before {content: "";width: 300%;  height: 1px;position: absolute;left: 0;top: 0;background-color: #000;
opacity: 1;transform: scale(.33);transform-origin: left top; }
   .wrap.member .join-form .section .head {margin-bottom: 15px;}
   .wrap.member.join .join-result .welcome .head h1 {font-size: 1.6em;}
   .tui-editor-defaultUI .te-mode-switch-section {display: none !important;}
   .write-area .title{padding-left: 20px; padding-right: 10px;}
   .write-area + .bottom-set {margin-top: -1px;}
}