@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* 초기화 */
html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
body * {padding: 0; margin: 0;}
body { font-family: 'Open Sans', sans-serif; background: #ebebeb; }
h1, h2, h3, h4, h5, h6, strong {  font-family: 'Open Sans', sans-serif; }

ul {list-style:none;}

/* animation */
.animation { opacity: 1; transform: inherit; transition: 1s; }
.animation.animationBefore { opacity: 0; transform: scale(0); transition: 0s; }
.animation.animationBefore.t2b { transform: translateY(-30px); }
.animation.animationBefore.t2b_s { transform: translateY(-10px); }
.animation.animationBefore.T2B { transform: translateY(-100px); }
.animation.animationBefore.T2B_L { transform: translateY(-300px); }
.animation.animationBefore.b2t { transform: translateY(30px); }
.animation.animationBefore.b2t_s { transform: translateY(10px); }
.animation.animationBefore.B2T { transform: translateY(100px); }
.animation.animationBefore.B2T_L { transform: translateY(300px); }
.animation.animationBefore.l2r { transform: translateX(-30px); }
.animation.animationBefore.l2r_s { transform: translateX(-10px); }
.animation.animationBefore.L2R { transform: translateX(-100px); }
.animation.animationBefore.L2R_L { transform: translateX(-300px); }
.animation.animationBefore.r2l { transform: translateX(30px); }
.animation.animationBefore.r2l_s { transform: translateX(10px); }
.animation.animationBefore.R2L { transform: translateX(100px); }
.animation.animationBefore.R2L_L { transform: translateX(300px); }
.animation.animationBefore.b2s { transform: scale(1.2, 1.2); }
.animation.animationBefore.B2S { transform: scale(2, 2); }
.animation.animationBefore.h2b { transform: scale(1, 0); }
.animation.animationBefore.w2b { transform: scale(0, 1) }
.animation.animationBefore.def { transform: inherit; }
.animation.animationBefore.rot { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.animation.animationBefore.type2 { transition: 1s; }

.wrap { width: 1200px; height: 800px; margin: 0 auto; position: relative; overflow: hidden; background: #fff; }
.move { cursor: pointer; }
.page .content img { position: absolute; }
.page .content .line { position: absolute; }

.page1_bg { background: url('../img/intro_bg.png'); }
.page1 img:nth-of-type(1) { left: 101px; top: 61px; }
.page1 img:nth-of-type(2) { left: 65px; top: 109px; }
.page1 .line { width: 1px; height: 48px; background: #fff; left: 68px; top: 679px; }
.page1 img:nth-of-type(3) { left: 79px; top: 674px; }
.page1 img:nth-of-type(4) { right: -312px; top: 0px; transition: 0.5s; }
.page1 img:nth-of-type(4).on { right: 0px; }
.page1 img:nth-of-type(5) { left: 1041px; top: 387px; }
.page1 img:nth-of-type(5).on { left: 1051px; }

.page2_bg { background: url('../img/about1_bg.png'); }
.page2 img:nth-of-type(1) { left: 109px; top: 130px; }
.page2 img:nth-of-type(2) { left: 821px; top: 504px; }

.page3_bg { background: url('../img/about2_bg.png'); }
.page3 img:nth-of-type(1) { left: 112px; top: 132px; }
.page3 img:nth-of-type(2) { left: 112px; top: 178px; }
.page3 img:nth-of-type(3) { left: 112px; top: 268px; }
.page3 img:nth-of-type(4) { left: 112px; top: 314px; }
.page3 img:nth-of-type(5) { left: 112px; top: 425px; }
.page3 img:nth-of-type(6) { left: 112px; top: 471px; }

.page4_bg { background: url('../img/ball1_bg.png'); }
.page4 img:nth-of-type(1) { left: 84px; top: 126px; }
.page4 img:nth-of-type(2) { left: 84px; top: 166px; }

.page5 img:nth-of-type(1) { left: 112px; top: 105px; }
.page5 img:nth-of-type(2) { left: 112px; top: 212px; }
.page5 img:nth-of-type(3) { left: 112px; top: 405px; }
.page5 img:nth-of-type(4) { left: 112px; top: 584px; }
.page5 .line { width: 1px; height: 405px; left: 600px; top: 168px; background: #e9e9ea; }
.page5 img:nth-of-type(5) { left: 611px; top: 105px; }
.page5 img:nth-of-type(6) { left: 611px; top: 212px; }
.page5 img:nth-of-type(7) { left: 611px; top: 405px; }
.page5 img:nth-of-type(8) { left: 611px; top: 584px; }

.page6_bg { background: url('../img/ball3_bg.png'); }
.page6 img:nth-of-type(1) { left: 81px; top: 121px; }
.page6 img:nth-of-type(2) { left: 81px; top: 167px; }

.page7 img:nth-of-type(1) { left: 95px; top: 107px; }
.page7 img:nth-of-type(2) { left: 95px; top: 202px; }
.page7 img:nth-of-type(3) { left: 95px; top: 371px; }
.page7 img:nth-of-type(4) { left: 95px; top: 536px; }
.page7 .line { width: 1px; height: 363px; left: 430px; top: 168px; background: #e9e9ea; }
.page7 img:nth-of-type(5) { left: 429px; top: 107px; }
.page7 img:nth-of-type(6) { left: 429px; top: 202px; }
.page7 img:nth-of-type(7) { left: 429px; top: 371px; }
.page7 img:nth-of-type(8) { left: 429px; top: 536px; }
.page7 div:nth-of-type(2).line { left: 763px; }
.page7 img:nth-of-type(9) { left: 763px; top: 107px; }
.page7 img:nth-of-type(10) { left: 763px; top: 202px; }
.page7 img:nth-of-type(11) { left: 763px; top: 371px; }
.page7 img:nth-of-type(12) { left: 763px; top: 536px; }

.page8_bg { background: url('../img/ball5_bg.png'); }
.page8 img:nth-of-type(1) { left: 81px; top: 129px; }
.page8 img:nth-of-type(2) { left: 81px; top: 157px; }

.page9 img:nth-of-type(1) { left: 112px; top: 105px; }
.page9 img:nth-of-type(2) { left: 112px; top: 195px; }
.page9 img:nth-of-type(3) { left: 112px; top: 405px; }
.page9 img:nth-of-type(4) { left: 112px; top: 584px; }
.page9 .line { width: 1px; height: 405px; left: 600px; top: 168px; background: #e9e9ea; }
.page9 img:nth-of-type(5) { left: 611px; top: 105px; }
.page9 img:nth-of-type(6) { left: 611px; top: 195px; }
.page9 img:nth-of-type(7) { left: 611px; top: 405px; }
.page9 img:nth-of-type(8) { left: 611px; top: 584px; }

.page10_bg { background: url('../img/ball7_bg.png'); }
.page10 img:nth-of-type(1) { left: 82px; top: 129px; }
.page10 img:nth-of-type(2) { left: 82px; top: 156px; }

.page11 img:nth-of-type(1) { left: 112px; top: 106px; }
.page11 img:nth-of-type(2) { left: 112px; top: 208px; }
.page11 img:nth-of-type(3) { left: 112px; top: 405px; }
.page11 img:nth-of-type(4) { left: 112px; top: 610px; }
.page11 .line { width: 1px; height: 405px; left: 600px; top: 168px; background: #e9e9ea; }
.page11 img:nth-of-type(5) { left: 611px; top: 106px; }
.page11 img:nth-of-type(6) { left: 611px; top: 208px; }
.page11 img:nth-of-type(7) { left: 611px; top: 405px; }
.page11 img:nth-of-type(8) { left: 611px; top: 610px; }

.page12_bg { background: url('../img/set1_bg.png'); }
.page12 img:nth-of-type(1) { left: 86px; top: 128px; }
.page12 img:nth-of-type(2) { left: 86px; top: 165px; }

.page13 img:nth-of-type(1) { left: 113px; top: 105px; }
.page13 img:nth-of-type(2) { left: 113px; top: 175px; }
.page13 img:nth-of-type(3) { left: 614px; top: 175px; }
.page13 img:nth-of-type(4) { left: 113px; top: 358px; }
.page13 img:nth-of-type(5) { left: 614px; top: 358px; }
.page13 img:nth-of-type(6) { left: 113px; top: 540px; }
.page13 img:nth-of-type(7) { left: 614px; top: 540px; }

.page14 img:nth-of-type(1) { left: 111px; top: 105px; }
.page14 img:nth-of-type(2) { left: 111px; top: 175px; }
.page14 img:nth-of-type(3) { left: 111px; top: 358px; }
.page14 img:nth-of-type(4) { left: 451px; top: 358px; }
.page14 img:nth-of-type(5) { left: 792px; top: 358px; }
.page14 img:nth-of-type(6) { left: 111px; top: 540px; }
.page14 img:nth-of-type(7) { left: 451px; top: 540px; }
.page14 img:nth-of-type(8) { left: 792px; top: 540px; }

.page15 img:nth-of-type(1) { left: 111px; top: 175px; }
.page15 img:nth-of-type(2) { left: 451px; top: 175px; }
.page15 img:nth-of-type(3) { left: 792px; top: 175px; }
.page15 img:nth-of-type(4) { left: 111px; top: 358px; }
.page15 img:nth-of-type(5) { left: 451px; top: 358px; }
.page15 img:nth-of-type(6) { left: 111px; top: 540px; }

.page16 img:nth-of-type(1) { left: 112px; top: 108px; }
.page16 img:nth-of-type(2) { left: 112px; top: 175px; }
.page16 img:nth-of-type(3) { left: 360px; top: 175px; }
.page16 img:nth-of-type(4) { left: 608px; top: 175px; }
.page16 img:nth-of-type(5) { left: 856px; top: 175px; }
.page16 img:nth-of-type(6) { left: 112px; top: 358px; }
.page16 img:nth-of-type(7) { left: 360px; top: 358px; }
.page16 img:nth-of-type(8) { left: 608px; top: 358px; }
.page16 img:nth-of-type(9) { left: 856px; top: 358px; }
.page16 img:nth-of-type(10) { left: 112px; top: 540px; }
.page16 img:nth-of-type(11) { left: 360px; top: 540px; }
.page16 img:nth-of-type(12) { left: 608px; top: 540px; }
.page16 img:nth-of-type(13) { left: 856px; top: 540px; }

.page17 img:nth-of-type(1) { left: 112px; top: 108px; }
.page17 img:nth-of-type(2) { left: 112px; top: 175px; }
.page17 img:nth-of-type(3) { left: 360px; top: 175px; }
.page17 img:nth-of-type(4) { left: 608px; top: 175px; }
.page17 img:nth-of-type(5) { left: 856px; top: 175px; }
.page17 img:nth-of-type(6) { left: 112px; top: 358px; }
.page17 img:nth-of-type(7) { left: 360px; top: 358px; }
.page17 img:nth-of-type(8) { left: 608px; top: 358px; }
.page17 img:nth-of-type(9) { left: 856px; top: 358px; }
.page17 img:nth-of-type(10) { left: 112px; top: 540px; }
.page17 img:nth-of-type(11) { left: 360px; top: 540px; }
.page17 img:nth-of-type(12) { left: 608px; top: 540px; }
.page17 img:nth-of-type(13) { left: 856px; top: 540px; }

.page18 img:nth-of-type(1) { left: 112px; top: 108px; }
.page18 img:nth-of-type(2) { left: 112px; top: 175px; }
.page18 img:nth-of-type(3) { left: 360px; top: 175px; }
.page18 img:nth-of-type(4) { left: 608px; top: 175px; }
.page18 img:nth-of-type(5) { left: 856px; top: 175px; }
.page18 img:nth-of-type(6) { left: 112px; top: 358px; }
.page18 img:nth-of-type(7) { left: 360px; top: 358px; }
.page18 img:nth-of-type(8) { left: 608px; top: 358px; }
.page18 img:nth-of-type(9) { left: 856px; top: 358px; }
.page18 img:nth-of-type(10) { left: 112px; top: 540px; }
.page18 img:nth-of-type(11) { left: 360px; top: 540px; }
.page18 img:nth-of-type(12) { left: 608px; top: 540px; }

.page19 img:nth-of-type(1) { left: 112px; top: 108px; }
.page19 img:nth-of-type(2) { left: 112px; top: 175px; }
.page19 img:nth-of-type(3) { left: 360px; top: 175px; }
.page19 img:nth-of-type(4) { left: 608px; top: 175px; }
.page19 img:nth-of-type(5) { left: 856px; top: 175px; }
.page19 img:nth-of-type(6) { left: 112px; top: 358px; }
.page19 img:nth-of-type(7) { left: 360px; top: 358px; }
.page19 img:nth-of-type(8) { left: 608px; top: 358px; }
.page19 img:nth-of-type(9) { left: 856px; top: 358px; }
.page19 img:nth-of-type(10) { left: 112px; top: 540px; }
.page19 img:nth-of-type(11) { left: 360px; top: 540px; }
.page19 img:nth-of-type(12) { left: 608px; top: 540px; }
.page19 img:nth-of-type(13) { left: 856px; top: 540px; }

.page20_bg { background: url('../img/cap1_bg.png'); }
.page20 img:nth-of-type(1) { left: 86px; top: 129px; }
.page20 img:nth-of-type(2) { left: 86px; top: 166px; }

.page21 img:nth-of-type(1) { left: 111px; top: 105px; }
.page21 img:nth-of-type(2) { left: 109px; top: 147px; }
.page21 img:nth-of-type(3) { left: 230px; top: 147px; }
.page21 img:nth-of-type(4) { left: 109px; top: 294px; }
.page21 img:nth-of-type(5) { left: 230px; top: 294px; }
.page21 img:nth-of-type(6) { left: 109px; top: 441px; }
.page21 img:nth-of-type(7) { left: 230px; top: 441px; }
.page21 img:nth-of-type(8) { left: 109px; top: 588px; }
.page21 img:nth-of-type(9) { left: 230px; top: 588px; }

.page22_bg { background: url('../img/sun1_bg.png'); }
.page22 img:nth-of-type(1) { left: 86px; top: 129px; }
.page22 img:nth-of-type(2) { left: 86px; top: 166px; }

.page23 img:nth-of-type(1) { left: 112px; top: 107px; }
.page23 img:nth-of-type(2) { left: 112px; top: 174px; }
.page23 img:nth-of-type(3) { left: 451px; top: 174px; }
.page23 img:nth-of-type(4) { left: 791px; top: 174px; }
.page23 img:nth-of-type(5) { left: 112px; top: 356px; }
.page23 img:nth-of-type(6) { left: 451px; top: 356px; }
.page23 img:nth-of-type(7) { left: 791px; top: 356px; }
.page23 img:nth-of-type(8) { left: 112px; top: 538px; }

.page24_bg { background: url('../img/acc1_bg.png'); }
.page24 img:nth-of-type(1) { left: 83px; top: 124px; }
.page24 img:nth-of-type(2) { left: 83px; top: 165px; }

.page25 img:nth-of-type(1) { left: 112px; top: 107px; }
.page25 img:nth-of-type(2) { left: 112px; top: 236px; }
.page25 .line { width: 1px; height: 540px; left: 438px; top: 167px; background: #e9e9ea; }
.page25 img:nth-of-type(3) { left: 437px; top: 107px; }
.page25 img:nth-of-type(4) { left: 437px; top: 236px; }
.page25 div:nth-of-type(2).line { left: 762px; }
.page25 img:nth-of-type(5) { left: 761px; top: 107px; }
.page25 img:nth-of-type(6) { left: 761px; top: 236px; }

.page26 img:nth-of-type(1) { left: 112px; top: 108px; }
.page26 img:nth-of-type(2) { left: 112px; top: 148px; }
.page26 img:nth-of-type(3) { left: 237px; top: 148px; }
.page26 img:nth-of-type(4) { left: 362px; top: 148px; }
.page26 img:nth-of-type(5) { left: 488px; top: 148px; }
.page26 img:nth-of-type(6) { left: 613px; top: 148px; }
.page26 img:nth-of-type(7) { left: 738px; top: 148px; }
.page26 img:nth-of-type(8) { left: 863px; top: 148px; }
.page26 img:nth-of-type(9) { left: 989px; top: 148px; }
.page26 img:nth-of-type(10) { left: 112px; top: 314px; }
.page26 img:nth-of-type(11) { left: 237px; top: 314px; }
.page26 img:nth-of-type(12) { left: 362px; top: 314px; }
.page26 img:nth-of-type(13) { left: 488px; top: 314px; }
.page26 img:nth-of-type(14) { left: 613px; top: 314px; }
.page26 img:nth-of-type(15) { left: 738px; top: 314px; }
.page26 img:nth-of-type(16) { left: 860px; top: 314px; }
.page26 img:nth-of-type(17) { left: 985px; top: 314px; }
.page26 img:nth-of-type(18) { left: 112px; top: 504px; }
.page26 img:nth-of-type(19) { left: 112px; top: 544px; }
.page26 img:nth-of-type(20) { left: 237px; top: 544px; }
.page26 img:nth-of-type(21) { left: 362px; top: 544px; }

.page27 img:nth-of-type(1) { left: 112px; top: 147px; }
.page27 img:nth-of-type(2) { left: 86px; top: 574px; }
.page27 img:nth-of-type(3) { left: 485px; top: 574px; }
.page27 img:nth-of-type(4) { left: 826px; top: 574px; }
.page27 img:nth-of-type(5) { left: 86px; top: 616px; }
.page27 img:nth-of-type(6) { left: 485px; top: 616px; }
.page27 img:nth-of-type(7) { left: 826px; top: 616px; }


.menu { position: absolute; z-index: 11; display: none; background: url('../img/menu_bg.png'); width: 1200px; height: 84px; left: 0; top: 0; }
.menu > img:nth-of-type(1) { position: absolute; right: 49px; top: 4px; }
.menu > h3 { position: absolute; color: #fff; left: 88px; top: 28px; font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
.menu .main { position: absolute; right: 70px; top: 55px; }
.menu .main > li { float: left; position: relative; padding: 0 15px; border-left: 1px solid #bbbbbb; border-right: 1px solid #bbbbbb; color: #8c8c8c; height: 15px; }
.menu .main > li:nth-of-type(1) { border-left: 0; }
.menu .main > li:nth-of-type(4) { border-right: 0; }
.menu .main > li p { position: relative; z-index: 3; font-size: 15px; letter-spacing: 0.5px; bottom: 3px; }
.menu .main > li.on, .menu .main > li:hover, .menu .pro li:hover, .menu .pro li.on { font-weight: 600; color: #116ab4; }
.menu .pro { position: absolute; width: 148px; left: -30px; top: 13px; padding-top: 15px; display: none; }
.menu .pro > ul { padding: 5px; border: 1px solid #808285; background: rgba(255,255,255,1); }
.menu .pro li { padding: 2px 0; text-align: center; color: #808285; letter-spacing: -0.5px; font-size: 13px; font-weight: 400; }
.menu .main > li:hover .pro { display: block; }

#btn_nav { display: none; }
#btn_nav div { position: absolute; top: 375px; z-index: 11; width: 25px; height: 51px; }
#btn_nav div:nth-of-type(1) { left: 46px; }
#btn_nav div:nth-of-type(2) { right: 46px; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#btn_nav div { background: url('../img/arrow.png'); }
#btn_nav h4 { position: absolute; width: 100%; left: 0; bottom: 30px; text-align: center; z-index: 11;}
#btn_nav h4 a { width: 6px; height: 6px; border-radius: 6px; background: #bbbbbb; display: inline-block; margin: 0 7px; }
#btn_nav h4 a.on { background: #00295e; }
#btn_nav h4.p1 a { display: none; }
#btn_nav h4.p2 a:nth-of-type(n+3) { display: none; }
#btn_nav h4.p3 a:nth-of-type(n+4) { display: none; }
#btn_nav h4.p4 a:nth-of-type(n+5) { display: none; }
#btn_nav h4.p5 a:nth-of-type(n+6) { display: none; }
#btn_nav h4.p6 a:nth-of-type(n+7) { display: none; }
#btn_nav h4.p7 a:nth-of-type(n+8) { display: none; }
/* #btn_nav div:hover { background: url('../img/arrow_hover.png'); } */

#pro_tab { position: absolute; width: 38px; height: 600px; top: 129px; right: 0; opacity: 0; transition: 1s; z-index: 11; }
#pro_tab.tpro1 { background: url('../img/pro_tab1.png'); }
#pro_tab.tpro2 { background: url('../img/pro_tab2.png'); }
#pro_tab.tpro3 { background: url('../img/pro_tab3.png'); }
#pro_tab.tpro4 { background: url('../img/pro_tab4.png'); }
#pro_tab.tpro5 { background: url('../img/pro_tab5.png'); }
#pro_tab.show { opacity: 1; }
#pro_tab div { height: 104px; width: 100%; margin-top: 20px; }
#pro_tab div:nth-of-type(1) { margin-top: 0; }

.page { display:none; width: 1200px; height: 800px; overflow: hidden; position: absolute; }
.page > div { width: 1200px; height: 800px; box-sizing: border-box; }
.active { display: block; }