@charset "utf-8";

/* layout.css */

/* ******************* *
* GLOBAL
* ******************* */

:root { --color-white: #ffffff;
 --color-light-gray: #e8e8e8;
 --color-light-gray02: #f1f0ed;
 --color-light-gray03: #bdb9b8;
 --color-gray: #666666;
 --color-dark-gray: #3c3d42;
 --color-black: #010101;
 --color-green: #133E35;
 --color-blue: #0078f5;
 --color-orange: #ff5835;
 --color-tit: #3c3d42;
 --color-txt: #848484;
 --color-border: #bfbfbf;
 --color-yellow: #fbeda2;
}

html, body { font-size: 18px; font-family: "SUIT", sans-serif; letter-spacing: -0.038rem; line-height: 1.2; word-break: keep-all; word-wrap: break-word; color:#333; touch-action: auto; overscroll-behavior: auto; text-size-adjust:100%;overflow-x: hidden;         }
#skipNav { position: absolute; left: 0; top: 0; width: 100%; z-index: 999; }
#skipNav a { display: block; height: 1px; margin-bottom: -1px; overflow: hidden; text-align: center; text-decoration: none; color: var(--color-white); font-size: 16px; }
#skipNav a:focus { display: block; height: 38px; padding: 10px 0 3px; background: none repeat scroll 0 0 #333; }
.inner { margin: 0 auto; max-width: 1500px; }
.br { display: block; }

@media all and (max-width:1499px) {
 .inner { margin: 0 30px; }
}
@media all and (max-width:1199px) {
 html, body { font-size: 16px; }
}
@media all and (max-width:768px) {
 html, body { font-size: 15px; }
 .inner { margin: 0 20px; }
}
@media all and (max-width:640px) {
 .inner { margin: 0 15px; }
}

/* ******************* *
* HEADER
* ******************* */
header {position: relative;z-index: 10;background: rgba(0, 0, 0, .2);}
.header-gnb { height: 39px; border-bottom: 1px solid var(--color-light-gray03); }
.gnb-btn { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; height: 100%; }
.gnb-btn a {display: flex;align-items: center;font-size: .778rem;color: var(--color-white);margin-right: 12px;}
.gnb-btn a::after { content: ''; display: block; width: 2px; height: 2px; border-radius: 50px; background: var(--color-light-gray03); margin-left: 12px; }
.gnb-btn a:last-child { margin-right: 0; padding-right: 0; }
.gnb-btn a:last-child::after { display: none; }
.gnb-logo a { height: 40px; display: flex; align-items: center; }
.header-nav,
.header-nav .nav,
.header-nav .nav-a1 {height: 63px;}
.header-nav {background: transparent;border-bottom: 1px solid transparent;}
.header-nav .inner {display: flex;align-items: center;}
.header-nav .logo { position: relative; z-index: 2; }
.header-nav .logo a { display: block; background: url(../../../../resource/cwtour/images/common/header_logo.png); width: 129px; height: 38px; }
.header-nav .nav-wrap { position: relative; }
.header-nav .nav {flex: 0 0 64%;margin: 0 auto;}
.header-nav .depth1 {width: 100%;z-index: 2;position: relative;}
.header-nav .depth1 > ul {display: flex;justify-content: center;}
.header-nav .depth1 > ul li {position: relative;z-index: 1;}
.header-nav .nav-a1 {display: flex;align-items: center;font-size: 1.111rem;font-weight: 500;color: var(--color-white);padding: 0 30px;position: relative;}
.header-nav .nav-a1::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 80%; height: 3px; background-color: var(--color-green); margin: 0 auto; transition: all .1s; opacity: 0; visibility: hidden; }
.header-nav .nav-a1.over::after { opacity: 1; visibility: visible; }
.header-nav .depth2 {display: none;position: absolute;width: 730px;left: 0;top: 63px;transform: translateX(-43%);}
.header-nav .depth2.active { display: block; }
.header-nav .depth2 ul {padding: 22px 70px;display: flex;background: rgba(255,255,255,.6);border-radius: 20px;position: relative;box-shadow: 0 0 13px rgba(0,0,0,.46);overflow: hidden;justify-content: flex-start;width: fit-content;left: 0;right: 0;margin: auto;max-width: 730px;flex-wrap: wrap;backdrop-filter: blur(4px);gap: 14px;}
.header-nav .depth2 ul::before {content:'';display: block;width: 100%;height: 100%;background: rgba(0,0,0,.1);position: absolute;top: 0;left: 0;z-index: -1;} 
.header-nav .nav-a2 {display: block;text-align: center;padding: 13px 22px;transition: all .2s;color: var(--color-green);font-weight: 600;font-size: 20px;}
.header-nav .nav-a2:hover,
.header-nav .nav-a2:focus {background: var(--color-green);font-weight: 700;border-radius:10px;color: #fff}
.header-nav .nav-btn { margin: auto 0 auto auto; }
[class*='nav-m'] { display: none; }
.nav-m-open {background: url(../../../../resource/cwtour/images/common/ico_menu.svg);width: 32px;height: 32px;background-size: cover;border: none;}
.nav-m-close { position: absolute; background: url(../../../../resource/cwtour/images/common/ico_close.svg); width: 20px; height: 20px; background-size: cover; border: none; top: 3%; right: 20px; }
.nav-m-top { background: var(--color-white); }
.nav-m-top .logo { padding: 20px 30px; }
.nav-m-top .logo a { background: url(../../../../resource/cwtour/images/common/header_logo_b.png) }
.nav-bg {/* background: var(--color-white); */position: absolute;height: calc(100% - 63px);width: 100%;bottom: 0;left: 0;overflow: hidden;transition: all .3s;z-index: 1;}
.nav-btn-wrap {display: flex;align-items: center;position: absolute;right: 0;top: 0;height: 63px;max-width: 1500px;width: 100%;left: 0;margin: auto;justify-content: flex-end;}
.nav-btn-wrap [class*='-btn'] { display: block; position: relative; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/common/layout_sprite.png) no-repeat; }
.nav-btn-wrap [class*='-btn']:not(:last-child) { margin-right: 15px; }
.nav-btn-wrap [class*='-btn'].cal-btn { background-position-x: -40px; }
.nav-btn-wrap [class*='-btn'].search-btn-open { background-position-x: -80px; border: none; }
.nav-btn-wrap [class*='-btn'].register-btn { background-position-x: -120px; }
.nav-btn-wrap [class*='-btn'].login-btn { background-position-x: -160px; }
.nav-btn-wrap .hover-txt {font-size: 0.8333rem;background: rgba(255, 255, 255, .8);width: 100%;display: block;text-align: center;position: absolute;top: 100%;border-radius: 5px;line-height: 1;padding: 3px 0;transition: .3s;opacity: 0;}
.nav-btn-wrap [class*='-btn']:hover .hover-txt,
.nav-btn-wrap [class*='-btn']:focus .hover-txt {opacity: 1;}
.search-frm {display: none;background: rgba(255,255,255,.6);position: relative;/* box-shadow: 0 0 13px rgba(0,0,0,.46); */backdrop-filter: blur(4px);padding: 60px 0;position: absolute;top: 63px;width: 100%;z-index: 0;right: 0;margin: 0 auto;}
.search-frm form { position: relative; margin: 0 auto; }
.search-input {width: 700px;border: none;border-bottom: 1px solid var(--color-dark-gray);height: 55px;background: transparent;color: #fff;}
.search-input::placeholder { color: #fff; }
.search-btn {width: 30px; height: 30px; border: none; position: absolute; right: 0px; top: 0px; bottom: 0; margin: auto; background: url(../../../../resource/cwtour/images/common/layout_sprite.png) no-repeat -80px -40px; }
.search-btn-close { width: 25px; height: 25px; background: url(../../../../resource/cwtour/images/common/ico_close.svg); border: none; background-size: contain; }
.header-mask {display: none;position: fixed;top: 0;left: 0;background: rgb(0, 0, 0, .1);z-index: -1;width: 100%;height: 100%;opacity: 0;visibility: hidden;}
.header-mask.show {display: block;/* opacity: 1; */visibility: visible;}

/* 헤더 active */
.header-gnb.active {background: rgba(255,255,255,.6);backdrop-filter: blur(4px);}
.header-gnb.active .gnb-btn a { color: var(--color-dark-gray); }
.header-nav.active {background: rgba(255,255,255,.6);backdrop-filter: blur(4px);}
.header-nav.active .logo a { background: url(../../../../resource/cwtour/images/common/header_logo_b.png) }
.header-nav.active .nav-btn-wrap [class*='-btn'] { background-position-y: -40px; }
.header-nav.active .nav-a1 { color: var(--color-black); }

/* 지도, 아카이브 헤더 */
header.header-white {background: #fff;color: #222;box-shadow: 6px 0 32px rgba(0,0,0,.2);}
header.header-white .logo a { background: url(../../../../resource/cwtour/images/common/header_logo_b.png) }
header.header-white .nav-btn-wrap [class*='-btn'] { background-position-y: -40px; }
header.header-white .header-nav .nav-a1 { color: var(--color-black); }
header.header-white .gnb-btn a {color: #000;}


/* 코스 헤더 */
.header-course { position: fixed; width: 100%; background: rgba(0,0,0,.4); border-bottom: 1px solid var(--color-border);}


/* sub */

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

 header { position: absolute; top: 0; left: 0; width: 100%; transition: all .3s; }
 .header-nav .logo a {width: 110px;background-size: contain;background-repeat: no-repeat;height: 33px;}
 header.fixed { position: fixed; background: var(--color-white); border-bottom: 1px solid var(--color-border); }
 header.fixed .logo a {background: url(../../../../resource/cwtour/images/common/header_logo_b.png);background-size: contain;background-repeat: no-repeat;}
 header.fixed .nav-m-open { background: url(../../../../resource/cwtour/images/common/ico_menu_b.svg); background-size: cover; }
 .header-gnb { display: none; }
 .gnb-btn { display: block; position: relative; margin-top: 88px; height: auto; width: calc(50% - 15px); margin-left: 15px; justify-content: flex-start; }
 .gnb-btn a { position: relative; color: var(--color-dark-gray); padding: 15px 10px; font-size: 1rem; width: 100%; text-align: center; margin-right: 0; }
 .gnb-btn a::after { background: none; border-radius: 2px; border: 2px solid transparent; border-bottom-color: var(--color-dark-gray); border-right-color: var(--color-dark-gray); transform: rotate(45deg) skew(0deg, 0deg) translateY(-25%); width: 6px; height: 6px; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; transition: 0.35s; }
 .gnb-btn a.is-open::after { transform: rotate(225deg) translateY(-50%); right: 5px; }
 .gnb-btn .toggle-list { display: none; position: absolute; background-color: var(--color-white); border: 1px solid var(--color-border); width: 100%; z-index: 9; }
 .gnb-btn .toggle-list.is-open { display: block; }
 .gnb-btn .toggle-list a { margin-left: 0; }
 .gnb-btn .toggle-list a::after { display: none; }
 .header-nav {padding: 10px 0;}

 .header-nav,
 .header-nav .nav-a1 { height: auto; }
 .header-nav .nav {height: 100%;overflow-y: auto;}
 .header-nav .logo {margin: 0 auto;order: 2;}
 .header-nav .nav.open { z-index: 99; }
 .header-nav .depth1 { width: 100%; margin-top: 30px; order: 3; }
 .header-nav .depth1 > ul { display: block; }
 .header-nav .nav-a1 { color: #191919; font-weight: 500; margin: 15px 15px 0; padding: 15px; position: relative; transition: 0.3s ease; border-bottom: 1px solid var(--color-dark-gray); }
 .header-nav li:not(.has-sub) .nav-a1::after { opacity: 1; visibility: visible; border-width: 2px; border-style: solid; border-color: transparent var(--color-black) var(--color-black) transparent; background-color: transparent; width: 6px; height: 6px; transform: rotate(-45deg); left: inherit; top: 0; bottom: 0; margin: auto; right: 30px; }
 .header-nav .has-sub .nav-a1::before,
 .header-nav .has-sub .nav-a1::after { content: ''; display: block; position: absolute; top: 0; right: 30px; left: inherit; bottom: 0; margin: auto; transition: .35s; width: 2px; height: 12px; background: var(--color-black); opacity: 1; visibility: visible; }
 .header-nav .has-sub .nav-a1::after { transform: rotate(90deg); }
 .header-nav .nav-a1.over::before { display: none; }
 .header-nav .depth2 { position: static; padding: 20px 20px 10px; width: auto; margin: -10px 30px 0; transform: none; }
 .header-nav .has-sub .depth2 > ul { transition: 0.3s ease; overflow: hidden; opacity: 0; visibility: hidden; }
 .header-nav .has-sub.open .depth2 > ul { opacity: 1; visibility: visible; }
 .header-nav .nav-a2 { text-align: left; padding: 10px 0; color: #6b6b6b; }
 [class*='nav-m'] {display: block;}
 .nav { display: none; position: fixed; width: 100%; height: 100%; max-width: 500px; overflow: hidden; top: 0; left: 0; background: var(--color-white); transform: translateX(-100%); transition: .35s; flex-direction: column; }
 .nav.open {display: flex;transform: translateX(0);}
 .translated-ltr  .nav.open {top: 39px}
 .nav-btn { display: none; }
 .nav-btn-wrap { order: 2; width: calc(50% - 15px); margin-right: 15px; margin-top: -40px; justify-content: flex-end; position: static; height: fit-content; margin-bottom: 0; }
 .nav-btn-wrap [class*='-btn'] { background-position-y: -40px; background-position-x: 8px; width: 45px;}
 .nav-btn-wrap [class*='-btn'].cal-btn { background-position-x: -32px;}
 .nav-btn-wrap [class*='-btn'].search-btn-open { display: none; }
 .nav-btn-wrap .hover-txt {opacity: 1;background: none;padding: 0;border-radius: 0;}
 .nav.open .search-frm { display: block; }
 .search-frm { display: none; position: fixed; top: 94px; left: 0; width: 100%; z-index: 1; max-width: 500px; padding: 5px 0 20px; transition: .35s; }
 .search-frm form { position: relative; margin: 0 10px; width: 100%; }
 .search-input { width: 100%; height: 44px; }
 .search-btn-close { display: none; }
 .header-mask.show { z-index: 0; }
 .nav-m-top .logo { margin: 0; width: 220px; }
 .nav-bg,
 .nav-bg .inner { display: none; }

 header.header-white {position: static;}
 header.header-white .nav-m-open {background: url(../../../../resource/cwtour/images/common/ico_menu_b.svg); background-size: cover;}
 header.header-white .logo a { background: url(../../../../resource/cwtour/images/common/header_logo_b.png) no-repeat;  background-size: contain; }

 header.header-white .header-nav,
 header.header-white .header-nav .nav-a1,
 header.header-white .nav-btn-wrap {height: auto;}
 header.header-white .header-nav .nav {height: 100%;}
}



/* ******************* *
* Container
* ******************* */
.container { padding: 0 0 190px; }
.container.course { padding: 0; }
.container.no-padding { padding: 0; }

/* sub layout */
.sub-vis { position: relative; margin-top: -138px; margin-bottom: 130px; }
.svis { display: flex; align-items: center; justify-content: center; }
.svis .tit { position: absolute; display: flex; align-items: center; }
.svis .tit h3 { color: var(--color-white); font-size: 3.1rem; text-align: center; }
.svis .tit img { display: block; margin-right: 25px; }
.svis .img { width: 100%; position: relative; padding-top: 31.5299%; }
.svis .img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; }
.snav { background: var(--color-white); border-bottom: 1px solid var(--color-border); z-index: 9; position: relative; }
.snav .inner { display: flex; }
.snav-list { display: flex; color: var(--color-dark-gray); align-items: center; }
.snav-list > li > a { display: flex; align-items: center; padding: 11px 0; height: 100%; }
.snav-list .home { justify-content: center; width: 62px; border-left: 1px solid var(--color-border); }
.snav-list .home::before { content: ''; display: block; background: url(../../../../resource/cwtour/images/common/layout_sprite.png) -50px -80px; width: 40px; height: 40px; }
.snav-list .tit { border-right: 1px solid var(--color-border); font-weight: 600; padding: 0 20px; position: relative; margin-right: -1px; border-left: 1px solid var(--color-border); }
.snav-list .tit::after { content: ''; display: block; border-radius: 4px; border: 3px solid transparent; border-bottom-color: var(--color-dark-gray); border-right-color: var(--color-dark-gray); transform: rotate(45deg) skew(0deg, 0deg) translateY(-25%); width: 6px; height: 6px; position: absolute; top: 0; bottom: 0; right: 20px; margin: auto; transition: 0.35s; }
.snav-list .tit.is-open::after { transform: rotate(225deg) translateY(-50%); right: 13px; }
.snav-list .tit:hover,
.snav-list .tit:focus {text-decoration: underline;}
.snav-list .snav-select { width: 307px; position: relative; }
.snav-list .snav-select-list {display: none;position: absolute;width: 100.4%;padding: 10px 20px;max-height: 400px;overflow-y: auto;border: 1px solid var(--color-border);border-top: none;box-shadow: 0 3px 10px #f5f5f5;background: #fff;top: 63px;}
.snav-list .snav-select-list.is-open { display: block; }
.snav-list .snav-select-list li a { display: block; padding: 5px 0px; }
.snav-list .snav-select-list li a:hover { text-decoration: underline; }
.share-list-wrap { margin-left: auto; position: relative; }
.sns-open { display: flex; align-items: center; justify-content: center; width: 62px; height: 100%; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); background: none; }
.sns-open::before { content: ''; display: block; width: 40px; height: 40px; background: url(../../../../resource/cwtour/images/common/layout_sprite.png) 0 -80px; }
.share-list { display: none; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; }
.share-list ul { display: flex; align-items: center; height: 100%; padding-right: 61px; }
.share-list li { margin: 0 5px; }
.share-list li > button {display: block;width: 36px;height: 36px;border: none;border-radius: 5px;}
.share-list li .btn-fb {background: #01549d url(../../../../resource/cwtour/images/common/ico_facebook.png) no-repeat center / contain;}
.share-list li .btn-twt {background: #000 url(../../../../resource/cwtour/images/common/ico_x.png) no-repeat center / contain;}
.share-list li .btn-band {background: #41cd8e url(../../../../resource/cwtour/images/common/ico_band.png) no-repeat center / contain;}
.share-list li .btn-blog {background: #21c407 url(../../../../resource/cwtour/images/common/ico_blog.png) no-repeat center / contain;}
.share-list li .btn-print {background: #f5f5f5 url(../../../../resource/cwtour/images/common/ico_print.svg) no-repeat center / 75%;border: 1px solid var(--color-border);}
.share-list .sns-close {position: absolute;top: 0;right: 0px;bottom: 0;margin: auto;width: 62px;height: 62px;background-image: url(../../../../resource/cwtour/images/common/ico_close.svg);background-size: 23px;background-repeat: no-repeat;background-position: center;border: none;border-left: 1px solid var(--color-border);border-right: 1px solid var(--color-border);background-color: var(--color-light-gray);}

/* 코스 상세 */
.sub-vis.course { margin-top: 0; position: fixed; width: 100%; top: 138px; margin-bottom: 0; z-index: 9; }
.sub-vis.course .snav { background: rgba(0,0,0,.4); border-top: 1px solid var(--color-border); }
.sub-vis.course .snav-list .home::before { background-position: -150px -80px; }
.sub-vis.course .snav-list .tit { color: var(--color-white); }
.sub-vis.course .snav-list .tit::after { border-bottom-color: var(--color-white); border-right-color: var(--color-white); }
.sub-vis.course .snav-list .snav-select-list { background: rgba(0,0,0,.4) }
.sub-vis.course .snav-list .snav-select-list li a { color: var(--color-white); }
.sub-vis.course .sns-open::before { background-position: -100px -80px; }
.sub-vis.course .snav-m { background: rgba(0,0,0,.4); }

@media all and (max-width: 1499px) {
 .snav .inner { margin: 0; }
}
@media all and (max-width: 1199px) {
 .container { padding: 0 0 70px; }
 .sub-vis { margin-top: 0px; }
 .sub-vis .img {padding-top: 0;}
 .sub-vis .img img { min-height: 450px; object-position: 70%; object-fit: cover; position: static;}
 .svis {align-items: flex-end;justify-content: flex-start;height: 300px;}
 .svis .tit { margin: 30px; z-index: 1; }
 .sub-contents-wrap { min-height: auto; }
 .sub-contents { width: 100%; margin: 0; }
 .snav-list {width: calc(100% - 62px);}
 .snav-list .snav-select {width:calc(33.33%)}
 .snav-m {display: block;padding: 5px 0;border-bottom: 1px solid var(--color-dark-gray);}
 .snav-m .inner { display: flex; }
 .snav-m .snav-list li:last-child .tit { border-right: 0; }
 .snav-m .snav-list li:last-child .tit::after { display: none; }
 .snav-m .snav-list .home,
 .snav-m .snav-list .tit,
 .snav-m .sns-open { border: none; position: relative; }
 .snav-m .snav-list .home,
 .snav-m .sns-open { width: auto; }
 .snav-m .snav-list .home::before,
 .snav-m .sns-open::before { background-size: 150px; width: 35px; }
 .snav-m .snav-list .home::before { background-position: -35px -60px; }
 .snav-m .sns-open::before { background-position: 0px -60px; }
 .snav-m .snav-list .home,
 .snav-m .snav-list .tit { padding: 0 15px 0 0; margin-right: 8px; }
 .snav-m .snav-list .home::after { content: ''; display: block; border-radius: 2px; border: 2px solid transparent; border-bottom-color: var(--color-dark-gray); border-right-color: var(--color-dark-gray); transform: rotate(-45deg) skew(0deg, 0deg); width: 6px; height: 6px; position: absolute; top: 0; bottom: 0; right: 0px; margin: auto; transition: 0.35s; }
 .snav-m .snav-list .tit::after { border-radius: 2px; border-width: 2px; transform: rotate(-45deg) skew(0deg, 0deg) translateY(0%); right: 0; }
 .snav-m .snav-list .snav-select { width: auto; }
 .snav-m .share-list ul {padding-right: 45px;}
 .snav-m .share-list li {margin: 0 3px;}
 .snav-m .share-list .sns-close {width: 36px;height: 36px;border: none;border-radius: 5px;}
 .sub-vis.course { top: 69px; }
}
@media all and (max-width: 768px) {
 .svis .tit {margin: 25px 20px;}
 .svis .tit h3 { font-size: 2.3rem; }
 .svis .tit img {width: 30px;margin-right: 12px;object-fit: cover;}
 .sub-vis {margin-bottom: 50px;height: fit-content;}
 .sub-vis .img img {min-height: 300px;}
 .snav-list {width: calc(100% - 40px);}
 .snav-list .home {width: 40px;height: 40px}
 .snav-list .home::before {width: 16px;height: 19px;background-size: 144px;background-position: -45px -67px;}
 .snav-list .tit {padding: 0 20px 0 10px;font-weight: 500;}
 .snav-list .tit::after {right: 10px;width: 4px;height: 4px;border-radius: 1px;border-width: 2px;}
 .snav-list .tit.is-open::after {right: 8px}
 .snav-list .snav-select-list {padding: 10px;top: 41px;}
 .sns-open {width: 40px;height: 40px}
 .sns-open::before {width: 17px;height: 20px;background-size: 139px;background-position: -6px -63px;}
 .share-list ul {padding-right: 45px;background: #fff;}
 .share-list li {margin: 0 3px;}
 .share-list .sns-close {width: 40px;height: 40px;}
 .sub-vis.course .snav-list .home::before { background-position: -116px -59px; }
 .sub-vis.course .sns-open::before { background-position: -75px -58px; }
}

/* ******************* *
* 맞춤여행
* ******************* */
.custom-travel-view .sub-vis,
.custom-travel-view .snav,
.custom-travel-view .snav-m {display: none;}
.custom-travel-view header {position: absolute;width: 100%;}

/* ******************* *
* FOOTER
* ******************* */
footer { background-color: #2c3139; }
footer .btn-top {display: flex;align-items: center;justify-content: center;background: #161616;color: #fff;border-radius: 50%;font-weight: 500;letter-spacing: 0;width: 70px;height: 70px;opacity: .7;position: fixed;bottom: -100%;right: 30px;transition: bottom .5s;z-index: 20;text-align: center;}
footer .btn-top.over {bottom: 30px;}
.f-cont { color: #c0c0c0; font-family: 'GmarketSans', sans-serif; font-weight: 200; display: flex; flex-wrap: wrap; align-items: center; padding: 68px 0px 100px; position: relative;}
.f-cont a { color: #c0c0c0; }
.f-cont .top { width: 100%; border-bottom: 1px solid #c0c0c0; padding-bottom: 25px; margin-bottom: 30px; }
.f-cont ul { display: flex; }
.f-cont ul li:not(:last-child) { margin-right: 50px; }
.f-cont .qr {position: absolute;top: 20px;right: 0;width: 80px;height: 80px;}
.f-info { font-size: .778rem; margin: 0 auto 0 83px; }
.f-info ul li a { display: block; font-size: .889rem; background: #262626; border: 1px solid #c0c0c0; padding: 5px 21px; color: #c0c0c0; }
.f-info address { margin-bottom: 4px; }
@media all and (max-width: 1300px) {
 .f-cont { padding: 30px 0; }
 .f-cont ul:not(.top) { margin-top: 30px; }
 .f-cont .qr {top: inherit;bottom: 30px; right: 100px}
}
@media all and (max-width: 1024px) {
 .f-info { order: 3; width: 100%; margin-top: 10px; margin-left: 0; }
 .f-cont ul:not(.top) { margin-top: 0px; margin-left: 35px; }
 footer .btn-top {right: 10px;width: 64px;height: 64px;}
 footer .btn-top.over {bottom: 10px;}
 .f-cont ul li:not(:last-child) {margin-right: 20px}
  .f-cont .qr {right: 0;bottom: inherit;top: 8px;width: 60px;height: 60px}
}
@media all and (max-width: 640px) {
 .f-cont {padding: 20px 0;/* justify-content: center; *//* text-align: center; */}
 .f-logo { width: 30%; }
 .f-cont ul { justify-content: center; }
 .f-cont .top { padding-bottom: 15px; margin-bottom: 15px; flex-wrap: wrap; }
 .f-cont ul:not(.top) { margin-top: 15px; margin-left: 0px; }
 .f-cont ul li:not(:last-child) { margin-right: 25px; }
  .f-cont .qr {top: 57px;}
}
@media all and (max-width: 480px) {
 .f-cont ul:not(.top) {flex-direction: column;width: 100%;font-size: 13px;}
 .f-cont ul li { margin-bottom: 5px; }
 .f-cont .top li { width: calc(45% - 10px); }
 .f-cont .top li:nth-child(2n) { margin-right: 0; }
  .f-cont .qr {top: 140px;}
}