@charset "utf-8";

/* 공통 */
.show-default {
   display: block;
}

.hide-default {
   display: none;
}

.clearfix:after {
   content: '';
   display: block;
   clear: both;
}

.ov {
   overflow: hidden;
   position: fixed;
}

/* skip */
#top_skip {
   display: block;
   background: #fff;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 99999999;
}

#top_skip a {
   position: relative;
   display: block;
   width: 120px;
   line-height: 35px;
   text-align: center;
   background: #333;
   color: #fff;
   font-size: 12px;
   height: 0;
   overflow: hidden;
}

#top_skip a:focus {
   height: 35px;
   border: 2px solid #005983;
}

/* header */
#header {
   z-index: 101;
}

.gsnb_bg {
   display: block;
   position: absolute;
   top: 145px;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fff;
}

.h_wrap {
   position: relative;
   height: 145px;
   overflow: hidden;
}

.head_top {
   height: 90px;
}

.like_icon {
   color: #b49874 !important;
   font-size: 13px;
}

.like_icon span {
   position: relative;
   display: inline-block;
   vertical-align: top;
   height: 25px;
   width: 25px;
}

.like_icon img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   margin: 0 auto;
   transition: 0.2s ease-in-out;
   -webkit-transition: 0.2s ease-in-out;
   -moz-transition: 0.2s ease-in-out;
   -o-transition: 0.2s ease-in-out;
}

.like_icon img:last-child {
   opacity: 0;
}

.like_icon:hover img:first-child {
   opacity: 0;
}

.like_icon:hover img:last-child {
   opacity: 1;
}

.login_pc {
   display: inline-block;
   vertical-align: top;
   margin-top: 35px;
}

.login_pc li {
   float: left;
   position: relative;
}

.login_pc li a {
   font-size: 12px;
   color: #b49874;
   display: block;
   margin-right: 15px;
}

.login_pc li:after {
   content: '';
   display: block;
   background: #b49874;
   position: absolute;
   top: 8px;
   right: 7px;
   width: 1px;
   height: 10px;
}

.login_pc li:last-child:after {
   display: none;
}

#logo {
   position: absolute;
   margin: 0 auto;
   top: 30px;
   left: 110px;
   right: 110px;
   text-align: center;
}

/* 검색창 */
.search_pc {
   position: absolute;
   right: 0;
   top: 35px;
}

.ser_wrap {
   background: #252525;
   position: fixed;
   left: 0;
   right: 0;
   z-index: 9;
   top: 90px;
   display: none;
   padding: 35px 0;
   text-align: center;
}

.ser_wrap.on {
   display: block;
}

.ser_wrap .tag {
   text-align: center;
   font-size: 0;
}

.ser_wrap .tag li {
   display: inline-block;
   vertical-align: top;
   font-size: 16px;
   margin-right: 10px;
   margin-bottom: 10px;
}

.ser_wrap .tag li a {
   font-size: 16px;
   color: #cccccc;
   display: block;
   border: 1px solid #454545;
   border-radius: 3px;
   height: 40px;
   line-height: 40px;
   padding: 0 20px;
   box-sizing: border-box;
}

.ser_wrap .input {
   position: relative;
   width: 60%;
   margin: 50px auto 0;
}

.ser_wrap .input input {
   border-bottom: 1px solid #454545 !important;
   width: 100%;
   height: 60px;
   font-size: 16px;
   border: 0;
   box-sizing: border-box;
   padding: 0 30px 0 10px;
   background: none;
   outline: 0;
   color: #ccc;
}

.ser_wrap .input a {
   position: absolute;
   right: 5px;
   top: 10px;
}

.h_wrap .border {
   border-top: 1px solid rgba(180, 152, 116, 0.4);
   border-bottom: 1px solid #ddd;
   position: relative;
   height: 55px;
   box-sizing: border-box;
}

/* gnb */
#gnb_wrap {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   padding-left: 0;
}

.gnb {
   font-size: 0;
   text-align: center;
}

.gnb>li {
   display: inline-block;
   vertical-align: top;
}

.gnb>li>a {
   display: block;
   font-size: 16px;
   line-height: 55px;
   padding-right: 33px;
   letter-spacing: -0.005em;
}

