@charset "utf-8"; /*============================================== @ PC 기본 ==============================================*/ /*---------------------------------------------------------------------- - 색상 -------------------------------------------------------------------------*/ /* 폰트 색상 */ .font-color-primary {color:#F2C140 !important;} .hr {display:block; width:100%; height:1px; background:#fff;} /*
*/ /*---------------------------------------------------------------------- - 라벨 -------------------------------------------------------------------------*/ .label {display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:48px; padding:0 16px; font-size:16px; color:#fff; text-align:center; border:1px solid #000; background:#000; border-radius:0; box-sizing:border-box;} .label-round {border-radius:100px !important;} .label-single {min-width:0;} /* 라벨 > 색상 .label-yellow {color:#000; border-color:#FFD46D; background-color:#FFD46D;} */ /* 라벨 > 아웃라인 .label-outline-yellow {color:#FFD46D; border-color:#FFD46D; background-color:#1c1c1c;} .label-outline-gray {color:#ABABAB; border-color:#ABABAB; background-color:#1c1c1c;} */ /* 라벨 > 사이즈 .label-size-400 { height:42px; padding:0 24px; font-size:16px;} .label-size-300 { height:32px; padding:0 20px; font-size:12px;} .label-size-200 { height:28px; padding:0 20px; font-size:12px;} */ /* 라벨 > 커스텀 .label-notice {min-width:65px; padding:0 12px; height:32px; font-size:12px; color:#ABABAB; border-color:#ABABAB; background-color:#1c1c1c; border-radius:32px;} .label-notice.point {border-color:#FFD46D; color:#FFD46D;} .label-notice.point:before {content:''; display:block; margin-right:3px; width:16px;height:16px; background:url(../images/icons/icon-notice.png) center center no-repeat; background-size:100% 100%;} */ /*---------------------------------------------------------------------- - 버튼 -------------------------------------------------------------------------*/ a.btn , button.btn , input[type=submit].btn {position:relative; display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 32px; font-size:14px; line-height:1; text-align:center; border:1px solid #000; background:#000; border-radius:0; box-sizing:border-box;} a.btn-round , button.btn-round , input[type=submit].btn-round {border-radius:100px;} /* 버튼 > 아웃라인 a.btn-outline-gray-100 , button.btn-outline-gray-100 , input[type=submit].btn-outline-gray-100 {color:#fff; border-color:rgba(171, 171, 171, 1); background-color:#1c1c1c;} a.btn-outline-gray-500 , button.btn-outline-gray-500 , input[type=submit].btn-outline-gray-500 {color:#fff; border-color:rgba(78, 78, 78, 1); background-color:#000;} a.btn-outline-gray-700 , button.btn-outline-gray-700 , input[type=submit].btn-outline-gray-700 {color:rgba(78, 78, 78, 1); border-color:#4E4E4E; background-color:#1c1c1c;} */ /* 버튼 > 사이즈 .btn-size-400, a.btn-size-400, button.btn-size-400 , input[type=submit].btn-size-400{ height:48px; padding:0 32px; font-size:16px;} .btn-size-300, a.btn-size-300, button.btn-size-300 , input[type=submit].btn-size-300{ height:42px; padding:0 24px; font-size:16px;} .btn-size-200, a.btn-size-200, button.btn-size-200 , input[type=submit].btn-size-200{ height:32px; padding:0 20px; font-size:12px;} */ /* 버튼 > 그라디언트 a.btn-graient-black , button.btn-graient-black , input[type=submit].btn-graient-black { color:#fff; border:1px solid #ababab; background: linear-gradient(0deg, rgba(255, 255, 255, 0.39) 0%, rgba(255, 255, 255, 0.00) 68.75%), #000;} */ /* 버튼 > 아이콘 .btn-icon .icon {flex:0 0 auto;} .btn-icon .icon:first-child {margin-right:10px;} .btn-icon .icon:last-child {margin-left:10px} */ /* 버튼 > 종류별 */ a.btn-page-ui , button.btn-page-ui , input[type=submit].btn-page-ui {min-width:132px; font-size:14px;} .btn-page-more {position:relative; width:100%; height:48px; display:inline-flex; align-items:center; justify-content:center; text-align:center;font-size:16px; color:#f2c140; background:rgba(0,0,0,0.3); border:1px solid #808080; border-radius:100px; transition:all 0.2s ease;} @media screen and (min-width:801px) { .btn-page-more:hover {color:#000; background-color:#f2c140; border-color:#f2c140;} } .btn-video-play {position:relative; height:48px; padding:0 28px 0 7px; display:inline-flex; align-items:center; justify-content:center; text-align:center;font-size:16px; color:#f2c140; background:rgba(0,0,0,0.3); border:1px solid #525252; border-radius:100px; transition:all 0.2s ease;} .btn-video-play > .icon {flex:0 0 auto; margin-right:20px;} .btn-audio-toggle {position:relative; display:inline-flex; align-items:center;} .btn-audio-toggle .state {flex:0 0 auto; display:inline-block; position:relative;width:49px;height:49px;} .btn-audio-toggle .state:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/icons/icon-audio-off.png) center center no-repeat; background-size:100% 100%; opacity:1;} .btn-audio-toggle .state:after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/icons/icon-audio-on.png) center center no-repeat; background-size:100% 100%; opacity:0;} .btn-audio-toggle > em {margin-left:10px;display:block; font-size:24px; color:#fff;} .btn-audio-toggle.actived .state:before {opacity:0;} .btn-audio-toggle.actived .state:after {opacity:1;} .btn-page-nav {display:flex; width:100%; height:48px; text-align:center; align-items:center; justify-content:center; font-size:16px; line-height:1.2; font-weight:500; color:#F2C140;background: rgba(0, 0, 0, 0.30); border: 1px solid #808080; box-sizing:border-box; border-radius:56px; box-shadow: 0px 4px 8px 0px rgba(74, 58, 255, 0.08); } .btn-page-nav.point {color:#000; background-color:#F2C140;border-color:#F2C140;} /* 버튼 > 다운로드 */ .btn-client-download {position:relative; display:block;width:254px; height:70px; display:flex; align-items:center; justify-content:center; text-align:center; background:#F2C140; border-radius:0px 0px 0 20px; box-sizing:border-box;} .btn-client-download > em {font-size:18px; color:#000; font-weight:400;} .btn-client-download > em:before {content:''; position:absolute;top:29px;left:13px;display:block;width:19px; height:14px; background:url(../images/icons/icon-btn-download-deco-1.png) center center no-repeat; background-size:100% 100%;} .btn-client-download > em:after {content:''; position:absolute;top:29px;right:13px;display:block;width:19px; height:14px; background:url(../images/icons/icon-btn-download-deco-2.png) center center no-repeat; background-size:100% 100%;} .btn-client-download:before {content:''; position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:3px;border:1px solid #A27C16; border-radius:0px 0px 0px 20px; box-sizing:border-box;} /* 버튼 > 페이지 뒤로가기 */ .btn-page-prev {position:relative; display:inline-flex; align-items:center; justify-content:center; text-align:center; min-width:180px; border-radius:100px; height:48px; font-size:16px; color:#F2C140; background:rgba(0,0,0,0.3); border:1px solid #808080; box-sizing:border-box;} .btn-board-view-prev {flex:0 0 auto; position:relative; display:inline-flex;font-size:0; width:48px; border-radius:50%; height:48px; font-size:0; background:rgba(0,0,0,0.3); border:1px solid #808080; box-sizing:border-box;} .btn-board-view-prev:before {content:''; position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:url(../images/icons/icon-btn-board-view-prev.png) center center no-repeat; background-size:100% 100%;} .btn-board-view-next {flex:0 0 auto;position:relative; display:inline-flex;font-size:0; width:48px; border-radius:50%; height:48px; font-size:0; background:rgba(0,0,0,0.3); border:1px solid #808080; box-sizing:border-box;} .btn-board-view-next:before {content:''; position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:url(../images/icons/icon-btn-board-view-next.png) center center no-repeat; background-size:100% 100%;} .btn-board-view-prev.disabled , .btn-board-view-next.disabled {opacity:.2;} /* 버튼 > 종류별 > 자세히보기 */ .btn-point-detail-view {position:relative; display:inline-flex; align-items:center; justify-content:center; text-align:center; width:174px; height:48px; font-size:18px;} .btn-point-detail-view > em {position:relative; z-index:10; font-weight:600;} .btn-point-detail-view:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; border:1px solid #000; box-sizing:border-box; z-index:5; transform:skewX(-45deg); transition:transform 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);} .btn-point-detail-view:after {content:''; position:absolute; top:-3px; left:0; width:100%; height:100%; background:#000; border:1px solid #000; box-sizing:border-box; z-index:0; transform:skewX(45deg); transition:transform 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);} .btn-point-detail-view:hover:before {transform:skewX(45deg);} .btn-point-detail-view:hover:after {transform:skewX(-45deg);} .btn-point-detail-view.yellow > em {color:#000;} .btn-point-detail-view.yellow:before {background:#F2C140; border-color:#F2C140;} .btn-point-detail-view.yellow:after {background:transparent; border-color:#fff;} .btn-point-detail-view.black > em {color:rgba(242, 193, 64, 1);} .btn-point-detail-view.black:before {background:#000; border-color:#000;} .btn-point-detail-view.black:after {background:transparent; border-color:#000;} /* 버튼 > 페이지 탭 */ .page-tab-inner {display:flex; flex-wrap:wrap;} .page-tab-cell {position:relative;} .page-tab-cell + .page-tab-cell {margin-left:64px; padding-left:75px;} .page-tab-cell + .page-tab-cell:before {content:''; position:absolute;top:50%;left:0;display:block;width:11px;height:11px;background:url(../images/icons/icon-page-tab-unit.png) center center no-repeat;background-size:100% 100%; margin-top:-6px;} .page-tab-cell.actived .btn-page-tab-nav {color:#F2C140;} .btn-page-tab-nav {display:inline-flex; align-items:center; justify-content:center; height:30px; font-size:22px; line-height:1; color:#ccc; white-space:nowrap;} /* 버튼 > 그룹 */ .btn-page-wrap {margin-top:80px; display:flex; justify-content:center; gap:20px;} /* 공통 > 아코디언 */ .accordion-cell + .accordion-cell {margin-top:16px;} .accordion-cell.actived .accordion-header .btn-accordion-menu:after{transform:rotate(-180deg);} .accordion-cell.actived .accordion-header .accordion-check:after {opacity:1;} .accordion-content {display:none;} .accordion-detail {padding:4px 0 0 30px;} .accordion-detail .txt {font-size:14px; line-height:1.5; font-weight:400; color:rgba(255,255,255,0.80); white-space:pre-line;} .accordion-detail .txt + .more {margin-top:4px;} .accordion-detail .more {text-align:right;} .accordion-detail .more > a, .accordion-detail .more > button {display:inline-block; font-size:14px; line-height:2.14; font-weight:600; color:#fff; text-decoration: underline;} .accordion-detail .txt .link {color:#fff; text-decoration: underline;} .accordion-header {position:relative; min-height:30px; padding-right:30px;} /* .accordion-header .btn-accordion-menu {position:relative; padding:0 50px 0 30px; height:30px; display:flex; align-items:center; width:100%; font-size:16px; line-height:1.2; font-weight:600; color:#fff; box-sizing:border-box;} */ .accordion-header .btn-accordion-menu {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;} .accordion-header .btn-accordion-menu:after {content:''; position:absolute; top:50%;right:0; display:inline-flex; width:21px; height:13px; margin-top:-7px; transition:transform 0.25s ease;background:url(../images/icons/icon-accordion-arrow.png) center center no-repeat; background-size:100% 100%;} .accordion-header .accordion-check {position:relative;display:inline-flex; min-height:30px; align-items:center; z-index:5;} .accordion-header .accordion-check .form-checkbox {line-height:1;} .accordion-header .accordion-check .form-checkbox .form-check-icon {min-width:24px; min-height:24px;} .accordion-header .accordion-check .form-checkbox .form-check-icon:before {top:0; width:24px; height:24px; border:1px solid #808080;background:rgba(0,0,0,0.3); border-radius:50%;} .accordion-header .accordion-check .form-checkbox .form-check-icon:after {top:0; width:24px; height:24px; background:url(../images/icons/icon-checkbox-form-star.png) center center no-repeat; background-size:100% 100%;} .accordion-header .accordion-check .form-checkbox .form-check-icon > em {padding-left:30px; font-size:16px; line-height:1.5; font-weight:600; color:#C9C9C9;} /* 버튼 - gnb discord */ .btn-go-discord {display: block;width:40px;height:40px;position: absolute;top:15px;right:270px;background:url(../images/icons/icon-header-discord.png) no-repeat 0 0;background-size:100% 100%;} .btn-go-discord em {font-size:0;line-height: 0;} /*---------------------------------------------------------------------- - 아이콘 -------------------------------------------------------------------------*/ .icon {display:inline-flex; align-items:center; justify-content:center; font-size:0; background-repeat:no-repeat; background-position:center center; background-size:100% auto;} .icon-search-gray {width:24px; height:24px; background-image:url(../images/icons/icon-search-gray.png);} .icon-btn-play {width:34px; height:34px; background-image:url(../images/icons/icon-btn-play.png);} .icon-character-audio {width:48px; height:48px; background-image:url(../images/icons/icon-character-audio.png);} .icon-character-skill-play {width:76px; height:76px; background-image:url(../images/icons/icon-character-skill-play.png);} .icon-character-detail-view {width:76px; height:76px; background-image:url(../images/icons/icon-character-detail-view.png);} .icon-character-weapon-view {width:76px; height:76px; background-image:url(../images/icons/icon-character-weapon-view.png);} .icon-property-light {width:48px; height:48px; background-image:url(../images/icons/icon-property-light.png);} .icon-property-darkness {width:48px; height:48px; background-image:url(../images/icons/icon-property-darkness.png);} .icon-property-lighting {width:48px; height:48px; background-image:url(../images/icons/icon-property-lighting.png);} .icon-property-land {width:48px; height:48px; background-image:url(../images/icons/icon-property-land.png);} .icon-property-water {width:48px; height:48px; background-image:url(../images/icons/icon-property-water.png);} .icon-property-posion {width:48px; height:48px; background-image:url(../images/icons/icon-property-posion.png);} .icon-property-fire {width:48px; height:48px; background-image:url(../images/icons/icon-property-fire.png);} .icon-property-blood {width:48px; height:48px; background-image:url(../images/icons/icon-property-blood.png);} .icon-position-supporter {width:48px; height:48px; background-image:url(../images/icons/icon-position-supporter.png);} .icon-position-healer {width:48px; height:48px; background-image:url(../images/icons/icon-position-healer.png);} .icon-position-tanker {width:48px; height:48px; background-image:url(../images/icons/icon-position-tanker.png);} .icon-position-dealer {width:48px; height:48px; background-image:url(../images/icons/icon-position-dealer.png);} /* .icon-notice {width:16px; height:16px; background-image:url(../images/icons/icon-notice.png);} .icon-new-yellow {width:24px; height:24px; background-image:url(../images/icons/icon-new-yellow.png);} .icon-new-black {width:24px; height:24px; background-image:url(../images/icons/icon-new-black.png);} .icon-star-pin-white {width:24px; height:24px; background-image:url(../images/icons/icon-star-pin-white.png);} .icon-star-yellow {width:24px; height:24px; background-image:url(../images/icons/icon-star-yellow.png);} .icon-download-white {width:24px; height:24px; background-image:url(../images/icons/icon-download-white.png);} .icon-state-new-yellow {width:60px; height:60px; background-image:url(../images/icons/icon-state-new-yellow.png);} .icon-state-bell-yellow {width:68px; height:68px; background-image:url(../images/icons/icon-state-bell-yellow.png);} .icon-state-event-yellow {width:68px; height:68px; background-image:url(../images/icons/icon-state-event-yellow.png);} .icon-state-note-yellow {width:68px; height:68px; background-image:url(../images/icons/icon-state-note-yellow.png);} .icon-state-update-yellow {width:68px; height:68px; background-image:url(../images/icons/icon-state-update-yellow.png);} .icon-common-volume-white {width:86px; height:86px; background-image:url(../images/icons/icon-common-volume-white.png);} .icon-common-mute-white {width:86px; height:86px; background-image:url(../images/icons/icon-common-mute-white.png);} .icon-common-close-yellow {width:86px; height:86px; background-image:url(../images/icons/icon-common-close-yellow.png);} .icon-common-slider-next {width:52px; height:52px; background-image:url(../images/icons/icon-common-slider-next.png);} .icon-common-slider-prev {width:52px; height:52px; background-image:url(../images/icons/icon-common-slider-prev.png);} */ /*---------------------------------------------------------------------- - 게시판 -------------------------------------------------------------------------*/ /* 기본 */ .page-tab ~ .board-list-wrap {margin-top:48px;} .board-list-header .contents-tab {margin-bottom:20px;} /* 카드형 리스트 */ .card-list-wrap + .more {margin-top:64px;} .card-list-row + .card-list-row {margin-top:24px;} .btn-card-list-nav {display:block; background:#000; overflow:hidden; font-size:20px; color:#B2B2B2; border-radius:0px 20px; border:1px solid rgba(242,193,64,0); transition:border 0.2s ease;} .btn-card-list-nav:hover {border-color:rgba(242,193,64,1);} .btn-card-list-nav .item-inner {display:flex; box-sizing:border-box; padding:23px 22px;} .btn-card-list-nav .item-thumb {flex:0 0 auto;} .btn-card-list-nav .item-thumb + .item-info .item-info-inner {margin-top:-7px;} .btn-card-list-nav .item-info {flex:1; display:flex; flex-direction:column; padding:0 0 0 40px; box-sizing:border-box; border-left:none; position:relative; width:100%; overflow:hidden;} .btn-card-list-nav .item-info:before {content:''; position:absolute;top:0;left:16px; width:5px; height:5px; margin-top:-5px; background:#333; transform:rotate(45deg);} .btn-card-list-nav .item-info:after {content:''; position:absolute;bottom:0;left:16px; width:5px; height:5px; margin-bottom:-5px; background:#333; transform:rotate(45deg);} .btn-card-list-nav .item-info-inner:before {content:''; position:absolute; top:0; left:18px; width:1px; height:calc( 100% + 0px ); background:#333;} .btn-card-list-nav .item-subject + .item-desc {margin-top:24px;} .btn-card-list-nav .item-desc + .item-date {margin-top:12px;} .btn-card-list-nav .item-subject {font-size:26px; line-height:1.35; font-weight:400; color:#fff;} .btn-card-list-nav .item-subject .txt {display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; } .btn-card-list-nav .item-desc {font-size:20px; line-height:1.5; font-weight:400;} .btn-card-list-nav .item-desc .txt {display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical; } .btn-card-list-nav .item-date {font-size:16px; line-height:1.4; font-weight:400; text-align:right; color:#808080;} .btn-card-list-nav .item-more {display:none;} .btn-card-list-nav.medium {} .btn-card-list-nav.medium .item-inner {display:block; box-sizing:border-box; padding:28px 30px 22px 30px;} .btn-card-list-nav.medium .item-info {display:block; padding:0;} .btn-card-list-nav.medium .item-info:before, .btn-card-list-nav.medium .item-info:after, .btn-card-list-nav.medium .item-info-inner:before {display:none;} .btn-card-list-nav.medium .item-subject + .item-desc {margin-top:24px;} .btn-card-list-nav.medium .item-desc + .item-date {margin-top:12px;} .btn-card-list-nav.medium .item-subject {font-size:26px; line-height:1.35; font-weight:400; color:#fff;} .btn-card-list-nav.medium .item-desc {font-size:20px; line-height:1.5; font-weight:400;} .btn-card-list-nav.medium .item-date {font-size:16px; line-height:1.4; font-weight:400; text-align:right; color:#808080;} .btn-card-list-nav.small {border:none; border-radius:0px; background:#000;} .btn-card-list-nav.small .item-inner {padding:0;} .btn-card-list-nav.small .item-thumb {flex:0 0 auto; width:50%;} .btn-card-list-nav.small .item-thumb .card-thumb {width:auto;height:auto;min-height:0;padding-top:57.59%;} .btn-card-list-nav.small .item-thumb + .item-info .item-info-inner {margin:0;} .btn-card-list-nav.small .item-info {flex:0 0 auto; width:50%; padding-left:12px;display:flex;} .btn-card-list-nav.small .item-info:before, .btn-card-list-nav.small .item-info:after, .btn-card-list-nav.small .item-subject {font-size:14px; color:#B2B2B2; line-height:1.35;} .btn-card-list-nav.small .item-subject .txt {-webkit-line-clamp: 2;} .btn-card-list-nav.small .item-info-inner:before {display:none;} .btn-card-list-nav.small .item-info-inner {display:flex; flex-direction:column; height:100%;} .btn-card-list-nav.small .item-date {margin-top:auto; padding-top:12px;} /* 갤러리형 리스트 */ .gallery-list-wrap + .more {margin-top:60px;} .gallery-list-inner {display:flex; flex-wrap:wrap; margin:-18px;} .gallery-list-cell {width:33.33%; box-sizing:border-box; box-sizing:border-box; padding:24px 12px;} .btn-gallery-list-nav {display:flex; height:100%; background:#1c1c1c; overflow:hidden; font-size:14px; color:#b2b2b2; border:1px solid #4d4d4d; border-radius:0px 20px; transition:border 0.2s ease;} .btn-gallery-list-nav:hover {border-color:rgba(242,193,64,1);} .btn-gallery-list-nav .item-thumb {width:100%; box-shadow: 0px -16px 16px 0px rgba(0,0,0,0.7) inset;} .btn-gallery-list-nav .card-thumb {width:auto; height:auto; padding-top:56.43%;} .btn-gallery-list-nav .item-info {position:relative; text-align:left; padding:14px 26px 26px 26px; background:#1c1c1c; border-top:1px solid #4d4d4d;} .btn-gallery-list-nav .item-subject {font-size:20px; line-height:1.5; font-weight:400; color:#fff;} .btn-gallery-list-nav .item-subject .txt {display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; } .btn-gallery-list-nav .item-desc {font-size:18px; line-height:1.5; font-weight:400;} .btn-gallery-list-nav .item-desc .txt {display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; } .btn-gallery-list-nav .item-date {font-size:16px; line-height:1.5; font-weight:400; color:#808080;} .btn-gallery-list-nav .item-more {position:absolute; top:14px; right:26px; font-size:16px; line-height:1.5; font-weight:400; color:#f2c140;} .btn-gallery-list-nav .item-date + .item-subject {margin-top:11px;} .btn-gallery-list-nav .item-subject + .item-desc {margin-top:3px;} /* 카드 썸네일 */ .new .card-thumb:after {content:''; position:absolute; top:0; left:-4px; width:60px; height:60px; background:url(../images/icons/icon-state-new-yellow.png) left top no-repeat; background-size:100% 100%; z-index:15;} .new .card-thumb:before {clip-path: polygon(68px 0, 100% 0, 100% 100%, 0 100%, 0% 68px);} .new .card-thumb .obj {clip-path: polygon(68px 0, 100% 0, 100% 100%, 0 100%, 0% 68px); } .card-thumb {position:relative; width:376px; height:146px;} /* .card-thumb {position:relative; padding-top:56.43%;} .card-thumb:before {content:''; position:absolute; top:0; left:0; width:100%;height:100%;background:#F2C140;} .card-thumb .obj {position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:1px;z-index:1; overflow:hidden; background:#1c1c1c;} */ .card-thumb .obj img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;} /* 유저 정보 */ .user-name {display:inline-flex; align-items:center; justify-content:center;} .user-name .icon {flex:0 0 auto;} .user-name .icon:first-child {margin-right:7px;} .user-name .icon:last-child {margin-left:7px;} /* 게시물 제목 */ .board-subject {display:inline-flex; max-width:100%; overflow:hidden;} .board-subject .value {} .board-subject .value .txt {display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; } .board-subject .state {flex:0 0 auto;} .board-subject .state:first-child {margin-right:8px;} .board-subject .state:last-child {margin-left:8px;} /* 검색 결과 워드 */ .search-word {font-weight:700;color:#F2C140; text-decoration:underline;} /* 검색 결과 없을 때 */ .board-search-none {display:flex; height:620px; align-items:center; justify-content:center; padding:140px 0; text-align:center; background:#141414; border-top:2px solid #F2C140; box-sizing:border-box;} .board-search-none .value {font-size:28px; font-weight:700;color:#F2C140; text-decoration:underline;} .board-search-none .value + .desc {margin-top:16px;} .board-search-none .desc {font-size:16px; line-height:1.32; color:#fff;} .board-search-none .btns {margin-top:70px;} /* 게시물이 없을 때 */ .board-list-none {display:flex; height:620px; align-items:center; justify-content:center; padding:140px 0; text-align:center; background:#141414; border-top:2px solid #F2C140; box-sizing:border-box;} .board-list-none .value + .desc {margin-top:26px;} .board-list-none .desc {font-size:16px; line-height:1.32; color:#fff;} .board-list-none .btns {margin-top:70px;} /* 게시판 상세 */ .board-view-wrap {display:flex;} .board-view-area {flex:0 0 auto; width:870px; margin-right:48px; background:#141414;} .board-view-side {flex:1; width:100%;} .board-view-side-inner { background:#141414; border-top:1px solid #F2C140;} .board-view-side-inner > h3 {font-size:16px; line-height:1.4; color:#fff; text-align:center; padding:26px 24px 36px 24px;;} .board-view-side-inner .relevant-list {padding:0 24px 24px 24px;} .board-view-header {padding:36px 30px 24px 30px; font-size:16px; color:#ababab; border-top:1px solid #F2C140;} .board-view-subject {display:flex;} .board-view-subject .item-cate {flex:0 0 auto; margin-right:20px;} .board-view-subject .item-cate + .item-subject {padding:1px 0;} .board-view-subject .item-subject {flex:1; width:100%; box-sizing:border-box;} .board-view-subject .item-subject h3 {font-size:26px; line-height:1.35; font-weight:400; color:#fff;} .board-view-header .item-options {display:inline-flex; margin-top:12px;} .board-view-header .item-options-cell {position:relative;} .board-view-header .item-options-cell + .item-options-cell {margin-left:16px; padding-left:16px;} .board-view-header .item-options-cell + .item-options-cell:before {content:'';position:absolute;top:50%;left:0;display:block;width:2px;height:2px;border-radius:50%;background:#ABABAB;margin:-1px 0 0 -1px;} .board-view-body {position:relative; padding:30px;} .board-view-body:before {content:''; position:absolute;top:0;left:30px; width:5px; height:5px; background:#333; transform:rotate(45deg);} .board-view-body:after {content:''; position:absolute;top:0;right:30px; width:5px; height:5px;background:#333; transform:rotate(45deg);} .board-view-detail:before {content:''; position:absolute; top:0; left:0; right:0;bottom:auto; width:auto;height:1px;margin:2px 32px auto 32px; background:#333;} .board-view-footer .btn-ui {display:flex; justify-content:space-between; padding:36px; margin-top:28px;} .board-view-detail table, .board-view-detail {word-break:keep-all;} .board-view-detail table {table-layout:auto !important;} /* 게시판 상세 관련 리스트 */ .relevant-list {} .relevant-list .btn-card-list-nav {background:transparent;} .relevant-list-cell + .relevant-list-cell {margin-top:24px; padding-top:24px; border-top:1px solid #333;} /* 게시판 검색 */ .board-search-input {display:flex;} .board-search-input .form-search {margin-left:auto; max-width:556px; width:100%;} .board-search .page-tab {margin-top:30px;} /*---------------------------------------------------------------------- - 레이아웃 -------------------------------------------------------------------------*/ /* 헤더 */ .header-wrap {position:fixed;top:0;left:0;width:100%;height:70px; background:rgba(20,20,20,0.9); z-index:1500; overflow:hidden;} .header-wrap:before {content:''; position:absolute; top:0;left:0;display:block;width:100%;height:70px;z-index:1; background:#141414; } .header-wrap:after {content:''; position:absolute; top:70px;left:0;display:block;width:100%;height:1px;z-index:2; background:#333; opacity:0;} .header-inner {position:relative; max-width:1920px; width:100%; height:100%; margin:0 auto; z-index:5;} .header-inner .logo {position:absolute; top:13px; left:59px; display:block; width:132px; height:42px;z-index:15;} .header-inner .logo > a {display:block; position:relative; width:100%;height:100%;font-size:0;} .header-inner .logo > a > img {width:100%; height:100%;} .header-inner .btn-client-download {position:absolute; top:0; right:0;} .gnb-menu-list {position:relative; display:flex; width:100%; height:70px; padding:0 254px; justify-content:center; box-sizing:border-box;} .gnb-menu-cell {flex:0 0 auto; position:relative; margin:0 10px;} .gnb-menu-cell.actived .btn-gnb-nav, .gnb-menu-cell:hover .btn-gnb-nav {color:#F2C140;} .gnb-menu-cell.actived .btn-gnb-nav:before {opacity:1;} .gnb-menu-list .btn-gnb-nav {position:relative; display:flex; align-items:center;padding:0 20px; height:70px; font-size:16px; color:#fff; font-weight:400; transition:color 0.2s ease;} .gnb-menu-list .btn-gnb-nav:before {content:''; position:absolute;top:3px;left:0;display:block;width:100%;height:4px;background:#F2C140;opacity:0;} .gnb-sns-list {display:none;} .snb-menu {position:absolute; top:100%; left:50%; min-width:100%; padding:0 35px; transform:translate(-50% , 20px); transition:transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000);} .snb-menu-list {padding:30px 0; transform:translate(0% , 0%); background:rgba(255,255,255,0);} .snb-menu-cell {line-height:1; text-align:center;} .snb-menu-cell + .snb-menu-cell {margin-top:24px;} .snb-menu-cell > a {font-size:16px; color:#808080; line-height:1.4; white-space:nowrap; display:inline-block; transition:color 0.2s ease;} .snb-menu-cell > a:hover, .snb-menu-cell.actived > a {color:#fff;} .btn-mobile-header-open {display:none;} .btn-mobile-header-close {display:none;} .gnb-logo {display:none;} /* 컨테이너 */ #contents {position:relative; padding-top:70px; padding-bottom:100px; z-index:5;} @media screen and (min-width:1025px) { #contents {min-height:calc( 100vh - 543px ); box-sizing:border-box; } } /* 푸터 */ #footer {position:relative; z-index:100;} .footer-wrap {position:relative; text-align:center;} .footer-sns-menu {height:82px; border-bottom:1px solid #2B2B2B;} .footer-sns-inner {position:relative; width:100%; height:82px;} .footer-sns-inner:before {content:''; position:absolute;top:0;right:0;width:100%; height:100%; background:#141414;} .footer-sns-list {position:relative; display:flex; align-items:center; justify-content:center; height:82px; z-index:5;} .footer-sns-list > li {flex:0 0 auto; margin:0 14px;} .footer-sns-list .btn-footer-sns {display:block; width:32px; height:32px; font-size:0; background-repeat:no-repeat; background-size:100% 100%; background-position:center center;} .footer-sns-list .btn-footer-sns.discode {background-image:url(../images/icons/icon-sns-white-discode.png);} .footer-sns-list .btn-footer-sns.youtube {background-image:url(../images/icons/icon-sns-white-youtube.png);} .footer-sns-list .btn-footer-sns.twitter {background-image:url(../images/icons/icon-sns-white-twitter.png);} .footer-sns-list .btn-footer-sns.facebook {background-image:url(../images/icons/icon-sns-white-facebook.png);} .footer-sns-list .btn-footer-sns.instargram {background-image:url(../images/icons/icon-sns-white-instargram.png);} .footer-sns-list .btn-footer-sns.bahamet {background-image:url(../images/icons/icon-sns-white-bahamet.png);} .footer-data {padding:42px 0 80px 0; background:#141414;} .footer-data .inner {max-width:1180px;} .footer-language {position:absolute; top:0; right:24px; z-index:5;} .footer-language .language-selected {position:relative; display:inline-block;} .footer-language .language-selected select {position:absolute; top:0; left:0;width:100%;height:100%;opacity:0;z-index:15;} .footer-language .language-selected .icons {flex:0 0 auto;} .footer-language .language-selected .name {display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 15px; border:1px solid #4E4E4E; box-sizing:border-box;} .footer-language .language-selected .name > em {display:block; flex:0 0 auto; font-size:14px; color:#ABABAB; min-width:60px; margin:0 10px; text-align:left;} .footer-language .language-selected .name:before {content:''; display:block;width:24px;height:24px;background:url(../images/icons/icon-footer-language-global.png) center center no-repeat; background-size:100% auto;} .footer-language .language-selected .name:after {content:''; display:block;width:16px;height:16px;background:url(../images/icons/icon-footer-language-arrow.png) center center no-repeat; background-size:100% auto;} .footer-menu-list {display:flex; justify-content:center; flex-wrap:wrap; max-width:100%; margin:0 auto;} .footer-menu-list > li {position:relative; padding:13px 20px; line-height:1;} .footer-menu-list > li:before {content:'|'; position:absolute;top:0;left:-5px;width:10px;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;} .footer-menu-list > li:first-child:before {display:none;} .footer-menu-list > li > a {font-size:16px; line-height:1.5; color:rgba(255,255,255,0.5);} .footer-menu-list > li > a > strong {font-weight:400; color:rgba(255,255,255,1);} .footer-address {margin-top:22px;} .footer-address address {display:flex; justify-content:center; flex-wrap:wrap; width:100%; max-width:980px; margin:0 auto; font-size:14px; color:rgba(255,255,255,0.3);} .footer-address address > span {position:relative; display:block; padding:0 8px;} .footer-address address > span:before {content:'|'; position:absolute;top:0;left:-5px;width:10px;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;} .footer-address address > span:first-child:before, .footer-address address > span:nth-child(5):before{opacity:0;} .footer-address address > span a {display:inline-block;} .footer-limit {margin-top:35px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;} .footer-limit .footer-limit-img {margin-right:10px;} .footer-limit-table {width:683px;} .footer-limit-table table {width:100%; table-layout:fixed; word-break:break-all; text-align:left;} .footer-limit-table table > tbody > tr > th, .footer-limit-table table > tbody > tr > td {padding:2px; font-size:12px; line-height:1.5; color:#000; vertical-align:middle; text-align:center; border:1px solid #000; background:#FFFF00;} .footer-limit-table table > tbody > tr > th {font-weight:600;} .footer-logo {display:inline-block; width:457px; height:33px; font-size:0; margin-top:50px; background:url(../images/common/footer-logo.png) center center no-repeat; background-size:100% auto;} .footer-copy {font-size:12px; color:rgba(255,255,255,0.3); margin-top:18px;} .footer-logo + .footer-copy {margin-top:35px;} /*---------------------------------------------------------------------- - 레이어팝업 -------------------------------------------------------------------------*/ .pop-wrap {position:fixed; top:0; left:100%; width:100%; height:100%; z-index:9999; overflow:hidden; transition:left 0s 0.35s ease;} .pop-wrap.actived {left:0;transition-delay:0s;} .pop-wrap.actived .cover {opacity:1;} .pop-wrap.actived .pop-basic-data {transform:scale(1); opacity:1; transition:transform 0.2s 0.05s cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 0.2s 0s ease;} .pop-container {position:absolute;top:0;left:0;width:100%;height:100%; overflow-y:scroll;z-index:10;} .pop-parents {position:relative; display:table; width:100%; height:100%;z-index:5;table-layout:fixed;} .pop-children {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; padding:24px;} .pop-wrap .cover {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6); opacity:0; transition:opacity 0.2s 0s cubic-bezier(0.215, 0.610, 0.355, 1.000);} .pop-basic-data {position:relative; display:inline-block; transform:scale(0.3); opacity:0; transition:transform 0.2s 0s cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 0.2s 0s ease; box-sizing:border-box;} /* 레이어팝업 > 미디어 상세 */ .pop-media-view {width:100%;} .media-view-area {position:relative; width:100%; max-width:1280px; margin:0 auto; padding:0;} .media-view-detail {position:relative;} .media-view-detail-outer {position:relative; padding-top:56.25%;} .media-view-detail-inner {position:absolute; top:0; left:0; width:100%; height:100%; background:#2B2B2B; border:1px solid #7b7b7b; box-sizing:border-box;} .media-view-detail-inner img, .media-view-detail-inner video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;} .media-view-detail-inner iframe {position:absolute; top:0; left:0; width:100%; height:100%;} .btn-media-view-close {position:absolute; top:0; left:100%; display:block; width:60px; height:56px; margin-left:10px; font-size:0; box-sizing:border-box; z-index:15; background:url(../images/icons/icon-header-menu-close.png) center center no-repeat; background-size:100% 100%;} .btn-media-view-prev {position:absolute; top:50%; left:0; display:block; width:52px; height:52px; margin:-26px 0 0 -26px; font-size:0; box-sizing:border-box; z-index:15;} .btn-media-view-next {position:absolute; top:50%; right:0; display:block; width:52px; height:52px; margin:-26px -26px 0 0; font-size:0; box-sizing:border-box; z-index:15;} .btn-media-view-prev.disabled, .btn-media-view-next.disabled {display:none;} .media-view-download {position:relative; margin-top:36px; display:flex; align-items:center; justify-content:center;} .media-view-download .btn-cell {margin:0 18px;} .pop-character-skill {position:relative; width:100%; max-width:960px; margin:0 auto; padding:0;} .pop-character-skill .video-inner {border:1px solid #ffc445; box-sizing:border-box;} .btn-character-pop-close {position:absolute; top:0; left:100%; display:block; width:55px; height:54px; margin:-6px 0 0 17px; font-size:0; box-sizing:border-box; z-index:15; background:url(../images/contents/character-pop-close.png) center center no-repeat; background-size:100% auto;} /* 공통 > 팝업 > 쿠키팝업 */ .cookie-accept-wrap {position:fixed; bottom:0; right:0; z-index:2000; visibility:hidden; transform:translate(0% , 0%); transition:visibility 0s 0.4s ease, transform 0s 0.4s ease;} .cookie-accept-wrap.actived {visibility:visible; transform:translate(0% , 0%); transition-delay:0s;} .cookie-accept-wrap.actived .cookie-accept-outer {transform:translate(0% , 0%);} .cookie-accept-outer {position:absolute;bottom:0;right:0;padding:32px; transform:translate(0% , 100%); transition:transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);} .cookie-accept-inner {width:468px; padding:40px 39px 32px 39px; border-radius: 0px 24px;border: 1px solid rgba(242, 193, 64, 0.80);background: rgba(0, 0, 0, 0.80); box-sizing:border-box;} .cookie-accept-inner .item-title {display:flex; font-size:20px; line-height:1.4; font-weight:500;color:#fff; align-items:center;} .cookie-accept-inner .item-title:before {content:''; flex:0 0 auto; display:block; margin-right:8px; width:20px; height:20px; background:url(../images/icons/icon-cookie.png) center center no-repeat; background-size:100% 100%;} .cookie-accept-inner .item-desc {margin-top:16px; font-size:16px; font-weight:400; line-height:1.87; color:rgba(255,255,255,0.8);} .cookie-accept-inner .item-more {margin-top:4px; text-align:right;} .cookie-accept-inner .item-more > button {display:inline-block; font-size:16px; line-height:1.87; font-weight:400; color:#fff; text-decoration: underline;} .cookie-accept-inner .item-btns {margin-top:16px;} .cookie-accept-inner .item-btns .grid-layout-inner {margin:0 -8px;} .cookie-accept-inner .item-btns .grid-layout-cell {width:50%; padding:0 8px;} .cookie-accept-inner .item-btns .grid-layout-cell:nth-child(3) {width:100%; margin-top:24px;} .cookie-accept-inner .item-btns .btn-continue {display:block; width:100%; text-align:center; font-size:16px; line-height:1.12; font-weight:400; color:#fff; text-decoration: underline;} .cookie-detail-wrap {padding-top:60px; text-align:left; } .cookie-detail-inner {position:relative; max-width:630px; padding:48px 40px 40px 40px; border-radius: 0px 24px;border: 1px solid rgba(242, 193, 64, 0.80);background: rgba(0, 0, 0, 0.80); box-sizing:border-box;} .btn-cookie-pop-close {position:absolute; bottom:100%; right:0; display:block; font-size:0; width:55px;height:55px;background:url(../images/icons/icon-cookie-pop-close.png) center center no-repeat; background-size:23px auto; z-index:15;} .cookie-detail-body {} .cookie-detail-body .title {display:flex; font-size:22px; line-height:1.27; font-weight:600;color:#fff; align-items:center;} .cookie-detail-body .title:before {content:''; flex:0 0 auto; display:block; margin-right:8px; width:20px; height:20px; background:url(../images/icons/icon-cookie.png) center center no-repeat; background-size:100% 100%;} .cookie-detail-body .desc {margin-top:16px; font-size:16px; font-weight:400; line-height:1.5; color:rgba(255,255,255,0.8);} .cookie-detail-body .accordion-list-wrap {margin-top:16px;} .cookie-detail-ui {margin-top:32px;display:flex; align-items:center; justify-content:center; flex-direction:row-reverse; gap:0 16px;} .cookie-detail-ui .btn-page-nav {width:186px;} /* 에러페이지 */ .error-wrap {position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;align-items:center;justify-content:center;overflow:hidden;} .error-wrap .visual {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;} .error-wrap .visual img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;} .error-wrap .error-inner {width:100%; text-align:center; position:relative; z-index:5;} .error-wrap .error-inner .item-cate {position:relative;padding-top:40px;} .error-wrap .error-inner .item-cate:before {content:''; position:absolute;top:0;left:50%;display:block;width:24px;height:1px;background:#fff;margin-left:-12px;} .error-wrap .error-inner .item-title {margin-top:48px; font-size:26px;line-height:1.35; color:#fff; font-weight:500;} .error-wrap .error-inner .item-desc {margin-top:24px; font-size:16px;line-height:1.6; color:#ABABAB; font-weight:400;} .error-wrap .error-inner .item-ui {margin-top:60px;} .error-wrap .error-inner .item-ui .btn-page-more {width:180px;} .pop-download {width:100%;} .download-pop-wrap {max-width:796px; margin:0 auto; position:relative;} .download-pop-outer {min-height:353px;background:url(../images/contents/download-pop-bg.png) center center no-repeat; box-sizing:border-box; padding:52px 60px 0 60px; text-align:center; border-radius:16px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .download-pop-inner .item-title > em {position:relative; display:inline-flex; align-items:center; font-size:30px; line-height:36px; font-weight:700; color:#fff; padding:0 87px;} .download-pop-inner .item-title > em:before {content:'';position:absolute;top:50%;left:0;display:block;width:16px;height:15px;margin-top:-8px;background:url(../images/contents/download-pop-title-unit.png) left top no-repeat; background-size:100% 100%;} .download-pop-inner .item-title > em:after {content:'';position:absolute;top:50%;right:0;display:block;width:16px;height:15px;margin-top:-8px;background:url(../images/contents/download-pop-title-unit.png) left top no-repeat; background-size:100% 100%;} .download-pop-inner .item-desc {margin-top:33px; font-size:18px; line-height:1.66; color:#fff; font-weight:400;} .download-pop-inner .item-desc > span {display:block;} .download-pop-inner .item-btns {width:420px;margin:32px auto 0;} .download-pop-inner .item-btns-inner {display:flex; flex-wrap: wrap; align-items:center; justify-content:center;;gap:12px;} .download-pop-inner .item-btns-inner a img{height:40px;} .btn-download-close {position:absolute; bottom:100%; right:0; display:block; font-size:0; width:23px;height:23px; margin:0 16px 16px 0; background:url(../images/contents/download-pop-close.png) center center no-repeat; background-size:100% 100%; z-index:15;} /* 메인 윈도우 버튼 - 레이어 팝업 */ .pop-window-layer {width:100%;} .window-pop-wrap {max-width:602px; margin:0 auto; position:relative;} .window-pop-outer {min-height:417px;background:url(../images/contents/window-layer-pop-bg.png) center center no-repeat; box-sizing:border-box; padding:75px 15px 0 15px; text-align:center; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .window-pop-inner .item-title {position:relative; display:inline-flex; align-items:center; font-size:24px; line-height:36px; font-weight:400; color:#fff; padding:0 15px;} .window-pop-inner .item-desc {margin-top:35px; font-size:20px; line-height:36px; color:#fff; font-weight:400;} .window-pop-inner .item-btns {margin-top:40px;} .window-pop-inner .item-btns-inner {display:flex;justify-content: center; align-items:center; gap:0 10px;} .window-pop-inner .item-btns-inner a img{height:55x;} .btn-window-close {position:absolute; bottom:100%; right:-20px; display:block; font-size:0; width:45px;height:45px; margin:0; background:url(../images/contents/windows-pop-close.png) center center no-repeat; background-size:100% 100%; z-index:15;} .mo-enter{display: none;} /*============================================== @ PC 고해상도 ==============================================*/ @media screen and (min-width:1921px) { } /*============================================== @ PC 저해상도 ==============================================*/ @media screen and (min-width:1025px) { .header-wrap {transition:height 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000);} /* #header.actived .header-wrap {height:443px; } */ #header.actived .header-wrap {height:340px; } #header.actived .header-wrap:after {opacity:1;} #header.actived .snb-menu {transform:translate(-50% , 0px);} } @media screen and (max-width:1440px) { /*---------------------------------------------------------------------- - 레이아웃 -------------------------------------------------------------------------*/ /* 헤더 */ .header-inner .logo {left:24px;} } @media screen and (max-width:1420px) { .media-view-area {max-width:1080px;} } @media screen and (max-width:1328px) { /* 게시판 상세 */ .board-view-area {width:68%;} } @media screen and (max-width:1280px) { /*---------------------------------------------------------------------- - 레이아웃 -------------------------------------------------------------------------*/ /* 헤더 */ .gnb-menu-list .btn-gnb-nav {font-size:16px;} .gnb-menu-list {padding-left:180px; justify-content:flex-start;} .gnb-menu-cell {margin:0;} .gnb-menu-cell + .gnb-menu-cell {margin-left:20px;} .page-tab-cell + .page-tab-cell {margin-left:30px; padding-left:41px;} .media-view-area {max-width:720px;} .pop-character-skill {max-width:100%; padding:0 60px;} .btn-character-pop-close {margin:0; left:auto; right:0;} } @media screen and (max-width:1180px) { /*---------------------------------------------------------------------- - 레이아웃 -------------------------------------------------------------------------*/ /* 헤더 */ .gnb-menu-cell + .gnb-menu-cell {margin-left:0px;} } /*============================================== @ 태블릿 기본 ==============================================*/ @media screen and (max-width:1024px) { /*---------------------------------------------------------------------- - 버튼 -------------------------------------------------------------------------*/ /* 버튼 > 탭 */ .btn-page-tab-nav {font-size:16px;} /* 버튼 > 컨텐츠 탭 */ .page-tab-scroller {margin:0 -24px; overflow-x:auto; overflow-y:hidden;} .page-tab-scroller .page-tab-inner {flex-wrap:nowrap;padding:0 24px; } .page-tab-scroller .page-tab-inner:after {content:''; display:block; flex:0 0 24px;} .btn-page-tab-nav {height:40px; font-size:14px;} .page-tab-cell + .page-tab-cell {margin-left:16px; padding-left:20px;} .page-tab-cell + .page-tab-cell:before {width:4px;height:4px;margin-top:-2px;} /* 버튼 > 다운로드 */ .btn-client-download {width:152px; height:42px; border-radius:0px 16px;} .btn-client-download > em {font-size:16px;} .btn-client-download > em:before {top:16px;left:15px;width:13px; height:10px;} .btn-client-download > em:after {top:16px;right:15px;width:13px; height:10px;} .btn-client-download:before {margin:3px;border:1px solid #A27C16; border-radius:0px 16px;} /* 버튼 - gnb discord */ .btn-go-discord {display: block;width:32px;height:32px;position: fixed;top:12px;right:60px;z-index: 1600;} /*---------------------------------------------------------------------- - 게시판 -------------------------------------------------------------------------*/ /* 기본 */ .page-tab ~ .board-list-wrap {margin-top:20px;} .board-list-header .contents-tab {margin-bottom:16px;} /* 카드형 리스트 */ .card-list-wrap + .more {margin-top:32px;} .card-list-row + .card-list-row {margin-top:16px;} .btn-card-list-nav .item-thumb {width:40%;} .btn-card-list-nav .item-thumb .card-thumb {height:100%; width:100%; min-height:130px; padding:0;} .btn-card-list-nav .item-subject {font-size:20px;} .btn-card-list-nav .item-desc {font-size:16px;} .btn-card-list-nav .item-date {font-size:14px;} .btn-card-list-nav .item-more {display:none;} .btn-card-list-nav .item-subject + .item-desc {margin-top:18px;} .btn-card-list-nav .item-desc + .item-date {margin-top:8px;} .btn-card-list-nav.medium .item-subject + .item-desc {margin-top:18px;} .btn-card-list-nav.medium .item-desc + .item-date {margin-top:8px;} .btn-card-list-nav.medium .item-subject {font-size:20px;} .btn-card-list-nav.medium .item-desc {font-size:16px;} .btn-card-list-nav.medium .item-date {font-size:14px;} /* 갤러리형 리스트 */ .gallery-list-wrap + .more {margin-top:30px;} .gallery-list-inner {margin:-12px;} .gallery-list-cell {width:50%;padding:12px;} .btn-gallery-list-nav .item-subject {font-size:18px;} /* 카드 썸네일 */ .new .card-thumb:after {top:0; left:-2px; width:38px; height:38px;} .new .card-thumb:before {clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0% 44px);} .new .card-thumb .obj {clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0% 44px); } .card-thumb {width:auto; height:auto; padding-top:56.40%;} /* 유저 정보 */ .user-name .icon:first-child {margin-right:4px;} .user-name .icon:last-child {margin-left:4px;} /* 게시물 제목 */ .board-subject .state:first-child {margin-right:10px;} .board-subject .state:last-child {margin-left:10px;} /* 검색 결과 없을 때 */ .board-search-none {padding:120px 0; text-align:center; display:block; height:auto; border:none; background:transparent;} .board-search-none .value {font-size:18px;} .board-search-none .value + .desc {margin-top:10px;} .board-search-none .desc {font-size:14px; line-height:1.5; color:#fff;} .board-search-none .btns {margin-top:60px;} /* 게시물이 없을 때 */ .board-list-none {padding:120px 0; text-align:center; display:block; height:auto; border:none; background:transparent;} .board-list-none .value + .desc {margin-top:10px;} .board-list-none .desc {font-size:14px; line-height:1.5; color:#fff;} .board-list-none .btns {margin-top:60px;} /* 게시판 상세 */ .board-view-area {margin-right:24px;} /* 게시판 상세 관련 리스트 */ /* 게시판 검색 */ .board-search-input {position:absolute;bottom:0;left:0; width:100%;} .board-search-input .form-search {max-width:100%;} /*---------------------------------------------------------------------- - 레이아웃 -------------------------------------------------------------------------*/ /* 헤더 */ .header-wrap {position:static;top:auto;left:auto;width:auto;height:auto; background:rgba(0,0,0,0); overflow:visible;} .header-wrap:before {display:none;} .header-wrap:after {display:none;} .header-inner {position:static; max-width:none; width:static; height:static; margin:static;} .header-inner:before {content:''; position:fixed; top:0;left:0;display:block;width:100%;height:56px;z-index:1500; background:#141414; } .header-inner .logo {position:fixed; top:12px; left:23px; width:99px; height:32px; z-index:2000;} .header-inner .btn-client-download {display:none;} .gnb-wrap {position:fixed; top:0; left:0; right:0; bottom:0; width:auto; height:auto; z-index:1900; visibility:hidden; transform:translate(110% , 0%); transition:transform 0s 0.6s ease, visibility 0s 0.6s ease;} .gnb-outer {position:absolute; top:0; left:0;width:100%; height:0%; overflow:hidden; transition:height 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000); background:#141414;} .gnb-inner {position:absolute; top:0;left:0;width:100%;height:100%; display:flex; z-index:5; padding-top:56px; box-sizing:border-box; flex-direction:column;} .gnb-menu {position:relative; top:auto; left:auto; width:100%; height:100%; flex:1; z-index:5; padding:0; text-align:center; overflow-x:hidden; overflow-y:auto; border-top:1px solid #333;} .gnb-menu-list {position:relative; display:block; width:100%; height:auto; padding:28px 0 37px 0; margin-top:0;} .gnb-menu-list .btn-gnb-nav {position:relative; justify-content:flex-start; width:100%; max-width:100%; margin:0 auto; height:49px; padding:0 0 0 46px;font-size:20px; color:#fff; font-weight:400; border:none; text-align:left; box-sizing:Border-box;} .gnb-menu-list .btn-gnb-nav:before {top:50%;left:20px; width:16px;height:12px;margin-top:-6px;background:url(../images/icons/icon-header-menu-actived.png) center center no-repeat; background-size:100% 100%;} .gnb-menu-list .btn-gnb-nav.two-depth:after {content:''; position:absolute; top:50%; right:24px; width:20px; height:12px; margin-top:-6px; background:url(../images/icons/icon-mobile-gnb-nav-arrow-white.png) center center no-repeat; background-size:18px auto; opacity:1; transition:opacity 0.2s ease; transform:rotate(180deg);} .gnb-menu-cell {position:relative; transform:translate(0% , 40px); opacity:0; transition:transform 0s 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0s 0.6s ease;} .gnb-menu-cell + .gnb-menu-cell {margin-left:0; margin-top:10px;} .gnb-menu-cell:hover .btn-gnb-nav {color:#fff;} .gnb-menu-cell.actived .btn-gnb-nav, .gnb-menu-cell.actived .btn-gnb-nav:hover {color:#F2C140;} .gnb-menu-cell.show .btn-gnb-nav, .gnb-menu-cell.show .btn-gnb-nav:hover {color:#F2C140;} .gnb-menu-cell.show .btn-gnb-nav:after {transform:rotate(0deg);} .gnb-menu-cell.show .snb-menu {display:block;} .gnb-menu-cell.show .btn-gnb-nav:before {opacity:0;} .gnb-menu-cell.show .btn-gnb-nav:after {opacity:1;} .gnb-logo {position:relative; display:inline-block;width:170px;height:53px;font-size:0;} .gnb-logo > img {position:relative; width:100%; height:100%; transform:translate(0% , -250%); transition:transform 0s 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000);} .gnb-menu-cell:nth-child(5) .btn-gnb-nav:after {content:'';display:block;width:12px;height:12px;margin-left:7px; background:url(../images/icons/icon-gnb-menu-blank.png) center center no-repeat; background-size:100% 100%;} .snb-menu {position:relative; top:auto; left:auto; min-width:0; padding:0; transform:none; transition:none; display:none;} .snb-menu-list {padding:0 20px; transform:none; background:rgba(255,255,255,0); border:none;} .snb-menu-cell {text-align:left;} .snb-menu-cell + .snb-menu-cell {margin-top:1px;} .snb-menu-cell > a {position:relative; width:100%; display:inline-flex; align-items:center; height:38px; font-size:14px; color:#b2b2b2; line-height:1.45; padding:0 42px; font-weight:300;} .snb-menu-cell > a:hover {color:#b2b2b2;} .snb-menu-cell > a:before {content:''; position:absolute; top:50%;left:20px; width:16px;height:12px;margin-top:-6px;background:url(../images/icons/icon-header-menu-actived.png) center center no-repeat; background-size:100% 100%; opacity:0;} .snb-menu-cell.actived > a {color:#f2c140;} .snb-menu-cell.actived > a:before {opacity:1;} .btn-mobile-header-open {position:fixed; top:0; right:0; display:block; width:64px; height:56px; font-size:0; z-index:1600; background:url(../images/icons/icon-header-menu-open.png) center center no-repeat; background-size:100% 100%;} .btn-mobile-header-close {position:absolute; top:0; right:0;display:block;width:60px;height:56px;font-size:0;background:url(../images/icons/icon-header-menu-close.png) center center no-repeat; background-size:100% 100%; z-index:15;} .gnb-sns-list {flex:0 0 auto; display:flex; margin:0 20px; padding-bottom:9px; border-top:1px solid #333; transform:translate(0% , 100%); transition:transform 0.3s 0s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0s 0s ease;} .gnb-sns-list > li {flex:1;} .gnb-sns-list .btn-gnb-sns {display:flex; align-items:center; justify-content:center; width:100%; height:60px; font-size:0; background-repeat:no-repeat; background-size:32px auto; background-position:center center;} .gnb-sns-list .btn-gnb-sns.discode {background-image:url(../images/icons/icon-sns-white-discode.png);} .gnb-sns-list .btn-gnb-sns.youtube {background-image:url(../images/icons/icon-sns-white-youtube.png);} .gnb-sns-list .btn-gnb-sns.twitter {background-image:url(../images/icons/icon-sns-white-twitter.png);} .gnb-sns-list .btn-gnb-sns.facebook {background-image:url(../images/icons/icon-sns-white-facebook.png);} .gnb-sns-list .btn-gnb-sns.instargram {background-image:url(../images/icons/icon-sns-white-instargram.png);} #header.actived .gnb-wrap {transform:translate(0% , 0%); visibility:visible; transition-delay:0s;} #header.actived .gnb-outer {height:100%;} #header.actived .gnb-logo > img {transform:translate(0% , 0%); transition-delay:0.2s; transition-duration:0.6s;} #header.actived .gnb-menu-cell {transform:translate(0% , 0%); opacity:1;} #header.actived .gnb-menu-cell:nth-child(1) {transition-duration:0.6s; transition-delay:0.2s;} #header.actived .gnb-menu-cell:nth-child(2) {transition-duration:0.6s; transition-delay:0.25s;} #header.actived .gnb-menu-cell:nth-child(3) {transition-duration:0.6s; transition-delay:0.3s;} #header.actived .gnb-menu-cell:nth-child(4) {transition-duration:0.6s; transition-delay:0.35s;} #header.actived .gnb-menu-cell:nth-child(5) {transition-duration:0.6s; transition-delay:0.4s;} #header.actived .gnb-menu-cell:nth-child(6) {transition-duration:0.6s; transition-delay:0.45s;} #header.actived .gnb-sns-list {transform:translate(0% , 0%); transition-duration:0.6s; transition-delay:0.45s;} #contents {padding-top:56px; padding-bottom:100px;} .sub-visual + #contents {padding-top:27px; padding-bottom:125px;} /* 푸터 */ .footer-wrap {} .footer-sns-menu {height:75px;} .footer-sns-inner {height:75px;} .footer-sns-list {height:75px;} .footer-data {padding:36px 0 64px 0;} .footer-language {position:relative; top:auto; right:auto;} .footer-menu {margin-top:28px;} .footer-menu-list {max-width:400px;} .footer-menu-list > li {padding:8px 20px;} .footer-menu-list > li:nth-child(1):before, .footer-menu-list > li:nth-child(4):before {display:none;} .footer-address {margin-top:28px;} .footer-address address {max-width:720px;} .footer-address address > span:first-child:before, .footer-address address > span:nth-child(5):before{opacity:1;} .footer-address address > span:nth-child(1):before, .footer-address address > span:nth-child(4):before, .footer-address address > span:nth-child(7):before{opacity:0;} .footer-limit {margin-top:18px; display:block; width:100%;} .footer-limit .footer-limit-img {margin-right:0px; margin-bottom:18px;} .footer-limit-table {width:100%; max-width:583px; margin:0 auto;} /*---------------------------------------------------------------------- - 레이어팝업 -------------------------------------------------------------------------*/ /* 레이어팝업 > 미디어 상세 */ .btn-media-view-close {margin-left:0; top:auto; bottom:100%; right:0; margin-bottom:10px; left:auto; margin-right:-18px;} .btn-media-view-prev {width:38px; height:38px; margin:-19px 0 0 -19px;} .btn-media-view-next {width:38px; height:38px; margin:-19px -19px 0 0;} .btn-media-view-close .icon, .btn-media-view-prev .icon, .btn-media-view-next .icon {width:100%; height:100%;} .media-view-download {margin-top:24px;} } /*============================================== @ 모바일 기본 ==============================================*/ @media screen and (max-width:900px) { .board-view-wrap {display:block;} .board-view-area {width:auto; margin-right:0;} .board-view-side {display:none;} } @media screen and (max-width:800px) { .download-pop-outer {min-height:0; display:flex; align-items:center; justify-content:center; width:320px; height:505px; margin:0 auto; background:url(../images/contents/download-pop-bg-m.png) center center no-repeat; padding:0; background-size:100% 100%;} .download-pop-wrap {max-width:320px; padding-top:47px;} .download-pop-inner {width:100%;padding:0 36px; box-sizing:border-box;} .download-pop-inner .item-title > em {font-size:22px; line-height:1.22; padding:0 48px;} .download-pop-inner .item-title > em:before {width:12px;height:11px;margin-top:-6px;} .download-pop-inner .item-title > em:after {width:12px;height:11px;margin-top:-6px;} .download-pop-inner .item-desc {margin-top:36px; font-size:14px; line-height:1.5;} .download-pop-inner .item-desc > span {margin-top:21px;} .download-pop-inner .item-btns {width:100%;margin-top:36px;} .download-pop-inner .item-btns-inner {flex-wrap:wrap;margin:-4px; gap:0;justify-content:space-around;} .download-pop-inner .item-btns-cell {padding:4px;box-sizing:border-box;width:50%;} .download-pop-inner .item-btns-cell > a {display:block;} .download-pop-inner .item-btns-cell > a > img {width:100%; max-width:none;} .download-pop-inner .item-btns-inner a img {height: 35px;} .download-pop-inner .item-btns-inner .item-btns-cell:nth-child(1) { order: 5;;} .download-pop-inner .item-btns-inner .item-btns-cell:nth-child(2) { order: 3; } .download-pop-inner .item-btns-inner .item-btns-cell:nth-child(3) { order: 4; } .download-pop-inner .item-btns-inner .item-btns-cell:nth-child(4) { order: 1; } .download-pop-inner .item-btns-inner .item-btns-cell:nth-child(5) { order: 2; } .btn-download-close {bottom:auto;top:0;width:47px;height:47px; margin:0; background-size:23px auto;} .window-pop-outer {min-height:0; display:flex; align-items:center; justify-content:center; width:320px; height:417px; margin:0 auto;background:url(../images/contents/window-layer-pop-bg-m.png) center center no-repeat;padding:0;background-size:100% 100%;} .window-pop-wrap {max-width:320px; padding-top:5px;} .window-pop-inner .item-title {position:relative; display:inline-flex; align-items:center; font-size:18px; line-height:36px; font-weight:400; color:#fff; padding:0 15px;} .window-pop-inner .item-desc {margin-top:45px; font-size:16px; line-height:36px; color:#fff; font-weight:400;letter-spacing: -0.010em;} .window-pop-inner .item-btns {margin-top:55px;} .window-pop-inner .item-btns-inner {display:flex;justify-content: center; align-items:center; gap:0 6px;} .window-pop-inner .item-btns-inner a img{height:41px;} .btn-window-close {position:absolute; bottom:100%; right:0px; display:block; font-size:0; width:35px;height:35px; margin:0; background:url(../images/contents/windows-pop-close.png) center center no-repeat; background-size:100% 100%; z-index:15;} .mo-enter{display: block;} } @media screen and (max-width:768px) { /*---------------------------------------------------------------------- - 버튼 -------------------------------------------------------------------------*/ /* 버튼 > 컨텐츠 탭 */ .page-tab-scroller {margin:0 -20px;} .page-tab-scroller .page-tab-inner {padding:0 20px; } .page-tab-scroller .page-tab-inner:after {flex:0 0 20px;} .page-tab ~ .board-list-wrap {margin-top:14px;} .page-title-group + .page-tab {margin-top:14px;} /* 버튼 > 종류별 */ .btn-page-more {height:38px; font-size:14px;} .btn-page-more:hover {color:#000; background-color:#f2c140; border-color:#f2c140;} /* 버튼 > 페이지 뒤로가기 */ .btn-page-prev {min-width:34px; border-radius:50%; height:34px; font-size:0; background:rgba(0,0,0,0.3); border:1px solid #808080; box-sizing:border-box;} .btn-page-prev:before {content:''; display:block;width:34px;height:34px;background:url(../images/icons/icon-page-prev.png) center center no-repeat; background-size:100% 100%;} .btn-page-prev > em {display:none;} .btn-video-play {height:33px; padding:0 20px 0 5px; font-size:11px;} .btn-video-play > .icon {width:25px; height:25px; margin-right:14px;} .btn-audio-toggle {} .btn-audio-toggle .state {width:34px;height:34px;} .btn-audio-toggle > em {margin-left:7px;font-size:12px;} /* 공통 > 아코디언 */ .accordion-cell + .accordion-cell {margin-top:12px;} .accordion-header .btn-accordion-menu {padding:0 30px; min-height:30px; height:auto; font-size:16px; line-height:1.87; text-align:left;} /*---------------------------------------------------------------------- - 게시판 -------------------------------------------------------------------------*/ /* 카드형 리스트 */ .card-list-row + .card-list-row {margin-top:12px;} .card-list-wrap + .more {margin-top:24px;} .btn-card-list-nav {font-size:14px; color:#B2B2B2; border-radius:0px 16px; border-color:#4d4d4d;} .btn-card-list-nav .item-inner {display:block;padding:0;} .btn-card-list-nav .item-thumb {width:100%;} .btn-card-list-nav .item-thumb + .item-info .item-info-inner {margin-top:0;} .btn-card-list-nav .item-thumb .card-thumb {padding-top:38.67%; height:auto; min-height:0;} .btn-card-list-nav .item-info {display:block; padding:0; border:none;} .btn-card-list-nav .item-info:before , .btn-card-list-nav .item-info:after , .btn-card-list-nav .item-info-inner:before {display:none;} .btn-card-list-nav .item-info-inner {position:relative; padding:30px 12px 14px 12px; border-top:1px solid #333;} .btn-card-list-nav .item-subject + .item-desc {margin-top:0px;} .btn-card-list-nav .item-desc + .item-date {margin-top:0px;} .btn-card-list-nav .item-subject {font-size:14px; line-height:1.35; font-weight:400; color:#fff;} .btn-card-list-nav .item-subject .txt {-webkit-line-clamp: 1;} .btn-card-list-nav .item-desc {display:none;} .btn-card-list-nav .item-date {position:absolute;top:8px;left:12px; font-size:12px; line-height:16px; font-weight:400; text-align:left; color:#808080;} .btn-card-list-nav .item-more {display:block;position:absolute;top:8px;right:12px; font-size:12px; line-height:16px; font-weight:400; text-align:left; color:#F2C140;} .btn-card-list-nav.medium {} .btn-card-list-nav.medium .item-inner {padding:0;} .btn-card-list-nav.medium .item-info-inner {border:none; padding:43px 16px 24px 16px;} .btn-card-list-nav.medium .item-subject + .item-desc {margin-top:16px;} .btn-card-list-nav.medium .item-desc + .item-date {margin-top:0;} .btn-card-list-nav.medium .item-subject {font-size:14px;} .btn-card-list-nav.medium .item-desc {display:block; font-size:12px;} .btn-card-list-nav.medium .item-date {font-size:12px; line-height:16px; position:absolute; top:16px; right:16px;} .btn-card-list-nav.medium .item-more {display:none;} .btn-card-list-nav.small {border:none; border-radius:0px;} .btn-card-list-nav.small .item-inner {display:flex; padding:0;} .btn-card-list-nav.small .item-thumb {flex:0 0 auto; width:50%;} .btn-card-list-nav.small .item-thumb .card-thumb {width:auto;height:auto;min-height:0;padding-top:57.59%;} .btn-card-list-nav.small .item-thumb + .item-info .item-info-inner {margin:0;} .btn-card-list-nav.small .item-info {flex:0 0 auto; width:50%; padding-left:12px;display:flex;} .btn-card-list-nav.small .item-info:before, .btn-card-list-nav.small .item-info:after, .btn-card-list-nav.small .item-subject {font-size:14px; color:#B2B2B2; line-height:1.35;} .btn-card-list-nav.small .item-subject .txt {-webkit-line-clamp: 2;} .btn-card-list-nav.small .item-info-inner:before {display:none;} .btn-card-list-nav.small .item-info-inner {display:flex; flex-direction:column; height:100%; box-sizing:border-box; padding:0;} .btn-card-list-nav.small .item-more {display:none;} .btn-card-list-nav.small .item-date {position:relative; top:auto; left:auto; margin-top:auto; padding-top:12px; text-align:right;} /* 갤러리형 리스트 */ .gallery-list-wrap + .paging-wrap {margin-top:32px;} .gallery-list-inner {margin:0;} .gallery-list-cell {width:100%; padding:0;} .gallery-list-cell + .gallery-list-cell {margin-top:24px;} .btn-gallery-list-nav {display:block; height:auto;} .btn-gallery-list-nav .item-inner {display:block; height:auto; width:100%;} .btn-gallery-list-nav .item-info {height:auto; padding:16px; } .btn-gallery-list-nav .item-subject {font-size:16px;} /* 검색 결과 없을 때 */ .board-search-none {padding:100px 0; text-align:center;} .board-search-none .value {font-size:18px;} .board-search-none .btns {margin-top:50px;} /* 게시물이 없을 때 */ .board-list-none {padding:100px 0; text-align:center;} .board-list-none .btns {margin-top:50px;} /* 게시판 상세 */ .board-view-area {margin:0 -20px -80px -20px;} .board-view-header {padding:20px; font-size:12px; color:#808080; border-top:2px solid #F2C140;} .board-view-subject .item-subject h3 {font-size:18px; line-height:1.4; font-weight:400; color:#fff;} .board-view-header .item-options {display:inline-flex; margin-top:12px;} .board-view-header .item-options-cell + .item-options-cell {margin-left:8px; padding-left:8px;} .board-view-body {padding:20px;} .board-view-body:before {left:20px; width:4px; height:4px;} .board-view-body:after {right:20px; width:4px; height:4px;} .board-view-body img {max-width:100%; width:100%; height:auto !important;} .board-view-detail:before {margin:1px 22px auto 22px;} .board-view-footer .btn-ui {padding:20px; margin-top:16px;} /*---------------------------------------------------------------------- - 레이아웃 -------------------------------------------------------------------------*/ /* 헤더 */ .header-inner:before {height:56px;} .header-inner .logo {top:12px; left:24px;} .btn-mobile-header-open {height:56px; width:56px;} #contents {padding-top:56px; padding-bottom:80px;} /* 푸터 */ .footer-sns-menu {height:58px;} .footer-sns-inner {height:58px;} .footer-sns-inner:before {width:100%; clip-path:none;} .footer-sns-list {height:58px;} .footer-sns-list > li {margin:0 11px;} .footer-sns-list .btn-footer-sns {width:26px; height:26px;} .footer-data {padding:24px 0;} .footer-menu {margin-top:18px;} .footer-menu-list {max-width:320px;} .footer-menu-list > li {padding:0;} .footer-menu-list > li > a {display:block; padding:6px 16px; font-size:14px;} .footer-address {margin-top:24px;} .footer-address address {max-width:900px; font-size:12px; line-height:1.8;} .footer-address address > span {display:block; padding:0; width:100%;} .footer-address address > span:before {display:none;} .footer-limit {margin-top:35px;} .footer-limit .footer-limit-img {margin-bottom:10px;} .footer-limit .footer-limit-img img {width:128px;} .footer-limit-table {width:310px;} .footer-limit-table table > colgroup .col-1 {width:18%;} .footer-limit-table table > colgroup .col-3 {width:18%;} .footer-limit-table table > colgroup .col-2 {width:32%;} .footer-limit-table table > colgroup .col-4 {width:32%;} .footer-limit-table table > tbody > tr > th, .footer-limit-table table > tbody > tr > td {padding:1px 5px; font-size:7px;} .footer-limit-table table > tbody > tr > td {text-align:left;} .footer-limit-table table > tbody > tr > th {padding:1px 0;} .footer-logo {width:250px; height:19px; margin-top:24px; background:url(../images/common/footer-logo-m.png) center center no-repeat; background-size:100% auto;} .footer-logo + .footer-copy {margin-top:24px;} .footer-copy {margin-top:24px;} /*---------------------------------------------------------------------- - 레이어팝업 -------------------------------------------------------------------------*/ .pop-children {padding:16px;} /* 레이어팝업 > 미디어 상세 */ .btn-media-view-close {} .btn-media-view-prev {width:24px; height:24px; margin:-12px 0 0 -12px;} .btn-media-view-next {width:24px; height:24px; margin:-12px -12px 0 0;} .media-view-download {display:block; align-items:center; justify-content:center;} .media-view-download .btn-cell {margin:0;} .media-view-download .btn-cell + .btn-cell {margin-top:16px;} .media-view-download .btn-cell .btn {font-size:14px; height:42px; padding:0 24px; width:160px;} .pop-character-skill {max-width:100%; padding:0;} .btn-character-pop-close {margin:0 0 10px 0; left:auto; right:0; top:auto; bottom:100%; width:44px; height:40px;} .cookie-accept-outer {padding:20px; width:100vw; box-sizing:border-box;} .cookie-accept-inner {width:100%; padding:24px 24px 16px 24px;} .cookie-accept-inner .item-title {font-size:16px; line-height:1.75;} .cookie-accept-inner .item-title:before {margin-right:6px; width:16px; height:16px;} .cookie-accept-inner .item-desc {margin-top:8px; font-size:14px; line-height:1.71;} .cookie-accept-inner .item-more {margin-top:0px;} .cookie-accept-inner .item-more > button {font-size:14px; line-height:1.71;} .cookie-accept-inner .item-btns {margin-top:16px;} .cookie-accept-inner .item-btns .grid-layout-inner {margin:0; display:block;} .cookie-accept-inner .item-btns .grid-layout-cell {width:100%; padding:0;} .cookie-accept-inner .item-btns .grid-layout-cell + .grid-layout-cell {margin-top:16px;} .cookie-accept-inner .item-btns .grid-layout-cell:nth-child(3) {margin-top:12px;} .cookie-accept-inner .item-btns .btn-continue {font-size:14px; line-height:1.71;} .cookie-detail-wrap {padding-top:47px; text-align:left; } .cookie-detail-inner {padding:24px;} .btn-cookie-pop-close {width:47px;height:47px;} .cookie-detail-body .title {font-size:16px; line-height:1.75;} .cookie-detail-body .title:before {margin-right:6px; width:16px; height:16px;} .cookie-detail-body .desc {margin-top:12px; font-size:14px; line-height:1.71;} .cookie-detail-body .accordion-list-wrap {margin-top:12px;} .cookie-detail-ui {margin-top:24px;display:block; gap:0;} .cookie-detail-ui .btn-page-nav {width:100%;} .cookie-detail-ui .btn-page-nav + .btn-page-nav {margin-top:16px;} /* 에러페이지 */ .error-wrap .error-inner .item-cate {padding-top:24px;} .error-wrap .error-inner .item-cate:before {width:16px;margin-left:-8px;} .error-wrap .error-inner .item-title {margin-top:34px; font-size:20px;} .error-wrap .error-inner .item-desc {margin-top:24px; font-size:14px;} .error-wrap .error-inner .item-ui {margin-top:48px;} } /*============================================== @ 모바일 해상도별 분기 ==============================================*/ @media screen and (max-width:520px) { }