@charset "utf-8";

/*----------------------------------------------------------------------------
작성일 : 2019.12.09
작성자 : 박서진
 * -------------------------------------------------------------------------*/
#footer {background:#424242}
#footer .f-logo {margin-right:3rem}
/* 공통 */
#share-wrap .container {border-top:1px solid #000;padding:2.1rem .2rem}
#share-wrap i {font-size:1.1rem;}
#share-wrap p {float:left;}
#share-wrap p > * {display:inline-block;vertical-align:middle}
#share-wrap p i {color:#f57454;margin-right:.4rem}
#share-wrap p span {font-size:.85rem;color:#222;font-weight:500}
#share-wrap .share {float:right;overflow:hidden}
#share-wrap .share a {float:left;display:block}
#share-wrap .share a + a {margin-left:1rem}
#share-wrap .share a > * {display:inline-block;vertical-align:middle}
#share-wrap .share a i {width:30px;height:30px;line-height:30px;border-radius:50%;text-align:center;margin-right:.3rem}
#share-wrap .share a span {color:#333;font-weight:500}
#share-wrap .share a:first-child i {background:#fbdd14;color:#381e1f}
#share-wrap .share a:last-child i {background:#4267b2;color:#fff}
#share-wrap .share a:hover span,#share-wrap .share a:focus span {text-decoration:underline}
/*#contents {margin:3rem 0 7.5rem}*/
/* 개발페이지 */
#sub-visual.type2 {height:15rem;}
.last-issue + #share-wrap,.subscribe-wrap + #share-wrap {display:none}
.last-issue,.subscribe-wrap {padding:3rem 0 5rem}
.tab {text-align:center}
.tab a {position:relative;display:inline-block;width:9.5rem;height:56px;line-height:56px;border:1px solid #ddd;color:#222;font-size:.9rem;font-weight:300;transition:all .4s;margin-left:.5rem}
.tab a:first-child {margin-left:0}
.tab a::after {position:absolute;left:0;bottom:0;width:100%;height:0;background:#f57454;content:'';opacity:0;transition:all .4s}
.tab a span {position:relative;z-index:1}
.tab a:hover,.tab a:focus,.tab a.active {border-color:#f57454;color:#fff}
.tab a:hover::after,.tab a:focus::after,.tab a:hover::after,.tab a.active::after {height:100%;opacity:1}
.tab a.active:hover,.tab a.active:focus {text-decoration:underline}
.last-issue .search-wrap {background:#f0f2f4;text-align:center;padding:1.05rem 0;margin:2rem 0 1.5rem}
.last-issue .search-wrap input {height:58px;line-height:58px}
.last-issue .search-wrap input[type="text"] {display:inline-block;width:51.7%;padding:0 2.25rem}
.last-issue .search-wrap input[type="submit"] {display:inline-block;margin-left:-5px;width:90px;background:#333;color:#fff;border:1px solid #333;transition:all .4s}
.last-issue .search-wrap input[type="submit"]:hover,.search-wrap input[type="submit"]:focus {background:#fff;color:#333}
.last-issue .list-wrap {border-top:2px solid #333;padding:2.1rem 0 2.5rem}
.last-issue .list-wrap li {text-align:center}
.last-issue .list-wrap li a {display:block;}
.last-issue .list-wrap li .img {position:relative;display:block;width:100%;height:210px;overflow:hidden}
.last-issue .list-wrap li .img::after {position:absolute;left:0;top:0;width:100%;height:100%;content:'';border:1px solid #ddd;transition:all .4s}
.last-issue .list-wrap li .img img {width:100%;height:100%}
.last-issue .list-wrap li a:hover .img::after, .last-issue .list-wrap li.active .img::after {border:3px solid #f57454;}
.last-issue .list-wrap li p {font-size:.9rem;font-weight:500;color:#222;margin-top:1.1rem}
.last-issue .list-wrap .bx-wrapper {position:relative;max-width:100% !important;padding:0 2.8rem}
.last-issue .list-wrap .bx-controls {position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%}
.last-issue .list-wrap .bx-controls a {display:block;position:absolute;top:50%;transform:translateY(-50%);font-size:0;width:3.75rem;height:3.75rem;line-height:3.75rem}
.last-issue .list-wrap .bx-controls a::before {display:block;font-family:'xeicon';font-size:1.5rem}
.last-issue .list-wrap .bx-controls .bx-prev {left:0}
.last-issue .list-wrap .bx-controls .bx-prev::before {content:'\e93b'}
.last-issue .list-wrap .bx-controls .bx-next {right:0;text-align:right}
.last-issue .list-wrap .bx-controls .bx-next::before {content:'\e93e'}
.last-issue .list-top {overflow:hidden;margin-bottom:1.4rem}
.last-issue .list-top p {float:left;font-size:1.3rem;font-weight:500;color:#222;margin-top:0.7rem}
.last-issue .list-top span {float:right;position:relative;cursor:pointer}
.last-issue .list-top span::after {position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-family:'xeicon';content:'\e941';}
.last-issue .list-top span select {min-width:140px;height:50px;line-height:50px;padding:0 1rem;border:1px solid #ddd;position:relative;z-index:1;background:transparent}
.last-issue .list-tit {height:3.5rem;line-height:3.5rem;background:#333;color:#fff;font-size:1.1rem;font-weight:500;padding:0 1.5rem;margin-bottom:.5rem}
.last-issue .list-tit + .list {border-top:0}
.last-issue .list td {border-bottom:1px solid #ddd;font-weight:300;color:#222;padding:1.25rem 0;text-align:left}
.last-issue .list td:nth-of-type(1) {padding-left:1.5rem}
.last-issue .list td:nth-of-type(2) {font-size:.95rem;font-weight:500;padding-left:1.5rem}
.last-issue .list td:nth-of-type(2) a br {display:none}
.last-issue .list td a {display:block}
.last-issue .list td a:hover {text-decoration:underline}
.last-issue .result-txt {margin-bottom:1.5rem}
.last-issue .result-txt > * {display:inline-block;vertical-align:middle}
.last-issue .result-txt p {color:#222;font-weight:500;font-size:1.3rem;margin-right:.8rem}
.last-issue .result-txt p strong {color:#f57454}
.last-issue .result-txt span {height:1.5rem;line-height:1.5rem;padding:0 .65rem;border-radius:30px;background:#f57454;color:#fff;font-size:.9rem;font-weight:500}
.table-wrap {border-top:2px solid #333;background:#fff}
.table-wrap thead th {padding:1rem 0 1.1rem;border-bottom:1px solid #999}
.table-wrap td {padding:1.1rem 0;border-bottom:1px solid #ddd;text-align:center}
.table-wrap.list {font-size:.85rem}
.table-wrap.list table {table-layout:fixed}
.table-wrap.list th {font-size:.9rem;font-weight:500}
.table-wrap.list td {font-weight:300}
.table-wrap.list td.title {text-align:left;padding-left:2.5rem}
.table-wrap.list td.title a {display:block;width:90%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.table-wrap.list td.title a:hover {text-decoration:underline}
.table-wrap.list td.date {font-size:.8rem;color:#767676}
/* 구독신청 및 취소 */
.subscribe-wrap .txt-wrap {position:relative;width:100%;text-align:center;padding:0 1rem;margin:4rem 0 2.5rem}
.subscribe-wrap .txt-wrap::before {position:absolute;left:0;top:0;width:100%;height:100%;border:5px solid #ff6640;content:''}
.subscribe-wrap .txt-wrap > div {position:relative;width:100%;padding:1.225rem 0}
.subscribe-wrap .txt-wrap > div::before {position:absolute;left:0;top:0;width:100%;height:100%;padding:1rem 0;background:#fff;content:'';z-index:1}
.subscribe-wrap .txt-wrap > div p {position:relative;z-index:2;margin-bottom:7px;font-size:.9rem;color:#555;font-weight:300}
.subscribe-wrap .txt-underline {margin-bottom:.8rem}
.subscribe-wrap .txt-underline span{display:block;}
.subscribe-wrap .txt-underline strong {position:relative;display:inline-block;padding-bottom:4px;font-size:1.4rem;font-weight:500;margin-bottom:8px;color:#333}
.subscribe-wrap .txt-underline strong::after {position:absolute;left:0;bottom:0;width:100%;height:1px;background:#ccc;content:''}
.subscribe-wrap .txt-underline .point-txt strong {color:#ff6640}
.subscribe-form p {margin-bottom:8px}
.subscribe-form p,.subscribe-form input {width:100%}
.subscribe-form input {height:58px;line-height:58px;padding:0 1.1rem;background:#faefea;border-color:#faefea}
.subscribe-form .info{padding:1.5rem;border:1px solid #ddd;margin:1rem 0 1.25rem}
.subscribe-form .info strong {display:block;margin-bottom:.7rem;color:#222;font-size:.85rem;font-weight:600}
.subscribe-wrap .btn {margin:1.5rem auto 0;display:block;height:2.9rem;line-height:2.9rem;width:7.5rem;text-align:center;background:#333;color:#fff;font-weight:300;border:1px solid #333;transition:all .4s}
.subscribe-wrap .btn:hover,.subscribe-wrap .btn:focus {background:#fff;color:#333}
.subscribe-wrap input:hover,.subscribe-wrap input:focus{border-color:#f57454;background:#fff}
.subscribe-form .info .bul li {font-size:.8rem !important}
/* 공통 불릿 */
.bul > li {position:relative;}
.bul > li::before {position:absolute;left:0;content:''}
.bul.num > li{padding-left:.8rem;counter-increment:number}
.bul.num > li::before{position:absolute;left:0;top:0;content:counter(number, decimal)'.'}
.bul.bar > li,.bul.dash > li {padding-left:.45rem;font-size:.8rem}
.bul.bar > li::before,.bul.dash > li::before {top:.55rem;width:4px;height:1px;background:#555}
.bul.bar > li + li,.bul.dash > li + li {margin-top:.2rem}
.bul.dot > li{padding-left:.7rem;font-size:.9rem;color:#555;margin-top:.5rem;line-height:1.6}
.bul.dot > li:first-child {margin-top:0}
.bul.dot > li::before{width:6px;height:6px;background:#999;border-radius:50%;top:.6rem}
.word {word-break:keep-all}
/* 리뷰페이지 */
.info-tit, .info-form-wrap .form-tit {font-size:1.85rem;font-weight:600;color:#333;text-align:center;line-height:1.4;padding:3rem 0}
.info-tit .color, .info-form-wrap .form-tit .color {color:#ee663d}
.info-form-wrap .form-tit {display:none}
.info-form-wrap .user-info {padding-bottom:2.5rem;}
.info-form-wrap .user-info.type2 {margin-top:3rem}
.info-form-wrap .user-info .table-wrap {border-top:2px solid #333}
.info-form-wrap .user-info table th,.info-form-wrap .user-info table td {border-bottom:1px solid #ddd;text-align:left}
.info-form-wrap .user-info table th {padding:1.175rem 0 1.175rem 1rem}
.info-form-wrap .user-info input, .info-form-wrap .user-info select {border:0;background:#fafafa;height:2.25rem;height:2.25rem;padding:0 .5rem}
.info-form-wrap .user-info td textarea {border:0;background:#fafafa;resize:none;width:100%;height:7.5rem;padding:.8rem}
.info-form-wrap .user-info input.name {min-width:300px}
.info-form-wrap .user-info .phone select,.info-form-wrap .user-info .phone input,
.info-form-wrap .user-info .email select,.info-form-wrap .user-info .email input {width:99px;margin:0 3px} 
.info-form-wrap .user-info tr > * {vertical-align:top}
.info-form-wrap .user-info tr td.txt-left {padding:1.5rem 0}
.info-form-wrap .user-info tr td.txt-left > p {margin-bottom:.5rem}
.info-form-wrap .user-info tr:first-child > * {vertical-align:middle}
.info-form-wrap .user-info tr:first-child td {padding:0}
.info-form-wrap .user-info th strong {display:block;font-size:.9rem;font-weight:500;color:#222;margin-top:.325rem}
.info-form-wrap .user-info th strong::before {display:block;width:.9rem;height:.2rem;background:#222;content:'';margin-bottom:.9rem}
.info-form-wrap .user-info .bul.num li {margin-bottom:.4rem;word-break:keep-all}
.info-form-wrap .user-info .agree {margin:1.5rem 0}
.info-form-wrap .user-info .agree:after {display:block;clear:both;content:''}
.info-form-wrap .user-info .agree p:first-child{float:left}
.info-form-wrap .user-info .agree .control{float:right}
.info-form-wrap .user-info .txt-area textarea {width:100%;height:8.5rem;resize:none;border:1px solid #ddd;background:#f8f8f8;padding:1rem}
.info-form-wrap .user-info .txt-area textarea:focus {background:#fff}
.info-form-wrap .user-info .btn {background:#f57454;border:1px solid #f57454;color:#fff;border-radius:30px;width:12rem;height:60px;line-height:56px;font-size:.85rem;font-weight:600;text-align:center;display:block;margin:auto;transition:all .4s;margin-top:1.5rem}
.info-form-wrap .user-info .btn:hover,.info-form-wrap .user-info .btn:focus {background:#fff;color:#f57454}
.info-form-wrap .user-info.type2 .table-wrap {border-top:1px solid #ddd;margin-bottom:2rem}
.info-form-wrap .user-info.type2 .info-lst {border:1px solid #ddd;padding:1.2rem}
.info-form-wrap .user-info.type2 .info-lst > p {margin-bottom:.5rem}
.info-form-wrap .user-info.type2 .info-lst > p > strong {display:block;font-size:.85rem;font-weight:600;color:#222;}
.info-form-wrap .user-info.type2 .info-lst ul {margin-top:.5rem}
.review-lst {padding:4rem 0 3.7rem;background:#fcf7f7}
.review-lst textarea {display:block;width:100%;height:7rem;resize:none;border:1px solid #ddd;padding:1.2rem;}
.review-lst .btn {margin:1.3rem auto 1.6rem;display:block;width:170px;height:3rem;line-height:3rem;color:#fff;background:#f57454;border:1px solid #f57454;font-size:.9rem;font-weight:500;text-align:center;transition:all .4s}
.review-lst .btn:hover,.review-lst .btn:focus {color:#f57454;background:#fff}
.review-lst .table-wrap {border:1px solid #ddd;background:#fff;border-bottom:0;margin-bottom:}
.review-lst .table-wrap td {border-bottom:1px solid #ddd;padding:1.1rem 0}
.review-lst .table-wrap .user-name .bul {min-width:4rem;margin-left:1.5rem;}
.review-lst .table-wrap .user-name .bul::after{position:absolute;right:0;top:.15rem;width:1px;height:.85rem;background:#ddd;content:''}
.review-lst .table-wrap .txt {text-align:left;padding-left:.9rem;font-size:.9rem;font-weight:300;color:#555;line-height:1.6}
.review-lst .table-wrap .date {font-weight:300;color:#999}
.paging {margin-top:1.5rem;text-align:center;}
.paging a {display:inline-block;line-height:1.8rem;height:2rem;color:#666;vertical-align:middle}
.paging span a {width:2rem;border:1px solid #dedede;border-radius:50%;transition:all .4s;vertical-align:middle;background:#fff}
.paging a.first .xi-angle-left:before {margin-right:-5px}
.paging a.first .xi-angle-left:after{content:'\e93b';margin-left:-5px}
.paging a.last .xi-angle-right:before {margin-right:-5px}
.paging a.last .xi-angle-right:after{content:'\e93e';margin-left:-5px}
.paging span {padding:0 .8rem}
.paging span a {margin:0 .2rem;}
.paging span a:hover,.paging a.active {border-color:#ed6f00;background:#ed6f00;color:#fff}
/* select */
.control {position:relative; padding-left:1.5rem; cursor:pointer}
.control input[type="radio"], .control input[type="checkbox"] {position:absolute; z-index:-1; opacity:0}
.control span {display:inline-block; position:absolute; left:0; top:2px; width:1rem; height:1rem; background:#fff; border:1px solid #ddd}
.control span:after {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); content:''; opacity:0; font-family:'xeicon'; content:'\e929'; color:#ee2d3c;}
.control input[type="text"] {opacity:0; margin-left:8px; transition:opacity .3s ease-in-out}
.control input[type="checkbox"]:checked~span:after, .control input[type="checkbox"]:checked~input[type="text"],.control input[type="checkbox"]:focus~span:after  {opacity:1}
.review-lst + #share-wrap {background:#fcf7f7}


/* 공통단 */
.container {width:55rem}
#sub-visual {height:29rem;background-repeat:no-repeat;background-position:center;background-size:cover;overflow:hidden;}
.mT10 {margin-top:.5rem}
.mT20 {margin-top:1rem}
.mT30 {margin-top:1.5rem}
.mT40 {margin-top:2rem}
.mT50 {margin-top:2.5rem}
[class*="section"] {padding:4.25rem 0 4.4rem;position:relative}
[class^="section"] .txt {font-size:.9rem;color:#555;font-weight:300;line-height:1.8;text-align:justify}
[class^="section"] .txt.word {text-align:inherit;word-break:keep-all}
.section1 {padding:4.2rem 0 4.4rem}
.section1 .txt {font-size:.9rem;color:#555;line-height:1.7;padding-top:2.75rem;border-top:1px solid #999;margin-top:3.5rem}
.section1 .intro {text-align:center}
.section1 .intro .category {position:relative;display:inline-block;color:#f46c4e;padding:0 .9rem;}
.section1 .intro .category:before,.section1 .intro .category:after {position:absolute;content:'';top:50%;transform:translateY(-50%);width:2px;height:14px;background:#ffb69f}
.section1 .intro .category:before {left:0}
.section1 .intro .category:after {right:0}
.section1 .intro .tit {font-family:'Godo',sans-serif;font-weight:400;color:#222;font-size:2.3rem;margin:1.2rem 0 0;}
.section1 .intro .author {font-size:.9rem;color:#555;font-weight:300;margin-top:1.5rem;font-family:'Noto',sans-serif}
.section1 .intro .author strong {color:#222;font-weight:500;margin-right:4px}
.section1 .intro .author i {color:#f57454;font-size:1.1rem;margin-right:4px}
.section1 .intro .author > * {display:inline-block;vertical-align:middle}
.card .lst {padding-top:4rem;border-top:1px solid #999;text-align:center;margin-top:4rem}
.card .lst p + p {margin-top:2.5rem}
.hash-tit {position:relative;padding-left:1.05rem;font-size:1.3rem;font-weight:600;color:#222;margin-bottom:1.8rem}
.hash-tit::before {position:absolute;left:0;top:0;content:'#'}
.hash-tit::after {position:absolute;right:0;top:.65rem;width:100%;height:12px;background:url('../../../images/webzine/sub/hash.png');content:''}
.hash-tit span {position:relative;display:inline-block;padding-right:2rem;background:#fff;z-index:1;word-break:keep-all}
.hash-tit span::after {position:absolute;right:1.05rem;top:0;width:.4rem;height:.4rem;background:#f57454;border-radius:50%;content:''}
.half-round-tit {width:100%;border-top-left-radius:30px;padding:.85rem 1.4rem .9rem;margin:2.5rem 0 1.5rem}
.half-round-tit.rr {border-top-left-radius:0;border-top-right-radius:30px;}
.half-round-tit strong {display:inline-block;font-size:1.1rem;color:#fff;font-weight:500;vertical-align:middle;margin-left:.7rem}
.half-round-tit span {display:inline-block;width:2.25rem;height:2.25rem;line-height:2.25rem;text-align:center;border-radius:50%;vertical-align:middle;color:#fff}
.round-tit {border-top-left-radius:30px;border-top-right-radius:30px;padding:1.3rem 1.75rem 1.35rem;margin-top:3rem;}
.round-tit::after{display:block;clear:both;content:''}
.round-tit .tit {float:left;font-size:1.1rem;font-weight:500}
.round-tit .location {float:right;font-size:.9rem;fotn-weight:300}
.round-tit .location i {margin-right:.5rem}
.underline-tit {text-align:center;font-size:1.3rem;font-weight:700;line-height:1.6;margin-bottom:2.2rem;word-break:keep-all}
.underline-tit span {border-bottom:1px solid}
.bold-tit {font-size:1.1rem;font-weight:600;color:#222;margin:2.5rem 0 1rem;word-break:keep-all}
.caption {font-size:.9rem;padding:1.3rem 1.5rem;border:1px solid #e7e9ec;background:#e7e9ec}
.caption.type2 {background:#fff;border-color:#ddd}
.caption sup {color:#f57454}
.caption strong {font-weight:500;color:#222}
.caption span {font-weight:300;color:#555}
.img-2::after {display:block;clear:both;content:''}
.img-2 span {float:left;display:block;width:calc(50% - 10px);margin-left:1rem}
.img-2 span:first-child {margin:0 !important}
.white-border {border:.5rem solid #fff}
.web {display:block}
.mobile {display:none}



/* sub05 상품 테스트 */
.product-test .product-info ul {overflow:hidden;}
.product-test .product-info li {float:left;cursor:pointer}
.product-test .product-info .info-wrap {position:relative;width:100%;background:#fff;text-align:center}
.product-test .product-info .info-wrap::before {position:absolute;left:0;top:0;width:100%;height:0;background:#f57a5c;opacity:0;content:'';z-index:1;transition:all .4s}
.product-test .product-info .info-wrap > * {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%}
.product-test .product-info .info-wrap > p {opacity:0;z-index:2;transition:all .4s;transition-delay:.4s;color:#fff;font-size:.9rem;line-height:1.6;width:100%}
.product-test .product-info li > p {margin-top:1.5rem;font-size:.9rem;font-weight:500;color:#222;text-align:center}
.product-test .product-info li:hover .info-wrap::before,.product-test .product-info li:focus .info-wrap::before {height:100%;opacity:.95}
.product-test .product-info li:hover .info-wrap > p,.product-test .product-info li:focus .info-wrap > p {opacity:1}
.qna-wrap {background:#fff;}
.qna-wrap .circle {display:inline-block;margin-right:.8rem;width:50px;height:50px;line-height:50px;border-radius:50%;text-align:center;color:#fff;font-family:'Gotham',sans-serif;font-weight:700;font-size:1.2rem}
.qna-wrap .bold {display:inline-block;font-size:1.1rem;color:#222;font-weight:500}
.qna-wrap .question{position:relative;background:#e7edf7;padding:1rem 1.5rem}
.qna-wrap .question::before {position:absolute;bottom:-.9rem;left:2.3rem;width:0;height:0;border:.5rem solid transparent;border-top:.5rem solid #e7edf7;border-left:.5rem solid #e7edf7;content:''}
.qna-wrap .question .circle {background:#26406f;vertical-align:middle}
.qna-wrap .question .circle + strong {width:calc(100% - 3.5rem);vertical-align:middle;word-break:keep-all}
.qna-wrap .answer{padding:1.25rem 1.5rem 2rem}
.qna-wrap .answer .circle {background:#f57454;vertical-align:top}
.qna-wrap .answer > .txt {display:inline-block;width:calc(100% - 3.5rem);vertical-align:top} 
.qna-wrap .answer > .txt p {margin-top:.5rem}
.qna-wrap + .qna-wrap {margin-top:2rem}


/* sub10 퀴즈&이벤트 페이지 */
p.bul {position:relative;padding-left:.7rem;display:inline-block;text-align:left;font-size:.9rem;font-weight:500;color:#222}
p.bul::before {position:absolute;left:0;top:.35rem;width:7px;height:7px;background:#f57454;border-radius:50%;content:''}
.quiz-event .title {font-size:2rem;color:#333;font-weight:600;margin-bottom:2rem;text-align:center}
.prize {margin-top:1.5rem}
.prize .row {margin-bottom:1.7rem}
.prize .col-xs-12:first-child {padding-right:.5rem}
.prize .col-xs-12:last-child {padding-left:.5rem}
.prize .col-xs-12 > div {padding:1rem 2rem 1rem 2.5rem;border:1px solid #eee}
.prize .col-xs-12 > div p,.prize .col-xs-12 > div img {display:inline-block;vertical-align:middle}
.prize .col-xs-12 > div p {width:calc(100% - 150px);font-size:.9rem;font-weight:300;word-break:keep-all}
.prize .col-xs-12 > div p strong {display:block;font-weight:600;margin-bottom:4px}
.prize ul {text-align:center}
.prize li {display:inline-block;font-size:.9rem;font-weight:300;color:#555;margin:0 .3rem}
.prize li strong {font-weight:600;color:#333}
.quiz-event .section2{padding:3.2rem 0 5rem;background:url('../../../images/webzine/sub/2020/event-bg.jpg') repeat}
.quiz-event .section2 .title span {color:#f57454}
.quiz-event [class^="quiz0"] {position:relative;width:740px;margin:auto;text-align:center;}
.quiz-event [class^="quiz0"]::before {position:absolute;top:0;left:50%;transform:translateX(-50%);width:.5rem;height:100%;background:#f57454;opacity:.4;content:''}
.quiz-event [class^="quiz0"] > strong {position:relative;display:block;width:115px;margin:auto;height:51px;line-height:51px;background:#f57454;border-radius:30px;font-size:1rem;color:#fff;text-transform:uppercase;z-index:1}
.quiz-event [class^="quiz0"] > div {position:relative;padding-bottom:2.5rem;margin-top:1rem}
.quiz-event [class^="quiz0"] > div::after {position:absolute;right:0;top:0;width:1.3rem;height:1.35rem;content:'';background:url('../../../images/webzine/sub/2020/quiz_arr.png')}
.quiz-event [class^="quiz0"]:last-child > div {padding-bottom:0}
.quiz-event .quiz-txt {background:#fff;color:#333;font-weight:500;font-size:1.3rem;line-height:1.3;padding:2.8rem 1rem;word-break:keep-all}
.quiz-event .select-answer {position:relative;height:330px;}
.quiz-event .select-answer > div:first-child {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;z-index:1}
.quiz-event .select-answer > div:first-child a {position:relative;margin:0 1rem;display:inline-block;width:10rem;height:10rem;line-height:10rem;border-radius:50%;}
.quiz-event .select-answer > div:first-child a::before {position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;opacity:.7;background:#000;content:'';transition:all .4s}
.quiz-event .select-answer > div:first-child a img {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%}
.quiz-event .select-answer > div:first-child a:hover::before,.quiz-event .select-answer > div:first-child a:focus::before {opacity:1;background:#f57454}
.quiz-event .hint {position:absolute;right:1.5rem;bottom:1.5rem}
.quiz-event .hint i {color:#fff;font-size:1rem;vertical-align:middle;margin-right:3px}
.quiz-event .hint span {color:#fff;font-size:.9rem;vertical-align:middle}
.quiz-event .answer {position:absolute;left:0;top:0;width:100%;height:0;padding:2.7rem 2.4rem;opacity:0;overflow:hidden;transition:all .4s;z-index:-1}
.quiz-event .answer::before {position:absolute;left:0;top:0;width:100%;height:100%;content:''}
.quiz-event .answer > * {position:relative;color:#fff}
.quiz-event [id^="correct"]::before {background:#f57454}
.quiz-event [id^="wrong"]::before {background:#000;opacity:.8}
.quiz-event .answer i {display:block;font-size:3rem;margin-bottom:.5rem}
.quiz-event .answer p:first-child {position:relative;font-size:1.3rem;font-weight:500;padding-bottom:1.5rem;margin-bottom:1.5rem}
.quiz-event .answer p:first-child::after {position:absolute;left:0;bottom:0;width:100%;height:1px;border-bottom:1px dotted #fff;content:'';opacity:.4}
.quiz-event .answer p.explain {font-size:.9rem;font-weight:300;line-height:1.6}
.quiz-event .answer a {display:block;margin:auto;position:relative;width:5.85rem;height:2.5rem;line-height:2.5rem}
.quiz-event .answer a::after {position:absolute;left:0;top:0;width:100%;height:100%;border:1px solid #fff;opacity:.5;content:''}
.quiz-event .answer a:hover::after,.quiz-event .answer a:focus::after {transform:rotateX(180deg); transition:all .6s ease-in-out;}
.quiz-event .answer.active {opacity:1;height:100%;overflow:visible;z-index:2}

.prize-check {width:260px;display:block;text-align:center;margin:2.25rem auto 0;color:#fff;background:#f57454;border:1px solid #f57454;transition:all .4s;font-size:.9rem;font-weight:500;padding:0.9rem .5rem;position:relative;z-index:8;border-radius:30px}
.prize-check i {margin-left:.4rem}
.prize-check:hover {background:#fff;color:#f57454;text-decoration:underline}
#prize-check {position:fixed;left:calc(50% + 110px);top:50%;transform:translate(-50%, -50%);width:55rem;max-width:calc(100% - 2rem);background:#fbf5e9;padding:1.7rem 2.5rem;z-index:-2;opacity:0;height:0;overflow:hidden;transition:opacity .4s,height .4s;padding:0 4.4rem}
#prize-check .close {position:absolute;right:1.25rem;top:1.25rem;font-size:1rem;color:#fff;width:2rem;height:2rem;line-height:2rem;text-align:center;border-radius:50%;background:#d0b1b5}
#prize-check .close i {transition:all .4s}
#prize-check .close:hover i {transform:rotate(180deg)}
#prize-check > .tit {display:block;text-align:center;padding-bottom:1.5rem;border-bottom:1px dotted #262524}
#prize-check > .tit > * {display:inline-block;vertical-align:middle}
#prize-check > .tit strong {margin-left:.6rem;font-size:1rem;color:#333;font-weight:600}
#prize-check .prize-list {position:relative;padding:2.4rem 1.35rem 0}
#prize-check .prize-list > div + div {margin-top:20px}
#prize-check .prize-list .tit {position:relative;padding-left:13px;font-weight:700;display:inline-block;vertical-align:top;margin-right:20px;min-width:140px}
#prize-check .prize-list .tit:before {position:absolute;left:0;top:50%;transform:translateY(-50%);content:'';width:6px;height:6px;background:#eab78b;border-radius:50%;}
#prize-check .prize-list ul {margin:-15px 0 0 -10px;display:inline-block;width:calc(100% - 155px);vertical-align:top}
#prize-check .prize-list ul:after {display:block;clear:both;content:''}
#prize-check .prize-list li {float:left;background:#fff;margin:10px 0 0 10px;padding:0 12px;height:32px;line-height:32px;font-weight:300;border-radius:30px}
#prize-check .prize-list .info {font-size:.7rem;color:#8a7376;font-weight:300;margin-top:.2rem;display:inline-block}
#prize-check.active {opacity:1;height:auto;overflow:visible;z-index:9;padding:1.5rem 4.4rem 2rem}



@media(max-width:1400px){
	.info-form-wrap .user-info .phone select, .info-form-wrap .user-info .phone input {width:65px}
	#prize-check {width:45rem}
}
@media(max-width:1280px){
	.info-form-wrap .user-info table th {word-break:keep-all}
	.info-form-wrap .user-info table th br {display:none}
	#sub-visual.issue {background-position:right center}
}
@media(max-width:1200px){
	.info-form-wrap .user-info table {table-layout:fixed}
	.info-form-wrap .user-info colgroup {display:none}
	.info-form-wrap .user-info tbody,.info-form-wrap .user-info tr,.info-form-wrap .user-info th,.info-form-wrap .user-info td {display:block;width:100% !important}
	.info-form-wrap .user-info tr td.txt-left {padding:.8rem 1rem !important}
	.info-form-wrap .user-info th strong br {display:none}
	.info-form-wrap .user-info input.name {min-width:inherit;width:100%}
}
@media(max-width:1080px){
	.container {max-width:calc(100% - 2rem)}
    .prize .col-xs-12 {padding:0 !important}
    .prize .col-xs-12 + .col-xs-12 div {border-top:0}
	#prize-check > p {display:block;text-align:center}
	#prize-check .prize-list {display:block;width:100%;padding:1.7rem 0 0;margin:1.5rem 0 0}
	#prize-check .prize-list:before {top:0;left:0;transform:translateY(0);width:100%;height:1px}
	#prize-check .close {top:1.7rem;transform:translateY(0)}
	#prize-check {left:50%}
}
@media(max-width:1026px){
	.web {display:none}
	.mobile{display:block !important}
	.search-wrap{padding:1.5rem 1rem}
	.search-wrap input[type="text"] {width:calc(100% - 100px);padding:0 1.5rem}
	.table-wrap.list colgroup,.table-wrap.list thead {display:none}
	.table-wrap.list tr {position:relative;display:block;width:100%;padding:1rem 1.5rem;border-bottom:1px solid #ddd}
	.table-wrap.list td{padding:0 !important;display:block;border:0 !important;text-align:left !important}
	.table-wrap.list td a {margin:.5rem 0}
	.table-wrap.list .category {position:absolute;left:4rem;top:1rem}
	.table-wrap.list td.title a {width:100%}
	.qna-wrap .question .circle + strong,.qna-wrap .answer > .txt {width:calc(100% - 3.8rem)}
}
@media(max-width:768px){
	.page-txt {padding:1.5rem 1rem}
	.quiz-event [class^="quiz0"] {width:100%}
	
}
@media(max-width:700px){
	.info-form-wrap .user-info .agree > * {float:none !important}
	.info-form-wrap .user-info .agree p:first-child {margin-bottom:.5rem}
	.review-lst .table-wrap tr {position:relative;display:block;clear:both;}
	.review-lst .table-wrap td {display:block;text-align:left;padding:.9rem} 
	.review-lst .table-wrap .user-name .bul {margin-left:0}
	.review-lst .table-wrap .date {border:0;position:absolute;right:0;top:0;}
	#share-wrap p,#share-wrap .share {float:none}
	#share-wrap .share {margin-top:1rem}
	/* sub10 이벤트 */
	.quiz-event .answer p.explain br {display:none}
	.quiz-event .answer {word-break:keep-all}
}
@media(max-width:640px){
	.img-4 {margin:0 0 0 -1.45rem}
	.img-4 span {width:calc(50% - 1.45rem);margin:1.45rem 0 0 1.45rem}
	.img-3 p {display:block;margin:auto;width:100%;float:none;padding:0;text-align:center}
	.img-3 p + p {margin-top:.5rem}
	.img-5 span {width:32%}
}
@media(max-width:600px){
	.img-2.mT2 {margin-top:0}
	.img-2 span {display:block;width:100%;text-align:center}
	.img-2 span + span {margin:1rem 0 0}
	#prize-check .prize-list .tit {display:block}
	#prize-check > .tit strong {margin-top:.5rem}
	#prize-check .prize-list ul {width:100%;margin-top:0;display:block}
	#prize-check {padding:0 1rem}
	#prize-check.active {padding:1.5rem 1rem}
	
}
@media(max-width:550px){
	.img-table span {display:block;text-align:center;}
	.img-table span + span {padding:10px 0 0}
	.white-box {padding:1.5rem}
	.page-tit span {padding-right:2rem;word-break:keep-all}
	.section1 .intro .category:before, .section1 .intro .category:after {width:1px}
}
@media(max-width:540px){
	.qna-wrap .question .circle + strong, .qna-wrap .answer > .txt {width:calc(100% - 4.5rem)}
	/* sub10 이벤트 */
	.quiz-event .select-answer {height:240px}
}
@media(max-width:500px){
	#sub-visual {height: 250px !important;margin-top:4rem}
	#prize-check strong {display:block;margin:0;text-align:center;padding:0}
	#prize-check strong:before {display:block;position:static;transform:translateY(0);margin:0 auto 1rem}
	/*.section1 .intro .tit {word-break:keep-all}*/
	.hash-tit span::after {display:none}
	.section1 .txt {text-align:justify !important}
	.section1 .intro .author strong {margin-top:2px}
}
@media(max-width:430px){
	.half-round-tit {border-top-left-radius:15px}
	.half-round-tit.rr {border-top-right-radius:15px}
	#prize-check {top:calc(50% + 50px)}
	#prize-check.active {overflow-y:scroll}
	.subscribe-wrap .txt-underline strong {font-size:1.2rem}
	.subscribe-wrap .txt-wrap > div p {word-break:keep-all}
	.review-wrap .review-form input.name {min-width:inherit;width:100%}
	.review-wrap .review-form .phone select, .review-wrap .review-form .phone input {width:5rem}
	.last-issue .search-wrap {padding:1rem}
	.last-issue .search-wrap input {height:40px;line-height:40px}
	.last-issue .search-wrap input[type="text"],.last-issue .search-wrap input[type="submit"] {display:block;width:100%;margin:0}
	.last-issue .search-wrap input[type="submit"] {height:2.5rem;line-height:2.5rem}
	.quiz-event .select-answer {height:280px}
	.quiz-event .select-answer > div:first-child a {width:6rem;height:6rem}
	.quiz-event .select-answer > div:first-child a img {width:3rem;height:3.5rem}
	.product-test .product-info li > p {font-size:.8rem}
	.card .lst p + p {margin-top:1.5rem}
}
@media(max-width:400px){
	.page-tit strong {width:74px}
	.page-tit span {width:calc(100% - 74px)}
	.prize .col-xs-12 > div p {width:100%}
	#sub-wrap.type2 #sub-visual h2::before,#sub-wrap.type2 #sub-visual h2::after{width:3rem}
	#sub-wrap.type2 .tab a {width:8rem}	
	/* sub10 이벤트 */
	.last-issue .list-wrap li {margin:0 13px !important}
	.qna-wrap .answer > .txt {width:100%;padding-top:1rem}	
	.quiz-event .quiz-txt br {display:none}
}