@charset "utf-8";

/* **************************************************************************************
* 반응형 스킨 사용자/제작자 CSS
************************************************************************************** */

/* -----------------------------------------------
   기본 폰트 — Pretendard로 통일
   common.css의 기본 body 폰트(Roboto/Noto Sans KR)를 오버라이드
----------------------------------------------- */
@font-face { font-family: 'Pretendard'; font-weight: 400; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); }
body,th,td,input,select,textarea,button,pre {
    font-family: 'Pretendard', 'Notokr Local', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.screen-out {
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 0;
    height: 1px;
    text-indent: -9999px;
    font-size: 0;
    position: absolute;
}


/* 쇼핑몰 통합회원 */
/*.sub_txt {font-size:15px;}
.layout_header .nav_wrap .respCategoryList {table-layout:auto;}*/
.resp_member_join_wrap { max-width:800px; }
.resp_member_join_wrap .gong_box {margin-bottom:20px;}
.resp_member_join_wrap .gong_box .text_wrap {border-radius:10px; border:1px solid #e0e0e0; padding:20px; line-height:1.8;}
.resp_member_join_wrap .gong_box h3 {margin:0 0 5px; font-size:18px; font-weight:500; color:#333;}
.resp_member_join_wrap .gong_box li {padding-left:10px; text-indent:-7px; font-size:14px;}
.resp_member_join h3 {margin:30px 0 10px; font-size:20px; font-weight:400; color:#333;}
.resp_member_join .auth_type_all .desc li {padding-left:10px; text-indent:-7px; font-size:13px; color:#777;}
.resp_login_wrap {border:1px solid #d0d0d0; padding:60px 70px;}
.resp_login_wrap h2 {padding-bottom:10px; text-align:center; font-size:22px; color:#333;}
.resp_login_wrap h2.line {margin-top:60px; border-top:1px solid #d0d0d0; padding:60px 0 20px;}
.resp_login_wrap .btn_resp.size_login1,
.resp_login_wrap .btn_resp.color2,
.resp_member_join_wrap .btn_resp.color2,
.login_ok_menu .btn_resp.color2 {height:53px; line-height:53px; border-radius:5px; border-color:#56a717; background:#56a717; font-size:20px; font-weight:400; color:#fff;}
.resp_login_wrap .btn_resp.color2.gong {border-color:#1d6cbc; background:#1d6cbc;}
.resp_login_wrap .btn_resp.btn_onepass {display:block; height:53px; line-height:53px; border-radius:5px; border-color:#221d74; background:#221d74; font-size:20px; color:#fff;}
.resp_login_wrap .btn_resp.btn_onepass .icon {width:30px; margin:0 5px 4px 0;}
.resp_login_wrap .sub_tit {padding:20px 0 10px; text-align:center; font-size:20px; color:#333;}
.resp_login_wrap .real_domain {border:1px solid #e0e0e0; background:#f9f9f9; padding:10px 20px; box-sizing:border-box; overflow-y:auto;}
.resp_login_wrap .real_domain li {display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; text-align:left; font-size:16px; color:#666; line-height:1.8;}
.payment_method_select > li > div.zeropay > label {background:url('../images/common/icon_zeropay.jpg') no-repeat; background-size:cover; opacity:0.7;}
.payment_method_select > li > div.zeropay.active > label {opacity:1;}
.payment_method_select > li > div.zeropay.active {outline:2px solid #ea222a;}
@media only screen and (max-width:479px) {
    .resp_login_wrap {padding:30px;}
    .resp_login_wrap br {display:none;}
    .resp_login_wrap h2.line {margin-top:30px; padding:30px;}
}

.login_ok_menu .btn_resp.size_c {height:53px; line-height:53px;}

/* =============================================
   header (Figma node 446:2604 PC / 510:6338 모바일 / 351:6897 GNB 드롭다운)
   ============================================= */
.layout_header { padding:30px 0 0; transition:padding 0.2s ease; z-index:100;}
.layout_header .resp_wrap { max-width:1560px; }

/* row1 — 상단 유틸바 + 중앙 로고 + 로그인/장바구니 */
.layout_header .logo_wrap { position:relative; display:flex; align-items:center; justify-content:space-between; height:60px; margin-bottom:0; }
.layout_header .logo_wrap .resp_top_hamburger { display:none; }
.layout_header .logo_wrap .util_menu_left { display:flex; align-items:center; gap:28px; font-size:0; }
.layout_header .logo_wrap .util_menu_left a { font-size:16px; font-weight:500; color:rgba(0,0,0,0.8); letter-spacing:-0.4px; }
.layout_header .logo_wrap .logo_area { position:absolute; left:50%; top:0; transform:translateX(-50%); margin:0; }
.layout_header .logo_wrap .logo_area>a { display:block; height:auto; }
.layout_header .logo_wrap .logo_area img { width:210px; display:block; }

.layout_header .header_actions { display:flex; align-items:center; gap:24px; }
.layout_header .header_actions .util_menu { display:flex; align-items:center; gap:24px; font-size:0; }
.layout_header .header_actions .util_menu li a { font-size:16px; font-weight:500; color:#000; letter-spacing:-0.16px; }
.layout_header .header_actions_divider { display:block; width:0.5px; height:12px; background:#666; }
.layout_header .header_actions .util_menu_right { display:flex; align-items:center; gap:24px; }
.layout_header .header_actions .util_menu_right a { position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; color:#000; }
.layout_header .header_actions .util_menu_right svg { width:30px; height:30px; }
.layout_header .header_actions .util_cart .cart_cnt1 { position:absolute; top:0; right:-6px; display:flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 3px; border-radius:33554400px; background:#e72e35; font-size:9px; font-weight:700; line-height:1; color:#fff; box-sizing:border-box; }

/* row2 — GNB(실제 상품 카테고리) + 검색 */
.layout_header .nav_wrapper { display:flex; align-items:center; justify-content:space-between; gap:20px; height:100px; }
.layout_header .nav_wrap { flex:1 1 auto; min-width:0; border-top:0; }
.layout_header .nav_wrap .respCategoryList { display:flex; align-items:center; }
.layout_header .nav_wrap .respCategoryList > li { position:relative; margin-right:0 !important; }
.layout_header .nav_wrap .respCategoryList .categoryDepthLink { position:relative; height:auto; padding:9.5px 24px 10.5px; font-size:20px; line-height:27px; font-weight:600; color:rgba(0,0,0,0.8); }
.layout_header .nav_wrap .respCategoryList .categoryDepthLink::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background-color:#FBC400; transform:scaleX(0); transform-origin:center; transition:transform 0.3s ease; }
.layout_header .nav_wrap .respCategoryList .categoryDepthLink>em { height:auto; font-style:normal; }
.layout_header .nav_wrap .respCategoryList .categoryDepthLink>em:after { display:none; }
.layout_header .nav_wrap .respCategoryList .categoryDepth1:hover .categoryDepthLink,
.layout_header .nav_wrap .respCategoryList .categoryDepth1.on .categoryDepthLink { color:#000; }
.layout_header .nav_wrap .respCategoryList .categoryDepth1:hover .categoryDepthLink::after,
.layout_header .nav_wrap .respCategoryList .categoryDepth1.on .categoryDepthLink::after { transform:scaleX(1); }
.layout_header .nav_wrap .respCategoryList .categoryDepth1.on .categoryDepthLink>em { border-bottom:0; }

.layout_header .nav_wrap .categorySub { display:none; position:absolute; z-index:60; left:50%; top:100%; padding-top:20px; border:0; background:none; transform:translateX(-50%); }
.layout_header .nav_wrap .categoryDepth1:hover .categorySub { display:block; }
.layout_header .nav_wrap .categorySubWrap { display:block; min-width:190px; padding:16px; border:1px solid #e9e9e9; border-radius:16px; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.06); box-sizing:border-box; }
.layout_header .nav_wrap .categorySubWrap .categoryDepth2 { display:flex; flex-direction:column; gap:14px; min-width:0; }
.layout_header .nav_wrap .categorySubWrap .categoryDepth2>li { border-bottom:0; }
.layout_header .nav_wrap .categorySubWrap .categoryDepth2>li>a { padding:7px 14px; font-size:16px; line-height:24px; color:#000; letter-spacing:-0.4px; transition:color 0.2s, transform 0.2s; white-space:nowrap; }
.layout_header .nav_wrap .categorySubWrap .categoryDepth2>li:hover>a { color:#FBC400; background:transparent; transform:none; }
.layout_header .nav_wrap .categorySubWrap .categoryDepth2>li.all { display:none !important; }

/* 검색 — 기본(1520px 이하)은 아이콘만 노출, 클릭하면 패널이 뜨는 기존 방식.
   1521px 이상(Figma 1520 컨테이너 기준)에서만 상시노출 필로 확장한다. */
.layout_header .nav_wrapper .util_menu2 { display:block; flex:0 0 auto; width:auto; max-width:none; }
.layout_header .nav_wrapper .util_menu2 .search_wrapper { position:static; height:auto; }
.resp_top_search { position:relative; }
.resp_top_search a.btn_search_open { display:flex; align-items:center; justify-content:flex-end; margin:0; overflow:visible; text-indent:0; background:none; border-radius:50%; color:rgba(0,0,0,0.7); transition:background-color 0.2s; }
.resp_top_search a.btn_search_open svg { width:50px; height:50px; border: 1px solid #f1f1f1; border-radius: 100%; box-sizing: border-box; }
.resp_top_search a.btn_search_open:hover { background:#f5f5f5; }
.resp_top_search .search_ver2 { position:absolute; right:0; top: -3px; width:320px; opacity:0; visibility:hidden; height:1px; overflow:hidden; transform:translateY(-8px); transition:opacity .25s, visibility .25s, transform .25s; z-index:60; }
.resp_top_search .search_ver2.animating,
.resp_top_search .search_ver2.on { opacity:1; visibility:visible; height:auto; overflow:visible; transform:translateY(0); }
.resp_top_search .search_ver2 .search_new { position:relative; }
.resp_top_search .search_ver2 .search_new .input_area { text-align:left; position:relative; }
.resp_top_search .search_ver2 .search_new .input_area .cont { width:calc(100% - 60px); height:56px; padding:0 5px 0 24px; border:0; border-radius:50px; background:#f5f5f5; box-shadow:0 4px 20px rgba(0,0,0,0.1); display:flex; align-items:center; box-sizing:border-box; }
.resp_top_search .search_ver2 .search_new .input_area button.close { display:block; visibility:visible !important; position:absolute; right:0; top:50%; transform:translateY(-50%); width:50px; height:50px; margin:0; border-radius:50%; border:1px solid #f1f1f1; background:#fff url('../images/common/icon_close_gray2.png') center / 16px no-repeat; cursor:pointer; }
.resp_top_search .search_ver2 .search_new .input_area label.search_box { flex:1 1 auto; width:auto; margin-right:10px; }
.resp_top_search .search_ver2 .search_new .input_area label.search_box>input[type='text'] { font-size:15px; font-weight:500; color:#000; }
.resp_top_search .search_ver2 .search_new .input_area label.search_box>input[type='text']::placeholder { font-size:15px; font-weight:500; color:rgba(0,0,0,0.5); }
.resp_top_search .search_ver2 .search_new .input_area button.search { flex:0 0 auto;  background:none; color:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; }
.resp_top_search .search_ver2 .search_new .input_area button.search svg { width:50px; height:50px; }
.resp_top_search .search_ver2 .search_new .contetns_area {width: 100%; position: absolute; }

/* 1521px 이상 — Figma 그대로 상시노출 필 */
@media (min-width:1521px) {
    .layout_header .nav_wrapper .util_menu2 { flex:0 0 320px; width:320px; max-width:320px; }
    .resp_top_search { position:static; }
    .resp_top_search a.btn_search_open { display:none; }
    .resp_top_search .search_ver2 { position:static; width:100%; opacity:1; visibility:visible; height:auto; overflow:visible; transform:none; }
    .resp_top_search .search_ver2 .search_new .input_area button.close { display:none; }
    .resp_top_search .search_ver2 .search_new .input_area .cont { width:100%; height:60px; padding: 0 5px 0 30px; box-shadow:none; }
    .resp_top_search .search_ver2 .search_new .input_area label.search_box>input[type='text'],
    .resp_top_search .search_ver2 .search_new .input_area label.search_box>input[type='text']::placeholder { font-size:16px; }
    .resp_top_search .search_ver2 .search_new .input_area button.search svg { width: 50px; height: 50px; }
}

.layout_header.flyingMode { position:fixed; width:100%; left:0; top:0; background:#fff; padding:10px 0; z-index:150; box-shadow:0 1px 5px rgba(0,0,0,0.06); }
.layout_header.flyingMode .logo_wrap { display:none; }
.layout_header.flyingMode .nav_wrapper { height:auto; }

@media (max-width:1520px) {
    .layout_header .nav_wrap .categorySub { left:0; transform:none; }
}

@media (max-width:1280px) {
    .layout_header .logo_wrap .logo_area img { width:170px; }
    .layout_header .nav_wrap .respCategoryList .categoryDepthLink { padding:9.5px 16px 10.5px; font-size:17px; }
    .layout_header .nav_wrapper{ height: 70px; }
    .layout_header .nav_wrapper .util_menu2 { flex-basis:50px; width:50px; max-width:50px; }
    .layout_header .nav_wrap .categorySub{top: 32px;}
    .layout_header #cateSwiper .designCategoryNavigation { overflow:visible !important; }
}
@media (max-width:1024px) {
    .layout_header { padding:16px 0; }
    .layout_header.flyingMode { padding:10px 0; }
    .layout_header.flyingMode .logo_wrap { display:flex; }
    .layout_header .resp_wrap { max-width:none; }
    .layout_header .logo_wrap { height:60px; justify-content:space-between; }
    .layout_header .logo_wrap .logo_area { position:static; transform:none; }
    .layout_header .logo_wrap .logo_area img { width:120px; }
    .layout_header .logo_wrap .resp_top_hamburger { display:flex; align-items:center; justify-content:center; position:static; left:auto; top:auto; margin-top:24px; width:24px; height:24px; }
    .layout_header .logo_wrap .resp_top_hamburger>a { width:24px; height:24px; }
    .layout_header .logo_wrap .util_menu_left { display:none; }
    .layout_header .header_actions .util_menu { display:none; }
    .layout_header .header_actions_divider { display:none; }
    .layout_header .header_actions .util_menu_right .util_mypage { display:none; }
    .layout_header .nav_wrapper { display:block; height:auto; margin-top:15px; }
    .layout_header .nav_wrap { display:none; }
    .layout_header .nav_wrapper .util_menu2 { width:100%; max-width:none; flex-basis:auto; }
    .resp_top_search { position:static; }
    .resp_top_search a.btn_search_open { display:none; }
    .resp_top_search .search_ver2 { position:static; width:100%; opacity:1; visibility:visible; height:auto; overflow:visible; transform:none; }
    .resp_top_search .search_ver2 .search_new .input_area button.close { display:none; }
    .resp_top_search .search_ver2 .search_new .input_area .cont { width:100%; height:40px; padding:0 4px 0 16px; box-shadow:none; }
    .resp_top_search .search_ver2 .search_new .input_area label.search_box>input[type='text'],
    .resp_top_search .search_ver2 .search_new .input_area label.search_box>input[type='text']::placeholder { font-size:14px; font-weight:400; }
    .resp_top_search .search_ver2 .search_new .input_area button.search svg { width:35px; height:35px; }
}

#layout_body { position:relative !important; background:transparent !important; /*z-index:10 !important;*/}

/* footer (Figma node 446:2552 데스크톱 / 510:7646 모바일) */
.layout_footer { position:relative; font-size:1em; background:#fff; z-index:1; margin-top: 50px;}
.layout_footer .footer_inner { max-width:1460px; margin:0 auto; padding-left:20px; padding-right:20px; box-sizing:border-box;}

@media only screen and (max-width: 767px){
    margin-top: 30px;
}
/* 상단 보더박스 내비 */
.footer_b { border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0;}
.footer_b .footer_inner { height:50px; display:flex; align-items:center;}
.footer_nav_list { display:flex; gap:20px; list-style:none; margin:0; padding:0;}
.footer_nav_list li a { font-size:15px; color:#212121; text-decoration:none;}
.footer_nav_point > a { font-weight:700;}
.footer_nav_point.green > a { color:#1ba035;}

/* 본문 2컬럼 */
.footer_a_inner { display:flex; gap:100px; align-items:flex-start; padding:40px 0 80px;}

/* 좌측: 로고 + 주소 + SNS + 저작권 */
.footer_info { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start;}
.footer_logo { display:inline-block; width:180px;}
.footer_logo img { width:100%; display:block;}
.footer_addr { font-style:normal; color:#666; font-size:14px; line-height:22px; padding-top:15px; width:100%; word-break:break-word;}
.footer_addr p { margin:0 0 2px;}
.footer_addr a { color:#666; text-decoration:none;}
.footer_sns_list { display:flex; gap:7px; align-items:center; padding-top:20px;}
.footer_sns_item { display:block;}
.footer_sns_item img { width:32px; height:32px; display:block;}
.footer_copy { color:#666; font-size:14px; line-height:22px; padding-top:19px; width:100%; word-break:break-word;}
.footer_copy p { margin:0;}

/* 우측: 고객센터 + 결제 배지 */
.footer_cs { display:flex; flex-direction:column; justify-content:space-between; align-self:stretch; flex-shrink:0;}
.footer_cs_info { display:flex; flex-direction:column;}
.footer_col_tit { font-size:24px; font-weight:700; color:#222; margin:0;}
.footer_cs_tel { margin:0;}
.footer_cs_tel a { display:inline-block; font-size:33px; font-weight:800; color:#1ba035; letter-spacing:-0.02em; text-decoration:none;}
.footer_cs_hours { font-size:14px; color:#666; line-height:1.6; margin:9px 0 0;}
.footer_cs_badge { display:flex; align-items:flex-end;}
.footer_cs_badge img { display:block;}

@media (max-width:1280px){
    .footer_a_inner { gap:60px;}
}
@media (max-width:1024px) {
    .footer_a_inner { flex-direction:column; gap:30px; padding:30px 0 40px;}
    .footer_info { width:100%;}
    .footer_cs { flex-direction:row; flex-wrap:wrap; gap:20px; align-self:auto; width:100%; justify-content:space-between;}
}
@media (max-width:768px) {
    .footer_b .footer_inner { height:auto; padding-top:12px; padding-bottom:12px; overflow-x:auto;}
    .footer_nav_list { flex-wrap:nowrap; gap:12px; white-space:nowrap;}
    .footer_nav_list li:not(:last-child) { position:relative; padding-right:12px;}
    .footer_nav_list li:not(:last-child)::after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:0.5px; height:8px; background:#666;}
    .footer_nav_list li a { font-size:13px;}
    .footer_logo { width:120px;}
    .footer_addr { font-size:12px; line-height:1.5;}
    .footer_col_tit { font-size:16px;}
    .footer_cs_tel a { font-size:28px;}
    .footer_cs { border-top:1px solid #e0e0e0; padding-top:20px;}
    .footer_a_inner { padding:24px 0 30px;}
}
@media (max-width:440px){
    .footer_nav_list { gap:8px;}
    .footer_nav_list li:not(:last-child) { padding-right:8px;}
    .footer_a_inner { padding:20px 0 24px;}
    .footer_cs_tel a { font-size:22px;}
}

/* main_slider */
.main_slider {position:relative; max-width:1920px;width:100%; margin:0 auto;}
.main_slider .sslide { position:relative;}
.main_slider .sslide .simg { position:relative; transition:width 0.2s ease, margin 0.2s ease; z-index:1;}
.main_slider .sslide .text_wrap .text_inner { position:absolute; max-width:1420px; width:80%; left:50%; top:40%; transform:translate(-60%,-50%); opacity:0; transition:transform 0.6s ease 0.8s, opacity 0.6s ease 0.8s; text-align:left; font-size:1.2857142857em;line-height:1.5; z-index:2;}
.main_slider .sslide .text_wrap .text_inner .text_01 { display:block; font-size:1.333333em;}
.main_slider .sslide .text_wrap .text_inner .text_02 { display:block; font-size:2.555555em; color:#fff; font-weight:700; line-height:1.2; margin:0.2em 0 0.4em;}
.main_slider .sslide .text_wrap .text_inner .text_03 { display:block; }

.main_slider .sslide .text_wrap .text_inner.text_inner01 .text_01 { color:#fbc400;}
.main_slider .sslide .text_wrap .text_inner.text_inner01 .text_03 {color:#ffcccc;}
.main_slider .sslide .text_wrap .text_inner.text_inner02 .text_01 { color:#ffdab6;}
.main_slider .sslide .text_wrap .text_inner.text_inner02 .text_03 {color:#e1d2c5;}
.main_slider .sslide .text_wrap .text_inner.text_inner03 .text_01 { color:#efebdf;}
.main_slider .sslide .text_wrap .text_inner.text_inner03 .text_03 {color:#fff; opacity:0.8;}
.main_slider .sslide .text_wrap .text_inner.text_inner04 .text_01 { color:#fff;}
.main_slider .sslide .text_wrap .text_inner.text_inner04 .text_03 {color:#fff; opacity:0.8;}
.main_slider .sslide .text_wrap .text_inner.text_inner05 .text_01 { color:#fff;}
.main_slider .sslide .text_wrap .text_inner.text_inner05 .text_03 {color:#fff; opacity:0.8;}

.main_slider .sslide.slick-slide.slick-current.slick-active .text_wrap .text_inner { transform:translate(-50%,-50%); opacity:1;}

.main_slider .page_wrapper {position:absolute; max-width:1420px; width:80%; left:50%; bottom:36%; transform:translate(-50%,50%);  z-index:3; }
.main_slider .page_wrapper .page_wrap { display:inline-block; padding:0.5em 36px; background:rgba(0,0,0,0.5); border-radius:1.3em;}
.main_slider .slick-dots {position:relative; display:inline-block; width:auto; font-family: 'Rubik', sans-serif; font-size:1.142857142857em; color:#fff; text-align:left; bottom:auto; line-height: normal; }
.main_slider .slick-dots li { display:none;}
.main_slider .slick-dots li.slick-active { display:block;}
.main_slider .slick-dots li strong, .main_slider .slick-dots li .slideCount {display:width:1em;}
.main_slider .slick-dots li .slideBorder, .main_slider .slick-dots li .slideCount { opacity:0.5; font-weight:400;}
.main_slider .slick-dots li .slideBorder {font-size:0.8em; margin:0 0.5em; }
.main_slider .custom-arrows { position:absolute; max-width:1420px; width:80%; left:50%; bottom:36%; transform:translate(-50%,50%);  z-index:4; }
.main_slider .custom-arrows .slick-arrow { transition:none; opacity:1;}
.main_slider .custom-arrows .slick-arrow {width:30px; height:30px; background-image:none; background-color:transparent; text-indent:0; border-radius:0; top:auto; bottom:36%; transform:translateY(50%);}
.main_slider .custom-arrows  .slick-arrow.prev {margin-left:6px;}
.main_slider .custom-arrows  .slick-arrow.next {margin-left:80px;}
.main_slider .slick-arrow svg { color:#fff;}
.slick-slider:hover .slick-prev, .slick-slider:hover .slick-next { transform:translateY(50%); }
.main_control { position:absolute; left:130px; top:0; transition:opacity 0.2s ease; background:rgba(0,0,0,0.5); width:33.6px; height:33.6px; border-radius:50%; box-sizing:border-box; padding-top:2px; transform:translate(0,-50%);}
.main_control svg { color:#fff; width:14px; height:14px;}



@media (max-width:1520px) {
    .main_slider .page_wrapper, .main_slider .slick-arrow, .main_slider .custom-arrows { bottom:30%;}
}

@media (max-width:1280px) {
    .main_slider .sslide .simg { max-width:inherit !important; width:110%; margin-left:0%;}
    .main_slider .sslide .text_wrap .text_inner {font-size:1.28em}
    .main_slider .sslide .text_wrap .text_inner .text_01 {font-size:1.25em;}
    .main_slider .sslide .text_wrap .text_inner .text_02 { font-size:2.3em; }
}

@media (max-width:1024px) {
    .main_slider .sslide .simg {width:120%; margin-left:-5%;}
    .main_slider .sslide .text_wrap .text_inner {font-size:1.22em}
    .main_slider .sslide .text_wrap .text_inner .text_01 {font-size:1.2em;}
    .main_slider .sslide .text_wrap .text_inner .text_02 { font-size:2.0em; }
}

@media (max-width:768px) {
    .main_slider .sslide .simg {width:130%; margin-left:-5%;}
    .main_slider .sslide .text_wrap .text_inner, .main_slider .custom-arrows {width:90%;}
    .main_slider .sslide .text_wrap .text_inner {font-size:1.15em}
    .main_slider .sslide .text_wrap .text_inner .text_01 {font-size:1.15em;}
    .main_slider .sslide .text_wrap .text_inner .text_02 { font-size:1.8em; }
    .main_slider .page_wrapper { width:90%; }
}

@media (max-width:620px) {
    .main_slider .sslide .simg {width:130%; margin-left:-5%;}
    .main_slider .sslide .text_wrap .text_inner {font-size:1.1em}
    .main_slider .sslide .text_wrap .text_inner .text_01 {font-size:1.15em;}
    .main_slider .sslide .text_wrap .text_inner .text_02 { font-size:1.6em; }

    .main_slider .page_wrapper, .main_slider .slick-arrow, .main_slider .custom-arrows { bottom:20%;}
}

@media (max-width:440px) {
    .main_slider .sslide .simg {width:160%; margin-left:-22%;}
    .main_slider .sslide .text_wrap .text_inner {font-size:1.0em}
    .main_slider .sslide .text_wrap .text_inner .text_01 {font-size:1.05em;}
    .main_slider .sslide .text_wrap .text_inner .text_02 { font-size:1.4em; }

    .main_slider .page_wrapper, .main_slider .slick-arrow, .main_slider .custom-arrows { bottom:16%;}
}

.main_con { padding:6.8421% 0;}
.best_wrap { padding-top:9.2%;}
.mainTitle {font-size:1.142857142857em; line-height:1.4; color:#323232; text-align:center; margin-bottom:2em;}
.mainTitle .text {opacity:0.9;}
.mainTitle .title {font-size:2.125em; font-weight:700;}
.block_520 {display:none;}

@media (max-width:1280px) {
    .mainTitle .title {font-size:2.0em; }
}
@media (max-width:1024px) {
    .mainTitle {font-size:1.12em; margin-bottom:1.5em;}
    .mainTitle .title {font-size:1.8em; line-height:1.2; }
}
@media (max-width:768px) {
    .mainTitle .title {font-size:1.7em; }
}
@media(max-width:520px) {
    .block_520 {display:block;}
    .mainTitle { margin-bottom:1.2em;}
    .mainTitle .title {font-size:1.6em; }
    .tour_wrap .mainTitle .title {font-size:1.4em; }
}
@media (max-width:440px) {
    .mainTitle {font-size:1.05em;}
    .mainTitle .title {font-size:1.5em; }
}

.banner01_wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.banner01_wrap .sslide {position:relative; }
.banner01_wrap .sslide:not(:first-child)::after {position:absolute; content:""; width:1px; height:40%; background:#ddd; left:0; top:50%; transform:translateY(-50%); z-index:2;}
.banner01_wrap .sslide .simg { position:absolute; max-width:44px; width:11%; right:13%; top:50%; transform:translateY(-50%); pointer-events: none; user-select: none; -webkit-user-select: none; transition:right 0.2s ease; z-index:2;}
.banner01_wrap .sslide:hover .simg { right:10%;}
.banner01_wrap .sslide .banner01_con a { position:relative; display:block; line-height:1.2; padding:10% 30% calc(10% - 1.2em) 13%; background:#f3f3f3; z-index:1;}
.banner01_wrap .sslide .banner01_con a .title {display:block; font-size:1.2857142857em; font-weight:600; color:#323232;}
.banner01_wrap .sslide .banner01_con a .text {display:block; color:#828282; margin-top:0.2em; height:2.4em;word-break: keep-all;}

.special_wrap {}
.special_wrap .designDisplay { display:flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-start;}
.special_wrap .designDisplay .swiper-container {flex-wrap:wrap; max-width:576px;  width:38%; margin:0;}
.special_wrap .designDisplay .swiper-container .swiper-wrapper { align-items: flex-start;}
.special_wrap .swiper-container .displayTabContainer > li { width:100% !important;}
.special_wrap .designDisplay .displayTabContainer > li:not(.current) { /*display:none;*/}
.special_wrap .designDisplay .displayTabContentsContainerWrap {max-width:904px; width:59%;}
.swiper_10154 ul.displayTabType1 {}
.swiper_10154 ul.displayTabType1>li {height:auto; line-height:initial; border:0;}
.swiper_10154 ul.displayTabType1>li { width:100%;}
.special_wrap .swiper-slide {position:relative; width:100%; height:0 !important; line-height:0 !important; border:0 !important; padding-bottom:142.361111%; background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important;}
.special_wrap .swiper-slide span {position:absolute; max-width:360px; width:80%; height:128px; left:10%; bottom:6%; background-position:left bottom !important; background-size:contain !important; background-repeat:no-repeat !important; display:block; text-indent:-9999em;  z-index:2;}
.special_wrap .swiper-slide:nth-child(1) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(2) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(3) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(4) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(5) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(6) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(7) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(8) {background-image:url("../images/hsmall/special_slider01.jpg")}
.special_wrap .swiper-slide:nth-child(1) span {background-image:url("../images/hsmall/special_slider01_typo.png");}
.special_wrap .swiper-slide:nth-child(2) span {background-image:url("../images/hsmall/special_slider01_typo.png");}
.special_wrap .swiper-slide:nth-child(3) span {background-image:url("../images/hsmall/special_slider03_typo.png");}
.special_wrap .swiper-slide:nth-child(4) span {background-image:url("../images/hsmall/special_slider04_typo.png");}
.special_wrap .swiper-slide:nth-child(5) span {background-image:url("../images/hsmall/special_slider05_typo.png");}
.special_wrap .swiper-slide:nth-child(6) span {background-image:url("../images/hsmall/special_slider06_typo.png");}
.special_wrap .swiper-slide:nth-child(7) span {background-image:url("../images/hsmall/special_slider07_typo.png");}
.special_wrap .swiper-slide:nth-child(8) span {background-image:url("../images/hsmall/special_slider08_typo.png");}

.specialCon_wrap { display:flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-start;}
.specialCon_wrap .specialCon_title {position:relative; max-width:576px;  width:38%;}
.specialCon_wrap .specialCon_text { position:absolute;  left:10%; bottom:6%; font-size:1.142857142857em; color:#fff; z-index:2;}
.specialCon_wrap .specialCon_text .text01 {font-family: 'Poppins', sans-serif; margin-bottom:1em;}
.specialCon_wrap .specialCon_text .text01 span { display:inline-block; text-transform:uppercase; font-weight:700; padding:0.25em 1.5em; background:url("../images/hsmall/specialTitle_bg.png") center center no-repeat;}
.specialCon_wrap .specialCon_text .text02 { font-size:2.125em; line-height:1.3; font-weight:700;}
.specialCon_wrap .specialCon_title_img {position:relative; width:100%; height:0; padding-bottom:142.361111%; background:url("../images/hsmall/special_img.jpg"); background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important;}
.specialCon_wrap .specialCon_display {max-width:904px; width:59%;}


@media (max-width:1280px) {
    .specialCon_wrap .specialCon_text .text02 { font-size:2.0em;}
}
@media (max-width:1024px) {
    .specialCon_wrap .specialCon_text {font-size:1.1em;}
    .specialCon_wrap .specialCon_text .text02 { font-size:1.8em;}
}

@media (max-width:768px) {
    .specialCon_wrap .specialCon_text {font-size:1.05em;}
    .specialCon_wrap .specialCon_text .text02 { font-size:1.6em;}
}
@media (max-width:767px) {
    .specialCon_wrap { flex-direction:column;}
    .specialCon_wrap .specialCon_title {max-width:100%; width:100%; margin-bottom:20px;}
    .specialCon_wrap .specialCon_text {font-size:1.0em; margin-bottom:0.6em; left:6%; bottom:4%}
    .specialCon_wrap .specialCon_text .text02 { font-size:1.4em; text-shadow:0 0 5px rgba(0,0,0,0.1);}
    .specialCon_wrap .specialCon_title_img { background:url("../images/hsmall/special_img_mobile.jpg"); padding-bottom:54.6875%;}
    .specialCon_wrap .specialCon_display {width:100%;}
    .specialCon_wrap .specialCon_display .display_responsible_class{ margin:0;}

}

.banner02_wrap {}
.banner02_wrap { padding-top:0;}
.banner02_wrap .slick-list { border-radius:40px;}
.banner02_wrap .sslide {position:relative; text-align:center;}
.banner02_wrap .sslide .simg { position:relative; max-width:580px; width:96%; z-index:2;}
.banner02_wrap .sslide .banner02_con a { position:absolute; width:100%; height:100%; left:0; top:0; text-indent:-9999em; border-radius:40px; z-index:1;}
.banner02_wrap .sslide .banner02_con.banner02_01 a {background:#c5d6f4;}
.banner02_wrap .sslide .banner02_con.banner02_02 a {background:#daf0e4;}
.benefit_banner a { display:block; border-radius:40px; text-align:center;  border-radius:40px; overflow:hidden; z-index:1;}
.benefit_banner a img {max-width:580px; width:92%;}
.benefit_01 {background:#c5d6f4;}

.banner02_wrap .page_wrapper {position:absolute; width:4em; right:23px; bottom:-24px; z-index:1; }
.banner02_wrap .page_wrapper .page_wrap { display:inline-block;}
.banner02_wrap .slick-dots {position:relative; display:inline-block; width:auto; font-family: 'Rubik', sans-serif; font-size:1.142857142857em; color:#828282; text-align:left; bottom:auto; line-height: normal; }
.banner02_wrap .slick-dots li { display:none;}
.banner02_wrap .slick-dots li.slick-active { display:block;}
.banner02_wrap .slick-dots li strong, .main_slider .slick-dots li .slideCount {display:width:1em;}
.banner02_wrap .slick-dots li .slideBorder, .main_slider .slick-dots li .slideCount { opacity:0.5; font-weight:400;}
.banner02_wrap .slick-dots li .slideBorder {font-size:0.8em; margin:0 0.5em; }

.banner02_wrap .slick-slider .slick-arrow {opacity:1 !important;}
.banner02_wrap .slick-arrow {width:30px; height:30px; background-image:none; background-color:transparent; text-indent:0; border-radius:0; top:auto; margin:0;}
.banner02_wrap .slick-arrow.slick-prev {top:auto; left:auto; right:80px; bottom:-30px;}
.banner02_wrap .slick-arrow.slick-next {right:0; bottom:-30px;  }
.banner02_wrap .light_style_2_11.slick-slider:hover .slick-arrow.slick-prev, .banner02_wrap .light_style_2_11.slick-slider:hover .slick-arrow.slick-next { bottom:-30px !important; margin:0 !important; transform:none !important;}

.pick_wrap {background:#f9f9f9;}
.pick_wrap .gl_inner_item_wrap { border:1px solid #eee;}
.pick_wrap .goodsDisplayImageWrap { background:#f9f9f9;}
.pick_wrap .infO_style_2 {background:#fff; padding:15px; box-sizing:border-box; height:12em}

/* rowgroup2(추천여행지 영역) 시작 */
@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Hahmlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'SB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'SB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'SB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

.rowgroup2 {
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map {
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap {
    display: block;
    position: relative;
    width: 100%;
    min-height: 1054px;
    padding: 0 calc((100% - 1680px) / 2);
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .map_title_box {
    display: inline-block;
    position: relative;
    min-width: 585px;
    padding-top: 231px;
    padding-left: 53px;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .map_title_box:before {
    display: block;
    position: absolute;
    top: 144px;
    right: 0;
    width: 212px;
    height: 200px;
    background-image: url(../images/design/new/hsg_map_title_icon.png);
    background-repeat: no-repeat;
    background-position: left top;
    content: '';
    box-sizing: border-box;
    transform-origin: left center;
    transform: scale(0) translateX(-20px);
    transition-property: transform;
    transition-duration: 1500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map.scroll_ani .hsg_map_wrap .map_title_box:before {
    transform: scale(1) translateX(0px);
}

.hsg_map .hsg_map_wrap .map_title_box .map_title {
    display: inline-block;
    position: relative;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .map_title_box .map_title span {
    display: block;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .map_title_box .map_title span em {
    display: inline-block;
    font-size: 68px;
    line-height: 85px;
    letter-spacing: -0.03em;
    font-family: 'Hahmlet';
    vertical-align: top;
    box-sizing: border-box;
    transform: translateX(-100%);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 1500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map.scroll_ani .hsg_map_wrap .map_title_box .map_title span em {
    transform: translateX(0px);
    opacity: 1;
}

.hsg_map .hsg_map_wrap .map_title_box .map_title span:first-child em {
    position: relative;
    padding-right: 76px;
    color: #393f59;
    font-weight: 200;
}

.hsg_map .hsg_map_wrap .map_title_box .map_title span:first-child em:before {
    display: block;
    position: absolute;
    top: -15px;
    right: 0;
    width: 48px;
    height: 48px;
    background-image: url(../images/design/new/hsg_map_title_star.png);
    background-repeat: no-repeat;
    background-position: left top;
    content: '';
    box-sizing: border-box;
    transform: translateX(-100%) rotateY(720deg);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 2000ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map.scroll_ani .hsg_map_wrap .map_title_box .map_title span:first-child em:before {
    transform: translateX(0px) rotateY(0deg);
    opacity: 1;
}

.hsg_map .hsg_map_wrap .map_title_box .map_title span:last-child em {
    color: #36488b;
    font-weight: 500;
}

.hsg_map .hsg_map_wrap .map_slide_wrap {
    display: block;
    position: absolute;
    z-index: 1;
    top: 140px;
    right: calc(((100% - 1680px) / 2) + 16px);
    min-width: 967px;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_bg {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding: 43.49% 0;
    background-image: url(https://www.hsg.go.kr/site/tour/images/main/map_slide_bg.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    transform: translateY(50px);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 2000ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_bg {
    transform: translateY(0px);
    opacity: 1;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list {
    display: block;
    position: static;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

/* 안형주 추가 */
/* https://www.hsg.go.kr/tour/index.do 횡성여행 범산목장 삭제 */
.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .slick-slide:nth-child(8) {
    display: none;
}

/* 횡성여행 범산목장 삭제 이미지 변경 */
.hsg_map .hsg_map_wrap .map_slide_wrap .map_bg {
    background-image: url(../images/design/new/map_slide_bg_1.png);
}

@media screen and (min-width: 641px) {
    /* 슬릭 초기화 시 .map_slide_list에 .slick-slider(position:relative)가 붙어,
       map_bg 아래로 흘러간 이 리스트가 마커(absolute)의 기준이 되어버림 → 마커가 지도 아래로 떨어짐.
       리스트를 map_bg 위에 정확히 겹치도록 top/left/right/bottom:0으로 채워, 마커의 %/px top 좌표가
       모두 지도(map_bg) 크기를 기준으로 계산되게 한다. (height:0이면 ≤1680px의 % top이 전부 0으로 붕괴됨) */
    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .slick-list {
        display:block;
        position: static;
        font-size: 0;
        line-height: 0;
        box-sizing: border-box;
        overflow: visible !important;
        /* 슬릭이 GPU 가속용으로 slick-list에 transform(translate3d)을 넣는데,
           transform이 걸린 요소는 자식 absolute의 기준(containing block)이 되어버린다.
           높이 0인 slick-list가 기준이 되면 마커의 % top이 전부 0으로 붕괴(≤1680px)하므로 transform 제거. */
        transform: none !important;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .slick-track {
        position: static !important;
        width: 100% !important;
        transform: none !important;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .slick-slide {
        display: inline-block;
        float: none;
        width: auto;
        min-height: 0;
        vertical-align: top;
        box-sizing: border-box;
    }
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item {
    display: block;
    position: static;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn {
    display: block;
    position: absolute;
    width: 94px;
    height: 111px;
    padding-top: 24px;
    padding-bottom: 30px;
    border: 0;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    text-align: center;
    transform: translateY(100%) rotateY(360deg);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 2000ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn {
    transform: translateY(0px) rotateY(0deg);
    opacity: 1;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:before, .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:after {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    content: '';
    box-sizing: border-box;
    transition-property: transform, opacity;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:before {
    transform: scale(1);
    opacity: 1;
    background-image: url(../images/design/new/map_slide_btn_before.png);
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item.active .map_slide_btn:before {
    transform: scale(0);
    opacity: 0;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:after {
    transform: scale(0);
    opacity: 0;
    background-image: url(../images/design/new/map_slide_btn_after.png);
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item.active .map_slide_btn:after {
    transform: scale(1);
    opacity: 1;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn em {
    display: inline-block;
    position: relative;
    z-index: 1;
    font-size: 17px;
    color: #294f8a;
    line-height: 19px;
    letter-spacing: -0.03em;
    font-weight: 400;
    font-family: 'SB';
    vertical-align: top;
    box-sizing: border-box;
    transition-property: color;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item.active .map_slide_btn em {
    color: #fff;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="0"] .map_slide_btn {
    top: 157px;
    left: 143px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="1"] .map_slide_btn {
    top: 116px;
    left: 243px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="2"] .map_slide_btn {
    top: 169px;
    left: 485px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="3"] .map_slide_btn {
    top: 77px;
    left: 525px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="4"] .map_slide_btn {
    top: 39px;
    left: 860px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="5"] .map_slide_btn {
    top: 196px;
    left: 836px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="6"] .map_slide_btn {
    top: 387px;
    left: 672px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="7"] .map_slide_btn {
    top: 295px;
    left: 581px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="8"] .map_slide_btn {
    top: 399px;
    left: 500px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="9"] .map_slide_btn {
    top: 351px;
    left: 406px;
}

.hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="10"] .map_slide_btn {
    top: 335px;
    left: 287px;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="0"] .map_slide_btn {
    transition-delay: 100ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="1"] .map_slide_btn {
    transition-delay: 200ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="2"] .map_slide_btn {
    transition-delay: 300ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="3"] .map_slide_btn {
    transition-delay: 400ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="4"] .map_slide_btn {
    transition-delay: 500ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="5"] .map_slide_btn {
    transition-delay: 600ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="6"] .map_slide_btn {
    transition-delay: 700ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="7"] .map_slide_btn {
    transition-delay: 800ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="8"] .map_slide_btn {
    transition-delay: 900ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="9"] .map_slide_btn {
    transition-delay: 1000ms;
}

.hsg_map.scroll_ani .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="10"] .map_slide_btn {
    transition-delay: 1100ms;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap {
    display: block;
    position: relative;
    z-index: 1;
    width: 50%;
    margin-top: 21px;
    padding-left: 53px;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    transform: translateX(-50px);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 1000ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map.scroll_ani .hsg_map_wrap .desc_slide_wrap {
    transform: translateX(0px);
    opacity: 1;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list {
    display: inline-block;
    width: auto;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    box-sizing: border-box;
}

@media screen and (min-width: 641px) {
    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .slick-list {
        overflow:visible !important;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .slick-track {
        width: 100% !important;
        transform: none !important;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .slick-slide {
        float: none;
        width: auto;
        min-height: 0;
    }
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item {
    display: inline-block;
    position: relative;
    height: 0;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item.active {
    height: auto;
    visibility: visible;
    opacity: 1;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link {
    display: block;
    position: relative;
    width: 750px;
    padding-top: 81px;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover {
    text-decoration: none;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box {
    display: block;
    position: relative;
    width: 100%;
    min-height: 440px;
    padding: 48px 380px 0 0;
    background-color: #fff;
    border: 5px solid #496fb4;
    border-radius: 40px;
    box-sizing: border-box;
    box-shadow: 13px 22px 50px rgba(0, 0, 0, 0.16);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0px;
    height: 0px;
    background-color: #496fb4;
    border-radius: 30px 100% 30px 30px;
    content: '';
    box-sizing: border-box;
    opacity: 0;
    transition-property: width, height, opacity;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box:before {
    width: 100%;
    height: 100%;
    opacity: 1;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner {
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    text-align: center;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 84px;
    padding-bottom: 42px;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - 8px);
    width: 17px;
    height: 22px;
    background-image: url(https://www.hsg.go.kr/site/tour/images/main/desc_slide_arrow_icon.png);
    background-repeat: no-repeat;
    background-position: left top;
    content: '';
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco:before, .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco:after {
    display: block;
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    border-radius: 100%;
    content: '';
    box-sizing: border-box;
    transition-property: background-color;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco:before {
    left: -23px;
    background-color: #b8cbed;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .title_box .deco:before {
    background-color: #496fb4;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco:after {
    right: -23px;
    background-color: #2c487c;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .title_box .deco:after {
    background-color: #496fb4;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img {
    display: block;
    position: relative;
    z-index: 1;
    width: 66px;
    height: 66px;
    background-color: #496fb4;
    border-radius: 100%;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    display: block;
    position: absolute;
    background-image: url(../images/design/new/desc_slide_deco_icon.png);
    background-repeat: no-repeat;
    content: '';
    box-sizing: border-box;
    transform: rotateY(360deg);
    transition-property: transform, opacity;
    transition-duration: 750ms;
    transition-timing-function: ease-in-out;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .title_box .deco .deco_img:before {
    transform: rotateY(0deg);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="0"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 19px);
    left: calc(50% - 13px);
    width: 27px;
    height: 38px;
    background-position: left top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="1"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 12px);
    left: calc(50% - 15px);
    width: 30px;
    height: 24px;
    background-position: -60px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="2"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 10px);
    left: calc(50% - 14px);
    width: 28px;
    height: 20px;
    background-position: -120px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="3"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 10px);
    left: calc(50% - 14px);
    width: 28px;
    height: 20px;
    background-position: -120px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="4"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 11px);
    left: calc(50% - 13px);
    width: 26px;
    height: 22px;
    background-position: -240px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="5"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 13px);
    left: calc(50% - 11px);
    width: 23px;
    height: 27px;
    background-position: -300px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="6"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 11px);
    left: calc(50% - 15px);
    width: 30px;
    height: 23px;
    background-position: -360px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="7"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 10px);
    left: calc(50% - 16px);
    width: 33px;
    height: 20px;
    background-position: -420px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="8"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 10px);
    left: calc(50% - 15px);
    width: 30px;
    height: 21px;
    background-position: -480px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="9"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 13px);
    left: calc(50% - 16px);
    width: 32px;
    height: 27px;
    background-position: -540px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item[data-desc-index="10"] .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
    top: calc(50% - 13px);
    left: calc(50% - 15px);
    width: 30px;
    height: 27px;
    background-position: -600px top;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box span {
    display: inline-block;
    font-size: 34px;
    color: #496fb4;
    line-height: 44px;
    letter-spacing: -0.07em;
    font-weight: 600;
    font-family: 'Hahmlet';
    vertical-align: top;
    box-sizing: border-box;
    transition-property: color;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .title_box span {
    color: #fff;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 19px;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .desc {
    display: block;
    width: 100%;
    min-height: 120px;
    font-size: 17px;
    color: #2c487c;
    line-height: 30px;
    letter-spacing: -0.03em;
    font-weight: 400;
    font-family: 'Hahmlet';
    box-sizing: border-box;
    transition-property: color;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .desc_box .desc {
    color: #fff;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .view {
    display: inline-block;
    position: relative;
    min-width: 216px;
    height: 73px;
    padding-top: 40px;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .view:before {
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    width: 216px;
    height: 63px;
    background-image: url(../images/design/new/desc_slide_view.png);
    background-repeat: no-repeat;
    background-position: left top;
    content: '';
    box-sizing: border-box;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .desc_box .view:before {
    opacity: 0;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .view span {
    display: inline-block;
    position: relative;
    padding-right: 26px;
    font-size: 18px;
    color: #fff;
    line-height: 22px;
    letter-spacing: -0.03em;
    font-weight: 300;
    font-family: 'Hahmlet';
    vertical-align: top;
    box-sizing: border-box;
    transition-property: letter-spacing;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .desc_box .view span {
    letter-spacing: 1em;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .view span:before {
    display: block;
    position: absolute;
    top: calc(50% - 4px);
    right: 0;
    width: 15px;
    height: 8px;
    background-image: url(https://www.hsg.go.kr/site/tour/images/main/desc_slide_view_icon.png);
    background-repeat: no-repeat;
    background-position: left top;
    content: '';
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner {
    display: block;
    position: absolute;
    top: -81px;
    right: 65px;
    width: 315px;
    height: 446px;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner:before {
    display: block;
    position: absolute;
    top: -5px;
    right: -8px;
    width: 100%;
    height: 100%;
    background-color: #496fb4;
    border-radius: 158px 158px 0 0;
    box-sizing: border-box;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 158px 158px 0 0;
    box-sizing: border-box;
    overflow: hidden;
}

.hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control {
    display: none;
}

@media screen and (max-width: 1680px) {
    .hsg_map .hsg_map_wrap {
        min-height:0;
        padding: 0 3%;
    }

    .hsg_map .hsg_map_wrap .map_title_box {
        padding-top: 80px;
        padding-left: 0;
    }

    .hsg_map .hsg_map_wrap .map_title_box:before {
        top: 50px;
        right: 60px;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span:first-child em:before {
        right: 20px;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap {
        top: 20px;
        right: 3%;
        width: 56%;
        min-width: auto;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="0"] .map_slide_btn {
        top: 16%;
        left: 15%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="1"] .map_slide_btn {
        top: 11%;
        left: 26%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="2"] .map_slide_btn {
        top: 19%;
        left: 49%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="3"] .map_slide_btn {
        top: 7%;
        left: 55%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="4"] .map_slide_btn {
        top: 2%;
        left: 88%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="5"] .map_slide_btn {
        top: 22%;
        left: 85%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="6"] .map_slide_btn {
        top: 45%;
        left: 70%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="7"] .map_slide_btn {
        top: 34%;
        left: 60%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="8"] .map_slide_btn {
        top: 49%;
        left: 51%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="9"] .map_slide_btn {
        top: 41%;
        left: 42%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="10"] .map_slide_btn {
        top: 37%;
        left: 29%;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap {
        margin-top: 60px;
        padding-bottom: 40px;
        padding-left: 0;
    }
}

@media screen and (max-width: 1500px) {
    .hsg_map .hsg_map_wrap .map_title_box {
        width:auto;
        min-width: auto;
        padding-top: 120px;
    }

    .hsg_map .hsg_map_wrap .map_title_box:before {
        top: 80px;
        right: auto;
        left: 95%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap {
        top: 7%;
        right: 5%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn {
        width: 80px;
        height: 95px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:before, .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:after {
        background-size: cover;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn em {
        font-size: 15px;
        line-height: 18px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap {
        width: 48%;
        margin-top: 80px;
        padding-bottom: 60px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list {
        width: 100%;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link {
        width: 100%;
        padding-top: 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box {
        min-height: 0;
        padding-top: 15px;
        padding-right: 270px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner {
        top: calc(50% - 160px);
        right: 20px;
        width: 226px;
        height: 320px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box {
        padding-top: 70px;
        padding-bottom: 30px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box {
        margin-top: 5px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .desc {
        min-height: 100px;
        font-size: 15px;
        line-height: 25px;
    }
}

@media screen and (max-width: 1300px) {
    .hsg_map .hsg_map_wrap .map_title_box {
        padding-top:80px;
    }

    .hsg_map .hsg_map_wrap .map_title_box:before {
        top: 104%;
        left: 28%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap {
        top: 20px;
        right: 5%;
        width: 60%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn {
        width: 70px;
        height: 83px;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn em {
        font-size: 14px;
        line-height: 16px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap {
        margin-top: 23vw;
        width: 100%;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box {
        padding-top: 20px;
        padding-right: 250px;
        border-radius: 40px 100% 40px 40px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box:before {
        border-radius: 20px 100% 1px 20px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner {
        right: 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box {
        padding: 0 3%;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .desc {
        min-height: 0;
        word-break: keep-all;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .desc br {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .hsg_map .hsg_map_wrap {
        text-align:center;
    }

    .hsg_map .hsg_map_wrap .map_title_box {
        padding-top: 40px;
    }

    .hsg_map .hsg_map_wrap .map_title_box:before {
        top: 65%;
        left: auto;
        right: 100%;
        width: 150px;
        height: 142px;
        background-size: cover;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span {
        display: inline-block;
        vertical-align: top;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span em {
        font-size: 44px;
        line-height: 60px;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span:first-child em {
        padding-right: 45px;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span:first-child em:before {
        right: 0;
        width: 40px;
        height: 40px;
        background-size: cover;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap {
        position: relative;
        top: 0;
        right: auto;
        left: -1%;
        width: 90%;
        margin: 10px auto 0;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn {
        width: 68px;
        height: 80px;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="0"] .map_slide_btn {
        top: 18%;
        left: 16%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="1"] .map_slide_btn {
        top: 13%;
        left: 26%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="2"] .map_slide_btn {
        top: 18%;
        left: 49%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="3"] .map_slide_btn {
        top: 6%;
        left: 59%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="4"] .map_slide_btn {
        top: 2%;
        left: 87%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="5"] .map_slide_btn {
        top: 23%;
        left: 85%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="6"] .map_slide_btn {
        top: 46%;
        left: 70%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="7"] .map_slide_btn {
        top: 35%;
        left: 60%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="8"] .map_slide_btn {
        top: 52%;
        left: 52%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="9"] .map_slide_btn {
        top: 42%;
        left: 43%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="10"] .map_slide_btn {
        top: 39%;
        left: 31%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn em {
        font-size: 13px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap {
        margin-top: -50px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box {
        border-radius: 50px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box:before {
        top: 5px;
        left: 5px;
        border-radius: 40px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box:before {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box span {
        font-size: 28px;
        line-height: 40px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .desc br {
        display: none;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .view span {
        font-size: 16px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner {
        top: auto;
        bottom: 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner:before {
        border-radius: 113px 113px 10px 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner img {
        border-radius: 113px 113px 10px 0;
    }
}

@media screen and (max-width: 800px) {
    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="0"] .map_slide_btn {
        top:16%;
        left: 14%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="1"] .map_slide_btn {
        top: 9%;
        left: 26%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="2"] .map_slide_btn {
        top: 14%;
        left: 46%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="3"] .map_slide_btn {
        top: 4%;
        left: 60%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="4"] .map_slide_btn {
        top: -1%;
        left: 90%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="5"] .map_slide_btn {
        top: 20%;
        left: 85%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="6"] .map_slide_btn {
        top: 44%;
        left: 70%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="7"] .map_slide_btn {
        top: 32%;
        left: 60%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="8"] .map_slide_btn {
        top: 49%;
        left: 51%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="9"] .map_slide_btn {
        top: 39%;
        left: 42%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item[data-map-index="10"] .map_slide_btn {
        top: 37%;
        left: 29%;
    }
}

@media screen and (max-width: 640px) {
    .hsg_map .hsg_map_wrap {
        padding:0;
        text-align: left;
    }

    .hsg_map .hsg_map_wrap .map_title_box {
        width: 100%;
        padding: 40px 3% 0;
    }

    .hsg_map .hsg_map_wrap .map_title_box:before {
        display: none;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title:before {
        display: block;
        position: absolute;
        top: -10px;
        left: calc(100% + 18px);
        width: 84px;
        height: 79px;
        background-image: url(../images/design/new/hsg_map_title_icon.png);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: cover;
        content: '';
        box-sizing: border-box;
        transform: translateX(-50%);
        opacity: 0;
        transition-property: transform, opacity;
        transition-duration: 750ms;
        transition-timing-function: ease-in-out;
    }

    .hsg_map.scroll_ani .hsg_map_wrap .map_title_box .map_title:before {
        transform: translateX(0px);
        opacity: 1;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span {
        display: block;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span em {
        font-size: 32px;
        line-height: 38px;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span:first-child em {
        padding-right: 31px;
    }

    .hsg_map .hsg_map_wrap .map_title_box .map_title span:first-child em:before {
        top: -10px;
        right: 0;
        width: 22px;
        height: 22px;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap {
        position: static;
        width: 100%;
        padding-left: 3%;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_bg {
        display: none;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list {
        display: block;
        width: 100%;
        box-sizing: border-box;
        -webkit-mask-image: linear-gradient(to left, transparent 0%, transparent 0%, #000 25%);
        mask-image: linear-gradient(to left, transparent 0%, transparent 0%, #000 25%);
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .slick-list {
        display: block;
        width: 100%;
        padding-top: 23px;
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .slick-slide {
        width: auto;
        margin-right: 6px;
        padding-left: 1px;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item {
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn {
        position: static;
        transition: none;
        width: auto;
        height: auto;
        padding: 0 6px;
        border: 1px solid #496fb4;
        border-radius: 4px;
        text-align: center;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:before, .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn:after {
        display: none;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn em {
        font-size: 13px;
        color: #496fb4;
        line-height: 28px;
        font-weight: 500;
        font-family: 'Hahmlet';
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item.active .map_slide_btn em {
        color: #496fb4;
    }

    .hsg_map .hsg_map_wrap .map_slide_wrap .map_slide_list .map_slide_item .map_slide_btn em br {
        display: none;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap {
        margin-top: 0;
        padding-bottom: 72px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .slick-list {
        display: block;
        width: 100%;
        padding-top: 23px;
        padding-left: 3%;
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .slick-slide {
        width: 256px;
        margin-right: 28px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item {
        height: auto;
        visibility: visible;
        opacity: 1;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item.active {
        height: auto;
        visibility: visible;
        opacity: 1;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 5px -3px 30px rgba(0, 0, 0, 0.1);
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:before {
        display: block;
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 0;
        width: 256px;
        height: 212px;
        background-image: url(https://www.hsg.go.kr/site/tour/images/main/desc_slide_link_before.png);
        background-repeat: no-repeat;
        background-position: left top;
        content: '';
        box-sizing: border-box;
        opacity: 0.6;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box {
        position: static;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box:before {
        display: none;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner {
        position: relative;
        z-index: 1;
        min-height: 360px;
        padding: 223px 5px 2px 20px;
        text-align: left;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box {
        padding: 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box:before {
        display: none;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco {
        display: inline-block;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: auto;
        height: auto;
        margin-right: 5px;
        vertical-align: top;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco:before, .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco:after {
        display: none;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img {
        width: 34px;
        height: 34px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box .deco .deco_img:before {
        top: 50% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-50%) scale(0.52);
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link:hover .round_box .desc_inner .title_box .deco .deco_img:before {
        top: 50% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-50%) scale(0.52);
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .title_box span {
        font-size: 22px;
        color: #fff;
        line-height: 34px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box {
        margin-top: 11px;
        padding: 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .desc {
        min-height: 90px;
        font-size: 12px;
        color: #fff;
        line-height: 18px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .desc_inner .desc_box .view {
        display: none;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner {
        bottom: auto;
        right: auto;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner:before {
        display: none;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_list .desc_slide_item .desc_slide_link .round_box .img_inner img {
        border-radius: 0;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control {
        display: block;
        width: 94%;
        margin: 30px auto 0;
        padding-right: 23px;
        padding-left: 35px;
        font-size: 0;
        line-height: 0;
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control .progress_box {
        display: inline-block;
        position: relative;
        width: calc(100% - 66px);
        height: 3px;
        margin-top: 8px;
        margin-right: 18px;
        background-color: rgba(0, 0, 0, 0.2);
        font-size: 0;
        line-height: 0;
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control .progress_box .bar {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #000;
        content: '';
        box-sizing: border-box;
        transition-property: width;
        transition-duration: 1000ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control .btn_box {
        display: inline-block;
        position: relative;
        font-size: 0;
        line-height: 0;
        vertical-align: top;
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control .btn_box button {
        display: inline-block;
        position: relative;
        width: 20px;
        height: 20px;
        border: 0;
        font-size: 0;
        line-height: 0;
        vertical-align: top;
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control .btn_box button + button {
        margin-left: 8px;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control .btn_box button:before {
        display: block;
        position: absolute;
        top: calc(50% - 6px);
        left: calc(50% - 4px);
        width: 8px;
        height: 12px;
        background-image: url(https://www.hsg.go.kr/site/tour/images/main/visual_btn.png);
        background-repeat: no-repeat;
        background-position: -10px top;
        content: '';
        box-sizing: border-box;
    }

    .hsg_map .hsg_map_wrap .desc_slide_wrap .desc_slide_control .btn_box .next:before {
        transform: rotate(180deg);
    }
}
/* rowgroup2(추천여행지 영역) 끝 */
[class^="subTop_"] { position:relative; height:0; padding-bottom:10.4166666%; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important;}
.subTop_0014, .subTop_00140001, .subTop_00140002 { background-image:url("../images/hsmall/subTop_0014.jpg");}
.subTop_0017 { background-image:url("../images/hsmall/subTop_0017.jpg");}
.subTop_0012 { background-image:url("../images/hsmall/subTop_0012.jpg");}
.subTop_0007, .subTop_00070001, .subTop_00070002, .subTop_00070003 { background-image:url("../images/hsmall/subTop_0007.jpg");}
.subTop_0019 { background-image:url("../images/hsmall/subTop_0007.jpg");}
.subTop_0015 { background-image:url("../images/hsmall/subTop_0015.jpg");}
.subTop_0005, .subTop_00050002, .subTop_00050003, .subTop_00050005, .subTop_00050006, .subTop_00050007 { background-image:url("../images/hsmall/subTop_0005.jpg");}
.subTop_0011, .subTop_00110001, .subTop_00110002, .subTop_00110003, .subTop_00110006 { background-image:url("../images/hsmall/subTop_0011.jpg");}
.subTop_0010, .subTop_00100001, .subTop_00100002 { background-image:url("../images/hsmall/subTop_0010.jpg");}
.subTypo {position:absolute; width:80%; font-size:1.2857142857em; line-height:1.4; color:#fff; text-align:center; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;}
.subTypo .subTypo_title { font-size:2em; font-weight:700;}
[class^="subTop_"] .search_nav { position:absolute; width:1520px; width:92%; left:50%; top:5%; text-align:right; transform:translateX(-50%);}
[class^="subTop_"] .search_nav .home {text-indent:-9999em; width:13px; height:12px; background:url("../images/hsmall/categoryNav_home.png") ;background-size:13px 12px;}
[class^="subTop_"] .search_nav .navi_linemap:before { width:6px; height:10px;   background: url(../images/hsmall/categoryNav_arrow.png) 50% 50% no-repeat; background-size:6px; height:10px; vertical-align:middle; margin:0 10px;}

.catalog_page .search_nav { display:none !important;}
.subCategory_nav { display:flex; align-items:center; justify-content: flex-end; position:absolute; max-width:1520px; width:92%; left:50%; top:30px; transform:translateX(-50%); color:#fff; z-index:2;}
.subCategory_nav .home {display:inline-block; width:13px; height:12px; background:url("../images/hsmall/categoryNav_home.png") no-repeat; background-size:13px 12px; vertical-align:sub; text-indent:-9999em;}
.subCategory_nav li a {display:inline-block; color:#fff; vertical-align:middle;}
.subCategory_nav li a:hover {text-decoration:underline;}
.subCategory_nav li:not(:last-child)::after { display:inline-block; content:""; width:6px; height:10px; background: url("../images/hsmall/categoryNav_arrow.png") no-repeat; background-size:6px 10px; vertical-align:middle; margin:0 10px;}

@media(max-width:1420px) {
    [class^="subTop_"] {  padding-bottom:14%;}
}
@media(max-width:1280px) {
    [class^="subTop_"] {  padding-bottom:16%;}
    .subTypo { font-size:1.2em; }
    .subTypo .subTypo_title { font-size:1.8em;}
}

@media(max-width:1024px) {
    [class^="subTop_"] {  padding-bottom:140px;}
    .subCategory_nav { top:10px;}
    .subTypo { font-size:1.15em; }
    .subTypo .subTypo_title { font-size:1.6em;}
}

.intro_wrapper { position:relative; max-width:1920px; width:100%; margin:0 auto; overflow:hidden;  z-index:5;}
.introTop { position:relative; overflow:hidden; z-index:1;}
.introTypo_wrap {position:absolute; display:flex; justify-content: space-between;  max-width:1400px; width:92%; left:50%; bottom:0; transform:translateX(-50%); font-size:1.142857142857em; line-height:1.4; color:#fff; z-index:2; }
.introTypo {position:relative; padding-bottom:3%; z-index:2;}
.introTypo .text01 {font-family: 'Poppins', sans-serif; font-weight:700; text-transform:uppercase; opacity:0.5; letter-spacing:0.2em;}
.introTypo .title {font-size:2.875em; line-height:1.2; font-weight:700; margin:2% 0 3%;}
.introTypo .text02 {font-size:1.25em; line-height:1.5;}
.introTypo_img { position:absolute; max-width:704px; width :52%; right:0; bottom:0;}
.intro_wrap { max-width:1400px; width:94%; margin:6% auto 0;}
.intro_wrap .intro_con { display:flex; align-items:center; justify-content: space-between;}
.intro_wrap .intro_con:not(:last-child) { margin-bottom:8%;}
.intro_wrap .intro_con .intro_dl { width:47.6%; font-size:1.2857142857em; line-height:1.5;}
.intro_wrap .intro_con .intro_dl > dt .title01 { display:block; }
.intro_wrap .intro_con .intro_dl > dt .title02 { display:block; font-size:2.111111em; font-weight:700; color:#222; line-height:1.2; margin:0.4em 0 1em;}
.intro_wrap .intro_con .intro_dl > dd { font-size:1.111111em;}
.intro_wrap .img { max-width:640px; width:47%; }
.intro_wrap .intro_con:nth-child(2n+1) .intro_dl { order:2;}
.intro_wrap .intro_con:nth-child(2n+1) .img { order:1;}

@media (max-width:1420px) {
    .introTypo_wrap { font-size:1.1em;}
    .introTypo .title {font-size:2.6em;}
    .introTypo .text02 {font-size:1.2em;}
    .intro_wrap .intro_con .intro_dl {font-size:1.2em;}
    .intro_wrap .intro_con .intro_dl > dt .title02 {  font-size:1.9em; }
    .intro_wrap .intro_con .intro_dl > dd { font-size:1.05em;}
}
@media (max-width:1280px) {
    .introTypo_wrap { font-size:1.1em;}
    .introTop_img { max-width:inherit !important; width:110%; margin-left:-5%; }
    .introTypo .title {font-size:2.4em;}
    .introTypo .text02 {font-size:1.15em;}
    .intro_wrap .intro_con .intro_dl {font-size:1.15em;}
    .intro_wrap .intro_con .intro_dl > dt .title02 {  font-size:1.7em; }
    .intro_wrap .intro_con .intro_dl > dd { font-size:1.05em;}
}
@media (max-width:1024px) {
    .introTypo_wrap { font-size:1.05em;}
    .introTop_img { width:120%; margin-left:-10%; }
    .introTypo .title {font-size:2.2em;}
    .introTypo .text02 {font-size:1.1em;}
    .intro_wrap .intro_con .intro_dl {font-size:1.1em;}
    .intro_wrap .intro_con .intro_dl > dt .title02 {  font-size:1.5em; }
    .intro_wrap .intro_con .intro_dl > dd { font-size:1em;}

}
@media (max-width:768px) {
    .introTop_img { width:130%; margin-left:-15%; }
    .introTypo .title {font-size:1.8em;}
    .introTypo .text02 {font-size:1.05em;}

    .intro_wrap .intro_con { flex-direction:column;}
    .intro_wrap .img { max-width:640px; width:100%; }
    .intro_wrap .intro_con .intro_dl {width:100%; font-size:1.15em; line-height:1.4; margin-bottom:1.5em;}
    .intro_wrap .intro_con .intro_dl > dt .title02 { font-size:1.5em; }
    .intro_wrap .intro_con .intro_dl > dd { font-size:1.05em;}
    .intro_wrap .intro_con:nth-child(2n+1) .intro_dl { order:1;}
    .intro_wrap .intro_con:nth-child(2n+1) .img { order:2;}
    .intro_wrap .intro_con:not(:last-child) { margin-bottom:4em;}
}

@media (max-width:520px) {
    .introTypo { padding-bottom:10%;}
    .introTypo .title {font-size:1.5em;}
    .introTypo .text02 {font-size:1.0em;}
    .introTop_img { width:150%; margin-left:-25%; }
    .intro_wrap .intro_con .intro_dl > dd  br { display:none;}
}

.goods_warpper {max-width:1400px; width:100%; margin:0 auto;}
.goods_desc_contents { max-width:1260px; margin:0 auto; padding:20px 0;}

.serviceTitle { position:relative; font-size:2em; padding:1.6em 0; text-align:center; font-weight:700; color:#202020;}
.serviceTitle::after {position:absolute; display:block; content:""; width:2.6em; height:3px; background:#066754; left:50%; bottom:0; transform:translateX(-50%);}

.service_section { font-size:1.142857142857em; line-height:1.5;}
.service_section .title1 { font-size:1.375em; font-weight:500;}

.info_wrpper .introTypo { padding-bottom:6%;}
.infoList_01 { max-width:1280px; width:100%; display:flex; justify-content: space-around; margin:0 auto;}
.infoList_01 > li {position:relative; width:25%;}
.infoList_01 > li:not(:last-child)::before { position:absolute; content:""; width:24px; height:24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-right' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23555555' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M9 6l6 6l-6 6'%3E%3C/path%3E%3C/svg%3E") center center no-repeat; background-size:contain !important; right:0; top:50%; transform:translate(50%,-50%); z-index:2;}
.infoList_01 > li .infoList_01_con {font-size:1.42857142857em; line-height:1.5; color:#323232; text-align:center; width:12em; height:12em; background:#f8f8f8; border-radius:50%; padding-top:4em; box-sizing:border-box; margin:0 auto;}
.infoList_01 > li .num {font-family: 'Poppins', sans-serif; font-size:1.4em; font-weight:700; color:#066754;}

.infoList_02 { margin:8% 0; font-size:1.2857142857em; line-height:1.6;}
.infoList_02 > dt { font-size:1.2222222em; color:#066754; font-weight:700;}
.infoList_02 > dd { color:#323232; margin:0.5em 0 2.2em;}

.btn_wrap { text-align:center;}
.btn_info { font-size:1.2857142857em; line-height:1.5; padding:1.0em 2.6em; background:#066754; color:#fff; font-weight:600; border-radius:1.8em;}
.btn_info svg { stroke-width:2.5; vertical-align:middle; margin-left:0.5em;}

@media(max-width:1280px) {
    .serviceTitle { font-size:1.8em; padding:1.4em 0;}
    .service_section { font-size:1.1em; }
    .service_section .title1 { font-size:1.3em;}

    .infoList_01 > li .infoList_01_con {font-size:1.35em; width:10em; height:10em; padding-top:3em;}
    .infoList_01 > li .num {font-size:1.3em;}

    .infoList_02 { font-size:1.2em; }
    .infoList_02 > dd {  margin:0.4em 0 2.0em;}
    .btn_info { font-size:1.2em; margin-top:3em;}
}

@media(max-width:1024px) {
    .info_wrpper .introTypo { padding-bottom:4%;}
    .serviceTitle { font-size:1.6em; padding:1.4em 0;}
    .service_section { font-size:1.05em; }
    .service_section .title1 { font-size:1.25em;}

    .infoList_01 > li .infoList_01_con {font-size:1.25em; width:8em; height:8em; padding-top:2em;}
    .infoList_01 > li .num {font-size:1.2em;}

    .infoList_02 { font-size:1.15em;  margin: 10% 0; }
    .infoList_02 > dt { font-size:1.2em;}
    .infoList_02 > dd {  margin:0.4em 0 2.0em;}
    .btn_info { font-size:1.15em;}
}
@media (max-width:620px) {
    .infoList_01 { flex-wrap:wrap;}
    .infoList_01 > li { width:50%;}
    .infoList_01 > li:nth-child(1), .infoList_01 > li:nth-child(2) { margin-bottom:3em}
    .infoList_01 > li:nth-child(2)::before {left:50%; top:auto; bottom:0; transform:translate(-50%,50%) rotate(90deg); margin-bottom:-1.5em;}
    .infoList_01 > li:nth-child(3) {order:4;}
    .infoList_01 > li:nth-child(3)::before {left:0; transform:translate(-50%,-50%) rotate(180deg);}
    .infoList_01 > li:nth-child(4) {order:3;}

}

.goods_list {font-size:13px; *zoom:1; }


/* 2025.03.25 gcs ksm : #25678 상품사진 가로세로 동일비율로 강제 지정 [item_img_area img : goods_list_style1.html]    [ goodsDisplayImage : goods_infor_style_1.html] 에서 적용 */
.item_img_area img, .goodsDisplayImage {
    width: 100%;  /* 가로 크기 100%로 설정 */
    height: auto; /* 높이는 자동으로 설정되지만, 아래처럼 고정 비율을 적용할 수 있음 */
    aspect-ratio: 1; /* 가로와 세로 비율을 1:1로 강제 */
}

/* =============================================
   횡성 8대 명품 마퀴 슬라이딩 섹션
   (Figma node 446:1730 / 홍천몰 .hc-brand5 마퀴 방식 이식)
   ============================================= */
.brand8_wrap { overflow: hidden; }
/* 좌우 컨테이너 폭은 사이트 공통 .resp_wrap을 쓰지 않고, .cat-best__box/.footer_inner와 동일한
   "자체 max-width + 고정 패딩" 방식으로 통일한다(브레이크포인트별 재조정 불필요, 풀블리드 래퍼 밑에서도 그대로 사용 가능) */
.brand8_head { display: flex; align-items: center; margin: 0 0 24px; }
.brand8_wrap .brand8_head { max-width: 1440px; margin: 0 auto 24px; padding: 0 20px; box-sizing: border-box; }
.brand8_tit {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #222;
    letter-spacing: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.brand8_tit .point { color: #0f61ab; }
.brand8_tit svg { flex-shrink: 0; color: #161616; }
.brand8_mq { overflow: hidden; }
.brand8_belt {
    display: inline-flex;
    animation: brand8-slide 40s linear infinite;
}
.brand8_mq:hover .brand8_belt { animation-play-state: paused; }
.brand8_card {
    position: relative;
    width: 440px;
    height: 250px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
}
.brand8_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.brand8_card:hover img { transform: scale(1.05); }
.brand8_card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
    pointer-events: none;
}
/* 밝은 배경 사진(꿀/쌀 등)은 텍스트 대비를 위한 그라디언트를 더 옅게 (Figma 카드1/8) */
.brand8_card--light::after {
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 60%);
}
.brand8_name {
    position: absolute;
    bottom: 32px;
    left: 32px;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.6;
    z-index: 1;
}
@keyframes brand8-slide {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .brand8_belt { animation: none; }
}
@media only screen and (max-width: 1520px) {
    .brand8_card { width: 380px; height: 216px; }
    .brand8_name { font-size: 26px; bottom: 28px; left: 28px; }
}
@media only screen and (max-width: 1023px) {
    .brand8_tit { font-size: 28px; }
    .brand8_card { width: 320px; height: 200px; }
    .brand8_name { font-size: 22px; bottom: 20px; left: 20px; }
}
@media only screen and (max-width: 767px) {
    .brand8_head { margin-bottom: 16px; }
    .brand8_tit { font-size: 22px; }
    .brand8_tit svg { width: 20px; height: 20px; }
    .brand8_card { width: 250px; height: 140px; }
    .brand8_name { font-size: 16px; bottom: 14px; left: 14px; }
}

/* =============================================
   카테고리별 BEST (탭 + 스와이프)
   (Figma node 446:1785 / 홍천몰 .cat-best 탭·스와이프 방식 이식)
   ============================================= */
/* 더보기 버튼 */
.btn-more-main-wrap { margin-top: 60px; display: flex; justify-content: center; }
.btn-more-main-wrap .btn-more-main { width: 280px; }
.btn-more-main { width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; gap: 10px; background: #f8f8f8; border: 1px solid rgba(0,0,0,0.2); border-radius: 50px; color: #222; text-decoration: none; font-size: 18px; font-weight: 500; transition: all 0.3s ease; }
.btn-more-main:hover { background: #0f61ab; border-color: #0f61ab; color: #fff; }
.btn-more-main:hover .btn-more-main__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6936 9.63713L8.23836 12.9071C7.98025 13.1594 7.98025 13.5665 8.23836 13.8108C8.5049 14.0631 8.93569 14.0631 9.19321 13.8108L13.7947 9.44751C14.0618 9.20322 14.0618 8.79664 13.7947 8.55292L9.19321 4.18962C8.93509 3.93679 8.5049 3.93679 8.23836 4.18962C7.98025 4.43391 7.98025 4.84049 8.23836 5.08421L11.6936 8.36215L0 8.36216C0.32759 3.68925 4.22685 0 8.98884 0C13.9655 0 18 4.02944 18 9C18 13.9706 13.9655 18 8.98884 18C4.22685 18 0.32759 14.3107 0 9.63784L11.6936 9.63713Z' fill='%23fff'/%3E%3C/svg%3E"); }
.btn-more-main:focus-visible { outline: 2px dashed #0f61ab; outline-offset: 3px; }
.btn-more-main__ico { width: 18px; height: 18px; flex-shrink: 0; display: block; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6936 9.63713L8.23836 12.9071C7.98025 13.1594 7.98025 13.5665 8.23836 13.8108C8.5049 14.0631 8.93569 14.0631 9.19321 13.8108L13.7947 9.44751C14.0618 9.20322 14.0618 8.79664 13.7947 8.55292L9.19321 4.18962C8.93509 3.93679 8.5049 3.93679 8.23836 4.18962C7.98025 4.43391 7.98025 4.84049 8.23836 5.08421L11.6936 8.36215L0 8.36216C0.32759 3.68925 4.22685 0 8.98884 0C13.9655 0 18 4.02944 18 9C18 13.9706 13.9655 18 8.98884 18C4.22685 18 0.32759 14.3107 0 9.63784L11.6936 9.63713Z' fill='%23222'/%3E%3C/svg%3E") no-repeat center/contain; }

.cat-best { }
.cat-best__box { max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.cat-best__img-wrap { width: 91px; height: 91px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 30px; transition: background 0.3s ease; }
.cat-best__tab-ico { width: 60px; height: 60px; object-fit: contain; }
.cat-best__tab-swiper { margin-bottom: 40px; overflow: hidden; position: relative; }
.cat-best__tab-list { padding: 0; display: flex; justify-content: space-between; flex-wrap: nowrap; list-style: none; }
.cat-best__tab-list li.swiper-slide { width: auto; flex-shrink: 0; margin-right: 16px; }
.cat-best__tab-btn { padding: 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: transparent !important; border: none; color: #222; transition: all 0.3s ease; font-size: 17px; font-weight: 400; cursor: pointer; white-space: nowrap; position: relative; z-index: 2; }
.cat-best__tab-btn[aria-selected=true], .cat-best__tab-btn.active { color: #000; font-size: 17px; font-weight: 700; }
.cat-best__tab-btn[aria-selected=true] .cat-best__img-wrap, .cat-best__tab-btn.active .cat-best__img-wrap { background: rgba(15,97,171,0.1); }
.cat-best__swiper { padding: 0 20px; position: relative; }
.cat-best .btn-more-main-wrap { padding: 0 20px; }
/* 짧은 설명은 신상품 섹션 전용 — style_4 스킨을 공유하는 BEST 진열에서는 숨김 */
.cat-best .displaY_goods_short_desc { display: none; }

/* 탭 패널 공통 */
.tab__panel { display: none; }
.tab__panel.active { display: block; }

@media only screen and (max-width: 1199px) {
    .cat-best { margin: 60px 0; }
    .cat-best__img-wrap { width: 76px; height: 76px; border-radius: 26px; }
    .cat-best__tab-ico { width: 50px; height: 50px; }
    .cat-best__tab-btn { font-size: 15px; }
    .cat-best__tab-btn[aria-selected=true], .cat-best__tab-btn.active { font-size: 15px; }
    .cat-best__tab-swiper { margin-bottom: 30px; }
    .btn-more-main-wrap { margin-top: 48px; }
}
@media only screen and (max-width: 767px) {
    .cat-best { margin: 40px 0; }
    .cat-best__img-wrap { width: 56px; height: 56px; border-radius: 18px; }
    .cat-best__tab-ico { width: 36px; height: 36px; }
    .cat-best__tab-btn { padding: 8px 10px; gap: 8px; font-size: 13px; }
    .cat-best__tab-btn[aria-selected=true], .cat-best__tab-btn.active { font-size: 13px; }
    .cat-best__tab-list li.swiper-slide { margin-right: 10px; }
    .cat-best__tab-swiper { margin-bottom: 20px; }
    .cat-best__swiper { padding: 0; }
    .btn-more-main { height: 45px; font-size: 14px; }
    .btn-more-main-wrap .btn-more-main { width: 100%; }
    .btn-more-main-wrap { margin-top: 36px; }
}

/* =============================================
   바로가기 (입점문의 / 자주 묻는 질문 / 공지사항)
   (Figma node 446:1903 — 데스크탑, node 515:6758 — 태블릿/모바일)
   ◆ 배경은 Figma 원본 SVG(Subtract 모양)를 data URI로 그대로 사용 — 근사치 계산 없이 정확한 모양.
     호버는 fill 색상만 바꾼 두 번째 data URI로 통째로 교체.
   ============================================= */
.quick_wrap { display: flex; gap: 30px; }
.quick_card {
    position: relative;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
    text-decoration: none;
    background: none;
    z-index: 1;
}
.quick_card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 20px 70px 70px 20px;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='466' height='245' viewBox='0 0 466 245' fill='none'%3E%3Cpath d='M456 0C461.523 0 466 4.47715 466 10V180C466 185.523 461.523 190 456 190H446C426.118 190 410 206.118 410 226V235C410 240.523 405.523 245 400 245H10C4.47715 245 0 240.523 0 235V10C0 4.47715 4.47715 0 10 0H456Z' fill='%23F5F5F5'/%3E%3C/svg%3E") 20 70 70 20 fill;
}
.quick_card:hover .quick_tit{color: #E72E35;}
.quick_ico, .quick_text, .quick_arrow { position: relative; }
.quick_ico { width: 110px; height: 110px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick_ico img { width: 60px; height: 50px; }
.quick_text { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.quick_tit { font-family: 'Pretendard', sans-serif; font-size: 22px; font-weight: 700; color: #222; letter-spacing: -0.4px; }
.quick_desc { font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 400; color: rgba(0,0,0,0.6); line-height: 1.4; letter-spacing: -0.4px; }
.quick_arrow { position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 41 41' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M40.5 20.5C40.5 26.0228 38.2614 31.0228 34.6421 34.6421C31.0228 38.2614 26.0228 40.5 20.5 40.5C14.9772 40.5 9.97715 38.2614 6.35786 34.6421C2.73858 31.0228 0.5 26.0228 0.5 20.5C0.5 14.9772 2.73858 9.97715 6.35786 6.35786C9.97715 2.73858 14.9772 0.5 20.5 0.5C26.0228 0.5 31.0228 2.73858 34.6421 6.35786C38.2614 9.97715 40.5 14.9772 40.5 20.5Z' stroke='%23161616' stroke-opacity='0.2'/%3E%3Cpath d='M19 25.5L24 20.5L19 15.5' stroke='%23161616' stroke-opacity='0.8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; }
.quick_card:hover .quick_arrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 41 41' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M40.5 20.5C40.5 26.0228 38.2614 31.0228 34.6421 34.6421C31.0228 38.2614 26.0228 40.5 20.5 40.5C14.9772 40.5 9.97715 38.2614 6.35786 34.6421C2.73858 31.0228 0.5 26.0228 0.5 20.5C0.5 14.9772 2.73858 9.97715 6.35786 6.35786C9.97715 2.73858 14.9772 0.5 20.5 0.5C26.0228 0.5 31.0228 2.73858 34.6421 6.35786C38.2614 9.97715 40.5 14.9772 40.5 20.5Z' stroke='%23E72E35' stroke-opacity='1'/%3E%3Cpath d='M19 25.5L24 20.5L19 15.5' stroke='%23E72E35' stroke-opacity='1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.quick_arrow svg { display: none; }

/* 태블릿~모바일 (node 515:6758) — 세로형 카드 → 가로형 카드로 전환 (Subtract 327x90 모양 사용) */
@media only screen and (max-width: 1023px) {
    .quick_wrap { flex-direction: column; gap: 12px; }
    .quick_card {
        flex-direction: row; align-items: center; gap: 20px; padding: 20px 20px 20px 30px;
        background: none;
    }
    .quick_card::before {
        border-width: 20px 50px 50px 20px;
        border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='327' height='90' viewBox='0 0 327 90' fill='none'%3E%3Cpath d='M317 0C322.523 0 327 4.47715 327 10V45.5342C327 51.057 322.523 55.5342 317 55.5342H311C299.954 55.5342 291 64.4886 291 75.5342V80C291 85.5229 286.523 90 281 90H10C4.47716 90 4.02674e-08 85.5228 0 80V10C0 4.47715 4.47715 1.18865e-07 10 0H317Z' fill='%23F5F5F5'/%3E%3C/svg%3E") 20 50 50 20 fill;
    }
    .quick_card:hover::before {
        border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='327' height='90' viewBox='0 0 327 90' fill='none'%3E%3Cpath d='M317 0C322.523 0 327 4.47715 327 10V45.5342C327 51.057 322.523 55.5342 317 55.5342H311C299.954 55.5342 291 64.4886 291 75.5342V80C291 85.5229 286.523 90 281 90H10C4.47716 90 4.02674e-08 85.5228 0 80V10C0 4.47715 4.47715 1.18865e-07 10 0H317Z' fill='%23EAF1F8'/%3E%3C/svg%3E") 20 50 50 20 fill;
    }
    .quick_ico { width: 60px; height: 60px; }
    .quick_ico img { width: 34px; height: 34px; }
    .quick_text { align-items: flex-start; text-align: left; gap: 6px; }
    .quick_tit { font-size: 18px; }
    .quick_desc { font-size: 12px; }
    .quick_arrow { width: 24px; height: 24px; }
}


/* =============================================
   안흥찐빵 모음전 프로모 스와이프 섹션
   (Figma node 446:2244 PC / 510:7191 모바일 — resp_wrap 밖 풀블리드)
   상품 스와이프 목록은 _modules/display/goods_display_sizeswipe.html(PC) /
   goods_display_mobile_sizeswipe.html(모바일) 서버 모듈이 렌더링 — 두 파일 모두
   구조 변경 없이 여기서 클래스만 스코프해서 스타일링한다.
   ============================================= */
.promo-swipe { display:flex; align-items:stretch; width:100%; background:#f9f7f4; overflow:hidden; }

/* 좌측(PC)/상단(모바일) 프로모 배너 — jjinppang-promo-bg.png(700x793) 원본 비율 그대로 사용해 크롭 없앰
   너비를 700px로 고정하면 1280px 초과 시 520px→700px로 확 튀어서(특히 1366/1440 같은 흔한 노트북 폭에서)
   배너가 과하게 커 보이므로, clamp로 화면폭에 비례해 완만하게 커지다 700px에서 멈추게 한다.
   높이는 aspect-ratio로 고정하지 않고 align-items:stretch로 옆 콘텐츠(상품 카드+스와이프) 높이에 맞춰
   꽉 채운다 — aspect-ratio를 쓰면 배너 자체 비율로만 높이가 정해져서, 콘텐츠가 더 길 때 배너 밑에
   배경색 여백이 남는 문제가 있었음(이미지는 object-fit:cover라 비율이 달라져도 크롭될 뿐 안 찌그러짐). */
.promo-swipe__banner { position:relative; width:clamp(662px, 36vw, 700px); flex-shrink:0; overflow:hidden; }
.promo-swipe__banner::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.2) 28%, rgba(0,0,0,0) 47%); }
.promo-swipe__banner-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 배너 위 텍스트+버튼 오버레이 (Figma node 446:2250 — PC/모바일 공통, 위치·크기만 다름) */
.promo-swipe__banner-content { display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; top:calc(50% - 86px); transform:translate(-50%,-50%); z-index:2; text-align:center; }
.promo-swipe__logo { display:block; width:270px; height:auto; }
.promo-swipe__banner-tit { margin:16px 0 0; color:#fff; font-size:26px; font-weight:600; }
.promo-swipe__cta { display:inline-flex; align-items:center; gap:10px; padding:12px 30px; border-radius:50px; background:rgba(0,0,0,0.1); border:0.5px solid rgba(255,255,255,0.8); color:#fff; font-size:18px; font-weight:500; text-decoration:none; margin-top:24px; transition:background-color .2s ease, border-color .2s ease; }
.promo-swipe__cta:hover { background:rgba(0,0,0,0.3); border-color:#fff; }
.promo-swipe__cta img { width:18px; height:18px; transition:transform .2s ease; }
.promo-swipe__cta:hover img { transform:translateX(3px); }

/* =============================================
   횡성더덕 건강밥상 프로모 스와이프 섹션 (Figma node 446:2293)
   .promo-swipe 구조/CSS를 그대로 재사용하고, 다른 부분만 모디파이어로 오버라이드
   ============================================= */
.promo-swipe--deodeok { background:#f7f4eb; }
.promo-swipe--deodeok .promo-swipe__banner::after { background:rgba(0,0,0,0.1); }
.promo-swipe--deodeok .promo-swipe__banner-content { top:50%; gap:28px; }
.promo-swipe--deodeok .promo-swipe__logo { width:180px; }
.promo-swipe--deodeok .promo-swipe__banner-tit { margin:0; font-size:30px; font-weight:500; }
.promo-swipe--deodeok .promo-swipe__cta { margin-top:0; }

/* 우측(PC)/하단(모바일) 콘텐츠 */
.promo-swipe__content { flex:1; min-width:0; padding:100px 0 100px 120px; }
.promo-swipe__content .brand8_head { max-width:none; margin:0 0 40px; }
.promo-swipe__list { position:relative; }

/* 스와이프 코어(css/common.css .display_slide_class) 오버라이드 — 화살표 숨기고 스크롤바 노출 */
.promo-swipe__list .swiper-button-prev, .promo-swipe__list .swiper-button-next { display:none !important; }
.promo-swipe__list .swiper-container-horizontal .display-scrollbar,
.promo-swipe__list .display-scrollbar { display:block !important; margin-top:20px; max-width:937px; height:4px; left:0; width:100%; background:#e5e7eb; border-radius:2px; position: relative;}
.promo-swipe__list .swiper-slide { padding:0 0 0 24px !important; }
.promo-swipe__list .swiper-slide:first-child { padding-left:0 !important; }
/* 카드 폭 320px(PC)/158px(모바일) — 실서버는 관리자 진열 이미지사이즈 설정으로 결정되지만
   프리뷰는 관리자 설정을 거치지 않으므로 여기서 직접 지정(common.css 기본 190px보다 우선) */
.promo-swipe__list .gl_item { width:320px !important; }
/* 짧은 설명은 신상품 섹션 전용 — style_4 스킨을 공유하는 프로모 스와이프에서는 숨김 */
.promo-swipe .displaY_goods_short_desc { display: none; }

/* PC 카드(goods_info_style_4) 폰트/색상은 goods_info_user.css가 정본 — 여기서 중복 정의하지 않음 */

/* 모바일 카드 (goods_display_mobile_sizeswipe.html 자체 마크업 — gli_image/gli_contents 등)
   이미지 크기는 .gl_item 폭 + goods_info_user.css의 .goodsDisplayImageWrap{aspect-ratio:1/1}가
   이미 처리하므로 여기서 별도 지정하지 않음(진열 요소 스타일은 goods_info_user.css가 정본). */
.promo-swipe__list .goods_brand_area, .promo-swipe__list .goods_provider_name_area { font-size:12px; color:#616161; padding-left:5px; }
.promo-swipe__list .goods_name_area { font-size:15px; color:#111; padding:0 10px 0 5px; }
.promo-swipe__list .goods_sale_price_area .sale_per, .promo-swipe__list .goods_consumer_price_area .sale_per { color:#da120d; font-size:20px; font-weight:700; }
.promo-swipe__list .goods_sale_price_area, .promo-swipe__list .gli_goodsprice { font-size:20px; font-weight:700; color:#111; padding-left:5px; }
.promo-swipe__list .goods_consumer_price_area { font-size:12px; color:#9e9e9e; text-decoration:line-through; padding-left:5px; }

@media (max-width:1280px) {
    .promo-swipe__banner { width:520px; }
    .promo-swipe__content { padding:60px 30px 60px 60px; }
}

@media (max-width:1024px) {
    .promo-swipe { flex-direction:column; }
    /* 컬럼 레이아웃 전용 비율(모바일 Figma 프레임 실측 390:407) — 폭이 유동이어도 비율 유지, 고정 height 금지 */
    .promo-swipe__banner { width:100%; aspect-ratio:390/407; }
    .promo-swipe__content { width:100%; padding:40px 20px; box-sizing:border-box; }
    .promo-swipe__content .brand8_head { margin-bottom:24px; }
}

@media (max-width:768px) {
    .promo-swipe__banner-content { top:50%; }
    .promo-swipe__logo { width:183px; }
    .promo-swipe__banner-tit { margin-top:8px; font-size:20px; }
    .promo-swipe__cta { gap:5px; padding:0 15px; height:48px; font-size:14px; margin-top:8px; }
    .promo-swipe__cta img { width:14px; height:14px; }
    .promo-swipe__content { padding:24px 16px; }
    .promo-swipe__content .brand8_head { margin-bottom:20px; }
    .promo-swipe__list .swiper-slide { padding-left:12px !important; }
    .promo-swipe__list .gl_item { width:158px !important; }
    .promo-swipe--deodeok .promo-swipe__banner-content { gap:16px; }
    .promo-swipe--deodeok .promo-swipe__logo { width:110px; }
    .promo-swipe--deodeok .promo-swipe__banner-tit { font-size:18px; }
    .promo-swipe--deodeok .promo-swipe__cta { margin-top:0; }
    /* PC 카드(goods_info_style_4)의 모바일 폰트 크기는 goods_info_user.css 자체 미디어쿼리
       (max-width:767px, .displaY_sales_percent/.sales_price 등)가 이미 정본으로 처리 —
       여기서 중복 정의하지 않는다. */
}

/* =============================================
   횡성몰 신상품 섹션 (Figma node 446:2335 PC / 510:7478 모바일 — resp_wrap 밖 풀블리드)
   goods_info_style_4 스킨 · 정적 3x2(PC)/2x3(모바일) 그리드 진열
   ============================================= */
/* 좌우 컨테이너 폭은 .cat-best__box/.footer_inner와 동일한 "자체 max-width + 고정 패딩" 방식 —
   사이트 공통 .resp_wrap에 기대지 않고 이 섹션 스스로 감싼다(풀블리드 래퍼 바로 밑이라 감싸줄 resp_wrap이 없음) */
/* 세로 여백은 기존 main_con/brand8_wrap/cat-best가 쓰는 padding:6.8421% 0(퍼센트 top/bottom은
   부모 너비 기준으로 계산되는 CSS 특성을 이용한 fluid spacing)을 따르지 않고, 이 섹션만 고정 px로 명시 */
.new_products_wrap {  }
.new_products_wrap .brand8_head { max-width:1440px; margin:0 auto 24px; padding:0 20px; box-sizing:border-box; }
.new_products_grid { max-width:1440px; margin:0 auto; padding:0 20px; box-sizing:border-box; }

/* goods_info_style.css 코어의 float/negative-margin 방식(.display_responsible_class) 대신
   CSS Grid로 4열/gap을 직접 제어 — li.gl_item 자체 폭/패딩은 무력화한다.
   .display_responsible_class의 코어 margin:0 -12px -30px(li.gl_item의 padding:0 12px 30px와 짝을 이루는
   구식 그리드 상쇄값)는 그 padding을 !important로 지운 이상 짝이 없는 여백이 되어 컨테이너 밖으로 삐져나오므로 0으로 무력화 */
.new_products_grid .display_responsible_class { margin:0; }
.new_products_grid .goods_list.goods_info_style_4 { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:24px; row-gap:60px; margin-left:0; }
.new_products_grid .goods_list.goods_info_style_4 li.gl_item { box-sizing:border-box; width:auto !important; padding:0 !important; }

/* 카드 이미지 — goods_info_style_4 정본 그대로(1:1 정방형, goods_info_user.css .goodsDisplayImageWrap)
   사용. 여기서 별도 비율/높이 오버라이드를 두지 않는다(사이트 어디서 style_4를 쓰든 이미지 비율이 동일해야 함). */

@media (max-width:1023px) {
    .new_products_grid .goods_list.goods_info_style_4 { grid-template-columns:repeat(2, 1fr); column-gap:16px; row-gap:40px; }
}

@media (max-width:767px) {
    .new_products_wrap .brand8_head { margin-bottom:20px; }
    .new_products_grid .goods_list.goods_info_style_4 { grid-template-columns:repeat(2, 1fr); column-gap:12px; row-gap:30px; }
}

/* =============================================
   # PLUS 장보기 섹션 (Figma node 446:2402 PC / 518:7164 모바일)
   탭 4개(간편한끼/농산품/수산물/고소한 간식) — 상품 스킨 goods_info_style_6
   탭 전환은 .js-tab/.js-tab-btn/.js-tab-panel 공용 로직(카테고리별 BEST와 동일) 재사용
   ============================================= */
.plus-grocery { background:#ecf4fd; padding:150px 0; }
.plus-grocery__box { max-width:1440px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.plus-grocery__box .brand8_head { margin:0 0 24px; }

.plus-grocery__tabs { display:flex; gap:6px; margin-bottom:24px; }
.plus-grocery__tab-btn { padding:10px 20px; border-radius:60px; border:1px solid #ddd; background:#fff; color:#222; font-size:20px; font-weight:400; cursor:pointer; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.plus-grocery__tab-btn.active { background:#0f61ab; border-color:#0f61ab; color:#fff; font-weight:500; }

/* goods_info_style.css 코어의 float/negative-margin 방식(.display_responsible_class) 대신
   CSS Grid로 6열/gap을 직접 제어 — li.gl_item 자체 폭/패딩은 무력화한다.
   이미지 비율/폰트는 goods_info_style_6 정본(goods_info_user.css)을 그대로 따르고 여기서 오버라이드하지 않는다.
   .display_responsible_class의 코어 margin:0 -12px -30px(li.gl_item의 padding:0 12px 30px와 짝을 이루는
   구식 그리드 상쇄값)는 그 padding을 !important로 지운 이상 짝이 없는 여백이 되어 좌우로 튀어나오고 아래도
   -30px만큼 다음 요소와 겹치므로 0으로 무력화 */
.plus-grocery__grid .display_responsible_class { margin:0; }
.plus-grocery__grid .goods_list.goods_info_style_6 { display:grid; grid-template-columns:repeat(6, 1fr); column-gap:24px; row-gap:100px; margin-left:0; }
.plus-grocery__grid .goods_list.goods_info_style_6 li.gl_item { box-sizing:border-box; width:auto !important; padding:0 !important; }

@media (max-width:1200px) {
    .plus-grocery__grid .goods_list.goods_info_style_6 { grid-template-columns:repeat(3, 1fr); column-gap:16px; row-gap:60px; }
}

@media (max-width:1023px) {
    .plus-grocery { padding:100px 0; }
}

@media (max-width:767px) {
    .plus-grocery { padding:40px 0; }
    .plus-grocery__box { padding:0 16px; }
    .plus-grocery__box .brand8_head { margin-bottom:20px; }
    .plus-grocery__tabs { gap:2px; margin-bottom:20px; }
    .plus-grocery__tab-btn { padding:10px 15px; font-size:14px; }
    .plus-grocery__grid .goods_list.goods_info_style_6 { grid-template-columns:repeat(2, 1fr); column-gap:12px; row-gap:30px; }
}

/* =============================================
   우측 퀵메뉴 (Figma node 538:5951 quick-menu / 540:6285 m_quick menu)
   횡성고향사랑기부제 / 어사매장터 / 횡성여행 / TOP — 4개 버튼 세로 스택
   PC: 화면 우측 중앙 고정, 라벨 포함 / 모바일: 화면 우하단 고정, 아이콘만(라벨 없음)
   ============================================= */
.quick-menu {
    position: fixed;
    right: 24px;
    bottom: 50px;
    z-index: 120;
}
.quick-menu__mobile {
    display: none;
}

/* ---- PC ---- */
.quick-menu__pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.quick-menu__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 69px;
    height: 69px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}
.quick-menu__item--gohyang {
    gap: 5px;
    border: 1.5px solid #004cce;
}
.quick-menu__item--gohyang .quick-menu__icon {
    width: 24px;
    height: 23px;
}
.quick-menu__item--asamae {
    border: 1.5px solid #076c3a;
    padding: 6px;
}
.quick-menu__item--tour {
    gap: 7px;
    background: #1ba035;
}
.quick-menu__item--tour .quick-menu__icon {
    width: 24px;
    height: 17px;
}
.quick-menu__logo {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
}
.quick-menu__label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 11px;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
}
.quick-menu__item--gohyang .quick-menu__label {
    color: #002c77;
}
.quick-menu__item--tour .quick-menu__label {
    color: #fff;
}
.quick-menu__top {
    display: block;
    width: 61px;
    height: 61px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.quick-menu__top img {
    width: 100%;
    height: 100%;
}

/* ---- 모바일 (≤767px) ---- */
@media only screen and (max-width: 767px) {
    .quick-menu {
        top: auto;
        bottom: 20px;
        right: 10px;
        transform: none;
    }
    .quick-menu__pc {
        display: none;
    }
    .quick-menu__mobile {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }
    .quick-menu__m-item,
    .quick-menu__m-top {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        padding: 0;
        cursor: pointer;
    }
    .quick-menu__m-item {
        border-radius: 15px;
        background: #fff;
    }
    .quick-menu__m-item--gohyang {
        border: 1px solid #004cce;
    }
    .quick-menu__m-item--asamae {
        border: 1px solid #076c3a;
    }
    .quick-menu__m-item--tour {
        background: #1ba035;
    }
    .quick-menu__m-top {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 100px;
        background: #fff;
    }
    .quick-menu__m-icon {
        width: 24px;
        height: 23px;
    }
    .quick-menu__m-item--asamae .quick-menu__m-icon {
        width: 32px;
        height: 29px;
    }
    .quick-menu__m-item--tour .quick-menu__m-icon {
        width: 24px;
        height: 17px;
    }
    .quick-menu__m-icon--top {
        width: 13px;
        height: 20px;
    }
}

/* =============================================
   메인 페이지 최상위 섹션 간 공통 간격 (PC 150 / 태블릿 100 / 모바일 60)
   각 섹션 자체의 내부 padding/margin과는 별개로, 섹션과 섹션 "사이"를 항상 이 값만큼 띄운다.
   .main_con은 banner01_wrap/banner02_wrap/tour_wrap 등 main_con을 쓰는 모든 섹션에 공통 적용된다.
   안흥찐빵+횡성더덕 promo-swipe 두 개는 서로 붙어야 하므로 .promo-swipe-group으로 함께 감싼 뒤 그룹 단위로 적용.
   파일 맨 끝에 두는 이유 — .cat-best 등 각 컴포넌트 자체 규칙이 margin 단축 속성(margin: 6.8421% 0 등)을
   쓰고 있어서, 이 규칙이 그보다 먼저 오면 캐스케이드에서 margin-bottom이 덮어써진다.
   ============================================= */
.main_slider,
.brand8_wrap,
.cat-best,
.main_con,
.promo-swipe-group,
.new_products_wrap {
    margin-bottom: 150px;
}
@media only screen and (max-width: 1023px) {
    .main_slider,
    .brand8_wrap,
    .cat-best,
    .main_con,
    .promo-swipe-group,
    .new_products_wrap {
        margin-bottom: 100px;
    }
}
@media only screen and (max-width: 767px) {
    .main_slider,
    .brand8_wrap,
    .cat-best,
    .main_con,
    .promo-swipe-group,
    .new_products_wrap{
        margin-bottom: 60px;
    }
}

.respCategoryList .categoryDepth1:last-child{
    display: none;
}