.riverPost.sponsoredRiver .assetText, .fullListing .riverPost.sponsoredRiver, .seasonalListing .riverPost.sponsoredRiver, #promo-wrap-replay .promo-inner-wrap-replay, .responsiveLatest {zoom:1} .riverPost.sponsoredRiver .assetText:before, .fullListing .riverPost.sponsoredRiver:before, .seasonalListing .riverPost.sponsoredRiver:before, #promo-wrap-replay .promo-inner-wrap-replay:before, .responsiveLatest:before, .riverPost.sponsoredRiver .assetText:after, .fullListing .riverPost.sponsoredRiver:after, .seasonalListing .riverPost.sponsoredRiver:after, #promo-wrap-replay .promo-inner-wrap-replay:after, .responsiveLatest:after {content:""; display:table} .riverPost.sponsoredRiver .assetText:after, .fullListing .riverPost.sponsoredRiver:after, .seasonalListing .riverPost.sponsoredRiver:after, #promo-wrap-replay .promo-inner-wrap-replay:after, .responsiveLatest:after {clear:both} .social-button-small::after, .riverPost.sponsoredRiver .assetText::after, .fullListing .riverPost.sponsoredRiver::after, .seasonalListing .riverPost.sponsoredRiver::after, #promo-wrap-replay .promo-inner-wrap-replay::after, .fivePack::after, .fullWidthFourAsset::after, .mostShared::after, .miniFullListing::after, .miniFullListing li::after, .fullListing .riverPost .assetText::after, .dontMissRight::after, .dontMissRight div::after, .productList::after, .productList li::after, .fdListing .riverPost .assetText::after, .fdListing .riverPost .assetText .ratingContainer::after, .tag-listing ul::after, .popularForums .asset::after, #activeDiscussion::after, .moreTopStories::after, .moreTopStories .substories::after, #FDpromoUnit .thumb figure::after, #promoUnit .thumb figure::after, #FDconnectComponent .socialButtons::after, #connectComponent .socialButtons::after, .specialPackageListing .list::after, .branded-content-hero-container::after, .brandedContentShowcaseGrid::after, .ad-leader-plus-top::after, .ad-leader-plus-incontent-top::after {clear: both;} .social-button-small::before, .riverPost.sponsoredRiver .assetText::before, .fullListing .riverPost.sponsoredRiver::before, .seasonalListing .riverPost.sponsoredRiver::before, #promo-wrap-replay .promo-inner-wrap-replay::before, .fivePack::before, .fullWidthFourAsset::before, .mostShared::before, .miniFullListing::before, .miniFullListing li::before, .fullListing .riverPost .assetText::before, .dontMissRight::before, .dontMissRight div::before, .productList::before, .productList li::before, .fdListing .riverPost .assetText::before, .fdListing .riverPost .assetText .ratingContainer::before, .tag-listing ul::before, .popularForums .asset::before, #activeDiscussion::before, .moreTopStories::before, .moreTopStories .substories::before, #FDpromoUnit .thumb figure::before, #promoUnit .thumb figure::before, #FDconnectComponent .socialButtons::before, #connectComponent .socialButtons::before, .specialPackageListing .list::before, .branded-content-hero-container::before, .brandedContentShowcaseGrid::before, .ad-leader-plus-top::before, .ad-leader-plus-incontent-top::before, .social-button-small::after, .riverPost.sponsoredRiver .assetText::after, .fullListing .riverPost.sponsoredRiver::after, .seasonalListing .riverPost.sponsoredRiver::after, #promo-wrap-replay .promo-inner-wrap-replay::after, .fivePack::after, .fullWidthFourAsset::after, .mostShared::after, .miniFullListing::after, .miniFullListing li::after, .fullListing .riverPost .assetText::after, .dontMissRight::after, .dontMissRight div::after, .productList::after, .productList li::after, .fdListing .riverPost .assetText::after, .fdListing .riverPost .assetText .ratingContainer::after, .tag-listing ul::after, .popularForums .asset::after, #activeDiscussion::after, .moreTopStories::after, .moreTopStories .substories::after, #FDpromoUnit .thumb figure::after, #promoUnit .thumb figure::after, #FDconnectComponent .socialButtons::after, #connectComponent .socialButtons::after, .specialPackageListing .list::after, .branded-content-hero-container::after, .brandedContentShowcaseGrid::after, .ad-leader-plus-top::after, .ad-leader-plus-incontent-top::after {content: ""; display: table;} /* 웹폰트 */ @import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css'); .btn-more, .load-more { border-radius:5px; text-align:center; background-color:#eee; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(#ffffff, #eeeeee); background-image:linear-gradient(#ffffff, #eeeeee); text-shadow:0 1px rgba(255, 255, 255, 0.9); border:1px solid #d4d4d4; box-shadow:0 0 1px rgba(0, 0, 0, 0.1); color:#768696; line-height:30px; font-size:14px } .btn-more:hover, .load-more:hover { color:#000; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6f6f6), color-stop(100%, #eeeeee)); background-image:-webkit-linear-gradient(#f6f6f6, #eeeeee); background-image: linear-gradient(#f6f6f6, #eeeeee) } .btn-more.load-end, .load-more.load-end {display:none} .btn-link {border:none; border-radius:5px; background-color:#B80000; color:#fff; font-size:16px; font-weight:bold; padding:17px 65px 13px; display:inline-block; text-transform:capitalize} .btn-link:hover {background-color: #FF8B00; color: #fff} .tag-ad, .tag-recency-1, .tag-recency-2, .tag-recency-3, .tag-recency-4, .tag-gallery, .tag-article, .tag-review, .tag-howto, .tag-video, .tag-deal, .tag-trending, .tag-collection, .tag-facebook, .tag-twitter, .tag-comments, .tag-linkedin { text-transform:uppercase; display:inline-block; color:#fff; padding:6px 10px 8px 10px; font-weight:bold; font-size:12px; z-index:1; position:relative } .btn-link, .popOut .videoPromo .videoSlide:hover .img:after, .popOut .videoPromo .videoSlide:hover .meta, .videoPromo .videoSlide .img:after, .videoPromo .meta, .videoContainer .sharebarRedesign.inline-view li.sharebarRedesignButton.moreButton:hover .hoverWrap, .videoContainer .sharebarRedesign.inline-view li.sharebarRedesignButton .hoverWrap, .social-button-small, a, a h1, a h2, a h3, a h4, a h5, a h6 { -webkit-transition-property:all; transition-property:all; -webkit-transition-duration:0.2s; transition-duration:0.2s; -webkit-transition-timing-function:ease; transition-timing-function:ease } .modal .close, .videoPlayer .closeButton .close { background:#000; border-radius:50%; fill:#fff; padding:4px; width:12px; height:12px; border:2px solid #fff; stroke:#fff; stroke-width:2px; right:-10px; top:-10px; cursor:pointer; position:absolute } .breadcrumb a:hover, a:hover, a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6, #ads_dynamicTextLink_standalone .miniPremiereBrandInfo a:hover, #contentPromo .assetAuthor a:hover {color:#FF8B00} /*! normalize.css v1.0.2 | MIT License | git.io/normalize */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display:block} audio, canvas, video {display:inline-block} audio:not([controls]) {display:none; height:0} [hidden] {display:none} html {- webkit-text-size-adjust:100%; - ms-text-size-adjust:100%} body {margin:0} a:focus {outline:thin dotted} a:active, a:hover {outline:0} h1 {font-size:2em} abbr[title] {border-bottom:1px dotted} b, strong {font-weight:bold} dfn {font-style:italic} mark {background:#ff0; color:#000} code, kbd, pre, samp {font-size:1em} pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word} q {quotes:"\201C" "\201D" "\2018" "\2019"} small {font-size:80%} sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline} sup {top:-0.5em} sub {bottom:-0.25em} img {border:0} svg:not(:root) {overflow:hidden} figure {margin:0} fieldset {border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em} legend {border:0; padding:0} button, input, select, textarea {font-size:100%; margin:0} button, input {line-height:normal} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance:button; cursor:pointer} button[disabled], input[disabled] {cursor:default} input[type="checkbox"], input[type="radio"] {box-sizing:border-box; padding:0} input[type="search"] {-webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none} button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0} textarea {overflow:auto; vertical-align:top} table {border-collapse:collapse; border-spacing:0} html {background-color:#fff; height:100%; min-width:1024px} ul {margin:0; padding:0} ul li {list-style:none} img {width:100%; height:auto} audio {width:100%; height:40px} article {margin-bottom:20px} article section {margin-bottom:40px} article section section {margin-bottom:20px} p {margin:0 0 20px} small {font-size:13px} em {font-style:italic} hr {margin:0 0 20px; border:0; border-top:1px solid #E4E7EA} pre {margin:0 0 20px} code, kbd, pre, samp {font-size:15px} .row {zoom:1; width:auto} .row:before, .row:after {content:""; display:table} .row:after {clear:both} /* 주요 비디오 */ .container {min-width:995px; max-width:1254px; padding-left:1.43541%; padding-right:1.43541%; margin-left:auto; margin-right:auto; zoom:1} .container:before, .container:after {content:""; display:table} .container:after {clear:both} [class|="col"] {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; float:left; margin-left:0} [class|="col"]~[class|="col"] {margin-left:1.43541%} .col-12 {width:100%; position:relative} .col-12 .col-12 {width:100%} .col-12 .col-11 {width:91.54705%} .col-12 .col-10 {width:83.0941%} .col-12 .col-9 {width:74.64115%} .col-12 .col-8 {width:66.1882%} .col-12 .col-7 {width:57.73525%} .col-12 .col-6 {width:49.2823%} .col-12 .col-5 {width:40.82935%} .col-12 .col-4 {width:32.3764%} .col-12 .col-3 {width:23.92344%} .col-12 .col-2 {width:15.47049%} .col-12 .col-1 {width:7.01754%} .col-12 [class|="col"]~[class|="col"] {margin-left:1.43541%} .col-11 {width:91.54705%; position:relative} .col-11 .col-11 {width:100%} .col-11 .col-10 {width:90.76655%} .col-11 .col-9 {width:81.5331%} .col-11 .col-8 {width:72.29965%} .col-11 .col-7 {width:63.0662%} .col-11 .col-6 {width:53.83275%} .col-11 .col-5 {width:44.5993%} .col-11 .col-4 {width:35.36585%} .col-11 .col-3 {width:26.1324%} .col-11 .col-2 {width:16.89895%} .col-11 .col-1 {width:7.66551%} .col-11 [class|="col"]~[class|="col"] {margin-left:1.56794%} .col-10 {width:83.0941%; position:relative} .col-10 .col-10 {width:100%} .col-10 .col-9 {width:89.82726%} .col-10 .col-8 {width:79.65451%} .col-10 .col-7 {width:69.48177%} .col-10 .col-6 {width:59.30902%} .col-10 .col-5 {width:49.13628%} .col-10 .col-4 {width:38.96353%} .col-10 .col-3 {width:28.79079%} .col-10 .col-2 {width:18.61804%} .col-10 .col-1 {width:8.4453%} .col-10 [class|="col"]~[class|="col"] {margin-left:1.72745%} .col-9 {width:74.64115%; position:relative} .col-9 .col-9 {width:100%} .col-9 .col-8 {width:88.67521%} .col-9 .col-7 {width:77.35043%} .col-9 .col-6 {width:66.02564%} .col-9 .col-5 {width:54.70085%} .col-9 .col-4 {width:43.37607%} .col-9 .col-3 {width:32.05128%} .col-9 .col-2 {width:20.7265%} .col-9 .col-1 {width:9.40171%} .col-9 [class|="col"]~[class|="col"] {margin-left:1.92308%} .col-8 {width:66.1882%; position:relative} .col-8 .col-8 {width:100%} .col-8 .col-7 {width:87.22892%} .col-8 .col-6 {width:74.45783%} .col-8 .col-5 {width:61.68675%} .col-8 .col-4 {width:48.91566%} .col-8 .col-3 {width:36.14458%} .col-8 .col-2 {width:23.37349%} .col-8 .col-1 {width:10.60241%} .col-8 [class|="col"]~[class|="col"] {margin-left:2.16867%} .col-7 {width:57.73525%; position:relative} .col-7 .col-7 {width:100%} .col-7 .col-6 {width:85.35912%} .col-7 .col-5 {width:70.71823%} .col-7 .col-4 {width:56.07735%} .col-7 .col-3 {width:41.43646%} .col-7 .col-2 {width:26.79558%} .col-7 .col-1 {width:12.1547%} .col-7 [class|="col"]~[class|="col"] {margin-left:2.48619%} .col-6 {width:49.2823%; position:relative} .col-6 .col-6 {width:100%} .col-6 .col-5 {width:82.8479%} .col-6 .col-4 {width:65.69579%} .col-6 .col-3 {width:48.54369%} .col-6 .col-2 {width:31.39159%} .col-6 .col-1 {width:14.23948%} .col-6 [class|="col"]~[class|="col"] {margin-left:2.91262%} .col-5 {width:40.82935%; position:relative} .col-5 .col-5 {width:100%} .col-5 .col-4 {width:79.29688%} .col-5 .col-3 {width:58.59375%} .col-5 .col-2 {width:37.89063%} .col-5 .col-1 {width:17.1875%} .col-5 [class|="col"]~[class|="col"] {margin-left:3.51563%} .col-4 {width:32.3764%; position:relative} .col-4 .col-4 {width:100%} .col-4 .col-3 {width:73.89163%} .col-4 .col-2 {width:47.78325%} .col-4 .col-1 {width:21.67488%} .col-4 [class|="col"]~[class|="col"] {margin-left:4.4335%} .col-3 {width:23.92344%; position:relative} .col-3 .col-3 {width:100%} .col-3 .col-2 {width:64.66667%} .col-3 .col-1 {width:29.33333%} .col-3 [class|="col"]~[class|="col"] {margin-left:6%} .col-2 {width:15.47049%; position:relative} .col-2 .col-2 {width:100%} .col-2 .col-1 {width:45.36082%} .col-2 [class|="col"]~[class|="col"] {margin-left:9.27835%} .col-1 {width:7.01754%; position:relative} .col-1 .col-1 {width:100%} .col-1 [class|="col"]~[class|="col"] {margin-left:20.45455%} label[class|="validate"] {padding:6px 10px 6px; margin-top:-7px; margin-bottom:15px; float:left} label[class|="validate"]:before {position:absolute; top:-12px; content:""; display:block; width:0; height:0; border:solid 6px; border-color:transparent transparent #62c462 transparent} div[class|="validate"] {padding:6px 10px 6px; margin-bottom:15px} label[class|="validate"], div[class|="validate"] { background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1))); background:-webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); background:linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); border-radius:5px; -webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); font-size:13px; line-height:1.1; font-weight:bold; color:#fff; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2); margin-bottom:15px; position:relative } label[class|="validate"] a, div[class|="validate"] a {color:#fff} label.validate-success, div.validate-success {background-color:#62c462} label.validate-success:before, div.validate-success:before {border-bottom-color:#62c462} label.validate-error, div.validate-error {background-color:#B80000} label.validate-error:before, div.validate-error:before {border-bottom-color:#B80000} label.validate-info, div.validate-info {background-color:#5bc0de} label.validate-info:before, div.validate-info:before {border-bottom-color:#5bc0de} label.validate-warning, div.validate-warning {background-color:#f89406} label.validate-warning:before, div.validate-warning:before {border-bottom-color:#f89406} input.validate-success, textarea.validate-success, select.validate-success {border-color:#62c462} input.validate-success:focus, textarea.validate-success:focus, select.validate-success:focus {-webkit-box-shadow:0 0 5px rgba(98, 196, 98, 0.75); box-shadow:0 0 5px rgba(98, 196, 98, 0.75); border-color:#4fbd4f} input.validate-error, textarea.validate-error, select.validate-error {border-color: #B80000} input.validate-error:focus, textarea.validate-error:focus, select.validate-error:focus {-webkit-box-shadow:0 0 5px rgba(184, 0, 0, 0.75); box-shadow:0 0 5px rgba(184, 0, 0, 0.75); border-color:#9f0000} input.validate-info, textarea.validate-info, select.validate-info {border-color:#5bc0de} input.validate-info:focus, textarea.validate-info:focus, select.validate-info:focus {-webkit-box-shadow:0 0 5px rgba(91, 192, 222, 0.75); box-shadow:0 0 5px rgba(91, 192, 222, 0.75); border-color:#46b8da} input.validate-warning, textarea.validate-warning, select.validate-warning {border-color:#f89406} input.validate-warning:focus, textarea.validate-warning:focus, select.validate-warning:focus {-webkit-box-shadow:0 0 5px rgba(248, 148, 6, 0.75); box-shadow:0 0 5px rgba(248, 148, 6, 0.75); border-color:#df8505} .iframe-content {overflow:hidden} .meta {color:rgba(255, 255, 255, 0.5); font-size:12px; position:absolute; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center} .meta svg {margin-left:5px; width:16px; height:16px; fill:rgba(255, 255, 255, 0.5)} /* 태그바탕 설정 */ .tag-ad {background-color:rgba(76, 176, 80, 0.7)} .tag-recency-1 {background-color:rgba(163, 19, 72, 0.7)} .tag-recency-2 {background-color:rgba(163, 19, 72, 0.7)} .tag-recency-3 {background-color:rgba(163, 19, 72, 0.7)} .tag-recency-4 {background-color:rgba(163, 19, 72, 0.7)} .tag-gallery {background-color:rgba(253, 106, 62, 0.7)} .tag-article {background-color:rgba(182, 38, 133, 0.7)} .tag-review {background-color:rgba(101, 0, 152, 0.7)} .tag-howto {background-color:rgba(252, 163, 61, 0.7)} .tag-video {background-color:rgba(203, 49, 49, 0.7)} .tag-deal {background-color:rgba(5, 176, 245, 0.7)} .tag-deal.coupon {z-index:5; max-width:60%; box-sizing: border-box} .tag-trending {background-color:rgba(202, 49, 49, 0.7)} .tag-collection {background-color:rgba(204, 204, 0, 0.7)} .tag-facebook {background:rgba(59, 89, 152, 0.7)} .tag-twitter {background:rgba(85, 172, 238, 0.7)} .tag-comments {background:rgba(170, 24, 1, 0.7)} .tag-linkedin {background:rgba(0, 119, 181, 0.7)} label.radio .icon { height: 24px; width: 24px; border: 1px solid #CDCDCD; border-radius: 12px; background-color: #F7F7F7; position: relative; display: inline-block; margin-right: 5px; vertical-align: middle; top: -1px; font-size: 17px; line-height: 21px } label.radio .icon:after {position: absolute; display: block; content: ""; width: 20px; height: 20px; border-radius: 10px; top: 2px; left: 2px} label.radio input {display: none} label.radio.checked .icon:after {background-color: #B80000; font-weight: bold} html, button, input, select, textarea {color: #000} body {font-size:17px; line-height:1.4; font-family:'Nanum Gothic', 'Malgun Gothic', Verdana, Geneva, sans-serif} a {text-decoration:none; cursor:pointer; color:#B80000} a h1, a h2, a h3, a h4, a h5, a h6 {color:#000} html.od-tablet {position: relative} h1, h2, h3, h4, h5, h6 {text-rendering: optimizelegibility; margin: 0} /*-- --*/ #rbWrapper {position:relative; overflow-x:hidden} #rbContent {padding-bottom:20px; position: relative; background: #fff} /* 상단광고 */ body:not(.es) .ad-nav-ad { border-bottom:2px solid #FFF;} .ads_flex_overtext {display:block !important; position:absolute; top:6px; right:30px; z-index:4999; width:auto; font-size:10px; color:#959595; text-transform:uppercase; line-height:normal; text-align:center; cursor:default;} /* 서브메뉴 슬라이드 */ @-webkit-keyframes fadeMenuIn { 0% {opacity: 0; visibility: hidden} 50% {opacity: 0; visibility: visible} 100% {opacity: 1; visibility: visible} } @-moz-keyframes fadeMenuIn { 0% {opacity: 0; visibility: hidden} 50% {opacity: 0; visibility: visible} 100% {opacity: 1; visibility: visible} } @-ms-keyframes fadeMenuIn { 0% {opacity: 0; visibility: hidden} 50% {opacity: 0; visibility: visible} 100% {opacity: 1; visibility: visible} } @-o-keyframes fadeMenuIn { 0% {opacity: 0; visibility: hidden} 50% {opacity: 0; visibility: visible} 100% {opacity: 1; visibility: visible} } @keyframes fadeMenuIn { 0% {opacity: 0; visibility: hidden} 50% {opacity: 0; visibility: visible} 100% {opacity: 1; visibility: visible} } @-webkit-keyframes fadeMenuOut { 0% {opacity: 1; visibility: visible} 99% {opacity: 0; visibility: visible} 100% {opacity: 0; visibility: hidden} } @-moz-keyframes fadeMenuOut { 0% {opacity: 1; visibility: visible} 99% {opacity: 0; visibility: visible} 100% {opacity: 0; visibility: hidden} } @-ms-keyframes fadeMenuOut { 0% {opacity: 1; visibility: visible} 99% {opacity: 0; visibility: visible} 100% {opacity: 0; visibility: hidden} } @-o-keyframes fadeMenuOut { 0% {opacity: 1; visibility: visible} 99% {opacity: 0; visibility: visible} 100% {opacity: 0; visibility: hidden} } @keyframes fadeMenuOut { 0% {opacity: 1; visibility: visible} 99% {opacity: 0; visibility: visible} 100% {opacity: 0; visibility: hidden} } @-webkit-keyframes forceWhiteHeader { 0% {opacity: 1; visibility: visible} 100% {opacity: 1; visibility: visible} } @-moz-keyframes forceWhiteHeader { 0% {opacity: 1; visibility: visible} 100% {opacity: 1; visibility: visible} } @-ms-keyframes forceWhiteHeader { 0% {opacity: 1; visibility: visible} 100% {opacity: 1; visibility: visible} } @-o-keyframes forceWhiteHeader { 0% {opacity: 1; visibility: visible} 100% {opacity: 1; visibility: visible} } @keyframes forceWhiteHeader { 0% {opacity: 1; visibility: visible} 100% {opacity: 1; visibility: visible} } /* ---------------------------------------------------- */ /* Header */ /* ---------------------------------------------------- */ #rbHeader {font-size:13px; position:absolute; padding:40px 0; width:100%; z-index:1000000; top:0; display -webkit-flex; display:flex; -webkit-align-items:center; align-items:center} #rbHeader:after { content: ""; position:absolute; display:block; height:160px; width:100%; top:0; left:0; z-index:-1; pointer-events:none; background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, rgba(0, 0, 0, 0))); background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); background:linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%) } .noBleed #rbHeader:after {display:none} .noBleed #rbHeader .menuHead, .noBleed #rbHeader #profileMenu {color:#000} .noBleed #rbHeader .menuClick>svg {fill:#000} .noBleed #rbHeader #loginMenu {color:#000; border-color:#000; transition:color .1s ease-out, background .1s ease-out, border-color .1s ease-out} .noBleed #rbHeader #loginMenu:hover {background-color:#B80000; border-color:#B80000; color:#fff} /* 로고 */ #rbHeader .rbLogo {position:relative; float:left; display:block; margin:0 30px 0 40px; width:140px; height:52px; z-index:99999999} #rbHeader .rbLogo .logo {display:block; height:70px; width:140px; top:-15px; left:-9px; position:absolute} /* 메뉴 */ #rbHeader nav {position:relative; display:-webkit-flex; display:flex; width:100%; min-width:995px} .primary {-webkit-flex-grow:2; flex-grow:2; padding-left:5px} #rbHeader .submenu {float:left} /* 주 메뉴 */ #rbHeader .menu, #rbHeader .menuClick, #rbHeader .link {float:left; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; padding:15px 14px; max-height:52px; cursor:pointer} #rbHeader .menuHead {color:#ccc; position:relative; z-index:5000001; text-transform:uppercase; font-weight:bold} /* 서브 메뉴 */ #rbHeader .tab {font-weight:normal; width:100%; position:absolute; z-index:1000001; background:#fff; opacity:0; visibility:hidden; top:-40px; left:0; padding:100px 0 50px; min-height:145px; min-width:1032px; cursor:auto} #rbHeader .tab:after {content:""; position:absolute; display:block; height:100vh; width:100%; top:100%; left:0; z-index:-1; pointer-events:none; background-color:rgba(33, 33, 33, 0.8)} .od-tablet #rbHeader .tab:after {content: ""; position:absolute; display:block; height:200vh; width:100%} #rbHeader .tab a {color:#000; display:block; -webkit-transition:none; transition:none} #rbHeader .tab a:hover {color:#B80000; font-weight:bold} #rbHeader .tab .wrapper {font-size:14px; display:-webkit-flex; display:flex; visibility:hidden; opacity:0; padding-left:215px} #rbHeader .tab ul {width:150px; padding-left:18px; border-left:1px solid #E4E7EA} #rbHeader .tab ul:first-child {border-left:0px} #rbHeader .tab ul:not(:last-of-type) {margin-right:18px} /* 국가선택 닫기 */ #rbHeader .tab .close2 {position:relative; top:-64px; right:25px; width:16px; height:16px; padding:15px 14px; float:right; display:flex; z-index:5; background-color:#FFF;} #rbHeader .tab .close2 a { font-size:16px;} #rbHeader li {margin:10px 0; font-weight:bold} #rbHeader li:first-child {margin-top: 0} #rbHeader li:last-child {margin-bottom: 0} #rbHeader li.selected, #rbHeader li span.selected {font-weight: bold} #rbHeader .tab ul.logged-in {width:auto} #rbHeader .tab .hed {color:#959595; text-transform:uppercase} /* 검색_국가선택_로그인 메뉴 */ #rbHeader .secondary {-webkit-justify-content:flex-end; justify-content:flex-end; margin-right:20px} #rbHeader .secondary .menuClick {fill: #ccc; color: #ccc; position: relative} :not(.touch-enabled) #rbHeader .secondary .menuClick:hover>svg {fill: #B80000} #rbHeader .secondary .menuClick>svg {width: 18px; height: 18px; z-index: 5000001} #rbHeader.passthru.intentionalHover #rbHeader .secondary .menuClick>svg, #rbHeader.passthru.menuOpen #rbHeader .secondary .menuClick>svg {fill:#000} #rbHeader .secondary .menu {fill:#ccc} #rbHeader .secondary #searchMenu {text-transform: uppercase; font-weight: bold; padding-right: 0} #rbHeader .secondary #searchMenu svg {margin-right: 8px} #rbHeader .secondary .menuClick a {color:#ccc; width:18px; z-index:5000001} #rbHeader .secondary .menuClick a:hover { color:#B80000;} #rbHeader .secondary .menuClick a {font-size:18px; height:18px; line-height:12px;} #rbHeader .secondary .tab {right: 0} #rbHeader .secondary .tab .wrapper {-webkit-justify-content: flex-end; justify-content: flex-end} /* 검색확장메뉴 */ #rbHeader #search {padding:30px 0 0; z-index:9999999; min-height:82px} #rbHeader #search nav {min-width:0} #rbHeader #search .wrapper {display:block; padding-right:45px; padding-left:225px} #rbHeader #search .wrapper .menuWrapper {padding:0 0 30px 36px} #rbHeader #search .close {width:15px; height:15px; font-size:15px; float:right; margin:-51px 80px 0 0; padding:10px; cursor:pointer} #rbHeader #search form {margin-bottom:0} #rbHeader #search ul {width:auto; padding-left:20px} #rbHeader #search ul li:hover, #rbHeader #search ul .selected {color:#B80000; font-weight:bold} #rbHeader #search ul.topCategories {width:auto; font-size:18px; margin-top:20px} #rbHeader #search ul.topCategories h4 {text-transform:uppercase; font-size:12px; color:#959595} #rbHeader #search ul.topCategories button {background:transparent; color:#B80000; border:0; padding:0; font-weight:bold; text-transform:uppercase; position:absolute; top:-40px; right:182px; font-size:12px} #rbHeader #search ul.topCategories button svg {height:9px; width:9px; margin-left:6px} #rbHeader #editionMenu .wrapper, #rbHeader #loginMenu .wrapper {padding-right:85px} #rbHeader #loginMenu {padding:12px 10px 11px; margin-left:8px} #rbHeader #loginMenu:hover {color:#B80000} #rbHeader #profileMenu {text-transform:uppercase; font-weight:bold; z-index:5000001; outline:none} #rbHeader #profileMenu:hover {color:#B80000} #rbHeader.intentionalHover .secondary .menuClick:not(:hover) .menuHead>svg, #rbHeader.menuOpen .secondary .menuClick:not(:hover) .menuHead>svg {fill:#000} #rbHeader.intentionalHover .menuHead, #rbHeader.menuOpen .menuHead {color:#000} #rbHeader.intentionalHover .secondary #searchMenu, #rbHeader.menuOpen .secondary #searchMenu {color:#000} #rbHeader.intentionalHover .secondary #searchMenu:hover svg, #rbHeader.menuOpen .secondary #searchMenu:hover svg {fill:#B80000} #rbHeader.intentionalHover .secondary #searchMenu svg, #rbHeader.menuOpen .secondary #searchMenu svg {fill:#000} #rbHeader.intentionalHover .secondary .menuClick, #rbHeader.menuOpen .secondary .menuClick {fill:#000} #rbHeader.intentionalHover .secondary #loginMenu, #rbHeader.menuOpen .secondary #loginMenu {color:#000; border-color:#000} #rbHeader.intentionalHover .secondary #loginMenu:hover, #rbHeader.menuOpen .secondary #loginMenu:hover {color:#B80000} #rbHeader.intentionalHover .secondary #profileMenu:not(.selected), #rbHeader.menuOpen .secondary #profileMenu:not(.selected) {color:#000} #rbHeader.intentionalHover .secondary #profileMenu:not(.selected):hover, #rbHeader.menuOpen .secondary #profileMenu:not(.selected):hover {color:#B80000} :not(.touch-enabled) #rbHeader .menu:hover .menuHead, :not(.touch-enabled) #rbHeader .menuClick:hover .menuHead, :not(.touch-enabled) #rbHeader .link:hover .menuHead {color:#B80000} :not(.touch-enabled) #rbHeader.intentionalHover .menu:hover .menuHead, :not(.touch-enabled) #rbHeader.menuOpen .menu:hover .menuHead {color:#B80000} #rbHeader:not(.showSearch) .menuHead:focus {color: #FF8B00} #rbHeader .selected.tab, #rbHeader .selected .wrapper {opacity: 1; visibility: visible} #rbHeader .selected.menuClick>svg {fill: #B80000} #rbHeader .selected#profileMenu {color: #B80000} .noBleed #rbWrapper {padding-top:112px} #loginTab .wrapper, #editionTab .wrapper {-webkit-justify-content: flex-end; justify-content: flex-end; text-align: right; padding-left: 0; padding-right: 60px} #loginTab .tab ul:not(:last-of-type), #editionTab .tab ul:not(:last-of-type) {padding-right: 18px; margin-right: 0} #loginMenu { text-transform: uppercase; font-weight: bold; padding: 12px 10px; border: 2px solid #ccc; border-radius: 7px; z-index: 5000001; outline: none; transition: color .1s ease-out, background .1s ease-out, border-color .1s ease-out } #loginMenu:hover {color: #B80000; border-color: #fff; background-color: #fff} #loginMenu .menuHead .is-logged-in svg {display: none} #loginMenu .tab .logged-out~.logged-out {border-right: none; padding-right: 0} #loginMenu .user-avatar {position: absolute; top: -1px; left: -33px; height: 26px; width: 26px; z-index: 7} .is-logged-in #loginMenu .user-avatar {box-shadow: 0 1px rgba(255, 255, 255, 0.2)} .is-logged-in .logged-out, .is-logged-in #loginMenu {display: none} .not-logged-in .logged-in, .not-logged-in #profileMenu {display: none} .searchBar {border:1px solid #E4E7EA; margin-bottom:10px; margin-right:130px; display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between} .searchBar input {box-shadow:none; border:none; background:transparent; font-size:18px; padding:10px; margin-right:102px; -webkit-flex-grow:2; flex-grow:2} .searchBar input::-webkit-input-placeholder {opacity:1} .searchBar input:moz-placeholder {opacity:1} .searchBar input::-moz-placeholder {opacity:1} .searchBar input:-ms-input-placeholder {opacity:1} .searchBar input::-ms-clear {display:none} .searchBar .submit {padding: 11px 10px 0 20px} .searchBar button {border:none; background:none; float:right; width:59px; padding-right:24px} .searchBar button.ready {opacity:1} .searchBar svg {fill: #000; vertical-align: middle; width: 16px; height: 16px} /* 메뉴 효과 설정 */ :not(.touch-enabled) #rbHeader.passthru.intentionalHover:not(.showSearch) .menu:hover .tab, :not(.touch-enabled) #rbHeader.passthru.intentionalHover:not(.showSearch) .menu:hover .wrapper { -webkit-animation: fadeMenuIn 0.3s ease-in forwards; -moz-animation: fadeMenuIn 0.3s ease-in forwards; -ms-animation: fadeMenuIn 0.3s ease-in forwards; -o-animation: fadeMenuIn 0.3s ease-in forwards; animation: fadeMenuIn 0.3s ease-in forwards } :not(.touch-enabled) #rbHeader.passthru.intentionalHover:not(.showSearch) .menu:hover .tab, :not(.touch-enabled) #rbHeader.passthru.intentionalHover:not(.showSearch) .menu:hover .wrapper, :not(.touch-enabled) #rbHeader.passthru.menuOpen:not(.showSearch) .menu:hover .tab, :not(.touch-enabled) #rbHeader.passthru.menuOpen:not(.showSearch) .menu:hover .wrapper { -webkit-animation: forceWhiteHeader 0.3s ease-in forwards; -moz-animation: forceWhiteHeader 0.3s ease-in forwards; -ms-animation: forceWhiteHeader 0.3s ease-in forwards; -o-animation: forceWhiteHeader 0.3s ease-in forwards; animation: forceWhiteHeader 0.3s ease-in forwards } :not(.touch-enabled) #rbHeader.fadeOut:not(.showSearch):not(.passthru) .menu:hover .tab, :not(.touch-enabled) #rbHeader.fadeOut:not(.showSearch):not(.passthru) .menu:hover .wrapper { -webkit-animation: fadeMenuOut 0.3s ease-in forwards; -moz-animation: fadeMenuOut 0.3s ease-in forwards; -ms-animation: fadeMenuOut 0.3s ease-in forwards; -o-animation: fadeMenuOut 0.3s ease-in forwards; animation: fadeMenuOut 0.3s ease-in forwards } .menuOpen .primary {visibility: hidden; pointer-events: none} #rbHeader.showSearch:after {content: ""; position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; pointer-events: none} #rbHeader.showSearch .menuHead {pointer-events: none} #searchMenu .searchOverlay {display:none} .showSearch #searchMenu .searchOverlay {display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2} .showSearch #searchMenu .tab {z-index: 3} .menu.active .menuHead:before { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) inset; border-radius: 5px; content: ""; position: absolute; display: block; height: 100%; width: 100%; top: -15px; left: -15px; padding: 15px } .noBleed .menu.active .menuHead:before, .intentionalHover .menu.active .menuHead:before, .menuOpen .menu.active .menuHead:before {box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15) inset} li#user-header {margin-bottom:14px} li#user-header:after {content:""; display: block; height: 1px; width: 194px; right: 84px; margin-top: 6px; position: absolute; background: #E4E7EA} /* 확장메뉴 닫기 */ #modalBodyWrapper {position:fixed; top:0; left:0; height:100vh; width:100%; overflow:auto; z-index:99999} #modalBodyWrapper:before {background:none} a.cessite {width: 80px; float:left; fill:#ccc; margin-left:-13px; margin-top:2px; position:relative; z-index:99999998} .noBleed a.cessite {fill: #ccc} /*----*/ .blockLayout4 {display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; margin-bottom:30px} .blockLayout4 .item {width:23.92344%; height:275px; margin-right:1.43541%; margin-bottom:14.25px; float:left} .blockLayout4 .item.b2x1 {width: calc(47.84689% + 1.43541%)} .blockLayout4 .item.b2x2 {width: calc(47.84689% + 1.43541%); height: 601px} .blockLayout4 .item.b1x2 {height: 601px} .blockLayout4 .item.b4x1 {width: 100%} .blockLayout4 .item.b4x2 {width: 100%; height: 601px} .blockLayout4.c2 .i2 {margin-right: 0} .blockLayout4.c3 .i3 {margin-right: 0} .blockLayout4.c4 .i4 {margin-right: 0} .blockLayout4.c5 .i3 {margin-right: 0} .blockLayout4.c5 .i4 {margin-left: 50.7177%; margin-top: -308px} .blockLayout4.c6 .i3 {margin-right: 0} .blockLayout4.c6 .i6 {margin-right: 0} .blockLayout4.c7 .i3 {margin-right: 0} .blockLayout4.c7 .i7 {margin-right: 0} .blockLayout4.c8 .i3 {margin-right: 0} .blockLayout4.c8 .i4 {margin-left: 50.7177%; margin-top: -308px} .blockLayout4.c5 .i5 {margin-right: 0; margin-top: -308px} .blockLayout4.c8 .i5 {margin-top: -308px; margin-right: 0} .blockLayout4.c8 .i8 {margin-right: 0} .blockLayout4.c9 .i3 {margin-right: 0} .blockLayout4.c9 .i4 {margin-left: 50.7177%; margin-top: -308px} .blockLayout4.c9 .i5 {margin-right: 0; margin-top: -308px} .blockLayout4.c9 .i9 {margin-right: 0} .blockLayout4.c10 .i3 {margin-right: 0} .blockLayout4.c10 .i7 {margin-right: 0} .blockLayout4.c10 .i10 {margin-right: 0} .blockLayout4.c11 .i3 {margin-right: 0} .blockLayout4.c11 .i7 {margin-right: 0} .blockLayout4.c11 .i11 {margin-right: 0} .blockLayout4.c12 .i4 {margin-right: 0} .blockLayout4.c12 .i8 {margin-right: 0} .blockLayout4.c12 .i12 {margin-right: 0} .blockLayout4.c13 .i3 {margin-right: 0} .blockLayout4.c13 .i4 {margin-left: 50.7177%; margin-top: -308px} .blockLayout4.c13 .i5 {margin-right: 0; margin-top: -308px} .blockLayout4.c13 .i9 {margin-right: 0} .blockLayout4.c13 .i13 {margin-right: 0} .blockLayout4.c14 .i3 {margin-right: 0} .blockLayout4.c14 .i7 {margin-right: 0} .blockLayout4.c14 .i11 {margin-right: 0} .blockLayout4.c14 .i14 {margin-right: 0} .blockLayout4.c15 .i3 {margin-right: 0} .blockLayout4.c15 .i7 {margin-right: 0} .blockLayout4.c15 .i11 {margin-right: 0} .blockLayout4.c15 .i15 {margin-right: 0} .blockLayout4.c16 .i4 {margin-right: 0} .blockLayout4.c16 .i8 {margin-right: 0} .blockLayout4.c16 .i12 {margin-right: 0} .blockLayout4.c16 .i16 {margin-right: 0} .blockLayout2 {display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; margin-bottom:30px; float:left; width:calc(47.84689% + 1.43541%); margin-right:1.43541%} .blockLayout2 .item {width: 48.54369%; margin-right: 2.87081%; height:275px; margin-bottom: 14.25px; float: left} .blockLayout2 .item.b2x1 {width:100%; margin-right:0;} .blockLayout2 .item:nth-child(3n) {margin-right:0; margin-bottom:30px} /* 푸토 */ #cnetFooter {background-color: #222; position: relative; color: #959595; overflow: hidden; z-index: 1} #cnetFooter a:hover {color: #FF8B00} #cnetFooter .rbLogo {margin-right: 18px} #cnetFooter svg {fill: #959595} #cnetFooter .cessite {display: none} #cnetFooter .col-4 {border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 25px 0 20px} #cnetFooter .disclosure {font-size: .82353em; text-align: center} #cnetFooter .disclosure .hed {color: #fff; text-transform: uppercase;font-weight: bold} .dtl {text-align: right; font-size: .82353em} .dtl>div:nth-of-type(2) {margin-left: 0} .dtl>div:nth-of-type(2)>div:after {display: none} .dtl>div>div {float: right; margin-left: 6px} .dtl>div>div:after {content: "|"; color: rgba(255, 255, 255, 0.2); margin-left: 6px} .linkContainer {text-align: center; padding: 20px 0 25px} .linkContainer a {font-size: .82353em; padding-left: 8px; margin-left: 6px; position: relative; color: #fff} .linkContainer a:after {content: "/"; color: rgba(255, 255, 255, 0.2); display: block; position: absolute; left: -3px; top: 0} .linkContainer a:first-of-type {padding-left: 0; margin-left: 0} .linkContainer a:first-of-type:after {display: none} .linkContainer a:hover:after {color:#444} /**/ .dtlBrands {color:#666; text-transform:uppercase; font-size:12px; position:relative} /**/ #cnetLegal {position: relative; font-size: .82353em} .es #cnetLegal {max-width: 925px} /* body 설정 */ .touch-disabled .videoPlayer .sharebarRedesign.inline-view li.sharebarRedesignButton.moreButton:hover>.hoverWrap, .touch-enabled .videoPlayer .sharebarRedesign.inline-view li.sharebarRedesignButton.moreButton.hover>.hoverWrap { height: 44px; top: -46px; width: 220px } /* 로그인 팝업 */ .authentication ._interests, .authentication ._interests:before, .authentication ._interests:after, .authentication ._interests:after, .authentication { display: none } .authentication.show {display: block} .authentication.show .modal .active>*:nth-child(1) {opacity:0; animation:formFadeIn 0.5s .3s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(2) {opacity:0; animation:formFadeIn 0.5s .6s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(3) {opacity:0; animation:formFadeIn 0.5s .9s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(4) {opacity:0; animation:formFadeIn 0.5s 1.2s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(5) {opacity:0; animation:formFadeIn 0.5s 1.5s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(6) {opacity:0; animation:formFadeIn 0.5s 1.8s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(7) {opacity:0; animation:formFadeIn 0.5s 2.1s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(8) {opacity:0; animation:formFadeIn 0.5s 2.4s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(9) {opacity:0; animation:formFadeIn 0.5s 2.7s ease-in 1 forwards} .authentication.show .modal .active>*:nth-child(10) {opacity:0; animation:formFadeIn 0.5s 3s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(1) {opacity: 1; animation: formFadeOut 0.5s .3s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(2) {opacity: 1; animation: formFadeOut 0.5s .6s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(3) {opacity: 1; animation: formFadeOut 0.5s .9s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(4) {opacity: 1; animation: formFadeOut 0.5s 1.2s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(5) {opacity: 1; animation: formFadeOut 0.5s 1.5s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(6) {opacity: 1; animation: formFadeOut 0.5s 1.8s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(7) {opacity: 1; animation: formFadeOut 0.5s 2.1s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(8) {opacity: 1; animation: formFadeOut 0.5s 2.4s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(9) {opacity: 1; animation: formFadeOut 0.5s 2.7s ease-in 1 forwards} .authentication.show .modal .fade>*:nth-child(10) {opacity: 1; animation: formFadeOut 0.5s 3s ease-in 1 forwards} .authentication .close {background: none; border: none; fill: #fff; height: 16px; padding: 0; width: 16px; z-index:5901001} .authentication .modal {color: #fff; overflow: auto; z-index: 9999999} .authentication .modal.loadingArea {position: fixed} .authentication .modal.loadingArea:before {display: none} .authentication .modal .loader {margin-top: 20px} .authentication .modal .loadingRipple {position: relative; height: 90px; width: 90px; margin: auto} .authentication .modal .loadingRipple div { box-sizing: content-box; position: absolute; border-width: 3px; border-style: solid; opacity: 1; border-radius: 50%; animation: loadingRipple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite } .authentication .modal .loadingRipple div:nth-child(1) {border-color: #fff} .authentication .modal .loadingRipple div:nth-child(2) {border-color: #fff; animation-delay: -0.5s} .authentication .modal .info {margin: 0 auto; text-align: center; width: 320px} .authentication .modal .info h2 {font-weight: 300; margin-bottom: 5px; font-size: 26px} .authentication .modal .info a {color: #fff; text-decoration: underline} .authentication .modal .info .description {font-size: 16px; line-height: 22px} .authentication .modal input[type=email], .authentication .modal input[type=password], .authentication .modal input[type=text] { background: transparent; border: 1px solid #ED6F84; border-radius: 5px; color: #fff; display: block; font-size: 14px; height: 20px; line-height: 20px; margin: 20px auto 0; padding: 10px 20px; width: 260px } .authentication .modal input[type=email]::-webkit-input-placeholder, .authentication .modal input[type=password]::-webkit-input-placeholder, .authentication .modal input[type=text]::-webkit-input-placeholder {color: #fff} .authentication .modal input[type=email]::-moz-placeholder, .authentication .modal input[type=password]::-moz-placeholder, .authentication .modal input[type=text]::-moz-placeholder {color: #fff} .authentication .modal input[type=email]:-ms-input-placeholder, .authentication .modal input[type=password]:-ms-input-placeholder, .authentication .modal input[type=text]:-ms-input-placeholder {color: #fff} .authentication .modal input[type=email]:focus, .authentication .modal input[type=password]:focus, .authentication .modal input[type=text]:focus {border-color: #fff} .authentication .modal label.validate-error { background: transparent; box-shadow: none; float: none; font-size: 12px; font-weight: inherit; line-height: inherit; margin: 2px auto -20px; padding: 0; position: static; text-align: left; text-shadow: none; width: 300px } .authentication .modal label.validate-error:before { border: 0; content: ''; position: absolute; margin-left: -20px; background: url('https://cnet3.cbsistatic.com/fly/1514998110-fly/bundles/cnetcss/images/arrows/arrow-right-s-hover.png') center no-repeat; height: 14px; top: inherit; width: 14px } .authentication .modal .terms {font-size: 12px; margin: 20px auto 0; padding-left: 30px; position: relative; width: 270px} .authentication .modal .terms input[type=checkbox] {position: absolute; visibility: hidden} .authentication .modal .terms input[type=checkbox]:checked+.checkbox:after { border-bottom: 1px solid #fff; border-left: 1px solid #fff; content: ''; height: 6px; left: 5px; position: absolute; top: 5px; transform: rotate(-55deg); width: 10px } .authentication .modal .terms .checkbox { border: 1px solid #fff; border-radius: 2px; display: block; height: 20px; left: 0; position: absolute; top: 0; width: 20px } .authentication .modal .terms a {color: #fff; text-decoration: underline} .authentication .modal .interest { border: 1px solid #fff; border-radius: 5px; color: #fff; cursor: pointer; display: table; float: left; font-size: 12px; font-weight: bold; width: 123px; height: 64px; margin-top: 10px; padding: 0 10px; text-align: center } .authentication .modal .interest:nth-child(2), .authentication .modal .interest:nth-child(3) {margin-top: 0} .authentication .modal .interest:nth-child(n) {margin-left: 10px} .authentication .modal .interest:last-of-type {margin-bottom: 20px} .authentication .modal .interest span {display: table-cell !important; vertical-align: middle} .authentication .modal .interest.selected {background: #fff} .authentication .modal .interest.selected span {color: #000} .authentication .modal .alert-error {font-size: 12px} .authentication .modal button { border: 0; border-radius: 5px; display: block; line-height: 44px; margin: 20px auto 0; padding: 0; text-align: center; width: 300px; height: 44px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px } .authentication .modal button.facebook {background: #4267B2; color: #fff} .authentication .modal button.facebook span {margin-top: 1px; display: inline-block} .authentication .modal button.facebook .fb-icon { background: #fff; border-radius: 1px; display: inline-block; height: 25px; margin-right: 10px; position: relative; vertical-align: middle; width: 25px; margin-top: -1px } .authentication .modal button.facebook .fb-icon svg {bottom: 0; fill: #4267B2; height: 20px; position: absolute; right: 3px; width: 10px} .authentication .modal button:active {transform: translateY(4px)} .authentication .modal button:not(.facebook) {background: #fff} .authentication .modal .navigation {float: none; height: auto; margin: 0; text-align: center} .authentication .modal .navigation a {color: #fff; display: block; font-size: 12px; margin-top: 20px; text-decoration: underline} .authentication ._facebookRegister {display: none} .authentication.facebookRegister ._facebookRegister {display: block} .authentication ._forgot {display: none} .authentication.forgot ._forgot {display: block} .authentication ._interests {display: none} .authentication.interests ._interests {display: block} .authentication ._login {display: none} .authentication.login ._login {display: block} .authentication ._loginOrRegister {display: none} .authentication.loginOrRegister ._loginOrRegister {display: block} .authentication ._register {display: none} .authentication.register ._register {display: block} .authentication ._start {display: none} .authentication.start ._start {display: block} .authentication ._username {display: none} .authentication.username ._username {display: block} .authentication.start .modal {opacity: 0; animation: formFadeIn 1s ease-in 1 forwards; background: #642950; box-shadow: #642950 0 0 350px 200px} .authentication.start .modal-backdrop {opacity: 0; animation: backdropFade 1s ease-in 1 forwards; background: #642950; background: #642950} .authentication.start .comments, .authentication.start .forums, .authentication.start .sweepstakes {display: none} .authentication.start.appId36 .description, .authentication.start.appId397 .description {display: none} .authentication.start.appId36 .comments, .authentication.start.appId397 .comments {display: block} .authentication.start.appId27 .description, .authentication.start.appId374 .description {display: none} .authentication.start.appId27 .forums, .authentication.start.appId374 .forums {display: block} .authentication.start.appId363 .description, .authentication.start.appId364 .description, .authentication.start.appId368 .description, .authentication.start.appId369 .description {display: none} .authentication.start.appId363 .sweepstakes, .authentication.start.appId364 .sweepstakes, .authentication.start.appId368 .sweepstakes, .authentication.start.appId369 .sweepstakes {display: block} .authentication.loginOrRegister .modal {transition: background 1s ease, box-shadow 1s ease; background: #8F2645; box-shadow: #8F2645 0 0 350px 200px} .authentication.loginOrRegister .modal-backdrop {transition: background 1s ease; background: #8F2645} .authentication.facebookRegister .modal, .authentication.login .modal, .authentication.register .modal { transition: background 1s ease, box-shadow 1s ease; background: #B3233E; box-shadow: #B3233E 0 0 350px 200px } .authentication.facebookRegister .modal-backdrop, .authentication.login .modal-backdrop, .authentication.register .modal-backdrop { transition: background 1s ease; background: #B3233E } .authentication.facebookRegister input[type=text].username, .authentication.facebookRegister .terms {display: none} .authentication.facebookRegister.appId27 .info p, .authentication.facebookRegister.appId36 .info p, .authentication.facebookRegister.appId374 .info p, .authentication.facebookRegister.appId397 .info p {display: none} .authentication.facebookRegister.appId27 input[type=text].username, .authentication.facebookRegister.appId27 .terms, .authentication.facebookRegister.appId36 input[type=text].username, .authentication.facebookRegister.appId36 .terms, .authentication.facebookRegister.appId374 input[type=text].username, .authentication.facebookRegister.appId374 .terms, .authentication.facebookRegister.appId397 input[type=text].username, .authentication.facebookRegister.appId397 .terms {display: block} .authentication.facebookRegister .termsRoadshow, .authentication.facebookRegister .termsCommunity {display: none} .authentication.facebookRegister.appId393 .termsDefault {display: none} .authentication.facebookRegister.appId393 .termsRoadshow {display: inline} .authentication.facebookRegister.appId27 .termsDefault, .authentication.facebookRegister.appId374 .termsDefault {display: none} .authentication.facebookRegister.appId27 .termsCommunity, .authentication.facebookRegister.appId374 .termsCommunity {display: inline} .authentication.register input[type=text].username {display: none} .authentication.register.appId27 input[type=text].username, .authentication.register.appId36 input[type=text].username, .authentication.register.appId374 input[type=text].username, .authentication.register.appId397 input[type=text].username {display: block} .authentication.register .termsRoadshow, .authentication.register .termsCommunity {display: none} .authentication.register.appId393 .termsDefault {display: none} .authentication.register.appId393 .termsRoadshow {display: inline} .authentication.register.appId27 .termsDefault, .authentication.register.appId374 .termsDefault {display: none} .authentication.register.appId27 .termsCommunity, .authentication.register.appId374 .termsCommunity {display: inline} .authentication.interests .modal, .authentication.forgot .modal, .authentication.username .modal { transition: background 1s ease, box-shadow 1s ease; background: #D9192C; box-shadow: #D9192C 0 0 350px 200px } .authentication.interests .modal-backdrop, .authentication.forgot .modal-backdrop, .authentication.username .modal-backdrop { transition: background 1s ease; background: #D9192C } .authentication ._interests {margin: 0 auto; width: 320px} body:not(.mobile) .authentication .modal-backdrop {opacity: 0.9; z-index: 9999999} body:not(.mobile) .authentication .close {position: fixed; right: 30px; top: 30px; z-index: 10000000} body:not(.mobile) .authentication .modal { bottom:10vh; left:20vw; right:20vw; top:17vh; max-height:none; max-width:none; min-height:400px; min-width:600px; } .mobile .authentication .modal-backdrop {display: none} .mobile .authentication .close {position: fixed; left: 15px; top: 15px; z-index: 10000000} .mobile .authentication .modal { bottom: 0;left: 0; margin: 0; max-width: none; padding: 0; position: fixed; right: 0; top: 0; z-index: 9999999; width: 100% } .mobile .authentication .modal .info {margin-top: 50px} .mobile .authentication .modal .alert-error {margin: 0 auto; position: relative; top: 40px; width: 300px} .modal-backdrop {height: 100%; width: 100%; top: 0; left: 0} .modal, .modal-backdrop {position: absolute; display: none} .modal.fixed, .modal-backdrop.fixed {position: fixed} .modal.show, .modal-backdrop.show {display: block} .modal-iframe {display: block; position: relative} @-webkit-keyframes formFadeOut { from {opacity:1} to {opacity:0} } @-moz-keyframes formFadeOut { from {opacity:1} to {opacity:0} } @-ms-keyframes formFadeOut { from {opacity:1} to {opacity:0} } @-o-keyframes formFadeOut { from {opacity:1} to {opacity:0} } @keyframes formFadeOut { from {opacity:1} to {opacity:0} } @-webkit-keyframes formFadeIn { from {opacity:0} to {opacity:1} } @-moz-keyframes formFadeIn { from { /*! opacity:0 */} to { /*! opacity:1 */} } @-ms-keyframes formFadeIn { from {opacity:0} to {opacity:1} } @-o-keyframes formFadeIn { from {opacity:0} to {opacity:1} } @keyframes formFadeIn { from {/*! opacity:0 */} to {opacity:1;} } /* 404 오류 */ [class|="col"].spacer::after {content: ''; display: inline-block;} .hero {overflow:hidden; height:464px; position:relative} .hero figure {position:relative; z-index:1} .hero img {width:auto} .hero .title {text-align:right; margin-top:60px} .hero .title .line2 {font-size:220px; line-height:180px; font-weight:bold; color:#B80000; display:block;} .hero .title .line1 {font-size:70px; font-weight:bold} .hero .dek {text-align:right; font-size:18px; margin-right:20px; display:block; color:#666;} @media (min-width: 1290px) { .hero .title {margin-top:30px} .hero .title .line2 {font-size:290px; line-height:220px} .hero .title .line1 {font-size:90px;} .hero .dek {font-size:22px} } /* 그외 페이지 */ /* 광고배너 */ .other_area #rbWrapper {position: relative; overflow-y: hidden;} [class^="ad-incontent-ad-plus"] {text-align: center; margin-bottom: 30px; line-height: 0; min-height: 90px; position: relative;} .ad-mpu-plus-top {margin:0 auto 30px;} .list-ad { padding:30px 0 30px; background-color:#e7e7e7; box-shadow: 0px 1px 6px #c7c7c7 inset;} .other_page { margin-bottom:50px; min-height:500px;} @media (min-width: 1024px) {.other_page { margin:0 30px 50px;}} .other_page h3 {font-size:36px; font-weight:bold; margin:20px 0 25px; padding-bottom:20px; border-bottom:3px solid #E4E7EA;} .other_page p {font-size:18px; line-height:26px; padding:0 0 15px; margin:0px;} .other_page .articleHead { text-align:left;} .info-box h4 {font-size:22px; font-weight:bold; padding-bottom:5px; margin-top:30px;} .info-box p {margin:0 0 0 28px; font-size:15px; padding-bottom:5px;} .info-box ul { margin:0 20px 0px;} .info-box li {list-style:lower-roman; padding:0 0 10px 5px; margin:0 0 0 23px; font-size:15px;}