@charset "utf-8";
/*************************************************
프로젝트명 : 연합뉴스TV 행사페이지
commnet : contents_m.css (Mobile 모드)
*************************************************/

@media only screen and (max-width: 820px){
	/* =============== ######공통 (common) =============== */
	html,body{width:100%;height:100%;}
	body{font-family:'Spoqa Han Sans Neo','Helvetica Neue',Helvetica,AppleSDGothicNeo-Regular,sans-serif;letter-spacing:-0.3px;background: #fff;}
	h1,h2,h3,h4,h5,h6{font-weight:normal;}
	a{display:inline-block;vertical-align:top;}

	header{position: relative;}
	.inner{width: calc(100% - 36px);}
	.header-box{padding: 15px 0;}
	.logo>a>.ir-txt{background-size: 380px;height: 31px;background-position: 0 -43px;margin-left: 0;}
	.nav{display: none;}

	/* =============== 모바일 메뉴 (햄버거) =============== */
	.mobile-btn {display: inline-block;position: relative;width: 27px;height: 19px;}
	.ico-mobilebtn{background: #150a06;}
	.ico-mobilebtn, .ico-mobilebtn span{display: inline-block;transition: all .4s;box-sizing: border-box;}
	.ico-mobilebtn{position: relative;width: 27px;height: 19px;}

	.ico-mobilebtn span{position: absolute;left: 0;width: 100%;height: 2px;background-color: #fff;border-radius: 4px;}
	.ico-mobilebtn span:nth-of-type(1){top: 0;}
	.ico-mobilebtn span:nth-of-type(2){top: 8px;}
	.ico-mobilebtn span:nth-of-type(3){bottom: 0;}

	.open .ico-mobilebtn span:nth-of-type(1){-webkit-transform: translateY(8px) rotate(-45deg);transform: translateY(8px) rotate(-45deg);}
	.open .ico-mobilebtn span:nth-of-type(2){opacity: 0;}
	.open .ico-mobilebtn span:nth-of-type(3){-webkit-transform: translateY(-8px) rotate(45deg);transform: translateY(-8px) rotate(45deg);}

	.logo>a {margin-left: 0;width: 260px;height: 23px;}

	/* =============== 모바일 메뉴 =============== */
	.mobile-menu{display: block;position: absolute;top: 100%;right: 0;width: 100%;z-index: 100;-webkit-transform: translateY(-323%);-moz-transform: translateY(-323%);-ms-transform: translateY(-323%);-o-transform: translateY(-323%);transform: translateY(-323%);-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
	.mobile-menu.open{-webkit-transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}
	.mobile-menu>ul{max-width: 100%;margin: 0 auto;padding: 10px 0;text-align: center;background: #150a06;color: #fff;box-shadow: 0 3px 10px rgb(0, 0, 0, 0.2);}
	.mobile-menu>ul>li{position: relative;font-size: 2rem;font-weight: 400;border-bottom: 1px solid #535252;}
	.mobile-menu>ul>li:last-child{border-bottom: none;}
	.mobile-menu>ul>li>a{padding: 13px 0;width: 100%;font-size: 17px;font-weight: 400;}

	/* =============== 메인 =============== */
	.main-visual{height: auto;}
	.main-visual .obj{height: 530px;}
	.main-visual .obj .txt01{background-size: 84%;top: -2%;left: 3%;width: 500px;height: 244px;}
	.main-visual .obj .txt02{line-height: 1;font-size: 15px;top: 0;}
	.main-visual>.obj>.txt02>p{margin-bottom: 6px;}
	.main-visual>.obj>.txt02>p>span{padding: 0px 3px;margin-right: 2px;}

	.boost{display: block;}
	.boost>div>p{text-align: center;}
	.boost>.list-wrap01:first-child>ul.list>li:last-child{margin-right: 0;}
	.list-wrap01{display: block;margin-bottom: 15px;}
	.list-wrap01>ul.list>li, .list-wrap02>ul.list>li {padding: 5px;}
	
	.spot-video{padding: 0;}
	.spot-video>div{overflow: hidden;display: block;position: relative;width: 100%;height: 0;padding-top: 56.25%;}
	.spot-video>div>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	.sponsor {padding: 30px 0 30px 0;}

}
@media only screen and (max-width: 768px){

	
	.list-wrap01>p, .list-wrap02>p {font-size: 20px;padding: 10px;}
	.list-wrap01>ul.list>li>img, .list-wrap02>ul.list>li>img {width: 153px;}
	.block{display: block;}

	/* =============== 서브비주얼 =============== */
	.sub-visual .obj{height: 110px;}
	.sub-visual>.obj>.txt01>h1{font-size: 26px;}

	/* 초대의 글 */
	.contents{padding: 28px 0 24px 0;}
	.contents>h1{font-size: 20px;margin-bottom: 30px;font-weight: 500;}

	/* 텝메뉴 */
	ul.tab01{margin-bottom: 28px;}
	ul.tab01>li{width:100px;font-size: 16px;padding: 8px;}
	ul.tab01>li>span{display: none;}

	strong{display: inline;}
	
	/* 대회안내 */
	.section01{flex-flow: column wrap;font-size: 15px;}
	.cont{width: 100%;padding: 0;display: block;}

	table thead th, table tbody th, table tbody td{padding: 0.5rem; }
	.table-type02 > tbody > tr> th, .table-type02 > tbody > tr> td {padding: 0.5rem 0.7rem;}

	.cont-wrap {margin-bottom: 2.5rem;}
	.notice-title>h2, .cont-title>h2 {margin-bottom: 10px;padding-left: 18px;font-size: 18px;}
	.notice-title>h2::before, .cont-title>h2::before {width: 12px;height: 12px;}

	.cont-detail{font-size: 16px;margin: 0 0 1rem 0;}


	.detail01>li {position: relative;padding-left: 13px;margin-bottom: 5px;}
	.detail01>li::before {top: 7px;width: 7px;height: 7px;}

	table {font-size: 15px;}
	.refer {font-size: 13px;}
	.cont-title>h3 {margin: 0 0 1rem 0;font-size: 16px;}

	/* 공지사항 */
	.notice-content{line-height: 1.4;font-size: 15px;}
	.info01 {text-align: center;margin-bottom: 20px;font-size: 15px;line-height: 1.3;}
	.notice-content>ul>li>span{display: inline;}

	/* 수상자 특전 */
	.award>.txt-box{margin-left: 0;padding: 0;}
	.award>.txt-box>.txt>h2{font-size: 19px;margin-bottom: 8px;line-height: 1.3;}
	.award>.txt-box>.txt>h3{font-size: 15px;margin-bottom: 20px;}
	.award>.img>img{margin-bottom: 10px;border-radius: 13px;}

	/* 참가신청 */
	.btn01 {font-size: 16px;padding: 16px 18px;}
	.application>.section01{padding: 20px;}

	/* 오시는 길 */
	.map-text {margin-bottom: 15px;}
	.map-text>h3{font-size: 20px;}
	.map-text>p{font-size: 14px;padding-left: 7px;line-height: 21px;}
	.map-text>p::before{width: 3px;height: 3px;}
	.map-area>iframe{min-height: 200px;margin-bottom: 20px;}
	.info-box>.info-cont>.icon-img>img {margin-right: 0;margin-bottom: 12px;}

	ul.detail02>li::before{top: 8px;}
	
	/* =============== 풋터 =============== */
	footer{padding: 25px 0;}
	footer>img{width: 110px;}
}


@media only screen and (max-width: 425px) {
}

@media only screen and (max-width: 365px) {
	ul.tab01>li:nth-child(3){border-left: 1px solid #c2c2c2;}
}	

@media only screen and (max-width: 255px) {
	ul.tab01>li{display: block;margin: 0 auto;}
	ul.tab01>li:nth-child(n+2){border-left: 1px solid #c2c2c2;}
}