﻿@charset "utf-8";

@font-face {
  font-family: 'Nanum Myeongjo';
  font-style: normal;
  font-weight: 600;
  src: url(http://fonts.gstatic.com/ea/nanummyeongjo/v4/NanumMyeongjo-Bold.eot);
  src: url(http://fonts.gstatic.com/ea/nanummyeongjo/v4/NanumMyeongjo-Bold.eot?#iefix) format('embedded-opentype'),
       url(http://fonts.gstatic.com/ea/nanummyeongjo/v4/NanumMyeongjo-Bold.woff2) format('woff2'),
       url(http://fonts.gstatic.com/ea/nanummyeongjo/v4/NanumMyeongjo-Bold.woff) format('woff'),
       url(http://fonts.gstatic.com/ea/nanummyeongjo/v4/NanumMyeongjo-Bold.ttf) format('truetype');
}
@font-face{
font-family:"NanumGothic";
    src: url('/fonts/NanumGothic.eot'); 
    src: url('/fonts/NanumGothic.eot') format('embedded-opentype'),
		 url('/fonts/NanumGothic.woff') format('woff');
}

@font-face{
font-family: "NanumGothicBold";
    src: url('/fonts/NanumGothicBold.eot'); 
    src: url('/fonts/NanumGothicBold.eot') format('embedded-opentype'),
		 url('/fonts/NanumGothicBold.woff') format('woff');
}
html {width:100%;height:100%;overflow-x:hidden}
body {
	font-family:'NanumGothic';
	background:#aadcf9;
	text-align:center;
	position:relative;
	overflow-x:hidden;
	background:url('/image/together/advertise/bg_advertise.jpg') 0 0 no-repeat;

}
h1,h2,h3,h4,h5,h6,strong {font-family:'NanumGothicBold';font-weight:normal;}
button {border:0 none;background:transparent;}

body *{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
#wrapper {width:960px;margin:30px auto 0;text-align:center;}
.bgBody {position:absolute;top:0;left:0;z-index:-1;}

#header {text-align:left;}
#header h1 {color:#30323e;font-size:30px;font-family:"Nanum Myeongjo";margin-bottom:15px}
#header h1 a img {width:100px;margin:-17px 15px 0 0;}
#header * {vertical-align:middle;}

#contents {font-size:20px;w}
#contents .movie .content {width:100%;position:relative;padding-bottom: 56.25%;/* background:#000; */}
#contents .movie .content iframe {position:absolute;width:100%;height:100%;top:0;left:0;}
#contents .movie .playBtn {position:absolute;top:50%;left:50%;margin:-55px 0 0 -55px;background:url('/image/together/advertise/btn_play01.png') no-repeat;width:110px;height:110px;text-indent:-9999px;display:none;}


#contents .text {position:relative;color:#fff;margin-top:20px;padding:25px;background:url('/image/together/advertise/bg_opa06_000.png') repeat;text-align:left;}
#contents .text h2 {color:#fff;font-size:24px;border-bottom:1px solid #fff;}
#contents .text ul {margin-top:20px;}
#contents .text ul > li {font-size:13px;}
#contents .text .link {
	position:absolute;
	bottom:10px;
	right:35px;
	padding-top:30px;
	width:115px;
	height:115px;
	background:url('/image/together/advertise/bg_circle.png') no-repeat;
	background-size:100% 100%;
	text-align:center;

}
#contents .text .link p {font-size:11px;color:#30323e;}
#contents .text .link a {display:block;margin-top:2px;color:#30323e;text-decoration:underline;font-size:15px;font-family: "NanumGothicBold";}
.txtSub {margin-top:15px;}


#playList a.toggle-list {
	position:absolute;
	display:block;
	top:10px;
	left:-40px;
	width:40px;
	height:39px;
	background:url('/image/together/advertise/bg_gnb_toggle.png') 0 0 no-repeat;
}
#playList {
	position:absolute;
	top:0;
	right:-270px;
	width:270px;
	height:100%;
	z-index:20;
	background:url('/image/common/bg_opa/bg_opa_b80.png') 0 0 repeat;
	padding:50px 30px;
}
.ie7 #playList {right:-330px;}

#playList.act a.toggle-list {
	background-position:0 -41px;

}
#playList h3 {font-size:18px;color:#ddd;font-weight:bold;text-align:left;margin-bottom:20px;}
#playList ul {height:93%;overflow:auto;}
#playList li {margin-top:20px;color:#ddd;cursor:pointer}
#playList li:first-child {margin-top:none}
#playList li div.movie {position:relative;}
#playList li div.movie .playBtn {
	position:absolute;
	top:50%;
	left:50%;	
	width:39px;
	height:39px;
	margin-top:-19px;
	margin-left:-19px;
	text-indent:-9999px;
	background:url('/image/together/advertise/btn_play02.png') no-repeat;
	display:none;
}
#playList li div.movie img {width:100%;}
#playList li p {padding:7px 7px 0 7px}
#playList li span {padding:0 7px}

#footer {text-align:center;width:100%;font-size:15px;font-weight:bold;margin-top:30px;}
span.more {display:none;}


@media all and (max-width:1024px){
	body {height:100%;}
	#wrapper {width:90%;margin:30px auto 0 auto;overflow-x:hidden}
	#header h1 {font-size:25px;width:85%;padding-top:25px;font-size:20px;}
	#header h1 a {display:block;width:100px;position:absolute;top:20px;left:10px;}

	#contents .text .link {display:none;}
	#contents .text ul {height: 52px;overflow: hidden;}
	span.more {display:block;position:absolute;right:10px;bottom:5px;color:#fff;font-size:20px;font-weight:bold;cursor:pointer;}
	#contents .text h2 {font-size:18px;}
	
	#footer {margin-top:30px;}
	#footer p {font-size:13px;}
}

@media all and (max-width:680px){
	#footer {padding:15px 0}
	#footer p:first-child {display:none}
}
@media all and (max-width:639px){
	#wrapper {width:93%;}
	#playList {padding:50px 20px;}
}
