/*************************************************************************************** * * GLOBAL * ***************************************************************************************/ body.ndesk-sub {padding-top: 130px;} .text-primary {color: #24428f;} /*************************************************************************************** * * navbar * ***************************************************************************************/ .navbar-default {padding: 0; box-shadow: none;} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {font-weight:600;} .navbar-brand img.default-logo {max-width: 112px;} .navbar-brand img.mobile-logo {max-width: 70px; display:none;} #fixed-navbar {position: sticky !important; top:0; width:100%} .navbar.affix {box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);} .navbar.navbar-main {background-color: rgba(255,255,255,0.97); z-index: 8888;} .navbar-default .navbar-nav > li > a:hover {color: #f5222a;} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #f5222a;} .navbar .container {max-width: 1240px;} /*************************************************************************************** * * container * ***************************************************************************************/ .container {width: 100%; max-width: 1080px; padding-left: 20px; padding-right: 20px;} .container-warp {background-color:#fff;} .container.container-sub {padding-top:80px; padding-bottom:120px;} .container.container-sub .ndesk-emailPanel-default {width:180px;} .container.container-sub .ndesk-emailPanel-active {width: auto; margin-top:10px;} .container.container-sub .box-explain {position:relative; padding:40px 40px 372px 40px; color:#fff; background:#337ab7; border-radius:5px;} .container.container-sub .box-explain .box-explain-title {color:#fff; font-weight:600; color:#fff; font-size: 30px;} .container.container-sub .box-explain p {color:#fff; font-size: 14px; margin: 0 0 10px;} .container.container-sub .box-explain .box-explain-watermark {position: absolute; right: 15px; bottom: 15px; line-height: 1; opacity: .1; font-size:200px; color: black;} .container.container-sub .form-control.email-account {width:30%; display:inline-block;} .container.container-sub.container-sub-half {max-width: 580px;} .container.container-sub.container-sub-half .heading {border-bottom: 0; text-align: center;} .container.container-sub.container-sub-half .heading h2 {color:#687074; border-bottom: 0; font-size:60px; display:block;} .container.container-sub.container-sub-half .heading h3 {border-bottom: 0;} .container.container-sub.container-sub-half .heading .heading-highlight {color: #24428f; font-size:25px; font-weight:900;} @media (max-width: 750px) { .container.container-sub {padding-top: 40px; padding-bottom: 60px; overflow: hidden;} } /*************************************************************************************** * * footer * ***************************************************************************************/ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .form-control {border-radius: 4px;} /*************************************************************************************** * * 공용 콘텐츠 * ***************************************************************************************/ .heading {margin:75px 0 60px 0;} .heading h3 {font-size: 30px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: -1.5px; text-align: left; color: #383838; border:0 !;} .content-sub-title {font-size: 24px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.17; letter-spacing: -1.2px; text-align: left; color: #383838; padding:0; margin:0 0 23px 0;} .content-sub {margin: 0 0 75px 0;} .container .contract {padding: 28px 1px 28px 23px; border-radius: 12px; border: solid 1px #ddd; background-color: #f8f8f8;} .container .contract ul {padding: 0 25px 0 5px; list-style-type: none; margin: 0;} .container .contract p {font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.86; letter-spacing: -0.7px; text-align: left; color: #7e7e7e; word-break: keep-all;} .container .contract ul > li {text-indent: -5px; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.86; letter-spacing: -0.7px; text-align: left; color: #7e7e7e; word-break: keep-all;} .container .contract ul > li:before {content: "- "; text-indent: -5px;} .container .contract .scrollable-container {max-height:282px; margin:0;} .btn.btn-primary {border-radius: 6px; background-color: #376fff; border-color: #376fff;} .btn.btn-dark {border-radius: 6px; background-color: #383838; border-color: #383838; color:#fff;} /*************************************************************************************** * * 메인 콘텐츠 * ***************************************************************************************/ .contents-main .center-line {margin: 30px 0 15px 0;} .contents-main .intro-text-1 {padding: 20px 0 5px 0; background-color:#2d2d2d;} .contents-main .main-introduce-item h4 {color: #2e67af;} .contents-main .main-introduce-heading h4 {font-weight: 400; margin-bottom:2px;} .contents-main .main-introduce-heading h3 {line-height: 30px;} .contents-main .main-introduce-heading h2 {font-size: 40px; text-transform: initial !important;} .contents-main .main-introduce-heading .counter {font-style:italic; font-size:150%; letter-spacing:-1px} .contents-main .main-introduce-item {border:1px solid #d8d8d8; border-right:1px solid #fff; padding-top:30px; padding-bottom:15px; background-color:#fff;} .contents-main .main-introduce-item:last-child {border-right:1px solid #d8d8d8;} .contents-main .main-introduce-item:hover, .main-introduce-item:focus {background-color:#fafafa; border-color:#f5222a; -webkit-box-shadow:inset 0px 0px 0px 2px #f5222a; -moz-box-shadow:inset 0px 0px 0px 2px #f5222a; box-shadow:inset 0px 0px 0px 2px #f5222a; transition: all 300ms ease-in;} .contents-main .main-introduce-item h4 {color:#2e67af;} .contents-main .main-carousel .carousel-indicators.carousel-indicators-top {top:0; bottom: auto;} .contents-main .main-carousel .carousel-indicators {position: absolute; left: 0 !important; right: 0 !important; margin-left:0; width:auto; overflow: initial;} .contents-main .main-carousel .carousel-indicators-line {height: 1px; border-top: 1px solid #cccccc; width: 77%; max-width:770px; display: block; text-align: center; margin-left: auto; margin-right: auto; position: absolute; top: 44px; left: 0; right: 0;} .contents-main .main-carousel .carousel-indicators a:hover {background-color:#fafafa; border-color:#2963ad; -webkit-box-shadow:inset 0px 0px 0px 2px #2963ad; -moz-box-shadow:inset 0px 0px 0px 2px #2963ad; box-shadow:inset 0px 0px 0px 2px #2963ad; transition: all 300ms ease-in;} .contents-main .main-carousel .carousel-indicators .active {background-color: #2963ae;} .contents-main .main-carousel .carousel-indicators li {background-color: #999; background-color: rgba(70,70,70,.25); width:15px; height:15px;} .contents-main .main-carousel .carousel-control {color:#2963ad;} .contents-main .main-carousel .carousel-control .icon {font-size:100px;} .contents-main .main-carousel .carousel-indicators .active {background-color:#2963ad !important; color:#fff !important; height:auto !important;} .contents-main .main-carousel .carousel-indicators a {display:inline-block; min-width:88px; color:#868686; background-color: #fff; border: 1px solid #d8d8d8; font-size:32px; padding:20px; border-radius: 50%; margin-right:10px; vertical-align: middle; margin-bottom:10px;} .contents-main .main-carousel .item img {max-width:95%;} .contents-main .main-process-item {min-width:100px; display:inline-block; border:1px solid #d8d8d8; border-radius: 10px; padding:15px 10px 10px 10px; background-color:#fff; margin-bottom:10px;} .contents-main .main-process-item span {display:block;} .contents-main .main-module-item {min-width:100px; display:inline-block; border:1px solid #d8d8d8; border-radius: 10px; padding:15px 10px 10px 10px; background-color:#fff; margin-bottom:10px;} .contents-main .main-module-item span {display:block;} .contents-main .main-module-item i {font-size:20px;} .contents-main .main-module-item:last-child {border-right:1px solid #d8d8d8;} .contents-main .main-introduce-item h4 {color:#2e67af; margin-bottom: 0;} .contents-main .main-introduce-item .main-introduce-item-icon {display: inline; line-height: 100px;} .contents-main .fullwidthbanner .rev-buttons .btn-theme-bg {border-color:#32c5d2; background-color:#32c5d2;} .contents-main .fullwidthbanner .caption.title {text-transform: initial; font-weight: lighter; font-size:55px;} .contents-main .fullwidthbanner .caption.title-2 {text-transform: initial;} .contents-main .fullwidthbanner .caption.text {font-weight: lighter;} .contents-main .fullwidthbanner .caption .box {border:1px solid #fff; color:#fff; padding:15px 30px; font-size:22px; font-weight:600; border-radius:3px;} .contents-main .fullwidthbanner .caption .box-division {color:#fff; font-size:35px; font-weight:600; text-align:center;} .contents-main .fullwidthbanner .caption .text-highlight-num {color:#00a8f9;} .contents-main .fullwidthbanner .tp-banner .typed-cursor {color: #fff;} .contents-main section {margin-top: 80px} .contents-main section.features .features-text {min-height:70px; letter-spacing: -1px; line-height: 27px; font-size: 18px;} /* main slider */ .contents-main section.slider {position:relative; background-color: #22262f;} .contents-main section.slider .row, .contents-main section.slider .container, .contents-main section.slider .row div[class^="col-"] {height:100%;} .contents-main section.slider .slide-text {/*transform: translateY(70%); */ top: 122px; left:0; position:absolute; z-index:2;} .contents-main section.slider .slide-bg img {width:100%;} .contents-main section.slider h2 {letter-spacing: -1px; font-size: 48px; line-height: 50px; font-weight:100; color:#020202; margin-bottom:5px;} .contents-main section.slider h3 {font-size: 60px; line-height: 60px; font-weight: 900; color:#2963ac; margin-bottom:40px;} .contents-main section.slider h4 {letter-spacing: -1px; font-size: 25px; font-weight: 400; color:#35342f; margin-bottom: 20px;} .contents-main section.slider .slide-hash-tag {border: 1px solid #2963ad; color: #2963ad; min-width: 200px; min-height: 60px; display: inline-block; font-size: 20px; padding: 15px 20px; text-align: center; font-weight: 600; border-radius: 40px; margin-right:15px;} .contents-main section.slider .form-reuqest-warp {margin-top:50px;} /* highest-contest-item */ .contents-main > .highest-contest-item {color:#4b5154; background-color: transparent; padding: 10px; border: 1px solid #d8d8d8; border-radius: 5px; position: relative; margin-bottom:35px; min-height:485px;} .contents-main > .highest-contest-item .highest-contest-item-img {overflow:hidden; display:inline-block;} .contents-main > .highest-contest-item.empty {text-align:center; background-color:#fbfbfb; color:#898a8a;} .contents-main > .highest-contest-item.empty .contents {transform: translateY(100%);} .contents-main > .highest-contest-item.empty i {font-size: 100px; margin-bottom:20px;} .contents-main > .highest-contest-item .highest-contest-item-text-warp {margin-top:20px; padding:10px;} .contents-main > .highest-contest-item .highest-contest-item-text-spon {margin-top:35px;} .contents-main > .highest-contest-item .highest-contest-item-text-des {margin-top:15px;} .contents-main > .highest-contest-item .highest-contest-item-text-des h4 {margin-bottom: 5px;} .contents-main > .highest-contest-item .label {padding: .3em .6em .3em;} .contents-main > .highest-contest-item h3 {font-weight:900; color:#4b5154;} .contents-main > .highest-contest-item h4 {color:#4b5154;} .contents-main > .highest-contest-item h4 i {min-width:25px;} .contents-main > .highest-contest-item h4 span {font-weight:400;} .contents-main > .highest-contest-item h5 span {font-weight:400;} .contents-main > .highest-contest-item:hover, .contents-main .highest-contest-item:focus {background-color: #fafafa; border-color: #f5222a; -webkit-box-shadow: inset 0px 0px 0px 2px #f5222a; -moz-box-shadow: inset 0px 0px 0px 2px #f5222a; box-shadow: inset 0px 0px 0px 2px #f5222a; transition: all 300ms ease-in;} .contents-main > .highest-contest-item:hover img {transform: scale(1.1, 1.1); transition: all 300ms ease-in;} .contents-sub {padding-top:40px;} .contents-sub.contest .contest-des-view-line {border-top: 1px solid #e5e5e5; margin-top:100px; margin-bottom:100px;} .contents-sub.contest .contest-des-view {position:relative; padding-bottom:100px;} .contents-sub.contest .contest-des-view .contest-brand-story {width: 1140px; min-height: 680px; display:none; margin: 0 -570px; position: absolute; top:-186px; left: 50%; padding:55px 72px; background: #ffffff; color:#000000; border:2px solid #000000; z-index: 1;} .contents-sub.contest .contest-des-view .contest-brand-story.show {display:inline-block;} .contents-sub.contest .contest-des-view .contest-brand-story .btn-close {width:36px; height:36px; position:absolute; top:20px; right:20px; background:url('/src/highest/images/common/btn_close.png') no-repeat; outline:none; border:none;} .contents-sub.contest .contest-des-view .contest-brand-story dl {margin:0 0 40px 0; list-style:none;} .contents-sub.contest .contest-des-view .contest-brand-story dl dt {margin:0 0 20px 0; font-size:25px; line-height:25px;} .contents-sub.contest .contest-des-view .contest-brand-story dl dd {font-size:22px; line-height:32px;} .contents-sub.contest .contest-des-view .contest-brand-story .contest-brand-story-link {margin:70px 0 0 0; padding:30px 83px; display:inline-block; font-size:26px; font-weight:600; line-height:26px; background:#000000; color:#ffffff;} @media (max-width: 1199px) { .contents-sub.contest .contest-des-view .contest-brand-story {width: 940px; margin: 0 -470px;} } @media (max-width: 991px) { .contents-sub.contest .contest-des-view .contest-brand-story {width: 720px; margin: 0 -360px;} .contents-sub.contest .contest-des-view .contest-brand-story dl dt {font-size:20px; line-height:20px;} .contents-sub.contest .contest-des-view .contest-brand-story dl dd {font-size:18px; line-height:28px;} .contents-sub.contest .contest-des-view .contest-brand-story .contest-brand-story-link {margin:40px 0 0 0; padding:15px 60px; font-size:20px; line-height:20px;} } @media (max-width: 750px) { .contents-main section {margin-top: 50px} .contents-sub.contest .contest-des-view .contest-brand-story {width: initial; margin: 0; padding-left:22px; padding-right:22px; left:10px; right:10px;} .contents-sub.contest .contest-des-view .contest-brand-story dl dt {margin:0 0 10px 0; font-size:18px; line-height:18px;} .contents-sub.contest .contest-des-view .contest-brand-story dl dd {font-size:15px; line-height:25px;} .contents-sub.contest .contest-des-view .contest-brand-story .contest-brand-story-link {margin:20px 0 0 0; font-size:18px; line-height:18px;} } .contents-sub.contest .contest-des-view .img-responsive {display:inline-block;} .contents-sub.contest .contest-preview-title h2 {font-weight:600; margin-top:30px; margin-bottom:100px; text-align:center; font-size: 38px; letter-spacing: 0; color:#404040;} .contents-sub.contest .contest-preview-buttons {margin-top:50px;} .contents-sub.contest .contest-preview-buttons .contest-preview-button {width:31.99%; margin:0 2% 0 0; float:left;} .contents-sub.contest .contest-preview-buttons .contest-preview-button.last {margin:0;} .contents-sub.contest .contest-preview-buttons .contest-preview-button .btn {font-family:'Noto Sans KR'; font-size:16px;} @media (max-width: 500px) { .contents-sub.contest .contest-preview-buttons .contest-preview-button .btn {font-size:12px;} } @media (max-width: 400px) { .contents-sub.contest .contest-preview-buttons .contest-preview-button {width:100%; margin:0 0 10px 0;} .contents-sub.contest .contest-preview-buttons .contest-preview-button .btn {font-size:17px;} } .contents-sub.contest .contest-preview-buttons .contest-preview-message {width:100%; display:inline-block;} .contents-sub.contest .contest-preview-buttons .contest-preview-message .alert {margin-bottom:0;} /* .contents-sub.contest .contest-preview-img {min-height:420px; text-align:center;} .contents-sub.contest .contest-preview-img img {margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;} */ .contents-sub.contest .contest-preview-text {padding-left:40px;} .contents-sub.contest .contest-preview-text h5 {color:#000000; font-size: 18px; font-weight:100; letter-spacing: -2px; margin-bottom:10px;} .contents-sub.contest .contest-preview-text h4 {color:#2c2c2c; font-size: 22px; letter-spacing: -1px; margin-bottom:31px;} .contents-sub.contest .contest-preview-support {position: relative; padding: 30px; color: #fff; background: #e4eefa; border-radius: 5px;} .contents-sub.contest .contest-preview-support h3 {text-align:center; margin:0;} .contents-sub.contest .contest-preview-text .badge {padding: 6px; font-size: 14px; line-height: 28px; display: inline-block; margin: 0; border-radius: 3px;} .contents-sub.contest .contest-preview-text .badge.primary {background-color:#e51d24;} .contents-sub.contest .contest-preview-text .badge.warning {background-color:#ff9800;} .contents-sub.contest .contest-preview-text .badge.default {background-color:#616161;} .contents-sub.contest .contest-preview-text .badge.basic {background-color:#f4f4f4; color:#333;} /* 퀵바 */ .left-quick-icon {z-index:32767; position:fixed; bottom:5px; right:11px; border:4px solid #95a3ff; border-radius: 50%; background: #4e66ff; padding:5px; padding-top:20px; padding-bottom:20px; line-height: 1.42857143;} .left-quick-icon span {display:block; color:#fff; margin:0; font-size:12px;} .left-quick-icon a {text-decoration: none;} .badge {padding: 3px 6px 6px;} /*************************************************************************************** * * common/message * ***************************************************************************************/ .ndesk-system-error {margin-top:10vh; margin-bottom:10vh;} .ndesk-system-error .ndesk-system-error-detail {margin-top:20px; padding:20px; background-color:#eeeeee;} .ndesk-system-error .panel-footer {background-color: transparent; border-top: 0;} .ndesk-system-error .page-content {padding: 50px 0 50px 0;} .ndesk-system-error .panel-heading {padding: 0 0 15px 0;} .ndesk-system-error .panel-footer {padding: 0; border-top: 1px solid transparent; background-color: transparent; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;} .ndesk-system-error .panel-title {display: block; font-size: 18px; color: #37474f; font-weight:600;} .ndesk-system-error .panel-body {padding: 10px 0 30px 0;} .ndesk-system-error .panel-title i {color: #337ab7;} /*************************************************************************************** * * ETC * ***************************************************************************************/ .contact p {letter-spacing:-1px;} .footer-col h3 {text-transform: none;} .section-gray {background-color:#fbfbfb;} .portfolio {background-color: #fbfbfb;} .font-blue-800 {color: #2e67af; font-weight: 800;} .font-blue-600 {color: #2e67af; font-weight: 600;} .font-red-600 {color: #ee514a; font-weight: 600;} .btn-theme-bg, .btn-theme-bg:active, .btn-theme-bg:focus {border-color: #e51d24; color: #fff; background-color: #e51d24;} a.text-primary:hover, a.text-primary:focus {color: #24428f;} .ribbon-primary .ribbon-inner {background-color: #f5222a;} .heading h1, .heading h2, .heading h3, .heading h4, .heading h5, .heading h6 {border-bottom: 0;} .pagination > .active > a {background-color: #1764ab;} .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th {background-color: #d5ddf4;} .btn-theme-black, .btn-theme-black:focus, .btn-theme-black:active {background-color: #0f0f0f; color: #ffffff; border: 2px solid #0f0f0f;} .btn-theme-black:hover {background-color: #333; color: #ffffff;} .btn-theme-white, .btn-theme-white:focus, .btn-theme-white:active {border-color: #0f0f0f; background-color: #ffffff; color: #0f0f0f; border: 2px solid;} .btn-theme-white:hover {border-color: #333; background-color: #333; color: #ffffff;} .btn-theme-gray, .btn-theme-gray:focus, .btn-theme-gray:active {background-color: #696969; color: #ffffff; border: 2px solid #696969;} .btn-theme-gray:hover {border-color: #696969; background-color: #868585; color: #ffffff;} .btn-theme-padding-horizontal-zero {padding-left:0; padding-right:0;} /*************************************************************************************** * * 원페이지 게시판 * ***************************************************************************************/ .ndesk-board-list-title {margin-bottom:30px;} .ndesk-board-list {border-top: 2px solid #0d0d0d;} .ndesk-board-list .ndesk-board-list-row-none {padding:30px 10px; border-bottom:1px solid #0d0d0d; text-align:center; font-weight: 600; font-size:18px; color:#575757;} .ndesk-board-list .ndesk-board-list-row {padding:30px 10px; border-bottom:1px solid #0d0d0d;} .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-subject {padding-bottom:5px; float:left; font-weight: 400; font-size:20px; color:#575757; line-height:45px;} .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-subject a {color:#575757;} .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-subject a:hover, .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-subject a:active, .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-subject a:link, .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-subject a:visited {color:#575757;} .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-subject i {margin:0 0 0 10px; font-size:12px; color:#808080;} .ndesk-board-list .ndesk-board-list-row .ndesk-board-list-row-info {float:right; color:#868686; font-size: 20px;} /*************************************************************************************** * * 사이즈별처리 * ***************************************************************************************/ @media (max-width: 1200px) { .contents-main .main-introduce-item .main-introduce-item-text {min-height:100px;} .contents-main .contents-main .step-box-des {min-height: 100px;} .contents-main .step-box-header {font-size: 16px;} .contents-main .step-box-number {width: 23px; height: 23px; line-height: 23px; font-size: 16px;} } @media (max-width: 992px) { .contents-main .main-introduce-item {border: 1px solid #d8d8d8; border-bottom:1px solid #fff;} .contents-main .main-introduce-item:last-child {border-bottom:1px solid #d8d8d8;} .contents-main .main-carousel .carousel-indicators a {min-width: 49px; font-size: 20px; padding: 10px; margin-right: 5px; margin-bottom: 0px;} .contents-main .main-carousel .carousel-indicators .active {min-width: 49px !important;} .contents-main .main-carousel .carousel-indicators-line {width: 56%; top: 26px;} .contents-main .highest-contest-item h3 {font-size:20px;} .contents-sub.contest .contest-preview-title h2 {margin-top: 0; margin-bottom: 30px;} .contents-sub.contest .contest-preview-text {margin-top:60px; padding-left:0;} } @media (max-width: 767px) { .contents-main .main-introduce-item {border-left:1px solid #fff; border-right:1px solid #fff; border-bottom:1px solid #fff;} .contents-main .main-introduce-item:last-child {border-bottom:1px solid #d8d8d8;} .contents-main .main-module-box {border:0;} .contents-main .main-carousel {padding-top: 0;} .contents-main .main-carousel .carousel-indicators.carousel-indicators-top {display:none;} .contents-main .main-carousel .carousel-indicators-line {display:none;} .main-carousel .main-module-box {border-radius: 0;} .main-carousel .center-heading p {font-size: 16px; padding-left:10px; padding-right:10px;} .main-introduce-heading h2 {font-size: 25px;} .main-introduce-heading h4 {font-size: 16px;} /* main slide */ .contents-main section.slider .slide-text {left: auto; right: auto; text-align:center;} .contents-main section.slider h2 {font-size: 25px; margin-top: 30px; margin-bottom: 0px;} .contents-main section.slider h3 {margin-bottom: 27px;} .contents-main section.slider h4 {font-size: 17px; margin-bottom: 40px;} .contents-main section.slider .slide-hash-tag {min-width: 95%; margin-bottom: 5px;} .contents-main section.slider .slide-text {top:0; transform: translateY(1%);} .contents-sub.contest .contest-preview-title h2 {font-size: 26px;} .ndesk-board-list.onepage .ndesk-board-list-row-subject {width:100%;} .ndesk-board-list.onepage .ndesk-board-list-row-info {font-weight: 400; font-size: 13px;} } /*************************************************************************************** * * GLOBAL * ***************************************************************************************/ /* body {background-color: #fff;} */ .border-bottom-none {border-bottom:none !important;} .hs-ellipis {overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: block; white-space: nowrap;} .hs-ellipis-m1 { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all !important; -webkit-box-orient: vertical; display: -moz-box; display: -webkit-box; display: box; display: -ms-flexbox; -webkit-line-clamp: 1; line-clamp:1; line-height: 1.2em; height: 1.2em; } .hs-ellipis-m2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp:1; -webkit-box-orient: vertical; word-wrap: break-word; } .hs-ellipis-m3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp:3; -webkit-box-orient: vertical; word-wrap: break-word; } .navbar.navbar-main {background-color: #fff;} .navbar-collapse {padding-right: 0; padding-left: 0; margin-top: 0;} .nav.navbar-nav {float: initial; display:block;} .nav.navbar-nav li {height: 100px; display: flex; align-items: center;} .navbar-brand {margin-right: 100px; margin-left: 0 !important; height: 100px; padding: 0; display: flex; align-items: center;} .nav.navbar-nav .nav-link {float:right !important;} .nav.navbar-nav .nav-link.sns-link a {display: inline-block; padding-left: 10px !important;} .nav.navbar-nav .nav-link.sns-link a img {width: 40px;} .nav.navbar-nav .toggle a {font-size: 18px; font-weight: 500; font-stretch: normal; font-style: normal; letter-spacing: -0.9px; color: #313131;} .nav.navbar-nav .custom-nav-btn-flat {font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: -0.8px; color: #222;} .navbar-mobile-link .custom-round-btn, .nav.navbar-nav .custom-round-btn {padding:5px 15px; border:1px solid #707070; font-size: 16px; font-weight: 500; font-stretch: normal; font-style: normal; letter-spacing: -0.8px; text-align: left; color: #383838; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;} .navbar-mobile-link .custom-round-btn.custom-round-btn-grey-r8, .nav.navbar-nav .custom-round-btn.custom-round-btn-grey-r8 {border: solid 1px #cfcfcf; border-radius: 8px;} .navbar-mobile-link .custom-round-btn.custom-round-btn-dark, .nav.navbar-nav .custom-round-btn.custom-round-btn-dark {background:#000000; color:#ffffff;} .navbar-collapse.in {overflow-y: hidden; height: calc(100vh - 64px);} .navbar-default .navbar-nav > li.nav-link > a {padding-left:20px !important; padding-right:0 !important;} .navbar-default .nav > li > a i {margin-right: 3px;} .navbar-default .navbar-nav > li.toggle {padding-left:0; padding-right:50px;} .navbar-default .navbar-nav > li.toggle > a {padding-left:0; padding-right:0; font-size: 17px; font-weight: 600; font-stretch: normal; font-style: normal; letter-spacing: -0.85px; color: #333;} .navbar-default .navbar-nav > li.toggle > a:hover {text-decoration:none;} .navbar-default .navbar-toggle {width: 64px; height: 64px; margin-top: 0; margin-bottom: 0; margin-right: -20px;} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: #fff;} .navbar-default .navbar-toggle .icon-bar {background-color: #292B36;} .navbar-mobile-link {padding: 10px 15px 10px 15px;} .navbar-mobile-link.navbar-mobile-link-bottom {text-align: center; margin: 20px 15px 0 23px;} .navbar-mobile-link .custom-round-btn {display:inline-block; width:48%; text-align:center; border-radius: 47.5px; padding: 12px 15px;} .navbar-mobile-link.navbar-mobile-top .divider {border-bottom: solid 1px #eee; padding:30px 0;} .navbar-mobile-link.navbar-mobile-top .title {font-size: 1.4em; font-weight: 700; letter-spacing: normal;} .navbar-mobile-link.navbar-mobile-top .title-link {padding-left: 0; padding-right: 0; font-size: 16px; color: #000000;} .navbar-mobile-link.navbar-mobile-top .title-sub span {font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: -1.4px; color: #8b8b8b;} .navbar-mobile-link.navbar-mobile-top .title-sub i {padding-left:6px; color: #8b8b8b; transform: translateY(-1px);} .navbar-mobile-link.navbar-mobile-top .custom-round-btn.block {display:block !important; width:100% !important;} @media (max-width: 1200px) { .navbar-brand {margin-right: 60px;} } @media (max-width: 992px) { .navbar-brand {margin-right: 40px;} .navbar-default .navbar-nav > li.toggle {padding-right: 30px;} .nav.navbar-nav .nav-link.sns-link a {padding-left: 0 !important;} } @media (max-width: 767px) { .navbar-header {margin-left: 0 !important; margin-right: 0 !important;} .navbar-brand {height: 64px;} .navbar-brand img.default-logo {width: 70px;} .navbar-default {background-color:#fff; min-height: 50px;} .navbar-default .nav > li > a {font-size: 14px;} .navbar-default .navbar-nav > li.toggle {padding-right: 0; height: auto;} .navbar-default .navbar-nav > li.toggle > a {height:40px !important; font-size: 16px !important; padding-bottom: 32px;} .nav.navbar-nav {padding-left: 15px; padding-right: 15px; padding-bottom: 20px;} .navbar-nav {margin: 7.5px 0;} .navbar-default .navbar-nav > li.nav-link {display:none;} .navbar-default .navbar-nav > li.nav-link.sns-link {display:block; float: none !important; margin-left: -10px;} .navbar-default .navbar-nav > li.nav-link.nav-menu {display: flex; height: auto; margin-top: 30px; border-top: 1px solid #eee; padding-top: 30px; float: none !important;} .navbar-default .navbar-nav > li.nav-link.nav-menu a {padding: 0 !important; margin-right: 20px;} .navbar-default .navbar-nav > li.nav-link.nav-menu a:last-child {margin-right: 0;} } /*************************************************************************************** * * index-v2 * ***************************************************************************************/ .contents-main {overflow: hidden; padding-bottom: 100px;} .contents-main.index-v2 .main-banner-wrap {max-width: 1250px; padding-left: 20px; padding-right: 20px; margin-top: 0; margin-left: auto; margin-right: auto;} .contents-main.index-v2 .main-banner .slick-list {border-radius: 40px; overflow: hidden;} .contents-main.index-v2 .main-banner .slick-slide {height: auto;} .contents-main.index-v2 .main-banner .main-banner-item {position:relative;} .contents-main.index-v2 .main-banner .container {padding:20px;} .contents-main.index-v2 .main-banner .main-banner-item img {max-width: 100%;} .contents-main.index-v2 .main-banner .main-banner-item img.bb {display:block;} .contents-main.index-v2 .main-banner .main-banner-item img.bm {display:none;} .contents-main.index-v2 .slick-prev, .contents-main.index-v2 .slick-next {position:absolute; z-index:8001; width: 60px; height: 60px; padding: 0; top: 50%; margin-top: -30px; color: transparent; background-color: #fff; border:0; border-radius: 100%; font-family: "Font Awesome 5 Free"; box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.20);} .contents-main.index-v2 .slick-prev {left: -30px;} .contents-main.index-v2 .slick-next {right: -30px;} .contents-main.index-v2 .slick-prev:before, .contents-main.index-v2 .slick-next:before {content: "\f053"; font-size: 20px; color:#494949; box-sizing: border-box; font-weight: 600; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;} .contents-main.index-v2 .slick-next:before {content: "\f054";} .contents-main.index-v2 .container h1 {font-size: 32px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.47; letter-spacing: -1.5px; color: #000; margin-bottom: 0; word-break: keep-all;} .contents-main.index-v2 .main-title {padding-bottom: 30px; display: flex; align-items: center; justify-content: space-between;} .contents-main.index-v2 .main-contest .highest-contest-more-flat {font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: -0.7px; color: #333;} .contents-main.index-v2 .main-contest .highest-contest-more {width: 160px; height: 54px; border-radius: 26px; border: solid 1px #282828; background-color: #fff; font-size: 18px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 48px; letter-spacing: -0.9px; color: #282727; display: inline-block;} .contents-main.index-v2 .highest-contest-item-empty h1 {color: #C8C7C7; text-align:center; padding:100px;} .contents-main.index-v2 .highest-contest-list {margin: 0;} .contents-main.index-v2 .highest-contest-list .thumb{ border-radius: 19px 19px 0 0; max-width:391px;max-height: 180px;} .contents-main.index-v2 .highest-contest-items {margin: -20px -10px;} .contents-main.index-v2 .highest-contest-items .slick-slide {padding: 20px 10px; height: auto;} .contents-main.index-v2 .highest-contest-item-warp {position: relative; border-radius: 30px; overflow: hidden; box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.1); transition: all .3s ease-out;} .contents-main.index-v2 .highest-contest-item-warp:after {content: ''; opacity: 0; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 30px; border: 2px solid #5932FC; transition: all .3s ease-out;} .contents-main.index-v2 .highest-contest-item-warp:hover {transform: translateY(-10px);} .contents-main.index-v2 .highest-contest-item-warp:hover:after {opacity: 1;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-head img {display: block; width: 100%;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info {padding: 20px 20px 30px; margin-bottom: 0;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt {letter-spacing: -0.075rem;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 {margin-bottom: 0; display: flex; line-height: 1.4; align-items: center; flex-wrap: wrap;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 strong {font-size: 22px; font-weight: 600; max-width: calc(100% - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 em {width: 52px; height: 22px; margin-top: 4px; margin-left: 8px; font-style: normal; flex-shrink: 0; color: #fff; font-size: 12px; font-weight: 400; border-radius: 20px; display: flex; align-items: center; justify-content: center;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 em.ppl {background: #5932FC;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 em.today-deadline {background: #5932FC; width: 70px;} /* 제목이 길고 오늘마감인 경우만 특별 처리 */ .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt {position: relative;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5.long-title-today-deadline {flex-wrap: wrap; align-items: flex-start;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5.long-title-today-deadline strong {max-width: calc(100% - 80px);} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5.long-title-today-deadline em.today-deadline {position: absolute; right: 0; top: 4px; margin-top: 0; margin-left: 0;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5.long-title-today-deadline span {margin-top: 16px; width: 100%; order: 3;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 em.pnk {background: #EA2088;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 em.grn {background: #369C48;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 em.gry {background: #F1F1F1; color: #888;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 span {margin-top: 16px; color: #FF0D0D; font-weight: 400; width: 100%;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd {letter-spacing: -0.075rem; margin-top: 16px; padding-top: 16px; border-top: 1px solid #dedede;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul {height: 76px; list-style: none; padding-left: 0; margin-bottom: 0;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li {margin-bottom: 8px; height: 20px; display: flex; align-items: center;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li:last-child {margin-bottom: 0;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li img {display: block; width: 20px; margin-right: 10px; flex-shrink: 0;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li strong {flex-shrink: 0; width: 60px;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li span {flex-grow: 1; color: #1A5EF1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .contents-main.index-v2 .main-join-list .ilist-warp {letter-spacing: -0.075rem;} .contents-main.index-v2 .main-join-list .list-header-warp {border-top: 2px solid #000; border-bottom: 1px solid #dcdcdc; display: flex;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col {height: 80px; font-size: 22px; color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(1) {flex-grow: 1;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(2), .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(3) {width: 180px; flex-shrink: 0;} .contents-main.index-v2 .main-join-list .list-body-container {height: 80px;} .contents-main.index-v2 .main-join-list .list-body-warp {margin: 0; padding: 0;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item {height: 80px; border-bottom: 1px solid #dcdcdc; display: flex; align-items: center; justify-content: center;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item.empty {font-size: 18px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl {width: 100%; height: 80px; margin-bottom: 0; font-size: 18px; display: flex; align-items: center;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl dt {font-weight: 400; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl dd {flex-shrink: 0; width: 180px; text-align: center;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl dd img {width: 20px; margin-right: 4px;} .contents-main.index-v2 section.main-counter-n2 {position: relative; padding: 5px 0 70px 0;} .contents-main.index-v2 section.main-counter-n2:before {content: ''; display: block; background: #F4F5F8; position: absolute; left: -100%; right: -100%; top: 0; bottom: 0;} .contents-main.index-v2 section.main-counter-n2 .container {position: relative;} .contents-main.index-v2 section.main-counter-n2 .item-counter-list {margin: 0 -10px; display: flex; list-style: none; padding-left: 0;} .contents-main.index-v2 section.main-counter-n2 .item-counter-list li {padding: 0 10px; width: 25%;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item {height: 100%; padding: 30px; background: #fff; border-radius: 30px; display: flex; flex-direction: column;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item img {display: block; width: 40px; flex-shrink: 0;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item h5 {flex-grow: 1; font-size: 26px; font-weight: 600; line-height: 1.4; margin-top: 20px; margin-bottom: 0;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p {margin-top: 30px; margin-bottom: 0; text-align: right; flex-shrink: 0; font-size: 16px; color: #a9a9a9;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p span {font-size: 28px; color: #5932FC; font-weight: 800; margin-right: 4px;} .contents-main.index-v2 section.main-info-n2 .item-info-list {margin: 0 -10px; display: flex; list-style: none; padding-left: 0;} .contents-main.index-v2 section.main-info-n2 .item-info-list li {padding: 0 10px; width: calc(100% / 3);} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl {margin-bottom: 0;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dt {border-radius: 30px; overflow: hidden;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dt img {display: block; width: 100%;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd {margin-top: 20px; letter-spacing: -0.075rem;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd h5 {font-size: 20px; font-weight: 700; margin-bottom: 0; line-height: 1.4;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd p {font-size: 16px; color: #222; margin-top: 10px; margin-bottom: 0; word-break: auto-phrase;} .contents-main.index-v2 section.main-join .main-join-box {border-radius: 30px; height: 112px; padding: 0 50px; display: flex; align-items: center; background: url('../images/v2/join_bg_pc.png')no-repeat center center / cover;} .contents-main.index-v2 section.main-join .main-join-box h5 {flex-grow: 1; margin-bottom: 0; font-size: 18px; color: #fff; font-weight: 400; letter-spacing: -0.075rem;} .contents-main.index-v2 section.main-join .main-join-box ul {flex-shrink: 0; display: flex; list-style: none; margin-bottom: 0;} .contents-main.index-v2 section.main-join .main-join-box ul li {margin-right: 10px;} .contents-main.index-v2 section.main-join .main-join-box ul li:last-child {margin-right: 0;} .contents-main.index-v2 section.main-join .main-join-box ul li button {width: 184px; height: 52px; border: 1px solid #fff; background: none; color: #fff; font-size: 18px; border-radius: 40px; display: flex; align-items: center; justify-content: center;} @media (max-width: 1199px) { .contents-main.index-v2 .container h1 {font-size: 30px;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 strong {font-size: 20px;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col {height: 70px; font-size: 18px;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(2), .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(3) {width: 160px;} .contents-main.index-v2 .main-join-list .list-body-container {height: 70px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item {height: 70px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item.empty {font-size: 16px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl {height: 70px; font-size: 16px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl dd {width: 160px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item {padding: 20px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item h5 {font-size: 22px; margin-top: 15px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p {margin-top: 20px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p span {font-size: 24px;} .contents-main.index-v2 section.main-join .main-join-box {padding: 0 30px;} .contents-main.index-v2 section.main-join .main-join-box ul li button {width: 160px; height: 48px; font-size: 16px;} } @media (max-width: 991px) { .contents-main.index-v2 .container h1 {font-size: 28px;} .contents-main.index-v2 .main-banner .slick-list {border-radius: 20px;} .contents-main.index-v2 .slick-prev, .contents-main.index-v2 .slick-next {width: 40px; height: 40px; margin-top: -20px;} .contents-main.index-v2 .slick-prev {left: -20px;} .contents-main.index-v2 .slick-next {right: -20px;} .contents-main.index-v2 .slick-prev:before, .contents-main.index-v2 .slick-next:before {font-size: 16px; width: 40px; height: 40px;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col {height: 60px; font-size: 16px;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(2), .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(3) {width: 140px;} .contents-main.index-v2 .main-join-list .list-body-container {height: 60px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item {height: 60px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item.empty {font-size: 14px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl {height: 60px; font-size: 14px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl dd {width: 140px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-list {margin: -10px; flex-wrap: wrap;} .contents-main.index-v2 section.main-counter-n2 .item-counter-list li {padding: 10px; width: 50%;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd h5 {font-size: 18px;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd p {font-size: 14px;} .contents-main.index-v2 section.main-join .main-join-box {height: 90px; padding: 0 25px;} .contents-main.index-v2 section.main-join .main-join-box h5 {font-size: 16px;} .contents-main.index-v2 section.main-join .main-join-box ul li {margin-right: 5px;} .contents-main.index-v2 section.main-join .main-join-box ul li button {width: 120px; height: 40px; font-size: 13px;} } @media (max-width: 767px) { .contents-main {padding-bottom: 60px;} .contents-main.index-v2 .main-title {padding-bottom: 20px;} .contents-main.index-v2 .container h1 {font-size: 26px;} .contents-main.index-v2 .main-contest .highest-contest-more-flat {font-size: 13px;} .contents-main.index-v2 .main-contest .highest-contest-more-flat i {font-size: 11px;} .contents-main.index-v2 .highest-contest-items .slick-list {padding-right: 20%; overflow: visible;} .contents-main.index-v2 .highest-contest-items .slick-slide > div:first-child {margin-bottom: 20px;} .contents-main.index-v2 .highest-contest-item-warp {border-radius: 20px; box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12);} .contents-main.index-v2 .highest-contest-item-warp:hover {transform: translateY(0);} .contents-main.index-v2 .highest-contest-item-warp:after {display: none;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-head {display: none;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-head img {height: 100%; object-fit: cover;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 strong {width: 100%; max-width: 100%; order: 2; margin-top: 10px; font-size: 18px;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 em {font-size: 11px; width: 44px; order: 0; margin-left: 0; margin-right: 8px; margin-top: 0;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 span {margin-top: 0; order: 1; width: auto;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd {margin-top: 10px; padding-top: 10px;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul {height: 64px;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li {margin-bottom: 2px; height: 20px; font-size: 12px;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li img {display: none;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dd ul li strong {width: 50px;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col {height: 50px; font-size: 14px;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(2) {display: none;} .contents-main.index-v2 .main-join-list .list-header-warp .list-header-col:nth-child(3) {width: 100px;} .contents-main.index-v2 .main-join-list .list-body-container {height: 50px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item {height: 50px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl {height: 50px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl dd {width: 100px;} .contents-main.index-v2 .main-join-list .list-body-warp .list-body-item dl dd:nth-child(2) {display: none;} .contents-main.index-v2 section.main-counter-n2 {padding: 50px 0;} .contents-main.index-v2 section.main-counter-n2 .item-counter-list {margin: -5px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-list li {padding: 5px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item {padding: 20px; border-radius: 20px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item img {width: 24px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item h5 {font-size: 20px; margin-top: 10px; font-weight: 500;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p {font-size: 14px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p span {font-size: 18px;} .contents-main.index-v2 section.main-info-n2 .item-info-list {margin: 0; display: block;} .contents-main.index-v2 section.main-info-n2 .item-info-list li {padding: 0; width: 100%; margin-bottom: 25px;} .contents-main.index-v2 section.main-info-n2 .item-info-list li:last-child {margin-bottom: 0;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dt {border-radius: 20px;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd {margin-top: 15px;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd h5 {font-size: 18px;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd p {font-size: 14px; margin-top: 5px;} .contents-main.index-v2 section.main-join .main-join-box {height: auto; padding: 25px 20px; border-radius: 20px; display: block; background: url('../images/v2/join_bg_mo.png')no-repeat center center / cover;} .contents-main.index-v2 section.main-join .main-join-box h5 {font-size: 13px; text-align: center; word-break: keep-all;} .contents-main.index-v2 section.main-join .main-join-box ul {margin-top: 15px; justify-content: center; padding-left: 0;} .contents-main.index-v2 section.main-join .main-join-box ul li {margin-right: 5px;} .contents-main.index-v2 section.main-join .main-join-box ul li button {width: 120px; height: 36px; font-size: 12px;} } @media (max-width: 640px) { .contents-main.index-v2 .main-title {padding-bottom: 15px;} .contents-main.index-v2 .container h1 {font-size: 22px;} .contents-main.index-v2 .slick-prev, .contents-main.index-v2 .slick-next {display: none;} .contents-main.index-v2 .main-banner .main-banner-item img {width: 100%;} .contents-main.index-v2 .main-banner .main-banner-item img.bb {display:none;} .contents-main.index-v2 .main-banner .main-banner-item img.bm {display:block;} } @media (max-width: 500px) { .contents-main.index-v2 .container h1 {font-size: 20px;} } @media (max-width: 320px) { .contents-main.index-v2 .container h1 {font-size: 18px;} .contents-main.index-v2 .highest-contest-item-warp .highest-contest-item-info dt h5 strong {font-size: 16px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item {padding: 15px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item h5 {font-size: 16px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p {font-size: 12px;} .contents-main.index-v2 section.main-counter-n2 .item-counter-item p span {font-size: 16px;} .contents-main.index-v2 section.main-info-n2 .item-info-list li dl dd h5 {font-size: 16px;} .contents-main.index-v2 section.main-join .main-join-box ul {display: block;} .contents-main.index-v2 section.main-join .main-join-box ul li {margin-bottom: 8px;} .contents-main.index-v2 section.main-join .main-join-box ul li:last-child {margin-bottom: 0;} .contents-main.index-v2 section.main-join .main-join-box ul li button {margin: 0 auto;} } /*************************************************************************************** * * footer * ***************************************************************************************/ .ft {border-top: 1px solid #F2F2F2; padding: 40px 0;} .ft-top {display: flex; align-items: center;} .ft-top dt {flex-grow: 1;} .ft-top dt img {display: block; width: 112px;} .ft-top dd {flex-shrink: 0; display: flex; align-items: center;} .ft-menu {margin-right: 40px; list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center;} .ft-menu li {margin-right: 30px;} .ft-menu li:last-child {margin-right: 0;} .ft-menu li a {display: block; font-size: 16px; font-weight: 500;} .ft-sns {list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center;} .ft-sns li {margin-right: 10px;} .ft-sns li:last-child {margin-right: 0;} .ft-sns li a {display: block;} .ft-sns li a img {display: block; width: 40px;} .ft-info {margin-top: 40px;} .ft-info ul {list-style: none; padding-left: 0; margin-bottom: 10px; display: flex; justify-content: center;} .ft-info ul:last-child {margin-bottom: 0;} .ft-info ul li {font-size: 14px; margin-right: 20px; color: #999;} .ft-info ul li:last-child {margin-right: 0;} .ft-info ul li strong {margin-right: 4px;} .ft-info ul li span {color: #222;} .ft-info ul li br {display: none;} .ft-privacy {margin-top: 30px; list-style: none; padding-left: 0; margin-bottom: 0; display: flex; justify-content: center;} .ft-privacy li {margin-right: 30px;} .ft-privacy ul:last-child {margin-right: 0;} .ft-privacy li a {display: block;} .ft-privacy li a span {color: #5932FC;} .ft-copy {text-align: center; margin-top: 10px; font-size: 12px; color: #999;} .ft-mo {display: none;} @media (max-width: 992px) { .ft-info ul li {font-size: 13px;} } @media (max-width: 768px) { .ft {padding: 30px 0; display: none;} .ft-top {display: block;} .ft-top dt img {width: 90px;} .ft-top dd {display: block;} .ft-menu {margin-right: 0; margin-top: 20px;} .ft-menu li {margin-right: 20px;} .ft-menu li a {font-size: 13px;} .ft-sns {margin-left: -10px; margin-top: 5px;} .ft-info {margin-top: 30px;} .ft-info ul {display: block; margin-bottom: 10px;} .ft-info ul li {font-size: 13px; margin-right: 0; margin-bottom: 10px; display: flex;} .ft-info ul li:last-child {margin-bottom: 0;} .ft-info ul li strong {width: 100px; flex-shrink: 0;} .ft-info ul li span {flex-grow: 1;} .ft-privacy {margin-top: 30px; flex-wrap: wrap; justify-content: flex-start;} .ft-privacy li {padding: 4px 0;} .ft-privacy li a {display: block;} .ft-privacy li a span {color: #5932FC;} .ft-copy {text-align: left; margin-top: 20px;} .ft-mo {display: block; padding: 30px 0; border-top: 1px solid #F2F2F2;} .ft-mo-top {margin-bottom: 0;} .ft-mo-top dt {font-size: 24px; margin-bottom: 10px; font-weight: 500;} .ft-mo-top dd {font-size: 13px; color: #888; margin-top: 4px;} .ft-mo-top dd br {display: none;} .ft-mo-info {margin-top: 24px;} .ft-mo-info button {font-size: 13px; color: #222; font-weight: 400; letter-spacing: -0.075rem; padding: 0; border: none; background: none; display: inline-flex; align-items: center;} .ft-mo-info button:after {content: ''; display: block; width: 6px; height: 6px; border-right: 2px solid #222; border-bottom: 2px solid #222; margin-left: 10px; margin-top: -2px; flex-shrink: 0; transform:rotate(45deg);} .ft-mo-info.active button:after {margin-top: 0; transform:rotate(225deg);} .ft-mo-info ul {display: none; margin-top: 8px; margin-bottom: 0; padding-left: 0; list-style: none;} .ft-mo-info.active ul {display: block;} .ft-mo-info ul li {font-size: 12px; color: #888;} .ft-mo-menu {display: flex; align-items: center; margin-top: 20px; margin-bottom: 0; padding-left: 0; list-style: none;} .ft-mo-menu li {display: flex; align-items: center;} .ft-mo-menu li:after {content: ''; display: block; width: 1px; height: 10px; background: #ddd; margin: 0 10px;} .ft-mo-menu li:last-child:after {display: none;} .ft-mo-menu li a {display: block; font-size: 12px; letter-spacing: -0.075rem;} .ft-mo-menu li a strong {font-weight: 700;} } @media (max-width: 320px) { .ft-mo-top dd br {display: block;} .ft-mo-menu li:after {margin: 0 8px;} .ft-mo-menu li a {font-size: 11px;} } /*************************************************************************************** * * navbar-toggle * ***************************************************************************************/ .navbar-toggle {padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background-color: transparent;} .navbar-toggle-icon {display:inline-block; width:1.5em; height:1.5em; vertical-align:middle; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28var%28--bs-body-color-rgb%29, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:center; background-size:100%} .navbar-toggle .navbar-toggle-icon {background-image:none; width:24px; height:24px; position:relative; display:inline-block; transition:all .5s ease; vertical-align:middle; font-size:0; cursor:pointer} .navbar-toggle .navbar-toggle-icon>i {width:100%; height:2px; display:block; position:absolute; top:50%; margin-top:-1px; background-color:currentColor; transition:background-color 0s .3s} .navbar-toggle .navbar-toggle-icon>i::after,.navbar-toggle .navbar-toggle-icon>i::before {content:""; width:100%; height:2px; position:absolute; display:block; left:0; background-color:currentColor} .navbar-toggle .navbar-toggle-icon>i::before {top:8px; transition:top .3s .3s,transform .3s 0s,background-color .3s 0s} .navbar-toggle .navbar-toggle-icon>i::after {bottom:8px; transition:bottom .3s .3s,transform .3s 0s,background-color .3s 0s} .navbar-toggle[aria-expanded=true] .navbar-toggle-icon>i {background-color:transparent; transition:background-color 0s .2s} .navbar-toggle[aria-expanded=true] .navbar-toggle-icon>i:before {top:0; transform:rotate(45deg); transition:top .2s 0s,transform .3s .2s,background-color .2s 0s} .navbar-toggle[aria-expanded=true] .navbar-toggle-icon>i::after {bottom:0; transition:bottom .2s 0s,transform .2s .2s,background-color .2s 0s; transform:rotate(-45deg)} /*************************************************************************************** * * * * / CSS-V2 * * * ***************************************************************************************/ .modal-backdrop {z-index: 10000;} .modal {z-index: 10010; padding-right: 0 !important;} .modal-open .modal {overflow-y: hidden;} .modal-flex {display: flex; width: 100%; height: 100%; padding: 30px 20px; align-items: center; justify-content: center;} .modal-box {width: 100%; max-width: 600px; height: 100%; max-height: 640px; border-radius: 40px; overflow: hidden; padding-top: 64px; position: relative;} .modal-content {height: 100%; overflow-y: auto; margin: 0 !important; border-radius: 0 !important;} .modal-header {position: absolute; top: 0; left: 0; right: 0; padding: 0 30px; height: 64px; background: #424242; display: flex; align-items: center; justify-content: space-between;} .modal-header .close {color: #fff; text-shadow: none; opacity: 1; font-size: 30px;} .modal-header:before, .modal-header:after {display: none;} .modal-title {color: #fff; font-size: 20px; font-weight: 400;} .btn.btn-line {background: none; width: 100px; height: 44px; border-color: #aaa; font-size: 16px; color: #222; border-radius: 4px;} @media (max-width: 768px) { .modal-flex {padding: 0;} .modal-box {border-radius: 0; max-height: 100%; padding-top: 50px;} .modal-header {height: 50px; padding: 0 20px;} .modal-title {font-size: 16px;} .modal-header .close {font-size: 20px;} } /* 회원 */ label {cursor: pointer;} input[type="checkbox"] {width: 26px; height: 26px; cursor: pointer; border: 1px solid #ddd; position: relative; margin: 0; border-radius: 4px; appearance: none;} input[type="checkbox"]:after {content: ''; display: block; width: 7px; height: 12px; border-bottom: 2px solid #ddd; border-right: 2px solid #ddd; position: absolute; left: 50%; top: 50%; margin-left: -4px; margin-top: -7px; transform:rotate(45deg);} input[type="checkbox"]:checked, input[type="checkbox"]:checked:after {border-color: #5932FC;} input[type="checkbox"] + label {margin-bottom: 0;} input[type="checkbox"]:disabled {border-color: #F0F0F0; background: #F0F0F0;} input[type="checkbox"]:disabled:after {display: none;} input[type="radio"] {width: 22px; height: 22px; cursor: pointer; border: 1px solid #ddd; position: relative; margin: 0; border-radius: 20px; appearance: none;} input[type="radio"]:after {content: ''; display: block; background: #ddd; position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; border-radius: 20px;} input[type="radio"]:checked {border-color: #5932FC;} input[type="radio"]:checked:after {background: #5932fc;} input[type="radio"] + label {margin-bottom: 0; margin-left: 6px;} @media (max-width: 768px) { input[type="checkbox"] {width: 20px; height: 20px;} input[type="radio"] {width: 20px; height: 20px;} } .lgn-title {margin-bottom: 30px; text-align: center; letter-spacing: -0.05rem;} .lgn-title img {height: 84px; display: block; margin: 0 auto 40px;} .lgn-title h2 {font-size: 32px; margin-bottom: 0;} .lgn-title p {margin-top: 10px; font-size: 16px; margin-bottom: 0;} .lgn-title p span {color: #5932FC;} .lgn-box {border: 1px solid #EAEAEA; border-radius: 20px; padding: 20px;} .form-group {margin-bottom: 30px;} .form-group:last-child {margin-bottom: 0;} .form-group label {font-size: 16px; color: #000; display: block; margin-bottom: 10px;} .form-group p {margin-bottom: 0;} .form-group p small {margin-top: 0; margin-bottom: 0;} .form-group p small ul {margin-top: 8px;} .form-group p small ul li {font-size: 13px; color: #FF1717;} .form-control {height: 58px; border: 1px solid #ddd; border-radius: 8px !important; padding: 0 20px; font-size: 16px !important; -webkit-box-shadow: none !important; box-shadow: none !important;} .form-control:read-only, .form-control:read-only:focus {background: #eee; border-color: #eee; color: #000;} .has-error .form-control {border-color: #FF1717;} .has-error .form-control:focus {border-color: #5932FC;} .lgn-submit {margin-top: 40px;} .lgn-submit button {width: 100%; height: 64px; background: #5932FC; color: #fff; font-size: 20px; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .lgn-submit button:active {background: #4A2DC4;} .lgn-submit button:disabled {background: #aaa;} .lgn-find {margin-top: 20px; text-align: right;} .lgn-find a {font-size: 15px; color: #888;} .lgn-sns {margin-top: 50px; margin-bottom: 0;} .lgn-sns dt {display: flex; justify-content: center; position: relative;} .lgn-sns dt:before {content: ''; display: block; background: #EAEAEA; height: 1px; position: absolute; left: 0; right: 0; top: 50%;} .lgn-sns dt span {display: block; padding: 0 30px; background: #fff; font-size: 18px; position: relative;} .lgn-sns dd {margin-top: 30px;} .lgn-sns dd ul {display: flex; justify-content: center; margin-bottom: 0; padding-left: 0; list-style: none;} .lgn-sns dd ul li {margin: 0 15px;} .lgn-sns dd ul li a {display: block; text-indent: -9999px; width: 72px; height: 72px; border-radius: 50%;} .lgn-sns dd ul li a.google {background: url('../images/v2/login_google.png')no-repeat center center / cover;} .lgn-sns dd ul li a.apple {background: url('../images/v2/login_apple.png')no-repeat center center / cover;} .lgn-join {margin-top: 20px; text-align: center; font-size: 14px;} .lgn-join span {color: #424242;} .lgn-join a {color: #1A5EF1; margin-left: 5px;} .lgn-confirm {display: flex; margin-bottom: 0;} .lgn-confirm dt {position: relative; flex-grow: 1;} .lgn-confirm dt span {position: absolute; right: 20px; top: 0; height: 58px; font-size: 18px; font-weight: 400; display: flex; align-items: center;} .lgn-confirm dd {width: 124px; flex-shrink: 0; margin-left: 4px;} .lgn-confirm dd button {width: 100%; height: 58px; color: #fff; border: none; border-radius: 8px; font-size: 18px; display: flex; align-items: center; justify-content: center;} .lgn-confirm dd button {background: #5932FC;} .lgn-confirm dd button:disabled {background: #aaa;} .lgn-agree {margin-top: 40px; margin-bottom: 0;} .lgn-agree dt {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd; display: flex; align-items: center;} .lgn-agree dt label {margin-left: 10px; font-size: 20px; font-weight: 700;} .lgn-agree dd {margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;} .lgn-agree dd:last-child {margin-bottom: 0;} .lgn-agree dd span {display: flex; align-items: center;} .lgn-agree dd span label {margin-left: 10px; font-size: 16px;} .lgn-agree dd a {width: 84px; height: 32px; margin-left: 10px; flex-shrink: 0; border: 1px solid #e6e6e6; font-size: 13px; border-radius: 30px; display: flex; align-items: center; justify-content: center;} .lgn-pw {position: relative;} .lgn-pw button {display: block; width: 58px; height: 58px; position: absolute; right: 0; top: 0; text-indent: -9999px; border: none; background: url('../images/v2/login_password_on.png')no-repeat center center / 24px auto;} .lgn-pw button.active {background: url('../images/v2/login_password.png')no-repeat center center / 24px auto;} @media (max-width: 580px) { .lgn-title {padding-bottom: 40px;} .lgn-title img {margin-bottom: 10px;} .lgn-title h2 {font-size: 26px;} .lgn-title p {font-size: 14px;} .lgn-box {padding: 0; border: none;} .form-group label {font-size: 14px;} .form-group p small ul {margin-top: 5px;} .form-group p small ul li {font-size: 11px;} .form-control {height: 42px; padding: 0 15px; font-size: 14px !important; border-radius: 4px !important;} .lgn-submit {margin-top: 30px;} .lgn-submit button {height: 48px; font-size: 16px;} .lgn-find {margin-top: 15px;} .lgn-find a {font-size: 13px;} .lgn-sns dt span {font-size: 16px; padding: 0 15px;} .lgn-sns dd {margin-top: 20px;} .lgn-sns dd ul li {margin: 0 10px;} .lgn-sns dd ul li a {width: 64px; height: 64px;} .lgn-join {margin-top: 40px; font-size: 13px; display: flex; justify-content: space-between;} .lgn-confirm dt span {right: 15px; height: 42px; font-size: 14px;} .lgn-confirm dd {width: 80px;} .lgn-confirm dd button {height: 42px; border-radius: 4px; font-size: 14px;} .lgn-agree {margin-top: 30px;} .lgn-agree dt {padding-bottom: 10px; margin-bottom: 10px;} .lgn-agree dt label {font-size: 16px;} .lgn-agree dd {margin-bottom: 5px;} .lgn-agree dd span label {font-size: 14px;} .lgn-agree dd a {width: 60px; height: 30px; font-size: 12px;} .lgn-pw button {width: 42px; height: 42px;} } /* 챌린지 */ .pb0 {padding-bottom: 0 !important;} .clg-top {margin-top: 20px; display: flex; align-items: center; justify-content: space-between;} .clg-tab {border-bottom: 1px solid #ddd; margin-bottom: 0; padding-left: 0; list-style: none; display: flex;} .clg-tab li button {height: 60px; padding: 0 40px; font-size: 18px; color: #888; position: relative; border-radius: 0; border: none; background: none; display: flex; align-items: center; justify-content: center;} .clg-tab li button.active {color: #5932FC; font-weight: 700;} .clg-tab li button.active:after {content: ''; display: block; height: 3px; background: #1954DB; position: absolute; left: 0; right: 0; bottom: -1px;} .clg-sort {position: relative;} .clg-sort button {height: 42px; background: none; border: none; width: 160px; padding: 0 15px; display: flex; align-items: center;} .clg-sort > button {border: 1px solid #ddd; color: #222; border-radius: 4px; position: relative;} .clg-sort > button:after {content: ''; display: block; width: 6px; height: 6px; border-right: solid 2px #222; border-bottom: solid 2px #222; position: absolute; right: 15px; top: 50%; margin-top: -3px; transform:rotate(45deg);} .clg-sort.active > button:after {transform:rotate(225deg);} .clg-sort ul {overflow: hidden; border: solid 1px #5932FC; border-top: none; border-radius: 0 0 4px 4px; display: none; margin-bottom: 0; padding-left: 0; background: #fff; list-style: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1;} .clg-sort ul li button {width: 100%; border-top: 1px solid #EEEAFF; font-size: 14px; color: #888;} .clg-sort.active > button {border-radius: 4px 4px 0 0; border-color: #5932FC; border-bottom: none;} .clg-sort.active ul {display: block;} .clg-sort ul li button:hover, .clg-sort ul li button.active {background: #EEEAFF; color: #5932FC;} .clg-list {margin: -10px; padding-top: 20px; display: flex; flex-wrap: wrap;} .clg-list-item {width: calc(100% / 3); padding: 10px;} @media (max-width: 992px) { .clg-list-item {width: calc(100% / 2);} } @media (max-width: 768px) { .clg-top {flex-direction: column; align-items: flex-end;} .clg-tab {width: 100%;} .clg-tab li {width: calc(100% / 4);} .clg-tab li button {height: 47px; padding: 0; width: 100%; font-size: 16px;} .clg-sort {margin-top: 20px;} .clg-sort button {width: 100px; height: 40px; font-size: 13px; padding: 0 10px;} .clg-list {margin: 0; display: block;} .clg-list-item {width: 100%; padding: 0; margin-bottom: 20px;} .clg-list-item:last-child {margin-bottom: 0;} .clg-list-item .highest-contest-item-warp {border-radius: 10px !important; display: flex;} .clg-list-item .highest-contest-item-head {display: block !important; width: 40%; flex-shrink: 0; padding: 20px; padding-right: 0;} .clg-list-item .highest-contest-item-head img {border-radius: 4px;} .clg-list-item .highest-contest-item-info {width: 60%;} } /* 공지사항 */ .sub-title {margin-bottom: 0; font-size: 36px;} form {margin-bottom: 0;} .brd-list {width: 100%; table-layout: fixed; margin-top: 30px; border-top: 2px solid #222;} .brd-list th, .brd-list td {padding: 20px; text-align: center; border-bottom: 1px solid #ddd;} .brd-list th {font-size: 18px; color: #666; font-weight: 400;} .brd-list td {font-size: 16px; color: #aaa;} .brd-list td.brd-list-title {text-align: left;} .brd-list td.brd-list-title a {display: inline-block; max-width: 95%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .brd-list td.brd-list-notice img {width: 24px;} .brd-view-top {margin-top: 30px; padding: 30px 0; border-top: 2px solid #222; display: flex; align-items: center;} .brd-view-notice {flex-shrink: 0; padding: 0 30px; font-size: 16px; color: #aaa;} .brd-view-notice img {width: 24px;} .brd-view-title {flex-grow: 1; margin-bottom: 0; font-size: 30px; font-weight: 400; line-height: 1.4;} .brd-view-date {flex-shrink: 0; padding: 0 30px; font-size: 16px; color: #aaa;} .brd-view-content {padding: 40px 50px 60px; font-size: 16px; border-top: 1px solid #ddd;} .brd-view-content * {margin-bottom: 0;} .brd-view-content img {max-width: 100%;} .brd-view-btn {padding-top: 40px; border-top: 1px solid #eaeaea;} .brd-view-btn a {width: 124px; height: 58px; font-size: 16px; color: #222; border: 1px solid #aaa; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .paging {margin-top: 60px; display: flex; justify-content: center; align-items: center;} .paging a {height: 40px; width: 40px; font-size: 15px; color: #888; line-height: 0.8; font-weight: 500; border: 1px solid #dadada; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .paging a.prev, .paging a.next {text-indent: -9999px; position: relative;} .paging a.prev:after, .paging a.next:after {content: ''; display: block; width: 8px; height: 8px; border-top: 1px solid #aaa; position: absolute; left: 50%; top: 50%; margin-top: -4px;} .paging a.prev:after {border-left: 1px solid #aaa; transform:rotate(-45deg); margin-left: -2px;} .paging a.next:after {border-right: 1px solid #aaa; transform:rotate(45deg); margin-left: -6px;} .paging ul {margin: 0 2px; margin-bottom: 0; padding-left: 0; list-style: none; display: flex; justify-content: center; align-items: center;} .paging ul li {margin: 0 2px;} .paging ul li a.active {color: #5932FC; border-color: #5932FC;} @media (max-width: 1200px) { .sub-title {font-size: 32px;} .brd-list {margin-top: 20px;} .brd-list th, .brd-list td {padding: 15px;} .brd-list th {font-size: 16px;} .paging {margin-top: 40px;} .brd-view-top {margin-top: 20px; padding: 20px 0;} .brd-view-notice {padding: 0 20px;} .brd-view-title {font-size: 26px;} .brd-view-date {padding: 0 20px;} .brd-view-content {padding: 30px 30px 40px;} } @media (max-width: 992px) { .sub-title {font-size: 28px;} .brd-list {margin-top: 15px;} .brd-list th {font-size: 14px;} .brd-list td {font-size: 14px;} .brd-view-notice {padding: 0 15px; font-size: 14px;} .brd-view-title {font-size: 20px;} .brd-view-date {padding: 0 15px; font-size: 14px;} .brd-view-content {padding: 20px 20px 40px; font-size: 14px;} .brd-view-btn {padding-top: 30px;} .brd-view-btn a {width: 100px; height: 50px; font-size: 14px;} } @media (max-width: 768px) { .sub-title {font-size: 24px;} .brd-list thead {display: none;} .brd-list, .brd-list tbody, .brd-list tr, .brd-list td {display: block;} .brd-list tr {border-bottom: 1px solid #ddd; padding: 10px 0;} .brd-list td {border-bottom: none; padding: 0; text-align: left;} .brd-list td.brd-list-notice {display: none;} .brd-list td.brd-list-notice.notice {display: block;} .brd-list td.brd-list-title {margin-top: 5px;} .brd-list td.brd-list-date {font-size: 13px; margin-top: 5px;} .paging {margin-top: 30px;} .paging a {height: 34px; width: 34px; font-size: 13px;} .brd-view-top {flex-wrap: wrap;} .brd-view-notice {padding: 0; font-size: 13px; width: 100%; margin-bottom: 5px;} .brd-view-notice:before {content: 'No. ';} .brd-view-notice.notice {width: 40px; margin-bottom: 0;} .brd-view-notice.notice:before {display: none;} .brd-view-notice.notice + .brd-view-title {width: calc(100% - 40px);} .brd-view-date {padding: 0; font-size: 13px; width: 100%; margin-top: 5px;} .brd-view-content {padding: 20px 0 40px; font-size: 13px;} .brd-view-btn {padding-top: 20px;} .brd-view-btn a {width: 80px; height: 40px; font-size: 13px; border-radius: 4px;} } /* 문의하기 */ .contact-title {padding-bottom: 30px; border-bottom: 2px solid #222; display: flex; align-items: flex-end; justify-content: space-between;} .contact-title p {font-size: 14px; color: #666; margin-bottom: 0;} .contact-title p span {color: #ED156F;} .contact-group {margin-top: 30px;} .contact-group > label {color: #666; font-size: 16px;} .contact-group > label span {color: #ED156F;} .contact-group input[type="text"] {margin-top: 5px; display: block; width: 100%; height: 48px; padding: 0 15px; color: #222; font-size: 16px; border: 1px solid #ddd; border-radius: 4px;} .contact-group input[type="text"]::placeholder {color: #A9A9A9;} .contact-group input[type="text"].error {border-color: #FF1717;} .contact-group input[type="password"] {margin-top: 5px; display: block; width: 100%; height: 48px; padding: 0 15px; color: #222; font-size: 16px; border: 1px solid #ddd; border-radius: 4px;} .contact-group input[type="password"]::placeholder {color: #A9A9A9;} .contact-group input[type="password"].error {border-color: #FF1717;} .contact-group input[type="text"][readonly] {background: #F0F0F0;} .contact-group textarea {margin-top: 5px; display: block; width: 100%; height: 200px; padding: 15px; color: #222; font-size: 16px; border: 1px solid #ddd; border-radius: 4px; resize: none;} .contact-group input[type="file"] {display: none;} .contact-group input[type="file"] + label {margin-top: 10px; width: 124px; height: 48px; border-radius: 4px; background: #666; color: #fff; display: flex; align-items: center; justify-content: center;} .contact-group select {margin-top: 5px; display: block; width: 100%; height: 48px; padding: 0 15px; color: #222; font-size: 16px; border: 1px solid #ddd; border-radius: 4px;} .contact-mo {display: none !important;} .contact-file {margin-top: 20px; margin-bottom: 0; padding-left: 0; list-style: none;} .contact-file li {margin-bottom: 20px; display: flex; align-items: center;} .contact-file li:last-child {margin-bottom: 0;} .contact-file li a {font-size: 16px; display: block; position: relative; padding-left: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .contact-file li a:before {content: ''; position: absolute; left: 0; top: 4px; display: block; margin-right: 10px; width: 14px; height: 17px; background: url('../images/v2/contact_file.png')no-repeat center center / cover;} .contact-file li button {flex-shrink: 0; margin-left: 10px; margin-top: 4px; width: 24px; height: 24px; background: none; border: none; text-indent: -9999px; position: relative;} .contact-file li button:before, .contact-file li button:after {content: ''; display: block; width: 12px; height: 2px; background: #aaa; position: absolute; left: 50%; top: 50%; margin-left: -6px; margin-top: -1px;} .contact-file li button:before {transform:rotate(-45deg);} .contact-file li button:after {transform:rotate(45deg);} .contact-submit {border-top: 1px solid #EAEAEA; margin-top: 40px; padding-top: 40px;} .contact-submit button {width: 100%; height: 64px; color: #fff; font-size: 20px; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .contact-submit button {background: #5932FC;} .contact-submit button:disabled {background: #aaa;} @media (max-width: 1200px) { .contact-title {padding-bottom: 20px;} } @media (max-width: 768px) { .contact-title {padding-bottom: 10px;} .contact-title p {font-size: 13px;} .contact-group > label {font-size: 14px;} .contact-group input[type="text"] {height: 42px; font-size: 14px;} .contact-group input[type="password"] {height: 42px; font-size: 14px;} .contact-group textarea {height: 120px;} .contact-group input[type="file"] + label {width: 100%; height: 42px; font-size: 14px;} .contact-group select {height: 42px; font-size: 14px;} .contact-pc {display: none !important;} .contact-mo {display: block !important;} .contact-file li {margin-bottom: 10px;} .contact-file li a {font-size: 14px;} .contact-submit {margin-top: 30px; padding-top: 30px;} .contact-submit button {height: 48px; font-size: 16px;} } /* contest view */ .contest-view-wrap {display: flex; margin-top: -60px;} .contest-view-right {width: 320px; margin-left: 60px; order: 1;} .contest-view-side {position: sticky; top: 120px;} .contest-view-summary {border: 1px solid #ddd; border-radius: 12px; padding: 16px; margin-bottom: 0;} .contest-view-summary dt h3 {font-size: 22px; font-weight: 500; margin-bottom: 0; letter-spacing: -0.075rem;} .contest-view-summary dt span {display: none;} .contest-view-summary dt p {margin-top: 10px; margin-bottom: 0; font-size: 14px; color: #1A5EF1; display: flex; align-items: center; font-weight: 400;} .contest-view-summary dt p:before {content: ''; display: block; margin-right: 10px; width: 24px; height: 24px; background: url('../images/v2/contest_view_user.png')no-repeat center center / cover;} .contest-view-summary dt img {display: none; width: 100%; border-radius: 4px;} .contest-view-summary dd {margin-top: 16px; padding-top: 16px; border-top: 1px solid #EAEAEA;} .contest-view-summary dd ul {padding-left: 0; margin-bottom: 0; list-style: none;} .contest-view-summary dd ul li {display: flex; margin-bottom: 12px;} .contest-view-summary dd ul li:last-child {margin-bottom: 0;} .contest-view-summary dd ul li h5 {margin-bottom: 0; font-size: 13px; line-height: 1.4; color: #888; font-weight: 400; width: 65px; flex-shrink: 0;} .contest-view-summary dd ul li p {margin-bottom: 0; font-size: 13px; line-height: 1.4; color: #222; display: flex; flex-wrap: wrap;} .contest-view-summary dd ul li p span {height: 22px; padding: 0 8px; margin-right: 4px; margin-bottom: 4px; border-radius: 4px; font-size: 12px; display: flex; align-items: center; justify-content: center;} .contest-view-info {border: 1px solid #ddd; border-radius: 12px; padding: 16px; margin-bottom: 0; margin-top: 10px;} .contest-view-info dt {display: flex; align-items: center; font-weight: 400;} .contest-view-info dt img {display: block; width: 20px; margin-right: 8px;} .contest-view-info dt h5 {margin-bottom: 0; font-size: 14px; font-weight: 400; margin-right: 4px;} .contest-view-info dt span {font-size: 12px; color: #888;} .contest-view-info dd {display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EAEAEA;} .contest-view-info dd h6 {font-size: 15px; color: #222; margin-bottom: 0; font-weight: 500; flex-shrink: 0;} .contest-view-info dd h6 span {font-size: 13px; color: #A9A9A9; font-weight: 400;} .contest-view-info dd p {font-size: 12px; color: #888; margin-bottom: 0; display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-end;} .contest-view-info dd p span {height: 26px; margin: 2px; background: #F0F0F0; padding: 0 10px; border-radius: 20px; color: #666; display: flex; align-items: center; justify-content: center;} .contest-view-info dd p.contest-view-prize {flex-grow: 1; flex-direction: row; align-items: center; justify-content: flex-end;} .contest-view-apply {margin-bottom: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid #EAEAEA; display: flex;} .contest-view-apply dt {width: 54px; margin-right: 6px; flex-shrink: 0;} .contest-view-apply dd {flex-grow: 1;} .contest-view-apply button {width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 8px;} .contest-view-apply dt button {border: 1px solid #aaa; text-indent: -9999px; background: #fff url('../images/v2/contest_view_share.png')no-repeat center center / 22px auto;} .contest-view-apply dd button {border: none; background: #1A5EF1; color: #fff; font-size: 16px;} .contest-view-warn {margin-top: 20px; font-size: 13px; color: #FF1717; display: flex; align-items: center;} .contest-view-warn:before {content: '!'; width: 14px; height: 14px; font-size: 12px; font-weight: 700; padding-left: 1px; margin-right: 8px; border: 1px solid #FF1717; text-align: center; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;} .contest-view-status {margin-top: 30px; margin-bottom: 0; width: 100%; height: 54px; font-size: 18px; font-weight: 400; display: flex; align-items: center; justify-content: center; border-radius: 8px;} .contest-view-status.pnk {color: #EA2088; border: 1px solid #EA2088;} .contest-view-status.gry {background: #F0F0F0; color: #888;} .contest-view-content {width: calc(100% - 380px);} .contest-view-thumb img {display: block; width: 100%;} .contest-view-title {margin-top: 40px; padding-bottom: 30px; border-bottom: 2px solid #222; display: flex; align-items: flex-start;} .contest-view-title h3 {font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 0; flex-grow: 1; letter-spacing: -0.075rem;} .contest-view-title span {height: 36px; margin-top: 6px; margin-left: 20px; padding: 0 16px; font-size: 16px; background: #5932fc; color: #fff; flex-shrink: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center;} .contest-view-group {padding: 60px 0; margin-bottom: 0; border-bottom: 1px solid #E0E0E0;} .contest-view-group > dt {font-size: 28px; color: #222; letter-spacing: -0.075rem; font-weight: 600;} .contest-view-group > dd {margin-top: 20px;} .contest-view-group:last-child {padding-bottom: 0; border-bottom: none;} .contest-view-detail {font-size: 16px; letter-spacing: -0.05rem;} .contest-view-detail img {display: block; max-width: 100%;} .contest-view-how {background: #F4F5F8; border-radius: 20px; padding: 60px 40px 60px 60px; list-style-type: none; margin-bottom: 0;} .contest-view-how li {margin-bottom: 60px; height: 72px; border-radius: 20px; background: #fff; box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1); display: flex; align-items: center;} .contest-view-how li:last-child {margin-bottom: 0;} .contest-view-how li h5 {flex-shrink: 0; margin-bottom: 0; color: #fff; width: 72px; height: 72px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;} .contest-view-how li h5 span {position: relative; text-align: center;} .contest-view-how li h5 strong {position: relative; display: block; font-size: 40px; line-height: 1; font-weight: 700;} .contest-view-how li h5:before {content: ''; display: block; width: 96px; height: 96px; background: #1A5EF1; position: absolute; left: 50%; top: 50%; border-radius: 26px; transform: translate(-50%, -50%) rotate(45deg);} .contest-view-how li p {margin-bottom: 0; padding-left: 40px; line-height: 1.6; padding-right: 20px; font-size: 17px; font-weight: 500; color: #222;} .contest-view-tag {display: flex; flex-wrap: wrap; margin: -4px; list-style: none; padding-left: 0;} .contest-view-tag li {padding: 4px;} .contest-view-tag li span {height: 64px; padding: 0 24px; font-size: 20px; color: #333; letter-spacing: -0.05rem; border: 1px solid #ddd; border-radius: 50px; display: flex; align-items: center; justify-content: center;} .contest-view-guide {display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 10px; margin-bottom: 0; list-style: none; padding-left: 0;} .contest-view-guide li p {height: 100%; color: #333; margin-bottom: 0; line-height: 1.6; padding: 20px; font-size: 15px; background: #f4f5f8; position: relative; border-radius: 20px; display: flex; align-items: center;} .contest-view-guide li p:before {content: ''; display: block; width: 48px; height: 48px; background: #fff; margin-right: 20px; border-radius: 50%; flex-shrink: 0;} .contest-view-guide li p:after {content: ''; display: block; width: 10px; height: 22px; border-right: 3px solid #0F64CE; border-bottom: 3px solid #0F64CE; transform: rotate(45deg); position: absolute; left: 40px; top: 50%; margin-top: -14px;} .contest-view-note {padding: 30px 24px; border: 1px solid #ddd; border-radius: 20px;} .contest-view-note ul {margin-bottom: 0; list-style: none; padding-left: 0;} .contest-view-note ul li {font-size: 15px; margin-bottom: 12px; position: relative; padding-left: 10px; color: #222;} .contest-view-note ul li:last-child {margin-bottom: 0;} .contest-view-note ul li:before {content: ''; display: block; width: 3px; height: 3px; background: #222; position: absolute; left: 0; top: 10px; border-radius: 50%;} .contest-view-note button {display: none;} @media (max-width: 1200px) { .contest-view-right {width: 280px; margin-left: 30px;} .contest-view-content {width: calc(100% - 310px);} .contest-view-title h3 {font-size: 30px;} .contest-view-title span {margin-top: 0;} .contest-view-tag li span {height: 48px; font-size: 16px;} } @media (max-width: 992px) { .contest-view-right {width: 260px; margin-left: 20px;} .contest-view-summary dt h3 {font-size: 20px;} .contest-view-content {width: calc(100% - 280px);} .contest-view-title h3 {font-size: 24px;} .contest-view-title span {height: 30px; padding: 0 12px; font-size: 14px;} .contest-view-group > dt {font-size: 24px;} .contest-view-detail {font-size: 14px;} .contest-view-how {padding: 40px 20px 40px 40px;} .contest-view-how li h5 {margin-left: -10px;} .contest-view-how li h5 strong {font-size: 30px;} .contest-view-how li h5:before {width: 72px; height: 72px; border-radius: 20px;} .contest-view-how li p {padding-left: 25px; font-size: 15px;} .contest-view-tag li span {height: 40px; font-size: 14px; padding: 0 16px;} .contest-view-guide {display: block; margin: 0;} .contest-view-guide li {width: 100%; padding: 0; margin-bottom: 10px;} .contest-view-guide li:last-child {margin-bottom: 0;} .contest-view-guide li p {height: auto;} } @media (max-width: 768px) { .contest-view-wrap {display: block; margin-top: 0;} .contest-view-right {width: 100%; margin-left: 0; position: relative; z-index: 1;} .contest-view-summary dt h3 {display: flex; font-weight: 700; align-items: flex-start;} .contest-view-summary dt span {flex-shrink: 0; font-weight: 400; height: 24px; margin-left: 10px; padding: 0 10px; font-size: 10px; letter-spacing: 0; background: #5932fc; color: #fff; flex-shrink: 0; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;} .contest-view-summary dt p {margin-top: 8px; font-size: 13px;} .contest-view-summary dt p:before {margin-right: 10px; width: 16px; height: 16px;} .contest-view-summary dt img {display: block; margin-top: 20px;} .contest-view-summary dd {margin-top: 20px; padding-top: 0; border-top: none;} .contest-view-apply {margin-top: 0; padding-top: 0; padding: 10px 20px; border-top: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff; box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05);} dl.contest-view-apply.experience-apply {margin-top: 0 !important; padding-top: 0 !important; padding: 10px 20px !important; border-top: none !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 10 !important; background: #fff !important; box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05) !important;} dl.contest-view-apply.experience-apply.at-bottom {position: absolute !important; bottom: -100px !important; opacity: 0 !important; transition: all 0.3s ease !important;} .contest-view-apply dt {width: 48px;} .contest-view-apply button {height: 48px;} .contest-view-warn {margin-top: 10px;} .contest-view-warn:before {margin-right: 5px;} .contest-view-status {margin-top: 20px; height: 48px; font-size: 16px;} .contest-view-content {width: 100%;} .contest-view-thumb {display: none;} .contest-view-title {display: none;} .contest-view-group {padding: 30px 0 0; margin-top: 30px; border-bottom: none; border-top: 1px solid #F0F0F0;} .contest-view-group > dt {font-size: 18px;} .contest-view-group > dd {margin-top: 16px;} .contest-view-how {padding: 20px 20px 20px 30px;} .contest-view-how li {margin-bottom: 10px; height: 58px; border-radius: 10px;} .contest-view-how li h5 {width: 58px; height: 58px;} .contest-view-how li h5 span {font-size: 10px;} .contest-view-how li h5 strong {font-size: 20px;} .contest-view-how li h5:before {width: 58px; height: 58px; border-radius: 20px;} .contest-view-how li p {padding-left: 15px; font-size: 12px;} .contest-view-tag {margin: -3px;} .contest-view-tag li {padding: 3px;} .contest-view-tag li span {height: 36px; font-size: 12px; padding: 0 16px;} .contest-view-guide li p {min-height: 68px; padding: 15px; font-size: 12px; border-radius: 10px;} .contest-view-guide li p:before {width: 24px; height: 24px; margin-right: 15px;} .contest-view-guide li p:after {width: 6px; height: 12px; border-right-width: 2px; border-bottom-width: 2px; left: 25px; margin-top: -8px;} .contest-view-note {padding: 20px; border-radius: 10px;} .contest-view-note .notice-content {height: 180px; overflow: hidden; position: relative;} .contest-view-note .notice-content:after {content: ''; display: block; background: #FFFFFF; background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%); height: 60px; position: absolute; left: 0; right: 0; bottom: 0;} .contest-view-note ul {height: 180px; overflow: hidden; position: relative;} .contest-view-note ul:after {content: ''; display: block; background: #FFFFFF; background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%); height: 60px; position: absolute; left: 0; right: 0; bottom: 0;} .contest-view-note ul li {font-size: 12px; margin-bottom: 10px;} .contest-view-note ul li:before {top: 8px;} .contest-view-note button {margin-top: 20px; width: 100%; color: #000; height: 36px; font-size: 12px; background: none; border: 1px solid #ddd; border-radius: 30px; display: flex; align-items: center; justify-content: center;} .contest-view-note button:after {content: ''; display: block; width: 6px; height: 6px; margin-left: 10px; border-bottom: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg);} .contest-view-note button.active:after {transform: rotate(225deg); margin-top: 2px;} .contest-view-note.active .notice-content {height: auto;} .contest-view-note.active .notice-content:after {display: none;} .contest-view-note.active ul {height: auto;} .contest-view-note.active ul:after {display: none;} } .pop-exp {display: none; position: fixed; padding: 30px 20px; overflow-y: auto; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; background: rgba(0,0,0,0.6);} .pop-exp > div {display: table; width: 100%; height: 100%;} .pop-exp > div > div {display: table-cell; vertical-align: middle;} .pop-exp-box {width: 100%; max-width: 600px; margin: 0 auto;} .pop-exp-head {height: 64px; padding: 0 30px; background: #424242; border-radius: 40px 40px 0 0; display: flex; align-items: center; justify-content: space-between;} .pop-exp-head h4 {margin-bottom: 0; font-size: 20px; color: #fff; font-weight: 400;} .pop-exp-head button {display: block; width: 32px; height: 32px; margin-right: -10px; border: none; background: none; position: relative; text-indent: -9999px;} .pop-exp-head button:before, .pop-exp-head button:after {content: ''; width: 24px; height: 2px; margin-left: -12px; margin-top: -1px; display: block; background: #fff; position: absolute; left: 50%; top: 50%;} .pop-exp-head button:before {transform: rotate(-45deg);} .pop-exp-head button:after {transform: rotate(45deg);} .pop-exp-body {padding: 30px 30px 40px; background: #fff; border-radius: 0 0 40px 40px;} .pop-exp-group {margin-top: 20px;} .pop-exp-group:first-child {margin-top: 0;} .pop-exp-group > label {font-size: 16px; font-weight: 500; margin-bottom: 8px;} .pop-exp-group input[type="text"] {display: block; width: 100%; height: 40px; font-size: 14px; padding: 0 15px; border-radius: 4px;} .pop-exp-group input[type="text"]:read-only {background: #F0F0F0; border-color: #F0F0F0;} .pop-exp-group textarea {display: block; width: 100%; height: 100px; resize: none; padding: 15px; border-radius: 4px; border: 1px solid #ddd; font-size: 14px;} .pop-exp-group textarea:read-only {background: #F0F0F0; border-color: #F0F0F0;} .pop-exp-chk {padding-left: 0; margin-bottom: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap;} .pop-exp-chk li {margin-right: 16px; display: flex; align-items: center;} .pop-exp-chk li:last-child {margin-right: 0;} .pop-exp-chk li label {margin-left: 6px;} .pop-exp-chk li input[type="checkbox"]:disabled {background: none; border: none;} .pop-exp-chk li input[type="checkbox"]:disabled:after {display: block; border-color: #ddd;} .pop-exp-chk li input[type="checkbox"]:disabled:checked:after {border-color: #222;} .pop-exp-addr {padding-left: 0; margin-bottom: 0; list-style: none;} .pop-exp-addr li {margin-bottom: 8px;} .pop-exp-addr li:last-child {margin-bottom: 0;} .pop-exp-addr li:first-child {display: flex;} .pop-exp-addr li:first-child input[type="text"] {max-width: 160px;} .pop-exp-addr li:first-child button {width: 112px; flex-shrink: 0; margin-left: 4px; height: 40px; font-size: 14px; border: none; background: #666; color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .pop-exp-btn {margin-top: 20px; padding-left: 0; margin-bottom: 0; list-style: none; display: flex; justify-content: center;} .pop-exp-btn li {margin: 0 3px;} .pop-exp-btn li button {width: 100px; height: 44px; font-size: 16px; background: #fff; color: #222; border: 1px solid #aaa; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .pop-exp-btn li button.ppl {background: #5932FC; border-color: #5932FC; color: #fff;} .pop-exp-btn li button.ppl:disabled {background: #aaa; border-color: #aaa; color: #fff;} @media (max-width: 768px) { .pop-exp {padding: 0;} .pop-exp > div {height: 100%; display: block;} .pop-exp > div > div {height: 100%; display: block;} .pop-exp-box {height: 100%; max-width: 100%; position: relative; padding-top: 50px;} .pop-exp-head {height: 50px; padding: 0 20px; border-radius: 0; position: absolute; left: 0; right: 0; top: 0;} .pop-exp-head h4 {font-size: 16px;} .pop-exp-head button {width: 26px; height: 26px; margin-right: -5px;} .pop-exp-body {padding: 24px 20px; border-radius: 0; height: 100%; overflow-y: auto;} .pop-exp-group > label {font-size: 14px;} .pop-exp-group input[type="text"] {height: 36px; padding: 0 10px;} .pop-exp-group textarea {padding: 10px;} .pop-exp-chk {margin: -4px 0;} .pop-exp-chk li {padding: 4px 0;} .pop-exp-addr li {margin-bottom: 4px;} .pop-exp-addr li:first-child input[type="text"] {max-width: 100%;} .pop-exp-addr li:first-child button {height: 36px;} .pop-exp-btn li {margin: 0 3px;} .pop-exp-btn li button {height: 40px;} } /* 참가하기 */ .reg-top span {height: 36px; padding: 0 16px; font-size: 16px; background: #5932fc; color: #fff; flex-shrink: 0; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;} .reg-top h4 {font-size: 40px; font-weight: 500; letter-spacing: -0.075rem; margin-bottom: 0; margin-top: 16px; line-height: 1.4;} .reg-top p {font-size: 18px; color: #222; margin-top: 10px; margin-bottom: 0;} .reg-info {margin-top: 30px; padding-bottom: 30px; margin-bottom: 40px; border-bottom: 3px solid #222; padding-left: 0; list-style: none; display: flex; align-items: center;} .reg-info li {font-size: 18px; color: #888; display: flex; align-items: center;} .reg-info li:after {content: ''; display: block; width: 1px; height: 14px; background: #ddd; margin: 0 30px;} .reg-info li:last-child:after {display: none;} .reg-info li strong {font-size: 20px; color: #222; font-weight: 500; margin-left: 10px;} .reg-group {margin-top: 30px;} .reg-group:first-child {margin-top: 0;} .reg-group > label {font-size: 16px; color: #222; margin-bottom: 10px; font-weight: 500;} .reg-group input[type="text"] {display: block; width: 100%; height: 48px; font-size: 16px; padding: 0 15px; color: #222; border: 1px solid #ddd;} .reg-radio {margin-top: 10px; padding-left: 0; margin-bottom: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap;} .reg-radio li {margin-right: 30px; display: flex; align-items: center;} .reg-radio li:last-child {margin-right: 0;} .reg-warn {background: #FFEAEA; padding: 15px; line-height: 1.4; margin-bottom: 0; margin-top: 20px; font-size: 13px; color: #FF1717; display: flex; border-radius: 4px; word-break: keep-all;} .reg-warn:before {content: '!'; width: 14px; height: 14px; margin-top: 2px; font-size: 12px; font-weight: 700; padding-left: 1px; margin-right: 8px; border: 1px solid #FF1717; text-align: center; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;} .reg-warn strong {font-weight: 700;} .reg-url {display: flex;} .reg-url button {width: 124px; height: 48px; font-size: 18px; color: #fff; flex-shrink: 0; margin-left: 8px; border-radius: 4px; border: none; display: flex; align-items: center; justify-content: center;} .reg-url button {background: #5932FC;} .reg-url button:disabled {background: #aaa;} .reg-video {margin-top: 30px;} .reg-video-none {padding: 160px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;} .reg-video-none img {display: block; width: 86px;} .reg-video-none p {text-align: center; font-size: 16px; margin-top: 20px; color: #aaa;} .reg-video-none a {height: 44px; padding: 0 20px; background: #1A5EF1; color: #fff; font-size: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .reg-content {display: block; width: 100%; height: 180px; padding: 15px; font-size: 16px; color: #222; border: 1px solid #ddd; border-radius: 4px; resize: none;} .reg-btn {margin-top: 40px; padding-top: 40px; border-top: 1px solid #EAEAEA;} .reg-btn button {width: 100%; height: 64px; font-size: 20px; color: #fff; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .reg-btn button {background: #5932FC;} .reg-btn button:disabled {background: #aaa;} @media (max-width: 1200px) { .reg-top h4 {font-size: 34px; margin-top: 10px;} .reg-top p {font-size: 16px;} .reg-info {margin-top: 20px; border-bottom-width: 2px;} .reg-info li {font-size: 16px;} .reg-info li:after {margin: 0 20px;} .reg-info li strong {font-size: 16px;} .reg-group {margin-top: 30px;} } @media (max-width: 992px) { .reg-top span {height: 32px; font-size: 14px;} .reg-top h4 {font-size: 30px;} .reg-info {padding-bottom: 20px; margin-bottom: 30px;} .reg-info li {font-size: 14px;} .reg-info li strong {font-size: 14px;} .reg-url button {width: 100px; font-size: 16px;} .reg-btn button {height: 56px;} } @media (max-width: 768px) { .reg-top span {height: 28px; font-size: 12px; padding: 0 12px;} .reg-top h4 {font-size: 26px; font-weight: 700;} .reg-top p {margin-top: 6px;} .reg-info {display: block;} .reg-info li {font-size: 13px; margin-bottom: 6px;} .reg-info li:last-child {margin-bottom: 0;} .reg-info li span {width: 80px;} .reg-info li strong {font-size: 14px;} .reg-info li:after {display: none;} .reg-group > label {font-size: 14px; margin-bottom: 10px;} .reg-group input[type="text"] {height: 42px; font-size: 14px;} .reg-radio {margin-top: 0;} .reg-radio li {padding: 5px 0;} .reg-warn {padding: 10px; margin-top: 15px; font-size: 12px;} .reg-url button {width: 80px; height: 42px; font-size: 14px; margin-left: 4px;} .reg-video-none {background: #FBFBFD; padding: 100px 0; margin: 0 -20px;} .reg-video-none p {font-size: 13px;} .reg-video-none a {font-size: 14px; padding: 0 16px; height: 40px;} .reg-content {height: 120px; font-size: 14px;} .reg-btn {margin-top: 30px; padding-top: 0; border-top: none;} .reg-btn button {height: 48px; font-size: 16px;} } /* 마이페이지 */ .mypage-tab {display: flex; gap: 2px; margin-bottom: 0; padding-left: 0; list-style: none;} .mypage-tab li {width: calc(100% / 3);} .mypage-tab li a {background: #F4F5F8; font-size: 16px; color: #888; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;} .mypage-tab li a.active {background: #5932FC; color: #fff;} .mypage-title {padding-top: 60px; padding-bottom: 30px; line-height: 1.2; text-align: center; margin-bottom: 0; font-size: 32px; font-weight: 700;} .mypage-user-form {padding: 20px 15px 15px; border: 1px solid #EAEAEA; border-radius: 20px;} .mypage-user-form .contact-group:first-child {margin-top: 0;} .mypage-user-sns {background: #F0F0F0; height: 48px; padding: 0 15px; border-radius: 4px; display: flex; align-items: center;} .mypage-user-sns img {display: block; width: 20px; margin-right: 8px;} .mypage-user-sns span {font-size: 16px; color: #222;} .mypage-user-agree {margin-top: 40px; display: flex; align-items: center;} .mypage-user-agree input[type="checkbox"] {flex-shrink: 0;} .mypage-user-agree input[type="checkbox"] + label {margin-left: 8px; font-size: 16px; color: #333; display: flex; align-items: center;} .mypage-user-agree input[type="checkbox"] + label a {flex-shrink: 0; padding: 0 15px; font-size: 13px; margin-left: 10px; color: #888; border-radius: 20px; height: 32px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;} .mypage-user-submit {margin-top: 80px; padding-left: 0; margin-bottom: 0; list-style: none; display: flex; justify-content: center;} .mypage-user-submit li {margin: 0 3px;} .mypage-user-submit li button {width: 282px; height: 58px; background: none; font-size: 18px; color: #222; border-radius: 8px; border: 1px solid #aaa; display: flex; align-items: center; justify-content: center;} .mypage-user-submit li button.ppl {background: #5932FC; border-color: #5932FC; color: #fff;} .mypage-user-submit li button.ppl:disabled {background: #666; border-color: #666; color: #fff;} @media (max-width: 992px) { .mypage-user-agree {margin-top: 20px;} .mypage-user-submit {margin-top: 40px;} } @media (max-width: 768px) { .mypage-tab {gap: 1px; margin: -40px -20px 0;} .mypage-tab li a {height: 48px; border-radius: 0; font-size: 13px;} .mypage-title {font-size: 24px; padding-top: 30px; padding-bottom: 10px;} .mypage-user-sns {height: 42px;} .mypage-user-sns img {width: 16px;} .mypage-user-sns span {font-size: 14px;} .mypage-user-agree input[type="checkbox"] + label {font-size: 12px;} .mypage-user-agree input[type="checkbox"] + label a {padding: 0 10px; height: 24px; font-size: 11px;} .mypage-user-submit {margin: 40px -3px 0;} .mypage-user-submit li {width: 50%; padding: 0 3px; margin: 0;} .mypage-user-submit li button {width: 100%; height: 48px; font-size: 16px;} } /* 챌린지 관리 */ .mypage-challenge-tab {margin-bottom: 40px;} .mypage-challenge-tab .swiper-wrapper {justify-content: center; height: auto;} .mypage-challenge-tab .swiper-slide {width: 110px; height: auto;} .mypage-challenge-tab .swiper-slide a {height: 52px; font-size: 16px; border-bottom: 1px solid #F0F0F0; color: #888; display: flex; position: relative; align-items: center; justify-content: center;} .mypage-challenge-tab .swiper-slide a.active {color: #5932FC; font-weight: 700;} .mypage-challenge-tab .swiper-slide a.active:after {content: ''; display: block; height: 2px; background: #5932FC; position: absolute; left: 0; right: 0; bottom: -1px;} .mypage-challenge-item {padding: 30px 40px; margin-bottom: 16px; border-radius: 40px; display: flex; box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.1);} .mypage-challenge-item:last-child {margin-bottom: 0;} .mypage-challenge-item dt {flex-grow: 1; min-width: 0;} .mypage-challenge-item dt em {height: 30px; padding: 0 16px; border-radius: 30px; font-style: normal; font-size: 14px; color: #fff; font-weight: 400; display: inline-flex; align-items: center; justify-content: center;} .mypage-challenge-item dt em.grn {background: #369C48;} .mypage-challenge-item dt em.ppl {background: #5932FC;} .mypage-challenge-item dt em.pnk {background: #EA2088;} .mypage-challenge-item dt em.gry {background: #F0F0F0; color: #888;} .mypage-challenge-item dt h4 {line-height: 1.2; margin-top: 10px; margin-bottom: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.075rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .mypage-challenge-item dt h6 {margin-top: 10px; margin-bottom: 15px; line-height: 1.2; font-size: 16px; color: #666; font-weight: 400;} .mypage-challenge-item dt ul {padding-left: 0; margin: -2px; list-style: none; display: flex; flex-wrap: wrap;} .mypage-challenge-item dt ul li {padding: 2px;} .mypage-challenge-item dt ul li span {height: 28px; padding: 0 10px; font-weight: 400; margin-right: 4px; margin-bottom: 4px; border-radius: 4px; font-size: 14px; display: flex; align-items: center; justify-content: center;} .mypage-challenge-item dt p {margin-bottom: 0; line-height: 1; font-size: 14px; color: #1A5EF1; display: flex; align-items: center; font-weight: 400;} .mypage-challenge-item dt p:before {content: ''; display: block; margin-right: 10px; width: 24px; height: 24px; background: url('../images/v2/contest_view_user.png')no-repeat center center / cover;} .mypage-challenge-info {width: 260px; flex-shrink: 0; margin-left: 40px;} .mypage-challenge-info ul {padding-left: 0; margin-bottom: 0; list-style: none;} .mypage-challenge-info ul li {margin-bottom: 6px; display: flex; align-items: center;} .mypage-challenge-info ul li:last-child {margin-bottom: 0;} .mypage-challenge-info ul li strong {width: 100px; flex-shrink: 0; font-size: 14px; color: #888; font-weight: 400; display: flex; align-items: center;} .mypage-challenge-info ul li strong img {display: block; width: 20px; margin-right: 6px;} .mypage-challenge-info ul li span {flex-grow: 1; text-align: right; font-size: 14px; color: #1A5EF1; font-weight: 700;} .mypage-challenge-info a {margin-top: 20px; height: 44px; font-size: 16px; color: #424242; border: 1px solid #ddd; border-radius: 40px; display: flex; align-items: center; justify-content: center;} @media (max-width: 1200px) { .mypage-challenge-item dt em {height: 26px; padding: 0 12px; font-size: 13px;} .mypage-challenge-item dt h4 {font-size: 20px;} .mypage-challenge-item dt h6 {font-size: 14px;} .mypage-challenge-item dt ul li span {font-size: 12px; height: 24px; padding: 0 6px;} } @media (max-width: 992px) { .mypage-challenge-item {padding: 20px 25px; border-radius: 30px;} .mypage-challenge-info {width: 220px; margin-left: 20px;} .mypage-challenge-info ul li strong {font-size: 13px;} .mypage-challenge-info ul li span {font-size: 13px;} .mypage-challenge-info a {height: 40px; font-size: 14px;} } @media (max-width: 768px) { .mypage-challenge-tab {margin: 0 -20px 20px; overflow: visible !important;} .mypage-challenge-tab .swiper-wrapper {justify-content: space-between; width: 100%; display: flex;} .mypage-challenge-tab .swiper-slide {width: 24%; flex-shrink: 0;} .mypage-challenge-tab .swiper-slide a {height: 36px; font-size: 14px;} .mypage-challenge-item {display: block; padding: 20px; border-radius: 10px; box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.12);} .mypage-challenge-item dt {display: flex; flex-wrap: wrap;} .mypage-challenge-item dt em {height: 24px; padding: 0 10px; font-size: 10px;} .mypage-challenge-item dt h4 {font-size: 18px; width: 100%; order: 2;} .mypage-challenge-item dt h6 {font-size: 13px; width: 100%; order: 3;} .mypage-challenge-item dt ul {display: none;} .mypage-challenge-item dt h6 {margin-bottom: 0;} .mypage-challenge-item dt p {font-size: 12px; margin-left: 10px;} .mypage-challenge-item dt p:before {margin-right: 5px; width: 16px; height: 16px;} .mypage-challenge-info {margin-top: 15px; margin-left: 0; width: 100%;} .mypage-challenge-info ul li strong {font-size: 12px; width: 70px;} .mypage-challenge-info ul li strong img {display: none;} .mypage-challenge-info ul li span {font-size: 12px; text-align: left; font-weight: 500;} } .mypage-challenge-title dt {margin-bottom: 0; line-height: 1; font-size: 14px; color: #1A5EF1; display: flex; align-items: center; font-weight: 400;} .mypage-challenge-title dt:before {content: ''; display: block; margin-right: 10px; width: 24px; height: 24px; background: url('../images/v2/contest_view_user.png')no-repeat center center / cover;} .mypage-challenge-title dd {margin-top: 10px; display: flex; align-items: flex-start;} .mypage-challenge-title dd h4 {font-size: 36px; font-weight: 500; line-height: 1.2; margin-bottom: 0; letter-spacing: -0.075rem;} .mypage-challenge-title dd em {height: 36px; margin-top: 6px; font-style: normal; margin-left: 20px; padding: 0 16px; font-size: 16px; background: #5932fc; color: #fff; flex-shrink: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center;} .mypage-challenge-title dd em.grn {background: #369C48;} .mypage-challenge-title dd em.ppl {background: #5932FC;} .mypage-challenge-title dd em.pnk {background: #EA2088;} .mypage-challenge-title dd em.gry {background: #F0F0F0; color: #888;} .mypage-challenge-sort {margin-top: 40px; display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none;} .mypage-challenge-sort li {margin-right: 4px;} .mypage-challenge-sort li:last-child {margin-right: 0;} .mypage-challenge-sort li a {height: 46px; padding: 0 24px; font-size: 15px; color: #555; border: 1px solid #ddd; border-radius: 40px; display: flex; align-items: center; justify-content: center;} .mypage-challenge-sort li a.active {border-color: #5932FC; color: #5932FC; font-weight: 700;} .mypage-search-table {margin-top: 20px; border-top: 2px solid #000; table-layout: fixed; width: 100%;} .mypage-search-table th, .mypage-search-table td {border-bottom: 1px solid #dcdcdc;} .mypage-search-table th {width: 220px; background: #F4F5F8; padding: 10px 30px; font-size: 16px; color: #666; font-weight: 400;} .mypage-search-table td {padding: 10px 20px;} .mypage-search-title {display: flex; margin-bottom: 0;} .mypage-search-title dt {flex-shrink: 0; margin-right: 4px; width: 94px;} .mypage-search-title dd {max-width: 400px; width: 100%;} .mypage-search-title dd input[type="text"] {display: block; width: 100%; height: 44px; font-size: 14px; padding: 0 15px; border-radius: 4px; border: 1px solid #ddd;} .mypage-search-sort {margin-top: 0 !important;} .mypage-search-sort button {height: 44px; width: 100%;} .mypage-search-date {display: flex; flex-wrap: wrap; margin-bottom: -5px; margin-top: -5px;} .mypage-search-date dt {margin-right: 20px; padding: 5px 0;} .mypage-search-date dt ul {display: flex; align-items: center; padding-left: 0; margin-bottom: 0; list-style: none;} .mypage-search-date dt ul li {width: 156px; position: relative;} .mypage-search-date dt ul li:nth-child(2) {width: 20px; text-align: center;} .mypage-search-date dt ul li input[type="text"] {width: 100%; height: 44px; padding-left: 15px; padding-right: 50px; font-size: 15px; color: #BDBDBD; background: #F0F0F0; border-radius: 4px;} .mypage-search-date dt ul li button {display: block; width: 44px; height: 44px; background: #f00; position: absolute; right: 0; top: 0; text-indent: -9999px; border: none; background: url('../images/v2/mypage_date.png')no-repeat center center / 30px auto;} .mypage-search-date dd {padding: 5px 0;} .mypage-search-date dd ul {display: flex; padding-left: 0; margin-bottom: 0; list-style: none;} .mypage-search-date dd ul li {margin-left: -1px;} .mypage-search-date dd ul li input[type="radio"] {display: none;} .mypage-search-date dd ul li input[type="radio"] + label {width: 80px; height: 44px; margin-left: 0; font-size: 16px; font-weight: 500; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;} .mypage-search-date dd ul li:first-child input[type="radio"] + label {border-radius: 4px 0 0 4px;} .mypage-search-date dd ul li:last-child input[type="radio"] + label {border-radius: 0 4px 4px 0;} .mypage-search-date dd ul li input[type="radio"]:checked + label {border-color: #5932FC; color: #5932FC; position: relative;} .mypage-search-chk {min-height: 44px; padding-left: 0; margin-top: -3px; margin-bottom: -3px; list-style: none; display: flex; align-items: center; flex-wrap: wrap;} .mypage-search-chk li {margin-right: 20px; padding: 3px 0; display: flex; align-items: center;} .mypage-search-chk li:last-child {margin-right: 0;} .mypage-search-chk li label {margin-left: 6px;} .mypage-search-submit {margin-top: 20px; display: flex; justify-content: center;} .mypage-search-submit button {height: 48px; padding: 0 30px; font-size: 16px; color: #222; background: none; border: 1px solid #aaa; border-radius: 40px; display: flex; align-items: center; justify-content: center;} .mypage-search-submit button:before {content: ''; display: block; width: 24px; height: 24px; margin-right: 6px; background: url('../images/v2/mypage_search.png')no-repeat center center / cover;} .mypage-challenge-count {margin-top: 40px; font-size: 14px; color: #666;} .mypage-challenge-count strong {color: #5932FC; font-weight: 700;} .mypage-challenge-control {margin-bottom: 0; display: flex; justify-content: space-between;} .mypage-challenge-control dt ul {padding-left: 0; margin-bottom: 0; list-style: none; display: flex;} .mypage-challenge-control dt ul li {margin-right: 4px;} .mypage-challenge-control dt ul li:last-child {margin-right: 0;} .mypage-challenge-control dt ul li a {height: 44px; padding: 0 20px; font-size: 16px; font-weight: 400; border-radius: 4px; display: flex; align-items: center; justify-content: center;} .mypage-challenge-control dt ul li a.gry {background: #666; color: #fff;} .mypage-challenge-control dt ul li a.excl {border: 1px solid #aaa; color: #222;} .mypage-challenge-control dt ul li a.excl:before {content: ''; display: block; margin-right: 10px; width: 24px; height: 24px; background: url('../images/v2/mypage_excel.png')no-repeat center center / cover;} .mypage-challenge-control dd .clg-sort button {height: 44px; width: 100px;} .mypage-challenge-control.top {margin-top: 30px;} .mypage-challenge-control.bot {margin-top: 20px;} .mypage-challenge-detail {border-top: 2px solid #000; margin-top: 20px; table-layout: fixed; width: 100%;} .mypage-challenge-detail th, .mypage-challenge-detail td {padding: 20px 10px; font-weight: 400; word-break: break-word; text-align: center; border-bottom: 1px solid #ddd;} .mypage-challenge-detail th {color: #666; font-size: 18px;} .mypage-challenge-detail th.clg-chk {width: 70px;} .mypage-challenge-detail th.clg-date {width: 120px;} .mypage-challenge-detail th.clg-id {width: 140px;} .mypage-challenge-detail th.clg-name {width: 120px;} .mypage-challenge-detail th.clg-phone {width: 160px;} .mypage-challenge-detail th.clg-status {width: 140px;} .mypage-challenge-detail td {font-size: 16px;} .mypage-challenge-detail td.clg-addr {text-align: left;} .mypage-challenge-detail td.clg-status span {padding: 8px 16px; position: relative; font-size: 14px; color: #666; border: 1px solid #F0F0F0; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center;} .mypage-challenge-detail td.clg-status span.blu {color: #1A5EF1;} .mypage-challenge-detail td.clg-status span.red {color: #FF1717;} .mypage-challenge-detail td.clg-status span.gry {background: #F0F0F0; color: #aaa;} .mypage-challenge-detail td.clg-status span.blu {color: #1A5EF1; cursor: help;} .mypage-challenge-detail td.clg-status span.blu:after {content: '?'; display: block; font-weight: 500; margin-left: 6px; font-size: 11px; width: 16px; height: 16px; line-height: 16px; text-align: center; background: #424242; color: #fff; border-radius: 50%;} .mypage-challenge-detail td.clg-status span.blu:before { content: '배송 중 상태는 5일 경과 후 자동으로 배송 완료로 변경됩니다. 배송 상태 변경이 필요하신 경우 고객센터로 문의해 주세요.'; position: absolute; bottom: 100%; right: 0; background: #fff; border: 1px solid #ddd; width: 220px; margin-bottom: 5px; text-align: left; border-radius: 4px; padding: 15px; font-size: 13px; color: #222; visibility: hidden; } .mypage-challenge-detail td.clg-status:hover span.blu:before {visibility: visible;} .mypage-challenge-detail td.clg-none {padding: 30px; color: #aaa;} .clg-toggle {display: none;} .clg-mo {display: none;} @media (max-width: 1200px) { .mypage-challenge-title dd h4 {font-size: 32px;} .mypage-challenge-title dd em {height: 32px;} .mypage-challenge-detail th, .mypage-challenge-detail td {font-size: 14px;} .mypage-challenge-detail th.clg-chk {width: 50px;} .mypage-challenge-detail th.clg-date {width: 100px;} .mypage-challenge-detail th.clg-name {width: 100px;} .mypage-challenge-detail th.clg-phone {width: 140px;} .mypage-challenge-detail th.clg-status {width: 120px;} .mypage-challenge-detail td.clg-status span {padding: 6px 10px; font-size: 13px;} } @media (max-width: 992px) { .mypage-challenge-title dd h4 {font-size: 28px;} .mypage-challenge-title dd em {height: 28px; font-size: 14px; margin-top: 4px;} .mypage-challenge-sort {margin-top: 30px;} .mypage-challenge-sort li a {height: 40px; padding: 0 16px; font-size: 14px;} .mypage-search-table {margin-top: 15px;} .mypage-search-table th {width: 140px; padding: 10px 20px; font-size: 14px;} .mypage-search-table td {padding: 10px;} .mypage-search-date dt ul li input[type="text"] {font-size: 14px;} .mypage-search-date dd ul li input[type="radio"] + label {font-size: 14px;} .mypage-challenge-control dt ul li a {font-size: 14px;} .mypage-challenge-detail, .mypage-challenge-detail thead, .mypage-challenge-detail tbody, .mypage-challenge-detail tr, .mypage-challenge-detail th, .mypage-challenge-detail td {display: block;} .mypage-challenge-detail tr {display: flex; flex-wrap: wrap;} .mypage-challenge-detail th.clg-chk {width: 50px; flex-shrink: 0;} .mypage-challenge-detail th.clg-date {width: auto; flex-grow: 1;} .mypage-challenge-detail th.clg-name {display: none;} .mypage-challenge-detail th.clg-id {width: auto; flex-grow: 1;} .mypage-challenge-detail th.clg-phone {display: none;} .mypage-challenge-detail th.clg-addr {display: none;} .mypage-challenge-detail th.clg-status {width: 120px; flex-shrink: 0;} .mypage-challenge-detail th.clg-toggle {display: block; width: 52px; flex-shrink: 0;} .mypage-challenge-detail td.clg-chk {width: 50px; flex-shrink: 0;} .mypage-challenge-detail td.clg-date {width: auto; flex-grow: 1;} .mypage-challenge-detail td.clg-name {display: none;} .mypage-challenge-detail td.clg-id {width: auto; flex-grow: 1;} .mypage-challenge-detail td.clg-phone {display: none;} .mypage-challenge-detail td.clg-addr {display: none;} .mypage-challenge-detail td.clg-status {width: 120px; flex-shrink: 0;} .mypage-challenge-detail td.clg-status span.blu:before, .mypage-challenge-detail td.clg-status span.blu:after {display: none;} .mypage-challenge-detail td.clg-toggle {display: block; width: 52px; flex-shrink: 0;} .mypage-challenge-detail td.clg-toggle button {width: 32px; height: 32px; border: none; border-radius: 0; text-indent: -9999px; display: block; background: none; position: relative;} .mypage-challenge-detail td.clg-toggle button:after {content: ''; display: block; width: 8px; height: 8px; border-right: 2px solid #000; border-bottom: 2px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -4px; margin-top: -5px; transform:rotate(45deg);} .mypage-challenge-detail td.clg-toggle button.active:after {transform:rotate(225deg); margin-top: -2px;} .mypage-challenge-detail td.clg-mo {display: none; padding-left: 50px; padding-top: 0; width: 100%; margin-top: -1px; border-top: 1px solid #fff;} .mypage-challenge-detail td.clg-mo.active {display: block;} .mypage-challenge-detail td.clg-mo table {border-top: 1px solid #000; width: 100%;} .mypage-challenge-detail td.clg-mo table th {width: 20%; text-align: left; background: #F4F5F8;} .mypage-challenge-detail td.clg-mo table td {width: 80%; text-align: left;} .mypage-challenge-detail td.clg-none {width: 100%;} } @media (max-width: 768px) { .mypage-challenge-title {margin-top: 10px; padding-top: 20px; border-top: 1px solid #E0E0E0;} .mypage-challenge-title dt {margin-top: 8px; font-size: 13px;} .mypage-challenge-title dt:before {margin-right: 10px; width: 16px; height: 16px;} .mypage-challenge-title dd h4 {font-size: 22px;} .mypage-challenge-title dd em {height: 24px; padding: 0 10px; font-size: 12px; margin-top: 2px; margin-left: 10px;} .mypage-challenge-sort {margin-top: 20px;} .mypage-challenge-sort li a {font-size: 13px;} .mypage-search-table tr:nth-child(2) {display: none;} .mypage-search-table th {width: 90px; padding: 10px; font-size: 13px;} .mypage-search-table td {padding: 8px;} .mypage-search-title dt {display: none;} .mypage-search-submit {margin-top: 15px;} .mypage-search-submit button {height: 40px; padding: 0 26px; font-size: 14px;} .mypage-search-submit button:before {display: none;} .mypage-challenge-count {display: none;} .mypage-challenge-control dt ul li {margin-right: 0;} .mypage-challenge-control dt ul li:last-child {display: none;} .mypage-challenge-control dt ul li a {height: 42px; padding: 0 12px; font-size: 14px;} .mypage-challenge-control dd .clg-sort {margin-top: 0;} .mypage-challenge-control dd .clg-sort button {height: 42px; width: 80px;} .mypage-challenge-control.top {margin-top: 40px;} .mypage-challenge-control.bot {margin-top: 15px;} .mypage-challenge-detail {margin-top: 15px;} .mypage-challenge-detail th.clg-chk, .mypage-challenge-detail th.clg-date, .mypage-challenge-detail th.clg-id, .mypage-challenge-detail th.clg-status, .mypage-challenge-detail th.clg-toggle {height: 58px; display: flex; align-items: center; justify-content: center;} .mypage-challenge-detail th.clg-chk {width: 20px; padding: 0; flex-shrink: 0;} .mypage-challenge-detail th.clg-date {padding: 0 10px; width: calc((100% - (20px + 90px + 32px))/2);} .mypage-challenge-detail th.clg-id {padding: 0 10px; width: calc((100% - (20px + 90px + 32px))/2);} .mypage-challenge-detail th.clg-status {padding: 0 10px; width: 90px;} .mypage-challenge-detail th.clg-toggle {width: 32px; padding: 0;} .mypage-challenge-detail td.clg-chk, .mypage-challenge-detail td.clg-date, .mypage-challenge-detail td.clg-id, .mypage-challenge-detail td.clg-status, .mypage-challenge-detail td.clg-toggle {height: 58px; display: flex; align-items: center; justify-content: center;} .mypage-challenge-detail td.clg-chk {width: 20px; padding: 0;} .mypage-challenge-detail td.clg-date {padding: 0 10px; width: calc((100% - (20px + 90px + 32px))/2);} .mypage-challenge-detail td.clg-id {padding: 0 10px; width: calc((100% - (20px + 90px + 32px))/2);} .mypage-challenge-detail td.clg-status {padding: 0 10px; width: 90px;} .mypage-challenge-detail td.clg-status span {padding: 4px 8px; font-size: 12px;} .mypage-challenge-detail td.clg-toggle {width: 32px; padding: 0;} .mypage-challenge-detail td.clg-mo {padding-left: 30px; padding-right: 0;} .mypage-challenge-detail td.clg-mo table th {font-size: 12px; padding: 10px;} .mypage-challenge-detail td.clg-mo table td {font-size: 12px; padding: 10px;} } /* 내가 참여한 챌린지 */ .ptcp-info {width: 50%; flex-shrink: 0; margin-left: 30px;} .ptcp-step {display: flex; padding-left: 0; position: relative; margin-bottom: 0; list-style: none; justify-content: space-between;} .ptcp-step:before {content: ''; display: block; height: 1px; background: #eaeaea; position: absolute; left: 0; right: 0; top: 50%;} .ptcp-step li span {height: 34px; padding: 0 20px; font-size: 12px; position: relative; background: #fff; color: #aaa; border: 1px solid #eaeaea; border-radius: 30px; display: flex; align-items: center; justify-content: center;} .ptcp-step li span:before {content: ''; display: block; width: 8px; height: 14px; margin-right: 10px; margin-top: -2px; border-right: 2px solid #eaeaea; border-bottom: 2px solid #eaeaea; transform:rotate(45deg);} .ptcp-step li span.active {border: 2px solid #5932FC; color: #5932FC; font-weight: 700;} .ptcp-step li span.active:before {border-color: #5932FC;} .ptcp-detail {margin-top: 15px; table-layout: fixed; width: 100%; border-top: 1px solid #000;} .ptcp-detail th, .ptcp-detail td {padding: 8px; font-size: 12px; text-align: center; border-bottom: 1px solid #F0F0F0;} .ptcp-detail th:nth-child(1), .ptcp-detail td:nth-child(1) {width: 100px;} .ptcp-detail td:nth-child(2) {text-align: left; font-size: 13px;} .ptcp-detail td:nth-child(2) img {width: 20px; margin-right: 4px;} .ptcp-detail td:nth-child(2) span {vertical-align: middle;} .ptcp-detail td:nth-child(2) a {height: 20px; vertical-align: middle; padding: 0 8px; font-size: 11px; margin-left: 4px; color: #888; border: 1px solid #ddd; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;} .ptcp-toggle {width: 100%; height: 30px; background: none; font-size: 12px; color: #333; margin-top: 10px; border: 1px solid #ddd; border-radius: 30px; display: flex; align-items: center; justify-content: center;} .ptcp-toggle:after {content: ''; display: block; width: 6px; height: 6px; border-right: 2px solid #000; border-bottom: 2px solid #000; margin-left: 8px; transform:rotate(45deg);} .ptcp-toggle.active:after {transform:rotate(225deg); margin-top: 4px;} .ptcp-pop-title {padding-bottom: 20px; border-bottom: 1px solid #eaeaea;} .ptcp-pop-title img {display: block; height: 30px; margin-bottom: 10px;} .ptcp-pop-title h4 {font-size: 30px; font-weight: 500; margin-bottom: 0;} .ptcp-pop-title p {font-size: 16px; margin-top: 10px; margin-bottom: 0;} .ptcp-pop-title p span {color: #888; margin-right: 8px;} .ptcp-pop-frame {padding: 0 25%; margin-top: 20px;} .ptcp-pop-frame > div {position: relative; padding-bottom: 177.78%;} .ptcp-pop-frame iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} @media (max-width: 1200px) { .ptcp-step li span {padding: 0 16px;} } @media (max-width: 992px) { .ptcp-step li span {padding: 0 10px; font-size: 11px; height: 30px;} .ptcp-step li span:before {width: 6px; height: 10px; margin-right: 6px; margin-top: -2px;} } @media (max-width: 768px) { .ptcp-info {width: 100%; margin-left: 0; margin-top: 15px;} .ptcp-step li span {padding: 0 8px; font-size: 10px; height: 26px;} .ptcp-step li span:before {width: 5px; height: 8px; margin-right: 4px;} .ptcp-detail th, .ptcp-detail td {padding: 6px; font-size: 12px;} .ptcp-pop-title h4 {font-size: 22px; font-weight: 700;} .ptcp-pop-title p {font-size: 14px; margin-top: 8px;} }