/* BASIC css start */ :root { --main-color:#da2128; --base-color:#ffffff; --blue-color:#0071e3; --font-color-base:#000; --font-color-heading:#000; --font-color-primary:#da2128; --font-color-secondary:#ef441f; --font-color-warn:#ec2a1d; --font-color-success:#0985df; --swiper-theme-color: #da2128; --swiper-navigation-size: calc(1rem + 0.35vw); } html,body { width: 100%; } body { min-width: 1400px; } body, h1, h2, h3, h4, h5, h6, table, pre, xmp, plaintext, listing, input, textarea, select, button, a {/* font-family: "Pretendard Variable", Pretendard, Dotum, "돋움", DotumChe, "돋움체", Verdana, monospace, Corbel, AppleGothic, Helvetica, sans-serif;*/ } :is(#top_banner,#head_top,#header) :is(*) { font-family: "Pretendard Variable", Pretendard, sans-serif; box-sizing:border-box } #top_banner { display: flex; align-items: center; justify-content: space-between; position: relative; } #top_banner p { text-align: center; font-size:16px; font-weight:500; } #top_banner a.ban_close { position: absolute; top: 50%; transform: translate(630px,-50%); right: 50%; } #top_banner a.ban_close img { } #top_banner a.tb-left { width:50%; background-color: #0088b4; text-align:right;} #top_banner a.tb-right { width:50%; background-color: #f6cb00; text-align:left;} #top_banner a > div { padding:10px 30px; } #top_banner a.tb-left > div * { color:#fff; } #top_banner a.tb-right > div * { color:#121212; } #top_banner a > div h4, #top_banner a > div h5 { font-weight:300; } /* header-banner */ .header_banner {background: #d5d5d5; position: relative; display: flex; justify-content:space-between; width: 100%; } .header_banner > div{width: 100%; margin: 0 auto; font-size:0;position: relative; } .header_banner a{ } .header_banner img{width: 50%; } .header_banner .banner_close {position: absolute; top: 50%; transform: translateY(-50%); right: 40px; } .header_banner .banner_close span {display: block; width: 30px; height: 2px; background: #525153; border-radius: 5px; } .header_banner .banner_close span:first-child {transform: rotate(45deg);} .header_banner .banner_close span:last-child {transform: rotate(-45deg) translate(2px,-1px);} .head_inner { width: 1260px; margin: 0 auto; } #head_top { background-color: #fff; width: 100%; border-bottom: 1px solid #bebebe; } #head_top .head_inner { display: flex; align-items: center; justify-content: space-between; padding: 25px 0 10px; } #head_top .head_inner h1.logo { max-width:210px; padding-bottom: 15px;} #head_top .head_inner h1.logo a { display: block; } #head_top .head_inner h1.logo a img { } /* 헤더 서치 영역 */ #head_top .head_inner .search { position:relative; width: 100%; } #head_top .head_inner .search { border:2px solid #000; padding:0px 20px; border-radius:50px; } #head_top .head_inner .search fieldset { position:relative; transition: all .5s; width: 100%; } #head_top .head_inner .search fieldset input { background:none !important; border:none; width:500px; padding-right:5px; height:45px; font-size: 16px; font-weight:500; padding-left:10px } #head_top .head_inner .search fieldset .search_icon { display:inline-block } #head_top .head_inner .search fieldset input::placeholder { color: #ababab; font-size: 16px; font-weight:500; font-family: "Pretendard Variable", Pretendard, sans-serif; } #head_top .head_inner ul.user_icon { display: flex; align-items: flex-end; gap: 20px 30px; padding-bottom: 15px;} #head_top .head_inner ul.user_icon li {text-align:center; margin:0 auto; } #head_top .head_inner ul.user_icon li a { } #head_top .head_inner ul.user_icon li a img, #head_top .head_inner ul.user_icon li a svg { width:33px; } #head_top .head_inner ul.user_icon li a:has(span) { position: relative; display: block; } #head_top .head_inner ul.user_icon li a:has(span) span { background-color: var(--main-color); color: #fff; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; font-size: 14px; font-weight: 500; border-radius: 50%; display: flex; align-items: center; justify-content: center; } #head_top .head_inner ul.user_icon li a p.name { color: #222; position: relative; width: 100%; font-size: 13px; font-weight: 500; text-align:center; margin:8px auto 0 auto; } #header { z-index: 50; position: sticky; top: 0; border-bottom: 1px solid #bebebe; background-color: #fff; -webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05); } #header .head_inner { display: flex; align-items: center; justify-content: space-between; position: relative; } #header .head_inner .ham_wrap { cursor: pointer; display: flex; transition: all .3s; border: 2px solid var(--main-color); align-items: center; gap: 20px; width: 200px; background-color: var(--main-color); padding: 20px;} #header .head_inner .ham_wrap.clicked { background-color: #fff; } #header .head_inner .ham_wrap .ham { } #header .head_inner .ham_wrap .ham a { } #header .head_inner .ham_wrap .ham a { width: 20px; height: 16px; display: block; position: relative; transition: all .3s; } #header .head_inner .ham_wrap .ham a span { position: absolute; left: 0; width: 100%; height: 2px; transform-origin: center center; background-color: #fff; border-radius: 4px; transition: all .3s; } #header .head_inner .ham_wrap.clicked .ham a span { background-color: var(--main-color); } #header .head_inner .ham_wrap .ham a span:nth-of-type(1) { top: 0; transform-origin: left center; } #header .head_inner .ham_wrap .ham a span:nth-of-type(2) { top: 7px; } #header .head_inner .ham_wrap .ham a span:nth-of-type(3) { bottom: 0; transform-origin: left center; } #header .head_inner .ham_wrap .ham a.active-1 span:nth-of-type(1) { transform : rotate(45deg); -webkit-transform:rotate(45deg) } #header .head_inner .ham_wrap .ham a.active-1 span:nth-of-type(2) { left : 200%; opacity : 0; -webkit-animation : active-menu-bar06 .8s forwards; animation : active-menu-bar06 .8s forwards; } #header .head_inner .ham_wrap .ham a.active-1 span:nth-of-type(3) { transform : rotate(-45deg); -webkit-transform : rotate(-45deg); } @-webkit-keyframes active-menu-bar06 { 100% { height : 0; } } @keyframes active-menu-bar06 { 100% { height : 0; } } #header .head_inner .ham_wrap p { color: #fff; font-size: 16px; transition: all .3s; font-weight: 600; } #header .head_inner .ham_wrap.clicked p { color: var(--main-color); } #header .head_inner ul.etc_m { display: flex; align-items: center; flex-grow: 1; padding-left: 30px; gap: 25px; } #header .head_inner ul.etc_m li { } #header .head_inner ul.etc_m li a { color: #161616; font-size: 16px; font-weight: 600; transition: color .1s; letter-spacing:-.5px; } #header .head_inner ul.etc_m li a:hover { color: var(--main-color); } #header .head_inner ul.etc_m li a img { display:inline-block; width:30px; height:auto; margin-right:3px; } #header .head_inner ul.user_m { display: flex; align-items: center; } #header .head_inner ul.user_m li { margin-left: 20px; position: relative; } #header .head_inner ul.user_m li::before { content: ""; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: #dddddd; width: 1px; height: 11px; } #header .head_inner ul.user_m li:first-child::before { display: none; } #header .head_inner ul.user_m li a { color: #777777; font-size: 14px; font-weight: 500; padding-left: 20px; display: block; transition: color .1s; } #header .head_inner ul.user_m li a:hover { color: #000; } #header.set .head_inner nav { display: block; border-top: 0px solid #fff; } #header .head_inner nav { position: absolute; left: 0; top: 100%; display: none; } #header .head_inner nav.clicked { display: block; } #header .head_inner nav ul.main_m { height:calc(100vh); max-height:651px; overflow-y: auto; background-color: var(--base-color); padding:10px 0; border: 1px solid #bebebe; -webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05); } #header .head_inner nav ul.main_m>li { } #header .head_inner nav ul.main_m>li:hover>a { background-color: #fff; color: var(--main-color); } #header .head_inner nav ul.main_m>li>a { font-size: 16px; font-weight: 600; display: block; width: 200px; background-color: var(--base-color); color: #111; padding: 10px 10px 10px 20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px;} #header .head_inner nav ul.main_m>li .side_menu { padding:10px 0; border:1px solid #bebebe; background-color: #fff; padding-left: 5px; display: none; position: absolute; left: 200px; top: 0; min-height: 500px; height:calc(100vh); max-height:651px; } #header .head_inner nav ul.main_m>li .side_menu ul.sub_m { background-color: #fff; height:500px; overflow-y: auto; } #header .head_inner nav ul.main_m>li .side_menu ul.sub_m>li { } #header .head_inner nav ul.main_m>li .side_menu ul.sub_m>li:hover>a { color: var(--main-color); } #header .head_inner nav ul.main_m>li .side_menu ul.sub_m>li>a { font-size: 15px; font-weight: 600; line-height: 1.4; display: block; width: max-content; padding: 10px 20px; min-width: 200px; white-space:wrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px; } :is(#header,.section) :is(*)::-webkit-scrollbar { width: 5px; } :is(#header,.section) :is(*)::-webkit-scrollbar-thumb { background-color: rgb(184, 184, 184); } :is(#header,.section) :is(*)::-webkit-scrollbar-track { background-color: rgb(233, 233, 233); } #header .head_inner nav ul.main_m>li>a:before { display:inline-block; content:''; position:relative ; width:25px; height:25px; left:0px; top:0px; margin-right:10px; margin-bottom:-5px;} #header .main_m>li:nth-child(1)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-16.svg') ; background-size:100%;} #header .main_m>li:nth-child(2)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-17.svg') ; background-size:100%;} #header .main_m>li:nth-child(3)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-18.svg') ; background-size:100%;} #header .main_m>li:nth-child(4)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-19.svg') ; background-size:100%;} #header .main_m>li:nth-child(5)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-20.svg') ; background-size:100%;} #header .main_m>li:nth-child(6)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-21.svg') ; background-size:100%;} #header .main_m>li:nth-child(7)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-22.svg') ; background-size:100%;} #header .main_m>li:nth-child(8)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-23.svg') ; background-size:100%;} #header .main_m>li:nth-child(9)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-24.svg') ; background-size:100%;} #header .main_m>li:nth-child(10)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-25.svg') ; background-size:100%;} #header .main_m>li:nth-child(11)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-26.svg') ; background-size:100%;} #header .main_m>li:nth-child(12)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-27.svg') ; background-size:100%;} #header .main_m>li:nth-child(13)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-28.svg') ; background-size:100%;} #header .main_m>li:nth-child(14)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-29.svg') ; background-size:100%;} #header .main_m>li:nth-child(15)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-30.svg') ; background-size:100%;} #header .head_inner .ham_wrap .allmenu{ } #header .head_inner .ham_wrap .allmenu a { width: 20px; height: 16px; display: block; position: relative; transition: all .3s; } #header .head_inner .ham_wrap .allmenu a span { position: absolute; left: 0; width: 100%; height: 2px; transform-origin: center center; background-color: #fff; border-radius: 4px; transition: all .3s; } #header .head_inner .ham_wrap.clicked { background-color: #fff; } #header .head_inner .ham_wrap.clicked .allmenu a span { background-color: var(--main-color); } #header .head_inner .ham_wrap .allmenu a span:nth-of-type(1) { top: 0; transform-origin: left center; } #header .head_inner .ham_wrap .allmenu a span:nth-of-type(2) { top: 7px; } #header .head_inner .ham_wrap .allmenu a span:nth-of-type(3) { bottom: 0; transform-origin: left center; } #header .head_inner .ham_wrap .allmenu a.active-1 span:nth-of-type(1) { transform : rotate(45deg); -webkit-transform:rotate(45deg) } #header .head_inner .ham_wrap .allmenu a.active-1 span:nth-of-type(2) { left : 200%; opacity : 0; -webkit-animation : active-menu-bar06 .8s forwards; animation : active-menu-bar06 .8s forwards; } #header .head_inner .ham_wrap .allmenu a.active-1 span:nth-of-type(3) { transform : rotate(-45deg); -webkit-transform : rotate(-45deg); } @-webkit-keyframes active-menu-bar06 { 100% { height : 0; } } #header .head_inner .ham_wrap p { color: #fff; font-size: 16px; transition: all .3s; font-weight: 600; } #header .head_inner .ham_wrap.clicked p { color: var(--main-color); } /* 햄버거메뉴 */ #header .head_inner .hammenu{ display: none; float: unset; padding: 0; position: absolute; top: 100% ; left: 0; min-height: 500px; height:calc(100vh); max-height:651px; box-sizing: border-box; } .hammenu .depth1{ height:calc(100vh); max-height:651px; overflow-y: auto; background-color: var(--base-color); padding:10px 0; border: 1px solid #bebebe; -webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05); } .hammenu .depth1> li{ } .hammenu .depth1> li a{ font-size: 16px; font-weight: 600; display: block; width: 200px; background-color: var(--base-color); color: #111; padding: 10px 10px 10px 20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px; } .hammenu .depth1> li a:hover{ color: var(--main-color);} .hammenu .depth1 > li.depopen{ } .hammenu .depth2{ padding:10px 0; border:1px solid #bebebe; background-color: #fff; padding-left: 5px; display: none; position: absolute; left: 200px; top: 0; min-height: 500px; height:calc(100vh); max-height:651px; overflow-y: auto; } .hammenu .depth2> li{ } .hammenu .depth2> li a{ font-size: 15px; font-weight: 600; line-height: 1.4; display: block; width: max-content; padding: 10px 20px; min-width: 200px; white-space:wrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px;} .hammenu .depth2> li a:hover{ color: var(--main-color);} .hammenu .depth1> li>a:before { display:inline-block; content:''; position:relative ; width:25px; height:25px; left:0px; top:0px; margin-right:10px; margin-bottom:-5px;} .hammenu .depth1> li:nth-child(1)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-01.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(2)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-02.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(3)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-03.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(4)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-04.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(5)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-05.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(6)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-06.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(7)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-07.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(8)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-08.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(9)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-09.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(10)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-10.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(11)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-11.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(12)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-12.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(13)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-13.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(14)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-14.svg') ; background-size:100%;} .hammenu .depth1> li:nth-child(15)>a:before { background:url('/design/ytfishing/2024/img/common/icon-cate-15.svg') ; background-size:100%;} #head_top .utill_area { position: relative; height: 45px; background:#f8f9fa; } #head_top .utill_area .utill_inner { width: 1260px; height: 45px; margin: 0 auto; } #head_top .utill_area .utill_inner .h_left { float: left; text-align: center;} #head_top .utill_area .utill_inner .h_right { float: right; text-align: center;} #head_top .utill_area .utill_inner a { position: relative; float: left; padding: 0 10px; height: 45px; line-height: 45px; color: #555; font-size: 14px; font-weight:500; letter-spacing:-1px; -webkit-transition: all 0.3s ease; -khtml-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #head_top .utill_area .utill_inner a:first-child:after { display: none;} #head_top .utill_area .utill_inner a:hover { opacity: 0.8;} #head_top .utill_area:before { content: ""; background: #bebebe; display: block; width: 100%; height: 1px; position: absolute; bottom: -1px; left: 0; right: 0; } #head_top .utill_area .utill_inner a.first-h { border-left: 1px solid #bebebe; border-right: 1px solid #bebebe; border-bottom: 1px solid #fff; margin-right: 10px; padding: 0 20px; background:#fff; } #head_top .utill_area .utill_inner a img+span { margin-left: 5px;} #head_top .utill_area .utill_inner .h_right a:last-child { padding-right: 0;} #head_top .utill_area .utill_inner .h_right .basket_acount { color:#004cd7; font-weight:600;} /* 다찾다 자동완성*/ .search-auto-complete-list { display:none; z-index:99; position:absolute; top:47px; left:0; border:1px solid #aaa; border-top:1px solid #aaa; border-radius:3px; line-height:14px; background:#fff; } .search-auto-complete-list ul { width:100%; min-width:450px; padding:6px 0 6px; border-bottom:1px solid #bebebe; } .search-auto-complete-list ul li { text-align:left; } .search-auto-complete-list ul li.on { background:#f3f3f3; } .search-auto-complete-list ul li a { display:block; padding:6px 20px 6px; color:#000; background:none; font-size: calc(0.9rem + 0.25vw); letter-spacing:-1px; } .search-auto-complete-list ul li a strong { color:#da2128; } .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; } .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:13px; } /* 다찾다 검색 파인더 */ #allfinder-layer { z-index: 9999; position: fixed; top: 50px; right: 110px; width: 1000px; zoom: 1; overflow: hidden; } #allfinder-layer .finder-body { display:none; z-index:1; position: relative; width: 998px; *width:918px; padding:35px 40px 5px; max-height: 800px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; border:1px solid #666; background:#fff; } #allfinder-layer .finder-body .finder-close { position: absolute; top: 15px; right: 10px; font-size:24px; color:#000; *width:19px; *height:24px; *background:url('/images/common/btn_h11_close.gif') no-repeat center center; *background-size:19px 24px; } #allfinder-ctr { z-index: 10000; position: fixed; top: 50px; right: 0; width: 103px; height:86px; display:none; } #allfinder-ctr a { display:block; width:100%; height:100%; background:url('/images/common/allfinder_ctrl_pc.png') no-repeat right top; border:none; outline:none; font-size:0; } .all-finder-layer .finder-body .finder-tbl table { border:1px solid #ccc; border-top:1px solid #000; } .all-finder-layer .finder-body .finder-tbl th, .all-finder-layer .finder-body .finder-tbl td { height: 40px; border-top: 1px solid #e5e5e5; font-size: 14px; /*font-family:'Malgun Gothic';*/ color: #121212; } .all-finder-layer .finder-body .finder-tbl tr:first-child th, .all-finder-layer .finder-body .finder-tbl tr:first-child td { border-top:none; } .all-finder-layer .finder-body .finder-tbl th { padding: 5px 0; background: #f4f4f4; text-align: left; vertical-align:top; } .all-finder-layer .finder-body .finder-tbl th .txt-l { position:relative; height:34px; line-height:34px; padding: 0 20px; margin:3px 0; } .all-finder-layer .finder-body .finder-tbl th .txt-l .fa { position:absolute; top:50%; right:15px; margin-top:-6px; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-tooltip-btn { display:inline-block; width:20px; height:20px; line-height:22px; border:1px solid #cecece; border-radius:20px; color:#666; font-size:11px; background:#fff; text-align:center; outline:none; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer { display:none; position:absolute; top:33px; left:52px; width:270px; padding:0 20px 18px; border:1px solid #000; background:#fff; text-align:left; font-weight:normal; color:#000; z-index:1 } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-btn-close { display:inline-block; position:absolute; top:14px; right:20px; margin:0; font-size:21px; color:#000; outline:none; *width:19px; *height:22px; *background:url('/images/common/btn_h11_close.gif') no-repeat center center; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-tit { padding:18px 0; border-bottom:1px solid #e5e5e5; font-size:15px; font-weight:bold; line-height:15px; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-cnt { padding-top:16px; line-height:1.5; font-size:13px; } .all-finder-layer .finder-body .finder-tbl td { padding: 5px 10px; } .all-finder-layer .finder-body .txt-input { height: 21px; line-height: 21px; padding: 0 5px; font-size: 13px; font-family:'Malgun Gothic'; } .all-finder-layer .finder-body .finder-category { height:40px; overflow:hidden; } .all-finder-layer .finder-body .finder-category.open { height:100%; overflow:visible; } .all-finder-layer .finder-body tr.finder-child-category { display:none; } .all-finder-layer .finder-body tr.finder-child-category th, .all-finder-layer .finder-body tr.finder-child-category td { border-top:none; } .all-finder-layer .finder-body tr.finder-child-category td { background:#fbfbfb; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 { display:inline-block; margin:3px 5px 3px 0; padding: 5px 10px; cursor:pointer; line-height:1.2; vertical-align:top; word-break:break-all; color:#9a9a9a; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 .fa-check { display:none; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2.on { font-weight:bold; color:#000; border:0; border-radius:0; box-shadow: unset; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2.on .fa-check { display:inline-block; margin-right:3px; } .all-finder-layer .finder-body .finder-color { padding-left:10px; } .all-finder-layer .finder-body .finder-price .finder-price-input { display: inline-block; padding-top:5px } .all-finder-layer .finder-body .finder-price .finder-price-input label { display: inline-block; width: 110px; padding: 0 10px; border: 1px solid #ccc; border-radius:3px; color: #666; } .all-finder-layer .finder-body .finder-price .finder-price-input label .txt-input { display: inline-block; width: 90px; height: 29px; line-height: 29px; padding: 0; border: none; background: none; color: #333; text-align: right; } .all-finder-layer .finder-body .finder-search { position:relative; padding-left:5px; } .all-finder-layer .finder-body .finder-search label { display: inline-block; width: 320px; padding: 0 10px; border: 1px solid #ccc; border-radius:3px; } .all-finder-layer .finder-body .finder-search label .txt-input { display: block; width:100%; height: 29px; line-height: 29px; padding: 0; border: none; background: none; color: #333; text-align: left; } .all-finder-layer .finder-body .finder-btn-c { padding: 30px 0; text-align: center; } .all-finder-layer .finder-body .finder-btn-c a.reset { display: inline-block; width: 140px; height: 60px; line-height: 57px; border:none; border-radius:3px; background: #999; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 1px; /*font-family:'Malgun Gothic';*/ margin-right:15px; } .all-finder-layer .finder-body .finder-btn-c button { display: inline-block; height: 60px; line-height: 57px; padding:0 30px; *padding:0; border:none; border-radius:3px; background: #000; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: -0.5px; /*font-family:'Malgun Gothic';*/ cursor:pointer; } .all-finder-layer .finder-body .finder-btn-c button span.ico-search { visibility:visible; display:inline-block; width:16px; height:15px; margin-right:10px; margin-top:-4px; *margin-top:0; vertical-align:middle; background:url('/images/common/btn_h15_search.png') no-repeat 0 0; } .all-finder-layer .finder-body .finder-btn-c button span.finder-count { visibility:visible; display:inline-block; height:60px; color:#ffd800; font-size:23px; *vertical-align:middle; } .all-finder-layer .finder-body .finder-btn-c button span.finder-count-toggle { visibility:visible; display:none; } .all-finder-layer .finder-body .finder-options { display:inline-block; margin:3px 5px 3px 0; padding: 5px 10px; cursor:pointer; line-height:22px; border: 1px solid #fff; vertical-align:top; word-break:break-all; } .all-finder-layer .finder-body .finder-options.on { font-weight: bold; border: 1px solid #000; border-radius: 20px; box-shadow:2px 2px 3px #d2d2d2; } .all-finder-layer .finder-body .finder-option-color em { display: inline-block; width: 22px; height: 22px; border-radius:20px; font-size:0; vertical-align:top; } .all-finder-layer .finder-body .finder-option-color.color-picker { width:22px; height:22px; padding: 0; border: none; } .all-finder-layer .finder-body .finder-option-color.color-picker.on { border: none; } .all-finder-layer .finder-body .finder-option-color.color-picker .fa-check { display:none; width:22px; height:22px; margin-top:-17px; color:#fff; text-align:center; } .all-finder-layer .finder-body .finder-option-color.color-picker.on .fa-check { display:block; } .all-finder-layer .finder-body .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-black em { background-color: #000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-gray em { background-color: #808080; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-brown em { background-color: #aa6810; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-navy em { background-color: #425583; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-blue em { background-color: #0000ff; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-light-blue em { background-color: #62acff; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-red em { background-color: #ff0000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-orange em { background-color: #ffa500; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-yellow em { background-color: #ffff00; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-purple em { background-color: #800080; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-green em { background-color: #008000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-light-green em { background-color: #72dd95; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-apricot em { background-color: #fbceb1; } .all-finder-layer .finder-body .search-auto-complete-list { display:none; z-index:1; position:absolute; top:30px; left:5px; border:1px solid #ddd; line-height:14px; background:#fff; } .all-finder-layer .finder-body .search-auto-complete-list ul { width:340px; padding:4px 0 6px; border-bottom:1px solid #ddd; } .all-finder-layer .finder-body .search-auto-complete-list ul li { text-align:left; } .all-finder-layer .finder-body .search-auto-complete-list ul li.on { background:#f3f3f3; } .all-finder-layer .finder-body .search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; } .all-finder-layer .finder-body .search-auto-complete-list ul li a strong { color:#ab3e41; } .all-finder-layer .finder-body .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .all-finder-layer .finder-body .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; } .all-finder-layer .finder-body .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; } .all-finder-layer .finder-body .finder-search-data .finder-options { border: 1px solid #e5e5e5; box-shadow:none; } .all-finder-layer .finder-body .finder-search-data .finder-options .fa-close { margin-left:10px; color: #999; } /* 에이스토어 전용 */ #header { width:100% !important; } * { margin: 0; padding:0; } a { text-decoration: none; color: inherit; } ul,li { list-style: none; } .clear_fix::after,.clear_fix::before { clear: both; display: block; content: ""; } .shopbrand_item_wrap { display:flex; flex-wrap:wrap; } .sch-frm>form { width:1100px; margin:0 auto } #searchWrap .sch-frm td .tb-left .CSSbuttonSearch { background-color:var(--main-color); border:1px solid var(--main-color) } #searchWrap .sch-frm td .tb-left .CSSbuttonSearch:hover { color:var(--main-color) } /* paging */ .paging { padding:40px 0; text-align:center; display:flex; flex-direction:row; justify-content:center; gap:5px; } .paging a { font-family: 'Lato', sans-serif; display:inline-block; font-size:13px; color:#666; width: 22px; font-weight:600; line-height: 38px; height: 38px; background-color:transparent; background-color:#f4f4f4; } .paging a:hover, .paging a.now, .paging .now { color:#fff; background-color:var(--main-color) } .paging a.first, .paging a.prev, .paging a.next, .paging a.last { font-size:13px; font-family:dotum; line-height: 38px; } .paging a.first, .paging a.last { letter-spacing:-4px } /* .item-wrap .item-wrap { overflow: hidden; margin:0 auto; } .item-wrap .item-hd { margin: 40px 0 20px 0 } .item-wrap .nbg { background: none; text-align: center; } .item-wrap .item-info { zoom: 1; overflow: hidden; padding: 35px 0 26px; margin-bottom:10px } .item-wrap .item-info .count { color:#000; font-size:13px; font-weight:600; float:left; } .item-wrap .item-info .count span { display:inline-block; font-weight:700; } .item-wrap .item-info:after { display:block; clear:both; content:'' } .item-wrap .item-info .item-total { float: left; font-size:14px; color:#7b7b7b } .item-wrap .item-info .item-total span { color: #0e0d0d } .item-wrap .item-info .item-order { float: right } .item-wrap .item-info .item-order li {float: left;padding-left:10px;padding-right: 0;margin-left:10px;border-left:1px solid #dedede;line-height:12px;border-right: 0;} .item-wrap .item-info .item-order li:first-child { border-left:none; } .item-wrap .item-info .item-order li.nobg { padding-right:0; } .item-wrap .item-info .item-order li a { font-size: 13px; color:#949494; font-weight:400; line-height:12px; vertical-align:top } .item-wrap .item-info .item-order li a .on { color: #000 } */ /*메인 공통*/ .section,.section :is(*) { box-sizing: border-box; /* font-family: "Pretendard Variable", Pretendard, sans-serif;*/ } .area { padding:60px 0; } .section:not(#sec1) { margin-bottom: 0px; } .section .sec_inner { width: 1260px; margin: 0 auto; } .section h2 { font-size:32px; font-family: "Pretendard Variable", Pretendard, sans-serif; color: #111111; font-weight: 500; margin-bottom: 40px; } .section .txt_area p.sub { color: #000; line-height: 1.6; font-weight: 500; transition: all .5s; font-size: 17px; } .section .txt_area p.big { color: #000; font-weight: 500; line-height: 1.3; transition: all .5s; font-size: 48px; } .section .txt_area a.more { display: inline-block; font-size: 12px; transition: transform .4s, opacity .4s; border: 1px solid #000; color: #000; margin-top: 8px; font-weight: 600; padding:6px 15px; } .section a.btn_more { color: #fff; font-size: 15px; border: 1px solid #fff; position: relative; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; } .section a.btn_more>span { display: block; position: absolute; background-color: #000; } .section .btn_more .span_index_one { width: 1px; left: 0; bottom: 0; } .section .btn_more .span_index_two { height: 1px; left: 0; top: 0; } .section .btn_more .span_index_three { width: 1px; right: 0; top: 0; } .section .btn_more .span_index_four { height: 1px; right: 0; bottom: 0; } .section .btn_more:hover { border-color: transparent !important; } .section .btn_more:hover .span_index_one { -webkit-animation: move1 1500ms infinite ease; animation: move1 1500ms infinite ease; } .section .btn_more:hover .span_index_two { -webkit-animation: move2 1500ms infinite ease; animation: move2 1500ms infinite ease; } .section .btn_more:hover .span_index_three { -webkit-animation: move3 1500ms infinite ease; animation: move3 1500ms infinite ease; } .section .btn_more:hover .span_index_four { -webkit-animation: move4 1500ms infinite ease; animation: move4 1500ms infinite ease; } @-webkit-keyframes move1 { 0% { height: 100%; bottom: 0; } 54% { height: 0; bottom: 100%; } 55% { height: 0; bottom: 0; } 100% { height: 100%; bottom: 0; } } @keyframes move1 { 0% { height: 100%; bottom: 0; } 54% { height: 0; bottom: 100%; } 55% { height: 0; bottom: 0; } 100% { height: 100%; bottom: 0; } } @-webkit-keyframes move2 { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } @keyframes move2 { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } @-webkit-keyframes move3 { 0% { height: 100%; top: 0; } 54% { height: 0; top: 100%; } 55% { height: 0; top: 0; } 100% { height: 100%; top: 0; } } @keyframes move3 { 0% { height: 100%; top: 0; } 54% { height: 0; top: 100%; } 55% { height: 0; top: 0; } 100% { height: 100%; top: 0; } } @-webkit-keyframes move4 { 0% { width: 0; right: 0; } 55% { width: 100%; right: 0; } 100% { width: 0; right: 100%; } } @keyframes move4 { 0% { width: 0; right: 0; } 55% { width: 100%; right: 0; } 100% { width: 0; right: 100%; } } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; padding-bottom: 30px; } .swiper-container :is(.sec_next,.sec_prev) { position: unset; transition: filter .4s; filter: opacity(0); background-color:#222; padding: 10px; width: 30px; height: 60px; transform: translateY(-50%); color:#fff; transition:all .1s } .swiper-container :is(.sec_next,.sec_prev)::after { font-size: 0; } .swiper-container :is(.sec_next,.sec_prev):not(.swiper-button-disabled):hover { background-color:var(--main-color); color:#fff } .swiper-button-prev, .swiper-button-next { width:40px;height:40px;top:45%;position:absolute; cursor:pointer; background-color:rgba(0,0,0,.45); color:#fff; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; } .swiper-button-prev:hover, .swiper-button-next:hover { background-color:rgba(0,0,0,0.75); color:var(--main-color); } .swiper-button-prev {background-image:none;left:%;top:50%; transform: translateY(-50%); /* width:5.8%;height:12.8%; */ margin-left:0;margin-top: 0;outline:none;font-size: 0; display: flex; justify-content: center; align-items: center;} .swiper-button-next {background-image:none;right:%;top:50%; transform: translateY(-50%); /* width:5.8%;height:12.8%; */ margin-right:0;margin-top: 0;outline:none;font-size: 0; display: flex; justify-content: center; align-items: center;} .swiper-button-prev .icon {border-left:1px solid #fff;border-bottom:1px solid #fff;width:13px;height:13px;margin-right:-5px; display:none } .swiper-button-next .icon {border-left:1px solid #fff;border-bottom:1px solid #fff;width:13px;height:13px;margin-left:-5px; display:none } .swiper-pagination{ bottom:0px !important; } .swiper-pagination-bullet-prev, .swiper-pagination-bullet-next , .swiper-pagination-bullet-active-prev, .swiper-pagination-bullet-active-next { } .swiper-pagination-bullet{ width: 10px; height:10px; background-color: rgba(0,0,0,.5); transition: all .2s; bottom:-30px !important; opacity: 1} .swiper-pagination-bullet-active{width: 25px; border-radius: 10px; background-color:var(--main-color) } /* .swiper-scrollbar{height:2px; } .swiper-container :is(.swiper-button-next,.swiper-button-prev){ transition: filter .4s; filter: opacity(0); background-color:#222; padding: 10px; width: 35px; height: 50px; transform: translateY(-50%); color:#fff;} .swiper-container:hover :is(.swiper-button-next,.swiper-button-prev){ filter: opacity(1);} .swiper-button-next{right:0px} .swiper-button-prev{left: 0px} .swiper-button-next:after, .swiper-button-prev:after{font-size: 15px;} */ /* 메이크샵 전용 배너스타일 */ .new-slider-wrap { width: calc(100vw)!important; overflow:hidden; visibility:hidden; position: relative; height: 0; } .new-slider-wrap:after { display:none; } .new-slider-wrap .bx-wrapper { position: relative; text-align: center; } .new-slider-wrap .slider-img, .new-slider-wrap .slider-img li { } .new-slider-wrap .slider-img img { max-width: 100%; width: 100%; } .new-slider-wrap .slider-img li:before, .new-slider-wrap .slider-img li:after, .new-slider-wrap .bx-pager ul li:before, .new-slider-wrap .bx-pager ul li:after { display:none; } .new-slider-wrap .bx-pager { display: flex; justify-content: center; position: absolute; bottom: 16px; left: 0; width:100%; } .new-slider-wrap .bx-pager a { display: flex; width: 10px; height:10px; margin: 0 3px; background-color: rgba(0,0,0,.5); transition: all .2s; border-radius: 10px; text-indent: -9999px; } .new-slider-wrap .bx-pager a:hover { background-color:#fff; } .new-slider-wrap .bx-pager a.active { background-color:var(--main-color) ; width: 25px; } .new-slider-wrap .bx-controls-direction { } .new-slider-wrap .bx-controls-direction a { position: absolute; top: 50%; width: 22px; height: 42px; transform: translateY(-50%); text-indent: -9999px; } .new-slider-wrap .bx-controls-direction .bx-prev { left: 30px; background: url('/images/common/arr_angle_left_2x.png') no-repeat 0/100%; } .new-slider-wrap .bx-controls-direction .bx-next { right: 30px; background: url('/images/common/arr_angle_right_2x.png') no-repeat 0/100%; } .new-slider-wrap .slider-counter { display: flex; justify-content: center; align-items: center; gap: 5px; position: absolute; bottom: 12px; right: 12px; width: 56px; height: 24px; background: rgba(0,0,0,.5); border-radius: 20px; font-size: 13px; font-family: 'arial'; color: rgba(255,255,255,.5); line-height: 1; font-weight: bold; } .new-slider-wrap .slider-counter .current-index { color: #fff; } .new-slider-wrap .slider-progress { display:block; width:100%; height: 2px; background: #eee; content:""; overflow:hidden; } .new-slider-wrap .slider-progress span { display:block; height: 2px; background: #000; -webkit-transition:all 0.75s ease-in-out; -moz-transition:all 0.75s ease-in-out; -ms-transition:all 0.75s ease-in-out; transition:all 0.75s ease-in-out; } @media all and (max-width:480px) { .new-slider-wrap .slider-img img { width: 100%; } .new-slider-wrap .bx-controls-direction a { width: 14px; height: 26px; } .new-slider-wrap .bx-controls-direction .bx-prev { left: 12px; background: url('/images/common/arr_angle_left_m_2x.png') no-repeat 0/100%; } .new-slider-wrap .bx-controls-direction .bx-next { right: 12px; background: url('/images/common/arr_angle_right_m_2x.png') no-repeat 0/100%; } .new-slider-wrap .bx-pager { bottom: 10px; } .new-slider-wrap .bx-pager a { width: 6px; height: 6px; margin: 0 2px; } .new-slider-wrap .slider-counter { bottom: 8px; right: 8px; width: 46px; height: 19px; font-size: 11px; } } /*------------------------------------------------------------------------------------ 메인 타이틀-공통 --------------------------------------------------------------------------------------*/ .main-title { position: relative; margin-bottom:30px; } .main-title h1, .main-title h2, .main-title h3, .main-title h4, .main-title h5, .main-title h6 { position: relative; font-weight: 200; } .main-title strong { font-weight: 600; } .main-title .section-title { letter-spacing:-1px; margin-right:20px; display:inline-block; } .main-title .section-area { line-height:1.4; font-weight: 200; } .main-title .section-area.h5, .main-title .section-area.h6 { line-height:1.4; font-weight: 400 !important; } .main-title .section-text { line-height:1.7; } .main-title span { } .main-title span.add { font-size: calc(0.9rem + 0.25vw); font-weight: 500 !important; } .sub-title { position: relative; margin-bottom:30px; } .sub-title h1, .sub-title h2, .sub-title h3, .sub-title h4, .sub-title h5, .sub-title h6 { position: relative; font-weight: 200; } .sub-title strong { font-weight: 600; } .sub-title .section-title { letter-spacing:-1px; } .sub-title .section-area { line-height:1.4; font-weight: 200; } .sub-title .section-area.h5, .sub-title .section-area.h6 { line-height:1.4; font-weight: 400 !important; } .sub-title .section-text { line-height:1.7; } .sub-title span { } .sub-title span.add { font-size: calc(0.9rem + 0.25vw); font-weight: 500 !important; } /* button common */ .more_item{display: flex; align-items: center; justify-content: center;margin-top:30px} .more_item a{display: flex; align-items: center;transition: all .2s; justify-content: center;gap: 10px; border: 1px solid #ccc; padding: 15px 100px;} .more_item a:hover{border-color: #000;} .more_item a p{position: relative; color: #000; font-size: calc(0.85rem + 0.25vw); font-weight: 500;} .more_item a p:after { content: "\F285"; display: block; pointer-events: none; position: absolute; right: -20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.15s ease-in-out; font-family: 'bootstrap-icons'; font-size: calc(0.85rem + 0.2vw); color: #222; } .more_item a img{} .go_item{display: flex; align-items: center; } .go_item a{display: flex; align-items: center;transition: all .2s; } .go_item a:hover{ color: #000;} .go_item a p{ position: relative; color: #555; font-size: calc(0.8rem + 0.15vw); font-weight: 500;} .go_item a p:after { content: "\F285"; display: block; pointer-events: none; position: absolute; right: -20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.15s ease-in-out; font-family: 'bootstrap-icons'; color: #222; } /* sec3 베스트상품 */ #sec3 .sec_inner { position:relative; } #sec3 .sec_inner .swiper-button-prev { position: absolute; top: 50%; left: 0; transform: translate(-50px, -50%); z-index: 2; } #sec3 .sec_inner .swiper-button-next { position: absolute; top: 50%; right: 0; transform: translate(50px, -50%); z-index: 2; } #sec3 .sec_inner .sec3_cont .swiper { } #newBannerList_19 { width : 100% !important; max-width : 100%; } #sec11 .new-slider-wrap { overflow:hidden; visibility:hidden; position: relative; height: 0; } #sec11 .new-slider-wrap:after { display:none; } #sec11 .new-slider-wrap .bx-wrapper { position: relative; text-align: center; width: 100%; height: 100%; } #sec11 .new-slider-wrap .slider-img li { position: relative; width: 100%; height: 100%; overflow:hidden; text-align:center; } #sec11 .new-slider-wrap .slider-img a { position: relative; width: 100%; height: 100%; text-align:center; margin:auto; } #sec11 .new-slider-wrap .slider-img img { width: 100%; height: 100%; max-width: auto; margin:auto; } #sec11 .new-slider-wrap .slider-img li:before, #sec11 .new-slider-wrap .slider-img li:after, #sec11 .new-slider-wrap .bx-pager ul li:before, #sec11 .new-slider-wrap .bx-pager ul li:after { display:none; } #sec11 .new-slider-wrap .bx-pager { display: flex; justify-content: center; position: absolute; bottom: 16px; left: 0; width:100%; } #sec11 .new-slider-wrap .bx-pager a { display: flex; width: 10px; height:10px; margin: 0 3px; background-color: rgba(0,0,0,.5); transition: all .2s; border-radius: 10px; text-indent: -9999px; } #sec11 .new-slider-wrap .bx-pager a:hover { background-color:#fff; } #sec11 .new-slider-wrap .bx-pager a.active { background-color:var(--main-color) ; width: 25px; } #sec11 .new-slider-wrap .bx-controls-direction a { position: absolute; top: 50%; width: 22px; height: 42px; transform: translateY(-50%); text-indent: -9999px; } #sec11 .new-slider-wrap .bx-controls-direction .bx-prev { left: 30px; background: url('/images/common/arr_angle_left_2x.png') no-repeat 0/100%; } #sec11 .new-slider-wrap .bx-controls-direction .bx-next { right: 30px; background: url('/images/common/arr_angle_right_2x.png') no-repeat 0/100%; } #sec11 .new-slider-wrap .slider-counter { display: flex; justify-content: center; align-items: center; gap: 5px; position: absolute; bottom: 12px; right: 12px; width: 56px; height: 24px; background: rgba(0,0,0,.5); border-radius: 20px; font-size: 13px; font-family: 'arial'; color: rgba(255,255,255,.5); line-height: 1; font-weight: bold; } #sec11 .new-slider-wrap .slider-counter .current-index { color: #fff; } #sec11 .new-slider-wrap .slider-progress { display:block; width:100%; height: 2px; background: #eee; content:""; overflow:hidden; } #sec11 .new-slider-wrap .slider-progress span { display:block; height: 2px; background: #000; -webkit-transition:all 0.75s ease-in-out; -moz-transition:all 0.75s ease-in-out; -ms-transition:all 0.75s ease-in-out; transition:all 0.75s ease-in-out; } @media all and (max-width:480px) { #sec11 .new-slider-wrap .slider-img img { width: 100%; } #sec11 .new-slider-wrap .bx-controls-direction a { width: 14px; height: 26px; } #sec11 .new-slider-wrap .bx-controls-direction .bx-prev { left: 12px; background: url('/images/common/arr_angle_left_m_2x.png') no-repeat 0/100%; } #sec11 .new-slider-wrap .bx-controls-direction .bx-next { right: 12px; background: url('/images/common/arr_angle_right_m_2x.png') no-repeat 0/100%; } #sec11 .new-slider-wrap .bx-pager { bottom: 10px; } #sec11 .new-slider-wrap .bx-pager a { width: 6px; height: 6px; margin: 0 2px; } #sec11 .new-slider-wrap .slider-counter { bottom: 8px; right: 8px; width: 46px; height: 19px; font-size: 11px; } } /* sec4 새로운 발견*/ #sec4 { } #sec4 .sec_inner { max-width: 1260px; width:100%; } #sec4 .sec_inner2 { max-width: 1260px; width:100%; } #sec4 .sec_inner > div { } #sec4 .sec_inner .row > [class*="col-"] { margin-bottom:25px; box-sizing:border-box} #sec4 .sec_inner .row > .col-12:last-child { margin-bottom:0; box-sizing:border-box} #sec4 .sec_inner2 .row > [class*="col-"] { margin-bottom:5px; box-sizing:border-box} #sec4 .sec_inner a img { width: 100%; box-sizing:border-box} #sec4 .sec_inner ul { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px; } #sec4 .sec_inner ul li { position: relative; flex-grow: 1; } #sec4 .sec_inner ul li>a { display: block; width: 100%; border:1px solid #bebebe;} #sec4 .sec_inner ul li>a:hover { border:1px solid #da2128;} #sec4 .sec_inner ul li>a>img { width: 100%; } #sec4 .sec_inner a > img { display: block; width: 100%; border:1px solid #bebebe; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; box-sizing:border-box} #sec4 .sec_inner a > img:hover { border:1px solid #da2128;} #sec4 .sec_inner ul li .txt_area { position: absolute; top: 61%; transform: translateY(-50%); left: 40px; max-width: 80% } #sec4 .sec_inner ul li .txt_area p { opacity: 0; } #sec4 .sec_inner ul li .txt_area p.big { font-size: 34px; font-weight: 700; margin-bottom: 10px; transition-delay: .1s; } #sec4 .sec_inner ul li .txt_area p.sub { font-size: 16px; line-height:1.4; margin-bottom: 10px; transition-delay: .27s; } #sec4 .sec_inner ul li .txt_area a.more { font-size: 12px; opacity: 0; transition-delay: .48s; position:relative; } #sec4.act .sec_inner ul li .txt_area p { transform: translateY(-25px); opacity: 1; } #sec4.act .sec_inner ul li .txt_area a.more { transform: translateY(-25px); opacity: 1; } #sec4 .sec_inner .banner_list { position:relative; } #sec4 .sec_inner .banner_button { position:relative; } #sec4 .sec_inner .banner_button .btn-holder { position: absolute !important; z-index:10; bottom:30px; left:30px; font-size:0; } #sec4 .sec_inner .banner_button .more_item { position: absolute !important; z-index:10; bottom:30px; left:30px; } /* sec6 기획전 */ #sec6 { background:#f8f9fa; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } #sec6 .sec_inner { position:relative; } #sec6 .sec_inner .sec6_cont .swiper-container { } #sec6 .sec_inner .sec6_cont .swiper-container ul { } #sec6 .sec_inner .sec6_cont .swiper-container ul li { } #sec6 .sec_inner .sec6_cont .swiper-container ul li a { display: block; width: 100%; overflow:hidden; } #sec6 .sec_inner .sec6_cont .swiper-container ul li a img { width: 100%; transition:transform .3s } #sec6 .sec_inner .sec6_cont .swiper-container ul li a:hover>img { transform:scale(1.16) rotate(5deg) } #sec6 .sec_inner .sec6_cont .swiper-container ul li .txt_area { padding:20px 0 } #sec6 .sec_inner .sec6_cont .swiper-container ul li .txt_area p { transition: all .3s; } #sec6 .sec_inner .sec6_cont .swiper-container ul li .txt_area p.big { color: #161616; font-size: 20px; margin-bottom:10px; word-break:keep-all; } #sec6 .sec_inner .sec6_cont .swiper-container ul li:hover .txt_area p.big { color: #000; padding-left: 21px; position:relative; } #sec6 .sec_inner .sec6_cont .swiper-container ul li:hover .txt_area p.big::before { content: "→"; font-size:17px; display: inline-block; position: absolute; left: 0; transition: all .5s; top:50%; transform:translateY(-50%) } #sec6 .sec_inner .sec6_cont .swiper-container ul li .txt_area p.sub { color: #555555; font-size: 16px; line-height:1.4 } #sec6 .sec_inner .swiper-button-prev { position: absolute; top: 50%; left: 0; transform: translate(-50px, -50%); z-index: 2; } #sec6 .sec_inner .swiper-button-next { position: absolute; top: 50%; right: 0; transform: translate(50px, -50%); z-index: 2; } /* sec7 중간롱배너 */ #sec7 { } #sec7 .sec_inner { } #sec7 .sec_inner .sec7_cont { display: flex; justify-content: space-between; gap: 20px; } #sec7 .sec_inner .sec7_cont>div { flex-grow: 1; height:490px } #sec7 .sec_inner .sec7_cont .banner_area { position:relative; flex-grow:1; } #sec7 .sec_inner .sec7_cont .banner_area>a { display: block; width: 100%; } #sec7 .sec_inner .sec7_cont .banner_area>a img { width: 100%; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area { position: absolute; top: 57%; transform: translateY(-50%); left: 40px; max-width: 80% } #sec7 .sec_inner .sec7_cont .banner_area .txt_area>* { color: #fff; opacity:0 } #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.big { font-size: 34px; font-weight: 700; margin-bottom: 12px; transition-delay: .1s; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.sub { font-size: 16px; line-height:1.5; margin-bottom: 28px; transition-delay: .37s; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area a { border-color:#fff; transition-delay: .58s; position:relative; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area a.btn_more>span { background-color:#fff } #sec7.act .sec_inner .sec7_cont .banner_area .txt_area p { transform: translateY(-25px); opacity: 1; } #sec7.act .sec_inner .sec7_cont .banner_area .txt_area a.more { transform: translateY(-25px); opacity: 1; } #sec7 .sec_inner .sec7_cont .item_area { width:480px; } #sec7 .sec_inner .sec7_cont .item_area .swiper { height:100% } #sec7 .sec_inner .sec7_cont .item_area ul { height:100%; overflow-y:auto; display:flex; flex-wrap:wrap; } #sec7 .sec_inner .sec7_cont .item_area ul>li { display: flex; flex-wrap: nowrap; align-items: center; width:100%; padding:10px 0; /*height:calc(100% / 3)*/ } #sec7 .sec_inner .sec7_cont .item_area ul>li:first-child { padding-top:0 } #sec7 .sec_inner .sec7_cont .item_area ul>li:nth-child(2) { padding:7px 0; margin:5px 0 } #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb { width:150px; height:100% } #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a { height: 100%; } #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a>img { height: 100%; object-fit: cover; } #sec7 .sec_inner .sec7_cont .item_area ul>li .info { width:70%; padding:0 20px 0 20px; height:100%; } /* sec9 인스타그램 */ #sec9 .sec_inner h2 { display: flex; align-items: center; gap: 16px; } #sec9 .sec_inner .main-title .h6 { display: inline-block; color: #777; font-size: 20px; font-weight: 500; } /* catebest 추천상품 */ #catebest { position:relative; } #catebest .sec_inner { position:relative; } #catebest .cate_class { position:relative; border-width:2px 0 1px 0; border-style:solid; border-top-color: #cccccc; border-bottom-color: #cccccc; margin-bottom:30px; min-height:700px; } #catebest .cate_class .sub_inner { position:relative; display: flex; align-items: flex-start; align-content: space-between; justify-content: space-between; gap: 30px; height:100%; } #catebest .cate_class .cate-title { position:relative; width:13%; padding:50px 5px 30px; height:100%; min-height:700px; } #catebest .cate_class .cate-mb { position:relative; width:36%; height:100%; overflow:hidden; } #catebest .cate_class .cate-item { position:relative; width:49%; height:100%; } #catebest .swiper-container{ width: 100%; position:relative; } #catebest .swiper-wrapper{ position:relative; padding-top:30px; } #catebest .swiper-wrapper .swiper-slide{ } #catebest .swiper-wrapper .swiper-slide a{display: block; width: 100%; } #catebest .swiper-wrapper .swiper-slide a img{ width: 100%; margin:auto; } #catebest .swiper-button-prev, #catebest .swiper-button-next { z-index: 10; opacity:0; } #catebest .swiper-button-prev { left: 0; transform: translate(-20px, -0%); } #catebest .swiper-button-next { right: 0; transform: translate(20px, -0%); } #catebest .cate-item:hover .swiper-button-prev { transform: translate(0px, -0%); opacity:1; z-index: 10; } #catebest .cate-item:hover .swiper-button-next { transform: translate(0px, -0%); opacity:1; z-index: 10; } #catebest .new-slider-wrap .bx-controls-direction .bx-prev { left: -10px !important; opacity:0 !important; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; } #catebest .new-slider-wrap .bx-controls-direction .bx-next { right: -10px !important; opacity:0 !important; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; } #catebest .new-slider-wrap:hover .bx-controls-direction .bx-prev { left: 10px !important; opacity:1 !important; } #catebest .new-slider-wrap:hover .bx-controls-direction .bx-next { right: 10px !important; opacity:1 !important; } #catebest .cate_class .sub-title { width:100%; } #catebest .cate_class .sub-title .section-title { line-height:1.1; margin-bottom:20px; } #catebest .cate_class .key-title { width:100%; position: absolute; bottom:0; } #catebest .cate_class .key-title .section-title { font-weight:500; margin-bottom:10px; } #catebest .cate_class .key-title ul li { margin-bottom:3px; display:block; } #catebest .cate_class .key-title ul li a { display:inline-block; width:auto; border:1px solid #ccc; padding:5px; font-size:13px; line-height:1; font-family:'Dotum';} #ccate01.cate_class { border-top-color: #07399f; } #ccate01 .sub-title span, #ccate01 .key-title ul li a { color:#07399f; } #ccate02.cate_class { border-top-color: #79ac16; } #ccate02 .sub-title span, #ccate02 .key-title ul li a { color:#79ac16; } #ccate03.cate_class { border-top-color: #007ea7; } #ccate03 .sub-title span, #ccate03 .key-title ul li a { color:#007ea7; } #ccate04.cate_class { border-top-color: #fd7e14; } #ccate04 .sub-title span, #ccate04 .key-title ul li a { color:#fd7e14; } #ccate05.cate_class { border-top-color: #53bb2c; } #ccate05 .sub-title span, #ccate05 .key-title ul li a { color:#53bb2c; } #ccate06.cate_class { border-top-color: #ed0c7b; } #ccate06 .sub-title span, #ccate06 .key-title ul li a { color:#ed0c7b; } #ccate07.cate_class { border-top-color: #17b1ba; } #ccate07 .sub-title span, #ccate07 .key-title ul li a { color:#17b1ba; } #ccate08.cate_class { border-top-color: #ee9200; } #ccate08 .sub-title span, #ccate08 .key-title ul li a { color:#ee9200; } #ccate09.cate_class { border-top-color: #b74b4b; } #ccate09 .sub-title span, #ccate09 .key-title ul li a { color:#b74b4b; } #ccate10.cate_class { border-top-color: #3e8d86; } #ccate10 .sub-title span, #ccate10 .key-title ul li a { color:#3e8d86; } #ccate11.cate_class { border-top-color: #9f01c6; } #ccate11 .sub-title span, #ccate11 .key-title ul li a { color:#9f01c6; } #ccate12.cate_class { border-top-color: #e95385; } #ccate12 .sub-title span, #ccate12 .key-title ul li a { color:#e95385; } #ccate13.cate_class { border-top-color: #6fb072; } #ccate13 .sub-title span, #ccate13 .key-title ul li a { color:#6fb072; } .section .sec_prd>div ul.item_cont{display:flex; flex-wrap:wrap} /* 띠배너 */ .event { margin: 0 0 50px 0; padding-top:20px; text-align: center } /* 실시간 */ #realtime { /* background:#303242 url('/design/ytfishing/2024/img/main/realtime-bg.jpg') right bottom no-repeat; background-size:auto 100%; display: flex; align-items: center; gap: 16px;*/ padding:5px 0 0 0; } #realtime .sec_inner { display: flex; flex-wrap: nowrap; align-items:center; justify-content: flex-start; gap: 10px; } #realtime .sec_inner .main-title { width:30%; margin-bottom:0; text-align:center;} #realtime .sec_inner .main-title .section-title { margin-bottom:0;} #realtime .sec_inner .rtop { width:70%; } #realtime .sec_inner .rtop * { font-family: 'Noto Sans KR', 'Spoqa Han Sans', 'Spoqa Han Sans KR', Dotum, "돋움", DotumChe, "돋움체", Verdana, monospace, Corbel, AppleGothic, Helvetica, sans-serif !important; color:#3c3c3c; font-weight: 500; font-size: 15px; } #realtime .sec_inner .rtop:after { content: "\F282"; display: block; pointer-events: none; position: absolute; right: 20px; top: 55%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.15s ease-in-out; font-family: 'bootstrap-icons'; font-size: 15px; color: #222; z-index:2;} #f2s-ranking, #f2s-ranking *, #f2s-ranking *:before, #f2s-ranking *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #f2s-ranking { position: relative; margin: 0; width: '+ App.xmls['wid'] +'px; height: '+ (Number(App.xmls['titleHeight'])+Number(App.xmls['hei'])) +'px; border-radius:5px; height:42px; -webkit-box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.0); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.0); border:0px solid #bebebe !important; } #f2s-ranking .title-wrap { position: relative; z-index: 1; } #f2s-ranking .title-wrap h3 { overflow: hidden; margin: 0; height: '+ App.xmls['titleHeight'] +'px; line-height: '+ App.xmls['titleHeight'] +'px; padding: 0 5px; } #f2s-ranking .keyword-wrap { position: relative; height: '+ App.xmls['hei'] +'px; padding: 5px 0; margin-top: -'+ App.xmls['layerLine_thick'] +'px; overflow: hidden; padding:0px 20px; border-radius:5px; } #f2s-ranking .keywords { position: relative; list-style: none; padding: 0; margin: 0; } #f2s-ranking .keywords li { position: relative; overflow: hidden; margin: 0 5px 1px 5px; list-style: none; } #f2s-ranking .keywords li a { text-decoration: none; display: block; width: 100%; overflow: hidden; margin: 0 auto; white-space: nowrap; } #f2s-ranking .keywords-num { position: absolute; left: 0; top: 0; background:#3c3c3c; } #f2s-ranking .keywords-num em { font-style: normal; font-weight: 500 !important; color:#fff !important; font-size: 15px; } #f2s-ranking .keywords-num em:after { display:block; content:'.'; position:relative; } #f2s-ranking.active { z-index: 1001; position: absolute; left: 0 !important; margin-left:0 !important; height: '+ App.xmls['layer_height'] +'px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100% !important;} #f2s-ranking.active .keyword-wrap { height: '+ App.xmls['layer_height'] +'px; background-color: #'+ App.xmls['layerBack_color'] +'; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #f2s-ranking.active .keywords { width: auto; margin-top: '+ (Number(App.xmls['line_size']) * 2) +'px; } #f2s-ranking.active .keywords li { float: none; width: auto; height: auto; line-height: normal; } #f2s-ranking.active .keywords li a { line-height: '+ default_rate +'px; } #f2s-ranking.active .keywords-num { top: 50%; margin-top: -'+ (default_rate / 2) +'px; line-height: '+ default_rate +'px; } #f2s-ranking.active .keywords-txt { line-height: normal; padding: '+ (Number(App.xmls['list_gap']) / 2) +'px 0; } #foot-banner {} #foot-banner .sec_inner { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px; background:#121212; } #foot-banner .sec_inner a { display:block; position:relative; width:100%; height:100%; } #foot-banner .sec_inner .main-title { margin-bottom:10px;} #foot-banner .sec_inner .main-title .section-title { width:100%; color:#fff; font-weight:500; margin-bottom:0px;} #foot-banner .sec_inner .main-title .section-title:after { content: "\F285"; display: block; pointer-events: none; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.15s ease-in-out; font-family: 'bootstrap-icons'; font-size: calc(0.85rem + 0.2vw); color: #fff; } #foot-banner .sec_inner .fb { position:relative; padding:40px; width:33.3%; } #foot-banner .sec_inner .fb+.fb:after { display:block; content:''; position:absolute; left:-15px; top:25%; width:1px; height:50%; background:rgba(255,255,255,.5); } /*------------------------------------------------------------------------------------ 메인 버튼-공통 btn-holder 버튼 스타일 추가 --------------------------------------------------------------------------------------*/ .learn-more { width: 8rem; height: auto; position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: Dotum, "돋움", DotumChe, "돋움체" !important; z-index:10; } .learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #282936; background-color: rgba(0,0,0,.75); border-radius: 1.625rem; border-radius: 0; } .learn-more .circle i { position: absolute; top: 50%; left: 1rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: auto; color: #fff; font-size: calc(0.8rem + 0.3vw); } .learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } .learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; } .learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.3rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.135rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } .learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1rem; color: transparent; font-weight: 500; line-height: 1.4; text-align: center; text-transform: uppercase; font-size: calc(0.8rem + 0.15vw); } .learn-more:hover .circle, a:hover .learn-more .circle, .banner_button:hover .learn-more .circle { width: 100%; background-color:var(--main-color) ; } .learn-more:hover .circle .icon.arrow, a:hover .learn-more .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); } .learn-more:hover .button-text, a:hover .learn-more .button-text, .banner_button:hover .learn-more .button-text { color: #fff; } .btn-holder *:active, .btn-holder *:hover, .btn-holder *:focus { outline: 0!important; outline-offset: 0; } .btn-holder *::before, .btn-holder *::after { position: absolute; /* content: ""; */ } .btn-holder { display: flex; flex-wrap: wrap; margin: 10px auto 20px; margin:auto ; } .btn-holder.center { justify-content: center; } .btn-holder.start { justify-content: start; } .btn-holder.end { justify-content: end; } .btn-bar { position: relative; display: inline-block; width: auto; height: auto; background-color: transparent; border: none; cursor: pointer; margin: 0px 0 15px; min-width: 120px; } .btn-bar span, .btn-bar span a, .btn-bar a span { position: relative; display: inline-block; font-size: 1.2rem; letter-spacing: 0; text-transform: uppercase; top: 0; left: 0; width: 100%; padding: 10px 20px; transition: 0.3s; } .btn { display:inline-block; color:#333; text-align:center; vertical-align:middle; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-color:transparent; border:1px solid transparent; padding:1rem 3rem ; line-height:1; border-radius:3rem ; font-size: calc(0.9rem + 0.2vw) ; font-weight:400; transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out } .btn.fs-small { font-size: calc(0.7rem + 0.2vw) ; font-weight:400; text-transform: ; } .btn.fs-big { font-size: calc(1rem + 0.2vw) ; font-weight:400; text-transform: ; } .btn.btn-sm { font-size: calc(0.7rem + 0.2vw) !important; font-weight:400; padding:1rem 2rem ; } @media (prefers-reduced-motion:reduce) { .btn { padding:1rem 2rem; transition:none } .btn.btn-sm { padding:0.9rem 1.5rem; } } @media screen and (max-width: 992px) { .btn { padding:1rem 1.5rem; } .btn.btn-sm { padding:0.9rem 1rem; } } @media screen and (max-width: 768px) { .btn { padding:.85rem 1rem; } .btn.btn-sm { padding:0.75rem 1rem; } } .btn:hover { color:#333; text-decoration:none } .btn.focus, .btn:focus { outline:0; box-shadow:0 0 0 .2rem rgba(38, 93, 241, .25) } .btn.disabled, .btn:disabled { opacity:.65 } a.btn.disabled, fieldset:disabled a.btn { pointer-events:none } .btn-white { color:#222; background-color:#fff; border-color:#fff } .btn-white:hover { color:#e8c11a; background-color:#fff; border-color:#fff } .btn-trans { padding:1.35rem 0; background-color:transparent !important; border-color:transparent !important; } .btn-trans:hover { box-shadow:none !important; } .btn-trans.focus, .btn-trans:focus { outline:0; box-shadow:none !important; } .btn-primary { color:#fff; background-color:#da2128; border-color:#da2128 } .btn-primary:hover { color:#fff; background-color:rgba(0, 0, 0, .85); border-color:rgba(0, 0, 0, .85) } .btn-primary.focus, .btn-primary:focus { box-shadow:0 0 0 .2rem rgba(71, 117, 243, .5) } .btn-primary.disabled, .btn-primary:disabled { color:#fff; background-color:#a8141a; border-color:#a8141a } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { color:#fff; background-color:#555555; border-color:#555555 } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow:0 0 0 .2rem rgba(71, 117, 243, .5) } /* BASIC css end */