@charset "utf-8";
/* Travelers Today CSS Document */
@media screen and (max-width:1024px) {
.top, .hd, .nav, .contents, .foot, .featured, .video_wp {width:94%; padding:0 3%;}
.nav {width:90%; float:left; display:block; clear:both; padding:0 5%;}
.nav li a {padding:0 15px;}
.cts_left {width:56.1%; float:left;}
.cts_side {width:41.9%; float:right;}
.mcon1 {width:31%; padding:0 1%; margin-right:0;}
.mcon2 {background:none;}
.mcon2_l {width:63%;}
.mcon2_r {width:32%;}
.video_wp .con1 .left {width:60%;}
.video_wp .con1 .side {width:35%;}
.video_wp img {width:100%;}
.video_wp .con2 .slide {height:160px;}
.video_wp .list {width:136px; height:200px; margin:0 10px;}
.foot_wp {background:#000000;}
.foot2 {width:90%; padding:10px 5% 30px;}
.fcon1 {width:35%; float:left; margin-left:0;}
.fcon2 {width:20%; margin-top:10px; margin-left:10%;}
.fcon3 {width:100%%; float:left; clear:both;}
.fcon3 .ttl {padding:10px 0 10px;}

  .uni-res-nav {background-color:#222; border-top:1px solid #444; box-shadow:0 -2px 2px #aaa;}
    .uni-res-nav li {float:left; width:33%; display: inline; text-align: center; box-shadow:1px 1px 30px #000 inset;}
    .uni-res-nav li a {display:block; color:#fff; font-weight:bold; padding-top:20px; padding-bottom:3px; font-size: 12px; line-height: 20px;}
    .uni-res-nav li a:hover {color:#ffe600;}
    .uni-res-nav .m-back {background:url(../images/responsive-nav-sprite.png)
    no-repeat center -10px; }
    .uni-res-nav .m-home {background:url(../images/responsive-nav-sprite.png)
    no-repeat center -50px; width:34%;}
    .uni-res-nav .m-full {background:url(../images/responsive-nav-sprite.png)
    no-repeat center -90px; }
    .uni-res-nav .m-mobile {background:url(../images/responsive-nav-sprite.png)
    no-repeat center -130px; }
}
@media screen and (max-width:800px) {
.cts_left, .cts_side {width:100%; float:left; display:block; clear:both;}
.input_art {display:none;}
.contents2 {background:none;}
.mcon4 {width:30%; float:left; padding:0; position:relative; margin:0 1.5% 20px;}
.scon4 {width:46%; float:left; padding:0 2% 20px; background:none;}
.fea_con1 {width:35%; margin-left:0;}
.fea_con2 {width:60%;}
.fea_con2 .box {width:45%;}
.fea_con2 .box .photo {width:80px; margin-right:10px;}
.secon1 {width:90%; margin:0 5% 30px;}
.secon2 {width:40%; margin:0 5% 40px;}
.secon1 img, .secon2 img {width:100%;}
.bpcon1, .bpcon3 {width:96%; padding:0 2%; display:block; clear:both;}
.bp_bttl {width:62%;}
.bp_tool {width:35%;}
.bpcon4 {width:96%; padding:0; margin:0 2% 20px;}
.bpcon4 .photo {width:100%; height:auto;}
.bpcon4 .ttl {width:80%; height:auto; padding:20px 5%; margin:-50px 5% 0;}
.bpcon5 {width:29.3%; float:left; margin:0 2% 20px; padding:0;}
.video_wp .con1 .left img {width:100%;}
.video_wp .con2 .slide, .video_wp .con3 {width:90%; padding:20px 5%;}
.video_wp .con2 .prev {left:15px;}
.video_wp .con2 .right {right:15px;}
.video_wp .con3 .list {width:17%; height:auto; margin:0 1.5% 10px; float:left;}
}
@media screen and (max-width:750px) {
.atcon1 img, .atcon1 .imageBox img, .atcon1 .imageNone img {width:100%;}
}
@media screen and (max-width:540px) {
.mcon1, .mcon2_l, .mcon2_r, .fea_con1, .fea_con2, .mcon4, .fcon1, .fcon3, .at_name, .at_tool, .atcon2_l, .atcon2_r {width:auto; float:none; display:block; clear:both;}
.mcon2_l .txt2, .mcon3 .thum, .mcon4 .ic_p2, .mcon4 .ic_mv2, .t_sns .pr10, .bn_top, .secon2 .txt, .video_wp .ad, .bn728, .bk-socialbox {display:none;}
.hd_wp {height:auto;}
.hd .lg {width:100%; padding-top:25px; clear:both;}
.hd .lg img {width:100%;}
.hd .search {width:80%; padding:15px 10%; position:relative; top:auto; left:auto; clear:both;}
.hd .input {font-size:14px; line-height:24px; width:100%; padding:3px 3% 3px 2%;}
.hd .ic_srh {top:22px; right:32px;}
.nav {height:auto; padding:5px 5%;}
.nav li {border-right:none;}
.nav li a {font-size:15px; line-height:26px;}
.mcon2 {background:none;}
.mcon2_r {margin:0 15px;}
a.mcon1, .mcon2_r a {width:100%; float:left; display:block; clear:both; margin-bottom:20px;}
.mcon1 img, .mcon2_r img, .mcon4 img {width:45%; float:left; margin-right:20px;}
.mcon3 .ttl {font:20px/23px FamiliarProBold; padding:10px 20px; margin:0;}
.mcon4 {width:100%; float:left; padding:0; position:relative; margin:10px 0;}
.scon2 .input {width:150px;}
.scon4 {width:100%; float:left; padding:0 2% 20px;}
.at_tool {margin-top:15px;}
.at_page {font:11px/13px FamiliarProBold;}
.at_sponsor {width:100%;}
.at_rel {width:100%; margin-right:0; clear:both;}
.fea_con2 .box {width:100%; margin-bottom:20px;}
.fcon1 {width:100%; float:left; clear:both;}
.fcon2 {width:50%; margin:20px 0; margin-left:0;}
.secon1 {width:100%; margin:0 0 30px;}
.secon2 {width:47%; margin:0 0 40px;}
.secon1 .photo {width:100%; clear:both; margin:0 0 8px;}
.secon2 .ttl {font:16px/18px FamiliarProBold; padding:10px 5px; margin:0; clear:both;}
.secon2 .more {text-align:left;}
.bp_bttl {width:100%; float:left; clear:both;}
.bp_tool {width:100%; float:left; text-align:left; clear:both; margin-top:10px;}
.bpcon4, .bpcon5 {width:100%; margin:0 0 20px;}
.bpcon4 .ttl {padding:10px 20px;}
.bpcon4 .t1 {font:25px/29px FamiliarProBold; padding-top:0;}
.f_tool {width:96%; float:left; display:block; clear:both; background:#ddd; padding:10px 2%; font-size:14px; font-weight:bold; text-align:center;}
.f_tool span {margin:0 13px; display:inline-block;}
.video_wp .con1 .left, .video_wp .con1 .side {width:auto; float:left; display:block; clear:both;}
.video_wp .con1 .side {margin-bottom:20px; padding:0 4%;}
.video_wp .con2 .slide {width:76%; padding:20px 12%;}
.video_wp .con3 .list {width:100%; clear:both;}
.video_wp .con3 .list .mv {width:35%; float:left; margin-right:20px;}
}