#wrap {font-size:13px; font-family: 'Nanum Gothic', sans-serif;}

.visual {float:none; position:relative; width:100%; height:450px; overflow:hidden}
.visual .swiper-slide {background-repeat:no-repeat; background-position:center top}
.visual .swiper-slide .xptSlide {position:relative; width:1100px; height:450px; margin:0 auto}
.visual .swiper-slide .xptSlide ul {position:absolute; top:45px; left:65px; width:540px; height:320px; padding:20px; border:1px solid rgba(0,0,0,.2); background-color:rgba(255,95,95,.8); z-index:10}
.visual .swiper-slide .xptSlide ul .xpt-intro {height:180px; padding-top:20px}
.visual .swiper-slide .xptSlide ul .xpt-intro p {position:relative; margin-bottom:5px; color:#fff; font-size:18px; padding-left:20px}
.visual .swiper-slide .xptSlide ul .xpt-intro p::before {content:'▶'; position:absolute; display:block; top:6px; left:0; font-size:10px}
.visual .swiper-slide .xptSlide ul .xpt-recom p {display:inline-block; margin-right:10px; font-size:30px; letter-spacing:-.05em; color:#fff}
.visual .swiper-slide .xptSlide ul .xpt-recom p span {color:#faffbd}

.container { width:100%; padding-bottom:20px; padding-top:10px; background:#f2f4f7;}
.container::after {content:''; display:block; clear:both }

#PopDb {display:none;}
#PopDb:before {content:''; display:block; position:fixed; top:0; bottom:0; left:0; width:100%; background:rgba(0,0,0,.5); z-index:1000}
#PopDb > div {position:fixed; top:50%; left:50%; width:640px; height:480px; margin:-320px 0 0 -240px; border:1px solid #999; box-shadow:2px 2px 2px rgba(0,0,0,.3); background:#fff; z-index:1001}
#PopDb .xptInfo {position:relative; height:200px; background:url(../images2/pop_top.png) no-repeat #67bbc4}
#PopDb .xptInfo .pic { position:absolute; top:20px; right:50px; width:200px; height:200px; border:none; border-radius:100px; background:rgba(255,255,255,.5); overflow:hidden}
#PopDb .xptInfo .pic img {margin-left:-20px}
#PopDb .xptInfo dl { position:absolute; bottom:20px; left:50px}
#PopDb .xptInfo dl dt {font-size:24px; font-family:"Noto Sans KR"; color:#fff; margin-bottom:10px;}
#PopDb .xptInfo dl dd {font-size:18px; color:#fff; margin-bottom:5px}
#PopDb .callBox {text-align:center; padding-top:80px}
#PopDb .callBox li { width:400px; height:60px; margin:0 auto 5px; color:#777}
#PopDb .callBox li a {color:#999}
#PopDb .callBox input[type=text] {width:400px; height:60px; padding:0 5px; border:1px solid #ccc; border-radius:5px; font-size:24px; font-family:"Noto Sans KR"}
#PopDb .callBox input[type=button] {float:left; width:100px; height:60px; border:none; border-radius:5px; font-size:24px; font-family:"Noto Sans KR"; color:#999; background:#ddd;}
#PopDb .callBox input:last-child[type=button] {width:295px; height:60px; margin-left:5px; border:none; border-radius:5px; color:#fff; background:#ff5f5f;}
#PopDb .callBox input:last-child[value=무료체험신청] {width:295px; height:60px; margin-left:5px; border:none; border-radius:5px; color:#fff; background:#3d6bb8;}

#PopChart {display:none;}
#PopChart > div {position:fixed; top:10px; left:50%; bottom:10px; width:800px; margin-left:-400px; background:url(../images2/estimate_pop.png) no-repeat center top; z-index:1001}
#PopChart > div > ul {position:relative; width:800px; height:100%}
#PopChart > div .cls input {position:absolute; top:0; right:0; width:50px; height:50px; text-align:center; font-size:42px; border:none; line-height:50px; background-color:transparent }
#PopChart:before {content:''; display:block; position:fixed; top:0; bottom:0; left:0; width:100%; background:rgba(0,0,0,.5); z-index:1000}
#PopChart .popText {height:180px}
#PopChart .popText h2 {height:50px; line-height:50px; font-size:24px; font-family:"Noto Sans KR"; text-align:center; margin-bottom:5px}
#PopChart .popText h2 span {color:#de205e}
#PopChart .popText .earningTable {width:80%; height:70px; margin:0 auto 5px; background:#036; border:1px solid #fff; text-align:center; background:rgba(255,255,255,.3)}
#PopChart .popText .earningTable dl { float:left; width:20%; margin:0 5%; font-family:"Noto Sans KR"}
#PopChart .popText .earningTable dl:last-child {width:30%}
#PopChart .popText .earningTable dl:last-child dd {color:#de205e}
#PopChart .popText .earningTable dl dt {height:30px; line-height:30px; text-align:center; border-bottom:1px solid #fff; font-size:16px}
#PopChart .popText .earningTable dl dd {height:40px; line-height:40px; text-align:center; font-size:18px; color:#21365d}
#PopChart .popText .earningTable dl dd span {font-size:24px}
#PopChart .popText ul {width:80%; height:100px; margin:0 auto; font-size:18px}
#PopChart .popText ul li { float:left; width:70%}
#PopChart .popText ul li:last-child {float:left; width:30%; padding-left:5px}
#PopChart .popText ul li input {width:100%; height:35px; vertical-align:top;}
#PopChart .popText ul li input[type=button] {border:none; color:#fff; background:#de356c}
#PopChart .popChart {position:fixed; top:190px; left:50%; bottom:10px; width:800px; margin-left:-400px; background:#fff; overflow:hidden; overflow-y:auto}

.mainTop {position:relative; width:1200px; height:180px; margin:0 auto; margin-bottom:10px}
.mainTop > ul {position:absolute; top:0px; left:0; width:1200px; height:180px; border:1px solid #d9d9d9; background:#fff; overflow:hidden; z-index:100}
.topLeft { float:left; width:830px; height:180px}
.topLeft li {position:relative; float:left; width:calc(100% /4); height:180px; border-right:1px solid #d9d9d9}
.topLeft li a {display:block; width:100%; height:inherit; padding-top:125px; text-align:center; font-size:18px; background-image:url(../images2/ico_m-top_02.png); background-repeat:no-repeat}
.topLeft li a:hover {background-color:#fffbf4}
.topLeft li:nth-child(1) a {background-position:center 0}
.topLeft li:nth-child(2) a {background-position:center -180px}
.topLeft li:nth-child(3) a {background-position:center -360px}
.topLeft li:nth-child(4) a {background-position:center -540px}
.topRight {float:right; width:368px; height:180px; padding-left:10px; background:#f9fafc}

#login .pic {float:left; margin-right:10px}
#login .pic span {display:block; width:50px; height:50px; float:left; border-radius:50%; background-position:center; background-size:cover; cursor:pointer; }
.login_box>ul {margin:0 10px}
.login_box #logout {padding-top:20px; font-size:13px;}
.login_box .input_area {height:95px; border-bottom:1px solid #ddd; margin-bottom:25px}
.login_box .input {float:left; width:70%; padding-right:5px}
.login_box .input input {display:block; width:100%; height:35px; border:1px solid #ccc; padding-left:5px; border-radius:5px; margin-bottom:5px}
.login_box .btn {float:left; width:30%}
.login_box .btn input[type=button] {display:block; width:89px; text-align:center; line-height:35px; font-size:16px; color:#fff; font-weight:700; border:none; margin-bottom:5px; border-radius:5px; background:#4daebc}
.login_box .btn input[type=submit] {display:block; width:89px; height:35px; font-size:1px; color:#23b100; text-indent:-1000px; border:none; background:url(../images2/nv-login.png) no-repeat} 
.login_box .login_check {float:left; width:70%; color:#777}
.login_box .member_join {float:left; width:30%; text-align:center}

.login_box > ul > li { margin-bottom:8px}
.login_box #login {padding-top:25px}
.login_box #login .user_area {height:55px; margin-left:50px; padding-top:5px; border-bottom:none; margin-bottom:0}
.login_box #login .user_area #u_nick {font-size:16px; font-weight:600; font-family:"Noto Sans KR"}
.login_box #login .service {padding-top:5px; height:24px;}
.login_box #login .service span {display:block; float:left}
.login_box #login .service .grade {width:50%}
.login_box #login .service .grade img {padding-left:5px; width:24px; padding-top:1px;}
.login_box #login #member_free, #pro_free {width:100%; display:none}
.login_box #login #member_free input, #pro_free input {display:block; width:100%; text-align:center; line-height:20px; font-size:13px; color:#fff; border:none; margin-bottom:5px; border:none; border-radius:5px; background:#38a3d7}
.login_box #login #member_vip, #pro_vip {width:100%; height:30px; display:none; margin-bottom:5px}
.login_box #login #member_vip select, #pro_vip select {display:block; float:left; width:68%; height:30px; font-size:16px; margin-right:2%; border:1px solid #ccc; border-radius:0; padding:0}
.login_box #login #member_vip input, #pro_vip input {display:block; float:left; width:30%; height:30px; text-align:center; line-height:30px; font-size:16px; color:#fff; border:none; margin-bottom:5px; border:none; border-radius:5px; background:#ff5f5f}
#pro_vip input {background-color:#F60}
#pro_free input {display:block; width:100%; text-align:center; line-height:20px; font-size:13px; color:#fff; border:none; margin-bottom:5px; border:none; border-radius:5px; background:#2cb0d1}
.service_info{ padding-top:10px;}
.alertify .ajs-dimmer { background-color:rgba(0,0,0,0.5)}

.estimate {position:relative; width:1200px; height:180px; margin:0 auto 10px; background:url(../images2/estimate.png) no-repeat}
.estimateBox {position:absolute; bottom:10px; left:50%; width:900px; height:70px; margin-left:-450px; border:1px solid #fff; text-align:center; background:rgba(255,255,255,.3)}
.estimateBox ul { width:800px; margin:0 auto; padding-top:10px;}
.estimateBox ul li {float:left; margin:0 10px; line-height:48px; font-size:18px}
.estimateBox ul li select {width:240px; height:48px; }
.estimateBox ul li input[type=text] {width:240px; height:48px; vertical-align:top; text-align:right; padding:0 5px}
.estimateBox ul li input[type=button] {width:140px; height:48px; vertical-align:top; border:none; color:#fff; background:#de356c}

.counseling {position:relative; width:1200px; height:170px; margin:0 auto 10px; background:url(../images2/counseling_bg.jpg); font-size:16px; color:#fff; margin-bottom:10px;}
.counselingBox {position:absolute; left:200px; bottom:10px; width:800px; padding:10px 80px; background-color:rgba(0,0,0,0.5);}
.counselingBox > ul > li:last-child { font-size:12px; padding-top:5px; text-align:center; color:#a8a8b2}
.counselingBox #num,#name{width:160px; height:30px; background-color:rgba(0,0,0,0); border:none; border-bottom:1px solid #fff; padding-left:10px; box-sizing:border-box; font-size:14px; margin-right:30px;}
.counselingBox #cBtn{width:120px; height:34px; background-color:#ff3b3b; border:none; border-radius:5px; font-size:14px; color:#fff;cursor:pointer; transition:0.2s;}
.counselingBox #cBtn:hover{background-color:#d61e1e;}
/* placeholder color*/
.counseling input::-webkit-input-placeholder{color:#ccc;}
.counseling input:-ms-input-placeholder{color:#ccc;}
.counseling input::placeholder{color:#ccc;}
.goLive {float:right; width:360px; height:170px;}
.goLive a{display:block; width:100%; height:100%; border:1px solid #dee3eb; background-image:url(../images2/goLive_bg.jpg); text-indent:-999em;}

.market_box {position:absolute; top:0; left:0; width:100%; z-index:200}
.market_box > ul {width:1200px; height:1px; margin:0 auto}
.market_box > ul > li {width:360px; height:40px; margin-bottom:10px; border-right:1px solid #eee; background:#f1f1f0; overflow:hidden}
.market {height:40px; line-height:39px}
.market ul {height:40px; margin:0 20px}
.market ul li {width:360px; height:40px; padding-top:20px}
.market div {float:left; width:50%;}
.market div h3 {display:inline-block; margin-right:10px; font-weight:normal}
.market div p {display:inline-block}
.market div p>span {font-size:12px; padding-left:14px}
.market .up p>span {color:#df1914; background:url(../images2/bl_up.png) no-repeat 0 3px}
.market .dn p>span {color:#0862e0; background:url(../images2/bl_dn.png) no-repeat 0 2px}

.coupon {width:360px; height:70px; margin-bottom:10px; padding:10px 20px; border:1px solid #ccc; border-top:none; background:#fafafa; overflow:hidden;}
.coupon li {margin-bottom:5px}
.todayEvent {width:360px; height:220px; border:1px solid #dee3eb; overflow:hidden}

.mainMiddle {width:1200px; margin:0 auto}

.midLeft {float:right; width:360px; background:url(../images2/xpt_come.png) no-repeat right 420px}

.xptList > div {position:relative; float:left; width:410px; height:200px; border:1px solid #dee3eb; margin-bottom:10px; background:url(../images2/xpt_box.png) no-repeat; overflow:hidden}
.xptList > div.best {border:1px solid #ce0000}
.xptList > div.best::after { content:''; display:block; position:absolute; top:0; right:0; width:60px; height:70px; background:url(../images2/xpt_best.png) no-repeat; z-index:10}
.xptList > div.hot {border:1px solid #e5913d}
.xptList > div.hot::after { content:''; display:block; position:absolute; bottom:0; right:0; width:60px; height:70px; background:url(../images2/xpt_hot.png) no-repeat; z-index:10}
.xptList > div:nth-child(odd) {margin-right:10px}
.xptList > div p {position:absolute; bottom:0; right:-1px}
.xptList > div dl {position:absolute; top:15px; left:30px}
.xptList > div dl dt {font-size:24px; font-family:"Noto Sans KR"; margin-bottom:10px;}
.xptList > div dl dd {color:#444; margin-bottom:8px}
.xptList > div ul {position:absolute; bottom:20px; left:30px}
.xptList > div ul input {width:100px; height:35px; border:none; border-radius:5px; color:#fff; font-size:16px; font-family:"Noto Sans KR"; background:#ff5f5f}
.xptList > div ul input:last-child {width:120px; margin-left:5px; background:#4daebc}

.bbs_area {width:100%}
.bbs_area dl {float:left; width:100%; border:1px solid #dee3eb; margin-bottom:10px; background:#fff}
.bbs_area dl:nth-child(odd) {margin-right:10px}
.bbs_area dl dt {line-height:42px; font-size:18px; font-family:"Noto Sans KR"; font-weight:400; padding-left:10px; border-bottom:1px solid #ccc; background:url(../images2/bl_plus.png) no-repeat right top}
.bbs_area dl dt span {color:#900}
.bbs_area dl dd {position:relative; height:35px; margin:0 10px; border-bottom:1px solid #ddd}
.bbs_area dl dd:last-child {border-bottom:none}
.bbs_area dl dd a {display:block; float:left; max-width:70%; padding-left:10px; line-height:34px; color:#222; text-overflow:ellipsis; word-wrap:normal; white-space:nowrap; overflow:hidden}
.bbs_area dl dd span {display:block; position:absolute; top:0; right:10px; line-height:34px; font-size:13px; color:#888; padding-right:5px; }
.bbs_area dl dd span.new {float:left; height:34px; position:static; top:auto; right:auto; padding-left:4px}
.bbs_area dl dd span.new img {padding-top:13px}

.midRight {float:right; width:370px; padding-left:10px; display:none}

.rankList { float:left; width:830px;}
.rankList > div {position:relative; float:left; width:410px; height:220px; border:1px solid #dee3eb; margin-bottom:10px; margin-right:10px; padding-left:20px; padding-top:20px; background:#fff}
.rankList > div:nth-child(2) {margin-right:0}
.rankList > div:last-child {width:360px; border-bottom:none; margin-bottom:0; margin-right:0; display:none}
.rankList h2 {font-size:18px; font-weight:500; font-family:"Noto Sans KR"; margin-bottom:10px}
.rankList ul li { position:relative; height:50px; clear:both; padding-left:30px}
.rankList ul li > span {display:block; position:absolute; left:0; top:0px; width:16px; height:16px; line-height:16px; text-align:center; font-size:12px; color:#fff; background:#ccc }
.rankList ul li:first-child > span {background:#4daebc}
.rankList ul li > p {float:left; width:33%}
.rankList ul li > p strong {display:block; font-weight:400; margin-bottom:3px}
.rankList ul li > p em {display:block}
.rankList ul.tab {position:absolute; top:23px; right:20px;}
.rankList ul.tab > li {display:inline-block; padding-left:10px; color:#999}
.rankList ul.tab > li.on {color:#1a789a; font-weight:700}
.rankList table {width:95%}
.rankList table td {height:30px; text-align:right}

.dbBox {position:relative; width:1200px; height:100px; margin:0 auto; margin-bottom:10px; clear:both; background:url(../images2/m_call.png) no-repeat}
.dbBox ul {position:absolute; top:20px; right:20px; }
.dbBox ul input[type=text] {width:320px; height:50px; border:none; border-radius:5px; font-size:16px; padding:0 5px}
.dbBox ul input[type=button] {width:120px; height:50px; border:none; border-radius:5px; color:#fff; font-size:18px; font-family:"Noto Sans KR"; background:#ff5f5f}
.dbBox ul li:last-child {color:#a8a8b2; text-align:right; padding-top:5px;}

.program {width:1200px; height:200px; margin:0 auto 10px; border:1px solid #dee3eb; background:#fff; clear:both}
.program ul {height:200px}
.program ul li {float:left; width:calc(100% / 4); height:inherit; border-right:1px solid #dee3eb; text-align:center; padding-top:30px}
.program ul li:last-child {padding-right:0; border-right:none}
.program ul li h3 { font-size:18px; margin-bottom:5px; padding-top:10px}
.program ul li p {margin:0 30px; word-break:keep-all}

.calendarBox {width:1200px; margin:0 auto 10px; border:1px solid #dee3eb; clear:both; background:#f9fafc}
.calendarBox ul {text-align:center}
.calendarBox ul:first-child {position:relative; width:380px; text-align:center; margin:0 auto 10px; padding-top:20px}
.calendarBox ul:first-child h2 {width:400px; font-size:24px}
.calendarBox ul:first-child a {position:absolute; left:-50px; top:30px; }
.calendarBox ul:first-child a + a { left:auto; right:-70px;}
.calendarBox ul:first-child select {position:absolute; top:15px; right:-394px; width:210px; height:30px; font-size:14px} 
.calendarBox .btnArea {position:relative; height:30px}
.calendarBox .btnArea input {position:absolute; top:-10px; left:50%; width:90px; height:30px; margin-left:-45px; border:1px solid #ddd; background:#fff}
.calendar {margin:0 15px; border-left:1px solid #eee; border-top:2px solid #999; background:#fff}
.calendar::after {content:''; display:block; clear:both}
.calendar dl {float:left; width:181px; height:180px; border-bottom:1px solid #eee; overflow:hidden}
.calendar.more dl {height:790px}
.calendar dl:first-child, .calendar dl:last-child {width:131px}
.calendar dl:first-child label {color:#ff5f5f}
.calendar dl dt {height:40px; line-height:39px; text-align:center; border-right:1px solid #eee; border-bottom:1px solid #999}
.calendar dl dd {position:relative; height:150px; border-right:1px solid #eee; border-bottom:1px solid #eee; padding-top:15px; overflow:hidden; overflow-y:auto}
.calendar dl dd.out { background:#fafaf8;}
.calendar dl dd label {position:absolute; top:5px; left:10px}
.calendar dl dd.out label { opacity:.5}
.calendar dl dd h3 {padding-left:10px; padding-top:10px;}
.calendar dl dd p {position:relative; padding:0 10px; margin-bottom:3px}
.calendar dl dd p span {position:absolute; top:0; right:10px; color:#c81622}

.link {width:360px; height:160px; margin-bottom:10px}
.link li {float:left;}
.link li:first-child {margin-right:10px}

.live {width:360px; height:354px; margin-bottom:10px}
.live .onair {width:100%; height:80px; text-align:center; padding-top:50px; margin-bottom:29px; font-size:16px; font-family:"Noto Sans KR"; font-weight:400; color:#fff; background:url(../images2/onair.png) no-repeat 0 0; cursor:pointer}
.live .off {color:#cbb; background:url(../images2/onair.png) no-repeat 0 -80px}
.live h2 {text-align:center; font-size:15px; line-height:38px; border-top:1px solid #ccc; border-bottom:1px solid #ccc}
.live .live_list li {height:37px; line-height:38px; border-bottom:1px solid #ddd; cursor:pointer}
.live .live_list li.on {background:#fcf4cd}
.live .live_list li label {display:inline-block; margin-right:20px; color:#003c78; padding-left:10px}

.vod {width:360px; height:485px; background:#eee; overflow-y:scroll}
.vod dl {height:250px; padding:10px;}
.vod dl dt {position:relative; width:100%; height:182px; margin-bottom:10px; background-size:100% auto; background-position:center}
.vod dl dt::before {content:''; position:absolute; top:0; left:0; bottom:0; right:0; background:url(../images2/ico_vod.png) no-repeat center rgba(0,0,0,0.3); background-size:50px auto; opacity:0.9; z-index:10}
.vod dl dd {font-size:15px}
.vod dl dd::before {content:'ㆍ';}