.gnb>li:last-child>a {
   padding-right: 0;
}

.gsnb {
   position: absolute;
   left: 0;
   top: 100%;
   right: 0;
   overflow: hidden;
   width: 1520px;
   height: 0;
   margin: 0 auto;
}

.gnb>li.active .gsnb {
   height: auto;
}

.gsnb .text_wrap {
   position: absolute;
   width: 280px;
   left: 0;
   box-sizing: border-box;
   padding: 40px 30px 40px 0;
   text-align: left;
}

.gsnb .text_wrap .name {
   font-size: 40px;
   font-weight: 500;
   color: #b49874;
   line-height: 1;
}

.gsnb .text_wrap .sub {
   font-size: 15px;
   color: #999999;
   margin-top: 20px;
   /* display: -webkit-box;
	display: -ms-flexbox;
	display: box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; */
   letter-spacing: -0.6px;
   line-height: 1.5em;
   /* height: 4.5em; */
}

.gsnb>ul {
   margin-left: 280px;
   border-left: 1px solid #ddd;
   text-align: left;
}

.gsnb li {
   display: inline-block;
   vertical-align: top;
   padding: 40px 0 40px 30px;
}

.gsnb li a {
   display: block;
   opacity: 0.6;
   transition: 0.2s ease-in-out;
   -webkit-transition: 0.2s ease-in-out;
   -moz-transition: 0.2s ease-in-out;
   -o-transition: 0.2s ease-in-out;
}

.gsnb li a:hover {
   opacity: 1;
}

.gsnb li .img {
   width: 210px;
}

.gsnb li .img img {
   width: 100%;
   vertical-align: top;
}

.gsnb li .txt {
   /* background: url('/image/common/head_arw.png') no-repeat right bottom; */
}

.gsnb li .tit {
   font-size: 18px;
   font-weight: 500;
   color: #000;
   margin-top: 7px;
}

.gsnb li .sub {
   font-size: 14px;
   color: #999999;
}

/* gnb btn */
.btn_gnb {
   width: 90px;
   height: 90px;
   position: absolute;
   left: 0;
   top: 0;
   margin-left: 0;
   z-index: 999999;
   display: none;
   color: #b49874;
   font-size: 18px;
   text-align: left;
}


.btn_gnb span {
   display: block;
   position: absolute;
   left: 0%;
   top: 50%;
   width: 23px;
   height: 2px;
   /* margin-left: -13px; */
   margin-top: -1px;
   background: #b49874;
   border-radius: 2px;
   opacity: 0;
}

.btn_gnb span::before,
.btn_gnb span::after {
   display: block;
   content: '';
   width: 32px;
   height: 2px;
   position: absolute;
   background: #b49874;
   border-radius: 2px;
   transition: .2s ease;
   -webkit-transition: .2s ease;
   -moz-transition: .2s ease;
   -o-transition: .2s ease;
}

.btn_gnb span::before {
   left: 0;
   top: 0;
   margin-top: -12px;
}

.btn_gnb span::after {
   left: 0;
   bottom: 0;
   margin-bottom: -12px;
}


.h_open .btn_gnb {
   font-size: 0px;
   background: none;
}

.h_open .btn_gnb span {
   background: transparent !important;
   opacity: 1;
}

.h_open .btn_gnb span::before {
   margin-top: 0;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   background: #b49874;
}

.h_open .btn_gnb span::after {
   margin-bottom: 0;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   background: #b49874;
}

.gsnb_bg_m {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.6);
}

.m_logo {
   position: absolute;
   top: 25px;
   left: 0;
   right: 0;
   text-align: center;
}

.m_fix {
   /* margin-top: 20px; */
   /* background: #fff; */
}

.m_fix .cus {
   background: #fff;
   padding: 20px 15px;
   margin: 10px;
}

.m_fix .cus .eg {
   font-size: 20px;
   font-weight: bold;
   line-height: 1;
   margin-bottom: 5px;
}

.m_fix .cus .ko {
   font-size: 16px;
}

.m_fix .cus .box {
   margin-top: 10px;
   padding: 10px 0;
   text-align: center;
   font-size: 0;
}

.m_fix .cus .box span {
   vertical-align: middle;
   font-size: 18px;
   width: 33.333%;
   box-sizing: border-box;
}

