@charset "utf-8";

/* BRAND */
.brand-bg { padding: 60px; background: #f3f7fd; border-radius: 24px; margin-bottom: 100px; overflow: hidden; position: relative; }
.brand-bg img { position: absolute; right: 120px; bottom: -180px; }
.brand-bg h3 { line-height: 1.05em; font-size: 72px; color: #121212; margin-bottom: 30px; font-variation-settings: "wght" 500, "wdth" 60, "slnt" 0; position: relative; z-index: 1; }
.brand-bg h3 span { color: var(--color-primary);}
.brand-bg .txt { position: relative; z-index: 1; }
.brand-bg .txt p { margin-bottom: 12px; font-size: var(--font-size18); line-height: 1.66em; font-weight: 400; }
.brand-bg .txt p:last-child { margin-bottom: 0;}
.brand-bg .txt p strong { font-weight: 600; color: #121212; }
.brand-wrap { display: flex; flex-wrap: wrap; border-top: 2px solid #121212;}
.brand-wrap .col { width: calc(100%/2); border-right: 2px solid #eee; border-bottom: 2px solid #eee; padding: 50px; }
.brand-wrap .col:nth-child(2n) { border-right: none;}
.brand-wrap .col .fx { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 40px; }
.brand-wrap .col .num { font-size: var(--font-size40); line-height: 1em; font-variation-settings: "wght" 400, "wdth" 50, "slnt" 0; }
.brand-wrap .col h4 { margin: 40px 0 35px; font-size: var(--font-size56); color: #121212; font-variation-settings: "wght" 400, "wdth" 60, "slnt" 0; }
.brand-wrap .col h4 span { color: var(--color-primary);}
.brand-wrap .col h5 { font-size: var(--font-size24); font-weight: 500; color: #121212; line-height: 1.2em; }
.brand-wrap .col p { font-size: var(--font-size18); line-height: 1.66em; }

/* PRINCIPLE */
.principle { text-align: center; }
.principle h2 { font-size: 80px; color: #121212; line-height: 1em; padding: 20px 0 10px; font-variation-settings: "wght" 500, "wdth" 40, "slnt" 0; letter-spacing: -.02em;}
.principle h4 { font-size: var(--font-size24); color: #121212; line-height: 1.66em; font-weight: 300; }
.principle .tri { text-align: center; margin: 30px 0;}
.principle .btm { display: flex; flex-wrap: wrap; gap: 60px; }
.principle .btm .col { width: calc(100%/4 - 45px); }
.principle .btm .col img { border-radius: 110px; }
.principle .btm .col .tit { margin: 28px 0 15px; color: #121212; font-size: var(--font-size24); font-variation-settings: "wght" 700, "wdth" 30, "slnt" 0; }

/* ci 공통 */
.ci-fx { display: flex; margin-bottom: 150px; }
.ci-fx.mg { margin-bottom: 0; }
.ci-tit { width: 28.5%; font-size: var(--font-size56); color: #121212; font-variation-settings: "wght" 600, "wdth" 40, "slnt" 0; }
.ci-info { width: 71.5%; }
.ci-bg { border: 1px solid #ddd; background: url(../images/sub/ci-bg.jpg) center no-repeat; background-size: cover; padding: 109px 10px; text-align: center; }
.ci-txt { margin: 20px 0 55px; font-size: var(--font-size18); line-height: 1.66em; font-weight: 300; }
.ci-txt.mg { margin-bottom: 0; }
.ci-info .ci-group { margin-bottom: 100px; }
.ci-info .ci-group:last-child { margin-bottom: 0; }
.ci-info .ci-group h3 { font-size: var(--font-size32); color: #121212; font-variation-settings: "wght" 400, "wdth" 60, "slnt" 0; margin-bottom: 23px; }
.ci-color { display: flex; flex-wrap: wrap; border-radius: 16px; overflow: hidden;}
.ci-color>div { width: calc(100%/2); padding: 30px; color: #fff; background: var(--color-primary);}
.ci-color>div .tt { font-size: var(--font-size24); font-variation-settings: "wght" 500, "wdth" 40, "slnt" 0; margin-bottom: 40px; }
.ci-color>div .fx { display: flex; justify-content: space-between; align-items: flex-start;}
.ci-color>div .left { font-size: var(--font-size18); font-variation-settings: "wght" 500, "wdth" 50, "slnt" 0; }
.ci-color>div .right span { display: block; font-variation-settings: "wght" 300, "wdth" 50, "slnt" 0; margin-bottom: 2px; }
.ci-color>div .right span:last-child { margin-bottom: 0; }
.ci-color>div.bg2 { background: #253746;}
.ci-color>div.bg3 { background: #F1E6B2; color: #121212;}
.ci-color>div.bg3 .right span { font-variation-settings: "wght" 500, "wdth" 50, "slnt" 0; }
.ci-color>div.bg4 { background: #EED484; color: #121212;}
.ci-color>div.bg4 .right span { font-variation-settings: "wght" 500, "wdth" 50, "slnt" 0; }
.ci-color>div.bg5 { background: #A21E35;}
.ci-color>div.bg6 { background: #3C0405;}
.ch-img { display: flex; flex-wrap: wrap; gap: 10px; }
.ch-img .img { width: calc(100%/2 - 5px); }
.ch-img img { width: 100%; border-radius: 16px; }
.ch-tit { font-size: var(--font-size24); font-weight: 700; color: #121212; line-height: 1.2em; margin-top: 20px; }
.ch-dia { text-align: center; }

/* BENSON TALK */
.talk-list { padding-bottom: 40px; }
.talk-list ul {display:flex; flex-wrap:wrap; gap: 60px 39px; }
.talk-list ul li { width: calc(100%/3 - 26px);}
.talk-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.talk-list ul li a { position: relative; display: block; overflow: hidden; }
.talk-list ul li .thumb { padding-bottom: 75%; display: block; position: relative; overflow: hidden; border-radius: 24px; }
.talk-list ul li .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.talk-list ul li .tit { margin: 28px 0 22px; font-size: var(--font-size20); font-weight: 600; line-height: 1.2em; color: #121212; }
.talk-list ul li .tit span { display: inline-block; position: relative; }
.talk-list ul li .tit span::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: #121212; transition: .3s;}
.talk-list ul li a:hover .tit span::after { width: 100%; }
.talk-date { position: relative; font-size: 14px; padding-left: 22px; }
.talk-date::before { content: ""; position: absolute; left: 0; width: 14px; height: 14px; background: url(../images/sub/write.png) center no-repeat; background-size: contain; top: 4px; }

/* 게시판 공통 */
.noti-list { border-top: 2px solid #121212 ;}
.noti-list li { border-bottom: 1px solid #ddd;}
.noti-list li a { display: flex; padding: 40px; position: relative; align-items: center; }
.noti-list li .num { width: 56px; height: 56px; border-radius: 56px; display: flex; align-items: center; justify-content: center; margin-right: 40px; font-weight: 700; line-height: 1em; font-size: 18px; color: #878787; }
.noti-list li .num.label { background: #253746; color: #fff; font-variation-settings: "wght" 400, "wdth" 120, "slnt" 0; font-size: 12px; }
.noti-list li .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 40px; }
.noti-list li .info .tit { line-height: 1.2em; font-size: var(--font-size20); font-weight: 600; color: #121212; margin-bottom: 7px; line-height:1.2em; max-height:1.4em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; padding-bottom: 4px;}
.noti-list li .info .tit span { display: inline-block; }
.noti-list li .info .tit img {vertical-align:middle; margin:-.2em 4px 0;}
.noti-list li .info .etc { display: flex; flex-wrap: wrap; gap: 7px 30px;}
.noti-list li .info .etc span { font-size: 14px; font-weight: 400; color: #777; line-height: 1.3em; }
.noti-list li a::after { content: "→"; position: absolute; right: 38px; top: 50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); font-size: 30px; font-weight: 700; color: #ccc; line-height: 1em; transition: .2s;}
.noti-list li a:hover { background: #f9f9f9;}
.noti-list li a:hover .info .tit span { text-decoration: underline; text-underline-position: under;}
.noti-list li a:hover::after { color: var(--color-primary);}

/* product - new */
.new-top { padding: 40px 0; border-top: 2px solid #121212; border-bottom: 1px solid #ddd; display: flex; text-align: center; align-items: center;}
.new-top .info { flex: 1 1 auto; padding: 0 15px;}
.new-top .info h3 { font-size: var(--font-size48); color: #121212; font-weight: 700; line-height: 1em; margin-bottom: 15px; }
.new-top .info h4 { color: #878787; font-variation-settings: "wght" 100, "wdth" 70, "slnt" 0; line-height: 1.2em; font-size: var(--font-size32); }
.new-pagination { width: 72px; height: 72px; border-radius: 72px; border: 1px solid #121212; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 11px; }
.new-pagination.prev { background-image: url(../images/sub/sub-prev.png);}
.new-pagination.next { background-image: url(../images/sub/sub-next.png);}
.new-pagination.none { opacity: 0.2; }
.new-detail { text-align: center; padding-top: 60px; }
.new-detail .txt { padding-top: 40px; font-size: var(--font-size20); line-height: 1.6em; }

/* PROMOTION */
.promotion-list { padding-bottom: 40px; }
.promotion-list ul {display:flex; flex-wrap:wrap; gap: 60px 39px; }
.promotion-list ul li { width: calc(100%/3 - 26px);}
.promotion-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.promotion-list ul li a { position: relative; display: block; overflow: hidden; }
.promotion-list ul li .thumb { padding-bottom: 86%; display: block; position: relative; overflow: hidden; border-radius: 24px; }
.promotion-list ul li .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.promotion-list ul li .status { display: inline-block; margin-top: 30px; line-height: 1em; font-size: 14px; font-weight: 600; color: #fff; background: var(--color-primary); border-radius: 8px; padding: 6px 10px;}
.promotion-list ul li .tit { margin: 10px 0 22px; font-size: var(--font-size20); font-weight: 600; line-height: 1.2em; color: #121212; }
.promotion-list ul li .tit span { display: inline-block; position: relative; }
.promotion-list ul li .tit span::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: #121212; transition: .3s;}
.promotion-list ul li a:hover .tit span::after { width: 100%; }
.pro-time { position: relative; font-size: 14px; padding-left: 22px; }
.pro-time::before { content: ""; position: absolute; left: 0; width: 14px; height: 14px; background: url(../images/main/time.png) center no-repeat; background-size: contain; top: 5px; }
.promotion-list ul li.ended .status { background: #878787; }
.promotion-list ul li.ended .tit { color: #878787; }
.promotion-list ul li.ended a:hover .tit span::after  { display: none; }

/* 벤슨 크리머리 서울 */
.seoul-bg { color: #fff; text-align: center; background: url(../images/sub/sub4-1-bg.jpg) center no-repeat; background-size: cover; padding: 210px 0; margin-bottom: 80px; }
.seoul-bg h2 { font-family: "filmotype-lucky", sans-serif; font-weight: 400; font-style: normal; font-size: 100px; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); line-height: 1.1em; margin-bottom: 18px;}
.seoul-bg p { text-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); font-size: var(--font-size20); font-weight: 300; line-height: 1.6em; }
.seoul-wrap { display: flex; gap: 39px; flex-wrap: wrap;}
.seoul-wrap .col { width: calc(100%/3 - 26px); text-align: center; }
.seoul-wrap .col a { display: block; }
.seoul-wrap .col img { border-radius: 300px; }
.seoul-wrap .col .tt { font-size: var(--font-size48); color: #121212; font-weight: 700; margin: 35px 0 15px; line-height: 1.2em; }
.seoul-wrap .col .txt { line-height: 1.62em; margin-bottom: 35px; }
.seoul-wrap .main-view { transition: .3s; }
.seoul-wrap .main-view::after { transition: .3s;}
.seoul-wrap .main-view:hover { background: #fff; color: #121212; border-color: #121212; }
.seoul-wrap .main-view:hover::after { background-image: url(../images/main/main-view.png);}
.seoul-wrap .col a:hover .main-view { background: #121212; color: #fff; }
.seoul-wrap .col a:hover .main-view::after { background-image: url(../images/main/main-view-w.png);}
.seoul-wrap .col:nth-child(2) { margin-top: 100px; }

/* 매장찾기 */
.find-store-wrap {position:relative; display:flex; height:700px; border:1px solid #121212; border-radius: 24px; overflow: hidden;}

.find-store-list {display:flex; flex-direction:column; position:relative; z-index:10; width:21%; min-width:300px; background:#fff; overflow:hidden; box-shadow: 3px 0 10px 0 rgba(0, 0, 0, 0.15);}
.find-store-list .search-wrap {border-bottom:1px solid #ddd; padding: 30px; }
.find-store-list .search-wrap h3 { font-size: var(--font-size18); color: #121212; font-weight: 700; line-height: 1.1em; margin-bottom: 16px; }
.find-store-list .search-mg { margin-bottom: 20px; }
.find-store-list .search-area {position:relative; display:flex; gap:10px; }
.find-store-list .search-area .input {display:block; width:100%; height:40px; color:#505050; font-size:14px; letter-spacing:-.04em; border:1px solid #ddd; border-radius:4px;}
.find-store-list .search-area select { color: #878787; padding: 6px 10px; background:#fff url('/images/sub/select.png') right 10px center no-repeat; }
.find-store-list .search-input { position: relative; border-radius: 4px; border: 1px solid #ddd; overflow: hidden; height: 40px; }
.find-store-list .search-input .input[type=search] {padding: 6px 10px; border: none; font-size: 14px; height: 40px; width: 100%; padding-right: 40px; }
.find-store-list .search-input .input:focus {outline: none; }
.find-store-list .search-input .submit {position:absolute; right: 0; top: 0; width: 40px; height: 40px; border: none; background: var(--color-primary) url(../images/sub/sch-w.png) center no-repeat; background-size: 16px; }

.find-store-list .list-area {position:relative; overflow:auto; flex:1 1 auto; min-height:0; height:1%;}
.find-store-list .list-area::-webkit-scrollbar {width:4px; height:4px; border-radius:4px; background-color:#eee;}
.find-store-list .list-area::-webkit-scrollbar-thumb {background:#878787; border-radius:5px;}
.find-store-list .list-area ul li {display:grid; gap:8px 0; padding:30px; border-bottom:1px solid #eee; font-size:15px; line-height:1.33em; letter-spacing:-.04em; color:#505050; padding-right: 10px; }
.find-store-list .list-area ul li:last-child {border-bottom:0;}
.find-store-list .list-area ul li.active {background:#f9f9f9;}
.find-store-list .list-area .name {margin-bottom:4px; line-height:1.33em; color:#121212; font-weight: 700; }
.find-store-list .list-area .name strong {font-weight:600;}
.find-store-list .list-area .tel {font-weight:700; color:#121212; position: relative; font-size: 12px; padding-left: 15px; }
.find-store-list .list-area .tel::before {content: ""; position: absolute; left: 0; width: 10px; height: 10px; background: url(../images/sub/call.png) center no-repeat; background-size: contain; top: 4px; }

.find-store-map {position:relative; overflow:hidden; flex:1;}
.find-store-map #map {position:relative; width:100%; height:100%;}

.customoverlay {position:absolute; bottom:100px; left:0; z-index:20; width:300px; margin-left:-150px; padding:20px; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:3px 5px 10px rgba(0, 0, 0, 0.15); font-size:15px; line-height:1.33em; letter-spacing:-.04em; color:#505050; white-space:normal;}
.customoverlay:after {content:''; position:absolute; top:100%; left:50%; margin-left:-10px; width:19px; height:14px; background:url('/images/sub/vertex_white.png') 50% 0/contain no-repeat;}
.customoverlay .inner {position:relative; display:grid; gap:8px;}
.customoverlay .name {margin-bottom:2px; font-size:18px; font-weight:700; line-height:1.33em; color:#121212;}
.customoverlay .addr {font-weight:400; color:#121212; font-size: 14px; line-height:1.33em; }
.customoverlay .tel {font-weight:700; color:#121212; position: relative; font-size: 12px; padding-left: 15px; margin-top: 5px; }
.customoverlay .tel::before {content: ""; position: absolute; left: 0; width: 10px; height: 10px; background: url(../images/sub/call.png) center no-repeat; background-size: contain; top: 4px; }
.customoverlay .view { font-family: "config-variable", sans-serif; font-variation-settings: "wght" 700, "wdth" 50, "slnt" 0; text-align: right; font-size: 14px; color: #121212; line-height: 1.2em; margin-top: 10px; cursor: pointer; }
.customoverlay .view:hover { text-decoration: underline; text-underline-position: under;}
.customoverlay .close {position:absolute; right:0; top:6px; cursor: pointer; display: inline-block; width: 10px; height: 10px; background: url(../images/sub/store-close.png) center no-repeat; background-size: contain; text-indent: -9999em; overflow: hidden; }

.btn-get-position {position:absolute; bottom:20px; right:20px; z-index:10; width:48px; height:48px; background:#fff; border:1px solid #2c2c2c; border-radius:12px;}
.btn-get-position svg {display:block; margin:0 auto; width:20px;}

.btn-view-map {display:none;}
.btn-view-list {display:none; }