@charset "utf-8";

body{position:relative; overflow-x:hidden; width:100%; min-height:100%; min-width:320px;}

.mask{visibility:hidden; opacity:0; z-index:90; display:block; position:fixed; top:0; left:0; width:0; height:0; background-color:rgba(0,0,0,0.8); transition:0.3s ease;}
.mask.on{visibility:visible; opacity:1; width:100%; height:100%;}

/*skip navigation*/
#skip_navigation{z-index:9999; position:absolute; left:0; top:0;}
#skip_navigation *{list-style:none; margin:0; padding:0;}
#skip_navigation a{display:block; width:1px; height:1px; overflow:hidden; color:#000; white-space:nowrap; text-align:center;}
#skip_navigation a:focus,
#skip_navigation a:active{width:100px; height:auto; background:#ffd;}

.inner{position:relative; width:1200px; margin:0 auto; box-sizing:border-box;}
.inner:after{content:''; display:block; clear:both;}

#top{position:relative; width:100%; font-size:15px; background:#dfdfdf;}
#top .global{float:left;}
#top .global li{position:relative; float:left; width:160px;}
#top .global li + li{border-left:1px solid #dfdfdf;}
#top .global li a{display:block; line-height:42px; color:#fff; text-transform:uppercase; text-align:center; background:#999;}
#top .global li a:hover{background:#777;}
#top .global li:first-child a{color:#474646; background:#fff;}

/* 검색*/
#search{position:absolute; top:4px; right:293px;}
#search form{width:250px; height:34px; padding:0 60px 0 0; border:1px solid #b8b6b6; border-radius:34px; background:#fff; box-sizing:border-box; transition:0.3s ease-in-out;}
#search input[type="text"]{width:100%; height:32px; padding:0 0 0 10px; border-radius:32px 0 0 32px; border:none; text-align:left; box-sizing:border-box;}
#search ::-webkit-input-placeholder{font-size:14px; color:rgba(0,0,0,0.3);}
#search :-ms-input-placeholder{font-size:14px; color:rgba(0,0,0,0.3);}
#search ::placeholder{font-size:14px; color:rgba(0,0,0,0.3);}
#search button{position:absolute; top:0; right:0; width:45px; height:35px; padding:0; font-size:0; border-radius:0 36px 36px 0; text-indent:-999px;}
#search button:before,
#search button:after{content:''; display:block; position:absolute; top:7px; left:12px; width:17px; height:17px; border:3px solid #969696; border-radius:50%; box-sizing:border-box;}
#search button:after{left:25px; top:22px; width:8px; height:3px; border:none; border-radius:2px; transform:rotate(45deg); background:#969696;}
#search .btn_search{display:none; position:absolute; top:0; right:2%; width:24px; height:24px; padding:0; font-size:0; text-indent:-999px;}
#search .btn_search:before,
#search .btn_search:after{content:''; display:block; position:absolute; top:0; left:0; width:20px; height:20px; border:3px solid #0e6db9; border-radius:50%; box-sizing:border-box; transition:0.3s ease;}
#search .btn_search:after{top:auto; left:auto; bottom:0; right:1px; width:10px; height:3px; border:none; border-radius:3px; transform:rotate(45deg); transform-origin:100% 100%; background:#0e6db9;}
#search.on .btn_search:before{top:auto; left:3px; bottom:2px; width:27px; height:27px; border-radius:0; transform:rotate(45deg); border:none; border-left:3px solid #0e6db9; transform-origin:0 100%;}
#search.on .btn_search:after{width:27px; border-radius:0;}

#font_control{float:right; padding:14px 0 0 0; font-size:13px; color:#777; font-weight:800;}
#font_control *{float:left;}
#font_control > .print{line-height:15px; padding: 0 0 0 21px; color:#777; background:url(/ostv/images/common/ico_print.png) no-repeat;}
#font_control > .print:after{content:''; display:inline-block; width:1px; height:10px; margin:0 8px 0 10px; background:#c9c9c9;}
#font_control h2{line-height:15px; padding:0 6px 0 0; font-weight:800;}
#font_control li{margin:0 5px 0 0;}
#font_control li a{width:16px; height:15px; line-height:38px; border:1px solid #c9c9c9; text-align:center; text-indent:-999px; font-size:0; box-sizing:border-box; background:#fff url(/ostv/images/common/ico_util.png) no-repeat -30px -1px;}
#font_control li.small a{background-position:-72px -1px;}
#font_control li.current a{background-position:-51px -1px;}
#font_control li a:hover{border-color:#555; background-color:#f8f8f8;}