.m_fix .cus .box span:first-child {
   width: 33.333%;
}

.m_fix .cus .box span:last-child {
   width: 33.333%;
}

.m_fix .cus .box span a {
   background: #b49874;
   color: #fff;
   display: block;
   line-height: 30px;
   height: 30px;
   font-size: 14px;
   margin: 0 10px;
}

/* footer */
#footer {
   border-top: 1px solid #ddd;
}

#footer .top {
   border-bottom: 1px solid #ddd;
   padding: 25px 0;
}

#footer .txt li {
   display: inline-block;
}

#footer .txt li::after {
   content: '|';
   line-height: 10px;
   height: 10px;
   display: inline-block;
   vertical-align: top;
   margin: 8px 10px 0;
   color: #aaa;
   font-weight: 300;
   overflow: hidden;
   font-size: 12px;
}

#footer .txt li:last-child::after {
   display: none;
}

#footer .txt li a {
   font-size: 16px;
   color: #8f8d8c;
   display: inline-block;
}

#footer .txt li a b {
   color: #bb9e6f;
   font-weight: 400;
}

#footer .top select {
   position: absolute;
   top: -5px;
   right: 0;
   height: 35px;
   width: 260px;
   color: #bb9e6f;
   font-size: 14px;
   background: url('/image/common/f_arw.png') no-repeat 95%;
   border: 1px solid #bb9e6f;
   padding: 0 20px;
   box-sizing: border-box;
}

#footer .bot {
   padding: 40px 0;
}

#footer .f-logo,
#footer .f-txt {
   display: inline-block;
   vertical-align: top;
}

#footer .f-logo {
   margin: 0 15px 0 0;
}

#footer .f-txt p {
   font-size: 14px;
   margin-bottom: 5px;
   opacity: 0.8;
}

#footer .f-txt p span {
   font-size: 12px;
   line-height: 10px;
   height: 10px;
   display: inline-block;
   vertical-align: top;
   margin: 8px 10px 0;
   color: #aaa;
   font-weight: 300;
   overflow: hidden;
}

#footer .f-txt p.copy {
   margin-top: 15px;
   font-size: 13px;
}

#footer .sns {
   position: absolute;
   right: 0;
   top: 0;
}

#footer .sns li {
   display: inline-block;
   vertical-align: top;
   margin-left: 15px;
   text-align: center;
}

#footer .sns li a p {
   line-height: 1.3;
}

/* sub_head */
.sub_head {
   height: 480px;
   background-size: cover !important;
   color: #fff;
   text-align: center;
}

.sub_head.K01 {
   background: url('/image/sub/k01.jpg') no-repeat 60%;
}

.sub_head.K02 {
   background: url('/image/sub/k02.jpg') no-repeat 80%;
}

.sub_head.K03 {
   background: url('/image/sub/k03.jpg') no-repeat 40%;
}

.sub_head.K04 {
   background: url('/image/sub/k03.jpg') no-repeat center;
}

.sub_head.K05 {
   background: url('/image/sub/k05.jpg') no-repeat 80%;
}

.sub_head.K06 {
   background: url('/image/sub/k06.jpg') no-repeat 80%;
}

.sub_head.K07 {
   background: url('/image/sub/k07.jpg') no-repeat center;
}

.sub_head.K08 {
   background: url('/image/sub/k08.jpg') no-repeat 80%;
}

.sub_head.K09 {
   background: url('/image/sub/k09.jpg') no-repeat center;
}

.sub_head.K10 {
   background: url('/image/sub/k11.jpg') no-repeat 80%;
}

.sub_head.K11 {
   background: url('/image/sub/k11.jpg') no-repeat center;
}

.sub_head.ser {
   background: url('/image/sub/ser.jpg') no-repeat center;
}

.sub_head .tit {
   font-size: 54px;
   line-height: 1;
   margin-bottom: 25px;
   padding-top: 190px;
}

.sub_head .sub {
   font-size: 18px;
}

/* lnb */
.lnb_wrap {
   position: relative;
   top: -35px;
   transition: 0.3s ease-in-out;
   -webkit-transition: 0.3s ease-in-out;
   -moz-transition: 0.3s ease-in-out;
   -o-transition: 0.3s ease-in-out;
}

