@charset "utf-8";
/* *******************************************************
 * filename : renewal.css
 * description : 리뉴얼 이벤트 CSS
 * date : 2022-01
******************************************************** */

@font-face {
   font-family: 'GmarketSans';
   font-style: normal;
   font-weight: 500;
   src: url(../fonts/GmarketSansTTFMedium.woff) format('woff'),
        url(../fonts/GmarketSansTTFMedium.otf) format('opentype');
 }

@font-face {
   font-family: 'GmarketSans';
   font-style: normal;
   font-weight: 600;
   src: url(../fonts/GmarketSansTTFBold.woff) format('woff'),
        url(../fonts/GmarketSansTTFBold.otf) format('opentype');
 }

body {overflow-x: visible !important;}
 * {margin:0; padding:0; box-sizing:border-box;}
 html,body{width:100%; min-width: 320px; height:100%;margin:0;padding:0;-webkit-text-size-adjust: 100%;font-family:'GmarketSans', Dotum, '돋움', arial, sans-serif !important; font-weight: 500; letter-spacing: -0.05em; font-size: 13px; color:#333333; line-height: normal !important;}
 html,body,div,p,ul,li,ol,dl,dt,dd,input,textarea,select,hr,h1,h2,h3,h4,h5 {margin:0;padding:0; font-family:'GmarketSans', Dotum, '돋움', arial, sans-serif !important;}
 span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, button, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {background: none; margin: 0; padding: 0;}

 ul,li,ol,dl,dd,dt{list-style:none;}
 img,fieldset{border:0}
 ul,ol{list-style:none}
 em,address{font-style:normal}
 a {text-decoration:none;color:#333333;}
 caption{width:1px;height:1px;overflow:hidden;display:none}
 table{margin:0px;border-collapse:collapse;-ms-word-break: keep-all;word-break: keep-all;}
 td,th,p,span {letter-spacing: -0.05em;}/*-ms-word-break: keep-all;word-break: keep-all;*/
 select, input, textarea {font-family:'GmarketSans', Dotum, '돋움', arial, sans-serif; font-weight: 500; outline-style: none; color:#333; transition: all 0.3s;}
 select::-ms-expand { display:none;}

#renewalEvent {width: 100%;}
#renewalEvent .section-inner {width: 1300px; margin: 0 auto;}
#renewalEvent .header {background: #ffe992;}
#renewalEvent .header .section-inner {background: url('../images/header-bg.jpg') no-repeat center; position: relative; background-size: cover; padding: 117px 0 50px; overflow: hidden; text-align: center;}
#renewalEvent .header .section-inner::before {content: ''; display: block; width: 218px; height: 270px; background: url('../images/header-img01.png') no-repeat center; position: absolute; bottom: -20px; left: 140px;}
#renewalEvent .header .section-inner::after {content: ''; display: block; width: 232px; height: 238px; background: url('../images/header-img02.png') no-repeat center; position: absolute; bottom: 0; right: 140px;}
#renewalEvent .header .title-box {width: 765px; margin: 0 auto 50px; background: #fff; border: 3px solid #ff7900; text-align: center;}
#renewalEvent .header .title-box h1 {padding: 12px 0; border-bottom: 3px solid #ff7900; position: relative;}
#renewalEvent .header .title-box h1::before {content: ''; display: block; width: 73px; height: 17px; background: url('../images/header-img03.png') no-repeat center; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
#renewalEvent .header .title-box p {font-size: 88px; padding: 45px 0 40px; color: #ff7900; font-weight: 900; line-height: 1;}
#renewalEvent .header .title-box p span {display: block; color: #34394d;}
#renewalEvent .header .txt1 {font-size: 38px; color: #34394d; font-weight: 600; display: inline-flex; position: relative;}
#renewalEvent .header .txt1::before {content: ''; display: block; position: absolute; left: -10px; right: -10px; bottom: 3px; height: 15px; background: rgba(255, 121, 0, 0.3);}
#renewalEvent .header .txt1 span {position: relative; z-index: 1;}
#renewalEvent .header .txt2 {font-size: 21px; color: #34394d; margin-top: 15px; line-height: 1.5;}
#renewalEvent .header .txt2 span {display: block;}
#renewalEvent .contants-wrap {width: 100%; background: #34394d; padding: 66px 0;}
#renewalEvent .nav {width: 100%; overflow: hidden;}
#renewalEvent .nav ul {display: flex; flex-wrap: wrap; margin-right: -8px; padding-left: 2px;}
#renewalEvent .nav ul li {width: 25%; text-align: center; margin-left: -2px; display: flex; justify-content: center; text-align: center;}
#renewalEvent .nav ul li a {width: 100%; display: flex; align-items: center;  justify-content: center; border: 2px solid #ff7900; background: #34394d; align-items: center; color: #fff; font-size: 30px; font-weight: 600; padding: 15px 0; line-height: 1.5}
#renewalEvent .nav ul li a span {display: block; font-size: 25px; color: #ff7900;}
#renewalEvent .nav ul li a.active {background: #ff7900;}
#renewalEvent .nav ul li a.active span {color: #fff;}
#renewalEvent .nav.m-nav {display: none;}
#renewalEvent .nav.fixed {position: fixed; top: 0; z-index: 10; width: 1300px;}
#renewalEvent .contants-wrap section {width: 100%; background: #ff7900; padding: 66px 20px; text-align: center;}
#renewalEvent .contants-wrap section + section {margin-top: 60px;}
#renewalEvent .event-info .ctn .title {font-size: 41px; color: #34394d; font-weight: 600; padding: 20px 45px; text-align: center; background: #ffde00; position: relative; display: inline-block;}
#renewalEvent .event-info .ctn .title::before {content: ''; display: block; width: 86px; height: 56px; background: url('../images/event-title-img01.png') no-repeat center; position: absolute; left: -66px; bottom: -20px;}
#renewalEvent .event-info .ctn .title::after {content: ''; display: block; width: 86px; height: 56px; background: url('../images/event-title-img02.png') no-repeat center; position: absolute; right: -66px; bottom: -20px;}
#renewalEvent .event-info .ctn ul {display: flex; justify-content: center; align-items: flex-start;}
#renewalEvent .event-info .ctn ul li {margin: 55px;}
#renewalEvent .event-info .ctn .img-wrap {position: relative; margin-bottom: 25px; display: inline-block;}
#renewalEvent .event-info .ctn .img-wrap .num {display: flex; width: 112px; height: 112px; border-radius: 50%; background: #34394d; align-items: center; justify-content: center; color: #fff; font-size: 40px; text-align: center; font-weight: 600; position: absolute; top: 0; left: 0;}
#renewalEvent .event-info .ctn .label {font-size: 34px; font-weight: 600; color: #fff; line-height: 1.5;}
#renewalEvent .event-info .ctn .label span {display: block; font-weight: 300; font-size: 25px;}
#renewalEvent .event-info .info-list {width: 750px; margin: auto;}
#renewalEvent .event-info .info-list li {display: flex; align-items: baseline; text-align: left;}
#renewalEvent .event-info .info-list li + li {margin-top: 20px;}
#renewalEvent .event-info .info-list .label {font-size: 28px; color: #fff; text-align: center; min-width: 157px; margin-right: 20px; padding: 10px 0 5px; background: #34394d; font-weight: 600;}
#renewalEvent .event-info .info-list .txt {font-size: 34px; color: #fff;}
#renewalEvent .contants-wrap .event-notice {background: #34394d; margin-top: 0; padding: 30px 50px; display: flex; align-items: flex-start;}
#renewalEvent .event-notice .title {color: #fff; font-weight: 600; font-size: 31px; margin-right: 18px;}
#renewalEvent .event-notice ul li {color: #fff; font-size: 19px; padding-left: 10px; position: relative; text-align: left;}
#renewalEvent .event-notice ul li::before {content: '-'; position: absolute; top: 0; left: 0;}
#renewalEvent .event-notice ul li + li {margin-top: 10px;}
#renewalEvent .contants-wrap .event-notice + .event-ctn {margin-top: 0;}
#renewalEvent .event-ctn .h2 {font-size: 38px; position: relative; display: inline-block; color: #34394d; font-family:'GmarketSans', Dotum, '돋움', arial, sans-serif;}
#renewalEvent .event-ctn .h2::before {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: #34394d;}
#renewalEvent .event-ctn .h3 {font-size: 73px; color: #34394d;margin-top: 20px; font-family:'GmarketSans', Dotum, '돋움', arial, sans-serif;}
#renewalEvent .event-ctn .h4 {color:#fff; font-size: 29px; margin-top: 20px; font-weight: 400; font-family:'GmarketSans', Dotum, '돋움', arial, sans-serif;}
#renewalEvent .event-ctn .list-area {display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin-top: 60px;}
#renewalEvent .event-ctn .list-area li {margin: 30px;}
#renewalEvent .event-ctn .img-wrap {position: relative; display: inline-block;}
#renewalEvent .event-ctn .img-wrap .num {width: 70px; height: 70px; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600; background: #34394d; position: absolute; top: -35px; left: -35px; color: #fff;}
#renewalEvent .event-ctn .img-wrap img {box-shadow: 0px 3px 15px 0px rgba(255, 0, 0, 0.1);}
#renewalEvent .event-ctn .label {font-size: 25px; color: #fff; margin-top: 20px;}
#renewalEvent .event-ctn .btn {display: inline-block; padding: 18px 120px 15px; background: #fce333; font-size: 53px; font-weight: 600; color: #34394d; margin-top: 40px; box-shadow: 0px 8px 0px 0px #e16b00;}
#renewalEvent .post-wrap * {font-family: "Noto Sans KR",sans-serif !important;}
#renewalEvent .post-wrap .btn {padding: revert;}
#renewalEvent .post-wrap .far {font-family: 'Font Awesome 5 Pro' !important;}

@media all and (max-width:1300px) {
    #renewalEvent .header .section-inner {width: 100%;}
    #renewalEvent .section-inner {width: 100%;}
    #renewalEvent .header .section-inner::before {left: 30px;}
    #renewalEvent .header .section-inner::after {right: 30px;}
    #renewalEvent .nav.fixed {width: auto; left: 0; right: 0;}
    #renewalEvent .post-wrap {padding: 20px;}
}

@media all and (max-width:850px) {
    #renewalEvent .header .section-inner {padding: 50px 25px 15px 25px;}
    #renewalEvent .header .section-inner::before {left: -15px; bottom: -8px; background-size: 100%; width: 116px; height: 140px;}
    #renewalEvent .header .section-inner::after {right: -15px; bottom: -7px; background-size: 100%; width: 124px; height: 140px;}
    #renewalEvent .header .title-box {width: 100%; margin: 0 auto 20px;}
    #renewalEvent .header .title-box h1 {padding: 3px;}
    #renewalEvent .header .title-box h1 img {width: 42px;}
    #renewalEvent .header .title-box h1::before {width: 30px; height: 7px; background-size: 100%; left: 10px;}
    #renewalEvent .header .title-box p {font-size: 36px; padding: 15px;}
    #renewalEvent .header .txt1 {font-size: 17px;}
    #renewalEvent .header .txt1::before {height: 7px;}
    #renewalEvent .header .txt2 {font-size: 13px; padding: 0 87px; word-break: keep-all;}
    #renewalEvent .nav.w-nav {display: none;}
    #renewalEvent .nav.m-nav {display: block;}
    #renewalEvent .nav ul {margin-right: -2px; padding-top:2px; padding-left: 0;}
    #renewalEvent .nav ul li {width: 50%; margin-left: 0; margin-top: -2px;}
    #renewalEvent .nav ul li:nth-child(2n) {margin-left: -2px;}
    #renewalEvent .nav ul li a {font-size: 15px; padding: 10px ;}
    #renewalEvent .nav ul li a span {font-size: 13px;}
    #renewalEvent .contants-wrap {padding: 15px;}
    #renewalEvent .contants-wrap section {padding: 20px;}
    #renewalEvent .event-info .ctn .title {font-size: 16px; padding: 10px 35px;}
    #renewalEvent .event-info .ctn .title::before,
    #renewalEvent .event-info .ctn .title::after {background-size: 100%; width: 60px; height: 39px; bottom: -14px;}
    #renewalEvent .event-info .ctn .title::before {left: -47px;}
    #renewalEvent .event-info .ctn .title::after {right: -47px;}
    #renewalEvent .event-info .ctn ul li {margin: 30px 10px;}
    #renewalEvent .event-info .ctn .img-wrap img {width: 100px;}
    #renewalEvent .event-info .ctn .img-wrap .num {width: 35px; height: 35px; font-size: 13px; left: -15px;}
    #renewalEvent .event-info .ctn .label {font-size: 15px;}
    #renewalEvent .event-info .ctn .label span {font-size: 13px;}
    #renewalEvent .event-info .info-list {width: 100%;}
    #renewalEvent .event-info .info-list li + li {margin-top: 5px;}
    #renewalEvent .event-info .info-list .label {font-size: 14px; min-width: 85px; padding: 7px 5px 3px; margin-right: 5px;}
    #renewalEvent .event-info .info-list .txt {font-size: 13px;}
    #renewalEvent .contants-wrap .event-notice {padding: 20px; display: block;}
    #renewalEvent .event-notice .title {text-align: left; font-size: 16px; margin-bottom: 15px;}
    #renewalEvent .event-notice ul li {font-size: 13px;}
    #renewalEvent .event-ctn .h2 {font-size: 18px;}
    #renewalEvent .event-ctn .h3 {font-size: 34px; margin-top: 10px;}
    #renewalEvent .event-ctn .h4 {font-size: 13px; margin-top: 10px;}
    #renewalEvent .event-ctn .list-area {display: block;}
    #renewalEvent .event-ctn .list-area img {max-width: 100%;}
    #renewalEvent .event-ctn .img-wrap .num {width: 30px; height: 30px; font-size: 17px; top: -15px; left: -15px;}
    #renewalEvent .event-ctn .label {font-size: 16px; margin-top: 10px;}
    #renewalEvent .event-ctn .btn {padding: 15px 30px; font-size: 21px; margin-top: 0px;}
}


    /*  */