@charset "euc-kr";


em {font-style:normal;}

.go_site {position:fixed; left:40px; top:160px; z-index:12; }
.go_site a {color:#fff; font-size:15px; position:relative; padding-left:24px; margin-bottom:24px; display:block; letter-spacing:0px; opacity:.5;}
.go_site a span { display:inline-block; width:20px;}
.go_site a:before {content:''; display:block; width:10px; height:10px; border-radius:50%; border:2px solid #fff; background:#fff; position:absolute; left:0; top:4px; opacity:.6;}
.go_site .active a {opacity:1;}
.go_site .active a:before {background:none; opacity:1;}

.fp-viewing-mainsection03 .go_site a , .fp-viewing-mainsection04 .go_site a {color:#000;}
.fp-viewing-mainsection03 .go_site a:before , .fp-viewing-mainsection04 .go_site a:before {border-color:#000; background:#000;}
.fp-viewing-mainsection03 .go_site .active a:before , .fp-viewing-mainsection04 .go_site .active a:before {background:none;}


#fullpage .section {overflow:hidden;}
.m1 {background:#000;}
.m1 .bg { background:url(../images/main/visual01.png) no-repeat center top; position:absolute; left:0; top:0; right:0; bottom:0; filter:blur(10px); transform: scale(1.1); transition: 1.5s ease-in-out; background-size:cover; display:none;}
.m1 video {position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; }
.m1 iframe {position:absolute; left:-10%; top:-10%;  width:120% !important; height:120% !important; object-fit: cover;}
.fp-viewing-mainsection01 .m1 .bg {transform: scale(1); filter:blur(0px);}

.m1 .inr {height:calc(100% - 111px); position:relative; z-index:2; max-width:1420px; margin:111px auto 0; border-left:1px solid rgba(255,255,255,0.2); border-right:1px solid rgba(255,255,255,0.2); display:flex; align-items: flex-end;}
.m1 .inr .txt {margin:0 0 86px 100px; color:#fff;}
.m1 .inr .txt span {font-size:28px; opacity:0; transition: 1s ease-in-out; margin-left:70px; font-weight:300; display:block; margin-bottom:10px;}
.m1 .inr .txt h2 {font-size:82px; font-family: 'esamanru'; margin-top:7px; opacity:0; transition: 1s ease-in-out; margin-left:70px;}




.m2 .bg { background:url(../images/main/visual02.png) no-repeat center top; position:absolute; left:0; top:0; right:0; bottom:0;  filter:blur(10px); transform: scale(1.1); transition: 1.5s ease-in-out;  background-size:cover;}
.fp-viewing-mainsection02 .m2 .bg {transform: scale(1); filter:blur(0px);}

.m2 .inr {height:calc(100% - 111px); position:relative; z-index:2; max-width:1420px; margin:111px auto 0; border-left:1px solid rgba(255,255,255,0.2); border-right:1px solid rgba(255,255,255,0.2); }
.m2 .inr .box {height:50%; display:flex;}
.m2 .inr .box + .box {border-top:1px solid rgba(255,255,255,0.2);}
.m2 .inr .box .left {border-right:1px solid rgba(255,255,255,0.2); height:100%; width:66.6%; padding:50px; position:relative; transition: 0.5s ease-in-out;}
/*.m2 .inr .box .left:hover {background:rgba(178,92,15,0.1); }
.m2 .inr .box.n2 .left:hover { background:rgba(15,178,96,0.1); }*/
.m2 .inr .box .right {width:33.4%; height:100%; padding:50px; position:relative;}

.m2 .inr .box h2 {font-size:24px; font-family:'esamanru'; color:#fff; margin-bottom:32px;}
.m2 .inr .box .more {position:absolute; right:50px; top:58px; color:#fff; font-size:15px; opacity:.5;}
.m2 .inr .box.n1 .left ul {display:flex; margin:0 -12px;}
.m2 .inr .box.n1 .left ul li {width:calc(33.333% - 24px); margin:0 12px; height:230px; border-radius:20px; text-align:center; background:rgba(4,58,154,0.7); backdrop-filter:blur(15px); padding:46px 20px; color:#fff;}
.m2 .inr .box.n1 .left ul li:first-child {border-radius:20px 20px 0 20px;}
.m2 .inr .box.n1 .left ul li:last-child {border-radius:20px 20px 20px 0;}
.m2 .inr .box.n1 .left ul li img {display:block; margin:0 auto;}
.m2 .inr .box.n1 .left ul li strong {display:block; margin:26px 0 12px; font-size:18px;}
.m2 .inr .box.n1 .left ul li span {color:#ddd; font-size:17px;}
.m2 .inr .box.n1 .left ul li span em {color:#ff9999;}

.m2 .inr .box .right .txt {color:#fff; line-height:1.5; margin:-6px 0 44px; opacity:.7; font-size:17px;}
.m2 .inr .box.n2 .right img {margin-top:-42px;}
.m2 .inr .box .right {display:block; transition: 0.5s ease-in-out; background:rgba(15,74,178,0);}
.m2 .inr .box .right:hover {background:rgba(15,74,178,0.1); }
.m2 .inr .box.n2 .right:hover {background:rgba(138,15,178,0.1);}

.m2 .inr .box.n2 .left ul {display:flex; margin:0 -12px;}
.m2 .inr .box.n2 .left ul li {width:calc(33.333% - 24px); margin:0 12px;  border-radius:20px;  background:rgba(255,255,255,0.07); backdrop-filter:blur(15px);  color:#fff; overflow:hidden;}
.m2 .inr .box.n2 .left ul li a { display:block;height:230px; padding:34px;   position:relative; backdrop-filter:blur(15px); }
.m2 .inr .box.n2 .left ul li a:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:url(../images/main/bg01.png) no-repeat center center; background-size:cover; transition: 0.3s ease-in-out; opacity:.8; transform: scale(1); backdrop-filter:blur(15px); }
.m2 .inr .box.n2 .left ul li:nth-child(2) a:before {background-image:url(../images/main/bg02.png);}
.m2 .inr .box.n2 .left ul li:nth-child(3) a:before {background-image:url(../images/main/bg03.png);}
.m2 .inr .box.n2 .left ul li a:hover:before {transform: scale(1.1);  filter:blur(0px); opacity:1;}
.m2 .inr .box.n2 .left ul li a span {font-size:19px; color:#fff; font-weight:600; position:relative; z-index:12;}

.m2 .inr .box.n2 .left ul li a:after {content:'¡æ'; display:block; width:34px; height:34px; border:1px solid rgba(255,255,255,0.75); text-align:center; line-height:32px; border-radius:50px; position:absolute; right:20px; bottom:20px; color:#fff; font-weight:300; font-size:16px; z-index:12;}
.m2 .inr .box.n2 .left ul li a:hover:after { animation:arrow01 1s ease-in-out infinite;}
.m2 .inr .box.n2 .left ul li:first-child {border-radius:20px 20px 0 20px;}
.m2 .inr .box.n2 .left ul li:last-child {border-radius:20px 20px 20px 0;}




.m3 {background:#eee; overflow:hidden; height:100%;}
.m3 .inr {height:calc(100% - 111px); position:relative; z-index:2; max-width:1420px; margin:111px auto 0; border-left:1px solid #fff; border-right:1px solid #fff; }
.m3 .inr .box.n1 {height:70%; display:flex; overflow:hidden;}
.m3 .inr .box.n2 {height:30%; display:flex; overflow:hidden;}
.m3 .inr .box + .box {border-top:1px solid #fff;}
.m3 .inr .box .left {border-right:1px solid #fff; height:100%; width:66.6%; padding:60px 50px; position:relative;}
.m3 .inr .box.n2 .left {border:0;}
.m3 .inr .box .right {width:33.4%; height:100%; padding:60px 50px; position:relative; overflow:hidden;}

.m3 .inr .box.n1 .left { transform: translateX(50px); opacity:0; transition: 1.5s ease-in-out;}
.m3 .inr .box.n1 .right { transform: translateX(-50px); opacity:0; transition: 1.5s ease-in-out;}
.m3 .inr .box.n2 { opacity:0; transition: 1.5s ease-in-out;}


.m3 .inr .box.n1 .left .tabs {display:flex; gap:40px; align-items: flex-end; margin-bottom:34px;}
.m3 .inr .box.n1 .left .tabs a {font-family: 'esamanru'; font-size:20px; font-weight:bold; opacity:.4; }
.m3 .inr .box.n1 .left .tabs a.on {font-size:24px; opacity:1;}
.m3 .inr .box.n1 .left .panelWrap ul { display:flex; flex-wrap:wrap; margin:0 -12px;}
.m3 .inr .box.n1 .left .panelWrap ul li {width:calc(50% - 24px); margin:0 12px 24px;}
.m3 .inr .box.n1 .left .panelWrap ul li a {display:block; height:170px; background:#fff; padding: 35px 40px; font-size:17px; position:relative; transition: 0.3s ease-in-out;}
.m3 .inr .box.n1 .left .panelWrap ul li a:hover {box-shadow:0px 0px 20px rgba(0,0,0,0.1);}
.m3 .inr .box.n1 .left .panelWrap ul li a:before {content:'¡æ'; display:block; position:absolute; right:35px; bottom:30px; font-size:32px; color:#d5d5d5;}
.m3 .inr .box.n1 .left .panelWrap ul li a:hover:before {animation:arrow01 1s ease-in-out infinite;}
@keyframes arrow01{
	0%{  margin-right:0; transform: rotateX(0deg);}
 	50%{ margin-right:10px;transform: rotateX(0deg);}
    100%{ margin-right:0;transform: rotateX(0deg);}
}    

.m3 .inr .box.n1 .left .panelWrap ul li:nth-child(1) a {border-radius:0 20px 20px 20px;}
.m3 .inr .box.n1 .left .panelWrap ul li:nth-child(2) a {border-radius:20px 0 20px 20px;}
.m3 .inr .box.n1 .left .panelWrap ul li:nth-child(3) a {border-radius:20px 20px 20px 0;}
.m3 .inr .box.n1 .left .panelWrap ul li:nth-child(4) a {border-radius:20px 20px 0 20px;}
.m3 .inr .box.n1 .left .panelWrap ul li a .txt { display:block;  text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.4; height:2.8em; transition: 0.3s ease-in-out;}
.m3 .inr .box.n1 .left .panelWrap ul li a:hover .txt {color:#ff6400;}
.m3 .inr .box.n1 .left .panelWrap ul li a .date {display:block; margin-top:30px; font-size:16px; color:#888;}
.m3 .inr .box.n1 .left .panelWrap .more {position:absolute; right:50px; top:70px; color:#888;}


.m3 .inr .box.n1 .right h2 {font-size:24px; font-family: 'esamanru'; margin-bottom:34px;}
.m3 .inr .box.n1 .right .popupzone {height:364px;}

.m3 .inr .box.n1 .right .popupzone a {border:0; display:block;}
.m3 .inr .box.n1 .right .nav {position:absolute; right:50px; top:56px; display:flex; gap:8px;}
.m3 .inr .box.n1 .right .nav button { width:33px; height:33px; background:#000 url(../images/main/btn01.png) no-repeat center center; border-radius:33px; border:0;}
.m3 .inr .box.n1 .right .nav .prev {background-color:rgba(0,0,0,0.24);}
.m3 .inr .box.n1 .right .nav .next {background:rgba(0,0,0,0.24) url(../images/main/btn02.png) no-repeat center center;}
.m3 .inr .box.n1 .right .nav .pause {background:#000 url(../images/main/btn03.png) no-repeat center center;}
.m3 .inr .box.n1 .right .nav .play {background:#000 url(../images/main/btn04.png) no-repeat center center;}


.m3 .inr .box.n2 .left ul {display:flex;}
.m3 .inr .box.n2 .left ul li {width:33.3333%;}
.m3 .inr .box.n2 .left ul li a {display:flex; align-items:center;}
.m3 .inr .box.n2 .left ul li a img {transition: 0.3s;}
.m3 .inr .box.n2 .left ul li a:hover img {transform: rotateY(180deg); filter:brightness(1.4);}
.m3 .inr .box.n2 .left ul li span {padding:50px 0 0 20px; display:block; font-size:18px;}
.m3 .inr .box.n2 .left ul li span em {color:#999; margin-left:6px;}

.m3 .inr .box.n2 .right a { display:flex; justify-content: space-between; align-items: center; height:120px; background:#222; padding:0 30px 0 40px; border-radius:12px; margin:-5px 0; transition: 0.3s ease-in-out; }
.m3 .inr .box.n2 .right a span {color:#fff; font-size:18px;}
.m3 .inr .box.n2 .right a img {transition: 0.3s ease-in-out;}
.m3 .inr .box.n2 .right a:hover {background:#000; box-shadow:0px 0px 20px rgba(0,0,0,0.1);}
.m3 .inr .box.n2 .right a:hover img {margin-right:10px;}


.fp-viewing-mainsection01 .m1 .inr .txt span {opacity:1; margin-left:0;}
.fp-viewing-mainsection01 .m1 .inr .txt h2 {opacity:1; margin-left:0;}
.fp-viewing-mainsection03 .m3 .inr .box.n1 .left {transform: translateX(0); opacity:1;}
.fp-viewing-mainsection03 .m3 .inr .box.n1 .right {transform: translateX(0); opacity:1;}
.fp-viewing-mainsection03 .m3 .inr .box {transform: translateY(0); opacity:1;}

.fp-viewing-mainsection04 .m3 .inr .box.n1 .left {transform: translateX(0); opacity:1;}
.fp-viewing-mainsection04 .m3 .inr .box.n1 .right {transform: translateX(0); opacity:1;}
.fp-viewing-mainsection04 .m3 .inr .box {transform: translateY(0); opacity:1;}
.fp-viewing-mainsection04 .m_scroll  {opacity:0; bottom:200px;}



@media (max-width: 1420px){
    
.m1 .inr .txt span {opacity:1; margin-left:0;}
.m1 .inr .txt h2 {opacity:1; margin-left:0;}
.m3 .inr .box.n1 .left {transform: translateX(0); opacity:1;}
.m3 .inr .box.n1 .right {transform: translateX(0); opacity:1;}
.m3 .inr .box {transform: translateY(0); opacity:1;}

.m3 .inr .box.n1 .left {transform: translateX(0); opacity:1;}
.m3 .inr .box.n1 .right {transform: translateX(0); opacity:1;}
.m3 .inr .box {transform: translateY(0) !important; opacity:1 !important;}

    
    
.m1 iframe { width:130% !important; height:130% !important; left:-15%; top:-15%;} 
.m1 .inr .txt span {opacity:1; margin-left:0;}
.m1 .inr .txt h2 {opacity:1; margin-left:0;}
.m3 .inr .box.n1 .left {transform: translateX(0); opacity:1;}
.m3 .inr .box.n1 .right {transform: translateX(0); opacity:1;}
.m3 .inr .box {transform: translateY(0); opacity:1;}
.m3 .inr .box.n1 .left {transform: translateX(0); opacity:1;}
.m3 .inr .box.n1 .right {transform: translateX(0); opacity:1;}
.m3 .inr .box {transform: translateY(0); opacity:1;}

    
    
.go_site , .m_scroll {display:none;}
.m1 .inr .txt {margin:0 0 60px 60px;}


.m2 , .m2 .fp-tableCell {height:auto !important; display:block !important;}

.m2 .inr {height:auto; margin:0; border:0;}
.m2 .inr .box .right .txt br {display:none;}


.m3 .inr {height:auto; margin:0; border:0;}

}


@media (max-width: 1023px){
    
    .m1 , .m1 .fp-tableCell {height:70vw !important;}
    .m1 video {width:150%; right:initial; left:-25%;}
    .m1 iframe { width:170% !important; height:170% !important; left:-35%; top:-35%;} 
    .m1 .inr .txt { margin:0 0 30px 30px;}
    .m1 .inr .txt span {font-size:20px;}
    .m1 .inr .txt h2 {font-size:52px;}
    
    .m2 .inr .box .more  {right:30px;}
    .m2 .inr .box {display:block; height:auto; border:0 !important; overflow:hidden;}
    .m2 .inr .box .left {width:100%; border:0; padding:50px 30px; float:none; border-bottom:1px solid rgba(255,255,255,0.2); height:auto;}
    .m2 .inr .box .right {width:100%; padding:50px 30px; border-bottom:1px solid rgba(255,255,255,0.2);}
    .m2 .inr .box h2 { margin-bottom:20px;}
    
    .m2 .inr .box.n1 .left ul {margin:0 -5px;}
    .m2 .inr .box.n1 .left ul li {height:auto; padding:30px 10px; margin:0 5px; width:calc(33.3333333% - 10px);}
    .m2 .inr .box.n1 .left ul li img {width:40px;}
    
    
    .m2 .inr .box.n2 .left ul {margin:0 -5px;}
    .m2 .inr .box.n2 .left ul li {height:auto;  margin:0 5px; width:calc(33.3333333% - 10px);}
    .m2 .inr .box.n2 .left ul li a {padding:30px; height:190px;}
    
    
    .m3 .inr .box {display:block !important; height:auto; border:0 !important; overflow:hidden;}
    .m3 .inr .box .left {width:100%; border:0; padding:50px 30px 30px; float:none; border-bottom:1px solid #fff; height:auto;}
    .m3 .inr .box .right {width:100%; padding:50px 30px; border-bottom:1px solid #fff;}
    .m3 .inr .box.n1 .right {border:0; padding-bottom:0;}
    .m3 .inr .box.n1 .right .popupzone {height:auto;}
    .m3 .inr .box.n2 .left {padding-bottom:0;}
    .m3 .inr .box.n2 .left ul {gap:10px;}
    .m3 .inr .box.n2 .left ul li a {display:block; text-align:center; background:#fff; padding:30px 0; border-radius:10px;}
    .m3 .inr .box.n2 .left ul li a img {width:80px;}
    .m3 .inr .box.n2 .left ul li a span {padding:20px 0 0;}
    .m3 .inr .box.n2 .left ul li span em {display:none;}
    .m3 .inr .box.n2 .right {padding-top:30px;}
    .m3 .inr .box.n1 .left .panelWrap .more {right:30px; top:60px;}
}


@media (max-width: 767px){
    .m1 , .m1 .fp-tableCell {height:81vw !important;}
    .m1 video {width:170%;  left:-35%;}
    .m1 .inr .txt { margin:0 0 30px 20px;}
    .m1 .inr .txt span {font-size:16px; margin-bottom:0px;}
    .m1 .inr .txt h2 {font-size:36px; }
    
    .m2 .inr .box h2 {font-size:22px;}
    .m2 .inr .box .more {right:20px; top:47px; font-size:14px;}
    .m2 .inr .box .left {padding:40px 20px 0; border:0;}
    .m2 .inr .box .right {padding:40px 20px;}
    .m2 .inr .box.n1 .left ul { display:block; margin:0;}
    .m2 .inr .box.n1 .left ul li {width:auto; padding:21px 15px 21px 64px; margin:0; text-align:left; position:relative; border-radius:8px !important;}
    .m2 .inr .box.n1 .left ul li img {position:absolute; left:20px; top:50%; width:auto; height:30px; margin-top:-15px;}
    .m2 .inr .box.n1 .left ul li strong {margin:0 0 6px; font-size:17px;}
    .m2 .inr .box.n1 .left ul li span {font-size:16px;}
    .m2 .inr .box.n1 .left ul li + li {margin-top:12px;}
    .m2 .inr .box .right .txt {font-size:16px; margin-bottom:26px;}
    .m2 .inr .box.n2 .right img {margin-top:-8vw; margin-bottom:40px;}
    .m2 .inr .box.n2 .left ul {display:block; margin:0;}
    .m2 .inr .box.n2 .left ul li {width:auto; border-radius:8px !important; margin:0; backdrop-filter:none;border:1px solid rgba(255,255,255,0.1);}
    .m2 .inr .box.n2 .left ul li + li {margin-top:12px;}
    .m2 .inr .box.n2 .left ul li a {height:auto; padding:7vw 22px; background:none;  }
    .m2 .inr .box.n2 .left ul li a:before {display:none;}
    .m2 .inr .box.n2 .left ul li a span {font-size:17px; }
    .m2 .inr .box.n2 .left ul li a:after { bottom:50%; margin-bottom:-17px;}
    
    .m3 .inr .box .left {padding:40px 20px 0; border:0; }
    .m3 .inr .box.n1 .left .tabs {gap:34px; margin-bottom:20px;}
    .m3 .inr .box.n1 .left .tabs a {font-size:18px;}
    .m3 .inr .box.n1 .left .tabs a.on {font-size:22px;}
    .m3 .inr .box.n1 .left .panelWrap ul {display:block; margin:0;}
    .m3 .inr .box.n1 .left .panelWrap ul li {width:auto; margin:0;}
    .m3 .inr .box.n1 .left .panelWrap ul li + li {margin-top:12px;}
    .m3 .inr .box.n1 .left .panelWrap ul li a {padding:20px 12px; height:auto; border-radius:8px !important;}
    .m3 .inr .box.n1 .left .panelWrap ul li a:before {font-size:17px; right:20px; bottom:21px;}
    .m3 .inr .box.n1 .left .panelWrap ul li a .txt {-webkit-line-clamp:1; overflow:hidden; height:auto; font-size:16px;}
    .m3 .inr .box.n1 .left .panelWrap ul li a .date {margin:7px 0 0; font-size:16px;}
    .m3 .inr .box.n1 .left .panelWrap .more {display:none;}
    
    .m3 .inr .box .right { padding:40px 20px; }
    .m3 .inr .box.n1 .right .nav {right:20px; top:36px;}
    .m3 .inr .box.n2 .left ul li a {background:#0b357f; padding:0 0 30px;}
    .m3 .inr .box.n2 .left ul li a img {width:auto;}
    .m3 .inr .box.n2 .left ul li a:hover img {transform: none; filter:none;}
    .m3 .inr .box.n2 .left ul li a span {color:#fff; padding-top:0; margin-top:-10px; font-size:17px;}
    .m3 .inr .box.n2 .right a {height:80px; padding:0 20px 0 30px; font-size:17px; border-radius:8px;}
    .m3 .inr .box.n2 .right a span {font-size:17px;}
    .m3 .inr .box.n2 .right a img {height:60px;}

    .m3 .inr .box.n1 .right h2 {margin-bottom:20px;}
}