.lnb_wrap.fix {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 991;
}

.lnb {
   background: #fff;
   border: 1px solid #b49874;
   display: table;
   table-layout: fixed;
   width: 100%;
   box-sizing: border-box;
   padding: 20px 0;
   height: 70px;
}

.lnb li {
   displaY: table-cell;
   vertical-align: middle;
   position: relative;
}

.lnb li:after {
   content: '';
   position: absolute;
   right: 0;
   top: 0;
   width: 1px;
   height: 30px;
   background: #ddd;
}

.lnb li:last-child:after {
   displaY: none;
}

.lnb li a {
   display: block;
   font-size: 16px;
   text-align: center;
   color: #252525;
}

.lnb li.on a {
   color: #b98e56;
}

.lnb li.on a:after {
   content: '';
   bottom: -20px;
   left: 0;
   right: 0;
   height: 3px;
   position: absolute;
   width: 100%;
   background: #b49874;
}

.lsnb a {
   display: block;
   border: 1px solid #b49874;
   font-size: 20px;
   height: 50px;
   line-height: 50px;
   color: #b49874;
   font-weight: 500;
   text-align: center;
   box-sizing: border-box;
   background: #fff url('/image/sub/lnb_arw.png') no-repeat 95% 20px;
   background-size: auto 13px;
}

.lsnb a.on {
   background: #fff url('/image/sub/lnb_arw_up.png') no-repeat 95% 20px;
   background-size: auto 13px;
}

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

   /* header */
   #header, .h_wrap {
      height: 90px;
   }

   .h_wrap .border {
      border-top: 0;
      border-bottom: 0;
      height: auto;
   }

   .login_pc {
      display: none;
   }

   #logo {
      left: 45px;
      right: 45px;
   }

   /* gnb */
   .btn_gnb {
      display: block;
      background-image: url(/image/common/menu_btn.png);
      background-repeat: no-repeat;
      background-size: 40px;
      background-position: 0 center;
   }

   #gnb_wrap {
      overflow: hidden;
      position: fixed;
      left: 0;
      right: 20%;
      top: -90px;
      padding-top: 90px;
      background: #fff;
      padding-left: 0;
      transition: opacity .2s ease;
      -webkit-transition: opacity .2s ease;
      -moz-transition: opacity .2s ease;
      -o-transition: opacity .2s ease;
      opacity: 0;
   }

   .h_open #gnb_wrap {
      height: auto;
      bottom: 0;
      top: 0;
      opacity: 1;
      z-index: 999;
   }

   .gnb_scroll {
      position: absolute;
      left: 0;
      top: 90px;
      right: 0;
      bottom: 0;
      overflow: auto;
      background: #f9f9f9;
      overflow-scrolling: touch;
      -webkit-overflow-scrolling: touch;
      -moz-overflow-scrolling: touch;
   }

   .gnb {
      text-align: left;
   }

   .gnb>li {
      padding: 0;
      height: auto;
      display: block;
      background: #fff;
      margin: 10px;
   }

   .gnb>li>a {
      font-size: 28px;
      line-height: 70px;
      font-weight: 500;
      position: relative;
      padding: 0 20px;
      color: #666666;
   }

   .gnb>.active>a {
      color: #b79c7e;
   }

   .gsnb {
      position: static;
      width: auto;
      height: auto;
   }

   .gsnb>ul {
      margin-left: 0;
      border-left: 0;
      padding: 10px 30px;
      font-size: 0;
   }

   .gsnb li {
      width: 32%;
      padding: 0;
      margin-right: 2%;
      margin-bottom: 15px;
   }

   .gsnb li:nth-child(3n) {
      margin-right: 0;
   }

   .gsnb li a {
      line-height: 43px;
      opacity: 1;
   }

   .gsnb li .tit {
      font-size: 20px;
      color: #666;
      line-height: 1;
      /* margin-top: 5px; */
      text-align: center;
   }

   .gsnb li .txt {
      background: none;
   }

   .gsnb .text_wrap {
      display: none;
   }

   .gsnb li .img {
      width: auto;
   }

   .h_open .gsnb_bg_m {
      display: block;
   }

   .login_m {
      display: block;
   }

   .login_m p {
      float: left;
      width: 50%;
   }

   .login_m p a {
      display: block;
      height: 60px;
      line-height: 60px;
      color: #fff;
      font-size: 20px;
      text-align: center;
   }

   .login_m .br a {
      background: #b79c7e;
   }

   .login_m .bl a {
      background: #333333;
   }

   /* footer */
   #footer .f-logo, #footer .f-txt {
      display: block;
      text-align: center;
   }

   #footer .f-logo {
      margin: 0 0 10px;
   }

   #footer .sns {
      position: static;
      margin-top: 20px;
   }
}

