@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 2021.09.03 | 김소화 | 최초 등록
 * </pre>
 * @author 디자인팀 김소화
 * @since 2021.09.03
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */

/* 공통 */

[id*="mainbody"]{position:relative;background:url() no-repeat  50% 0 / cover;}
[id*="mainbody"] .container{max-width:1400px;margin:0 auto;padding:60px 0}
@media all and (max-width:1399px){`
	[id*="mainbody"] .container{padding:60px 30px}
}
@media all and (max-width:767px){
	[id*="mainbody"] .container{padding:40px 20px}
}

/* mainbody1 */
#mainbody1{position:relative;}

#mainbody1 .datalist{}
#mainbody1 .datalist .item{}
#mainbody1 .datalist .item img{}
#mainbody1 .menu{z-index:100;
	position:absolute;left:0;right:0;bottom:50px;
	margin:0 auto;
	text-align:center;
}
#mainbody1 .progressbar{display:inline-block;
	width:290px;height:4px;
	background:rgba(255,255,255,0.5);
	vertical-align:top;
	margin:14px 0 0;
}
#mainbody1 .progressbar .slide-progress{width:0;height:100%;background:#fff;/*animation:progress1 5s alternate ease-out;*/}
#mainbody1 .mPage{display:inline-block;color:#fff;vertical-align:top;margin:0 10px;font-size:20px;}
#mainbody1 .mPage .on{font-weight:bold;}
#mainbody1 .menu .m{display:inline-block;
	position:relative;
	border:0;background:transparent;
	width:30px;height:30px;
	margin:0;
	vertical-align:top;
	border-radius:100%;
	border:1px solid #fff;
}
#mainbody1 .menu .m:before{content:'';
	position:absolute;left:50%;top:50%;
	margin:-10px;
	width:20px;height:20px;
	background:url() no-repeat 0 0 /contain;
}
#mainbody1 .menu .m.play:before{background-image:url(../../img/lib/ic40a2play2.png)}
#mainbody1 .menu .m.stop:before{height:20px;background-image:url(../../img/lib/ic40a2pause2.png)}
#mainbody1 .mControl{position:absolute;left:0;top:0;right:0;bottom:0}
#mainbody1 .mControl .m{display:block;
	z-index:100;
	position:absolute;top:50%;
	border:0;background:transparent;
	width:80px;height:80px;
	margin:-40px 0 0 0;
	border-radius:100%;
	background:rgba(0,0,0,0.3);
}
#mainbody1 .mControl .m:before{content:'';
	position:absolute;left:50%;top:50%;
	margin:-15px;
	width:30px;height:30px;
	background:url() no-repeat 0 0 /contain;
}
#mainbody1 .mControl .m.prev{left:100px}
#mainbody1 .mControl .m.next{right:100px}
#mainbody1 .mControl .m.prev:before{background-image:url(../../img/main/ic60a1left1.png)}
#mainbody1 .mControl .m.next:before{background-image:url(../../img/main/ic60a1right1.png)}
@media all and (max-width:1259px){
	#mainbody1 .menu{bottom:20px;}
	#mainbody1 .mControl .m{width:60px;height:60px;margin:-30px 0 0;}
	#mainbody1 .mControl .m.prev{left:20px}
	#mainbody1 .mControl .m.next{right:20px}
	#mainbody1 .mPage{font-size:16px;margin:5px 10px 0}
}
@media all and (max-width:767px){
	#mainbody1 .progressbar{width:150px;}
}
@media all and (max-width:539px){
	#mainbody1 .menu{bottom:10px;}
	#mainbody1 .mControl .m{background:none;}
	#mainbody1 .mControl .m.prev{left:0}
	#mainbody1 .mControl .m.next{right:0}
}

/* mainbody2 */
#mainbody2{background:#fff}
#mainbody2 .h1{
	padding:0;margin:0 0 65px;
	color:#000;
	text-align:Center;
	text-transform:uppercase;
	font-size:50px;
}
#mainbody2 .scroll{width:100%;overflow:hidden;white-space:nowrap;}
#mainbody2 .item{position:relative;display:inline-block;margin:0 20px 50px 0;white-space:normal;vertical-align:top;width:310px;}
#mainbody2 .item .f1{width:100%;}
#mainbody2 .item .f1 img{width:100%;height:auto;}
#mainbody2 .text{display:block;margin:20px 0;}
#mainbody2 .text .material{display:inline-block;background:#333;color:#fff;margin-bottom:10px;padding:7px 10px;font-size:13px;}
#mainbody2 .text .title{display:block;color:#000;font-size:24px;font-weight:bold;margin-bottom:5px;}
#mainbody2 .text .artist{display:block;color:#777;font-size:15px;margin-bottom:5px;}
#mainbody2 .text .price{position:relative;display:block;color:#000;font-size:20px;font-weight:bold;}
#mainbody2 .text .price .discount_price{display:none;}
#mainbody2 .text .price .discount_rate{display:none;}
#mainbody2 .text .price.discount .discount_price{display:block;}
#mainbody2 .text .price.discount .discount_rate{display:block;
	position:absolute;right:0;top:5px;
	font-size:12px;
	color:#fe1515
}
#mainbody2 .text .price.discount .discount_rate:after{content:' 할인';}
#mainbody2 .text .price.discount .base_price{display:block;
	font-size:14px;font-weight:normal;
	text-decoration:line-through;
	color:#777
}
#mainbody2 .text .discount_rate2{display:block;
	position:absolute;left:0;top:0;
	background:#fe1515;color:#fff;
	padding: 10px 8px;
	font-size: 12px;
	font-weight: 600;
}
#mainbody2 .more{display:block;
	background:#e5e5e5;
	color:#000;
	border-radius:30px;
	padding:10px 40px;
	text-align:center;
	width:120px;
	margin:50px auto 0;
}
#mainbody2 .more:after{content:'';
	display:inline-block;
	width:11px;height:11px;
	background:url(../../img/inc/tnb1d3bg1has.png) no-repeat 0 0 / contain;
	margin:4px 0 0 15px;
	vertical-align:top;
}
/* item width
#mainbody2 .item:nth-of-type(1), #mainbody2 .item:nth-of-type(6), #mainbody2 .item:nth-of-type(11),#mainbody2 .item:nth-of-type(16){width:236px;}
#mainbody2 .item:nth-of-type(2), #mainbody2 .item:nth-of-type(7), #mainbody2 .item:nth-of-type(12),#mainbody2 .item:nth-of-type(17){width:310px;}
#mainbody2 .item:nth-of-type(3), #mainbody2 .item:nth-of-type(8), #mainbody2 .item:nth-of-type(13),#mainbody2 .item:nth-of-type(18){width:236px;}
#mainbody2 .item:nth-of-type(4), #mainbody2 .item:nth-of-type(9), #mainbody2 .item:nth-of-type(14),#mainbody2 .item:nth-of-type(19){width:236px;}
#mainbody2 .item:nth-of-type(5), #mainbody2 .item:nth-of-type(10), #mainbody2 .item:nth-of-type(15),#mainbody2 .item:nth-of-type(20){width:310px;}
#mainbody2 .item:last-child{margin-right:0;}
*/
/* Scrollbar Redesign [JS] created */
[class*='scroll1wrap'].myscroll.skin2{}
[class*='scroll1wrap'].skin2 .iScrollHorizontalScrollbar{
	left:500px !important;
	right:500px !important;
	bottom:0 !important;
	height:3px !important;
	margin:100px 0 0;
}
[class*='scroll1wrap'].skin2 .iScrollIndicator{background:#777 !important}

@media all and (max-width:1259px){
	#mainbody2 .h1{margin:0 0 30px;}
	#mainbody2 .item{margin:0 10px 20px 0;width:210px;}
	#mainbody2 .text .title{font-size:20px;}
	#mainbody2 .text .price{font-size:18px;}
	/*
	#mainbody2 .item:nth-of-type(1),
	#mainbody2 .item:nth-of-type(6),
	#mainbody2 .item:nth-of-type(11),
	#mainbody2 .item:nth-of-type(16){width:136px;}
	#mainbody2 .item:nth-of-type(2),
	#mainbody2 .item:nth-of-type(7),
	#mainbody2 .item:nth-of-type(12),
	#mainbody2 .item:nth-of-type(17){width:210px;}
	#mainbody2 .item:nth-of-type(3),
	#mainbody2 .item:nth-of-type(8),
	#mainbody2 .item:nth-of-type(13),
	#mainbody2 .item:nth-of-type(18){width:136px;}
	#mainbody2 .item:nth-of-type(4),
	#mainbody2 .item:nth-of-type(9),
	#mainbody2 .item:nth-of-type(14),
	#mainbody2 .item:nth-of-type(19){width:136px;}
	#mainbody2 .item:nth-of-type(5),
	#mainbody2 .item:nth-of-type(10),
	#mainbody2 .item:nth-of-type(15),
	#mainbody2 .item:nth-of-type(20){width:210px;}*/
	#mainbody2 .more{margin-top:20px;}
	[class*='scroll1wrap'].skin2 .iScrollHorizontalScrollbar{
		left:0 !important;
		right:0 !important;
	}
}
@media all and (max-width:767px){
	#mainbody2 .h1{font-size:30px;margin:0 0 10px}
}



/* mainbody3 */
#mainbody3{background:url(../../img/main/mainbody3_bg.gif) no-repeat 50% 0 /  cover}
#mainbody3 .container{padding:100px 0 70px;}
#mainbody3 .tg1{float:left;}
#mainbody3 .h1{
	padding:0;margin:0;
	color:#000;
	font-size:60px;
}
#mainbody3 .t1{padding:0;margin:0;font-size:30px;}
#mainbody3 .youtube{position:relative;float:right;width:740px;height:493px;}
#mainbody3 .youtube .a1{display:block;position:absolute;right:0;top:-50px;
	color:#000;
	font-size:18px;
	font-weight:bold;
}
#mainbody3 .youtube .a1:before{content:'';
	display:inline-block;
	width:117px;height:27px;
	background:url(../../img/main/youtube.png) no-repeat 0 0 / contain;
	vertical-align:top;
	margin:-5px 5px 0 0;
}
#mainbody3 .youtube .a2{display:block;position:relative;width:100%;height:100%;}
#mainbody3 .youtube .a2:before{content:'';
	display:block;
	position:absolute;left:50%;top:50%;
	background:rgba(0,0,0,0.5);
	border-radius:20px;
	width:110px;height:70px;
	margin:-35px 0 0 -55px;
}
#mainbody3 .youtube .a2:after{content:'';
	display:block;
	position:absolute;left:50%;top:50%;
	width:0;height:0;
    border-top: 12px solid transparent;
    border-left: 20px solid #fff;
    border-bottom: 12px solid transparent;
	margin:-10px 0 0 -6px;
}
#mainbody3 .menu1{position:absolute;left:0;bottom:150px;overflow:hidden;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	background:#000;
}
#mainbody3 .menu1 li{float:left;width:200px;height:80px;}
#mainbody3 .menu1 li a{display:block;position:relative;
	background:#000;
	line-height:80px;
	text-align:center;
	color:#fff;
	text-decoration:none !important;
	font-size:20px;
	transition:.3s ease-out;
}
#mainbody3 .menu1 li a:before{content:'';
	display:inline-block;
	width:30px;height:30px;
	background:url() no-repeat 0 0 / contain;
	vertical-align:top;
	margin:24px 5px 0 0;
}
#mainbody3 .menu1 li.m1 a:before{background-image:url(../../img/main/mainbody3m1.png)}
#mainbody3 .menu1 li.m2 a:before{background-image:url(../../img/main/mainbody3m2.png)}
#mainbody3 .menu1 li.m3 a:before{background-image:url(../../img/main/mainbody3m3.png)}
#mainbody3 .menu1 li a:after{content:'';
	position:absolute;top:0;bottom:0;left:0;
	border-left:1px solid rgba(255,255,255,0.3);
}
#mainbody3 .menu1 li a:hover,
#mainbody3 .menu1 li a:focus{background:#283890}
@media all and (max-width:1499px){
	#mainbody3 .container{padding:60px 30px;}
	#mainbody3 .tg1{float:none;text-align:center;margin-bottom:80px;}
	#mainbody3 .t1 br{display:none;}
	#mainbody3 .youtube{float:none;margin:0 auto;}
	#mainbody3 .menu1{left:50%;bottom:70px;width:820px;margin:0 0 0 -410px}
	#mainbody3 .menu1 li{width:33.333%}
}
@media all and (max-width:859px){
	#mainbody3 .t1{font-size:18px;}
	#mainbody3 .h1{font-size:50px;}
	#mainbody3 .youtube{width:auto;height:auto;}
	#mainbody3 .youtube .a2 img{width:100%}
	#mainbody3 .menu1{position:static;margin:10px 0 0;width:100%;}
}
@media all and (max-width:767px){
	#mainbody3 .container{padding:40px 20px;}
	#mainbody3 .h1{font-size:30px;}
	#mainbody3 .menu1 li a{font-size:14px;}
}
@media all and (max-width:539px){
	#mainbody3 .t1{font-size:14px;}
	#mainbody3 .menu1 li{width:100%;}
	#mainbody3 .menu1 li a:after{left:0;right:0;bottom:0;top:auto;border-bottom:1px solid rgba(255,255,255,0.3);border-left:0}
}

/* mainbody4 */
#mainbody4{background:#fff}
#mainbody4 .h1{
	padding:0;margin:0 0 70px;
	color:#000;
	text-align:center;
	font-size:50px;
}
#mainbody4 li a{display:block;position:relative;
	width:100%;height:350px;
	text-align:center;
	color:#fff;
	font-size:30px;
	box-sizing:border-box;
	padding:250px 0 30px ;
	background:url() no-repeat 50% 50% / cover;
	transition:1s ease-out;
	font-weight:bold;
}
#mainbody4 li.m1 a{background-image:url(../../img/main/mainbody4m1.png)}
#mainbody4 li.m2 a{background-image:url(../../img/main/mainbody4m2.png)}
#mainbody4 li.m3 a{background-image:url(../../img/main/mainbody4m3.png)}
#mainbody4 li.m4 a{background-image:url(../../img/main/mainbody4m4.png)}
#mainbody4 li:hover{}
#mainbody4 li a:hover,
#mainbody4 li a:focus{
	padding-top:150px;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
	margin-top:-30px;
}
#mainbody4 li a .bar{display:block;
	position:absolute;
	transition:all .3s ease-out;
}
#mainbody4 li a .bar:nth-child(1){/* top */
	left:0;top:0;right:100%;
	border-top:10px solid rgba(255,255,255,0.3);
}
#mainbody4 li a .bar:nth-child(2){/* right */
	right:0;top:10px;bottom:100%;
	border-right:10px solid rgba(255,255,255,0.3);
}
#mainbody4 li a .bar:nth-child(3){/* bottom */
	right:10px;bottom:0;left:100%;
	border-bottom:10px solid rgba(255,255,255,0.3);
}
#mainbody4 li a .bar:nth-child(4){/* left */
	left:0;bottom:10px;top:100%;
	border-left:10px solid rgba(255,255,255,0.3);
}
#mainbody4 li a:hover .bar,
#mainbody4 li a:focus .bar{opacity:1;}
#mainbody4 li a:hover .bar:nth-child(1),
#mainbody4 li a:focus .bar:nth-child(1){right:0;}/* top*/
#mainbody4 li a:hover .bar:nth-child(2),
#mainbody4 li a:focus .bar:nth-child(2){transition-delay:.3s;bottom:0}/* right */
#mainbody4 li a:hover .bar:nth-child(3),
#mainbody4 li a:focus .bar:nth-child(3){transition-delay:.6s;left:0}/* bottom */
#mainbody4 li a:hover .bar:nth-child(4){transition-delay:.9s;top:10px;}/* left */
@media all and (max-width:767px){
	#mainbody4 .h1{font-size:30px;margin:0 0 20px}
	#mainbody4 li a{font-size:20px;padding-top:100px;height:200px;}
	#mainbody4 li a:hover,
	#mainbody4 li a:focus{
		box-shadow: none;
		margin-top:0;
		padding-top:100px;
	}
}



/* mainbody5 */
#mainbody5{background:#f5f5f5}
#mainbody5 .tg1{float:left;width:calc(100% - 860px);}
#mainbody5 .h1{
	padding:0;margin:0 0 15px;
	color:#000;
	font-size:50px;
}
#mainbody5 .t1{padding:0;margin:0;font-size:18px;color:#555}
#mainbody5 .list1{float:right;width:860px;overflow:hidden;}
#mainbody5 .list1 li a{display:block;
	padding:25px 0;
	overflow:hidden;
	border-bottom:1px solid #ddd;
	font-size:18px;
}
#mainbody5 .list1 li:first-child a{padding-top:0;}
#mainbody5 .list1 li a .ttg{float:left;width:calc(100% - 120px);text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
#mainbody5 .list1 li a .ttg .t1{}
#mainbody5 .list1 li a .ttg .notice{display:inline-block;
	background:#c50251;
	color:#fff;font-size:15px;
	padding:5px 10px;
	border-radius:5px;
	margin-right:5px;
}
#mainbody5 .list1 li a .ttg .notice:after{content:'';
	display:inline-block;width:18px;height:14px;
	background:url(../../img/main/notice.png) no-repeat;
	vertical-align:top;
	margin:3px 0 0 5px
}
#mainbody5 .list1 li a .ttg .new:before{content:'N';}
#mainbody5 .list1 li a .date1{float:right;width:90px;color:#777}
#mainbody5 .more{display:block;
	position:absolute;left:0;top:200px;
	background:#e5e5e5;
	color:#000;
	border-radius:30px;
	padding:10px 40px;
	width:70px;
}
#mainbody5 .more:after{content:'';
	display:inline-block;
	width:11px;height:11px;
	background:url(../../img/inc/tnb1d3bg1has.png) no-repeat 0 0 / contain;
	margin:4px 0 0 15px;
	vertical-align:top;
}
@media all and (max-width:1399px){
	#mainbody5 .more{left:30px;}
}
@media all and (max-width:1355px){
	#mainbody5 .tg1{float:none;width:100%;text-align:center;margin:0 0 30px;}
	#mainbody5 .h1{margin-bottom:5px;}
	#mainbody5 .list1{float:none;clear:both;margin:0 auto;}
	#mainbody5 .list1 li:first-child a{padding-top:25px;border-top:1px solid #ddd;}
	#mainbody5 .more{position:static;margin:30px auto 0;}
}
@media all and (max-width:860px){
	#mainbody5 .list1{width:100%;}
}
@media all and (max-width:767px){
	#mainbody5 .h1{font-size:30px;}
}
@media all and (max-width:539px){
	#mainbody5 .tg1 .t1{font-size:14px;}
}