@charset "utf-8";

/* GmarketSans */
@font-face {
    font-family: 'GmarketSansBold';
    src: url('/expire/font/GmarketSans/GmarketSansBold.woff2') format('woff2');
    src: url('/expire/font/GmarketSans/GmarketSansBold.woff') format('woff');
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('/expire/font/GmarketSans/GmarketSansMedium.woff2') format('woff2');
    src: url('/expire/font/GmarketSans/GmarketSansMedium.woff') format('woff');
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('/expire/font/GmarketSans/GmarketSansLight.woff2') format('woff2');
    src: url('/expire/font/GmarketSans/GmarketSansLight.woff') format('woff');
}

/* --- 기본 리셋 & 공통 --- */
html, body { width: 100%; height: 100%; }
html { overflow-y: scroll; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a,
dl, dt, dd, ul, li, strong, em, img, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
    vertical-align: baseline;
    font-family: 'Pretendard', 'Noto Sans KR', '맑은 고딕', 'gulim', '굴림';
    font-weight: inherit; font-style: inherit; font-size: inherit;
    outline: 0; padding: 0; margin: 0; border: 0 none; line-height: inherit;
}
strong { font-weight: bold; }
body { width: 100%; background: #FFF; color: #333; -webkit-text-size-adjust: 100%; }
a { color: #333; cursor: pointer; }
a:hover { color: #4c68e6; cursor: pointer; text-decoration: none; transition: 0.5s; }
:link, :visited { text-decoration: none; font-size: inherit; }

/* --- 유틸 클래스 (HTML에서 사용된 것만) --- */
.m_b15 { margin-bottom: 15px !important; }
.m_t40 { margin-top: 40px !important; }
.gma_m { font-family: 'GmarketSansMedium' !important; }

/* --- 레이아웃 --- */
#wrapper { position: relative; width: 100%; min-width: 840px; }
.inner   { margin: 0 auto; width: 840px; }

/* --- visual_bg 영역 --- */
#visual_bg { width: 100%; background: #e2f0ff;}

/* --- 헤더 / 로고 --- */
#logo {display: flex; align-items: flex-end; height: 92px; gap: 8px; padding-bottom: 26px; z-index: 10; margin: 0;}

#logo h1 { position: static; line-height: 1; }
#logo h2 { position: static; line-height: 1; }
#logo h2 a {color: #185ba2; font-size: 26px; font-weight: 500; font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', tahoma, gulim, sans-serif; letter-spacing: -1px;}
#logo h2 a:hover { text-decoration: none; }

/* --- visual.renew 영역 --- */
#visual { width: 100%; margin-bottom: 40px; box-sizing: border-box; }
#visual.renew { background: url('/expire/image/renew_icon.png?v=3') no-repeat right top; }
#visual.renew_free { background: url('/expire/image/renew_free_icon.png?v=3') no-repeat right top; }

/* h3.small2 — 만료일 텍스트 */
#visual h3 {
    width: 65%; font-size: 49px; color: #000; font-weight: bold;
    line-height: 1.3; letter-spacing: -2px; word-break: keep-all;
}
#visual h3.small2 { width: 70%; font-size: 40px; padding-top: 10px; }
#visual h3 strong { color: #0076f3; }

/* v-text — 버튼 & 날짜 */
#visual .v-text p {
    font-size: 18px; color: #333; letter-spacing: -1px;
    margin-bottom: 30px; word-break: keep-all;
}
#visual .v-text p.date strong { font-weight: normal; color: #dd1c1c; }
#visual .v-text .btn_yellow {
    display: inline-block; background: #fdcc1c;
    padding: 10px 40px 10px 40px; color: #2c220e;
    font-size: 18px; font-weight: bold; letter-spacing: -1px;
    line-height: 30px; cursor: pointer;
}
#visual .v-text .btn_yellow:hover {
    background: #d11901; padding: 10px 40px 10px 40px; color: #fff;
}