/* 타블렛 세로 */
@media all and (max-width:1023px) {

   /* sub_head */
   .sub_head {
      height: 400px;
   }

   .sub_head .tit {
      padding-top: 140px;
   }

   /* lnb */
   .lnb_wrap {
      top: -30px;
   }

   .lnb {
      padding: 15px 0;
      height: 60px;
   }

   .lnb li a {
      font-size: 15px;
   }

   .lnb li.on a:after {
      bottom: -15px;
   }
}

/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:767px) {
   #gnb_wrap {
      right: 0;
   }

   .gsnb li .tit {
      font-size: 16px;
   }

   .gsnb>ul {
      padding: 5px 20px 10px;
   }

   .m_logo {
      left: auto;
      right: 0;
   }

   .ser_wrap .input {
      width: 100%;
      margin: 20px auto 0;
   }

   .ser_wrap .input input {
      height: 50px;
      font-size: 14px;
   }

   .ser_wrap .input a img {
      height: 27px;
   }

   /* sub_head */
   .sub_head {
      height: 350px;
   }

   .sub_head .tit {
      padding-top: 120px;
   }

   /* lnb */
   .lnb_wrap {
      top: -30px;
   }

   .lnb {
      padding: 0;
      height: auto;
      display: none;
      position: absolute;
      z-index: 2;
      top: 100%;
      left: 0;
      right: 0;
   }

   .lnb li {
      display: block;
   }

   .lnb li a {
      font-size: 20px;
      height: 50px;
      line-height: 50px;
      background: #f5f4f3;
      border-bottom: 1px solid #ddd;
   }

   .lnb li:after {
      display: none;
   }

   .lnb li a, .lnb li.on a {
      color: #999;
   }

   .lnb li.on a:after {
      display: none;
   }

   .lnb.ader {
      display: table;
      position: static;
      padding: 14px 0;
      height: 50px;
   }

   .lnb.ader li {
      display: table-cell;
   }

   .lnb.ader li a {
      background: none;
      border-bottom: 0;
      font-size: 15px;
      height: auto;
      line-height: normal;
   }

   .lnb.ader li.on a {
      color: #b49874;
   }

   .lnb.ader li.on a:after {
      display: block;
   }

   .lnb.ader li:after {
      display: block;
      height: 25px;
   }
}

/* 모바일 상세 */
@media all and (max-width:640px) {
	#container{
		margin-top: 45px;
	}
   .gnb__mobile {
      background-color: #fff;
      display: -ms-flex;
      display: flex;
      -ms-align-items: center;
      align-items: center;
      padding: 10px 4%;
   }

   .gnb__mobile .gnb__wrap {
      flex: 1;
      overflow-x: scroll;
   }

   .gnb__mobile .gnb__wrap::-webkit-scrollbar {
      width: 3px;
		height: 0px;
      background: none;
   }

   .gnb__mobile .gnb__wrap::-webkit-scrollbar-thumb {
      background: #dcdcdc;
   }

   .gnb__mobile .gnb__wrap::-webkit-scrollbar-track {
      background: none;
   }

   .gnb__mobile .gnb__wrap:last-child {
      border-bottom: none;
   }

   .gnb__mobile .gnb__wrap .gnb__inner {
      width: 840px;
   }

   .gnb__mobile .gnb__wrap .gnb__inner a {
      margin-right: 12px;
      font-size: 16px;
   }
}

