@import url("sprite-flags.css");

@charset "utf-8";

.rioWrap {background-image: url("http://img.koreatimes.com/2015/images/event/rio2016/bgRio02_2.jpg"); background-repeat: no-repeat; background-position: bottom}
.rioHead {background: url("http://img.koreatimes.com/2015/images/event/rio2016/bg-lnb2.jpg") 50% 50% no-repeat;background-position: top;margin-top: 43px;}
.rioHead .topBar { width:940px; height: 85px; padding: 11px 0; *border-bottom: 1px solid #e0e0e0; overflow: hidden; margin:0 auto}
.rioSection {clear:both; position:relative; margin:0 auto; width:940px; *margin-top:10px; display:block; background-color:#FFFFFF;overflow: hidden;}
.rioSection h3 {top:-3px; left:20px; font-size:20px; letter-spacing:-1px; line-height:160%;}

/* layout */
.rioSection .area1 {clear:both; float:left; width:615px; margin:20px 0 0 10px}
.rioSection .area2 {float:right; margin:20px 0 30px 0; width:300px}

/* news 헤드라인 */
.rioTop {width:615px; height: 360px; display: block; margin-bottom: 15px}
.topLeft {display: block; float: left; width: 415px; border: 1px solid #eee; border-right: none; box-sizing: border-box; height: 360px}
.topLeft .rioHd {position: relative;height: 359px;}
.topLeft .rioHd h4 {position: absolute;left: 0; bottom: 0;width: 414px; height: 94px; padding: 15px 20px 15px 20px;font-size: 26px;background: #5b5b5b;box-sizing: border-box;color: #fff;z-index: 100;line-height: 120%}
.topLeft .rioHd a {color: #fff; text-decoration:none}
.topLeft .rioHd img {width: 414px; height: 267px; border: none; top: 0; position: absolute;}

.topRight {display:block; float:left}
.topRight ul {list-style:none}
.topRight ul li {width: 200px; height: 120px; *border: 1px solid; box-sizing: border-box; display:block; padding:0; background: rgb(246, 139, 30)}
.topRight ul li img, .topRight ul li a {border: none; overflow: hidden;float: left; width:200px; height:120px}
.topRight ul li:nth-child(2) {border-top: none}
.topRight ul li:nth-child(3) {border-top: none}
.topRight ul li a:hover {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:5px solid rgb(30, 142, 206);}
.topRight ul li a:hover img {margin: -5px}
.topRight ul li a.active {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:5px solid rgb(30, 142, 206);}
.topRight ul li a.active img {margin: -5px}
.topRight ul li:nth-child(2) a:hover {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:5px solid rgb(255, 231, 68)}
.topRight ul li:nth-child(2) a:hover img {margin: -5px}
.topRight ul li:nth-child(2) a.active {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:5px solid rgb(255, 231, 68)}
.topRight ul li:nth-child(2) a.active img {margin: -5px}
.topRight ul li:nth-child(3) a:hover {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:5px solid rgb(246, 139, 30)}
.topRight ul li:nth-child(3) a:hover img {margin: -5px}
.topRight ul li:nth-child(3) a.active {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:5px solid rgb(246, 139, 30)}
.topRight ul li:nth-child(3) a.active img {margin: -5px}

/* news 최신 소식 */
.rioNews {position:relative; min-height:500px;}
.rioNews h3 {padding-bottom:5px;}
.rioNews .news_area {clear:both; border-top:2px solid #323232;}
.rioNews .news_area li {clear:both; padding:13px 0; border-bottom:1px solid #eaeaea;height: 97px;}
.rioNews .news_area li>a {float:left; display:block; width:160px; height:97px; margin-right:20px; background:#f4f4f4; overflow:hidden; text-align:center;}
.rioNews .news_area li>a>img {max-width:100%; max-height:135px; vertical-align:middle;}
.rioNews .news_area li h4 {height:25px; font-size:16px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.rioNews .news_area li p {height:55px; margin-top:3px; text-align:justify;}
.rioNews .news_area li p a {font-family: 'dotum','돋움'; line-height: 120%; color: #777; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.rioNews .news_area li .upload_date {float:left; color:#b5b5b5; letter-spacing:0;}

/* tab 주요경기일정, 순위 */
.rioTab {width: 300px;height: 360px; margin-bottom: 10px;}
.tabMenu {width: 100%; overflow: hidden;}
.tabMenu ul {list-style: none; display:block}
.tabMenu ul li {float:left; width:50%; background:#fff; text-align:center; font-size: 20px; font-weight: bold;}
.tabMenu ul li:nth-child(2) {border-left: 2px solid #333; box-sizing:border-box}
.tabMenu ul li a {display: block; height: 25px}
.tabMenu ul li a.active {color:#ff6600}

.rioGame {display: block}
.rioGame #gameTable {margin: 15px 0; width: 100%; table-layout: fixed; empty-cells: show; border-collapse: collapse; font-size: 12px;}
.rioGame #gameTable caption {display: none;}
.rioGame #gameTable th {background: #1e8ece; color: #fff;border: 1px solid rgb(30, 142, 206);text-align: center; line-height: 12px; color: #fff;padding: 9px 0; }
.rioGame #gameTable td {padding: 9px 0 9px 20px; border: 1px solid #fff; text-align: left; line-height: 17px; background: #fff; color: #000;}
.rioGame #gameTable th:nth-child(1) {padding-left:15px}
.rioGame #gameTable td:nth-child(1) {text-align:right; padding:9px 0 9px 10px}
.rioGame #gameTable td strong {color: #ff6600;}

.rioRank {display: block}
.rioRank #rankTable {margin: 15px 0; width: 100%; table-layout: fixed; empty-cells: show; border-collapse: collapse; font-size: 12px;}
.rioRank #rankTable caption {display: none;}
.rioRank #rankTable th {background: #ffcf00; padding: 5px; border: 1px solid #ffcf00; text-align: center; line-height: 19px;}
.rioRank #rankTable td {padding: 4px; border: 1px solid #fff; text-align: center; line-height: 20px;background: #fff; color: #000;}
.rioRank #rankTable .title {text-align:left; padding-left:20px}
.rioRank #rankTable td strong {margin-left: 20px;}


.rioIssue {display: block; background-color: #ffffff; border-top: 2px solid rgba(1, 115, 177, 0.73); box-shadow: 5px 5px 5px #eee; width: 290px;}
.rioIssue h3 {text-align: center;}
.rioIssue h3 img {margin: 20px}
.rioIssue ul {width: 290px; margin: 0 auto;}
.rioIssue ul li {list-style:none; *margin-bottom: 10px;}
.rioIssue .rioPhoto {width: 290px; display: block; position: relative; padding-bottom: 5px;}
.rioIssue .rioPhoto img {border:none; position:relative}
/*.rioIssue .rioPhoto a:hover {opacity: 0.7; filter: alpha(opacity=70); color: #ff6600;}*/
.rioIssue .rioPhoto h4 {*width: 300px; max-height: 80px; padding: 5px 20px; font-size: 16px; box-sizing: border-box; color: #333; line-height: 18px;}
.rioIssue .rioPhoto img#photoFrame {display: block; width: 300px; height: 47px; position: absolute; z-index: 100; bottom: 55px;}

.rioIssue .rioPhoto figure{overflow: hidden; position: relative; display: inline-block; vertical-align: top;}
.rioIssue .rioPhoto figure img{-webkit-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); width: 290px; height: 145px;}
.rioIssue .rioPhoto figure:hover img{-webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1);}
.css-script-center {width: 960px; margin: 0 auto;}

.area2 .ads {width: 300px; height: 600px; margin-top:10px}