#header{height:93px;}
.logo{z-index:86; position:absolute; top:61px; left:50%; margin:0 0 0 -600px; letter-spacing:-1px; font-weight:200; font-size:14px; color:#635f5f;}
.logo *{display:inline-block;}
.logo a{text-decoration:none;}
.logo .txt_sm{padding:17px 3px 0 0; vertical-align:top;}
.logo .txt_lg{padding:17px 0 0 0; font-size:19px; color:#4c4c4c; vertical-align:top;}
.logo strong{font-weight:900;}

/* gnb */
#gnb{z-index:85; overflow:hidden; position:absolute; left:0; top:42px; width:100%; height:93px; background:#fff; text-transform:uppercase;}
#gnb.on{box-shadow:0 15px 20px rgba(0,0,0,0.15);}
#gnb:before{content:''; display:block; position:absolute; top:91px; left:0; width:100%; height:2px; border-bottom:1px solid #e1e1e1; background:#ebebeb;}
#gnb .bar{z-index:3; position:absolute; top:88px; left:0; width:100%; height:6px; opacity:0; background:#3a73bd;}
#gnb.on .bar{transition:0.3s;}
#gnb .depth1 {padding:0 35px 0 38%; box-sizing:border-box;}
#gnb .depth1 > li{position:relative; float:left; width:25%; text-align:center;}
#gnb .depth1 > li:nth-child(4){width:24%;}
#gnb .depth1 > li > a{z-index:97; position:relative; display:block; line-height:93px; height:93px; font-size:19px; color:#312f2f; font-weight:700; text-decoration:none;}
#gnb .depth1 > li:hover .depth2{background:#f5f8fc;}
#gnb .depth1 > li > a:hover,
#gnb .depth1 > li > a:focus,
#gnb .depth1 > li.on > a{color:#3a73bd; font-weight:900;}

#gnb .depth2{width:100%; height:230px; padding:15px 0 0 12px; border-right:1px solid #ecf1f7; box-sizing:border-box; text-align:left;}
#gnb li:first-child .depth2{border-left:1px solid #ecf1f7;}
#gnb .depth2 a{display:block; margin:0 0 7px; letter-spacing:-1px;}
#gnb .depth2 > ul > li > a:hover,
#gnb .depth2 > ul > li > a:focus,
#gnb .depth2 > ul > li.on > a{color:#295cb0;}

#gnb_all{overflow:hidden; z-index:86; opacity:0; position:absolute; top:100%; left:0; width:100%; height:0; text-align:center; box-sizing:border-box; transition:0.5s ease; background:rgba(0,0,0,0.8);}
#gnb_all.on{opacity:1; top:0; height:100%;}
#gnb_all:before{z-index:-1; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#gnb_all a{display:block; color:#fff;}
#gnb_all > ul > li:hover > a,
#gnb_all a:hover{color:#ffee63;}
#gnb_all > ul {position:absolute; left:0; top:200px; width:100%;}
#gnb_all > ul > li{position:relative; display:inline-block; padding:0 30px; font-size:17px; vertical-align:top;}
#gnb_all > ul > li:before{content:''; position:absolute; top:5px; left:0; width:1px; height:15px; background:#fff;}
#gnb_all > ul > li:first-child:before{display:none;}
#gnb_all > ul > li > a{padding:0 0 20px; font:800 24px/120% "Noto Sans KR";}
#gnb_all ul li li{padding:8px 0;}

.btn_all{z-index:87; position:absolute; top:77px; right:50%; margin:0 -600px 0 0; padding:0;}
.btn_all .bar{display:block; width:30px; height:3px; margin:0 0 4px; background:#0e6db9; transition:0.3s ease; transform-origin:50% 50%;}
.btn_all .bar2{width:26px;}
.btn_all .bar3{width:21px;}
.btn_all.on .bar2{display:none;}
.btn_all.on .bar1{transform:rotate(45deg) translate(8px, 4px);}
.btn_all.on .bar3{width:30px; transform:rotate(-45deg) translate(1px, 3px);}

.util{float:right;}
.sns{z-index:86; float:left; padding:0 17px 0 0;}
.sns li{position:relative; float:left; padding:7px 0 0 5px; font-size:0; text-indent:-9999px;}
.sns li a{display: block; width:27px; height:27px; border-radius:50%; background:#00c300 url(/ostv/images/common/ico_sns.png) no-repeat 8px 6px;}
.sns .fb a{background-color:#4d6fa9; background-position:-24px 6px;}
.sns .tw a{background-color:#1ab2e8; background-position:-55px 6px;}
.sns a:hover,
.sns a:focus{background-color:#17b002;}
.sns .fb a:hover,
.sns .fb a:focus{background-color:#2b569f;}
.sns .tw a:hover,
.sns .tw a:focus{background-color:#0aa0e6;}

/* foot */
#footer{clear:both; width:100%; padding:35px 0; line-height:135%; font-weight:400; font-size:14px; color:#fff; background:#2d2d2d;}
#footer .link a{color:#fff; font-weight:700;}
#footer .link li{display:inline-block; vertical-align:top; line-height:100%; padding:0 10px 0 0; margin:0 7px 0 0; border-right:1px solid #585858;}
#footer .link li:last-child{border-right:none;}
#footer .privacy a{color:#4d6fa9;}
#footer address{padding:13px 0 2px; font-size:13px;}
#footer .copyright{font-size:13px; color:rgba(255,255,255,0.6); text-transform:uppercase;}

/* subvisual */
#subvisual{height:381px; border-top:1px solid #cecece; background:#ffe2ec url(/ostv/images/common/bg_subvisual.gif) no-repeat 50% 0;}
#subvisual .tit{position:relative; padding:31px 0 39px 170px; color:#464646; text-align:center; font-weight:100;}
#subvisual .tit:before,
#subvisual .tit div:before,
#subvisual .tit div:after{content:''; display:block; position:absolute; top:29px; left:50%; width:190px; height:111px; margin:0 0 0 -343px; background:url(/ostv/images/common/bg_sub1.png) no-repeat;}
#subvisual .tit div{position:relative; line-height:100%; padding:28px 0 7px; font-size:32px; color:#232323; letter-spacing:-2px;}
#subvisual .tit div:before,
#subvisual .tit div:after{top:0; width:38px; height:14px; margin:0 0 0 -19px; background:url(/ostv/images/common/bg_sub2.png) no-repeat;}
#subvisual .tit div:after{top:110%; margin:0 0 0 170px;}

#subvisual .list{float:left; width:223px; margin:0 0 0 21px;}
#subvisual .list:first-child{margin:0;}
#subvisual .list *{display:block;}
#subvisual .list > a{height:194px;  transition:0.3s ease; box-sizing:border-box; background:#fff;}
#subvisual .list .img{overflow:hidden; position:relative;}
#subvisual .list strong{position:absolute; bottom:0; left:0; width:106px; height:31px; line-height:31px; font-size:18px; color:#fff; background:#3a73bd; text-align:center;}
#subvisual .list img{max-width:100%; height:124px; margin:0 auto; transition:0.3s ease-in-out;}
#subvisual .list .sbj{overflow:hidden; height:44px; line-height:22px; margin:13px 10px 0 14px; font-size:17px; color:#706f6f; text-overflow:ellipsis; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
#subvisual .list a:hover,
#subvisual .list a:active,
#subvisual .list a:focus{margin:-6px 0 0 0; box-shadow:5px 5px 5px rgba(0,0,0,0.2);}
#subvisual .list a:hover strong{background:#1561c3;}

/* sub_tit */
#sub_tit {position:relative; padding:45px 0 24px 0; border-bottom:1px solid #ebebeb;}
#sub_tit > *{display:inline-block;}
#sub_tit h2{position:relative; margin:0 29px 0 0; line-height:100%; font-size:40px; font-weight:900; letter-spacing:-2px; color:#373636;}
#sub_tit h2:after{content:''; display:block; position:absolute; bottom:-32px; left:0; width:100%; height:3px; background:#3a73bd;}
#sub_tit .select{position:relative; font-size:25px; font-weight:900;}
#sub_tit .select a{padding:0 37px 0 15px; color:#787878;}
#sub_tit .select > a{text-decoration:none;}
#sub_tit .select > a:before,
#sub_tit .select > a:after{content:''; display:block; position:absolute; top:0; left:0; width:1px; height:20px; background:#ccc;}
#sub_tit .select > a:after{left:auto; right:0; width:24px; height:24px; transition:0.3s ease; background:url(/ostv/images/common/ico_util.png) no-repeat -1px -90px;}
#sub_tit .select > a.on,
#sub_tit .select a:hover{color:#333;}
#sub_tit .select > a.on:after{transform:rotate(180deg);}
#sub_tit .select ul{z-index:1; display:none; position:absolute; top:30px; left:0; padding:6px 0; font-size:24px; border:1px solid #ccc; border-radius:0 0 8px 8px; background:#fff;}
#sub_tit .select ul li a{display:block; line-height:130%;}
#sub_tit .select ul li a:hover{color:#fff; background:#3a73bd;}

.loc{float:right; margin:22px 0 0 0; color:#747171; font-weight:400;}
.loc *{display:inline-block; vertical-align:top;}
.loc span{position:relative; padding:0 0 0 20px; line-height:100%; font-size:15px;}
.loc span:before{content:''; display:block; position:absolute; top:50%; left:2px; width:9px; height:9px; margin:-4px 0 0 0; border-bottom:1px solid #a5a5a5; border-right:1px solid #a5a5a5; transform:rotate(-45deg);}
.loc span:last-of-type{font-weight:800;}
.loc .home{width:14px; height:14px; font-size:0; text-indent:-999px; background:url(/ostv/images/common/ico_util.png) no-repeat 0 -24px;}

.sub_content{max-width:1200px; margin:0 auto; padding:58px 0 97px;}

@media all and (max-width:1220px) {
	.inner,
	.sub_content{width:96%;}
	.btn_all{right:10px; margin:0;}

	.logo{left:10px; margin:0;}
	
	#top .global li{width:auto;}
	#top .global li a{padding:0 20px;}

	#subvisual .list{width:18.5%; margin:0 0 0 1.75%;}
}
@media all and (max-width:1024px) {
	img{max-width:100%;}
	.m{display:block;}
	.w{display:none;}
	
	#top{font-size:14px;}
	#top .inner{width:100%;}
	#top .global{padding:0 0 0 2%;}
	#top .global li a{line-height:35px;}
	
	.util{padding:0 2% 0 0;}
	.sns{padding:0;}
	.sns li{padding-top:4px;}

	#header{height:70px; border-bottom:1px solid #e6e6e6;}
	
	.logo{top:50px; left:0; width:100%; text-align:center;}
	.logo .txt_sm{display:none;}
	.logo .txt_lg{padding:1px 0 0 0; vertical-align:middle; font-size:24px; color:#333;}
	.logo img{height:40px;}
	
	.btn_all{top:62px; right:auto; left:2%;}

	#gnb {display:none;}
	#gnb_all{text-align:left; background:rgba(0,0,0,0.8);}
	#gnb_all.on{top:105px; height:calc(100% - 105px);}
	#gnb_all:before{display:none;}
	#gnb_all a,
	#gnb_all a:hover{color:#505050;}
	#gnb_all > ul {position:static; border-top:1px solid #295cb0; background:#fff;}
	#gnb_all > ul > li{display:block; padding:0; font-size:15px; border-bottom:1px solid #ccc;}
	#gnb_all > ul > li:before{display:none;}
	#gnb_all > ul > li:first-child:before{display:block;}
	#gnb_all > ul > li > a{position:relative; padding:0 0 0 20px; font:600 17px/60px "Nanum Square";}
	#gnb_all > ul > li > a:before{content:''; display:block; position:absolute; top:50%; right:20px; width:10px; height:10px; margin:-10px 0 0 0; border-right:2px solid #7a7a7a; border-bottom:2px solid #7a7a7a; transition:0.25s ease-in; transform:rotate(45deg);}
	#gnb_all > ul > li > a.on,
	#gnb_all > ul > li > a:hover{color:#0075cf;}
	#gnb_all > ul > li > a.on:before{width:16px; border-right:none; transform:rotate(0deg);}
	#gnb_all ul div{display:none; background:#f7f6ff;}
	#gnb_all ul li li{padding:0; border-top:1px solid #ccc;}
	#gnb_all ul li li a{line-height:50px; padding:0 0 0 34px;}
	
	#search{z-index:88; top:60px; right:0; width:100%;}
	#search:before{opacity:0; visibility:hidden; content:''; position:absolute; top:45px; left:50%; width:0; height:100%; transition:0.3s ease-in-out;}
	#search.on:before{opacity:1; visibility:visible; left:0; width:100%; background:rgba(0,0,0,0.8);}
	#search .btn_search{display:block;}
	#search form{visibility:hidden; opacity:0; position:absolute; top:46px; left:50%; width:0; height:83px; padding:20px 65px 0 20px; border-color:#37405b; background:#37405b;}
	#search.on form{opacity:1; visibility:visible; width:100%; left:0;}
	#search input[type="text"]{height:40px; line-height:40px;}
	#search button{top:20px; right:20px; height:40px; background:#5b6491;}
	#search button:before{top:9px; border-color:#fff;}
	#search button:after{top:24px; background:#fff;}
	#search form,
	#search input[type="text"],
	#search button{border-radius:0;}

	#footer {text-align:center;}
	#footer address{padding:15px 0 5px;}
	#footer .copyright{font-size:12px;}

	#sub_tit{padding:37px 0 12px;}
	#sub_tit h2{font-size:31px;}
	#sub_tit h2:after{bottom:-23px;}

	#sub_tit .select{font-size:22px;}
	#sub_tit .select > a:before{top:1px;}
	#sub_tit .select ul{font-size:21px;}
	
	.loc{margin:17px 0 0 0;}

	#subvisual{height:310px; font-size:14px; background-size:contain;}
	#subvisual .tit{padding:25px 0 30px 60px;}
	#subvisual .tit:before{top:23px; width:140px; margin:0 0 0 -310px; background-size:contain;}
	#subvisual .tit div{padding:18px 0 5px; font-size:28px;}
	#subvisual .list > a{height:156px;}
	#subvisual .list img{height:95px;}
	#subvisual .list strong{width:90px; font-size:16px;}
	#subvisual .list .sbj{margin:8px 8px 0 10px; font-size:15px;}

	.sub_content{padding:45px 0 70px;}
}
@media all and (max-width:768px) {
	#top{font-size:13px;}
	#top .global li a{line-height:32px; padding:0 12px;}

	.sns li{padding:3px 0 0 3px;}
	.sns li a{width:25px; height:25px; background-position:7px 5px;}
	.sns .tw a{background-position:-56px 5px;}

	#header{height:59px;}

	.logo {top:48px;}
	.logo .txt_lg{font-size:18px;}
	.logo .txt_lg strong{font-size:20px;}
	.logo img{height:31px;}
	
	.btn_all{top:53px;}

	#search{top:50px;}
	#search form{top:42px;}

	#gnb_all.on{top:91px; height:calc(100% - 91px);}
	#gnb_all > ul > li > a{line-height:53px;}
	#gnb_all ul li li a{line-height:46px;}

	#sub_tit{padding:34px 0 8px; text-align:center;}
	#sub_tit h2{margin:0 20px 0 0; font-size:26px;}
	#sub_tit h2:after{bottom:-8px;}

	#sub_tit .select{font-size:19px;}
	#sub_tit .select ul{font-size:18px;}
	#sub_tit .select ul li a{line-height:28px;}

	.loc{float:none; width:100%;}
	.loc span{padding:4px 0 0 15px; font-size:13px;}
	.loc span:before{left:-1px;}
	
	.sub_content{padding:40px 0 60px;}

	#subvisual{height:255px; font-size:13px;}
	#subvisual .tit{padding:18px 0 20px 40px;}
	#subvisual .tit:before{width:110px; height:80px; margin:0 0 0 -260px;}
	#subvisual .tit div:after{margin:0 0 0 140px;}
	#subvisual .tit div{padding:16px 0 2px; font-size:24px;}
	#subvisual .list > a{height:125px;}
	#subvisual .list img{height:70px;}
	#subvisual .list strong{width:77px; font-size:15px;}
	#subvisual .list .sbj{height:40px; line-height:20px; margin:7px 5px 0 7px; font-size:14px;}
}
@media all and (max-width:568px) {
	#footer span{display:block;}
	#footer .copyright{font-size:11px;}

	#sub_tit{padding:30px 0 7px;}
	#sub_tit h2{margin:0 15px 0 0; font-size:23px;}
	#sub_tit h2:after{bottom:-6px;}

	#sub_tit .select{font-size:16px;}
	#sub_tit .select > a:after{top:-1px;}
	#sub_tit .select ul{font-size:15px;}
	
	.loc span{font-size:12px;}

	.sub_content{padding:33px 0 55px;}

	#subvisual{height:240px; font-size:12px;}
	#subvisual .tit:before{top:23px; width:80px; height:50px; margin:0 0 0 -195px;}
	#subvisual .tit div:before, #subvisual .tit div:after{width:30px; background-size:contain;}
	#subvisual .tit div:after{margin:0 0 0 120px;}
	#subvisual .tit div{padding:15px 0 1px; font-size:20px;}
	#subvisual .list_wrap{overflow-x:auto; overflow-y:hidden; width:96%; margin:0 auto;}
	#subvisual .list_wrap .inner{width:567px;}
	#subvisual .list {width:105px;}
	#subvisual .list > a{height:123px;}
	#subvisual .list strong{height:28px; line-height:28px; width:77px; font-size:14px;}
	#subvisual .list .sbj{height:40px; line-height:20px; margin:7px 5px 0 7px; font-size:13px;}
}
@media all and (max-width:400px) {
	#top{font-size:12px;}

	.logo {top:49px;}
	.logo img{height:29px;}
	.logo .txt_lg{font-size:17px;}
	.logo .txt_lg strong{font-size:19px;}

	#gnb_all.on{height:calc(100% - 100px);}
	#gnb_all > ul > li{font-size:14px;}
	#gnb_all > ul > li > a{line-height:47px; font-size:15px;}
	#gnb_all ul li li a{line-height:42px;}

	#footer{font-size:13px;}
	#footer address{font-size:12px;}
	#footer .copyright{font-size:10px;}

	#sub_tit{padding:27px 0 6px;}
	#sub_tit h2{font-size:21px;}
	#sub_tit h2:after{bottom:-5px;}

	#sub_tit .select{font-size:15px;}
	#sub_tit .select a{padding:0 35px 0 12px;}
	#sub_tit .select > a:after{top:-2px;}
	#sub_tit .select ul{font-size:14px;}

	.loc{margin:15px 0 0 0;}
	.loc span{font-size:11px;}
	
	#subvisual{height:223px; font-size:11px;}
	#subvisual .tit{padding:16px 0 20px 40px;}
	#subvisual .tit:before{top:27px; width:55px; margin:0 0 0 -160px;}
	#subvisual .tit div:after{margin:0 0 0 100px;}
	#subvisual .tit div{font-size:19px;}
	#subvisual .tit p{line-height:140%;}
	#subvisual .list > a{height:120px;}
	#subvisual .list strong{height:26px; line-height:26px; width:72px; font-size:13px;}
	#subvisual .list .sbj{height:38px; line-height:19px; margin:6px 5px 0 6px; font-size:12px;}

	.sub_content{padding:30px 0 52px;}
}
@media all and (max-width:380px) {
	#top .global li a{padding:0 7px;}
}