/*mainStyle.css*/
body.dark-mode { background:#333; }
body.dark-mode h1, h2 , h3, p { color:#fff; }
body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a { color:#fff; }
body.dark-mode button {
    background-color:#c71526;
    color:#fff;
}
body.light-mode h1, h2, h3, p, a { color:#333; }
body.light-mode button {
    background-color:#c71526;
    color:#eee
}
button { background:#c71526; }
#darkLight {
    width:70px; height:90px; 
    font-size:3em;
    padding-left:0.5%;
    position:fixed;
    right:0; bottom:3%;
    border-radius:100px 0 0 100px;
    transition:all .3s;
    z-index:99999;
}

#darkLight:hover {
    width:130px;
    padding-left:1%;
    background-color:#111;
}

#container{overflow: hidden;}
#container h2 {font-size:40px;line-height:60px;font-weight:bold;color:#333;margin-bottom:10px;}
#container h3 {font-size:35px;line-height:50px;font-weight:bold;}
#container .subtitle {font-size:21px;color:#333;margin:30px 0;line-height:35px}

.bannerWrap{width: 100%;position: relative;background-color:#000}
.bannerWrap .inner {height:100vh;position: relative;}
.bannerWrap .titlebox {position:absolute;left:5%;bottom:30%;text-align:center;}
.bannerWrap h2 {color:#fff !important;font-family: 'Noto Serif KR', serif;}
.bannerWrap .subtitle {color:#fff !important;}
.bannerWrap .subtitle span {display:block}
.bannerWrap .ms {position:absolute;z-index:10;left:50%;bottom:6%;transform: translate(-50%, -50%);padding-left:50px}

@media screen and (min-width:1200px){
.bannerWrap .ms2 {position:absolute;z-index:10;width:23px;height:23px;left:50%;bottom:15%;transform: translate(-50%, -50%);color:#fff;}
.bannerWrap .ms2 .arrow-bottom {display: block;height:23px;margin-top:10px;animation: scroll 1s ease-in-out infinite;background: url(/img/main/mouse-img2.png) left 85% no-repeat;}
}

@media screen and (max-width:1000px){
.bannerWrap .ms2 {display:none;}
}

@media screen and (max-width:600px){
	.bannerWrap .inner {height:auto;position: relative;}
	.bannerWrap .titlebox {left:5%;bottom:5%;}
}


.storyWrap .inner .grid {position: relative;margin:50px auto;display:grid;grid-template-rows:5% 85%;grid-template-columns:40% calc(60% - 45px);gap:45px;height:560px;}
.storyWrap .inner .grid > div {position: relative;width:100%;}
.storyWrap h3 {color:#333 ;margin-bottom:20px;padding-right:100px;}
.storyWrap .item2 .fa {position: absolute;top:0px;color: #848484;border:1px solid #848484;padding:5px 20px;font-size:32px; z-index:10;border-radius: 15px;}
.storyWrap .item2 .fa-angle-left {right:60px;}
.storyWrap .item2 .fa-angle-right {right:0px;}
.storyWrap .item3 {overflow: hidden;border-radius: 15px;}
.storyWrap .item3 .bg {height: 100%;left: 50%;transform: translateX(-50%);position: absolute;border-radius: 15px;}
.storyWrap .item3 .playbtn {position: absolute;z-index:10;left: 50%;top:50%;    transform: translate(-50%, -50%); }
.storyWrap .item3 .subject {position: absolute;bottom:0;width:100%;height:60px; background-color:rgba(0, 0, 0, 0.7);;color:#fff;padding:15px 0 0 40px}
.storyWrap .item4 {height: 100%;overflow: hidden;}

.educationWrap{background-color:#f58220;padding-bottom:100px;}
.educationWrap .inner{padding:110px 0;}
.educationWrap ul {display:inline-block; *display:inline; zoom:1;width:100%;}
.educationWrap li:first-child {width:100%;height:auto;}
.educationWrap li h2 {color:#fff !important; }
.educationWrap li .subtitle {color:#fff !important;margin:45px 0 !important;}
.educationWrap li .subtitle p {padding:20px 0 50px;}
.educationWrap li .subtitle span {display:inline-block;}

.educationWrap li:nth-child(n+2) {float:left;width:calc(33.33% - 20px);margin-right:30px;height:430px;background-color:#fff;border-radius:20px;padding:40px 40px 20px 40px;position:relative}
.educationWrap li h3 {margin-bottom:10px;}
.educationWrap li h3 img {margin-bottom:10px;height:50px;}
.educationWrap li:last-child {margin-right:0;}
.educationWrap li:nth-child(n+2) span {color:#f58220;display:inline-block;}
.educationWrap li:nth-child(n+2) .link {background: url('/img/common/link_01.png') no-repeat center center;width:36px;height:36px; font-size:0;position:absolute;bottom:30px;}
.educationWrap li:nth-child(n+2):hover .link {background: url('/img/common/link_01_over.png') no-repeat center center;}

.noticeWrap {}
.noticeWrap .grid {display:grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap:30px;height:370px;}
.noticeWrap .grid-row {background-color: #f5f5f5;}
.noticeWrap .grid-row .innerb {padding:40px 30px 0 30px}
.noticeWrap .grid-row .innerb h3 img {display: inline;vertical-align: text-bottom;}
.noticeWrap h3 {float: left;line-height: 50px;margin-top:55px;margin-left:40px;margin-bottom:5px;}
.noticeWrap .fright h3 {
    float: none;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 20px;
    line-height: 1.2;
}
.noticeWrap p {margin-left:40px;width: 100%;float: left;}
.noticeWrap .link {width:47px;height:47px;background-color: #f58220;color:#fff;line-height: 47px;text-align: center; float: right;margin-left:20px;margin-top:5px;font-size:20px}

.noticeWrap .fright a {display: inline;}
.noticeWrap .fright .link {margin-top: 15px;}
.noticeWrap .bg1 {background:#f5f5f5 url("/img/main/noticeWrap_01.jpg") left top no-repeat; background-size: cover;border-radius: 15px;max-width:675px;}
.noticeWrap .bg2 {background:#f5f5f5 url("/img/main/noticeWrap_02.jpg") left top no-repeat; background-size: cover;border-radius: 15px;max-width:675px;}
.noticeWrap .bg1 h3 img {display: inline;vertical-align: bottom;}
.noticeWrap .bg2 h3 img {display: inline;vertical-align: bottom;}

.contactWrap {display:block;padding: 50px 0;}
.contactWrap .inner {position: relative;}
.contactWrap .cw {width:100%;max-width:1330px;overflow: hidden;margin:0 auto;}
.contactWrap ul {margin-top:30px;}
.contactWrap li img {width:100%;}
.contactWrap .fas {color:#fff;background-color: #f58220;width:35px;height:35px;border-radius: 50%;text-align: center;padding-top:8px}
.contactWrap .fa-arrow-left {position: absolute;left:0;bottom:25px; z-index: 5;}
.contactWrap .fa-arrow-right {position: absolute;right:0;bottom:25px; z-index: 5;}


@media screen and (max-width:1000px){
	.noticeWrap {width: 100%;}
	.noticeWrap .grid {display:grid; grid-template-columns: 1fr;grid-template-rows:1fr auto auto;gap:30px;height:auto;width:100%;}
	.noticeWrap .grid .grid-row {grid-row: span 1;}
	.noticeWrap .grid-row .innerb {padding:40px 5% 0 }
	.storyWrap .item3 .bg {position: relative;width: 100%;}
	.noticeWrap {grid-template-columns:1fr;grid-template-rows:auto auto auto;}
	.noticeWrap .grid-row .innerb {width:95%;float:left;}	
	.noticeWrap .bg1 {height:200px;width:100%;max-width:100%;}
	.noticeWrap .bg2 {height:200px;width:100%;max-width:100%;}
}

@media screen and (max-width:1370px) and (min-width:800px) {
	.inner {width:90%;margin:0;}
	.educationWrap li .subtitle span {display:inline;}
	.educationWrap li {float:left;width:calc(50% - 30px) !important;margin-right:30px;margin-bottom:30px;}
}

@media screen and (max-width:1000px){
	#container h2 {font-size:36px;line-height:50px;}
	#container h3 {font-size:25px;}

	.storyWrap .inner .grid {grid-template-rows:30px auto 30px auto;grid-template-columns:100%;gap:45px;height:auto;margin:50px auto;}
	.storyWrap .inner .item1 {grid-area: 1 / 1;}
	.storyWrap .inner .item2 {grid-area: 3 / 1;}
	.storyWrap .inner .item3 {grid-area: 2 / 1;}
	.storyWrap .inner .item4 {grid-area: 4 / 1;}

	.storyWrap {margin-top: 0px;}	
	.storyWrap .left {margin:50px 0% ;width:100%;}	
	.storyWrap .left .left-inner {float:right;width:100%;margin:0;}
	
	.storyWrap .right{position:relative;width:100%;height:auto;}
	.storyWrap .right .right-inner {position: relative;left: 0;top: 0;height:auto;overflow: auto;margin:0 -5.5%;}	
	.storyWrap .right .bg {position:relative;width:100%;height:100%;}
	.storyWrap .right .bg img {width:100%;height:auto;}	
	
	.noticeWrap {position: relative;display: inline-block;}
	.noticeWrap .left {float:left;width:100%;margin:50px auto;}
	.noticeWrap .left .left-inner {clear:both;width:90%;margin:0 5%;}	
	.noticeWrap .right {width:100%;height:auto;}

	.noticeWrap .right .right-inner {position: relative;left: 0;top: 0;height:auto;overflow:hidden;margin:0 -5.5%;}
	.noticeWrap .right .title {position:absolute;left:5%;top:30%;}
}

@media screen and (max-width:800px){
	#container h2 {font-size:25px;line-height:50px;}
	#container h3 {font-size:20px;}
	
	.bannerWrap .subtitle span {display:inline}

	.storyWrap .left span {display:contents}
	.educationWrap li:first-child {width:100%;height:auto;}
	.educationWrap li h2 {font-size:70px}
	.educationWrap li:nth-child(n+2) {width:100%;margin-right:0px;height:350px;margin-bottom:30px;padding: 40px 20px 20px 20px;}
	.educationWrap li .subtitle span {display:contents}
	.contactWrap .fa-arrow-left  {bottom:10px;margin-left:-20px;}
	.contactWrap .fa-arrow-right {bottom:10px;margin-right:-20px;}
	.noticeWrap .bg1 {background:#f5f5f5 url("/img/main/noticeWrap_02s.jpg") left top no-repeat;background-size: cover;}
	.noticeWrap .bg2 {background:#f5f5f5 url("/img/main/noticeWrap_01s.jpg") left top no-repeat;background-size: cover;}

}

@media screen and (max-width:500px){
	#container h2 {font-size:20px;line-height:40px;}
	#container h3 {font-size:20px;}

	.noticeWrap .grid-row .innerb h3 img {width:30px}

	.noticeWrap .bg1 h3 img {width:30px;vertical-align: text-bottom;}

	.noticeWrap .bg2 h3 img {width:30px;vertical-align: text-bottom;}

	.storyWrap .item3 .playbtn {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width:80px;
	}
}


@media screen and (max-width:400px){
	.noticeWrap .grid-row {width:85%;}	
	.noticeWrap .bg1 {width:85%;}
	.noticeWrap .bg2 {width:85%;}
}