/* 모바일 가로 */
@media all and (max-width:568px) {

   /* header */
   #header, .h_wrap {
      height: 70px;
   }

   .head_top {
      height: 70px;
   }

   #logo {
      top: 21px;
   }

   #logo img {
      height: 35px;
   }

   .search_pc {
      top: 25px;
   }

   /* gnb */
   .btn_gnb {
      width: 70px;
      height: 70px;
      background-size: 35px;
   }

   #gnb_wrap {
      padding-top: 70px;
   }

   .m_logo {
      top: 20px;
   }

   .m_logo img {
      height: 35px;
   }

   .gnb_scroll {
      top: 70px;
      /* background: #f9f9f9; */
   }

   .gnb>li>a {
      font-size: 23px;
      line-height: 60px;
      padding: 0 15px;
   }

   .gsnb li .tit {
      font-size: 14px;
   }

   .login_m p a {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
   }

   .ser_wrap {
      top: 70px;
      padding: 25px 0;
   }

   .ser_wrap .tag li a {
      font-size: 12px;
      padding: 0 15px;
      height: 30px;
      line-height: 30px;
   }

   /* sub_head */
   .sub_head {
      height: 300px;
   }

   .sub_head .tit {
      padding-top: 100px;
      font-size: 48px;
      margin-bottom: 15px;
   }

   .sub_head .sub {
      font-size: 16px;
   }

   /* footer */
   #footer .top {
      text-align: center;
      border-bottom: 0;
      padding: 25px 0 0;
   }

   #footer .top select {
      position: static;
      margin-top: 15px;
   }
}

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

   /* gnb */
   .gnb>li>a {
      font-size: 18px;
      line-height: 50px;
      padding: 0 25px;
   }

   .gsnb>ul {
      padding: 10px 30px;
   }

   .gsnb li {
      /* padding: 0 35px; */
   }

   .gsnb li .tit {
      font-size: 12px;
   }

   .gsnb li a {
      line-height: 38px;
   }

   .login_m p a {
      height: 45px;
      line-height: 45px;
      font-size: 16px;
   }

   .btn_gnb span {
      width: 20px;
   }

   .btn_gnb span::before, .btn_gnb span::after {
      width: 30px;
   }

   .btn_gnb span::before {
      margin-top: -10px;
   }

   .btn_gnb span::after {
      margin-bottom: -10px;
   }

   .m_fix .cus .eg {
      /* font-size: 20px; */
   }

   .m_fix .cus .ko {
      font-size: 13px;
   }

   .m_fix .cus .box {
      margin-top: 8px;
   }

   .m_fix .cus .box span {
      font-size: 15px;
   }

   .q_center .box_s span {
      font-size: 14px;
   }

   /* sub_head */
   .sub_head {
      height: 250px;
   }

   .sub_head .tit {
      padding-top: 75px;
      font-size: 38px;
   }

   .sub_head .sub {
      font-size: 14px;
   }

   /* footer */
   #footer .f-txt p {
      font-size: 12px;
      line-height: 1.8;
      margin-bottom: 0;
   }

   #footer .f-txt p.copy {
      font-size: 12px;
   }

   #footer .f-logo img {
      height: 40px;
   }
}

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

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

/* 공통 */
/* PC이하 ~ 타블렛 가로 */
@media all and (max-width:1199px) {
   .show-1199 {
      display: block;
   }

   .hide-1199 {
      display: none;
   }
}

/* 타블렛 가로 이하 */
@media all and (max-width:1023px) {
   .show-1023 {
      display: block;
   }

   .hide-1023 {
      display: none;
   }
}

/* 타블렛 이하 ~ 모바일 */
@media all and (max-width:767px) {
   .show-767 {
      display: block;
   }

   .hide-767 {
      display: none;
   }
}

@media all and (max-width:640px) {
   .show-640 {
      display: block;
   }

   .hide-640 {
      display: none;
   }
}

/* 모바일 가로 미만 */
@media all and (max-width:568px) {
   .show-568 {
      display: block;
   }

   .hide-568 {
      display: none;
   }
}

/* 모바일 최소 */
@media all and (max-width:425px) {
   .show-425 {
      display: block;
   }

   .hide-425 {
      display: none;
   }
}

@media all and (max-width:375px) {
   .show-375 {
      display: block;
   }

   .hide-375 {
      display: none;
   }
}

@media all and (max-width:320px) {
   .show-320 {
      display: block;
   }

   .hide-320 {
      display: none;
   }
}