@charset "UTF-8";
#wrap {width:  100%;height: 100%;}
div#gnbWrap {position:  fixed;z-index: 99;width: 97.5%;padding: 25px 40px 13px;}
.main1 img {width:  100%;height:  100%;z-index:  9;position: relative;}
.main2 img {width:  100%;height:  100%;z-index:  9;position: relative;}

.main1 {width:  100%;height:  100%;display:  block;background: rgba(0, 0, 0, 0.47);}
.main2 {width:  100%;height:  100%;display:  block;z-index: 999;background: url('/resources/SITE/ROOT/img/main1-bg.jpg');background-size: cover;background-repeat:  no-repeat;position:  relative;}
.main3 {width:  100%;height:  100%;display:  block;background: url('/resources/SITE/ROOT/img/main2-bg.jpg');background-size: cover;background-repeat:  no-repeat;position:  relative;}
.main1 video{position: fixed;top : 0;left : 0;min-width : 100%;min-height : 100%;width : auto;height : auto;z-index: -999;}
.main1 .poster {position:  absolute;top: 27%;left:  0;right: -45%;bottom:  0;margin: 0 auto;width: 70%;color:  #fff;font-weight:  lighter;height: 355px;}
.main1 .notibox {position: relative;top: 31%;display:  block;width: 238px;background: rgba(255, 204, 0, 0.46);padding: 20px;padding-top: 35px;color:  #fff;height: 280px;/* right: 66%; */-webkit-transform:scale(1); /*  크롬 */-moz-transform:scale(1); /* FireFox */-o-transform:scale(1); /* Opera */transform:scale(1);transition: transform .35s;-o-transition: transform .35s;-moz-transition: transform .35s;-webkit-transition: transform .35s;left: 10%;}
.main1 .notibox:hover{  cursor:pointer;            -webkit-transform:scale(1.1); /*  크롬 */            -moz-transform:scale(1.1); /* FireFox */            -o-transform:scale(1.1); /* Opera */            transform:scale(1.1);            transition: transform .35s;            -o-transition: transform .35s;            -moz-transition: transform .35s;            -webkit-transition: transform .35s;}
.main1 .poster p {letter-spacing: -6px;line-height: 108px;font-size: 120px;font-family: 'Spoqa Han';}
.poster span {letter-spacing: 0.8px;display:  block;margin-top: 20px;}
.main1 .notibox .title {font-size: 20px;font-weight: 500;line-height: 29px;word-break: break-all;}
.main1 .notibox .cont {font-weight:  lighter;line-height: 1.5;width:  100%;height: 3.0em;text-overflow: ellipsis;white-space: normal;word-break: break-word;-webkit-line-clamp:  3;-webkit-box-orient:  vertical;overflow:  hidden;}
.main1 .notibox .date {    font-weight:  lighter;    letter-spacing:  0px;    position:  absolute;    bottom: 20px;}
.main1 .notibox .plus {position:  absolute;font-size:  39px;font-weight:  lighter;right: 20px;bottom:  20px;}
.main1 .section {position:  absolute;top: 0;left:  0;right:  0;bottom:  0;margin:  0 auto;width: 90%;overflow: hidden;}
.main1 .mmode-bg {background: url('/resources/SITE/ROOT/img/video-poster.jpg');width:  100%;height:  100%;}
.main1 .mmode-bg img{display:none}
.main2 .section .main2Text{margin-top:55%;-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:0} 
.main2.active .section .main2Text{margin-top:30%;-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:1} 
.main2 .main2Text {float:  right;width: 45%;margin-top: 30%;color: #4a4a4a;}

.main2 img.main-pack{-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:0.2}
.main2.active img.main-pack{bottom: 0px;-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:1;}
.main3 img.main-pack{-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:0.2}
.main3.active img.main-pack{bottom: 0px;-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:1;}


.main2 img.main-pack {position:  absolute;left: 6%;width: 800px;height: 900px;bottom: 0px;z-index: -999;}
.main3 img.main-pack {position:  absolute;right: 6%;width: 800px;height: 900px;bottom: 0px;}
.main2 .main2Text p {font-size: 55px;font-weight:  lighter;}
.main2 .main2Text p.sm {    font-size: 18px;   margin-top:  10px;}
.main2 .arrow.mm-white {    display:  none;}
.main2 .arrow.mm-gray {    display:  inline-block;}
/* .main2 .section {background: url('/resources/SITE/ROOT/img/main2-book.png');background-size: 57% 85%;background-repeat:  no-repeat;background-position:  bottom;background-position-x: 0;overflow:  visible;}*/
.main2 .arrow {width: 48px;margin-top: 12px;}

/* .main3 .section {background: url('/resources/SITE/ROOT/img/main3-book.png');background-size: 57% 85%;background-repeat:  no-repeat;background-position:  bottom;background-position-x: 100%;overflow:  visible;} */
.main3 .arrow {width: 48px;margin-top: 10px;}
.main3 .main3Text p {    font-size:  37px;    font-weight:  lighter;}
.main3 .section .main3Text{margin-top:45%;-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:0} 
.main3.active .section .main3Text{margin-top:30%;-webkit-transition:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;opacity:1} 
.main3 .main3Text {float: left;width: 43%;margin-top: 30%;color: #4a4a4a;margin-left: 5%;}
.main3 .main3Text p {font-size: 55px;font-weight:  lighter;}
.main3 .main3Text p.sm {    font-size: 18px;    margin-top:  10px;}

b {font-weight: 700;font-weight:  800;font-weight:  bold;}
p.line {    height: 3px;    width: 30px;    background:  #fff;    margin:  10px 0px;    margin-bottom: 20px;}
.yellow {    color: #ffcc00;}
#container {height: 100%;width:  100%;}
p.upLine {margin-top: -19px;}

@media (max-width: 1540px){
.main2 img.main-pack{left:-20px; height:650px; width:700px}
.main2 .main2Text{width:48%}
.main3 img.main-pack{right:-20px; height:650px; width:700px}
.main3 .main3Text{width:48%;margin-left:10%}

}

@media (max-width: 1000px){
#gnbWrap{width: 92.5%!important;}
}


@media (max-width: 1205px){
.main1 .poster{    width: 52%;}    
.main1 .poster p {letter-spacing:  2px;line-height: 75px;font-size: 73px;}
.main1 .notibox{left:5%}
	
}

@media (max-width: 765px){
    div#gnbWrap {/* width: 90%; */padding-top: 10px;}
.main1 .poster {position: absolute;width: 89%;padding: 2% 4%;right: 0;left: 0;top: 0;height: 53%;margin:  0 auto;margin-top: 19%;margin-left: 0px;margin-right:  0px;}
.main1 .notibox {position: absolute;background: rgba(255, 204, 0, 0.46);color:  #fff;width: 92%;height: 150px;clear:  both;top: auto;left: 0;bottom:  0;padding: 5% 4%;max-height: 30%;}
.main1 .section{width: 100%;overflow:  hidden;}
.main1 .poster p {letter-spacing: -2px;line-height: 89%;font-size: 3.6rem;font-family: 'Spoqa Han';}
#footer span{bottom:30px;color: rgba(255, 255, 255, 0.34);}
.main2 .section{background-size: 100% 50%;}
.main3 .section{background-size: 100% 53%;}
.main2 .main2Text{width: 90%;margin: auto;margin-top: 20%;float:  none;position:  absolute;padding: 5%;}
.main3 .main3Text{width: 90%;margin:  auto;margin-top: 20%;float:  none;position:  absolute;padding: 5%;}
.main1 .notibox{/* left:0%; */}
.main1 .notibox .plus{right: 4%;bottom: 8%;}
.main1 .notibox .date{bottom: 8%;}
.main2 img.main-pack{width: 100%;height: 47%;left: 0;}
.main3 img.main-pack{width: 100%;height: 59%;right: 0;}
.main2 .main2Text p{font-size:40px}
.main3 .main3Text p{font-size:40px}
.poster span{margin-top: 3%;position:  relative;left: 5px;}
	#gnbWrap h1{    position:  relative;    left: -5px;}
.main2 .arrow.mm-white {    display:  inline-block;}
.main2 .arrow.mm-gray {    display:  none;}
.main1 .posterBox{position: absolute;width: 95%;padding: 0;height: 236px;display: block;text-align: left;top: 0;left:  0;bottom:  0;right:  0;margin:  auto;}
div#gnbWrap {width: 92%;padding-left: 13px;}
#gnbWrap .gnb a.nav{right: 20px;}
}


@media (max-width: 400px){
.main1 video{height: 100%;overflow:  hidden;}
.main1 {width: 400px;overflow:  hidden;}
.main3 .main3Text p.sm {    font-size: 17px;    margin-top:  10px;}
p.line{    margin-bottom: 10px;}
#gnbWrap .gnb a.nav{right:40px;}
.main2 .main2Text p{font-size: 38px;}

}

@media (max-width: 375px){
	.main1 .poster {}
	
}