/* --- cs_area (고객센터) --- */
#cs_area { margin: 0 auto; padding-bottom: 60px; box-sizing: border-box; }
#cs_area .cs_text {
    width: 192px; display: inline-block; font-size: 15px; color: #333;
    font-weight: bold;
    text-decoration: underline; letter-spacing: -1px;
}
#cs_area .cs_text a  { }
#cs_area .cs_text em { font-style: italic; }
#cs_area .cs_tel {
    float: right; font-size: 15px; color: #333;
    letter-spacing: -1px;
}
#cs_area .cs_tel strong { font-size: 16px; color: #0076f3; }
#cs_area .cs_tel strong span { font-size: 17px;}

/* --- contents 영역 --- */
#contents { padding-top: 60px; position: relative; box-sizing: border-box; }

/* SSL 배너 */
#contents .ssl {
    position: absolute; top: -45px; width: 840px; height: 85px;
    background: url('/expire/image/bg_ssl.png?v=1') no-repeat;
    padding: 20px 30px 15px; box-sizing: border-box; transition: 0.5s;
}
#contents .ssl:hover {
    background: url('/expire/image/bg_ssl_on.png?v=1') no-repeat;
    box-shadow: 20px 29px 30px 2px #d4d4e2; transition: 0.5s;
}
#contents .ssl a { display: block; }
#contents .ssl h1 {
    display: inline-block; color: #fff; font-size: 23px;
    font-weight: normal; margin-right: 20px; letter-spacing: 0;
    line-height: 1.1; word-break: keep-all;
}
#contents .ssl h1 strong { color: #ffd303; }
#contents .ssl .ssl-text { display: inline-block; }
#contents .ssl .ssl-text h6 {
    font-size: 16px; color: #fff; letter-spacing: 0;
    line-height: 1.3; word-break: keep-all;
}

/* con-area — 네이버웍스 / SMS */
#contents .con-area { margin: 20px 0 50px; box-sizing: border-box; }

#contents .con-area .nworks {
    display: inline-block; width: 49%; margin-right: 20px; float: left;
}
#contents .con-area .nworks h4 {
    width: auto; font-size: 21px; color: #222; font-weight: bold;
    background: url('/expire/image/tit_arrow2.png') no-repeat 100%;
    letter-spacing: -1px; line-height: 1.8;
    display: inline-block; padding-right: 30px;
}
#contents .con-area .nworks p {
    font-size: 15px; color: #222; font-weight: normal;
    letter-spacing: -1px; margin-bottom: 15px;
}
#contents .con-area .nworks .text-box {
    padding: 10px 30px;
    background: #eaecf2 url('/expire/image/icon_nworks.png') no-repeat 90%;
    box-sizing: border-box;
}
#contents .con-area .nworks .text-box p {
    width: 80%; font-size: 15px; color: #666;
    font-weight: normal; word-break: keep-all;
    line-height: 20px; margin-top: 14px;
}

#contents .con-area .sms { display: inline-block; width: 48.5%; }
#contents .con-area .sms h4 {
    width: auto; font-size: 21px; color: #222; font-weight: bold;
    background: url('/expire/image/tit_arrow.png?v=1') no-repeat 100%;
    letter-spacing: -1px; line-height: 1.8;
    display: inline-block; padding-right: 30px;
}
#contents .con-area .sms p {
    font-size: 15px; color: #222; font-weight: normal;
    letter-spacing: -1px; margin-bottom: 15px;
}
#contents .con-area .sms .text-box {
    padding: 10px 30px;
    background: #eaecf2 url('/expire/image/icon_sms.png') no-repeat 90%;
    box-sizing: border-box;
}
#contents .con-area .sms .text-box p {
    width: 80%; font-size: 15px; color: #666;
    font-weight: normal; word-break: keep-all;
    line-height: 20px; margin-top: 14px;
}

/* --- footer --- */
#footer {
    height: 40px; border-top: solid 1px #d3d3d3;
    text-align: center; padding-top: 20px;
}