@charset "UTF-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.css");
/* ===== ui/header.css ===== */
header{
display: block;
width:100%;
position: fixed;
top:0;
left: 0;
z-index: 100;
transition: background 0.3s;
min-width: 280px;
background: #fff;
border-bottom:1px solid #e0e0e0;
}
/*header.active{
border-bottom:1px solid #c0c0c0;
transition: background 0.3s;
}*/
header .centerWrap{
height: 70px;
position: relative;
line-height: 0;
padding:15px 20px 0;
max-width: 1580px;
}
header .buttonHome{
display: block;
font-size: 0;
width: 137px;
height: 40px;
background: url(../images/livevideoworld_logo.svg) center no-repeat;
background-size: 137px 40px;
float: left;
}
/* header .buttonHome{
display: block;
font-size: 0;
width: 239px;
height: 26px;
background: url(../images/logo.svg) center no-repeat;
background-size: 239px 26px;
margin:0 auto;
} */
header nav {
display: flex;
float: left;
gap: 0 40px;
margin:0 0 0 65px;
}
header a{
display: block;
height: 38px;
line-height: 38px;
text-align: left;
font-size: 17px;
font-style: normal;
color:#222 !important;
font-weight: 600;
letter-spacing: -0.3px;
box-sizing: border-box;
}
header a.active{
color:var(--main) !important;
border-bottom:2px solid var(--main);
}
header a:hover{
color:var(--main) !important;
}
header a.active:hover{
opacity: 0.7;
}
.buttonMoMenu{display: none}
.searchForm {
display: flex;
align-items: center;
margin-left: 20px;
}
.searchInput {
width: 300px;
height: 40px;
padding: 0 15px;
border: 1px solid #d0d0d0;
border-radius: 20px;
font-size: 14px;
outline: none !important;
font-weight: 400;
color:#222;
}
.searchInput::placeholder{
color:#999
}
.searchInput:focus {
border-color: #aaa;
}
.searchButton {
width: 64px;
height: 40px;
margin: 0 0 0 10px;
background: var(--main);
color: #fff !important;
border: none;
border-radius: 20px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
text-align: center;
transition: background 0.2s;
font-size: 0;
position: relative;
}
.searchButton span{
display: block;
position: absolute;
font-size: 0;
width: 100%;
height: 100%;
left:0;
top:0;
background: url(../images/search-w.svg) center no-repeat;
background-size: 20px auto;
border-radius: 20px;
}
.searchButton:hover {
background: var(--mainHover);
}
@media screen and (max-width: 768px) {
.searchForm {
margin-left: 10px;
}
.searchInput {
width: 200px;
}
.searchButton {
width: 60px;
}
header nav {
margin: 0 0 0 20px;
gap: 15px;
}
header nav a {
font-size: 14px;
}
}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
header .centerWrap{
height: 58px;
padding: 13px 20px 0;
}
header .buttonHome {
display: block;
font-size: 0;
width: 110px;
height: 32px;
background: url(../images/livevideoworld_logo.svg) center no-repeat;
background-size: 110px 32px;
margin: 0 auto;
float: left;
}
header nav {
margin: 0 0 0 30px;
gap: 20px;
}
header nav a {
height: 32px;
line-height: 32px;
font-size: 15px;
}
header .menuDepth1{
height: 32px;
line-height: 32px;
}
.searchInput{
height:32px;
width: 260px;
}
.searchButton{
width: 48px;
height: 32px;
margin:0 0 0 6px;
}
header .floatRight .userMenu .userMenuBtn{
width: 32px;
height: 32px;
}
} /*반응형 1000px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
/* 800px 이하: 데스크톱 내비/로그인/프로필 숨기고 통합 모바일 메뉴로 전환 */
header nav {
display: none;
}
header .floatRight {
width: calc(100% - 120px);
}
header .floatRight form {
float: left;
width: calc(100% - 28px);
}
header .floatRight .userMenu,
header .floatRight .btnLogin {
display: none;
}
.searchForm {
margin: 0;
}
.searchInput {
width: calc(100% - 58px);
}
.buttonMoMenu {
display: block;
width: 40px;
height: 40px;
position: absolute;
background: url(../images/menu-111-18x14.svg) center no-repeat;
background-size: 18px 14px;
top: -4px;
right: -12px;
z-index: 100;
}
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
/* 모바일 모드는 800px에서 시작하므로 여기서는 별도 조정 없음 */
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 620px) {
/* 모바일 전환은 800px 블록에서 처리 (로그인/프로필은 이미 숨김) */
} /*반응형 620px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
header .floatRight{
width: calc(100% - 116px);
}
.searchForm{
flex-wrap: wrap;
}
.searchInput {
width: calc(100% - 54px);
}
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
header .buttonHome {
width: 61px;
background-position: left;
background-size: 90px 26px;
}
header .floatRight {
width: calc(100% - 65px);
}
.searchInput {
width: calc(100% - 44px);
}
.searchButton{
width: 38px;
margin:0 0 0 4px;
}
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
.searchInput{
font-size: 12px;
padding:0 10px;
}
} /*반응형 300px 끝*/
/*#######################################*/
/* Header user menu / login button (moved out of inline styles) */
header .floatRight .userMenu {
float: left;
margin-left: 10px;
position: relative;
}
header .floatRight .btnLogin {
float: left;
margin-left: 10px;
}
/* ===== ui/footer.css ===== */
footer{
display: block;
width:100%;
padding:40px 0 24px;
background: #fff;
border-top:1px solid #e0e0e0;
}
footer .centerWrap{
max-width: 1580px;
}
.home footer{
border-top:none;
}
footer .row1 .footerLogo{
display: block;
float: left;
line-height: 0;
width: 110px;
height: 32px;
background: url(../images/livevideoworld_logo.svg) center no-repeat;
background-size: 110px 32px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
opacity: 0.6;
}
footer .row1 .footerMenuWrap{
display: flex;
float: right;
flex-wrap:wrap;
column-gap:32px;
}
footer .row1 .footerMenuWrap .footerMenu{
display: block;
float: left;
color: #111 !important;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 32px;
letter-spacing: -0.048px;
}
footer .companyInfo{
display: block;
width: 100%;
margin:40px 0 0;
}
footer .companyInfo .txt{
color: #111 !important;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: -0.039px;
position: relative;
float: left;
text-align: left;
}
footer .companyInfo .txt + .txt{margin:0 0 0 17px}
footer .companyInfo .txt + .txt:before{
display: block;
position: absolute;
z-index: 10;
content: "";
width: 1px;
height:10px;
background: rgba(0,0,0,0.2);
top:3px;
left:-9px;
}
footer .companyInfo .row + .row{margin:10px 0 0}
footer .line1{
width: 100%;
height:1px;
background: rgba(0,0,0,0.1);
margin:32px 0 0;
}
footer .row.last{padding:12px 0 0}
footer .row.last .copyRight{
color: #222;
display: block;
float: left;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.039px;
line-height: 16px;
padding:8px 0;
}
footer .row.last .buttonSns{
display: block;
float: left;
width: 30px;
height: 30px;
font-size: 0;
border-radius: 50%;
}
footer .row.last .buttonSns + .buttonSns{
margin:0 0 0 12px;
}
footer .row.last .buttonSns.facebook{
background: #555 url(../images/sns_fa.svg) center no-repeat;
background-size: 20px 20px;
}
footer .row.last .buttonSns.instagram{
background: #555 url(../images/sns_in.svg) center no-repeat;
background-size: 20px 20px;
}
footer .row.last .buttonSns.linkedin{
background: #555 url(../images/sns_li.svg) center no-repeat;
background-size: 20px 20px;
}
footer .col1{
display: block;
float:left;
width: 250px;
}
footer .col1 img{
display: block;
width: 100%;
}
footer .col2{
display: block;
float: left;
margin:0 0 0 100px;
padding:0 0 10px 70px;
border-left:1px solid rgba(255,255,255,0.1);
}
footer .col2 .ftTxt1{
display: block;
width: 100%;
font-size: 16px;
color:#fff;
font-weight: 600;
text-align: left;
line-height: 30px;
}
footer .col2 .ftTxt2{
display: block;
width: 100%;
font-size: 16px;
color:#fff;
font-weight: 600;
text-align: left;
line-height: 30px;
}
footer .col2 .ftTxt3{
display: block;
width: 100%;
font-size: 14px;
color:rgba(255,255,255,0.8);
font-weight: 500;
text-align: left;
line-height: 22px;
margin:6px 0 0;
}
footer .col2 .ftTxt4{
display: block;
width: 100%;
font-size: 14px;
color:rgba(255,255,255,0.8);
font-weight: 500;
text-align: left;
line-height: 22px;
}
footer .col2 .ftTxt3 a{color:rgba(255,255,255,0.8) !important}
footer .col2 .ftTxt5{
display: block;
width: 100%;
font-size: 14px;
color:rgba(255,255,255,0.5);
font-weight: 500;
text-align: left;
line-height: 22px;
margin:30px 0 0;
}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
} /*반응형 1000px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
footer .row1 .footerMenuWrap{
width: 100%;
margin:14px 0 0;
column-gap: 22px;
row-gap: 4px;
}
footer .row1 .footerMenuWrap .footerMenu{
font-size: 15px;
}
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 600px) {
footer .companyInfo .row:nth-child(2) .txt{
width: 100%;
margin:4px 0 0 !important;
}
footer .companyInfo .row:nth-child(2) .txt + .txt:before{
display: none;
}
} /*반응형 600px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
footer{
padding:40px 0 60px;
}
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 430px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/mobilemenu.css ===== */
/* 통합 모바일 메뉴 (슬라이드 드로어) — gongmonara .onlyMoMenu 구조 참고 */
.onlyMoMenu {
display: none;
}
/*#######################################*/
@media screen and (max-width: 800px) {
.onlyMoMenu {
position: fixed;
inset: 0;
z-index: 10000;
display: block;
visibility: hidden;
pointer-events: none;
}
.onlyMoMenu.active {
visibility: visible;
pointer-events: auto;
}
.onlyMoMenu .ommLeft {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: rgba(15, 23, 42, 0.42);
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
}
.onlyMoMenu.active .ommLeft {
opacity: 1;
}
.onlyMoMenu .ommRight {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
width: min(82vw, 320px);
height: 100dvh;
background: #fff;
box-shadow: -8px 0 24px rgba(15, 23, 42, 0.16);
overflow: hidden;
transform: translateX(100%);
transition: transform 0.24s ease;
}
.onlyMoMenu.active .ommRight {
transform: translateX(0);
}
.onlyMoMenu .ommTop {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 0 14px 0 20px;
border-bottom: 1px solid #eef1f5;
}
.onlyMoMenu .ommTopLogo {
display: block;
width: 120px;
}
.onlyMoMenu .ommClose {
position: relative;
width: 46px;
height: 46px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
transform: translateX(7px);
}
.onlyMoMenu .ommClose::before,
.onlyMoMenu .ommClose::after {
position: absolute;
top: 22px;
left: 13px;
width: 20px;
height: 2px;
background: #334155;
content: "";
}
.onlyMoMenu .ommClose::before {
transform: rotate(45deg);
}
.onlyMoMenu .ommClose::after {
transform: rotate(-45deg);
}
.onlyMoMenu .ommAccount {
padding: 16px 20px;
}
.onlyMoMenu .ommGuestActions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.onlyMoMenu .ommGuestActions a {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
border: 1px solid #d8dee8;
border-radius: 8px;
box-sizing: border-box;
color: #374151 !important;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.onlyMoMenu .ommGuestActions a:last-child {
border-color: var(--main);
background: var(--main);
color: #fff !important;
}
.onlyMoMenu .ommUserProfile {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
color: #1f2937 !important;
text-decoration: none;
}
.onlyMoMenu .ommUserProfile > img {
display: block;
width: 46px;
min-width: 46px;
max-width: 46px;
height: 46px;
flex: 0 0 46px;
box-sizing: border-box;
aspect-ratio: 1;
border: 1px solid #e5e7eb;
border-radius: 50%;
object-fit: cover;
}
.onlyMoMenu .ommUserProfileInfo {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.onlyMoMenu .ommUserProfileInfo strong,
.onlyMoMenu .ommUserProfileInfo span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.onlyMoMenu .ommUserProfileInfo strong {
font-size: 15px;
}
.onlyMoMenu .ommUserProfileInfo span {
color: #6b7280;
font-size: 13px;
}
/* 상단 바로가기 버튼 (데스크톱 드롭다운의 userMenuShortcuts와 동일 표현) */
.onlyMoMenu .ommShortcuts {
display: flex;
flex-direction: column;
gap: 8px;
}
.onlyMoMenu .ommShortcut {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
border: 1px solid #d8dee8;
border-radius: 8px;
box-sizing: border-box;
background: #fff;
color: #374151 !important;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.onlyMoMenu .ommShortcut:hover {
border-color: #aeb8c6;
background: #f8fafc;
color: #111827 !important;
}
.onlyMoMenu .ommShortcutPrimary {
border-color: #9ee5d7;
background: #f3fffc;
color: #087f68 !important;
}
.onlyMoMenu .ommShortcutPrimary:hover {
border-color: #55cdb6;
background: #ecfcf8;
color: #066b58 !important;
}
.onlyMoMenu .ommMenus {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
overflow-y: auto;
padding: 0 20px;
border-top: 1px solid #eef1f5;
}
.onlyMoMenu .ommParent {
display: flex;
align-items: center;
min-height: 52px;
border-bottom: 1px solid #eef1f5;
color: #1f2937 !important;
font-size: 17px;
font-weight: 600;
text-decoration: none;
}
.onlyMoMenu .ommParent.active {
color: var(--main) !important;
}
/* 로그아웃은 POST 폼이라 폼이 flex 아이템이 된다.
하단 정렬(margin-top:auto)은 폼에, 시각 스타일은 버튼에 준다. */
.onlyMoMenu .ommLogoutForm {
position: sticky;
bottom: 20px;
display: flex;
margin: auto 0 0;
padding: 0;
}
.onlyMoMenu .ommLogout {
display: inline-flex;
width: fit-content;
min-height: 0;
margin-top: 0;
padding: 18px 0 0;
border: 0;
border-bottom: 0;
background: transparent;
color: #64748b !important;
font-family: inherit;
font-size: 15px;
font-weight: 500;
text-align: left;
cursor: pointer;
}
} /*반응형 800px 끝*/
/* ===== ui/home.css ===== */
/* .homeBanner{
display: block;
width: 100%;
height: 240px;
border-radius: 15px;
background: #222;
} */
.videoCardGroup{
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 10px 0;
}
.videoCardGroup .videoCard{
display: block;
width: calc((100% - 96px) / 5);
border: none;
padding: 0 0 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border-radius: 12px;
transition: all 0.3s ease;
background: #fff;
position: relative;
}
.videoCard:hover {
/* transform: translateY(-4px); */
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.videoCard .imgWrap{
display: block;
width: 100%;
padding: 0 0 56.25%;
line-height: 0;
position: relative;
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.videoCard .imgWrap > img{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
object-fit: cover;
transition: transform 0.3s ease;
}
.videoCard:hover .imgWrap > img {
transform: scale(1.05);
}
.videoCard .location{
/* display: flex;
gap: 0 10px;
flex-wrap: wrap; */
display: block;
width: 100%;
padding: 15px 16px 0;
font-size: 12px;
font-weight: 400;
color: #777;
line-height: 1.4;
/* text-transform: uppercase; */
letter-spacing: 0.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.videoCard .location .t1{
font-size: 12px;
font-weight: 400;
color: #777;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
.videoCard .location .t1 + .t1:before{
content: "";
position: absolute;
width: 2px;
height: 2px;
background: #888;
border-radius: 50%;
left: -6px;
top: 8px;
z-index: 5;
}
.videoCard .subject{
display: block;
width: 100%;
text-align: left;
font-size: 15px;
font-weight: 600;
color: #222 !important;
line-height: 1.4;
/* height: 50px; */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
padding:8px 16px 0;
}
.continentMenu {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.continentItem {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 20px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}
.continentItem:hover {
background: #f0f0f0;
border-color: #ccc;
}
.continentItem.active {
background: var(--main);
color: #fff;
border-color: var(--main);
}
.continentItem .count {
margin-left: 6px;
padding: 2px 6px;
background: rgba(0,0,0,0.1);
border-radius: 10px;
font-size: 12px;
}
.continentItem.active .count {
background: rgba(255,255,255,0.2);
}
.countryMenu {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
padding: 0 0 20px;
}
/* .countryMenu {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
} */
.countryItem {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 20px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}
.countryItem:hover {
background: #f0f0f0;
border-color: #ccc;
}
.countryItem.active {
background: var(--main);
color: #fff;
border-color: var(--main);
}
.countryItem .count {
margin-left: 6px;
padding: 2px 6px;
background: rgba(0,0,0,0.1);
border-radius: 10px;
font-size: 12px;
}
.countryItem.active .count {
background: rgba(255,255,255,0.2);
}
.searchTitle{
display: block;
width: 100%;
text-align: center;
padding:30px 0 40px;
}
.searchTitle .t1{
color:var(--main);
font-weight: 600;
}
.noResults{
display: block;
width: 100%;
}
.noResults h3{
text-align: center;
padding:240px 0 0
}
.noResults .txtN2{
text-align: center;
padding:20px 0 400px;
}
.cityMenu {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
padding: 0 0 20px;
}
.cityItem {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 20px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}
.cityItem:hover {
background: #f0f0f0;
border-color: #ccc;
}
.cityItem.active {
background: var(--main);
color: #fff;
border-color: var(--main);
}
.cityItem .count {
margin-left: 6px;
padding: 2px 6px;
background: rgba(0,0,0,0.1);
border-radius: 10px;
font-size: 12px;
}
.cityItem.active .count {
background: rgba(255,255,255,0.2);
}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
.videoCardGroup .videoCard{
width: calc((100% - 72px) / 4);
}
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
.videoCardGroup .videoCard{
width: calc((100% - 48px) / 3);
}
.countryMenu{
padding:10px 0;
}
.countryMenu{
gap:8px 7px;
}
.countryItem{
padding:7px 7px 7px 11px;
font-size: 13px;
}
.cityMenu {
gap: 8px;
margin-bottom: 10px;
padding: 10px 0;
}
.cityItem {
padding: 6px 12px;
font-size: 13px;
}
}
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 600px) {
.videoCardGroup{
gap: 16px;
}
.videoCardGroup .videoCard{
width: calc((100% - 16px) / 2);
}
.videoCard .location .t1{
font-size: 12px;
}
.videoCard .subject{
font-size: 13px;
padding:7px 11px 0;
}
.videoCard .location{
padding:12px 11px 0;
font-size: 11px;
}
.continentMenu {
gap: 8px 6px;
margin-bottom: 12px;
padding: 0;
background: none;
border-radius: 0;
}
.continentItem,
.countryItem,
.cityItem{
font-size: 13px;
padding:8px 13px;
}
.continentItem .count,
.countryItem .count,
.cityItem .count{
font-size:11px;
}
.countryMenu{
border-top:1px dashed #d0d0d0;
padding:12px 0 0 !important;
margin-bottom:12px;
}
.cityMenu{
border-top:1px dashed #d0d0d0;
padding:12px 0 0 !important;
}
}
/*#######################################*/
@media screen and (max-width: 500px) {
.countryMenu{
padding:0;
background: none;
border-radius: 0;
}
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 350px) {
.videoCardGroup .videoCard{
width: 100%;
}
}
/*반응형 350px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/detail.css ===== */
.videoDetail .location{
display: flex;
margin:10px 0 0;
gap:0 14px;
font-size: 15px;
font-weight: 400;
color:#777;
line-height: 30px;
background: url(../images/map-16x20r.svg) left 5px no-repeat;
background-size: 16px 20px;
padding:0 0 0 22px;
}
.videoDetail .location .t1{
font-size: 15px;
font-weight: 500;
color:#888;
line-height: 30px;
position: relative;
}
.videoDetail .location .t1 + .t1:before{
content: "";
position: absolute;
width: 3px;
height: 3px;
background: #888;
border-radius: 50%;
left: -8px;
top: 14px;
z-index: 5;
}
/* 상세 헤더: 제목 영역 + 액션 버튼(공유/즐겨찾기) */
.videoDetail .videoHeaderRow{
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
/* min-width:0 이 없으면 긴 제목이 버튼을 화면 밖으로 밀어낸다 */
.videoDetail .videoHeaderText{
min-width: 0;
flex: 1 1 auto;
}
.videoDetail .videoHeaderActions{
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.videoDetail .subject{
position: relative !important;
display: block;
width: 100% !important;
height: auto !important;
margin:7px 0 0;
text-align: left;
font-size: 17px;
font-weight: 700;
color:#222 !important;
line-height: 23px;
text-indent: 0 !important;
}
.videoDetail .videoWrap{
display: block;
width: 100%;
margin:30px 0 0;
}
.videoDetail .videoWrap iframe{
border-radius: 12px;
}
.videoDetail .txt{
display: block;
width: 100%;
margin:30px 0 0;
font-size: 14px;
line-height: 23px;
text-align: left;
color:#333;
white-space: pre-line;
padding:20px;
border-radius: 12px;
background: rgba(0,0,0,0.05);
}
.videoContent{
display: block;
width: 100%;
padding:10px 0 0;
}
.bottomButton{
display: flex;
width: 100%;
margin:40px 0 0;
justify-content: center;
gap:10px;
}
.bottomButton .gotoList{
display: block;
height: 48px;
line-height: 46px;
text-align: center;
font-size: 15px;
color:var(--main) !important;
font-weight: 600;
background: #fff;
border-radius: 6px;
padding:0 17px;
border:1px solid var(--main)
}
.bottomButton .gotoRandom{
display: block;
height: 48px;
line-height: 48px;
text-align: center;
font-size: 15px;
color:#fff !important;
font-weight: 600;
background: var(--main);
border-radius: 6px;
padding:0 15px;
}
/* 데스크톱에서는 기존처럼 List / Next Random 두 개만 노출한다.
(공유·즐겨찾기는 상세 헤더에 이미 있으므로 중복 제거) */
.detailActionBar .actionBarBtn{
display: none;
}
/* 아이콘은 텍스트 좌측에 나란히 배치 */
.bottomButton.detailActionBar .gotoList,
.bottomButton.detailActionBar .gotoRandom{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1;
}
.detailActionBar .actionIcon{
display: inline-flex;
align-items: center;
justify-content: center;
}
.detailActionBar .actionIcon svg{
width: 18px;
height: 18px;
stroke: currentColor;
}
.channel{
display: block;
width: 100%;
margin:12px 0 0;
text-align: left;
font-size: 14px;
line-height: 23px;
color:#222;
text-align: left;
font-weight: 600;
}
.originalTitle{
display: block;
width: 100%;
margin:5px 0 0;
text-align: left;
font-size: 14px;
line-height: 23px;
color:#222;
text-align: left;
}
.videoLink{
display: block;
width: 100%;
margin:5px 0 0;
text-align: left;
font-size: 14px;
line-height: 23px;
color:#222;
text-align: left;
}
.since{
display: block;
width: 100%;
margin:5px 0 0;
text-align: left;
font-size: 14px;
line-height: 23px;
color:#222;
text-align: left;
}
.articleTags{
display: flex;
flex-wrap: wrap;
gap:14px;
width: 100%;
margin:30px 0 0;
}
.articleTags .tag{
font-size: 14px;
font-weight: 500;
color:var(--main) !important;
line-height: 26px;
text-align: left;
}
.mapWrap{
display: block;
width: 100%;
margin:40px 0;
}
.mapWrap iframe{
border-radius: 12px;
}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
.videoWrap iframe{
height:500px !important;
}
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
} /*반응형 1000px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
.videoWrap iframe{
height:300px !important;
}
/* ---- 상세 하단 고정 액션바 (List / Next Random / Copy Link / Favorite) ---- */
/* 헤더의 공유·즐겨찾기는 하단 바와 중복되므로 숨긴다 */
.videoDetail .videoHeaderActions{
display: none;
}
.detailActionBar{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
width: 100%;
margin: 0;
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
gap: 0;
align-items: stretch;
background: #fff;
border-top: 1px solid #e6e8eb;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
}
/* 4개 버튼을 동일 폭·동일 스타일로 통일한다.
(.bottomButton .gotoList 등 데스크톱 규칙보다 우선하도록 선택자를 더 구체적으로) */
.bottomButton.detailActionBar > a,
.bottomButton.detailActionBar > button{
display: flex;
flex: 1 1 0;
width: auto;
min-width: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
height: auto;
min-height: 52px;
padding: 6px 2px;
border: 0;
border-radius: 8px;
background: transparent;
line-height: 1.2;
font-size: 11px;
font-weight: 600;
color: #5b6270 !important;
cursor: pointer;
}
.detailActionBar .actionIcon{
display: flex;
align-items: center;
justify-content: center;
}
.detailActionBar .actionIcon svg{
width: 21px;
height: 21px;
stroke: currentColor;
}
.detailActionBar .actionBarBtn{
display: flex;
}
.detailActionBar .actionLabel{
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
}
/* 모바일 바에서는 네 버튼 모두 동일한 색으로 통일 */
.bottomButton.detailActionBar .gotoRandom{
color: #5b6270 !important;
}
/* 좁은 폭에서는 "Next Random" 대신 "Random"만 표시 */
.bottomButton.detailActionBar .labelLong{
display: none;
}
/* 하트는 기본 외곽선, 활성 시 채움 */
.detailActionBar .actionBarFav .actionIcon svg{
fill: none;
stroke: currentColor;
stroke-width: 2px;
}
.bottomButton.detailActionBar .actionBarFav.active{
color: var(--main) !important;
}
.detailActionBar .actionBarFav.active .actionIcon svg{
fill: var(--main);
stroke: var(--main);
}
/* 복사 완료 상태 */
.bottomButton.detailActionBar .btnShareDetail.copied{
color: #16a34a !important;
background: transparent;
border: 0;
}
/* 툴팁은 좁은 화면에서 잘리지 않도록 버튼 기준 가운데 정렬 */
.detailActionBar .btnShareDetail::after{
left: 50%;
right: auto;
transform: translateX(-50%) translateY(4px);
}
.detailActionBar .btnShareDetail.copied::after{
transform: translateX(-50%) translateY(0);
}
/* 고정 바가 콘텐츠·푸터를 가리지 않도록 여백 확보.
(default.css의 .allWrap / #goto_top 규칙이 뒤에 오므로 선택자를 더 구체적으로 둔다) */
.allWrap.videoDetailPage{
padding-bottom: calc(90px + env(safe-area-inset-bottom));
}
body:has(.videoDetailPage) footer{
padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
/* 맨위로 버튼이 고정 바에 겹치지 않게 위로 올린다 */
body:has(.videoDetailPage) #goto_top{
bottom: calc(78px + env(safe-area-inset-bottom));
}
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 600px) {
/* 버튼 2개가 제목을 좁히지 않도록 크기와 간격을 줄인다 */
.videoDetail .videoHeaderRow{
gap: 10px;
}
.videoDetail .videoHeaderActions{
gap: 6px;
}
.videoDetail .videoHeaderActions .btnFavDetail,
.videoDetail .videoHeaderActions .btnShareDetail{
width: 40px;
height: 40px;
border-radius: 9px;
}
.videoDetail .videoHeaderActions .btnFavDetail svg,
.videoDetail .videoHeaderActions .btnShareDetail svg{
width: 20px;
height: 20px;
}
} /*반응형 600px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
.videoDetail .location{
font-size: 13px;
}
.videoLink{
font-size: 12px;
line-height: 21px;
}
.since{
font-size: 12px;
line-height: 21px;
}
.videoDetail .txt{
position: relative;
margin:20px 0 0;
font-size: 13px;
line-height: 22px;
border:none;
}
.mapWrap{
margin:20px 0 0;
}
/* .videoDetail .txt:before{
width: 30px;
height:3px;
background: var(--main);
left:0;
top:10px;
position: absolute;
z-index: 5;
content: "";
} */
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
/* 최소 폭에서도 두 버튼이 제목을 가리지 않도록 한 단계 더 축소 */
.videoDetail .videoHeaderActions .btnFavDetail,
.videoDetail .videoHeaderActions .btnShareDetail{
width: 36px;
height: 36px;
border-radius: 8px;
}
.videoDetail .videoHeaderActions .btnFavDetail svg,
.videoDetail .videoHeaderActions .btnShareDetail svg{
width: 18px;
height: 18px;
}
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/animation.css ===== */
/*animation : start*/
.fadeUpFix{
opacity: 1;
animation-name: fadeUp;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-duration: 0.8s;
animation-fill-mode: forwards;
}
.fadeUpFix2{
opacity: 1;
animation-name: fadeUp2;
animation-duration: 0.7s;
animation-fill-mode: forwards;
}
.fadeUp{
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transform:translate(0,70px);
}
.fadeUp.play{
opacity: 1;
transform:translate(0,0);
transition: opacity 0.8s, transform 0.8s;
}
@keyframes fadeUp{
0%{
opacity: 0;
transform:translate(0,70px);
}
100%{
opacity: 1;
transform:translate(0,0);
}
}
@keyframes fadeUp2{
0%{
opacity: 0;
margin:70px 0 0;
}
100%{
opacity: 1;
margin:0;
}
}
/*animation : end*/
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
footer .col1{width: 170px}
footer .col2{
width: 100%;
border:none;
margin:0;
padding:0;
margin:30px 0 0;
}
} /*반응형 1000px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 600px) {
footer .col2 .ftTxt1{font-size: 14px}
} /*반응형 600px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
footer .col2 .ftTxt3{
font-size: 13px;
}
footer .col2 .ftTxt5{
font-size: 13px;
}
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
footer .col2 .ftTxt1{line-height: 23px}
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
footer .col2 .ftTxt3{
font-size: 12px;
}
footer .col2 .ftTxt5{
font-size: 12px;
}
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/paging.css ===== */
/*paging : start*/
.paging{
display: flex;
flex-wrap:wrap;
width: 100%;
justify-content: center;
margin:60px 0 0;
column-gap:8px;
row-gap:8px;
}
.paging .buttonPage{
display: block;
width: 37px;
height: 37px;
text-align: center;
line-height: 37px;
color: #555 !important;
background: #f5f5f5;
font-size: 15px;
font-weight: 400;
border-radius: 5px;
}
.paging .buttonPage.active{
color:#fff !important;
background: var(--main);
}
.paging .buttonPage.active:hover{
opacity: 0.9;
}
.paging .buttonPage.pagePrev{
background: #f5f5f5 url(../images/arrow-left3.png) center no-repeat;
background-size: 4px 7px;
font-size: 0;
}
.paging .buttonPage.pageNext{
background: #f5f5f5 url(../images/arrow-right3.png) center no-repeat;
background-size: 4px 7px;
font-size: 0;
}
/*.paging .buttonPage.pageFirst{
background: url(../images/pb2.svg) center no-repeat;
background-size: 8px 8px;
}
.paging .buttonPage.pageLast{
background: url(../images/pb1.svg) center no-repeat;
background-size: 8px 8px;
}*/
.paging .buttonPage.pagePrev:hover{
background: #fafafa url(../images/arrow-left3.png) center no-repeat;
background-size: 4px 7px;
}
.paging .buttonPage.pageNext:hover{
background: #fafafa url(../images/arrow-right3.png) center no-repeat;
background-size: 4px 7px;
}
/*.paging .buttonPage.pageFirst:hover{
background: #2a2a2a url(../images/pb2.svg) center no-repeat;
background-size: 8px 8px;
opacity: 0.6;
}
.paging .buttonPage.pageLast:hover{
background: #2a2a2a url(../images/pb1.svg) center no-repeat;
background-size: 8px 8px;
opacity: 0.6;
}*/
.paging .buttonPage.disabled{opacity: 0.5 !important}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
} /*반응형 1000px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 600px) {
.paging{
margin: 50px 0 0;
}
} /*반응형 600px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/error.css ===== */
.errorWrap{
display: block;
width: 100%;
text-align: center;
padding:100px 20px 200px;
}
.errorWrap .h1{
display: block;
font-size: 60px;
font-weight: 700;
color:#222;
line-height: 1.4;
}
.errorWrap .h2{
font-size: 20px;
font-weight: 500;
line-height: 1.4;
margin:10px auto 0;
color:#222;
word-break: keep-all;
}
.errorWrap .errorDetail{
font-size: 15px;
font-weight: 400;
color:#222;
line-height: 1.5;
margin:10px auto 0;
word-break: keep-all;
}
.errorWrap .gotoList{
width: 130px;
}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
} /*반응형 1000px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 600px) {
} /*반응형 600px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/news.css ===== */
.titleTxt1{
display: block;
width: 100%;
text-align: center;
font-size: 28px;
font-weight: 800;
color:#222;
line-height: 1.3;
padding:50px 0 40px;
}
.newsCardGroup {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 10px 0 200px;
justify-content: center;
}
.newsCardGroup .newsCard {
display: flex;
flex-wrap: wrap;
gap: 20px 40px;
width: calc((100% - 48px) / 3);
padding: 20px 20px 24px;
transition: all 0.3s ease;
background: #fff;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 12px;
}
.newsCard:hover {
/* transform: translateY(-4px); */
}
.newsCard .img1{
display: block;
width: 100%;
}
.newsCard .imgWrap {
display: block;
width: 100%;
line-height: 0;
position: relative;
overflow: hidden;
padding:0 0 66%;
border-radius: 10px;
}
.newsCard .imgWrap > img {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
object-fit: cover;
transition: transform 0.3s ease;
}
.newsCard:hover .imgWrap > img {
transform: scale(1.05);
}
.newsCard .txtWrap{
display: block;
width: 100%;
}
.newsCard .date {
display: block;
width: 100%;
font-size: 12px;
font-weight: 400;
color: #777;
line-height: 1.4;
letter-spacing: 0.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.newsCard .subject {
display: block;
width: 100%;
text-align: left;
font-size: 15px;
font-weight: 600;
color: #222 !important;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
margin:8px 0 0;
}
.newsCard .description {
display: block;
width: 100%;
text-align: left;
font-size: 13px;
color: #555;
line-height: 20px;
height: 40px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
margin: 8px 0 0;
}
/* Responsive Design */
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 350px) {
}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
.newsCardGroup .newsCard {
width: calc((100% - 24px) / 2);
}
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
.newsCardGroup .newsCard {
padding:16px 16px 25px;
}
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
.newsCardGroup .newsCard {
width:100%;
}
.titleTxt1{
padding:20px 0 10px;
font-size: 25px;;
}
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/articleDetail.css ===== */
.articleDetail{
display: block;
width:100%;
max-width: 800px;
margin:0 auto;
padding:20px 0 150px;
position: relative;
}
/* .articleTags > .tag.tag1{
background: var(--main);
color:#fff !important;
border:1px solid var(--main);
}
.articleTags > .tag.tag2{
background: #222;
color:#fff !important;
border:1px solid #222;
} */
.articleTitle{
font-size:28px !important;
line-height: 1.4;
color:#111 !important;
font-weight: 600;
text-align: left;
position: relative;
width: 100%;
height: auto;
text-indent: 0;
}
.articleInfo{
display: block;
width: 100%;
padding:10px 0 20px;
border-bottom:var(--border);
}
.articleInfo:after{content: ""; display: block; clear: both;}
.articleInfo > .company{
display: block;
float: left;
text-align: left;
font-size:14px;
font-weight: 600;
color:#111;
line-height: 26px;
position: relative;
}
.articleInfo > .name{
display: block;
float: left;
text-align: left;
font-size:14px;
font-weight: 600;
color:#333;
line-height: 26px;
position: relative;
}
/*.articleInfo > .name:before{
position: absolute;
content: "";
width: 1px;
height: 11px;
left:-10px;
top:9px;
z-index: 10;
background: #d0d0d0;
}*/
.articleInfo > .dateTime{
display: block;
float: left;
text-align: left;
font-size:14px;
font-weight: 500;
color:#333;
line-height: 26px;
margin:0 0 0 20px;
position: relative;
}
.articleInfo > .dateTime:before{
position: absolute;
content: "";
width: 1px;
height: 11px;
left:-10px;
top:9px;
z-index: 10;
background: #d0d0d0;
}
.articleHeadline{
display: block;
width: 100%;
width: 100%;
border-left: 3px solid #111;
padding: 4px 0px 4px 15px;
margin: 40px 0 0;
}
.articleHeadline .headline{
display: block;
color: #333333;
font-size: 17px;
font-weight: 500;
text-align: left;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.articleHeadline .headline + .headline{margin:8px 0 0}
.articleImgWrap{
display: block;
width: 100%;
/*max-width: 700px;*/
line-height: 0;
margin:30px auto 0;
}
.articleImgWrap .aImg{
display: block;
width: 100%;
border-radius: 12px;
}
.txtForImg{
font-size: 14px;
text-align: left;
line-height: 19px;
color: #888;
font-weight: 400;
padding: 12px 0px 24px;
/* border-bottom: 1px solid #e0e0e0; */
}
.articleTxt{
display: block;
width: 100%;
margin: 30px 0 20px;
color: #222;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
text-align: left;
white-space: pre-line;
}
.articleDetail .gotoList{
width:140px;
}
/*#######################################*/
@media screen and (max-width: 1600px) {
} /*반응형 1600px 끝*/
/*#######################################*/
@media screen and (max-width: 1500px) {
} /*반응형 1500px 끝*/
/*#######################################*/
@media screen and (max-width: 1400px) {
} /*반응형 1400px 끝*/
/*#######################################*/
@media screen and (max-width: 1300px) {
} /*반응형 1300px 끝*/
/*#######################################*/
@media screen and (max-width: 1200px) {
} /*반응형 1200px 끝*/
/*#######################################*/
@media screen and (max-width: 1100px) {
} /*반응형 1100px 끝*/
/*#######################################*/
@media screen and (max-width: 1000px) {
} /*반응형 1000px 끝*/
/*#######################################*/
@media screen and (max-width: 900px) {
} /*반응형 900px 끝*/
/*#######################################*/
@media screen and (max-width: 800px) {
} /*반응형 800px 끝*/
/*#######################################*/
@media screen and (max-width: 700px) {
} /*반응형 700px 끝*/
/*#######################################*/
@media screen and (max-width: 600px) {
} /*반응형 600px 끝*/
/*#######################################*/
@media screen and (max-width: 500px) {
.articleDetail{
padding:0 0 50px;
}
.articleTitle{
font-size: 22px !important;
}
.articleInfo > .name{
font-size: 12px;
}
.articleInfo > .dateTime{
font-size: 12px;
}
.articleImgWrap{
margin:20px auto 0;
}
.articleTxt{
margin:20px 0;
}
.articleTxt{
font-size: 14px;
}
} /*반응형 500px 끝*/
/*#######################################*/
@media screen and (max-width: 400px) {
} /*반응형 400px 끝*/
/*#######################################*/
@media screen and (max-width: 370px) {
} /*반응형 370px 끝*/
/*#######################################*/
@media screen and (max-width: 340px) {
} /*반응형 340px 끝*/
/*#######################################*/
@media screen and (max-width: 320px) {
} /*반응형 320px 끝*/
/*#######################################*/
@media screen and (max-width: 300px) {
} /*반응형 300px 끝*/
/* ===== ui/mypage.css ===== */
@charset "UTF-8";
/* MyPage / User menu / profile / password / alerts - ported from templates.css for the main-site (default.css) layout */
:root{
--main: #e60413;
--bg1:#f7f8fa;
--bg2:linear-gradient(180deg, #f6f9ff 0, #fff 300px);
--tableLabel: #f3f8ff;
--tableLabelTxt: #444;
--skyblue: #61c9ff;
--green2: #10972a;
--sub2: #ffcf67;
--border1:#e9ecef;
}
.passwordFieldWrap {
position: relative;
}
.passwordFieldWrap .mypageInput {
padding-right: 56px;
}
.passwordVisibilityToggle {
--password-visibility-icon: url("/assets/images/eye1.svg");
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: #77859a;
cursor: pointer;
}
.passwordVisibilityToggle:hover {
color: #1d4ed8;
background: #f8fbff;
}
.passwordVisibilityToggle:focus-visible {
outline: 2px solid #e60413;
outline-offset: 1px;
}
.passwordVisibilityToggle[aria-pressed="true"] {
--password-visibility-icon: url("/assets/images/eye2.svg");
}
.passwordVisibilityToggle::before {
content: "";
width: 19px;
height: 19px;
background-color: currentColor;
-webkit-mask: var(--password-visibility-icon) center / contain no-repeat;
mask: var(--password-visibility-icon) center / contain no-repeat;
}
.userMenu {
position: relative;
display: inline-block;
}
.userMenuBtn {
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
position: relative;
background: #fff;
cursor: pointer;
padding: 0;
display: block;
overflow: hidden;
/*transition: border-color 0.2s;*/
}
.userMenuBtn img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: none !important;
transform: none;
}
.userMenuBtn:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
z-index: 10;
box-sizing: border-box;
left: 0;
top: 0;
border: 1px solid rgba(0, 0, 0, 0.15);
}
/* Reusable avatar ring: an overlay circle drawn ON TOP of the photo.
![]()
is a replaced element, so ::after must live on a wrapper, and an
inset box-shadow would be painted behind the image. */
.avatarRing {
position: relative;
display: inline-block;
flex: 0 0 auto;
line-height: 0;
border-radius: 50%;
}
.avatarRing::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
}
.userMenu:hover .userMenuBtn,
.userMenu.isOpen .userMenuBtn {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
/*border-color: var(--main);
transition: border-color 0.2s;*/
}
.userMenuDropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 150px;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 30;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
padding: 8px 10px;
}
.userMenu::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 10px;
display: none;
}
.userMenu:hover::after,
.userMenu.isOpen::after {
display: block;
}
.userMenu:hover .userMenuDropdown,
.userMenu.isOpen .userMenuDropdown,
.userMenuDropdown:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.userMenuDropdown .customSelectOption {
text-decoration: none;
}
.userMenu:focus-within .userMenuBtn {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.userMenuDropdown {
top: calc(100% + 10px);
width: 280px;
min-width: 0;
padding: 20px 0 10px;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
box-sizing: border-box;
transition:
opacity 0.16s ease,
transform 0.16s ease,
visibility 0.16s ease;
}
.userMenu::after {
left: auto;
right: 0;
width: 280px;
}
.userMenu:focus-within::after {
display: block;
}
.userMenu:focus-within .userMenuDropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.userMenuProfile {
display: flex;
align-items: center;
gap: 12px;
padding: 0 22px 16px;
}
.userMenuProfileImage {
width: 46px;
height: 46px;
flex: 0 0 auto;
border: 0;
border-radius: 50%;
object-fit: cover;
filter: none !important;
transform: none !important;
}
.userMenuProfileInfo {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.userMenuProfileInfo strong,
.userMenuProfileInfo span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.userMenuProfileInfo strong {
color: #1f2937;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.userMenuProfileInfo span {
color: #6b7280;
font-size: 13px;
line-height: 1.3;
}
.userMenuShortcuts {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 22px 18px;
border-bottom: 1px solid #eef0f3;
}
.userMenuShortcut {
display: flex;
align-items: center;
justify-content: center;
height: 38px;
border: 1px solid #d8dee8;
border-radius: 8px;
box-sizing: border-box;
color: #374151;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition:
border-color 0.15s ease,
background 0.15s ease,
color 0.15s ease;
}
.userMenuShortcut:hover {
border-color: #aeb8c6;
background: #f8fafc;
color: #111827;
}
.userMenuShortcutPrimary {
border-color: #9ee5d7;
background: #f3fffc;
color: #087f68;
}
.userMenuShortcutPrimary:hover {
border-color: #55cdb6;
background: #ecfcf8;
color: #066b58;
}
.userMenuLinks {
display: flex;
flex-direction: column;
padding: 8px 0;
}
.userMenuLinks a {
display: flex;
align-items: center;
min-height: 38px;
padding: 0 22px;
box-sizing: border-box;
color: #374151;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
transition:
background 0.15s ease,
color 0.15s ease;
}
.userMenuLinks a:hover {
background: #f5f7fa;
color: var(--main);
}
.userMenuLinks .userMenuLogout {
color: #4b5563;
}
/* 로그아웃은 상태 변경이라 POST 폼으로 처리한다.
버튼이지만 기존 메뉴 링크와 동일하게 보이도록 맞춘다. */
.userMenuLinks .logoutForm {
display: block;
margin: 0;
padding: 0;
}
.userMenuLinks .logoutForm .userMenuLogout {
display: flex;
align-items: center;
width: 100%;
min-height: 38px;
padding: 0 22px;
border: 0;
box-sizing: border-box;
background: transparent;
color: #4b5563;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-align: left;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
.userMenuLinks .logoutForm .userMenuLogout:hover {
background: #f5f7fa;
color: var(--main);
}
.alert {
padding: 12px 14px;
margin-bottom: 18px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
}
.alert ul {
margin: 0;
padding-left: 18px;
}
.alertSuccess {
background: #eaf7ee;
border: 1px solid #bfe5cb;
color: #1e7a35;
}
.alertError {
background: #fdeeee;
border: 1px solid #f3c6c6;
color: #c0392b;
}
.mypagePage {
min-height: 640px;
background: var(--bg1);
padding: 90px 0 150px;
}
.mypageContainer {
width: 100%;
max-width: 1580px !important;
}
.mypageLayout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 44px;
align-items: start;
}
.mypageSidebar {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 14px;
box-sizing: border-box;
}
.mypageSidebarPanel {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
box-sizing: border-box;
}
.mypageProfileCard {
display: flex;
align-items: center;
gap: 12px;
padding: 28px 18px;
border: 0;
border-bottom: 1px solid #e9ecef;
border-radius: 0;
background: transparent;
box-sizing: border-box;
}
.mypageProfileImage {
width: 48px;
height: 48px;
flex: 0 0 auto;
border: 0;
border-radius: 50%;
object-fit: cover;
filter: none !important;
transform: none !important;
}
.mypageProfileInfo {
display: flex;
flex-direction: column;
min-width: 0;
gap: 4px;
}
.mypageProfileInfo strong,
.mypageProfileInfo span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mypageProfileInfo strong {
color: #1f2937;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
.mypageProfileInfo span {
color: #6b7280;
font-size: 12px;
line-height: 1.35;
}
.mypageNav {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px;
border: 0;
border-radius: 0;
background: transparent;
box-sizing: border-box;
}
.mypageNavItem {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 8px;
color: #4b5563;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition:
background 0.15s ease,
color 0.15s ease;
}
.mypageNavItem:hover {
background: #f3f4f6;
color: #111827;
}
.mypageNavItem.active {
background: #fff8f8;
color: var(--main);
font-weight: 700;
}
.mypageMain {
min-width: 0;
}
.mypageSectionHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 106px;
padding: 12px 30px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
margin-bottom: 24px;
box-sizing: border-box;
}
.mypageSectionTitle {
margin: 0;
color: #111827;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.025em;
}
.mypageSectionTitleRow {
display: flex;
align-items: center;
gap: 8px;
}
.mypageSectionDesc {
margin: 7px 0 0;
color: #6b7280;
font-size: 14px;
line-height: 1.4;
}
.mypageCount {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 48px;
height: 30px;
padding: 0 10px;
border-radius: 999px;
background: #eaf3ff;
color: var(--main);
font-size: 13px;
font-weight: 700;
box-sizing: border-box;
}
.mypageFavoriteActions {
display: flex;
align-items: center;
gap: 10px;
}
.mypageSortForm {
display: flex;
align-items: center;
gap: 7px;
}
.mypageSortForm label {
color: #64748b;
font-size: 13px;
font-weight: 600;
}
.mypageSortSelect {
height: 32px;
padding: 0 28px 0 10px;
border: 1px solid #d5dce6;
border-radius: 7px;
background-color: #fff;
color: #334155;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.mypageSortSelect:focus {
border-color: var(--main);
outline: 0;
box-shadow: 0 0 0 3px rgba(20, 122, 240, 0.12);
}
.mypageContestListHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 16px;
}
.mypageContestTotal {
margin: 0;
color: #1f2937;
font-size: 16px;
font-weight: 700;
}
.mypageContestTotal span {
color: var(--main);
}
.mypageContestListControls {
display: flex;
align-items: center;
gap: 12px;
}
.mypageContestListControls .mypageSortSelect {
min-width: 130px;
}
.mypagePanel {
padding: 30px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
box-sizing: border-box;
}
.mypagePanel form {
max-width: 640px;
}
.mypageFormGroup {
margin-bottom: 36px;
}
.mypageLabel {
display: block;
margin-bottom: 9px;
color: #222;
font-size: 14px;
font-weight: 700;
}
input.mypageInput,
.mypageTextarea {
display: block;
width: 100%;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #fff;
color: #222;
font: inherit;
font-size: 15px;
outline: none;
box-sizing: border-box;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
input.mypageInput {
height: 48px;
padding: 0 14px;
}
.mypageTextarea {
min-height: 140px;
padding: 13px 14px;
line-height: 1.65;
resize: vertical;
}
.mypageInput:focus,
.mypageTextarea:focus {
border-color: var(--main);
box-shadow: 0 0 0 3px rgba(20, 122, 240, 0.1);
}
.mypageInput::placeholder,
.mypageTextarea::placeholder {
color: #9ca3af;
}
.mypageInput:disabled,
.mypageInput[aria-disabled="true"] {
border-color: #e5e7eb;
background: #f3f4f6;
color: #6b7280;
cursor: not-allowed;
}
.mypageHelp {
margin: 8px 2px 0;
color: #6b7280;
font-size: 13px;
line-height: 1.55;
}
.marketingConsentOptions {
display: flex;
gap: 10px;
}
.marketingConsentOption {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #374151;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.marketingConsentOption:has(input:checked) {
border-color: var(--main);
background: #fff5f5;
color: var(--main);
}
.marketingConsentOption input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--main);
}
.mypageButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 156px;
height: 46px;
padding: 0 20px;
border: 1px solid var(--main);
border-radius: 8px;
background: var(--main);
color: #fff !important;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.mypageButton:hover {
border-color: #c30310;
background: #c30310;
}
.mypageButton:disabled {
border-color: #cbd5e1;
background: #cbd5e1;
cursor: not-allowed;
}
.mypageButtonOutline {
border-color: #bfdbfe;
background: #fff;
color: var(--main) !important;
}
.mypageButtonOutline:hover {
border-color: var(--main);
background: #fff5f5;
}
.mypageButtonDanger {
border-color: #d92d20;
background: #d92d20;
}
.mypageButtonDanger:hover {
border-color: #b42318;
background: #b42318;
}
.profileImageDropzone {
display: flex;
align-items: center;
gap: 24px;
min-height: 148px;
padding: 22px 24px;
border: 1px dashed #b8c4d4;
border-radius: 12px;
background: #f8fafc;
cursor: pointer;
box-sizing: border-box;
transition:
border-color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.profileImageDropzone:hover,
.profileImageDropzone.active {
border-color: var(--main);
background: #f1f7ff;
}
.profileImageDropzone:focus-visible {
border-color: var(--main);
box-shadow: 0 0 0 3px rgba(20, 122, 240, 0.12);
outline: none;
}
.profileImagePreview {
display: block;
flex: 0 0 104px;
width: 104px;
height: 104px;
border: 0;
border-radius: 50%;
background: #fff;
object-fit: cover;
filter: none !important;
box-sizing: border-box;
}
.profileImageDropzoneText {
display: flex;
min-width: 0;
flex-direction: column;
gap: 7px;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.profileImageDropzoneText strong {
color: #1f2937;
font-size: 15px;
font-weight: 700;
}
.profileImageActions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.profileImageActionButton {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 15px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #334155;
font-size: 13px;
font-weight: 650;
cursor: pointer;
box-sizing: border-box;
}
.profileImageActionButton[hidden] {
display: none;
}
.profileImageActionButton:hover {
border-color: #94a3b8;
background: #f8fafc;
}
.profileImageResetButton {
color: #b42318;
}
.profileImageStatusError {
color: #b42318;
}
body.profileCropOpen {
overflow: hidden;
}
.profileCropModal {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.68);
box-sizing: border-box;
}
.profileCropModal[hidden] {
display: none;
}
.profileCropDialog {
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
padding: 26px;
border-radius: 16px;
background: #fff;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
overflow-y: auto;
box-sizing: border-box;
}
.profileCropHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.profileCropHeader h3 {
margin: 0;
color: #111827;
font-size: 20px;
font-weight: 800;
line-height: 1.4;
}
.profileCropHeader p {
margin: 5px 0 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.profileCropClose {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 8px;
background: #f1f5f9;
color: #475569;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.profileCropStage {
position: relative;
width: min(420px, 100%);
aspect-ratio: 1 / 1;
margin: 0 auto;
border-radius: 12px;
background: #0f172a;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
cursor: grab;
overflow: hidden;
touch-action: none;
}
.profileCropStage.active {
cursor: grabbing;
}
.profileCropStage img {
position: absolute;
top: 0;
left: 0;
display: block;
max-width: none;
max-height: none;
object-fit: fill;
filter: none !important;
transform-origin: 0 0;
z-index: 1;
user-select: none;
pointer-events: none;
}
.profileCropGrid {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 200px;
height: 200px;
border: 0;
background-image:
linear-gradient(
to right,
transparent 33.1%,
rgba(255, 255, 255, 0.45) 33.3%,
transparent 33.6%,
transparent 66.4%,
rgba(255, 255, 255, 0.45) 66.7%,
transparent 66.9%
),
linear-gradient(
to bottom,
transparent 33.1%,
rgba(255, 255, 255, 0.45) 33.3%,
transparent 33.6%,
transparent 66.4%,
rgba(255, 255, 255, 0.45) 66.7%,
transparent 66.9%
);
box-shadow:
inset 0 0 0 2px #fff,
0 0 0 9999px rgba(2, 6, 23, 0.68),
0 0 0 1px rgba(15, 23, 42, 0.35);
box-sizing: border-box;
transform: translate(-50%, -50%);
pointer-events: none;
}
.profileCropGrid::after {
position: absolute;
right: 6px;
bottom: 6px;
content: "200 × 200";
padding: 3px 6px;
border-radius: 4px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
.profileCropControls {
display: grid;
grid-template-columns: auto 36px minmax(0, 1fr) 36px 48px;
align-items: center;
gap: 8px;
margin-top: 20px;
}
.profileCropControlLabel {
color: #334155;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.profileCropControls input {
width: 100%;
margin: 0;
accent-color: var(--main);
}
.profileCropZoomButton {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #334155;
font-size: 20px;
font-weight: 500;
line-height: 1;
cursor: pointer;
}
.profileCropZoomButton:hover:not(:disabled) {
border-color: var(--main);
color: var(--main);
}
.profileCropZoomButton:disabled {
background: #f1f5f9;
color: #a8b2c1;
cursor: not-allowed;
}
.profileCropControls output {
min-width: 48px;
color: #334155;
font-size: 12px;
font-variant-numeric: tabular-nums;
font-weight: 700;
text-align: right;
}
.profileCropSize {
margin: 10px 0 0;
color: #64748b;
font-size: 12px;
line-height: 1.5;
text-align: right;
}
.profileCropButtons {
display: flex;
justify-content: flex-end;
gap: 9px;
margin-top: 22px;
}
.profileCropButtons .profileImageActionButton {
height: 46px;
padding: 0 20px;
font-size: 14px;
}
.profileCropButtons .mypageButton {
min-width: 120px;
}
.mypageDangerPanel {
border-color: #f4c7c3;
background: #fffafa;
}
.mypageDangerTitle {
margin: 0 0 10px;
color: #b42318;
font-size: 18px;
font-weight: 750;
line-height: 1.5;
}
.mypageWithdrawalGuide {
max-width: 680px;
margin: 30px 0 ;
color: #6b3b37;
font-size: 14px;
line-height: 1.8;
}
.mypageWithdrawalGuide li {
display: block;
position: relative;
font-size: 15px;
line-height: 22px;
padding:0 0 0 11px;
}
.mypageWithdrawalGuide li + li {
margin:10px 0 0;
}
.mypageWithdrawalGuide li:before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: #777;
left: 0;
top:9px;
z-index: 6;
position: absolute;
}
.mypageWithdrawalActions {
display: flex;
gap: 10px;
}
.mypageEmpty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 40px 24px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
text-align: center;
box-sizing: border-box;
}
.mypageEmpty strong {
color: #374151;
font-size: 17px;
}
.mypageEmpty p {
margin: 9px 0 22px;
color: #6b7280;
font-size: 14px;
line-height: 1.6;
}
@media screen and (max-width: 900px){
.mypageSectionHeader {
background: none;
border-radius: 0;
border:none;
padding:24px 0 20px;
min-height: 0;
margin-bottom:0 !important;
}
.mypageContainer {
padding: 38px 20px 0;
}
/* 어카운트 세팅류: 중메뉴(탭바)를 헤더에 바로 붙인다.
.allWrap(≤1000, 79px)가 import 순서상 우선하므로 헤더 높이(59px)에 맞춰
더 높은 우선순위로 상단 패딩을 덮어써 회색 간격을 없앤다. */
.mypagePage:has(.mypageSidebarAccount) {
padding-top: 59px;
}
.mypageContainer:has(.mypageSidebarAccount) {
padding-top: 0;
}
.mypageLayout {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.mypageLayout:has(.mypageSidebarAccount) {
gap: 0;
}
.mypageSidebar {
position: static;
padding: 0;
}
.mypageSidebar:not(.mypageSidebarAccount) {
display: none;
}
.mypageSidebarPanel {
width: calc(100% + 40px);
transform: translateX(-20px);
border-radius: 0;
border-top:none;
border-right:none;
border-left:none;
}
.mypageNav {
display: grid;
padding:6px 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mypageProfileCard {
display: none;
}
.mypageSectionTitle {
font-size: 22px;
}
.mypageNavItem {
justify-content: center;
}
.mypageSidebarAccount .mypageNav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mypageSidebarAccount .mypageNavItem--favorites,
.mypageSidebarAccount .mypageNavItem--inquiries {
display: none;
}
.userMenuDropdown,
.userMenu::after {
width: min(280px, calc(100vw - 32px));
}
.mypagePage {
padding: 56px 0 72px;
}
}
@media screen and (max-width: 600px){
.userMenuDropdown,
.userMenu::after {
width: min(280px, calc(100vw - 24px));
}
.mypageSectionHeader {
align-items: stretch;
flex-direction: column;
gap: 0;
}
.mypageFavoriteActions,
.mypageSortForm,
.mypageSortSelect {
width: 100%;
}
.mypageSortSelect {
height: 40px;
}
.mypageContestListHeader {
align-items: stretch;
flex-direction: column;
gap: 12px;
}
.mypageContestListControls {
width: 100%;
}
.mypageContestListControls .mypageSortSelect {
flex: 1 1 0;
width: 0;
min-width: 0;
}
.mypageWithdrawalActions {
flex-direction: column;
}
.mypageWithdrawalActions .mypageButton {
width: 100%;
}
}
@media screen and (max-width: 600px){
.mypageContainer {
padding: 0 16px 0;
}
.mypageNav {
padding: 12px;
}
.mypageNavItem {
min-height: 42px;
padding: 0 10px;
font-size: 14px;
}
.mypageSectionTitle {
font-size: 21px;
}
.mypageFavoriteActions {
width: 100%;
justify-content: space-between;
}
.mypagePanel {
padding: 22px 18px;
}
.mypageButton {
width: 100%;
}
.profileImageDropzone {
align-items: center;
flex-direction: column;
gap: 14px;
padding: 20px 16px;
text-align: center;
}
.profileImagePreview {
flex-basis: 96px;
width: 96px;
height: 96px;
}
.profileImageActions {
flex-direction: column;
}
.profileImageActionButton {
width: 100%;
}
.profileCropModal {
padding: 12px;
}
.profileCropDialog {
max-height: calc(100vh - 24px);
padding: 20px 16px;
border-radius: 12px;
}
.profileCropHeader h3 {
font-size: 18px;
}
.profileCropControlLabel {
display: none;
}
.profileCropControls {
grid-template-columns: 36px minmax(0, 1fr) 36px 46px;
}
.profileCropSize {
text-align: left;
}
.profileCropButtons > button {
width: auto;
flex: 1 1 0;
}
}
@media screen and (max-width: 360px){
.userMenuBtn {
width: 32px;
height: 32px;
}
}
/* Fully neutralize the global "header a" rule inside the user dropdown.
default.css sets: header a { display:block; height:38px; line-height:38px;
font-size:17px; color:#222 !important; font-weight:600; letter-spacing:-.3px }
Reset every one of those on dropdown anchors so gongmonara's design is intact. */
/* default.css also styles the main nav: header nav { display:flex; float:left;
gap:0 40px; margin:0 0 0 65px } which pushed the dropdown's