@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {width:100%; max-width:1000px; margin:0 auto;}
.contain:after {content:" "; display:block; clear:both;}

/* header */
#header {position:relative; z-index:100;}
.global {height:30px; background:linear-gradient(to right, #0150e1, #9001bd 60%);}
.global .sns {float:left;}
.global .sns li {float:left; color:#dfdfdf; font-size:12px; line-height:30px; padding:0 10px;}
.global .sns a {color:inherit;}
.global .sns img {position:relative; margin:-.2em 0 0; vertical-align:middle;}
.global .sns .fa {font-size:1.7em; vertical-align:middle;}
.global .sns .blog {font-size:17px; font-weight:800;}
.global .bnr {float:right; display:flex; align-items: center;}
.global .bnr a {padding: 0 9px; line-height: 30px; transition: none;}
.global .bnr a img {vertical-align:middle;}
.global .bnr .hoverimg {display: none;}
.global .bnr a:hover {background: #ffff;}
.global .bnr a:hover .hoverimg {display: block;}
.global .bnr a:hover .offimg {display: none;}
/* .global .bnr a {margin-left:20px;}
.global .bnr a:first-child{margin-left:0;} */
/* .global .bnr a:nth-child(1),
.global .bnr a:nth-child(2) {position:relative; margin-top:2px;}
.global .bnr a:nth-child(4) {position:relative; margin-top:1px;}  */
.gnb-wrap {position:relative;background:#fff; border-bottom:1px solid #dedede; z-index:2;}
.gnb-wrap .contain {position:relative; z-index:10;}
.sitelogo {display:block; text-align:center; height:79px; padding-top:24px;}


#gnb:after {content:" "; display:block; clear:both;}
#gnb > ul {display:flex; background:url("../images/common/gnb_vline.png") 100% 50% no-repeat;}
#gnb > ul > li {flex:1 0 auto; position:relative; text-align:center; background:url("../images/common/gnb_vline.png") 0 50% no-repeat;}
#gnb > ul > li > a {display:flex; align-items:center; justify-content:center; height:70px; color:#555; font-size:16px; font-weight:700; line-height:1.3em; letter-spacing:-.025em;}
#gnb > ul > li > a > .ico {display:none;  position:relative; margin:-.3em 4px 0 0; width:35px; height:35px; background-position:50% 50%; background-repeat:no-repeat; vertical-align:middle;}
#gnb > ul > li > a > .ico1 {background-image:url("../images/common/gnb_icon2_off2.png");}
#gnb > ul > li > a > .ico2 {background-image:url("../images/common/gnb_icon3_off2.png");}
#gnb > ul > li > a > .ico3 {background-image:url("../images/common/gnb_icon4_off2.png");}
#gnb > ul > li > a > .ico4 {background-image:url("../images/common/gnb_icon5_off2.png");}
#gnb > ul > li > a > .ico5 {background-image:url("../images/common/gnb_icon6_off2.png");}
#gnb > ul > li > a > .ico6 {background-image:url("../images/common/gnb_icon1_off2.png");}
/*#gnb > ul > li:nth-child(1) {width:180px;}*/
#gnb > ul > li.active > a {background-image:linear-gradient(to top, #0150e1, #9001bd 70%); background-clip:text; -webkit-background-clip:text; color:transparent;}
#gnb > ul > li.active > a > .ico1 {background-image:url("../images/common/gnb_icon2_on2.png");}
#gnb > ul > li.active > a > .ico2 {background-image:url("../images/common/gnb_icon3_on2.png");}
#gnb > ul > li.active > a > .ico3 {background-image:url("../images/common/gnb_icon4_on2.png");}
#gnb > ul > li.active > a > .ico4 {background-image:url("../images/common/gnb_icon5_on2.png");}
#gnb > ul > li.active > a > .ico5 {background-image:url("../images/common/gnb_icon6_on2.png");}
#gnb > ul > li.active > a > .ico6 {background-image:url("../images/common/gnb_icon1_on2.png");}
#gnb .submenu {display:none; padding:0 35px; padding-right: 0; position:absolute; top:71px; left:0; width:100%; }
#gnb .submenu ul {padding:20px 15px; padding-right: 0;}
#gnb .submenu ul li a {display:block; color:#555; font-size:13px; line-height:26px; text-align:left;font-weight: bold;}
#gnb .submenu ul li a:hover {background-image:linear-gradient(to top, #0150e1, #9001bd 70%); background-clip:text; -webkit-background-clip:text; color:transparent;}

.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #eee;}

/* 250717 */
/* 인트로페이지 */
.scroll-hide { overflow: hidden !important; }
.intro-container { width: 100%; height: 100%; position: fixed; z-index: 3200; overflow: hidden; background: linear-gradient(to right, #0150e1, #9001bd); mask: url(#finalRevealMask); -webkit-mask: url(#finalRevealMask); }
.intro-container .logo-wrap { width: 50%; max-width: 820px; position: absolute; bottom: 38%; left: 50%; transform: translate(-50%, -50%); z-index: 3301; }
.intro-container .logo-wrap img { width: 100%; position: absolute; bottom: 0; left: 0; opacity: 0; }
.intro-container .line-wrap { width: 1px; height: 35vh; position: absolute; left: 50%; z-index: 3300; bottom: 0; transform: translateX(-50%); opacity: 0; }
.intro-container .line-bg { position: absolute; width: 100%; height: 100%; background-color: #fff; opacity: 0.3; }
.intro-container .line-inner { width: 1px; height: 0; background-color: #fff; position: absolute; left: 0; bottom: 0; }
.intro-container .line-dot { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background-color: white; transform: translateX(-50%); }
.intro-container .circle-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 3300; pointer-events: none; }
.intro-container .line-wrap .line-bg,
.intro-container .line-wrap .line-inner { width: 4px; }
.intro-container .line-wrap .line-dot { width: 18px;  height: 18px;   left: 50%; transform: translateX(-50%); }
.intro-container .line-inner {left: 50%; transform: translateX(-50%);}
.intro-container .line-bg {left: 50%; transform: translateX(-50%);}



/* for mobile */
#menu.active {left:0;}
#menu {position:fixed; top:0; left:-260px; width:260px; height:100%; background:#fff; overflow:auto; transition: all 0.2s ease-in-out; z-index:10001;}
#menu .head {padding:15px; text-align:right;}
#menu .close .fa {display:block;  background-image:linear-gradient(to top, #0150e1, #9001bd 70%); background-clip:text; -webkit-background-clip: text; color: transparent; font-size:2.2em}
#menu .nav-menu {border-top:2px solid  transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #0150e1, #9001bd); background-origin:border-box; background-clip: content-box, border-box;}
#menu .nav-menu>ul>li {border-bottom:1px solid #b9b9b9;}
#menu .nav-menu>ul>li>a {position:relative; display:block; padding:12px 15px; color:#000; font-size:16px; font-weight:700; line-height:1.3em;}
#menu .nav-menu>ul>li>a>i {position:relative; font-size:1.4em; color:#afafaf; margin:-.2em 10px 0 0;}
#menu .nav-menu .submenu {display:none; background:#f9f9f9;}
#menu .nav-menu .submenu li {border-top:1px solid #b9b9b9;}
#menu .nav-menu .submenu li a {display:block; position:relative; padding:10px 15px 10px 55px; font-size:13px; line-height:1.3em; border-bottom:0;}
#menu .nav-menu .submenu li a:after {content:" "; position:absolute; left:43px; top:16px; width:5px; height:1px; background:#000;}
#menu-overlay.active {display:block;}
#menu-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; z-index:1000;}
.btn-menu {position:absolute; top:12px; left:30px;  background-image:linear-gradient(to top, #0150e1, #9001bd 70%); background-clip:text; -webkit-background-clip: text; color: transparent;  z-index:20;}
.btn-menu .fa {display:block; font-size:2.2em}

/* main */
body.main #container {width:100%; max-width:1000px; margin:0 auto; padding:30px 0;}

.home-section {position:relative; margin-bottom:40px; padding:14px; border:1px solid #b5b5b5;}
.home-section .br {position:absolute; width:60px; height:60px; border-image:linear-gradient(to top, #0150e1, #9001bd 70%); border-image-slice:1;}
.home-section .br-t-l {top:-1px; left:-1px; border-top:5px solid transparent; border-left:5px solid transparent;}
.home-section .br-t-r {top:-1px; right:-1px; border-top:5px solid transparent; border-right:5px solid transparent;}
.home-section .br-b-l {bottom:-1px; left:-1px; border-bottom:5px solid transparent; border-left:5px solid transparent;}
.home-section .br-b-r {bottom:-1px; right:-1px; border-bottom:5px solid transparent; border-right:5px solid transparent;}
.home-section .video-container {position:relative; z-index:2;}
.home-section .cnt {position:relative; z-index:2; margin-top:10px; overflow:hidden;}
.home-section .cnt:after {content:" "; display:block; clear:both;}
.home-section .cnt .tt {float:left; margin-left:0; width:134px; height:36px; background:url("../images/main/onair2.png") 0 0 no-repeat; overflow:hidden; font-size:0; line-height:0; text-indent:-999em;}
.home-section .cnt ul {margin-left:144px; margin-right:-10px;}
.home-section .cnt ul:after {content:" "; display:block; clear:both;}
.home-section .cnt ul li {float:left; position:relative; width:33.3333333%; padding:0 10px; text-align:center; color:#555; font-size:16px; font-weight:700; line-height:36px;position:relative;}
.home-section .cnt ul li:not(:last-child):after {position:absolute; content:'';right:0; top:50%; transform:translatey(-50%);width:1px; height:25px; background:#ddd;}
.home-section .cnt ul li i {position:absolute; top:1px; right:0; color:#ddd; font-size:2em; line-height:1.2em;}
.home-section .cnt .time {margin-right:14px;}
.home-section .cnt .label {display:inline-block;position:relative;margin:-.1em 0 0 2px;vertical-align:middle;width:33px;height:17px;text-align:center;line-height:17px;font-size:12px;color:#fff;background:url("../images/main/label.png") 0 0 no-repeat;}

.poster-section {margin-bottom:40px; border:1px solid #dedede; background:#f2f2f2;}
.poster-section .slide a {display:block; overflow:hidden;}
.poster-section .thumb {float:left; width:71.5%;}
.poster-section .thumb img {width:100%;}
.poster-section .info {float:left; width:28.5%; padding:26px 45px 26px 30px;}
.poster-section .info .tit {margin-bottom:15px; color:#000; font-size:24px; line-height:1.2em;}
.poster-section .info dl dt {width:55px; height:25px; color:#fff; font-size:14px; font-weight:700; line-height:25px; text-align:center; background:#333; border-radius:4px;}
.poster-section .info dl dd {padding-top:5px; font-size:14px; line-height:1.3em;}
.poster-section .info dl.bro {margin-bottom:15px;}
.poster-section .info dl.bro dt {background:#0150e1;}
.poster-section .info dl.rebro dt {background:#9001bd;}
.poster-section .info .time {margin-bottom:15px; font-size:14px; line-height:1.3em;}
.poster-section .info .description {color:#777; font-size:13px; line-height:1.5em;}
.poster-section .bx-wrapper .bx-controls-direction a {margin-top:-24px; width:48px; height:48px; z-index:50;}
.poster-section .bx-wrapper .bx-prev {left:15px; background:url("../images/main/slide_prev2.png") 50% 50% no-repeat; background-size:contain;}
.poster-section .bx-wrapper .bx-next {right:15px; background:url("../images/main/slide_next2.png") 50% 50% no-repeat; background-size:contain;}

.program-section {margin-bottom:20px; overflow:hidden;}
.program-section .tit + .bar {margin:20px 0 10px; width:100%; height:5px; background:linear-gradient(to right, #0150e1, #9001bd 60%);}
.program-section ul {margin:0 -10px;}
.program-section ul:after {content:" "; display:block; clear:both;}
.program-section ul li {float:left; width:50%; padding:10px;}
.program-section ul li a {display:block; overflow:hidden; border:1px solid #dedede;}
.program-section .thumb {float:left; width:42%; border-right:1px solid #dedede;}
.program-section .thumb img {width:100%;}
.program-section .info {float:left; width:58%; padding:10px 20px;}
.program-section .info h3 {margin-bottom:10px; font-size:16px; font-weight:700; line-height:1.2em;}
.program-section .info p {max-height:48px; color:#777; font-size:13px; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}

.comm-section {margin-bottom:30px; overflow:hidden;}
.comm-section .row {margin:0 -10px;}
.comm-section .row:after {content:" "; display:block; clear:both;}
.comm-section .col {float:left; width:50%; padding:0 10px;}
.comm-section .notice {border:1px solid #ddd; position:relative; height:70px; padding:15px; color:#0150e1; overflow:hidden;}
.comm-section .notice:after {content:"+"; position:absolute; top:50%; right:13px; transform:translateY(-50%); z-index:20; font-size:30px; font-weight:700; color:#0150e1;}
.comm-section .notice a {color:inherit;}
.comm-section .notice h2 {float:left; font-size:18px; line-height:40px;}
.comm-section .notice .list {position:relative; height:20px; overflow:hidden; margin-left:80px; margin-right:30px; margin-top:10px;}
.comm-section .notice .list li {height:20px; font-size:13px; line-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.comm-section .notice .list li a {margin-left:6px;}
.comm-section .notice .more {position:absolute; top:50%; right:12px; margin-top:-9px;}
.comm-section .sns {position:relative; height:70px; border:1px solid #ddd; overflow:hidden;}
.comm-section .sns .txt {position:absolute; top:14px; left:20px;}
.comm-section .sns a {position:absolute; top:50%; right:17px; margin-top:-14px; padding:0 14px; border-radius:3px; border:1px solid #9712c1; color:#9712c1; font-size:14px; font-weight:700; line-height:28px;}
.comm-section .sns a i {position:relative; vertical-align:middle; margin:-.2em 3px 0 0; color:#9712c1; font-size:.7em;}

.link-section {margin-bottom:30px; overflow:hidden;}
.link-section .row {margin:0 -10px;}
.link-section .row:after {content:" "; display:block; clear:both;}
.link-section .left {float:left; width:29.5%; padding:0 10px;}
.link-section .right {float:left; width:70.5%; padding:0 10px;}

.link-zone .col {margin-top:20px;}
.link-zone .col.first {margin-top:0;}
.link-zone a {display:table; width:100%; height:106px; border:1px solid #dedede; font-size:12px; line-height:18px; background-position:27px 50%; background-repeat:no-repeat;}
.link-zone a:first-child {margin-top:0;}
.link-zone a.icon1 {background-image:url("../images/main/bnr_icon1.png");}
.link-zone a.icon2 {background-image:url("../images/main/bnr_icon2.png");}
.link-zone .cell {display:table-cell; width:100%; height:100%; vertical-align:middle; padding:10px 25px 10px 110px;}
.link-zone h3 {color:#000; font-size:16px; line-height:1.2em; margin-bottom:10px;}

.channel-zone {height:232px; border:1px solid #dedede; overflow:hidden;}
.channel-zone .tabs {overflow:hidden;}
.channel-zone .tabs li {float:left; width:50%; background:#eee; border-left:1px solid #dedede; border-bottom:1px solid #dedede;}
.channel-zone .tabs li:first-child {border-left:0;}
.channel-zone .tabs li a {display:block; text-align:center; color:#000; font-size:16px; font-weight:700; line-height:39px;}
.channel-zone .tabs li.active {border-bottom:0; background:none;}
.channel-IPTV {margin-top:35px;}
.channel-IPTV li {float:left; width:25%; height:123px; padding:16px 5px; text-align:center; font-size:20px; font-weight:700; line-height:1.2em; border-left:1px solid #e1e1e1}
.channel-IPTV li:first-child {border-left:0;}
.channel-IPTV li img {display:block; margin:0 auto 7px; max-width:90%;}
.channel-IPTV li big {font-family:'Noto Sans KR'; color:#9001bd ; font-size:36px; font-weight:700; line-height:inherit;}
.channel-CableTV {padding:14px 6px 0;}
.channel-CableTV .col {float:left; width:33.33333333%; padding:0 5px;}
.channel-CableTV .step {margin-bottom:6px; padding:0 5px; overflow:hidden; background:#30426a; color:#fff; font-size:13px; line-height:31px;}
.channel-CableTV .step .label {display:inline-block; position:relative; margin:-.2em 2px 0 0; vertical-align:middle; width:53px; height:20px; font-size:12px; line-height:20px; font-weight:700; text-align:center; padding-right:5px; background:url("../images/main/label3.png") 0 0 no-repeat;}
.channel-CableTV .step img {position:relative; vertical-align:middle; margin:-.2em 2px 0 0;}
.channel-CableTV .wrap {position:relative; height:125px; border:1px solid #e1e1e1; overflow:auto;}
.channel-CableTV .wrap ul {overflow:hidden;}
.channel-CableTV .wrap ul li {float:left; display:table; width:33.3333333%; height:27px; border:1px solid #e1e1e1; border-top:0; border-left:0; font-size:11px; line-height:13px; letter-spacing:-.03em; text-align:center; overflow:hidden;}
.channel-CableTV .wrap ul li a {display:table-cell; width:100%; height:100%; vertical-align:middle;}
.channel-CableTV .wrap ul li a.on {color:#fff; background:linear-gradient(to right, #0150e1, #9001bd 70%);}
.channel-CableTV .wrap ul li:nth-child(3n){border-right:0;}
.channel-CableTV table {width:100%; border-collapse:collapse; border-spacing:0px;}
.channel-CableTV table td {height:27px; border:1px solid #e1e1e1; font-size:12px; line-height:27px; letter-spacing:-.03em; text-align:center;}
.channel-CableTV table td a {display:block; height:27px; overflow:hidden;}
.channel-CableTV table td a.on {color:#fff; background:#e1666c;}
.channel-CableTV table tr:first-child td {border-top:0;}
.channel-CableTV table tr:last-child td {border-bottom:0;}
.channel-CableTV table tr td:first-child {border-left:0;}
.channel-CableTV table tr td:last-child {border-right:0;}
.channel-CableTV .channel {padding:7px 0; margin:0 10px; text-align:center; border-bottom:1px solid #e6e6e6; overflow:hidden;}
.channel-CableTV .channel .cell {float:left; width:50%; padding:0 2px;}
.channel-CableTV .channel .num {margin-top:5px; font-size:18px; font-weight:700; line-height:1.2em; letter-spacing:-1px;}
.channel-CableTV .channel .num big {color:#9001bd; font-size:29px; line-height:inherit;}
.channel-CableTV .info {padding:5px 10px; margin:0 10px;}
.channel-CableTV .info a {color:#9001bd; text-decoration:underline;}

.bnr-section {position:relative; padding:0 40px;}
.bnr-section .rolling {position:relative; height:70px; overflow:hidden;}
.bnr-section .rolling ul {width:9999px;}
.bnr-section .rolling ul li {float:left; margin-right:18px;}
.bnr-section .rolling ul li img {height:70px;}
.bnr-section .ctr a {position:absolute; top:3px; background-image:linear-gradient(to top, #0150e1, #9001bd 70%); background-clip:text; -webkit-background-clip: text; color: transparent; font-size:4.5em;}
.bnr-section .ctr a.prev {left:0;}
.bnr-section .ctr a.next {right:0;}

.wing.fixed {position:fixed; top:20px;}
.wing {position:absolute; top:210px; width:94px; z-index:20;}
.wing li {margin-bottom:5px;}
.wing-left {right:50%; margin-right:510px;}
.wing-right {left:50%; margin-left:510px;}

.wind-model {position:fixed; left:50%; bottom:0; margin-left:581px; z-index:10;}

/* sub */
.sub-title {border-bottom:1px solid #e8d7be; background:#f8f3eb;}
.sub-title .contain {position:relative; height:80px; overflow:hidden;}
.sub-title .bg0 {background:url("../images/common/sub_tit_bg0.png") 47px 0 no-repeat;}
.sub-title .bg1 {background:url("../images/common/sub_tit_bg1.png") 48px 0 no-repeat;}
.sub-title .bg2 {background:url("../images/common/sub_tit_bg2.png") 29px 0 no-repeat;}
.sub-title .bg3 {background:url("../images/common/sub_tit_bg3.png") 33px 0 no-repeat;}
.sub-title .bg4 {background:url("../images/common/sub_tit_bg4.png") 42px 0 no-repeat;}
.sub-title h2 {display:inline-block; margin:30px 13px 0 12px; color:#2e2926; font-size:30px; line-height:1.2em;}
.sub-title p {display:inline-block; color:#706f6d; font-size:11px; line-height:1.2em;}
.sub-title .path {position:absolute; bottom:10px; right:0; color:#555; font-size:13px; line-height:1.2em;}
.sub-title .path i {position:relative; margin:-.1em 0 0 0; color:#7a7a7a; font-size:1.1em; vertical-align:middle;}
.sub-title .path .arrow {margin:0 3px;}
.real-cont {width:100%; max-width:1000px; margin:0 auto; min-height:580px; _height:580px; padding:50px 0;}

.sub-menu {margin-bottom:40px;}
.sub-menu .depth1 {border-bottom:1px solid #dedede; text-align:center;}
.sub-menu .depth1 > ul {display:inline-block; vertical-align:top;}
.sub-menu .depth1 > ul > li {display:inline; position:relative; vertical-align:top;}
.sub-menu .depth1 > ul > li > a {float:left; min-width:170px; margin-right:-1px; text-align:center; padding:0 5px; font-size:14px; font-weight:700; line-height:36px; border:1px solid #dedede; border-bottom:0;}
.sub-menu .depth1 > ul > li.active > a {background:linear-gradient(to right, #0150e1, #9001bd 70%); color:#fff;}
.sub-menu .depth2 {margin-top:11px;}
.sub-menu .depth2:after {content:" "; display:block; clear:both;}
.sub-menu .depth2 ul {float:left;}
.sub-menu .depth2 ul li {float:left; padding-left:33px; background:url("../images/common/vline.gif") 16px 50% no-repeat;}
.sub-menu .depth2 ul li:first-child {background:none; padding-left:0;}
.sub-menu .depth2 ul li a {display:block; font-size:14px; line-height:20px;}
.sub-menu .depth2 ul li.on a {color:#e1666c; border-bottom:1px solid #e1666c}
.sub-menu .depth2.m2 ul {margin-left:42%;}
.sub-menu .depth2.m5 ul {float:right; margin-right:20px;}

/* footer */
#footer {clear:both;}
#footer address {font-style:normal;}
.foot-link {padding:7px 0; background:linear-gradient(to right, #0150e1, #9001bd 60%); text-align:center; color:#fff; font-size:13px; font-weight:700; line-height:21px;}
.foot-link a {color:inherit;}
.foot-link li {display:inline-block; padding:0 12px 0 13px; margin:0 -2px; position:relative; vertical-align:top;}
.foot-link li:after {content:" "; position:absolute; top:50%; left:0; margin-top:-5px; width:1px; height:10px; background:#fff;}
.foot-link li:first-child::after {display:none;}
.foot-info {padding:25px 0; background:#f2f2f2;}
.foot-info .f-logo {float:left; margin:4px 0 0 25px;}
.foot-info .f-info {margin-left:282px; font-size:12px; line-height:18px;}