@charset "utf-8";
/* CSS Document */

/* 2026 밀라노 동계올림픽 ( 모바일 버전 ) - 2026.01.30 */

/*** Common Set ***/
body {
    font-family: 'Noto Sans KR', sans-serif, 'Nanum Gothic', '맑은고딕', Malgun Gothic, '돋움', Dotum, '굴림', Gulim, Helvetica, Apple Gothic, Arial, sans-serif;
    color: #333;
    -webkit-text-size-adjust: none; /* 가로세로 전환시 폰트사이즈 고정 */
}
html {-webkit-user-select: none;}
/* div, nav, ul, dl, article {overflow: hidden;} */
ul {list-style: none;}
a, a:hover {text-decoration: none;}

/* Link Set */
a:link {color: #333; text-decoration: none;}
a:visited {color: #333; text-decoration: none;}
a:hover {color: #333; text-decoration: none;}
a:active {color: #333; text-decoration: none;}
a:focus {color: #333; text-decoration: none;}

a.f_white:link {color: #fff; text-decoration: none;}
a.f_white:visited {color: #fff; text-decoration: none;}
a.f_white:hover {color: #fff; text-decoration: none;}
a.f_white:active {color: #fff; text-decoration: none;}
a.f_white:focus {color: #fff; text-decoration: none;}

/* 타이틀 숨김 */
.blind {position: absolute; left: -9999px; width: 0; height: 0; font-size: 0; line-height: 0;}
.hide {display: none;}

/* TOP으로 이동 */
.movetop {position: fixed; right: 10px; bottom: 10px; z-index: 1;}
.movetop button {
    width: 52px; height: 52px; background: rgba(255, 255, 255, 0.5) url(../images/movetop.png) no-repeat center / auto;
    border: 1px solid #ccc; border-radius: 20px; cursor: pointer;
}
.movetop span {display: inline-block; text-indent: -9999px;}



/*** Footer ***/
footer {margin-top: 40px; padding: 20px 25px 60px 25px; background-color: #BCD4D9; color: #165178;}
footer p {padding-bottom: 12px; font-size: 1rem; font-weight: bold;}
address {font-style: normal;}
address span {display: inline-block; padding-right: 24px; font-size: 0.9rem; letter-spacing: -1px;}
address span a:link, address span a:visited, address span a:hover, address span a:active, address span a:focus {color: #165178;}
small {font-size: 0.6rem; font-family: Arial, Helvetica, sans-serif; color: #165178;}



/*** Header ***/
/* 상단이미지 (메인) */
.main .topimg {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; 
    background: #0d5b89 url(../images/main_bg.jpg) no-repeat center / cover;
}
.main h1 a {display: inline-block; width: 140px; text-indent: -9999px; background: transparent url(../images/logo_w.png) no-repeat center / 100%;}
.main .symbol {display: flex; justify-content: center; align-items: center; margin: 3% 0;}
.main .symbol p {display: inline-block; width: 40%;}

/* 상단 메달순위 (메인) */
.main header .kor_rank {display: flex; flex-direction: column; padding: 2% 0; background-image: none;}
.main header .kor_rank_tit {display: flex; justify-content: center; align-items: center; font-weight: bold;}
.main header .kor_rank_tit p:nth-child(1) img {width: 40px; height: 26px;}
.main header .kor_rank_tit p:nth-child(2) span:nth-child(1) {font-size: 1.1rem;}
.main header .kor_rank_tit p:nth-child(2) span:nth-child(2) {font-size: 1.5rem;}
.main header .kor_rank_tit p:nth-child(2) span:nth-child(3) {font-size: 1.5rem;}


/* 상단이미지 (서브) */
.sub .topimg {display: flex; flex-direction: column; padding: 0 0 4% 0; background: #0d5b89 url(../images/sub_bg.jpg) no-repeat center / cover;}
.sub .topimg_in {display: flex; justify-content: space-between; align-items: center;}
.sub .symbol {display: flex; justify-content: center; align-items: center; margin: 3% 0 3% 10px;}
.sub .symbol p {display: inline-block; width: 68px;}
.sub .topimg_right {display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px;}
.sub h1 {display: flex; justify-content: flex-end; margin-right: 10px;}
.sub h1 a {display: inline-block; width: 120px; height: 34px; text-indent: -9999px; background: transparent url(../images/logo_w.png) no-repeat center / 100%;}


/* 상단 메달순위 (서브) */
.sub header .kor_rank {flex-direction: row; padding: 0; background-image: none; margin-bottom: 0;}
.sub header .kor_rank_tit {margin-bottom: 0px; margin-right: 5px;}
.sub header .kor_rank_tit p:nth-child(1) {display: flex; align-items: center;}
.sub header .kor_rank_tit p:nth-child(1) img {width: 28px; height: 18px;}
.sub header .kor_rank_tit p:nth-child(2) span:nth-child(1) {margin-right: 0px; color: #fff; font-size: 1.2rem;}
.sub header .kor_rank_tit p:nth-child(2) span:nth-child(2) {margin-right: 0; min-width: auto; color: #fff; font-size: 1.2rem; text-align: right;}
.sub header .updatetime {display: flex; justify-content: flex-end; margin-top: 2px; font-size: 0.8rem; color: #1d495a;}
.sub header .kor_rank .medal .gold, .sub header .kor_rank .medal .silver, .sub header .kor_rank .medal .bronze {width: 44px; height: 44px;  font-size: 1.1rem;}
.sub header .kor_rank .medal .gold {background: transparent url(../images/medal/gold.png) no-repeat center / 94%;}
.sub header .kor_rank .medal .silver {background: transparent url(../images/medal/silver.png) no-repeat center / 94%;}
.sub header .kor_rank .medal .bronze {background: transparent url(../images/medal/bronze.png) no-repeat center / 94%;}


/* 행사기간 ( 메인 + 서브 공통 ) */
.date {display: flex; justify-content: center;}
.date p {display: flex; justify-content: center; align-items: center; padding: 8px 40px; background-color: rgba(255, 255, 255, 0.5); border-radius: 100px;}
.date span {display: inline-block;}
.date span:nth-child(1) {margin-right: 15px; color: #000; font-weight: bold; font-size: 0.95rem;}
.date span:nth-child(2) {color: #666; font-size: 0.85rem;}


/* 메뉴 */
.gnb {position: sticky; top: 0px; z-index: 4;}
nav {display: flex; justify-content: center; align-items: center; background-color: #1D495A;}
nav ul {display: flex; justify-content: space-between;}
nav ul li {margin: 0 2px;}
nav ul li a:link {position: relative; display: block; padding: 12px 24px; font-size: 0.95rem; color: #fff; border-bottom: 3px solid rgba(0,0,0,0);}
nav ul li a:visited, nav ul li a:hover, nav ul li a:active, nav ul li a:focus {color: #fff;}
nav ul li a:before {
    content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 3px;
    transition: width 0.1s; transition-timing-function: ease-out; transform-origin: 50%; background-color: #fff;
}
nav ul li a:hover, nav ul li a.on {border-bottom: 3px solid #fff;}
nav ul li a:hover:before, nav ul li a:active:before, .nav ul li a:focus:before, nav ul li a.on:before {width: 100%;}



/*** Layout ***/
.container {min-height: 400px; margin-bottom: 100px;}
.w_pad {margin: 0 15px;}
.inbox {margin-bottom: 30px;}
.main .inbox {padding-bottom: 30px; border-bottom: 2px dashed #ddd;}
.main .inbox:last-child {border-bottom: none;}
.main .headline {margin-bottom: 30px;}
.main .headline .newslist {padding-bottom: 30px; border-bottom: 2px dashed #ddd;}
.sub .container {margin-top: 15px;}



/*** Temp ***/
/* 콘텐츠 타이틀 */
.contit {display: flex; justify-content: space-between; align-items: center; height: 40px; margin-bottom: 10px;}
.contit h3 {font-size: 1rem; color: #666;}
.contit .more a {
    display: inline-block; padding: 4px 20px 4px 10px; font-size: 0.9rem; color: #666;
    background: transparent url(../images/arrow.png) no-repeat right 5px center; border: 1px solid #ccc; border-radius: 4px;
}
/* #wrap.sub .contit h3 {font-size: 1.2rem; color: #000;} */


/* 도트 페이징 */
.pagedot {display: flex; justify-content: center; padding: 10px 0;}
.pagedot span {width: 8px; height: 8px; margin: 0 5px; text-indent: -9999px; border-radius: 10px; background-color: #ccc;}
.pagedot span.on {background-color: #000;}


/* 양쪽 화살표 버튼 */
.pagearrow a {
    position: absolute; top: 50%; width: 40px; height: 60px; margin-top: -50px; text-indent: -9999px;
    background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 50%;
}
.pagearrow a.btn_prev {left: 0; background-image: url(../images/ico_prev.png);}
.pagearrow a.btn_next {right: 0; background-image: url(../images/ico_next.png);}


/* 더보기 */
.btn_more {display: flex; justify-content: center; margin-top: 50px;}
.btn_more a {padding: 10px 50px; font-size: 1rem; border-radius: 15px; border: 1px solid #ccc; background-color: #fff;}
.btn_more a:hover {text-decoration: none; color: #fff; border: 2px solid #132455; background-color: #333;}


/* 가로 + 세로 + 블랙 섬네일(공통) */
.thumb_v, .thumb_h, .thumb_b {position: relative;}
.thumb {position: relative; background-color: #eee;}
.thumb img {width: 100%; height: 100%; display: block; object-fit: cover;}
.subject {display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.date {font-size: 0.9rem; color: #666;}


/* 가로 섬네일 */
/* .thumblist_h {border: 4px solid red;} */
.thumb_h a {display: flex; align-items: center; padding: 10px 0;}
.thumb_h .thumb {flex-basis: 130px; margin-right: 15px; height: 84px;}
.thumb_h .txt {flex: 1;}
.thumb_h .subject {font-size: 1.1rem; -webkit-line-clamp: 3; line-height: 1.2; font-weight: bold;}
.thumb_h .date {display: inline-block; margin-top: 5px;}


/* 세로 섬네일 */
/* .thumblist_v {margin-bottom: 40px;} */
.thumb_v {margin-bottom: 20px;}
.thumb_v a {display: block;}
.thumb_v .thumb {padding-bottom: 60%;}
.thumb_v .thumb img {position: absolute; left: 0; top: 0;}
.thumb_v .subject {margin: 10px 15px; font-size: 1.2rem; font-weight: bold; letter-spacing: -1px;}
.thumb_v .date {margin: 10px 15px; text-align: right;}


/* 한줄기사(관련기사) */
.newslist {margin-top: 10px;}
.newslist li a {
    font-size: 1rem; margin: 0; padding: 0; color: #666; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.newslist li {margin-bottom: 5px; background-repeat: no-repeat; background-image: url(../images/bullet.png); padding-left: 14px; background-position: left 0 top -72px;}
.newslist li:last-child {margin-bottom: 0;}


/* 더보기 */
.btn_more {display: flex; justify-content: center; margin-top: 50px;}
.btn_more a {padding: 10px 50px; font-size: 1rem; border-radius: 15px; border: 1px solid #ccc; background-color: #fff;}
.btn_more a:hover {text-decoration: none; color: #fff; border: 2px solid #132455; background-color: #333;}



/*** 메인면 ***/
.headline .thumb_b a {display: block; overflow: hidden; background-color: #000; }
.headline .thumb_b a .thumb {display: block;}
.headline .thumb_b a .subject {
    position: absolute; left: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 80px 20px 20px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 63%,rgba(0,0,0,.8) 100%);
    color: #fff; font-size: 1.2rem; font-weight: bold; letter-spacing: -1px;
}


/* AI 뉴스 */
.ainews {display: flex; justify-content: space-around; padding: 12% 10px 0 10px; background: transparent url(../images/ainews_bg.jpg) no-repeat center top / cover;}
.ainews .thumb_v {width: 46%;}
.ainews h4 {padding: 7px 4px; font-size: 0.95rem;}
.ainews .f_blue {color: #00fcff;}
.ainews .f_purple {color: #ff39e5;}
.ainews .thumb_v .outline {padding: 8px 6px;}
.ainews .thumb_v:nth-child(1) .outline {background: transparent url(../images/outline_blue.png) no-repeat center / 100%;}
.ainews .thumb_v:nth-child(2) .outline {background: transparent url(../images/outline_purple.png) no-repeat center / 100%;}
.ainews .thumb_v .subject {margin: 5px 10px; font-size: 1.1rem;}


/* 메달순위 */
.kor_rank {
    display: flex; flex-direction: column; align-items: center; padding: 5% 0; margin-bottom: 10px;
    background: transparent url(../images/medal_bg.jpg) no-repeat center top / 100%;
}
.kor_rank_tit {display: flex; justify-content: center; align-items: center; margin-bottom: 2px; font-weight: bold;}
.kor_rank_tit p:nth-child(1) img {width: 52px; height: 32px; object-fit: cover; vertical-align: middle;}
.kor_rank_tit p:nth-child(2) {display: flex; align-items: center; margin-left: 12px;}
.kor_rank_tit p:nth-child(2) span:nth-child(1) {margin-right: 10px; color: #000; font-size: 1.3rem;}
.kor_rank_tit p:nth-child(2) span:nth-child(2) {margin-right: 2px; min-width: 30px; color: #eb3838; font-size: 1.9rem; text-align: right;}
.kor_rank_tit p:nth-child(2) span:nth-child(3) {color: #eb3838; font-size: 1.9rem;}
.updatetime {color: #346690; font-size: 0.85rem; margin-bottom: 5px;}
.updatetime span {display: inline-block;}
.updatetime span:nth-child(2) {margin: 0 5px 0 10px;}
.kor_rank .medal {display: flex; justify-content: center; align-items: center;}
.kor_rank .medal .gold, .kor_rank .medal .silver, .kor_rank .medal .bronze, .kor_rank .medal .total{
    display: flex; justify-content: center; align-items: center; width: 64px; height: 64px;  font-size: 1.2rem; font-weight: bold;
}
.kor_rank .medal .gold {background: transparent url(../images/medal/gold.png) no-repeat center / 86%;}
.kor_rank .medal .silver {background: transparent url(../images/medal/silver.png) no-repeat center / 86%;}
.kor_rank .medal .bronze {background: transparent url(../images/medal/bronze.png) no-repeat center / 86%;}
.kor_rank .medal .total {
    margin-left: 15px; color: #fff; font-size: 1.6rem; background: transparent url(../images/medal/total.png) no-repeat center / 100%;;
}
.rank_box_list {width: 100%;}
.rank_box_list th {font-weight: 400; color: #666; font-size: 0.9rem;}
.rank_box_list td {padding: 10px 0px; font-size: 0.9rem; text-align: center;}
.rank_box_list td:nth-child(1) {font-weight: bold;}
.rank_box_list td .country {display: flex; justify-content: center; align-items: center; font-weight: bold;}
.rank_box_list td .country span:nth-child(1) {margin-right: 10px;}
.rank_box_list td .country img {width: 38px;}
.rank_box_list tr:nth-child(2) td:nth-child(1), .rank_box_list tr:nth-child(3) td:nth-child(1), .rank_box_list tr:nth-child(4) td:nth-child(1) {
    color: #EB3838;
}


/* 경기일정 */
/* .schedule {margin-top: 50px;} */
.game_list > div {display: flex; align-items: center; margin-bottom: 15px;}
.game_list > div p:nth-child(1) {
    flex-basis: 80px; display: flex; justify-content: center; align-items: center; margin-right: 20px; background-color: #1D495A; border-radius: 10px;
}
.game_list > div p:nth-child(1) img {border-radius: 10px;}
.game_list > div p:nth-child(2) {flex: 1; display: flex; flex-direction: column;}
.game_list > div p:nth-child(2) span:nth-child(1) {font-size: 0.95rem; color: #1D495A; font-weight: bold;}
.game_list > div p:nth-child(2) span:nth-child(2) {
    font-size: 1.1rem; color: #000; font-weight: bold; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.game_list > div p:nth-child(2) span:nth-child(3) {font-size: 0.85rem; color: #999;}


/* 최신 포토 */
.photo {position: relative;}
.photo .thumb_b a {position: relative; display: block; background-color: #000;}
.photo .thumb_b .thumb {padding-bottom: 60%; opacity: .6;}
.photo .thumb_b .thumb img {position: absolute; left: 0; top: 0;}
.photo .thumb_b .subject {position: absolute; left: 0; bottom: 0; padding: 15px 12px; font-size: 1.1rem; color: #fff; font-weight: bold; letter-spacing: -1px;}
.swiper-button-next, .swiper-button-prev {top: 50% !important; color: #fff !important;}



/*** 기사상세 ***/
.viewbox header {margin: 0 15px; background-image: none; background-color: #fff;}
.viewbox header h2 {font-size: 1.5rem; letter-spacing: -1px;}


/* 기사상세 (타이틀 상단 고정시) */
.topfix {position: fixed; left: 0; top: 0; z-index: 1; width: 100%; background-color: rgba(0, 0, 0, .9); border-bottom: 1px solid #000;}
.topfix .thumb_h {margin: 0 15px; border: none;}
.topfix .thumb {flex-basis: 110px; height: 74px; border: 1px solid #000;}
.topfix .subject {color: #fff; font-size: 1rem; -webkit-line-clamp: 3;}


/* 기사상세 (기사등록시간 + 글자크기 조정) */
.fncbox {display: flex; justify-content: space-between; align-items: center; padding: 10px 0;}
.fncbox p:nth-child(1) span {font-size: 0.9rem; color: #666; display: inline-block;}
.fncbox p:nth-child(1) span:nth-child(1) {margin-right: 5px;}
.fncbox p:nth-child(2) {display: flex;}
.fncbox p:nth-child(2) button {width: 56px; height: 40px; border: 1px solid #ccc; border-right: none; font-weight: normal; text-align: center; color: #333;}
.fncbox p:nth-child(2) button:nth-child(1) {border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.fncbox p:nth-child(2) button:nth-child(2) {border-right: 1px solid #ccc; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.zoomin {font-size: 1rem;}
.zoomout {font-size: 0.8rem;}


/* SNS */
.sns {display: flex; justify-content: center; padding: 20px 0; border-top: 1px solid #ddd;}
.sns a {padding: 10px 16px;}
.sns a span {
    width: 30px; display: inline-block; text-indent: -9999px;
    background-color: transparent; background-repeat: no-repeat; background-position: center; -webkit-background-size: contain; background-size: contain;
}
.sns a:nth-child(1) span {background-image: url(../images/sns_facebook.png);}
.sns a:nth-child(2) span {background-image: url(../images/sns_twitter.png);}
.sns a:nth-child(3) span {background-image: url(../images/sns_kakaotalk.png);}
.sns a:nth-child(4) span {background-image: url(../images/sns_clip.png);}


/* 기사본문 */
/* 기사본문 (서브타이틀) */
.bodyview .subtitle {border-left: 2px solid #777; margin: 0 15px 20px 15px; padding-left: 10px; font-size: 1.1rem; color: #888; letter-spacing: -1px;}
.bodyview .subtitle p {margin: 6px 0;}


/* 기사본문 (해시태그) */
.hashtag {display: flex; flex-wrap: wrap; margin: 10px 15px;}
.hashtag a {margin: 4px 6px 4px 0; padding: 6px 16px 7px 12px; border: 1px solid #dde0e5; background-color: #dde0e5; border-radius: 30px; font-size: 0.95rem; color: #666;}


/* 기사본문 (카피문구) */
.bodycopy {margin: 10px 15px; padding: 10px 30px; border-top: 1px solid #ddd; font-size: 0.8rem; color: #666; text-align: center;}


/* 기사본문 (본문내용) */
.viewcontents p {margin: 20px 15px; line-height: 1.5;}
.viewcontents figure {padding: 10px 0; text-align: center;}
.viewcontents figure figcaption {padding: 5px 15px; font-size: 14px; color: #999;}


/* 기사상세 사진확대 아이콘 */
.bodyview .thumb {position: relative;}
.bodyview .thumb .ico_view {
    position: absolute; right: 10px; top: 10px; text-indent: -9999px; width: 40px; height: 40px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .7);
    background-image: url(../images/ico_view.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: 55%;
    background-size: 55%;
}

/* 관련기사 */
.rel_news {margin-bottom: 40px; margin-top: 40px;}
.rel_news .contit {margin-bottom: 0;}
.rel_news .thumb_h a {border-bottom: 1px dashed #ddd;}
.rel_news .thumb_h .thumb {flex-basis: 110px; height: 70px; border-radius: 10px;}
.rel_news .thumb_h .thumb img {border-radius: 10px;}
.rel_news .thumb_h .subject {font-weight: normal; font-size: 16px;}