/* .popup {position: fixed; left: 50%; top: 50%; margin: -252.5px 0 0 -175px; width: 350px; height: auto; z-index: 10000;} .popup::after {content: ''; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5);z-index: -1;} .popup img {width: 100%;} .popup .btn_close {margin-top: -3px; width: 100%; height: 50px; background-color: #292727; font-size: 16px; color: #fff; border: none;} .pc {display: none;} */ .b-modal {opacity: 0.7 !important;} div[id^='popup'] {top: 7% !important; width: 325px; border-radius: 10px; overflow: hidden;} div[id^='popup'] .btn-close {position: absolute; right: 18px; top: 10px; width: 20px; height: 20px; font-size: 0; background: url(../2022/img/btn-close.png) no-repeat; background-size: contain; border: none;} div[id^='popup'] .title {display: block; background-color: #e1a700; color: #fff; font-size: 14px; font-weight: 600; text-align: center; line-height: 40px;} div[id^='popup'] .content {position: relative; /* padding: 20px 25px; */ padding: 27px 25px; background-color: #fff;} div[id^='popup'] .content > p {text-align: center; font-family: 'GmarketSansMedium'; font-size: 14px; font-weight: bold;} div[id^='popup'] .content > p em {color: #0063d3;} div[id^='popup'] .content > span {display: block; margin-top: 15px; font-size: 13px; text-align: center; line-height: 1.35; word-break: keep-all;} div[id^='popup'] .content > span b {display: block; color: #ff0000;} /* main 팝업(이벤트) */ #popup1 .content:before {content: ''; position: absolute; left: 28px; top: 16px; width: 40px; height: 54.5px; background: url(../2022/img/popup01_ch01.png) no-repeat; background-size: contain;} #popup1 .content:after {content: ''; position: absolute; right: 23px; top: 19px; width: 38.5px; height: 50.5px; background: url(../2022/img/popup01_ch02.png) no-repeat; background-size: contain;} #popup1 .content .txt {margin-bottom: 15px; text-align: center;} #popup1 .content .txt li {font-size: 14px;} #popup1 .content .txt li:last-child {margin-top: 5px;} #popup1 .content .link {position: relative; margin-top: 12px; text-align: center; z-index: 5;} #popup1 .content .link li {display: inline-block; margin-bottom: 10px; vertical-align: top;} #popup1 .content .link li:last-child {margin-bottom: 0;} #popup1 .content .link li p {margin-bottom: 15px; width: 275px; height: 100px; font-size: 0;} #popup1 .content .link li:nth-of-type(1) p {background: url(../2022/img/mobile/popup01_img01.png) no-repeat 50%; background-size: contain;} #popup1 .content .link li:nth-of-type(2) p {background: url(../2022/img/mobile/popup01_img02.png) no-repeat 50%; background-size: contain;} #popup1 .content .link li:nth-of-type(3) p {background: url(../2022/img/mobile/popup01_img03.png) no-repeat 50%; background-size: contain;} #popup1 .content .link li a {display: block; padding: 6px 0; margin: 0 auto; width: 170px; height: 45px; background-color: #000; color: #fff; font-family: 'GmarketSansMedium'; font-size: 14px; text-align: center; border-radius: 50px; font-weight: bold; line-height: 1.3; box-sizing: border-box;} /* 서브 팝업(이벤트) */ #popup2 .content {padding: 20px 25px;} #popup2 .table {margin-top: 25px; width: 100%; border: 1px solid #e8e8e8;} #popup2 .table .th {background-color: #f2f2f2; font-size: 14px; font-weight: 600; text-align: center; line-height: 40px; border-bottom: 1px solid #e8e8e8;} #popup2 .table .scroll {padding: 25px; height: 300px; overflow-y: scroll;} #popup2 .table .scroll li {display: inline-block; margin: 0 0 15px -2px; width: 33.3%; font-size: 14px; text-align: center;} #popup2 .table .scroll.line-2 li {width: 50%;} #popup2 .table .scroll li span {display: inline-block; margin-left: 5px;} @media all and (min-width:1024px) { /* .popup {margin: -350px 0 0 -250px; width: 500px; height: 700px; z-index: 10000;} */ .pc {display: block;} .mobile {display: none;} /* body {position: relative;} */ div[id^='popup'] {top: 50% !important; width: 1000px} div[id^='popup'] .btn-close {position: absolute; right: 18px; top: 19px; width: 26px; height: 26px; font-size: 0; border: none;} div[id^='popup'] .title {font-size: 24px; line-height: 60px;} div[id^='popup'] .content {position: relative; padding: 55px 30px 40px; background-color: #fff;} div[id^='popup'] .content > p {font-size: 32px;} div[id^='popup'] .content > span {margin-top: 20px; font-size: 20px;} div[id^='popup'] .content > span b {margin-top: 10px;} /* main 팝업(이벤트) */ #popup1 {margin-top: -312px;} #popup1 .content:before {content: ''; position: absolute; left: 41px; top: 19px; width: 80px; height: 109px; background: url(../2022/img/popup01_ch01.png) no-repeat;} #popup1 .content:after {content: ''; position: absolute; right: 73px; top: 27px; width: 77px; height: 101px; background: url(../2022/img/popup01_ch02.png) no-repeat;} #popup1 .content .txt {margin-bottom: 50px;} #popup1 .content .txt li {display: inline-block; vertical-align: middle; font-size: 24px;} #popup1 .content .txt li:last-child {margin: 0 0 0 15px;} #popup1 .content .link {margin-top: 33px;} #popup1 .content .link li {margin: 0 15px 0 0;} #popup1 .content .link li:last-child {margin-right: 0;} #popup1 .content .link li p {margin-bottom: 35px; width: 300px; height: 300px;} #popup1 .content .link li:nth-of-type(1) p {background: url(../2022/img/popup01_img01.png) no-repeat 50%;} #popup1 .content .link li:nth-of-type(2) p {background: url(../2022/img/popup01_img02.png) no-repeat 50%;} #popup1 .content .link li:nth-of-type(3) p {background: url(../2022/img/popup01_img03.png) no-repeat 50%;} #popup1 .content .link li a {padding: 11px 0; width: 240px; height: 70px; font-size: 20px; text-align: center;} /* 서브 팝업(이벤트) */ #popup2 {margin-top: -408px;} #popup2 .content {padding: 40px 70px;} #popup2 .table {margin-top: 25px; border-width: 2px;} #popup2 .table .th {font-size: 24px; line-height: 60px; border-bottom-width: 2px;} #popup2 .table .scroll {padding: 35px 55px; height: 400px;} #popup2 .table .scroll li {margin: 0 0 20px -2px; width: 25%; font-size: 24px;} #popup2 .table .scroll.line-2 li {width: 33.3%;} #popup2 .table .scroll li span {margin-left: 20px;} }