/* =============================================
   FONT FACES
   ============================================= */
@font-face {
    font-family: 'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
}

/* =============================================
   BASE
   ============================================= */
.wsf-wrap,
.wsf-wrap * {
    box-sizing: border-box;
}
.wsf-wrap {
    font-family: 'GmarketSans', sans-serif;
    max-width: 2000px;
    margin: 0 auto;
}

/* =============================================
   JS ANIMATION (mcont/ef)
   ============================================= */
.mcont .ef {
    transition: all .7s ease;
    opacity: 0;
    transform: translate(0, 80px);
}
.mcont .ef.off {
    opacity: 1;
    transform: translate(0, 0);
}

/* =============================================
   VISUAL HERO
   ============================================= */
.wsf-wrap .visual {
    position: relative;
    height: 920px;
    background: url(./img/hero.jpg) no-repeat center top;
}

/* =============================================
   STICKY TAB NAV
   ============================================= */
.wsf-tab-wrap {
    min-height: 150px;
}
.wsf-tab {
    position: relative;
    display: flex;
    justify-content: center;
    background: #666ffa;
}
.wsf-tab .in {
    width: 1190px;
    display: flex;
	height:150px;
    align-items: center;
    justify-content: space-between;
	column-gap:10px;
}
.wsf-tab a {
    flex: 1;
    display: flex;
    line-height: 1.1;
    flex-direction: column;
    text-align: center;
    height: 109px;
    justify-content: center;
    font-size: 25px;
    row-gap: 10px;
    color: #fff;
    font-weight: normal;
	padding-top:8px;
    transition: all 0.3s ease;
	border-radius:22px;
}
.wsf-tab a .maint {
    font-size: 32px;
    font-weight: 700;
}
.wsf-tab a.on {
    background: #fff;color:#666ffa;
}
/* Fixed state (added by JS) */
.wsf-tab.fix {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 2000px;
    z-index: 100;
}
.wsf-tab.fix + .blink {
    height: 120px;
}

/* =============================================
   TAB CONTENT - BASE
   ============================================= */
.wsf-tab-cont {
    display: flex;
    padding: 160px 0;
    align-items: center;
    justify-content: center;
}
.wsf-tab-cont .in {
    display: flex;
    width: 1190px;
    flex-direction: column;
}

/* =============================================
   SECTION C1 - 이벤트&쿠폰
   ============================================= */
.wsf-tab-cont.c1 {
    background: #fff5e7 url(./img/cont-cp.jpg) no-repeat center top;
    height: 2280px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    padding: 0;
}
.wsf-tab-cont.c1 .in {
    width: 100%;
    position: relative;
    align-items: center;
}
.wsf-tab-cont.c1 .links {
    width: 1170px;
    height: 427px;
    margin: 350px auto 93px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
}
.wsf-tab-cont.c1 .links a {
    display: block;
    color: transparent;
    font-size: 0;
}
.wsf-tab-cont.c1 .dan {
    position: relative;
    display: flex;
    column-gap: 59px;
    row-gap: 20px;
	flex-wrap:wrap;
    height: 950px;
    width: 1194px;
    margin: 320px auto 79px;
	justify-content:center;
	row-gap:117px;
}
.wsf-tab-cont.c1 .dan button {
    border: 0;
    background: none;
    cursor: pointer;
	width:355px;
	height:414px;
}
.wsf-tab-cont.c1 .btns {
    display: flex;
    flex-direction: column;
    width: 719px;
    margin: 0 auto;
    row-gap: 28px;
}
.wsf-tab-cont.c1 .btns a {
    display: flex;
    align-items: center;
    height: 170px;
    color: transparent;
    font-size: 0;
}

/* =============================================
   SECTION C2 - 숙박/여행 (공통)
   ============================================= */
.wsf-tab-cont.c2 {
    background: #fff;
    padding: 80px 0 0;
}
.wsf-tab-cont.c2 .in {
    row-gap: 10px;
}

/* =============================================
   SECTION C5 - 국내항공
   ============================================= */
