@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_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(-90deg) scale(0.9, 0.9); -webkit-transform: rotate(-90deg) scale(0.9, 0.9); transform: rotate(-90deg) 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; z-index: 2; }
.page1 img:nth-of-type(2) { left: 543px; top: 0px; z-index: 2; }
.page1 img:nth-of-type(3) { left: 642px; top: 0px; z-index: 2; }
.page1 img:nth-of-type(4) { left: 0px; bottom: 0px; }
.page1 .line { left: 232px; top: 428px; background: #595858; width: 300px; height: 2px; }
.page1 img:nth-of-type(5) { left: 225px; top: 355px; }
.page1 img:nth-of-type(6) { left: 225px; top: 445px; }
.page1 img:nth-of-type(7) { left: 225px; top: 308px; }
.page1 img:nth-of-type(8) { left: 225px; top: 261px; }
.page1 img:nth-of-type(9) { left: 1033px; top: 655px; transition: 0.6s; z-index: 2; }
.page1 img:nth-of-type(9):hover { transform: scale(1.1, 1.1); }

.page2_bg { background: url('../images/sub_bg.png'); }
.page2 img:nth-of-type(1) { left: 294px; top: 149px; }
.page2 img:nth-of-type(2) { left: 554px; top: 156px; }
.page2 img:nth-of-type(3) { left: 554px; top: 425px; }
.page2 img:nth-of-type(4) { left: 554px; top: 639px; }

.page3_bg { background: url('../images/sub_bg1.png'); }
.page3 img:nth-of-type(1) { left: 266px; top: 269px; }
.page3 img:nth-of-type(2) { left: 266px; top: 334px; }
.page3 img:nth-of-type(3) { left: 266px; top: 413px; }
.page3 img:nth-of-type(4) { left: 633px; top: 197px; }
.page3 img:nth-of-type(5) { left: 790px; top: 389px; }

.page4_bg { background: url('../images/sub_bg1.png'); }
.page4 .video_list { width: 970px; left: 120px; top: 130px; }
/* .page4 .video_list li { background: #fff; border: 1px solid #436caa; color: #436caa; font-size: 16px; letter-spacing: -1px; text-align: center; cursor: pointer; width: calc(20% - 10px); margin-right: 10px; float: left; box-sizing: border-box; height: 55px; padding: 5px 0; border-radius: 10px; } */
.page4 .video_list li { background: #fff; border: 1px solid #436caa; color: #436caa; font-size: 16px; letter-spacing: -1px; text-align: center; cursor: pointer; width: calc(33.3% - 10px); margin-right: 10px; float: left; box-sizing: border-box; height: 55px; padding: 5px 0; border-radius: 10px; }
/* .page4 .video_list li:nth-of-type(1), .page4 .video_list li:nth-of-type(2) { padding-top: 16px; } */
.page4 .video_list li { padding-top: 16px; }
.page4 .video_list li.on, .page4 .video_list li:hover { background: #436caa; color: #fff; }
.page4 .videos { left: 120px; top: 195px; }
.page4 .videos iframe { display: none; }
.page4 .videos iframe:nth-of-type(1) { display: block; }

.ppt { position: relative; border: 2px solid #436caa; overflow: hidden; }
.ppt ul { height: 100%; margin-left: 0; transition: 0.5s; }
.ppt ul:after { content: ""; display: block; clear: both; }
.ppt ul li { float: left; height: 100%; }
.ppt .nav i { color: #436caa; position: absolute; font-size: 30px; cursor: pointer; top: 275px; }
.ppt .nav i:hover { color: #333; }
.ppt .nav i:nth-of-type(1) { left: 10px; }
.ppt .nav i:nth-of-type(2) { right: 10px; }
.ppt .nav .pno { position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center; }
.ppt .nav .pno a { background: #fff; border: 1px solid #436caa; border-radius: 100%; cursor: pointer; width: 8px; height: 8px; display: inline-block; margin: 0 3px; }
.ppt .nav .pno a.on, .ppt .nav .pno a:hover { background: #436caa; }

/* .page5_bg { background: url('../images/sub_bg2.png'); } */
.page5 .ppt { width: 800px; height: 600px; left: 198px; top: 130px; }
.page5 .ppt ul { width: calc(100% * 14); }
.page5 .ppt ul li { width: calc(100% / 14); }
.page5 .ppt ul li:nth-of-type(1) { background: url('../images/ppt/ktank/1.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(2) { background: url('../images/ppt/ktank/2.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(3) { background: url('../images/ppt/ktank/3.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(4) { background: url('../images/ppt/ktank/4.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(5) { background: url('../images/ppt/ktank/5.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(6) { background: url('../images/ppt/ktank/6.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(7) { background: url('../images/ppt/ktank/7.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(8) { background: url('../images/ppt/ktank/8.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(9) { background: url('../images/ppt/ktank/9.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(10) { background: url('../images/ppt/ktank/10.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(11) { background: url('../images/ppt/ktank/11.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(12) { background: url('../images/ppt/ktank/12.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(13) { background: url('../images/ppt/ktank/13.JPG') center center / cover; }
.page5 .ppt ul li:nth-of-type(14) { background: url('../images/ppt/ktank/14.JPG') center center / cover; }

/* .page8_bg { background: url('../images/sub_bg2.png'); } */
.page6 .ppt { width: 960px; height: 540px; left: 118px; top: 160px; }
.page6 .ppt .nav i { top: 245px; }
.page6 .ppt ul { width: calc(100% * 24); }
.page6 .ppt ul li { width: calc(100% / 24); }
.page6 .ppt ul li:nth-of-type(1) { background: url('../images/ppt/building/1.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(2) { background: url('../images/ppt/building/2.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(3) { background: url('../images/ppt/building/3.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(4) { background: url('../images/ppt/building/4.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(5) { background: url('../images/ppt/building/5.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(6) { background: url('../images/ppt/building/6.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(7) { background: url('../images/ppt/building/7.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(8) { background: url('../images/ppt/building/8.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(9) { background: url('../images/ppt/building/9.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(10) { background: url('../images/ppt/building/10.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(11) { background: url('../images/ppt/building/11.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(12) { background: url('../images/ppt/building/12.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(13) { background: url('../images/ppt/building/13.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(14) { background: url('../images/ppt/building/14.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(15) { background: url('../images/ppt/building/15.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(16) { background: url('../images/ppt/building/16.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(17) { background: url('../images/ppt/building/17.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(18) { background: url('../images/ppt/building/18.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(19) { background: url('../images/ppt/building/19.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(20) { background: url('../images/ppt/building/20.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(21) { background: url('../images/ppt/building/21.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(22) { background: url('../images/ppt/building/22.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(23) { background: url('../images/ppt/building/23.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(24) { background: url('../images/ppt/building/24.JPG') center center / cover; }

/* .page6_bg { background: url('../images/sub_bg2.png'); } */
/* .page6 .ppt { width: 960px; height: 540px; left: 118px; top: 160px; }
.page6 .ppt .nav i { top: 245px; }
.page6 .ppt ul { width: calc(100% * 30); }
.page6 .ppt ul li { width: calc(100% / 30); }
.page6 .ppt ul li:nth-of-type(1) { background: url('../images/ppt/agricultural/1.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(2) { background: url('../images/ppt/agricultural/2.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(3) { background: url('../images/ppt/agricultural/3.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(4) { background: url('../images/ppt/agricultural/4.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(5) { background: url('../images/ppt/agricultural/5.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(6) { background: url('../images/ppt/agricultural/6.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(7) { background: url('../images/ppt/agricultural/7.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(8) { background: url('../images/ppt/agricultural/8.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(9) { background: url('../images/ppt/agricultural/9.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(10) { background: url('../images/ppt/agricultural/10.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(11) { background: url('../images/ppt/agricultural/11.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(12) { background: url('../images/ppt/agricultural/12.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(13) { background: url('../images/ppt/agricultural/13.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(14) { background: url('../images/ppt/agricultural/14.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(15) { background: url('../images/ppt/agricultural/15.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(16) { background: url('../images/ppt/agricultural/16.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(17) { background: url('../images/ppt/agricultural/17.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(18) { background: url('../images/ppt/agricultural/18.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(19) { background: url('../images/ppt/agricultural/19.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(20) { background: url('../images/ppt/agricultural/20.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(21) { background: url('../images/ppt/agricultural/21.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(22) { background: url('../images/ppt/agricultural/22.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(23) { background: url('../images/ppt/agricultural/23.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(24) { background: url('../images/ppt/agricultural/24.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(25) { background: url('../images/ppt/agricultural/25.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(26) { background: url('../images/ppt/agricultural/26.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(27) { background: url('../images/ppt/agricultural/27.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(28) { background: url('../images/ppt/agricultural/28.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(29) { background: url('../images/ppt/agricultural/29.JPG') center center / cover; }
.page6 .ppt ul li:nth-of-type(30) { background: url('../images/ppt/agricultural/30.JPG') center center / cover; } */

/* .page7_bg { background: url('../images/sub_bg2.png'); } */
.page7 .ppt { width: 800px; height: 600px; left: 198px; top: 130px; }
.page7 .ppt ul { width: calc(100% * 6); }
.page7 .ppt ul li { width: calc(100% / 6); }
.page7 .ppt ul li:nth-of-type(1) { background: url('../images/ppt/Innozinc/1.jpg') center center / cover; }
.page7 .ppt ul li:nth-of-type(2) { background: url('../images/ppt/Innozinc/2.jpg') center center / cover; }
.page7 .ppt ul li:nth-of-type(3) { background: url('../images/ppt/Innozinc/3.jpg') center center / cover; }
.page7 .ppt ul li:nth-of-type(4) { background: url('../images/ppt/Innozinc/4.jpg') center center / cover; }
.page7 .ppt ul li:nth-of-type(5) { background: url('../images/ppt/Innozinc/5.jpg') center center / cover; }
.page7 .ppt ul li:nth-of-type(6) { background: url('../images/ppt/Innozinc/6.jpg') center center / cover; }

/* .page8_bg { background: url('../images/sub_bg2.png'); } */
.page8 .ppt { width: 800px; height: 600px; left: 198px; top: 130px; }
.page8 .ppt ul { width: calc(100% * 3); }
.page8 .ppt ul li { width: calc(100% / 3); }
.page8 .ppt ul li:nth-of-type(1) { background: url('../images/ppt/consulting/1.jpg') center center / cover; }
.page8 .ppt ul li:nth-of-type(2) { background: url('../images/ppt/consulting/2.jpg') center center / cover; }
.page8 .ppt ul li:nth-of-type(3) { background: url('../images/ppt/consulting/3.jpg') center center / cover; }



/* .page9_bg { background: url('../images/sub_bg2.png'); } */
/* .page9 .ppt { width: 720px; height: 540px; left: 238px; top: 160px; }
.page9 .ppt .nav i { top: 245px; }
.page9 .ppt ul { width: calc(100% * 37); }
.page9 .ppt ul li { width: calc(100% / 37); }
.page9 .ppt ul li:nth-of-type(1) { background: url('../images/ppt/infrastructure/1.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(2) { background: url('../images/ppt/infrastructure/2.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(3) { background: url('../images/ppt/infrastructure/3.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(4) { background: url('../images/ppt/infrastructure/4.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(5) { background: url('../images/ppt/infrastructure/5.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(6) { background: url('../images/ppt/infrastructure/6.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(7) { background: url('../images/ppt/infrastructure/7.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(8) { background: url('../images/ppt/infrastructure/8.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(9) { background: url('../images/ppt/infrastructure/9.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(10) { background: url('../images/ppt/infrastructure/10.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(11) { background: url('../images/ppt/infrastructure/11.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(12) { background: url('../images/ppt/infrastructure/12.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(13) { background: url('../images/ppt/infrastructure/13.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(14) { background: url('../images/ppt/infrastructure/14.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(15) { background: url('../images/ppt/infrastructure/15.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(16) { background: url('../images/ppt/infrastructure/16.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(17) { background: url('../images/ppt/infrastructure/17.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(18) { background: url('../images/ppt/infrastructure/18.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(19) { background: url('../images/ppt/infrastructure/19.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(20) { background: url('../images/ppt/infrastructure/20.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(21) { background: url('../images/ppt/infrastructure/21.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(22) { background: url('../images/ppt/infrastructure/22.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(23) { background: url('../images/ppt/infrastructure/23.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(24) { background: url('../images/ppt/infrastructure/24.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(25) { background: url('../images/ppt/infrastructure/25.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(26) { background: url('../images/ppt/infrastructure/26.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(27) { background: url('../images/ppt/infrastructure/27.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(28) { background: url('../images/ppt/infrastructure/28.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(29) { background: url('../images/ppt/infrastructure/29.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(30) { background: url('../images/ppt/infrastructure/30.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(31) { background: url('../images/ppt/infrastructure/31.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(32) { background: url('../images/ppt/infrastructure/32.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(33) { background: url('../images/ppt/infrastructure/33.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(34) { background: url('../images/ppt/infrastructure/34.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(35) { background: url('../images/ppt/infrastructure/35.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(36) { background: url('../images/ppt/infrastructure/36.JPG') center center / cover; }
.page9 .ppt ul li:nth-of-type(37) { background: url('../images/ppt/infrastructure/37.JPG') center center / cover; } */

.page9_bg { background: url('../images/sub_bg2.png'); }
.page9 .content { position: absolute; left: 149px; top: 135px; }
.page9 .content > * { position: relative; vertical-align: top; }
.page9 .content img { margin-right: 30px; vertical-align: top; }
.page9 .content img:last-of-type { margin-right: 0; }
.page9 .flex_wrap { margin-bottom: 20px; }
.page9 .flex_wrap:last-of-type { margin-bottom: 0px; }

.page10_bg { background: url('../images/sub_bg.png'); }
.page10 iframe { left: 195px; top: 150px; }
.page10 img:nth-of-type(1) { left: 659px; top: 215px; }
.page10 img:nth-of-type(2) { left: 659px; top: 250px; }
.page10 img:nth-of-type(3) { left: 659px; top: 327px; }
.page10 img:nth-of-type(4) { left: 659px; top: 364px; }
.page10 img:nth-of-type(5) { left: 659px; top: 420px; }
.page10 img:nth-of-type(6) { left: 659px; top: 452px; }
.page10 img:nth-of-type(7) { left: 659px; top: 514px; }
.page10 img:nth-of-type(8) { left: 659px; top: 546px; }

#menu { position: absolute; z-index: 11; display: none; width: 1200px; left: 0; top: 0; }
#menu .logo { position: absolute; background: url('../images/logo.png'); width: 197px; height: 39px; left: 61px; top: 44px; }
#menu .logo.white { background: url('../images/logo_white.png'); }
#menu .main { position: absolute; left: 465px; top: 55px; }
#menu .main > li { position: relative; padding: 0 30px; float: left; }
#menu .main > li p { position: relative; z-index: 3; font-size: 15px; color: #737373; font-weight: 600; padding-bottom: 5px; }
#menu .main > li.on p, #menu .main > li:hover p { color: #436caa; border-bottom: 2px solid #436caa; }
#menu .main .sub { display: none; position: absolute; top: 15px; left: 9px; padding-top: 20px; width: auto; }
#menu .main li:nth-of-type(3) .sub { left: 2px; width: 130px; }
#menu .main > li:hover .sub { display: block; }
#menu .sub > ul { background: rgba(255,255,255,0.9); border: 1px dotted #436caa; padding: 5px; }
#menu .sub li { padding: 2px 8px; font-size: 12px; color: #000; }
#menu .sub li.on, #menu .sub li:hover { color: #003976; font-weight: 600; }
#menu .sub li:before { content: " - "; margin-right: 3px; }

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

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

.scroll_wrap { overflow: hidden; overflow-y: scroll; display: block; width: 935px; height: 545px; }
/***** scrollbar*****/
.scroll_wrap::-webkit-scrollbar { width: 5px; }
.scroll_wrap::-webkit-scrollbar-thumb { border-radius: 2.5px; background-color: #acacac; }
.scroll_wrap::-webkit-scrollbar-track { width: 3px; border-radius: 1.5px; background-color: #ebebeb; }