@charset "utf-8";

#dBodyMain {
	padding:60px 0 0 0;
	background:#f0f0f0;
}

.main-visual {padding:0 0 13px 0;}
.main-visual .roll {overflow:hidden;}
.main-visual .roll ul {overflow:hidden;}
.main-visual .roll ul li {float:left;}
.main-visual .roll ul li > div {}
.main-visual .roll ul li > div img {width:100%;}
.main-visual .roll ul li > div .m {display:block;}
.main-visual .roll ul li > div .pc {display:none;}
.main-visual .control {padding:10px 0 0 0; text-align:center;}
.main-visual .control > p {display:inline; font-size:0; line-height:0;}
.main-visual .control a {display:inline-block; width:7px; height:7px; margin-left:5px; text-indent:-9999px; vertical-align:middle; cursor:pointer;}
.main-visual .control .dot a {background:url("../images/main/control_dot.png") no-repeat 0 0; background-size:19px 7px;}
.main-visual .control .dot a:first-child {margin-left:0;}
.main-visual .control .dot a.swiper-active-switch {background-position:-12px 0;}
.main-visual .control .play {display:none; background:url("../images/main/control_play_stop.png") no-repeat 0 -7px; background-size:7px 14px;}
.main-visual .control .stop {background:url("../images/main/control_play_stop.png") no-repeat 0 0; background-size:7px 14px;}

.main-banner ul {padding:0 5px 30px 5px; overflow:hidden;}
.main-banner ul li {float:left; width:50%; margin-top:10px;}
.main-banner ul li div {padding:0 5px;}
.main-banner ul li div a {position:relative; display:block; text-align:left; overflow:hidden;}
.main-banner ul li div a img {width:100%; vertical-align:middle; transition:all 1s ease-in-out;}
.main-banner ul li div a span {position:absolute; top:16px; left:19px; color:#fff; font-family:'nanumBold'; font-size:17px; line-height:22px; z-index:10;}
.main-banner ul li div a:hover img {transform:scale(1.2); transition:all 1s ease-in-out;}

/* Tablet and PC _ 980~ */
@media all and (min-width:980px) {
	
	#dBodyMain {
		padding:80px 0 80px 0;
		background:#f0f0f0;
	}

	.main-visual {padding:0 0 0 0;}
	.main-visual .roll {overflow:hidden;}
	.main-visual .roll ul {overflow:hidden;}
	.main-visual .roll ul li {float:left;}
	.main-visual .roll ul li > div {}
	.main-visual .roll ul li > div img {width:100%;}
	.main-visual .roll ul li > div .m {display:none;}
	.main-visual .roll ul li > div .pc {display:block;}
	.main-visual .control {padding:20px 0 0 0; text-align:center;}
	.main-visual .control > p {display:inline; font-size:0; line-height:0;}
	.main-visual .control a {display:inline-block; width:14px; height:14px; margin-left:10px; text-indent:-9999px; vertical-align:middle; cursor:pointer;}
	.main-visual .control .dot a {background:url("../images/main/control_dot.png") no-repeat 0 0; background-size:38px 14px;}
	.main-visual .control .dot a:first-child {margin-left:0;}
	.main-visual .control .dot a.swiper-active-switch {background-position:-24px 0;}
	.main-visual .control .play {display:none; background:url("../images/main/control_play_stop.png") no-repeat 0 -14px; background-size:14px 28px;}
	.main-visual .control .stop {background:url("../images/main/control_play_stop.png") no-repeat 0 0; background-size:14px 28px;}

	.main-banner {width:960px; margin:0 auto;}
	.main-banner ul {padding:0 15px 30px 15px; overflow:hidden;}
	.main-banner ul li {float:left; width:310px; margin-top:30px;}
	.main-banner ul li div {padding:0 15px;}
	.main-banner ul li div a {position:relative; display:block; text-align:left;}
	.main-banner ul li div a img {width:100%;}
	.main-banner ul li div a span {position:absolute; top:36px; left:36px; color:#fff; font-family:'nanumBold'; font-size:22px; line-height:34px;}
	
}

/* PC _ 1220~ */
@media all and (min-width:1220px) {
	
	.main-banner {width:1200px;}
	.main-banner ul li {width:390px;}

}