.wsf-tab-cont.c5 {
    background: #ecf4fc;
    padding-top: 50px;
}
.wsf-tab-cont.c5 .in {
    row-gap: 80px;
}
.wsf-tab-cont.c5 .btn-div {
    display: flex;
    flex-direction: column;
    row-gap: 36px;
    width: 890px;
    margin: 0 auto;
}
.wsf-tab-cont.c5 .btn-div a {
    display: flex;
    width: 100%;
    border-radius: 10px;
    height: 112px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #009ac6;
    color: #fff;
    font-size: 30px;
    row-gap: 3px;
    font-weight: 700;
}
.wsf-tab-cont.c5 .btn-div a .sub {
    color: #95ff61;
    font-size: 22px;
    font-weight: 500;
}

.wsf-tab-cont.c5 .btn-div a.blue {
    background: #006dca;
	color:#95ff61 !important;
}

.wsf-tab-cont.c5 .btn-div a.blue .sub {color:#fff;}

/* =============================================
   SECTION C8 - 배너
   ============================================= */
.wsf-tab-cont.c8 {
    padding: 0;
}
.wsf-tab-cont.c8 .in {
    row-gap: 80px;
}

/* =============================================
   SECTION TITLE
   ============================================= */
.txt-tit {
    display: flex;
    flex-direction: column;
    color: #333;
    row-gap: 15px;
    justify-content: center;
    align-items: center;
}
.txt-tit .ico {display:block;width:200px;height:106px;background:url(./img/ico01.jpg) no-repeat 50% 50%;margin-bottom:5px;}
.txt-tit .ico.i02 {background-image:url(./img/ico02.jpg);}
.txt-tit .ico.i03 {background-image:url(./img/ico03.jpg);}
.txt-tit .ico.i04 {background-image:url(./img/ico04.jpg);}
.txt-tit .ico.i05 {background-image:url(./img/ico05.jpg);}

.txt-tit > strong {
    font-size: 34px;
    line-height: 1.1;
	font-weight:normal;
}
.txt-tit > span {
    font-size: 50px;font-weight:bold;
}

.txt-tit > span strong {color:#f55af8;}

/* =============================================
   IN-TAB CONTENT PANEL
   ============================================= */
.wsf-in-tab {
    display: flex;
    align-items: flex-end;
}
.wsf-in-tab a {
    flex: 1;
    border-radius: 26px 26px 0 0;
    background: #c7e1c2;
    color: #101010;
    height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    row-gap: 5px;
}
.wsf-in-tab a .maint {
    font-size: 40px;
    font-weight: 600;
}
.wsf-in-tab a.on {
    background: #fff;
}
.wsf-in-tab-cont {
    background: #fff;
    padding: 90px 35px 70px;
    border-radius: 22px;
}

/* =============================================
   PRODUCT GRID (tn-list)
   ============================================= */
.tn-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 65px;
}
.tn-list .list {
    display: flex;
    flex-direction: column;
}

/* Thumbnail */
.tn-list .list .thumb {
    overflow: hidden;
    display: block;
    height: 220px;
    position: relative;
}
.tn-list .list .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tn-list .list .thumb .type {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 11px 0;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff5f11;
    color: #fff;
    font-size: 21px;
    line-height: 1;
}

/* 쿠폰 badge */
.tn-list .list .thumb .coupon {
    box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
    display: flex;
    border-radius: 6px;
    background: #fff;
    height: 50px;
    position: absolute;
    color: #000;
    right: 10px;
    top: 10px;
    align-items: center;
    padding-top: 5px;
    overflow: hidden;
    column-gap: 10px;
    padding-left: 10px;
    padding-right: 40px;
    font-size: 20px;
    transform: scale(.7) translate(36px, -16px);
}
.tn-list .list .thumb .coupon::after {
    content: '';
    display: block;
    width: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 50px;
    background: #ff5f11 url(./img/ico.png) no-repeat 50% 50%;
    right: 0;
}
/* 쿠폰 위치 보정 - featured(p) 및 timesale */
.tn-list.timesale .list .thumb .coupon,
.tn-list.p .list:nth-child(1) .thumb .coupon,
.tn-list.p .list:nth-child(2) .thumb .coupon {
    transform: scale(.7) translate(29px, -8px);
}

/* Info area */
.tn-list .list .info {
    padding: 25px 0;
    display: block;
    color: #555;
    font-size: 16px;
}
.tn-list .list .info .name {
    display: block;
    color: #222;
    font-size: 20px;
    margin-bottom: 5px;
    height: 52px;
    overflow: hidden;
}
.tn-list .list .info .txt {
    margin-bottom: 25px;
    display: block;
    height: 39px;
    overflow: hidden;
    font-size: 15px;
}
.tn-list .list .info ul.txt {
    height: auto;
    margin-bottom: 20px;
}
.tn-list .list .info ul.txt li {
    padding-left: 10px;
    font-size: 16px;
    color: #111;
    position: relative;
}
.tn-list .list .info ul.txt li::before {
    content: '';
    display: block;
    width: 2px;
    height: 2px;
    background: #111;
    position: absolute;
    left: 3px;
    top: 10px;
}

/* Price */
.tn-list .list .info .price {
    color: #000;
    font-weight: 600;
    display: flex;
    column-gap: 10px;
    font-size: 20px;
    align-items: flex-end;
    justify-content: flex-end;
}
.tn-list .list .info .price .m {
    display: block;
    order: 1;
}
.tn-list .list .info .price strong {
    font-size: 25px;
}
.tn-list .list .info .price .dcp {
    order: 0;
    color: #808080;
    text-decoration: line-through;
    display: block;
    font-size: 16px;
    font-weight: 100;
}
.tn-list .list .info .price .dc-p {
    display: none;
    margin-left: 10px;
}

/* CTA button */
.tn-list .list .btn {
    border: 2px solid #000;
    color: #000;
    font-size: 30px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    column-gap: 5px;
    line-height: 1;
    padding-top: 7px;
}
.tn-list .list .btn::after {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    border-right: 3px solid #000;
    border-top: 3px solid #000;
    transform: rotate(45deg);
}

/* =============================================
   FEATURED PRODUCTS (tn-list.p)
   두 번 반복되던 :nth-child(1)/:nth-child(2) 규칙 통합
   ============================================= */
.tn-list.p .list:nth-child(1) { grid-column: 1 / 3; background:#f9fafc;border-radius:16px;margin-right:10px;overflow:hidden;}
.tn-list.p .list:nth-child(2) { grid-column: 3 / 5; background:#f9fafc;border-radius:16px;margin-left:10px;overflow:hidden;}

.tn-list.p .list:nth-child(1) .thumb,
.tn-list.p .list:nth-child(2) .thumb {
    height: 350px;
    margin: 0;
}
.tn-list.p .list:nth-child(1) .name,
.tn-list.p .list:nth-child(2) .name {
    font-size: 30px;
    height: auto;
    margin-bottom: 20px;
    font-weight: bold;
}
.tn-list.p .list:nth-child(1) .info,
.tn-list.p .list:nth-child(2) .info {
    margin: 0 32px;
}
.tn-list.p .list:nth-child(1) .info .txt,
.tn-list.p .list:nth-child(2) .info .txt {
    font-size: 20px;
    height: 94px;
}
.tn-list.p .list:nth-child(1) .price strong,
.tn-list.p .list:nth-child(2) .price strong {
    font-size: 30px;
}
.tn-list.p .list:nth-child(1) .thumb .type,
.tn-list.p .list:nth-child(2) .thumb .type {
    font-size: 28px;
    height: 80px;
    padding: 3px 15px 0;
}

.tn-list.p .list:nth-child(1):after,
.tn-list.p .list:nth-child(2):after {content:'자세히보기';height:90px;background:#3f3f3f;color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;}

.tn-list .list:nth-child(1) .btn,
.tn-list .list:nth-child(2) .btn {display:none;}

/* =============================================
   TIMESALE LIST (tn-list.timesale)
   ============================================= */
.tn-list.timesale {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    column-gap: 50px;
}
.wsf-tab-cont.c2 .tn-list.timesale {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: 20px;
    padding: 84px 60px;
}
.wsf-tab-cont.c2 .tn-list.timesale .btn { display: none; }
.wsf-tab-cont.c2 .tn-list.timesale .list .info .price { margin-bottom: 0; flex-wrap: nowrap; }
.wsf-tab-cont.c2 .tn-list.timesale .list .info .price .m { color: #000; }
.wsf-tab-cont.c2 .tn-list.timesale .list .info .price .m strong { font-size: 45px; }
.wsf-tab-cont.c2 .tn-list.timesale .list .info .price .dc-p { font-weight: normal; }

.tn-list.timesale .list {
    width: 500px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
}
.tn-list.timesale .list .thumb { height: 410px; }
.tn-list.timesale .list .info { padding: 40px 50px; }
.tn-list.timesale .list .info .name {
    font-size: 38px;
    height: auto;
    margin-bottom: 30px;
    font-weight: 700;
}
.tn-list.timesale .list .info ul.txt { margin-bottom: 40px; }
.tn-list.timesale .list .info ul.txt li {
    padding-left: 14px;
    font-size: 25px;
    font-weight: 500;
}
.tn-list.timesale .list .info ul.txt li::before {
    width: 3px;
    height: 3px;
    left: 3px;
    top: 15px;
}
.tn-list.timesale .list .info .price {
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    column-gap: 15px;
    color: #000;
    font-size: 40px;
    white-space: nowrap;
    row-gap: 10px;
    margin-bottom: 40px;
}
.tn-list.timesale .list .info .price .label {
    display: flex;
    height: 40px;
    border-radius: 20px;
    background: #ff4052;
    color: #fff;
    padding: 0 15px;
    font-size: 23px;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    line-height: 1;
}
.tn-list.timesale .list .info .price .dc-p {
    display: block;
    color: #ff3e59;
    font-size: 32px;
}
.tn-list.timesale .list .info .price .m {
    width: 100%;
    line-height: 1.1;
    text-align: center;
    color: #21d342;
    font-size: 33px;
}
.tn-list.timesale .list .info .price .m strong { font-size: 50px; }
.tn-list.timesale .list .info .price .dcp { color: #555; font-size: 23px; }
.tn-list.timesale .list .btn {
    border: 0;
    background: #000;
    color: #fff;
    font-size: 28px;
    border-radius: 0;
    height: 76px;
}
.tn-list.timesale .list .btn::after { display: none; }

/* =============================================
   AIRLINE SCHEDULE LIST (da-link-list)
   ============================================= */

:root {
  --color-jeju: #ff5000;
  --color-tway: #d22425;
  --color-estar: #cc163c;
  --color-seoul: #41b897;
}
  
.da-link-list {
    display: flex;
	flex-direction:column;
    row-gap: 14px;
    width: 1190px;
    justify-content: center;
	align-items:center;
    margin: 0 auto 50px;
}

.da-link-list .list {
    position: relative;
    border-radius: 12px;
    height: 185px;
    width: 845px;
	margin-left:9px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	row-gap:4px;
}
/* Border outline via pseudo */

.da-link-list .list .week {
    background:#111;color:#fff;border-radius:12px 50px 50px 0;width:112px;height:54px;font-size:26px;position:absolute;top:-4px;left:-9px;display:flex;align-items:center;justify-content:center;
}
.da-link-list .list .week:after {content:'';width:0;height:0;border:6px solid #111;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;position:absolute;bottom:-6px;left:3px;transform:rotate(-45deg);}
/* Punch-hole decorations on .week */
.da-link-list .list .logo {
    display: flex;
    height: 52px;
    align-items: center;
    justify-content: flex-end;
    font-size: 20px;
    flex-direction: column;
    width: 100%;
}
.da-link-list .list .logo span {position:absolute;top:15px;left:113px;}
.da-link-list .list .date {
    display: flex;
    height: 64px;
    align-items:center;
    justify-content: flex-start;
    width: 100%;
    flex-direction: column;
    padding: 0 36px;
    color: #474747;
}
.da-link-list .list .date .value {
    font-size: 26px;
    color: #000;
	letter-spacing:0;
}
.da-link-list .list .date .value strong {font-size:45px;}
.da-link-list .list a {
    position: absolute;
    z-index: 5;
    width: 138px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a3d9a;
    color: #fff;
    font-size: 20px;
	right:0;top:0;
	border-radius:0 12px 12px 0;
}

/* Airline brand colors
   패턴: border/week-bg/link-bg/punch-hole-border 4개가 항상 동일한 색으로 반복
   → CSS 변수 대신 선택자 그룹핑으로 중복 최소화 */
.da-link-list .list.jeju .week,
.da-link-list .list.jeju a {background:var(--color-jeju);}
.da-link-list .list.jeju .week:after {border-left-color:color-mix(in srgb, var(--color-jeju) 80%, black);}

.da-link-list .list.tway .week,
.da-link-list .list.tway a {background:var(--color-tway);}
.da-link-list .list.tway .week:after {border-left-color:color-mix(in srgb, var(--color-tway) 80%, black);}

.da-link-list .list.estar .week,
.da-link-list .list.estar a {background:var(--color-estar);}
.da-link-list .list.estar .week:after {border-left-color:color-mix(in srgb, var(--color-estar) 80%, black);}

.da-link-list .list.seoul .week,
.da-link-list .list.seoul a {background:var(--color-seoul);}
.da-link-list .list.seoul .week:after {border-left-color:color-mix(in srgb, var(--color-seoul) 80%, black);}


/* Off state (판매 전) */
.da-link-list .list.off::after {
    z-index: 10;
    content: 'COMING SOON';
    position: absolute;
	color:#fff;
	font-size:30px;
	display:flex;align-items:center;justify-content:center;
    inset: 0;
    background: rgba(105,105,105,.8);
	border-radius:12px;
	padding-bottom:50px;
}

.da-link-list .list.off .logo { opacity: 0; }
.da-link-list .list.off a { opacity: .1; }
.da-link-list .list.off .week {z-index:20;filter:grayscale(.8) saturate(.5) contrast(0.6)}

/* End/Sold out state */
.da-link-list .list.end::after {
    z-index: 15;
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(105,105,105,.8);
}
.da-link-list .list.end .date::before {
    position: absolute;
    left: 50%;
    top: 50%;
    content: 'Sold out';
    z-index: 20;
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 100%;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 7px solid #fff;
    box-sizing: border-box;
}

/* Online (진행중) state — JS가 .off 제거 후 .online 추가 */
.da-link-list .list.online,
.da-link-list .list.online + .list {
    display: flex;
}

/* =============================================
   BOTTOM BANNER GRID (flex-bn)
   ============================================= */
.flex-bn {
    width: 100%;
    background: #fff;
    padding: 150px 0;
}
.flex-bn .inner {
    width: 1190px;
    margin: 0 auto;
    display: flex;
    row-gap: 10px;
    column-gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex-bn a {
    display: flex;
}

/* =============================================
   SMS LAYER (JS 팝업)
   ============================================= */
.sms-layer,
.sms-layer * {
    box-sizing: border-box;
}
.sms-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}
.sms-layer.on {
    display: flex;
}
.sms-layer .sl-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1;
}
.sms-layer .sl-in {
    width: 500px;
    background: #fff;
    padding: 30px;
    border-radius: 26px;
    overflow: hidden;
    z-index: 110;
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    color: #111;
}
.sms-layer .sl-in .name {
    font-size: 30px;
}
.sms-layer .sl-in .close {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 21px;
    right: 21px;
    font-size: 0;
    color: transparent;
}
.sms-layer .sl-in .close::after,
.sms-layer .sl-in .close::before {
    width: 50%;
    height: 2px;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -25%;
    background: #000;
    transform: rotate(45deg);
}
.sms-layer .sl-in .close::before {
    transform: rotate(-45deg);
}
.sms-layer .sl-in .btn {
    display: flex;
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sms-layer .sl-in .layer-contents {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding: 10px 0;
}
.sms-layer .sl-in .layer-contents .name {
    display: block;
    width: 100%;
    font-size: 14px;
    margin-bottom: 5px;
}
.sms-layer .sl-in .layer-contents .msg {
    color: red;
}
.sms-layer .sl-in .layer-contents label.inp {
    display: block;
    width: 100%;
}
.sms-layer .sl-in .layer-contents label.inp input {
    height: 40px;
    border: 1px solid #ddd;
    padding: 0 15px;
    font-size: 14px;
    width: 100%;
}
.sms-layer .sl-in .layer-contents .agree-info-box {
    padding: 15px;
    border: 1px solid #ddd;
    line-height: 1.7;
    font-size: 13px;
}
.sms-layer .sl-in .layer-contents label.agree {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    cursor: pointer;
    user-select: none;
    margin-top: 15px;
    padding-top: 15px;
    font-size: 15px;
    border-top: 1px dashed #ddd;
}
.sms-layer .sl-in .layer-contents label.agree input {
    width: 16px;
    height: 16px;
}
.sms-layer .scroll {
    max-height: 560px;
    overflow-y: auto;
}
.sms-layer .evt-info .name {
    font-size: 20px;
    padding-top: 10px;
    margin-bottom: 5px;
}
.sms-layer .evt-info ul {
    margin-bottom: 15px;
}
.sms-layer .evt-info li {
    font-size: 14px;
    padding-left: 10px;
    position: relative;
}
.sms-layer .evt-info li::before {
    content: '';
    display: block;
    width: 2px;
    height: 2px;
    background: #000;
    position: absolute;
    left: 3px;
    top: 9px;
}