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

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

	/* =============== ######공통 (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;}
	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: 13px 0;}
	.logo>a>.ir-txt{background-size: 330px;height: 31px;background-position: 0 -41px;margin-left: 0;}
	.nav{display: none;}
	
	/* 모바일 메뉴 - 햄버거 */
	.mobile-btn {display: inline-block;position: relative;width: 30px;height: 20px;}
	.ico-mobilebtn{background: #182242;}
	.ico-mobilebtn, .ico-mobilebtn span{display: inline-block;transition: all .4s;box-sizing: border-box;}
	.ico-mobilebtn{position: relative;width: 30px;height: 20px;}

	.ico-mobilebtn span{position: absolute;left: 0;width: 100%;height: 3px;background-color: #9ba5c4;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);}

	/* 모바일 메뉴 */
	.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: #182242;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 #9ba5c4;}
	.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{aspect-ratio: 1100 / 1432;height: auto;}
	.main-visual .obj01{position: absolute;inset:0;width: 100%;height:100%;transform:none;background: url(../img/visual-bg-m.jpg) center top;background-size: cover;}
	
	.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;}
	.sponsor>ul{grid-template-columns: repeat(auto-fill, minmax(30%, auto));gap: 12px 0;}

	/* 서브비주얼 */
	.sub-visual01{width: 100%;}
	.sub-visual01{border-radius: 0;background-position: center 0;background-size: 1853px 130px;}
	.sub-visual01 .sub-visual-bg{position: relative;width: 100%;height: 130px;}
	.sub-visual01 .sub-visual-bg .txt01{left: 24px;top: 26px;width: 380px;height: 57px;background-size: 380px 57px;}
	.sub-visual01 .sub-visual-bg .txt02{left: 26px;top: 96px;width: 543px;height: 14px;background-size: 543px 14px;}
	.sub-visual01 .sub-visual-bg .txt02::after{overflow: hidden;}

	/* 행사소개 - 인사말 */
	.contents{padding: 26px 0 80px 0;}
	.contents>h1{font-size: 24px;margin-bottom: 24px;font-weight: 600;}

	ul.tab01{margin-bottom: 23px;}
	ul.tab01>li{width: 100px;font-size: 16px;padding: 8px 15px;}
	ul.tab01>li:nth-child(4){border-left: 1px solid #cecece;}
	.cont-unit01{flex-direction: column;align-items: center;}
	.cont-unit01>.img{width: 180px;margin-bottom: 30px;}
	.cont-unit01>.info{margin-left: 0;}

	strong{display: inline;}
	
	/* 행사소개 - 개요 */
	.poster>img{padding-right: 0;}
	.introduction{flex-flow: column wrap;}
	.event-cont{width: 100%;margin-top: 22px;padding: 0;display: block;}
	.event-cont>ul>li{line-height: 1.5;}
	.event-cont>ul>li>p:first-child{width: 100px;height: 36px;line-height: 36px;margin: 0 11px 0 0px;}
	.event-cont>ul>li>p:last-child{margin: 0px -3px 24px 0;padding-top: 5px;}

	.video {overflow: hidden;display: block;position: relative;width: 100%;height: 0;padding-top: 56.25%;}
	.video > iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

	/* 프로그램 */
	.program{font-size: 14px;}
	.program>div>p{padding: 18px 0;}
	.refer {font-size: 13px;}

	table.table01 {line-height: 18px;font-size: 13px;}
	table.table01>tbody>tr>th, .table01>tbody>tr>td {padding: 5px;}
	
	/* 초청연사 */
	.speaker-wrap{flex-direction: column;align-items: center;padding: 28px;border: 1px solid #e1e6f1;min-height: 250px;border-radius: 16px;background: #f6f8fd;text-align: center;margin-bottom: 20px;}
	.speaker-wrap>div:nth-child(1){margin-right: 0;width: 200px;}
	.speaker-wrap>div.speaker-photo>img{border-radius: 16px;}
	.speaker-wrap>div.speaker-txt{padding: 0;border: 0;min-height: auto;border-radius: 0;background: none;text-align: left;width: 100%;}
	.speaker-wrap>div.speaker-txt>div.speaker-name{margin-top: 19px;}
	.speaker-wrap>div.speaker-txt>div.speaker-name>p{display: block;text-align: center;font-weight: 600;font-size: 24px;}
	.speaker-wrap>div.speaker-txt>div.speaker-name>p:nth-child(2){margin-top: 7px;}

	.subject>h1{margin-bottom: 12px;line-height: 1.3;font-size: 18px;}
	.subject>h1>span{display: block;margin-bottom: 7px;text-align: center;width:70px;padding: 4px;font-size: 13px;}

	.tab-link>span{display: none;}

	/* 시상안내 */
	.award>h2:before {display: block;overflow: hidden;position: absolute;top: 5px;left: 0;width: 10px;height: 10px;border: 3px solid #258eba;border-radius: 10px;box-sizing: border-box;content: '';}
	.award>p {padding-left: 18px;}

	/* 참가신청 */
	.application{padding: 20px;word-break:break-all;}
	.application>.txt>p{font-size: 15px;line-height: 1.5;}
	.application>.txt>p:nth-child(n+2){margin-top: 15px;}
	.application>.txt>p>strong{display: inline;}
	.application>.txt>p>br{display:none !important;}
	.btn01 {font-size: 16px;padding: 16px 36px;}

	.gift{padding: 30px;text-align: center;}
	.gift-box>.gift-txt{width: auto;}
	.gift-box2>.refer{font-size: 13px;line-height: 1.5;}
	.gift-txt{font-size: 15px;}
	.gift-txt>h3{font-size: 21px;margin-bottom: 5px;}
	.gift-txt>p.refer{font-size: 14px;}
	.gift-txt>p>br{display:none !important;}
	.gift-txt>p>span.underline{font-size: 15.5px;}
	.gift-txt>p>span.theme {font-size: 14px;padding: 2px 15px;margin-bottom: 6px;}
	
	.gift-pic>ul {justify-content: center;}
	.gift-pic>ul>li{margin-bottom: 20px;}

	/* 오시는 길 */
	.map-text>h3{font-size: 18px;}
	.map-text>p{font-size: 14px;padding-left: 7px;line-height: 21px;}
	.map-text>p::before{width: 3px;height: 3px;}
	.map-area>iframe{height: 100px;margin-bottom: 20px;}
	
	ul.tab02{margin-bottom: 13px;}
	ul.tab02>li{font-size: 16px;padding: 10px 15px;}
	ul.tab02>li>i{display: none;}


	table.table02 {font-size: 14px;line-height: 1.7;}
	.table02>tbody>tr>th, .table02>tbody>tr>td{padding: 11px;}

	/* 풋터 */
	footer{padding: 25px 0;}
	footer>img{width: 110px;}
}

@media only screen and (max-width: 535px) {
	ul.tab01>li:nth-child(4){border-left: 0;}
	ul.tab01>li:nth-child(5){border-left: 1px solid #cecece;}
	.speaker-txt>ul>li {padding-left: 10px;}
}
@media only screen and (max-width: 435px) {
	ul.tab01>li:nth-child(4){border-left: 1px solid #cecece;}
	ul.tab01>li:nth-child(5){border-left: 0;}

	.sub-visual01 {height: 100px; background-position: -523px 0;background-size: 1424px 100px;}
	.sub-visual01 .sub-visual-bg{height: 100px;}
	.sub-visual01 .sub-visual-bg .txt01{left: 20px;top: 29px;width: 304px;height: 46px;background-size: 304px 46px;}
	.sub-visual01 .sub-visual-bg .txt02{display: none;}
}

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

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