@charset "utf-8";
@import url('base.css');
@import url('swiper-bundle.min.css');

/* 공통 */
.dimMask{display:none; position:fixed; top:50px; width:100%; height:100%; background:rgba(0,0,0, .3); z-index: 9;}
.olympic .titleArea1{padding-bottom:15px;}
.olympic .titleArea1 h3{position:relative; font-size:19px; line-height:22px; color:#000; }
.olympic .titleArea1 h3 a{padding-right:15px; background:url(../images/ico_arr.png) no-repeat 100% 50%; background-size:10px 16px; font-size:19px; line-height:22px; color:#000; }
.olympic .titleArea1 h3 span{position:absolute; bottom:0; right:0; font-size:12px; color:#999; font-weight:normal;}
.olympic .btnStyle1{display:block; width:100%; height:38px; border-radius:20px; background-color:#01647c; font-size:13px; text-align:center; color:#fff; font-weight:bold;}


header{position:fixed; top:0; left:0; width:100%; height:50px; border-bottom:1px solid #e5e5e5; background-color:#fff; box-sizing: border-box; z-index: 9;}
header h1{position:absolute; top:50%; left:16px; width:auto; height:24px; margin-top:-12px;}
header h1 a{display:inline-block; overflow:hidden;}
header h1 img{Width:94px; height:auto;}
header h1 span{margin-left:8px; vertical-align:bottom;}
header .btn{position:absolute; top:0; right:0; width:50px; height:50px; background-image:url(../images/btn_nav.png); background-repeat:no-repeat; background-position:50% 50%; background-size:auto 18px; background-color:#efefef;}
header .btn.active{background-image:url(../images/btn_close.png); }
.navBar{position:fixed; top:50px; left:0; width:100%; height:40px; background-color:#fff; border-bottom:1px solid #ababab; z-index: 8;}
.navBar ul{display:flex; width:100%; justify-content:space-around; }
.navBar li a{position:relative; display:block; line-height:40px; font-size:16px;}
.navBar li.active a:after{content:''; position:absolute; bottom:-1px; left:0; width:100%; height:3px; background-color:#e74b3c; z-index: 1;}

.content.olympic{padding-top:50px; background-color:#ededed;}
.olympic .olympicHead {position:relative; height:80px; border-top: 1px solid #01647c; background:url(../images/bg_head.png) no-repeat 0 0; background-size:100% 100%;}
.olympic .olympicHead h2 span{position:absolute; top:24px; left:294px; display:inline-block; width:60px; height:31px; background-color:#01647c; text-align:center; color:#fff; font-size:19px; line-height:32px; letter-spacing:-1px; font-weight:400;}
.olympic .olympicHead h2 span:after{position: absolute;
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 5px;
    height: 31px;
    background: url(../images/bg_label.png) no-repeat 0 0;
    background-size: 5px 31px;
}
.olympic .olympicHead h2 img{width:auto; height:80px; vertical-align:middle; }
.olympic .olympicMenu {height:40px; padding:0 15px; background-color:#01405b; }
.olympic .olympicMenu ul{display:flex; justify-content: space-around; align-items: center; height:100%;}
.olympic .olympicMenu ul li{position:relative;}
.olympic .olympicMenu ul li.on:after{content:''; position:absolute; left:0; bottom:-2px; width:100%; height:3px; background-color:#8bf4f2;}
.olympic .olympicMenu ul li a{display:block; padding:0 5px; font-size:16px; color:#fff; line-height:38px;}

.olympic .olympicCont{padding:10px; background-color:#ededed;}

.olympicSwiper .swiper-slide .thumCont{overflow:hidden; position:relative; width:100%; height:0; padding-bottom:62.06%;}
.olympicSwiper .swiper-slide .thumCont img{position:absolute; top:0; left:0; width:100%; min-height:100%; object-fit: cover;}
.olympicSwiper .swiper-slide .titCont{display:flex; justify-content: center; align-items: center; height:72px; background-color:#eefbfb;}
.olympicSwiper .swiper-slide .titCont p a{overflow:hidden; padding:0 50px; font-weight:bold; font-size:22px; line-height:1.5; color:#01405b; text-align:center;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.olympicSwiper .swiper-button-next{top:auto; bottom:16px; right:12px; width:23px; height:41px; background:url(../images/arr_next.png) no-repeat 0 0; background-size:23px 41px; z-index:1;}
.olympicSwiper .swiper-button-next:after{display:none;}
.olympicSwiper .swiper-button-prev{top:auto; bottom:16px; left:12px; width:23px; height:41px; background:url(../images/arr_prev.png) no-repeat 0 0; background-size:23px 41px; z-index:1;}
.olympicSwiper .swiper-button-prev:after{display:none;}

/* 메달 현황 */
.olympic .olympicCont .medal {position:relative; overflow:hidden; height:auto; margin:12px 0 15px; background-image:url(../images/bg_medal.png); background-repeat:no-repeat; background-size:196px 130px; background-position:100% 0; background-color:#01647c; text-align:center; font-family: '맑은 고딕','돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif; }
.olympic .olympicCont .medal .inner{display:inline-block; width:auto; padding:12px 0; z-index: 9;}
.olympic .olympicCont .medal p{float:left; margin-right:15px; font-size:20px; line-height:37px; color:#fff;}
.olympic .olympicCont .medal ul{overflow:hidden;}
.olympic .olympicCont .medal ul li {float:left; width:37px; height:37px; margin-right:12px; line-height:37px; text-align:center; font-weight:bold;}
.olympic .olympicCont .medal ul li:last-child{margin-right:0px;}
.olympic .olympicCont .medal ul li.gold{background:url(../images/ico_gold.png) no-repeat 0 0; background-size:37px;}
.olympic .olympicCont .medal ul li.silver{background:url(../images/ico_silver.png) no-repeat 0 0; background-size:37px;}
.olympic .olympicCont .medal ul li.bronze{background:url(../images/ico_bronze.png) no-repeat 0 0; background-size:37px;}

/* 생생화보 */
.olympic .PMovie_area{margin-top:10px; padding:15px 10px 15px; background-color:#fff;}
.olympic .PMovie_area .articleList{display:flex; justify-content: flex-start; flex-wrap: wrap;}
.olympic .PMovie_area .articleList article{flex:0 0 48%;}
.olympic .PMovie_area article .thumCont{position:relative; display:block; overflow:hidden; height:0; padding-bottom:57.95%; border:1px solid #e4e4e4;}
.olympic .PMovie_area article .thumCont img{position:absolute; top:0; left:0; width:100%; min-height:91px; object-fit: cover;}
.olympic .PMovie_area article .label{position:absolute; bottom:0; right:0; width:34px; height:19px; margin:-17px 0 0 -17px; background-color:#01647c; color:#fff; font-size:13px; line-height:18px; text-align:center;}
.olympic .PMovie_area article .label:after{display:block; content:''; position:absolute; top:0; left:0; width:3px; height:19px; background:url(../images/bg_label.png) no-repeat 0 0; background-size:3px 19px;}
.olympic .PMovie_area article .tit{overflow:hidden; height:38px; margin:3px 0 11px; font-size:14px; line-height:1.5;}
.olympic .PMovie_area article:nth-child(odd){margin-right:2%;}
.olympic .PMovie_area article:nth-child(even){margin-left:2%;}

/* 오늘의 경기 */
.olympic .olympicGame{margin-top:10px; padding:15px 10px 15px; background-color:#fff; }
.olympic .olympicGame .slide{overflow:hidden;}
.olympic .olympicGame li{overflow:hidden; width:187px; height:84px; border-right:1px solid #ccc;}
.olympic .olympicGame li:last-child{border-right:none;}
.olympic .olympicGame li .time{font-size:13px; margin-bottom:5px; font-weight:bold;}
.olympic .olympicGame li .txt{font-size:14px; line-height:20px;}
.olympic .olympicGame .btnStyle1{margin-top:15px;}

/* 올림픽 소식 */
.olympic .olympicNow{margin-top:10px; padding:15px 10px 15px; background-color:#fff;}
.olympic .olympicNow article{display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom:16px; padding-bottom:15px; border-bottom:1px solid #f0f0f0; }
.olympic .olympicNow article .thumCont{overflow:hidden; position:relative; flex:1 1 28.67%; height:0; padding-bottom:21.398%;}
.olympic .olympicNow article .thumCont img{position:absolute; top: 0;left: 0; width: 100%; min-height: 65px; object-fit: cover;}
.olympic .olympicNow article .titCont{flex:1 0 64.77%; margin-right:16px;}
.olympic .olympicNow article .titCont{overflow:hidden; height:40px; font-size:17px; line-height:20px;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.olympic .olympicNow article .titCont span{position:relative; margin-right:5px; padding-right:5px; color:#4e75cf;}
.olympic .olympicNow article .titCont span:after{content:''; position:absolute; top:3px; right:-1px; width:1px; height:13px; background-color:#4e75cf;}
.olympic .olympicNow article:last-child{margin-bottom:0px; padding-bottom:0px; border-bottom:0px;}

/* 많이 본 기사 */
.olympic .olympicTop{margin-top:10px; padding:15px 10px 15px; background-color:#fff;}
.olympic .olympicTop article{}

.olympic .olympicTop article{padding:16px 0; border-bottom:1px solid #E5E5E5;}
.olympic .olympicTop article:first-child{padding-top:0px;}
.olympic .olympicTop article{display:flex; justify-content: flex-start; align-items: center;}
.olympic .olympicTop article:hover {text-decoration:none;}
.olympic .olympicTop article:hover .txtCont {text-decoration: underline;}
.olympic .olympicTop article p.rank{flex:0 0 28px; font-size:24px; font-weight:bold; line-height:24px; text-align:left;}
.olympic .olympicTop article p.rank.c{color:#008191;}
.olympic .olympicTop article .titCont{flex:1 0 51.33%; margin:0 16px 0 11px;}
.olympic .olympicTop article .titCont .tit{overflow:hidden; font-size:16px; line-height:1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.olympic .olympicTop article .thumCont{overflow:hidden; position:relative; flex:1 1 28.67%; height:0; padding-bottom:21.4%;}
.olympic .olympicTop article .thumCont img{position:absolute; top:0; left:0; width:100%; min-height:100%; object-fit: cover;}

/* 주목! 이선수 */
.olympic .olympicPlay{margin-top:10px; padding:15px 10px 15px; background-color:#fff; }
.olympic .olympicPlay article{display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom:16px; padding-bottom:15px; border-bottom:1px solid #f0f0f0; }
.olympic .olympicPlay article .thumCont{overflow:hidden; position:relative; flex:1 1 28.67%; height:0; padding-bottom:21.398%;}
.olympic .olympicPlay article .thumCont img{position:absolute; top: 0;left: 0; width: 100%; min-height: 65px; object-fit: cover;}
.olympic .olympicPlay article .titCont{flex:1 0 64.77%; margin-right:16px;}
.olympic .olympicPlay article .titCont{overflow:hidden; height:40px; font-size:17px; line-height:20px;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.olympic .olympicPlay article .titCont span{position:relative; margin-right:5px; padding-right:5px; color:#4e75cf;}
.olympic .olympicPlay article .titCont span:after{content:''; position:absolute; top:3px; right:-1px; width:1px; height:13px; background-color:#4e75cf;}
.olympic .olympicPlay article:last-child{margin-bottom:0px; padding-bottom:0px; border-bottom:0px;}

/* 그래픽뉴스 */
.olympic .olympicGraph{margin-top:10px; padding:15px 10px 15px; background-color:#fff;}
.olympic .olympicGraph .articleList article{display:flex; justify-content: flex-start; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #f0f0f0; }
.olympic .olympicGraph .articleList .thumCont{position:relative; overflow:hidden; flex:1 0 40%; height:0; padding-bottom:54.06%; margin-right:16px; border:1px solid #e4e4e4; text-align:center;}
.olympic .olympicGraph .articleList .thumCont a{position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content: center; align-items: center; }
.olympic .olympicGraph .articleList .thumCont img {width:auto; max-width:100%; height:auto; max-height:100%;}
.olympic .olympicGraph .articleList .titCont .tit{font-size:17px; line-height:1.5;}
.olympic .olympicGraph .articleList :last-child{margin-bottom:0px; padding-bottom:0px; border-bottom:0px;}

/* footer */
footer {padding:24px 16px; background-color:#363739 !important ; text-align:center;}
footer ul{margin-bottom:8px;}
footer ul li{display:inline-block; height:30px; padding:0;}
footer ul li a{padding:4px 8px; border:1px solid #ffffff50; border-radius:4px; background:#161616; color:#ffffff; font-size:14px; font-weight: 500;}
footer ul.menu{margin-bottom:16px; }
footer ul.menu li a{padding:4px; background:none; border: none; color:#fff; font-size:14px; font-weight:300;}
footer .copy{padding-top:6px; color:#fff; font-weight: 100; font-size:12px;}
footer .copy span{color:#e74b3c;}

/* mNav */
.mNav {position:fixed; top:50px; right:-290px; width:258px; height:calc(100% - 82px); padding:16px; background-color:#fff;  transition: .2s; z-index: 10;}
.mNav.off{right:-290px;}
.mNav .searchArea{position:relative; height:40px; margin-bottom:16px; border-bottom:1px solid #111; background:#efefef;}
.mNav .searchArea button{position:absolute; top:50%; right:12px; width:24px; height:24px; margin-top:-12px; background-color:transparent;}
.mNav .searchArea button img{width:24px; height:24px;}
.mNav .searchArea input{width:210px; height:40px; line-height:40px; padding:0 16px; background:#efefef; font-weight:600;}
.mNav .searchArea input::placeholder {font-weight:400;}
.mNav nav{overflow:hidden; position:relative; width:100%; height:100%;}
.mNav nav .swiper-slide{padding-bottom:56px;}
.mNav nav li{width:100%;}
.mNav nav li.line{padding-bottom:8px; border-bottom:1px solid #efefef;}
.mNav nav li a{display:block; height:40px; font-size:16px; line-height:40px; vertical-align:middle;}
.mNav nav li.on>a{color:red;}
.mNav nav li .menuBox{overflow:hidden; margin:8px 0; border-top:1px solid #efefef; border-bottom:1px solid #efefef;}
.mNav nav li .menuBox li{float:left; width:50%; }

/* 서브 페이지 - 뉴스 */
.olympic .olympicCont .news{padding:10px 10px 0; background-color:#fff; }
.olympic .btnGroup {overflow:hidden; margin-bottom:15px; padding:0px;}
.olympic .btnGroup li{float:left; width:50%; height:39px; text-align:center; border:1px solid #001860; box-sizing: border-box;}
.olympic .btnGroup li:nth-child(1),.btnGroup li:nth-child(3){border-right:none;}
.olympic .btnGroup li:nth-child(1),.btnGroup li:nth-child(2){border-bottom:none;}
.olympic .btnGroup li.on{background-color:#01647c;}
.olympic .btnGroup li.on a{color:#fff; font-weight:bold;}
.olympic .btnGroup li a{display:block; width:100%; height:100%; font-size:17px; line-height:39px;}
.olympic .news article{display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom:16px; padding-bottom:15px; border-bottom:1px solid #f0f0f0; }
.olympic .news article .thumCont{overflow:hidden; position:relative; flex:1 1 28.67%; height:0; padding-bottom:21.398%;}
.olympic .news article .thumCont img{position:absolute; top: 0;left: 0; width: 100%; min-height: 65px; object-fit: cover;}
.olympic .news article .titCont{flex:1 0 64.77%; margin-right:16px;}
.olympic .news article .titCont{overflow:hidden; font-size:17px; line-height:20px;}
.olympic .news article .titCont span{position:relative; margin-right:5px; padding-right:5px; color:#4e75cf;}
.olympic .news article .titCont span:after{content:''; position:absolute; top:3px; right:-1px; width:1px; height:13px; background-color:#4e75cf;}
.olympic .news article:last-child{padding-bottom:0px; border-bottom:0px;}

.olympic .btn_more {position:relative; border-top:1px solid #f0f0f0; background-color:#fff;}
.olympic .btn_more .bt_m {position:relative; display:block; height:44px; margin-right:44px; text-align:center;}
.olympic .btn_more .bt_m .t1 {padding-left:24px; background:url(../images/bl_arrow01.png) no-repeat 0 50%; background-size:15px auto; font-size:1.071em; line-height:2.5em; color:#a0a0a0;}
.olympic .btn_more .bt_m .n1 {position:absolute; top:11px; right:12px; font-size:0.857em; letter-spacing:-0.8px; color:#a0a0a0;}
.olympic .btn_more .bt_m .n1 .c1 {color:#555;}
.olympic .btn_more .bt_top {position:absolute; top:0; right:0; width:44px; height:44px; background:url(../images/bl_arrow03.png) no-repeat center 13px; background-size:10px auto; font-size:0.643em; line-height:5em; text-align:center; color:#a0a0a0; border-left:1px solid #f0f0f0;}

/* 대회일정 */
.olympic .olympicCont .schedule{padding:15px 10px; background-color:#fff;}
.olympic .btnGroup2{overflow:hidden; padding-bottom:15px; background-color:#fff;}
.olympic .btnGroup2 li{float:left; width:50%; height:39px; text-align:center; border: 1px solid #cccccc; box-sizing: border-box;}
.olympic .btnGroup2 li a{display:block; width:100%; height:100%; font-size:17px; line-height:36px; color:#a3a3a3;}
.olympic .btnGroup2 li.on{background-color:#01647c; border: 1px solid #01647c; box-sizing: border-box;}
.olympic .btnGroup2 li.on a{color:#fff; font-weight:normal;}
.olympic .btnGroup2 li:nth-child(2){border-left:none;}
.olympic .btnGroup2 li:last-child.on{border:1px solid #ccc;}

.olympic .olympicCont .schedule .cont .day{position:relative; margin-bottom:12px; padding:3px 10px; border-radius:8px; background-color:#01647c;}
.olympic .olympicCont .schedule .cont .day p{color:#fff;}
.olympic .olympicCont .schedule .cont .day p.txt1{font-size:20px; line-height:30px;}
.olympic .olympicCont .schedule .cont .day p.txt2{position:absolute; top:8px; right:10px; font-size:13px; line-height:19px;}
.olympic .olympicCont .schedule .cont .box-time{position:relative; margin-bottom:12px; padding:16px 20px; border-radius:8px; background-color:#ededed; }

.olympic .olympicCont .schedule .cont .box-time p.txt{padding:24px 0; text-align:center;}
.olympic .olympicCont .schedule .cont .box-time p.time{position:absolute; top:14px; left:20px; font-size:20px; color:#000; font-weight:bold;}
.olympic .olympicCont .schedule .cont .box-time p.time span{position:absolute; top:28px; left:0; width:52px; text-align:center; font-size:13px; color:#000; font-weight:normal;}
.olympic .olympicCont .schedule .cont .box-time p.time span.ing{color:#3f76ff}
.olympic .olympicCont .schedule .cont .box-time p.time span.end{color:#858893;}
.olympic .olympicCont .schedule .cont .box-time p.event{padding-left:66px; font-size:17px; line-height:25px; color:#0B7580; font-weight:bold;
    overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}
.olympic .olympicCont .schedule .cont .box-time p.game{margin-bottom:4px; padding-left:66px; font-size:15px; line-height:19px; color:#333;
    overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}
.olympic .olympicCont .schedule .cont .box-time p.stadium{padding-left:66px; font-size:11px; line-height:19px; color:#777;
    overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 메달현황 */
/* 종합순위 */
.rankTable{width:100%; border:1px solid #d5d5d5;}
.rankTable th{padding:13px 0; background-color:#f5f5f5; line-height:30px; font-size:15px; font-weight:bold; color:#000;}
.rankTable th span{display:inline-block;}
.rankTable th .gold{width:30px; height:30px; background:url(../images/ico_gold.png) no-repeat 0 0; background-size:30px 30px; color:#aa8a32;}
.rankTable th .silver{width:30px; height:30px; background:url(../images/ico_silver.png) no-repeat 0 0; background-size:30px 30px;color:#949494;}
.rankTable th .bronze{width:30px; height:30px; background:url(../images/ico_bronze.png) no-repeat 0 0; background-size:30px 30px;color:#aa734b;}
.rankTable td {text-align:center;}
.rankTable .nation{text-align:left;}
.rankTable td{padding:18px 0; font-weight:bold; font-size:15px;}
.rankTable .korea { border: 1px solid #01647c; background-color: #e9f9f8;}
.rankTable .korea .rank {color: #01405b;}
.rankTable .korea .nation {color: #01405b;}
.rankTable td.gold{color:#aa8a32;}
.rankTable td.silver{color:#949494;}
.rankTable td.bronze{color:#aa734b;}

/* 포토 */
.photo-list{width:calc(100% - 20px); padding:10px 10px 0; background-color:#fff;}
.photo-list .grid-item, .photo-list .grid-sizer {width:calc(50% - 6px); height:auto;}
.photo-list .gutter-sizer{width:12px;}
.photo-list .grid{width:100%;}
.photo-list .grid-item{width:calc(50% - 6px); margin-bottom:12px; border:1px solid #DEDEDE;}
.photo-list .grid-item .thumCont{overflow:hidden; }
.photo-list .grid-item .thumCont img{width:100%; height:auto;}
.photo-list .grid-item .txtCont{padding:8px; background-color:#fff;}
.photo-list .grid-item .txtCont p{overflow:hidden; max-height:50px; font-size:16px; line-height:25px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.photo-list .btn-more{margin:0 16px 10px;  border-radius:19px; background:#4CB0B8;  text-align:center}
.photo-list .btn-more button{display:inline-block; width:100%; padding:7px 0; color:#fff; text-align:center; font-size:16px;}
.photo-list .btn-more span{color:#733C8F;}

/* 대한민국 메달리스트 */
.olympic .medalScore{margin:10px; padding:10px; background-color:#fff;}
.olympic .medalScore .btnGroup2 li a{font-size:16px; letter-spacing:-1px}
.olympic .medalScore .btnGroup2 li a.list{letter-spacing:-2px; font-size:15px;}
.olympic .medalCont{margin-top:20px;}
.olympic .medalCont .tit{margin-bottom:15px; font-size:18px; font-weight:bold;}
.olympic .medalCont p.noMedal{font-size:14px; padding-bottom:25px; border-bottom:1px solid #efefef;}
.olympic .medalCont .tit.gold span{display:inline-block; width:31px; height:31px; line-height:30px; background:url(../images/ico_gold.png) no-repeat 0 0; background-size:31px 31px; font-size:17px; text-align:center; letter-spacing:-1px; }
.olympic .medalCont .tit.silver{padding-top:10px;}
.olympic .medalCont .tit.silver span{display:inline-block; width:31px; height:31px; line-height:30px; background:url(../images/ico_silver.png) no-repeat 0 0; background-size:31px 31px; font-size:17px; text-align:center; letter-spacing:-1px; }
.olympic .medalCont .tit.bronze{padding-top:10px;}
.olympic .medalCont .tit.bronze span{display:inline-block; width:31px; height:31px; line-height:30px; background:url(../images/ico_bronze.png) no-repeat 0 0; background-size:31px 31px; font-size:17px; text-align:center; letter-spacing:-1px; }
.olympic .medalCont table{width:100%; border-bottom:1px solid #efefef}
.olympic .medalCont table th{position:sticky; padding:13px 0; background-color:#01647c; color:#fff; font-size:14px; font-weight:normal;}
.olympic .medalCont table td{padding:13px 0; text-align:center; font-size:14px;}
.olympic .medalCont table tr:nth-child(even){background-color:#efefef;}