@charset "utf-8";
/* CSS Document */
progress{color:#fff; position:fixed; top:100;}
#mainFrame .main-visual{width:100%; height: 100vh; position:relative;}
#mainFrame .visual01{width:100%; height: 100vh; top:0; left:0; overflow: hidden; position:absolute; z-index: 1; background: url("/image/main/video-thumnail.jpg") no-repeat center; background-size:cover;}
#mainFrame .visual02{position:absolute; top:0; left:0; width:100%; height: 100vh; background: url("/image/main/visual02.jpg") center no-repeat; background-size:cover; z-index: 0; overflow: hidden;}
#mainFrame .video-pc{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width:100vw; min-width:1920px; opacity: 0;}
#mainFrame .main-visual .block01{width:100%; height: 100%; z-index: 3; position:absolute; top:0; left:0; background: radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));}
#mainFrame .visual02 > img{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width:100vw; min-width:1920px;}
#mainFrame .main-visual .sns-wrap{position:absolute; top:50%; left:30px; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); z-index: 15;}
#mainFrame .main-visual .sns-wrap > li{margin-bottom:3.125rem; position:relative; cursor: pointer;}
#mainFrame .main-visual .sns-wrap > li > a > img{display:block; margin:0 auto;}
#mainFrame .main-visual .sns-wrap > li:last-child{margin-bottom:0}
#mainFrame .main-visual .sns-wrap > li > .wechatId{position:absolute; left:-280px; top:50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); display:flex; align-items: center; transition:all .5s; cursor:pointer; opacity:0;}
#mainFrame .main-visual .sns-wrap > li.on > .wechatId{left:20px;  transition:all .5s; opacity:1;}
#mainFrame .main-visual .sns-wrap > li > .wechatId > .inner-wrap{border-radius: 30px; background-color: #7D1685; display:flex; align-items: center; padding:5px 15px; width:210px; justify-content: space-between; margin-left:-12px;}
#mainFrame .main-visual .sns-wrap > li > .wechatId > .inner-wrap > p{color:#fff; font-size:1rem;}


#mainFrame .main-visual .btn-wrap .cls-1{fill: none; stroke: #87898f; transition:all .5s;}
#mainFrame .main-visual .btn-wrap p{color:#87898f; transition:all .5s;}
#mainFrame .main-visual .btn-wrap:hover .cls-1{stroke: #f3cfac;}
#mainFrame .main-visual .btn-wrap:hover p{color:#f3cfac;}
#mainFrame .main-visual .control-wrap{position:absolute; top:50%; right:30px; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); z-index: 10;}
#mainFrame .main-visual .prev{margin-bottom:8.75rem;}
#mainFrame .main-visual .btn-wrap{position:relative; width:44px; height: 150px; cursor: pointer;}
#mainFrame .main-visual .btn-wrap > p{position:absolute; font-size:1.25rem;}
#mainFrame .main-visual .next > p{left:0; top:0; z-index: 10; transform: rotate(90deg);}
#mainFrame .main-visual .next > svg{position:absolute; right:0; top:0; z-index: 10;}
#mainFrame .main-visual .prev > p{right:0; bottom:0; z-index: 10; transform: rotate(90deg)}
#mainFrame .main-visual .prev > svg{position:absolute; left:0; top:0; z-index: 10;}
#mainFrame .main-visual .content-wrap{position:absolute; bottom:12%; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); width:calc(100% - 204px); max-width:1280px; z-index: 10; height: 299px;}
#mainFrame .main-visual .content-wrap > .inner-wrap{position:relative; height: 100%;}
#mainFrame .main-visual .content-wrap .message-wrap{position:absolute; left:34px; top:0; width:100%; max-width:458px;}
#mainFrame .main-visual .content-wrap .message-wrap > .inner-wrap{position:relative;}
#mainFrame .main-visual .content-wrap .message-wrap .red-box{width:68px; height: 68px; background-color:rgba(125,22,133,0.5); position:absolute; top:-34px; left:-40px; z-index: 9; transition: all .5s;}
#mainFrame .main-visual .content-wrap .message-wrap .txt-wrap{position:absolute; z-index: 10; top:0; left:0;}
#mainFrame .main-visual .content-wrap .message-wrap .txt-wrap > p{color:#F3CFAC; font-size:4.375rem; font-family: "Playfair Display","serif"; word-break:normal; line-height: 100%;}
#mainFrame .main-visual .content-wrap .message-wrap .txt-wrap > p > span{font-size:5.625rem; font-weight: 700; font-family: "Playfair Display","serif"; word-break:normal;}
#mainFrame .main-visual .content-wrap .message-wrap .txt-wrap > p:last-child{color:#fff; font-size:1.5625rem; font-family: "Roboto", "sans-seif"; margin-top:2.5rem;}
#mainFrame .main-visual .content-wrap .number-wrap{position:absolute; top:0; left:calc(100% - 119px); display:flex; align-items: baseline; z-index: 10;}
#mainFrame .main-visual .content-wrap .number-wrap > p{font-size:1.5625rem; font-family: "Playfair Display","serif"; vertical-align:top; line-height: 100%; transition:all .5s;}
#mainFrame .main-visual .content-wrap .number-wrap > p.on{font-size:3.125rem; color:#F3CFAC; }
#mainFrame .main-visual .content-wrap .number-wrap > img{margin:0 10px;}
#mainFrame .main-visual .content-wrap .detail-btn{position:absolute; bottom:0; left:calc(100% - 154px); z-index: 10;}



#mainFrame .notice-wrap{padding:8.75rem 0;}
#mainFrame .notice-wrap > .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin:0 auto; display:flex; justify-content: space-between; align-items: flex-start; flex-wrap:wrap;}
#mainFrame .notice-wrap .title-wrap{display:flex; align-content: space-between; flex-wrap: wrap; width:270px; height: 283px;}
#mainFrame .notice-wrap .title-wrap h1{font-family: "Playfair Display","serif"; color:#F3CFAC; margin-top:2.5rem;}
#mainFrame .notice-wrap .content-wrap{width:calc(100% - 310px); max-width:680px; display:flex; justify-content: space-between;}
#mainFrame .notice-wrap .content-wrap > .box-wrap{width:200px; transition:all .5s;}
#mainFrame .notice-wrap .content-wrap > .box-wrap > .stitle{font-weight: 700;}
#mainFrame .notice-wrap .content-wrap > .box-wrap > h4{color:#fff; margin-top:2.5rem; 
display: -webkit-box; /* Old WebKit */
-webkit-line-clamp: 2; /* 표시할 줄 수 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all; 
}
#mainFrame .notice-wrap .content-wrap > .box-wrap:hover > h4{color:#F3CFAC; transition:all .5s;}
#mainFrame .notice-wrap .content-wrap > .box-wrap > .cont{margin-top:2.5rem;
display: -webkit-box; /* Old WebKit */
-webkit-line-clamp: 2; /* 표시할 줄 수 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word; 
}
#mainFrame .notice-wrap .content-wrap > .box-wrap > .date{font-size:0.875rem; margin-top:2.5rem}



#mainFrame .scene-wrap{padding:8.75rem 0; background-color: #141516;}
#mainFrame .scene-wrap > .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin:0 auto; position:relative;}
#mainFrame .scene-wrap .back-deco{position:absolute; top:-8.75rem; left:0; z-index: 0; width:100%; max-width:500px;}
#mainFrame .scene-wrap .film{position:absolute; top:0; left:-30px; z-index: 1; width:100%; max-width:901px;}
#mainFrame .scene-wrap .cont-wrap{position:absolute; top:0; right:0;  display: flex; justify-content: flex-end; width:400px; flex-wrap: wrap; z-index: 3;}
#mainFrame .scene-wrap .cont-wrap > h1{color:#F3CFAC; margin-top:2.5rem; font-family: "Playfair Display","serif"; text-align: right; line-height: 100%; display:block; padding:0; word-break: keep-all;}
#mainFrame .scene-wrap .cont-wrap > p{ text-align: right; margin-top:15px; padding:0;} 
#mainFrame .scene-wrap .cont-wrap > .detail-btn{margin-top:6.25rem;}



#mainFrame .program-wrap{padding:8.75rem 0; position:relative;}
#mainFrame .program-wrap > .deco2{position:absolute; top:0; right:0; z-index: 0;}
#mainFrame .program-wrap > .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin:0 auto; position:relative; z-index: 1;}
#mainFrame .program-wrap .title-wrap > h1{font-family: "Playfair Display","serif"; color:#F3CFAC; margin-top:2.5rem;}
#mainFrame .program-wrap .title-wrap > p{margin-top:15px;}
#mainFrame .program-wrap .cont-wrap{margin-top:2.5rem; display:flex; flex-wrap: wrap;}
#mainFrame .program-wrap .cont-wrap > .box-wrap{width:25%; border-radius: 30px; padding:2.5rem; box-sizing: border-box; position:relative; min-height: 400px;}
#mainFrame .program-wrap .cont-wrap > .box-wrap:nth-child(even){background: linear-gradient(to bottom, #161616, #212121);}
#mainFrame .program-wrap .cont-wrap > .box-wrap:nth-child(odd){background: linear-gradient(to bottom, #292929, #212121);}
#mainFrame .program-wrap .box-wrap > .circle{width:116px; height: 116px; margin:0 auto; background-color:#212121; display:flex; justify-content:center
; align-items: center; border-radius: 50%;}
#mainFrame .program-wrap .box-wrap > h4{color:#fff; margin-top:1.875rem; text-align: center;}
#mainFrame .program-wrap .box-wrap > p{text-align: center; margin-top:10px; margin-bottom:2.5rem; white-space: pre-line;}
#mainFrame .program-wrap .box-wrap > .readBtn{position:absolute; bottom:2.5rem; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0);}
#mainFrame .program-wrap .box-wrap > .readBtn:hover{color:#7D1685;}


#mainFrame .banner-wrap{width:100%; background: url("/image/main/banner.jpg") center no-repeat; background-attachment: fixed; overflow: auto;}
#mainFrame .banner-wrap > .inner-wrap{width:auto; margin:8.75rem auto; text-align: center; position:relative; z-index: 1;}
#mainFrame .banner-wrap .pointer{margin:0 auto;}
#mainFrame .banner-wrap p:nth-child(2){color:#fff; font-size:2.5rem; font-weight: 700; margin-top:2.5rem; text-align: center;}
#mainFrame .banner-wrap p:nth-child(3){color:#fff; text-align: center;}




.pointer{width:70px; height: 5px; background-color:#7D1685;}
#mainFrame .detail-btn{width:154px; padding-bottom:15px; border-bottom:3px solid #fff; display:flex; transition: all .5s; align-items: center; justify-content: space-between;}
#mainFrame .detail-btn > p{font-size:1.25rem; color:#fff; font-weight: 500; transition: all .5s;}
#mainFrame .detail-btn .cls-1{fill:#fff; transition: all .5s;}
#mainFrame .detail-btn:hover{border-bottom:3px solid #F3CFAC;}
#mainFrame .detail-btn:hover .cls-1{fill:#F3CFAC; transition: all .5s;}
#mainFrame .detail-btn:hover > p{font-size:1.25rem; color:#F3CFAC; font-weight: 500; transition: all .5s;}


@media only screen and (max-width:1040px){
	#mainFrame .notice-wrap .content-wrap{width:100%; margin-top:6.25rem; max-width:none;}
	#mainFrame .notice-wrap .title-wrap{width:100%; justify-content: space-between; align-items: flex-end; height: auto;}
}

@media only screen and (max-width:912px){
	#mainFrame .main-visual .content-wrap{height:489px;}
	#mainFrame .main-visual .content-wrap .number-wrap{left:40px;}
	#mainFrame .main-visual .content-wrap .message-wrap{top:118px;}
	#mainFrame .main-visual .content-wrap .detail-btn{left:40px;}
	#mainFrame .program-wrap .cont-wrap > .box-wrap{width:50%;}
	#mainFrame .program-wrap .cont-wrap > .box-wrap:nth-child(3){margin-top:2.5rem;}
	#mainFrame .program-wrap .cont-wrap > .box-wrap:nth-child(4){margin-top:2.5rem;}
}

@media only screen and (max-width:768px){
	#mainFrame .main-visual .content-wrap .message-wrap{top:111px;}
	#mainFrame .main-visual .content-wrap{height:445px;}
	#mainFrame .notice-wrap .content-wrap > .box-wrap{width:150px;}
	#mainFrame .scene-wrap .film{top:50px;}
	#mainFrame .program-wrap .cont-wrap > .box-wrap{min-height: 350px;}
}

@media only screen and (max-width:640px){
	#mainFrame .main-visual .content-wrap{width:calc(100% - 60px);}
	#mainFrame .main-visual .content-wrap .detail-btn{left:30px;}
	#mainFrame .main-visual .content-wrap .number-wrap{left:30px;}
	#mainFrame .main-visual .content-wrap .message-wrap{top:90px; left:30px;}
	#mainFrame .main-visual .content-wrap .message-wrap .red-box{width:48px; height: 48px; left:-30px; top:-28px;}
	#mainFrame .main-visual .content-wrap{height:391px;}
	#mainFrame .main-visual .sns-wrap{display:none;}
	#mainFrame .main-visual .control-wrap{display:none;}
	#mainFrame .main-visual .content-wrap .message-wrap .txt-wrap{width:calc(100% - 30px);}
	#mainFrame .notice-wrap .content-wrap > .box-wrap{width:100px;}
	#mainFrame .scene-wrap .film{top:100px;}
	#mainFrame .scene-wrap .cont-wrap{width:294px;}
	#mainFrame .program-wrap .box-wrap > .circle{width:80px; height: 80px;}
	#mainFrame .program-wrap .box-wrap > .circle > img{width:30%;}
	#mainFrame .program-wrap .cont-wrap > .box-wrap{min-height: 300px;}
	#mainFrame .banner-wrap{background-attachment: local; background-size:cover; background-position:center;}
	.language-sel-wrap.on > .dorpdown-wrap{height:69px;}
	#mainFrame .program-wrap .box-wrap > p{white-space: normal;}
	
}

@media only screen and (max-width:432px){
	#mainFrame .notice-wrap .title-wrap{width:215px; height: 167px;}
	#mainFrame .notice-wrap .content-wrap > .box-wrap{width:calc(50% - 20px);}
	#mainFrame .notice-wrap .content-wrap > .box-wrap:last-child{display:none;}
}

@media only screen and (max-width:425px){
	#mainFrame .scene-wrap .film{top:230px;}
	#mainFrame .program-wrap .cont-wrap > .box-wrap{width:100%;}
	#mainFrame .program-wrap .cont-wrap > .box-wrap:nth-child(2){margin-top:2.5rem;}
}

@media only screen and (max-width:354px){
	#mainFrame .scene-wrap .cont-wrap{width:100%;}
	#mainFrame .scene-wrap .film{top:280px;}
}