body {overflow-x:hidden;}

.notice h2, .cs h2, .gall h2 {font-family:'SCoreDream';font-size:28px;font-weight:600;color:#222;letter-spacing:-0.05em;}
.visual {position:relative;height:auto;}
.visual::after {position:absolute;bottom:0;left:0;z-index:200;display:block;width:100%;height:210px;background:url("/asset/jtsc/images/main/curve.png") bottom left no-repeat;background-size:100%;content:"";}
.visual .text {position:absolute;top:20%;right:20%;z-index:201;color:#fff;}
.visual .text p {font-size:25px;}
.visual .text p:last-child {font-family:'VitroCore';font-size:80px;font-style:italic;}
.visual .text p:last-child span {display:block;margin:-20px 0 0 50px;}
.visual .bx-wrapper {border:0;}
.visual .bx-wrapper img {width:100%;}
.visual .bx-controls {position:absolute;bottom:21%;right:20%;z-index:202;width:150px;}
.visual .bx-controls-direction {overflow:hidden;}
.visual .bx-controls-direction a {float:left;display:block;width:25px;height:auto;background-image:url("/asset/jtsc/images/main/slide_prev.svg");background-repeat:no-repeat;background-size:100%;text-indent:-9999px;}
.visual .bx-controls-direction a.bx-next {float:right;background-image:url("/asset/jtsc/images/main/slide_next.svg");}
.visual .bx-pager {margin:-30px 0 0 40px;}
.visual .bx-pager div {display:inline-block;margin:0 10px;}
.visual .bx-pager a {display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#fff;text-indent:-9999px;vertical-align:middle;}
.visual .bx-pager a.active {width:16px;height:16px;border:3px solid #fff;background:none;}

.shortcut {margin:45px 0 60px;}
.shortcut ul {width:70%;margin:0 auto;text-align:center;}
.shortcut li {display:inline-block;width:24%;font-size:18px;letter-spacing:-0.05em;}                        
.shortcut li a {position:relative;display:block;text-align:center;}
.shortcut li a::before {position:absolute;top:20px;left:0;content:'';width:1px;height:18px;background-color:#ddd;}
.shortcut li:first-child a::before {display:none;} 
.shortcut li a img {display:block;margin:0 auto 14px;}
.shortcut li a span {display:inline-block;border-bottom:4px solid #fff;padding-bottom:5px;}
.shortcut li a:hover span{border-bottom:4px solid #E1FF52;}


.midArea {position:relative;overflow:hidden;}
.notice_cs {float:left;width:53%;}
.notice {position:relative;margin-bottom:50px;}
.notice h2 {margin-bottom:30px;}
.notice ul {}
.notice li {overflow:hidden;margin:15px 0;font-size:18px;}
.notice li a {float:left;display:block;width:78%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:7%;}
.notice li a:hover {color:#000;font-weight:500;}
.notice li a::before {display:inline-block;content:"";width:4px;height:4px;background-color:#555;border-radius:50%;margin:0 10px 3px 5px;vertical-align:middle;}
.notice li span {display:inline-block;}
.notice .more, .gall .more {position:absolute;top:2px;right:0;}

.cs {overflow:hidden;}
.cs h2 {float:left;margin-right:20px;}
.cs ul {}
.cs li {display:inline-block;background-image:url("/asset/jtsc//images/main/i_watch.svg");background-position:0 6px;background-repeat:no-repeat;padding-left:25px;font-size:18px;}
.cs li:first-child {background-image:url("/asset/jtsc/images/main/i_call.svg");margin-right:20px;font-weight:600;}

.hot {float:right;width:42%;}
.hot ul {}
.hot li {}
.hot li img {width:100%;border-radius:0 50px 0 50px;}
.hot .bx-controls {position:relative;margin-top:15px;}
.hot .bx-controls .bx-pager {overflow:hidden;text-align:center;}
.hot .bx-controls .bx-pager div {display:inline-block;margin:2px 4px 0;}
.hot .bx-controls .bx-pager div a {display:inline-block;text-indent:-9999px;width:10px;height:10px;border-radius:50%;border:2px solid #333;}
.hot .bx-controls .bx-pager div a.active {background-color:#333;}

.gall {position:relative;}
.gall h2 {margin:20px 0 30px;}
.gall li {background-color:#000;}
.gall li a {}
.gall li a img {opacity:0.5;}
.gall li a:hover img {opacity:1;}
.gall .bx-controls {}
.gall .bx-controls-direction {}
.gall .bx-controls-direction a {position:absolute;top:55%;display:block;width:50px;height:50px;background-position:center center;background-repeat:no-repeat;background-color:rgba(0,0,0,0.5);border-radius:50%;text-indent:-9999px;}
.gall .bx-controls-direction a.bx-prev {left:-10%;background-image:url("../images/main/gall_prev.svg");}
.gall .bx-controls-direction a.bx-next {right:-10%;background-image:url("../images/main/gall_next.svg");}
.gall .bx-controls-direction a:hover {background-color:rgba(0,0,0,1);}

.ban {margin:10px 0;}
.ban ul {overflow:hidden;}
.ban li {float:left;width:20%;text-align:center;}
.ban li a {}
.ban .bx-controls {position:relative;}
.ban .bx-controls-direction {position:absolute;top:-25px;right:-9%;}
.ban .bx-controls-direction a {display:inline-block;width:14px;height:14px;background-repeat:no-repeat;text-indent:-9999px;}
.ban .bx-controls-direction a.bx-prev {background-image:url("/asset/jtsc/images/main/btn_prev.svg");}
.ban .bx-controls-direction a.bx-next {background-image:url("/asset/jtsc/images/main/btn_next.svg");margin-left:18px;}
.ban .bx-controls .bx-controls-auto {position:absolute;top:-25px;right:-7.6%;}
.ban .bx-controls .bx-controls-auto a {display:inline-block;width:14px;height:14px;text-indent:-9999px;}
.ban .bx-controls .bx-controls-auto a.bx-start {background:url("/asset/jtsc/images/main/btn_play.svg") no-repeat;}
.ban .bx-controls .bx-controls-auto a.bx-stop {background:url("/asset/jtsc/images/main/btn_pause.svg") no-repeat;}

.ban-wrap {text-align:center;}
.ban-wrap a {display:inline-block;width:19%;}



/* 575px 이하 해상도에서 해석하는 코드 */
@media (max-width: 575px) {
	.visual::after {background-size:180%;}
	.visual .bx-wrapper img {width:auto;height:230px;margin-left:-40%;}

	.cs li {font-size:16px;}

}


/* 767px 이하 해상도에서 해석하는 코드 */
@media (max-width:767px){
	

}

/* 991px 이하 해상도에서 해석하는 코드 */
@media (max-width:991px){ 	
		
	.visual .text {top:30%;right:10%;}
	.visual .text p {font-size:14px;}
	.visual .text p:last-child {font-size:26px;}
	.visual .text p:last-child span {margin:-5px 0 0 50px;}
	.visual .bx-controls {bottom:15%;right:10%;width:80px;}
	.visual .bx-pager {margin:-33px 0 0 20px;}
	.visual .bx-pager div {margin:0 5px;} 
	.visual .bx-pager a {width:6px;height:6px;}
	.visual .bx-pager a.active {width:12px;height:12px;border:2px solid #fff;}
	.visual .bx-controls-direction a {width:16px;background-size:100%;}
	
	.shortcut {margin:20px 0 15px;}
	.shortcut ul {width:100%;}
	.shortcut li {margin-bottom:10px;font-size:16px;}
	.shortcut li:first-child a::before, .shortcut li.break a::before {content:none;}
	.shortcut li a img {width:40px;height:auto;margin:0 auto 10px;}
	
	.midArea, .gall {margin:0 5%;} 

	.notice_cs, .hot {float:none;}
	.notice_cs {width:100%;margin-bottom:30px;}
	.notice {margin-bottom:35px;}
	.notice h2, .cs h2, .gall h2 {font-size:20px;}
	.notice h2, .gall h2 {padding-top:5px;margin-bottom:15px;}
	.notice li {margin:10px 0;font-size:16px;}
	.notice li a {width:100%;margin-right:0px;}
	.notice li span {display:none;}
	
	.notice .more, .gall .more {top:0;}
	
	.hot {width:100%;}
	.hot li {}
	.hot li img {border-radius:0 20px 0 20px;}
	
	.cs h2 {float:none;}
	.cs ul {margin-top:8px;}
	.cs ul li {margin:2px 0;}

	.gall li a img {width:100%;opacity:1;}
	.gall .bx-controls-direction a {top:60%;width:24px;height:24px;background-size:5px;}
	.gall .bx-controls-direction a.bx-prev {left:3%;}
	.gall .bx-controls-direction a.bx-next {right:3%;}

	
	
	.ban-wrap a {width:auto;margin:0 10px;}
	.ban-wrap a img {height:35px;}
	
	.ban .bx-controls {display:none;}	

}



@media (min-width:992px) and (max-width:1199px) { 
	.visual .text {right:12%;}
	.visual .bx-wrapper img {}
	.visual .text p {font-size:16px;}
	.visual .text p:last-child {font-size:60px;}
	.visual .bx-controls {bottom:15%;right:12%;}

	.notice li {margin:5px 0;}
	.notice li a {width:100%;}
	.notice li span {display:none;}
	.ban .bx-controls {display:none;}
	

	
}

/* 992px 이상 해상도에서 해석하는 코드 */
@media (min-width:992px){ 
	.gall .bx-viewport {overflow:visible !important;}
	
}

/* 1200px 이상 해상도에서 해석하는 코드 */
@media (min-width:1200px){
	.notice ul {min-height:200px;}
}
