body { overflow-y: hidden !important; background-color: #1b2129;} /*style change !important*/ .container { margin-top: 0;} /*main*/ .fp-tableCell { position: relative; overflow: hidden;} /* .coverImage{position: absolute;bottom: 0;left: 0;height: 100%;transition: 2s all;transform: translateY(-30%);} */ /* #section1.active .coverImage{transform: translateY(0);} */ .main_full .wrap { width: 100%; height: calc(100% - 80px); margin-top: 80px; text-align: center; position: relative;} .main_full .container.main { position: relative; height: 100%; overflow: inherit; max-width: none;} /*navigation*/ #fp-nav.right { right: auto; left: 30px; } #fp-nav ul li, #fp-nav ul li a.active span { width:5px; height: 5px;} #fp-nav ul li a span { background: none; margin: 0; left: 0; top: 0; border:2px solid #fff } #fp-nav ul li a.active span {background-color:#fff; border:2px solid #fff; } #fp-nav ul li { padding-bottom: 20px; position: relative;} #fp-nav ul li:nth-child(5) { padding-bottom: 0;} #fp-nav ul li:nth-child(5):after { display: none;} #fp-nav ul li:last-child { display: none;} #fp-nav ul li:after { content: ""; width: 10px; height: 10px; position: absolute; left: 50%; bottom: -50%; } #fp-nav ul li:last-child:after { display: none;} #fp-nav ul li a {font-size: 13px; color: red; position:relative} #fp-nav ul li a:before { content: ""; width: 100%; height: 100%; position: absolute; left: 80px; width:120px; top:-4px; transform: translateX(-50%); text-align: left; font-family: 'Play', sans-serif;} #fp-nav ul li a.active:before { color: #fff; } #fp-nav ul li:nth-child(1) a.active:before {content: "";} #fp-nav ul li:nth-child(2) a.active:before {content: "GREAT VISION"; } #fp-nav ul li:nth-child(3) a.active:before {content: "PERFECT EDU";} #fp-nav ul li:nth-child(4) a.active:before {content: "FAST SPEED";} #fp-nav ul li:nth-child(5) a.active:before {content: "CLASSY UNIT";} /*main*/ .section.active .wrap{ animation: mainFade 3s 1 cubic-bezier(.68,-0.55,.27,1.55);} @keyframes mainFade{ 0%{ background-size: 150%; } 100%{ background-size: 100%; } } #section1.active .wrap{ animation: mainFade2 3s 1 cubic-bezier(.68,-0.55,.27,1.55);} @keyframes mainFade2{ 0%{ background-size: 110%; } 100%{ background-size: 100%; } } #section6.active .wrap{ animation: mainFade3 2s 1 cubic-bezier(.68,-0.55,.27,1.55);} @keyframes mainFade3{ 0%{ background-size: 120%; } 100%{ background-size: 100%; } } #section2 .wrap { background: url(../images/main/main_visual1.jpg) center no-repeat rgb(1, 1, 1); background-size: cover; } #section2 .text { position: absolute; left: 15%; top: 31%; text-align:left} #section2 .text .con_01 { color:#f7a9c4} #section2 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section2.active .text:after { left: -100%;} #section2 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section2.active .text:before { left: -100%;} #section3 .wrap { background: url(../images/main/main_visual3.jpg) bottom no-repeat rgb(1, 1, 1); background-size: cover;} #section3 .text { position: absolute; left: 15%; top: 31%; text-align:left} #section3 .text .con_01 { color:#c5d0e7} #section3 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section3.active .text:after { left: -100%;} #section3 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section3.active .text:before { left: -100%;} #section4 .wrap { background: url(../images/main/main_visual2.jpg) center no-repeat rgb(1, 1, 1); background-size: cover;} #section4 .text { position: absolute; left: 15%; top: 31%; text-align:left} #section4 .text .con_01 {color:#1cdd91} #section4 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section4.active .text:after { left: -100%;} #section4 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section4.active .text:before { left: -100%;} #section5 .wrap { background: url(../images/main/main_visual4.jpg) bottom no-repeat rgb(1, 1, 1); background-size: cover;} #section5 .text { position: absolute; left: 15%; top: 31%; text-align:left} #section5 .text .con_01 {color:#4fbbe1} #section5 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section5.active .text:after { left: -100%;} #section5 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section5.active .text:before { left: -100%;} #section1 .wrap { background: url(http://www.pt-dmtheest.co.kr/images/main/main_visual5.jpg) center bottom no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden;} #section1 .text { position: absolute; right: 20%; top: 35%; text-align: center;} #section1 .text .con_01 { } #section1 .text .con_02 {margin-top:30px;} #section1 .text .con_03 {margin-top:30px} #section6 .wrap { background: url(../images/main/main_visual6.jpg) center bottom no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden;} #section6 .text { position: relative; width:100%; height: 100%;} #section6 .text .con_01 {position:absolute; bottom:0; left:0 } #section6 .text .con_02 {position:absolute; top:170px; left:200px } #section6 .text .con_03 {position:absolute; top:350px; left:200px } #section6 .text .con_04 {display:none} #section6 .text .con_05 {display:none} #section6 .square {display:none } .m_text1 { font-family: 'Play', sans-serif; font-size:40px; font-weight:800} .m_text2 { font-family: 'Spoqa Han Sans Neo'; font-size:50px; color:#fff; font-weight:400; margin-top:10px;} .m_text2 strong {font-weight:800} .m_text3 { font-family: 'Spoqa Han Sans Neo'; font-size:20px; color:#fff; font-weight:400; line-height:1.6; margin: 30px 0 50px 0} .square {position:absolute; top:30px ; right:220px; z-index:9; } @media(max-width:1080px) { .header_m { position: fixed; top: 0; } .main_full .wrap{ height: calc(100% - 75px); margin-top: 75px; } #fp-nav.right { left: auto; right: 10px; top:75% } #fp-nav ul li a {font-size: 0; color: red; position:relative} #fp-nav ul li { padding-bottom: 10px; position: relative;} .section.active .wrap { animation: none; } #section1.active .wrap{ animation: none; } #section6.active .wrap{ animation: none; } #section2 .wrap { background: url(../images/main/main_visual1_m.jpg) center no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden; } #section2 .text { position: absolute; left: 5%; top: 30%; text-align:left} #section2 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section2.active .text:after { left: -100%;} #section2 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section2.active .text:before { left: -100%;} #section3 .wrap { background: url(../images/main/main_visual3_m.jpg) center no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden; } #section3 .text { position: absolute; left: 5%; top: 30%; text-align:left} #section3 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section3.active .text:after { left: -100%;} #section3 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section3.active .text:before { left: -100%;} #section4 .wrap { background: url(../images/main/main_visual2_m.jpg) center no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden; } #section4 .text { position: absolute; left: 5%; top: 30%; text-align:left} #section4 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section4.active .text:after { left: -100%;} #section4 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section4.active .text:before { left: -100%;} #section5 .wrap { background: url(../images/main/main_visual4_m.jpg) left no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden; } #section5 .text { position: absolute; left: 5%; top: 30%; text-align:left} #section5 .text:after { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: -15%; transition: 3s all;} #section5.active .text:after { left: -100%;} #section5 .text:before { content: ""; width: 220%; height: 1px; background-color: rgba(255,255,255,0.0); position: absolute; left: -300%; top: 100%; transition: 3s all;} #section5.active .text:before { left: -100%;} #section1 .wrap { background: url(http://www.pt-dmtheest.co.kr/images/main/main_visual5_m.jpg) center no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden;} #section1 .text { position: absolute; right: 5%; top: 8%; text-align: center;} #section1 .text .con_01 img{width:230px; } #section1 .text .con_02 {margin-top:15px;} #section1 .text .con_02 img{width:230px; margin-top:0px;} #section1 .text .con_03 {margin-top:10px; text-align:right; padding-right:0;} #section1 .text .con_03 img{width:180px; } #section6 .wrap { background: url(../images/main/main_visual6_m.jpg) right bottom no-repeat rgb(1, 1, 1); background-size: cover; overflow: hidden;} #section6 .text { position: relative; width:100%; height: 100%;} #section6 .text .con_01 {position:absolute; bottom:40px; left:0 } #section6 .text .con_01 img{width:230px; } #section6 .text .con_02 {display:none } #section6 .text .con_03 {display:none} #section6 .text .con_04 {display:block; position:absolute; top:35px; left:0; width:100%; text-align:center} #section6 .text .con_04 img {width:300px;} #section6 .text .con_05 {display:block; position:absolute; top:70px; left:0; width:100%; text-align:center} #section6 .text .con_05 img {width:300px;} #section6 .square {display:block; position:absolute; top:485px ; right:60px; z-index:9; } #section6 .square img {width:80px;} .m_text1 { font-family: 'Play', sans-serif; font-size:20px; font-weight:800} .m_text2 { font-family: 'Spoqa Han Sans Neo'; font-size:26px; color:#fff; font-weight:400; margin-top:10px;} .m_text2 strong {font-weight:800} .m_text3 { font-family: 'Spoqa Han Sans Neo'; font-size:13px; color:#fff; font-weight:400; line-height:1.4; margin: 10px 0 50px 0} .square {position:absolute; top:15px ; right:15px; z-index:9; } .square img {width:80px;} }