@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(-800px); }
.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(-300px); }
.animation.animationBefore.L2R_L { transform: translateX(-600px); }
.animation.animationBefore.r2l { transform: translateX(30px); }
.animation.animationBefore.r2l_s { transform: translateX(10px); }
.animation.animationBefore.R2L { transform: translateX(300px); }
.animation.animationBefore.R2L_L { transform: translateX(600px); }
.animation.animationBefore.b2s_s { transform: scale(1.05, 1.05); }
.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.rt2lb { transform: translateX(200px) translateY(-200px); }
.animation.animationBefore.rot { -ms-transform: rotate(-260deg) scale(0.9, 0.9); -webkit-transform: rotate(-260deg) scale(0.9, 0.9); transform: rotate(-260deg) scale(0.9, 0.9); }
.animation.animationBefore.type2 { transition: 1s; }
.animation.animationBefore.round { transform: translateY(100px) translateX(80px); }

.wrap { width: 1200px; height: 800px; margin: 0 auto; position: relative; overflow: hidden; background: #fff; }
.move { cursor: pointer; }
.page .content > * { position: absolute; }
#bgmswitch { position: absolute; top: 8px; right: -41px; cursor: pointer; width:30px; height:30px; transition: 1s; }
.sound_wrap { width:1200px; height: 800px; margin: auto; position: relative; }

.page1_bg { background: url('../images/intro_bg.png'); }
.page1 img:nth-of-type(1) { left: 0px; top: 0px; }
.page1 .intro_box { right: 0px; top: 0px; width: 253px; height: 800px; background: rgba(0,0,0,0.6); }
.page1 .line { height: 1px; background: #8b919f; }
.page1 div:nth-of-type(2).line { width: 779px; left: 0px; top: 338px; }
.page1 div:nth-of-type(3).line { width: 841px; right: 0px; top: 654px; }
.page1 img:nth-of-type(2) { left: 351px; top: 430px; }
.page1 img:nth-of-type(3) { left: 351px; top: 508px; }
.page1 img:nth-of-type(4) { left: 62px; top: 100px; }
.page1 img:nth-of-type(5) { left: 62px; top: 140px; }
.page1 img:nth-of-type(6) { left: 62px; top: 179px; }
.page1 img:nth-of-type(7) { left: 62px; top: 218px; }
.page1 img:nth-of-type(8) { left: 62px; top: 257px; }
.page1 img:nth-of-type(4):hover, .page1 img:nth-of-type(5):hover, .page1 img:nth-of-type(6):hover, .page1 img:nth-of-type(7):hover, .page1 img:nth-of-type(8):hover { left: 67px; }
.page1 img:nth-of-type(9) { right: 60px; top: 28px; cursor: pointer; }
.page1 img:nth-of-type(10) { right: 0px; bottom: 0px; }

.page2 img:nth-of-type(1) { left: 149px; top: 229px; }
.page2 img:nth-of-type(2) { left: 149px; top: 345px; }

.page3 .line { width: 1px; height: 435px; left: 167px; top: 237px; background: #e4e4e4; }
.page3 .point { width: 11px; height: 11px; box-sizing: border-box; background: #fff; border: 3px solid #263972; left: 162px; border-radius: 11px; }
.page3 div:nth-of-type(2).point { top: 233px; }
.page3 div:nth-of-type(3).point { top: 354px; }
.page3 div:nth-of-type(4).point { top: 499px; }
.page3 div:nth-of-type(5).point { top: 548px; }
.page3 div:nth-of-type(6).point { top: 626px; }
.page3 img:nth-of-type(1) { left: 179px; top: 226px; }
.page3 img:nth-of-type(2) { left: 264px; top: 226px; }
.page3 img:nth-of-type(3) { left: 179px; top: 347px; }
.page3 img:nth-of-type(4) { left: 264px; top: 347px; }
.page3 img:nth-of-type(5) { left: 179px; top: 492px; }
.page3 img:nth-of-type(6) { left: 264px; top: 492px; }
.page3 img:nth-of-type(7) { left: 179px; top: 541px; }
.page3 img:nth-of-type(8) { left: 264px; top: 541px; }
.page3 img:nth-of-type(9) { left: 179px; top: 619px; }
.page3 img:nth-of-type(10) { left: 264px; top: 619px; }

.page4 img:nth-of-type(1) { left: 155px; top: 269px; }
.page4 img:nth-of-type(2) { left: 155px; top: 355px; }
.page4 img:nth-of-type(3) { left: 155px; top: 552px; }
.page4 img:nth-of-type(4) { left: 155px; top: 582px; }

.page5 img:nth-of-type(1) { left: 155px; top: 262px; }
.page5 img:nth-of-type(2) { left: 155px; top: 347px; }
.page5 img:nth-of-type(3) { left: 155px; top: 543px; }
.page5 img:nth-of-type(4) { left: 495px; top: 660px; }

.page6 img:nth-of-type(1) { left: 155px; top: 262px; }
.page6 img:nth-of-type(2) { left: 155px; top: 351px; }
.page6 img:nth-of-type(3) { left: 222px; top: 351px; }
.page6 .line { width: 540px; height: 1px; background: #ededed; left: 162px; }
.page6 div:nth-of-type(1).line { top: 475px; }
.page6 div:nth-of-type(2).line { top: 639px; }
.page6 img:nth-of-type(4) { left: 155px; top: 496px; }
.page6 img:nth-of-type(5) { left: 222px; top: 496px; }
.page6 img:nth-of-type(6) { left: 155px; top: 655px; }
.page6 img:nth-of-type(7) { left: 222px; top: 655px; }

.page7 img:nth-of-type(1) { left: 155px; top: 262px; }
.page7 img:nth-of-type(2) { left: 152px; top: 354px; }
.page7 img:nth-of-type(3) { left: 152px; top: 445px; }
.page7 img:nth-of-type(4) { left: 152px; top: 586px; }
.page7 .line { width: 540px; height: 1px; background: #ededed; left: 162px; }
.page7 div:nth-of-type(1).line { top: 428px; }
.page7 div:nth-of-type(2).line { top: 569px; }

.page8 img:nth-of-type(1) { left: 155px; top: 262px; }
.page8 img:nth-of-type(2) { left: 152px; top: 354px; }
.page8 img:nth-of-type(3) { left: 152px; top: 393px; }

.page9 img:nth-of-type(1) { left: 155px; top: 262px; }
.page9 img:nth-of-type(2) { left: 152px; top: 354px; }
.page9 img:nth-of-type(3) { left: 152px; top: 393px; }

.page10 img:nth-of-type(1) { left: 156px; top: 155px; }
.page10 img:nth-of-type(2) { left: 162px; top: 298px; }
.page10 img:nth-of-type(3) { left: 427px; top: 298px; }
.page10 img:nth-of-type(4) { left: 162px; top: 524px; }
.page10 img:nth-of-type(5) { left: 427px; top: 524px; }

.page11 img:nth-of-type(1) { left: 157px; top: 173px; }
.page11 iframe { left: 0px; top: 304px; }
.page11 img:nth-of-type(2) { left: 157px; top: 631px; }
.page11 img:nth-of-type(3) { left: 197px; top: 631px; }
.page11 img:nth-of-type(4) { left: 351px; top: 631px; }
.page11 img:nth-of-type(5) { left: 391px; top: 631px; }
.page11 img:nth-of-type(6) { left: 157px; top: 666px; }
.page11 img:nth-of-type(7) { left: 219px; top: 666px; }

#sitemap { position: absolute; z-index: 12; width: 1200px; height: 800px; left: 0; top: 0; background: rgba(0,0,0,0.8); display: none; text-align: center; box-sizing: border-box; padding-top: 210px; }
#sitemap .sitemap_close { margin-bottom: 100px; cursor: pointer; }
#sitemap .main { width: 1040px; margin: 0 auto; }
#sitemap .main > li { float: left; width: 20%; color: #fff; }
#sitemap .main > li p { font-size: 20px; font-weight: 600; }
#sitemap .main .sub { padding-top: 15px; }
#sitemap .main .sub li { font-size: 14px; padding: 3px 0; }

#menu { position: absolute; z-index: 11; width: 1200px; height: 82px; left: 0; top: 0; display: none; background: url('../images/menu_bg.png'); }
#menu .logo { position: absolute; background: url('../images/logo.png'); width: 42px; height: 50px; left: 62px; top: 41px; }
#menu .sitemap_open { position: absolute; right: 0px; top: 0px; cursor: pointer; }
#menu .main { position: absolute; left: 235px; top: 27px; }
#menu .main > li { position: relative; float: left; }
#menu .main > li p { z-index: 3; font-size: 14px; color: #fff; font-weight: 400; padding: 5px 25px; }
#menu .main > li.on p, #menu .main > li:hover p { font-weight: 600; }
#menu .main .sub { display: none; position: absolute; top: 15px; left: 35px; padding-top: 10px; width: auto; }
#menu .main li:nth-of-type(2) .sub { left: -12px; width: 165px; }
#menu .main li:nth-of-type(3) .sub { left: 29px; width: 78px; }
#menu .main li:nth-of-type(4) .sub { left: -16px; width: 171px; }
/* #menu .main > li:hover .sub { display: block; } */
#menu .sub > ul { background: rgba(255,255,255,0.9); border: 1px solid #a8a8a8; padding: 5px; }
#menu .sub li { padding: 2px 8px; font-size: 12px; color: #000; }
#menu .sub li.on, #menu .sub li:hover { font-weight: 600; }
#menu .sub li:before { content: " - "; margin-right: 3px; }

#menu_bg img { position: absolute; right: 0; top: 0; display: none; }
#menu_ul ul { position: absolute; left: 157px; top: 137px; width: 540px; border-bottom: 2px solid #ededed; display: none; }
#menu_ul ul li { color: #636363; padding: 10px 25px; font-size: 14px; box-sizing: border-box; float: left; height: 40px; position: relative; bottom: -2px; border-bottom: 2px solid #ededed; }
#menu_ul ul li.on, #menu_ul ul li:hover { color: #263972; border-bottom: 2px solid #263972; font-weight: 600; }

#btn_nav { display: none; }
#btn_nav div { position: absolute; top: 369px; z-index: 11; width: 59px; height: 59px; transition: 0.5s; }
#btn_nav div:nth-of-type(1) { left: 0px; background: url('../images/arrow.png'); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#btn_nav div:nth-of-type(1):hover { }
#btn_nav div:nth-of-type(2) { right: 0px; background: url('../images/arrow.png'); }
#btn_nav div:nth-of-type(2):hover { }

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