@charset "UTF-8";
@import url('../inc/fonts.css');
/*@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css");Regular(400), Bold(700), Light(300), Ultra Light(200)*/
::selection { background:#7a00e2; color: #fff; text-shadow: none; }
::-moz-selection { background:#7a00e2; color: #fff; text-shadow: none; }
::-webkit-selection { background:#7a00e2; color: #fff; text-shadow: none; }
*{margin:0;padding:0;box-sizing:border-box;}
html,body {font-size:12px;font-family: 'NanumBarunGothic', sans-serif; word-break:keep-all;-webkit-text-size-adjust:none; line-height:1; letter-spacing:-0.7px; background: #000;}
html, body, blockquote, caption, dd, div, dl, dt, fieldset, form, frame, h1, h2, h3, h4, h5, h6, hr,
iframe, input, legend, li, object, ol, p, pre, q, select, table, textarea, tr, th, td, ul, address,
header, nav, footer, aside, article, section, video, audio, source, figcation, figure, hgroup, mark {padding:0;margin:0;}
fieldset,img,abbr,acronym {border:0}
ul,ol,li {list-style-type:none}



    
            #wrapper { position:absolute; z-index:130; text-align:center; top:200px; opacity:0.3; }
            #wrapper img { width:20px; height:20px; margin-right:10px; }
            
            #contents_frame { opacity:1; }
            .tubular-bg{background: url(../img/overlays/06.png);position: absolute;height: 100vh;z-index: 99;width: 100%;}
            /* navigation */
            .control{position:absolute;left:0;bottom:10px;width:100%;text-align:center; z-index:999999999999999 !important;}
            .control li{display:inline-block;list-style:none;padding:4px 8px;margin:0 0 4px 0;border:1px solid #FFFFFF;border-radius:2px;font-size:14px;color:#FFFFFF;background-color:rgba(255,255,255,.4);cursor:pointer}
            .control li.on,
            .control li:hover{background:linear-gradient(135deg, #7a00e2, #e200ca);}
    
            .btn_play, .btn_unmute { display:none; }
            .mvBtn { cursor:pointer }
    
            .pads .on { background:linear-gradient(135deg, #e200ca, #7a00e2); opacity:1 }
            .playlistbtn img { opacity:0.5;}
            .loader{
            margin: 0 0 2em;
            height: 100px;
            width: 20%;
            text-align: center;
            padding: 1em;
            margin: 0 auto 1em;
            display: inline-block;
            vertical-align: top;
            }
    
            /*
              Set the color of the icon
            */
            svg path,
            svg rect{
              fill: #fff;
            }
			
			#outer { width:100%; height:100%; position:absolute; top:0px; left:50%; transform:translateX(-50%); border:0px solid #fff; overflow:hidden }
			.snowflake { height:100%; color: rgb(143 201 255 / 76%); font-size: 1em; font-family: Arial; text-shadow: 0 0 1px rgba(0,0,0,0.1); }
			
			@-webkit-keyframes snowflakes-fall {
				0% { top:-10% } 100% { top:1000px }
			}
			@-webkit-keyframes snowflakes-shake {
				0%, 100% { -webkit-transform:translateX(0); transform:translateX(0) }
				50% { -webkit-transform:translateX(80px); transform:translateX(80px) }
			}
			
			@keyframes snowflakes-fall {
				0% { top:-10% } 100% { top:1000px }
			}@keyframes snowflakes-shake {
				0%, 100% { transform:translateX(0) }
				50% { transform:translateX(80px) }
			}
			
			.snowflake{
				position:absolute; top:-10%; z-index:9999; -webkit-user-select:none;
				-moz-user-select:none; -ms-user-select:none; user-select:none; cursor:default;
				-webkit-animation-name:snowflakes-fall, snowflakes-shake;
				-webkit-animation-duration:10s, 3s; -webkit-animation-timing-function:linear,
				ease-in-out; -webkit-animation-iteration-count:infinite, infinite;
				-webkit-animation-play-state:running, running;animation-name:snowflakes-fall,
				snowflakes-shake; animation-duration:10s, 3s; animation-timing-function:linear,
				ease-in-out; animation-iteration-count:infinite, infinite;
				animation-play-state:running, running
			}
			
			.snowflake:nth-of-type(0) { left:1%;-webkit-animation-delay:0s, 0s; animation-delay:0s, 0s }
			.snowflake:nth-of-type(1) { left:5%;-webkit-animation-delay:1s, 1s; animation-delay:1s, 1s }
			.snowflake:nth-of-type(2) { left:10%;-webkit-animation-delay:6s, .5s; animation-delay:6s, .5s }
			.snowflake:nth-of-type(3) { left:15%;-webkit-animation-delay:4s, 2s; animation-delay:4s, 2s }
			.snowflake:nth-of-type(4) { left:20%;-webkit-animation-delay:2s, 2s; animation-delay:2s, 2s }
			.snowflake:nth-of-type(5) { left:25%;-webkit-animation-delay:8s, 3s; animation-delay:8s, 3s }
			.snowflake:nth-of-type(6) { left:30%;-webkit-animation-delay:6s, 2s; animation-delay:6s, 2s }
			.snowflake:nth-of-type(7) { left:35%;-webkit-animation-delay:9.5s, 1s; animation-delay:9.5s, 1s }
			.snowflake:nth-of-type(8) { left:40%;-webkit-animation-delay:1s,0s; animation-delay:1s, 0s }
			.snowflake:nth-of-type(9) { left:45%;-webkit-animation-delay:3s, 1.5s; animation-delay:3s, 1.5s }
			.snowflake:nth-of-type(10) { left:50%;-webkit-animation-delay:0s, 0s; animation-delay:0s, 0s }
			.snowflake:nth-of-type(11) { left:55%;-webkit-animation-delay:1s, 1s; animation-delay:1s, 1s }
			.snowflake:nth-of-type(12) { left:60%;-webkit-animation-delay:6s, .5s; animation-delay:6s, .5s }
			.snowflake:nth-of-type(13) { left:65%;-webkit-animation-delay:4s, 2s; animation-delay:4s, 2s }
			.snowflake:nth-of-type(14) { left:70%;-webkit-animation-delay:2s, 2s; animation-delay:2s, 2s }
			.snowflake:nth-of-type(15) { left:75%;-webkit-animation-delay:8s, 3s; animation-delay:8s, 3s }
			.snowflake:nth-of-type(16) { left:80%;-webkit-animation-delay:6s, 2s; animation-delay:6s, 2s }
			.snowflake:nth-of-type(17) { left:85%;-webkit-animation-delay:2.5s, 1s; animation-delay:2.5s, 1s }
			.snowflake:nth-of-type(18) { left:90%;-webkit-animation-delay:1s, 0s; animation-delay:1s, 0s }
			.snowflake:nth-of-type(19) { left:95%;-webkit-animation-delay:3s, 1.5s; animation-delay:3s, 1.5s }
			
			
 .fd { font-family:'DINBol'; letter-spacing:-0.5px; }
 .fn { font-family: 'NanumBarunGothic', sans-serif; }
 .kakao-color { color:#fae100; opacity:0.5;}
 .logo { display:none; }
 #sn_menu_panel { display:none; }
 #sn_menu_icon { display:none; }
 input[id*="sn_menu"] {display:none;}
 
 .app {position:fixed;bottom:0;display: flex; flex-direction: column;  justify-content: space-between; align-items: center; z-index:111;width:100%;}
 .wrap { }
 header { position:absolute; margin-left:40px; margin-top:85px; margin-bottom:20px; z-index:101; }
 header h1 { font-family:'DINBol'; font-size:70px; color:#fff; letter-spacing:-3px; line-height:54px; transition: 0.2s; transition-timing-function:ease-in; margin-left:-2px;}
 header h1 a { text-decoration:none; color:#fff; cursor: pointer;}
 header a:link { text-decoration:none; color:#fff; }
 header a:hover { }
 header .logo { }
 header .logo img { width:100px; height:97px;}
 .color1 { color:#fff; opacity:0.5; }
 .color2 { color:#ffc926; }
 .color3 { color:#49d1f8; }
 .color4 { color:#137ad2; }
 .color5 { color:#f849b4; }
 .color6 { color:#9db3c8; }
 .color7 { color:#8c1bf5; }
 
 header a:hover .color2 { color:#fff; box-shadow : inset 0 -54px 0px 0px #ffc926; transition: 0.2s; transition-delay:0.23s; transition-timing-function:ease-out; }
 header a:hover .color3 { color:#fff; box-shadow : inset 0 -24px 0px 0px #49d1f8; transition: 0.2s; transition-delay:0.01s; transition-timing-function:ease-out; }
 header a:hover .color4 { color:#fff; box-shadow : inset 0 -40px 0px 0px #137ad2; transition: 0.2s; transition-delay:0.04s; transition-timing-function:ease-out; }
 header a:hover .color5 { color:#fff; box-shadow : inset 0 -27px 0px 0px #f849b4; transition: 0.2s; transition-delay:0.2s; transition-timing-function:ease-out; }
 header a:hover .color6 { color:#fff; box-shadow : inset 0 -57px 0px 0px #9db3c8; transition: 0.2s; transition-delay:0.07s; transition-timing-function:ease-out; }
 header a:hover .color7 { color:#fff;  box-shadow : inset 0 -30px 0px 0px #8c1bf5; transition: 0.2s; transition-delay:0.1s; transition-timing-function:ease-out; }
 header #gnb { margin:20px 0 10px 4px; }
 header #gnb ul { }
 header #gnb ul li { }
 header #gnb ul li a { font-family:'DINBol'; font-size:21px; color:#fff; text-decoration:none; letter-spacing:-0.5px; font-weight: 100; line-height:24px; padding: 10px 10px 0px; transition: 0.2s; transition-timing-function:ease-in; /*background: url(../img/bottom_line.gif) left bottom no-repeat;*/ }
 header #gnb ul li a:hover { /*background: url(../img/bottom_line.gif) left bottom repeat-x; border-bottom: 1px solid #fff;*/ box-shadow : inset 0 -12px 0px 0px #7a00e2; transition: 0.04s; transition-timing-function:ease-out; text-decoration:underline;}
 header #gnb ul li a:hover .fn { }
 header #gnb ul li a span { font-size:16px; color:#fff; margin-right:15px;}
 header #gnb ul li i { opacity:0.5; }
 header h3 { margin-top:0px; margin-left:-3px; z-index:102 }
 header h3 ul {}
 header h3 ul li { margin-bottom:0px; font-family: 'NanumBarunGothic', sans-serif; font-size:16px; color:#fff; line-height:19px; text-decoration:none; font-weight:200;}
 header h3 ul li i { opacity:0.5; }
 
 .rt { position:absolute; right:40px; top:40px; z-index:103; }
 .rt ul {}
 .rt ul li { float:left; margin-left:20px; color:#fff; font-size:11px; transition: 0.2s; transition-timing-function:ease-in; opacity:0.5; }
 .rt ul li a { font-family: 'NanumBarunGothic', sans-serif; color:#fff; text-decoration:none;  }
 .rt ul li img { width:15px; height:15px; vertical-align: auto; }
 .rt ul li span { margin-top:-20px; }
 .op1 {  }
 .rt ul li a:hover { color:#fff; text-decoration: line-through; }
 .rt ul li a .fd { position: relative; font-size:14px; top:-4px;}
 .rt ul .lastm { margin-left:0; }
 .counting { margin-top:6px; }
 .counting2 { margin-top:6px; }
.kakaotalk { transition: 0.2s; transition-timing-function:ease-in; }
.kakaotalk:hover { box-shadow : inset 0 -12px 0px 0px #7a00e2; transition: 0.04s; transition-timing-function:ease-out;}
.tel { transition: 0.2s; transition-timing-function:ease-in; }
.tel:hover { box-shadow : inset 0 -12px 0px 0px #7a00e2; transition: 0.04s; transition-timing-function:ease-out;}
.e-mail { transition: 0.2s; transition-timing-function:ease-in; }
.e-mail:hover { box-shadow : inset 0 -12px 0px 0px #7a00e2; transition: 0.04s; transition-timing-function:ease-out;}
 
 .lb { position:absolute; left:40px; bottom:70px; z-index:107; }
 .lb img { border-radius:13px; box-shadow:10px 10px 10px rgba(0,0,0,0.3);  }
 .lb2 { position:absolute; left:40px; bottom:110px; z-index:114; opacity:0.5; }
 .lb2 ul {}
 .lb2 ul li { display:inline-block; margin-right:20px; vertical-align:middle; }
 .lb2 ul li a {  }
 .npbtn img { width:30px; vertical-align:middle;}
 .spbtn img { width:30px; vertical-align:middle;}
 .copyright { position:absolute; right:40px; bottom:70px; font-family: 'NanumBarunGothic', sans-serif; font-size:12px; color:#fff; z-index:104; opacity:0.5; }
 .nextbtn { position:absolute; font-family:'DINBol'; font-size:40px; color:#fff; right:40px; opacity:0.5; top:46%; z-index:105; }
 .prevbtn { position:absolute; font-family:'DINBol'; font-size:40px; color:#fff; left:40px; opacity:0.5;  top:46%; z-index:106; }
 .stopbtn { position:absolute; top:47%; left:49%; z-index:107; }
 .stopbtn img { width:80%;}
 .rb { position:absolute; right:30px; bottom:100px; z-index:108;}
 .rb ul {}
 .rb ul li { text-align:right; }
 .rb ul li a { font-family: 'NanumBarunGothic', sans-serif; font-size:16px; font-weight:100; color:#fff; line-height:21px; text-decoration:none; padding: 10px 10px 0px; transition: 0.2s; transition-timing-function:ease-out; transition-timing-function:ease-in; }
 .rb ul li i { opacity:0.5;}
 .rb ul li span { margin-left:15px; }
 .rb ul li a:hover { box-shadow : inset 0 -9px 0px 0px #7a00e2; transition: 0.04s; transition-timing-function:ease-out; text-decoration:underline; }
 .homebtn { position: absolute; top:40%; right:40px; z-index:112; opacity:0.5; /*box-shadow:-10px 10px 10px rgba(0,0,0,0.3);*/ }
 .playlistbtn { position: fixed; width:100%; text-align:center; margin:0 auto; bottom:70px; font-family:'DINBol'; font-size:15px; color:#fff; letter-spacing:0px; z-index:1200; }
 .title { position:absolute; font-family:'DINBol'; font-size:19px; color:#fff; z-index:1200; left:75px; bottom:74px; text-decoration:underline; transition: 0.2s; transition-timing-function:ease-in; opacity:0.8; }
 .song_title { position:absolute; left:40px; bottom:70px; z-index:1200; opacity:0.5; transition: 0.2s; transition-timing-function:ease-in; }
 .song_title img { width:20px; }
 .homepage-main { z-index:0; opacity:0.8; }
 .homepage-iraq { opacity:0.8; }
 .homepage-0019 { opacity:0.8; }
 .homepage-sun { opacity:0.8; }
 
 @media only screen and (min-width: 1024px) and (max-width: 1600px) {
 .logo { display:none; }
 #sn_menu_panel { display:none; }
 #sn_menu_icon { display:none; }
 input[id*="sn_menu"] {display:none;}
 header { position:absolute; margin-left:30px; margin-top:75px; margin-bottom:20px; z-index:101}
 header h1 { font-family:'DINBol'; font-size:60px; color:#fff; letter-spacing:-2px; line-height:49px;}
 .color1 { color:#fff; opacity:0.5; }
 .color2 { color:#ffc926; }
 .color3 { color:#49d1f8; }
 .color4 { color:#137ad2; }
 .color5 { color:#f849b4; }
 .color6 { color:#9db3c8; }
 .color7 { color:#8c1bf5; }
 header #gnb { }
 header #gnb ul { }
 header #gnb ul li { }
 header #gnb ul li a { font-family:'DINBol'; font-size:19px; color:#fff; text-decoration:none; letter-spacing:-0.5px; font-weight: 100; line-height:24px;  }
 header #gnb ul li a:hover {  }
 header #gnb ul li a:hover .fn { }
 header #gnb ul li a span { font-size:14px; color:#fff; margin-right:15px;}
 header #gnb ul li i { opacity:0.5; }
 header h3 { margin-top:0px; z-index:102 }
 header h3 ul {}
 header h3 ul li { margin-bottom:0px; font-family: 'NanumBarunGothic', sans-serif; font-size:14px; color:#fff; line-height:19px; text-decoration:none; font-weight:normal; }
 header h3 ul li i { opacity:0.5; }
 
 .rt { position:absolute; right:30px; top:30px; z-index:103; }
 .rt ul {}
 .rt ul li { float:left; color:#fff; font-size:11px; }
 .rt ul li a { font-family: 'NanumBarunGothic', sans-serif; color:#fff; text-decoration:none;  }
 .op1 { opacity:0.5; }
 .rt ul li a:hover { color:#fff; text-decoration: line-through; }
 .rt ul li a .fd { position: relative; font-size:14px; top:-4px;}
 .rt ul .lastm { margin-right:0; }
 
 .lb { position:absolute; left:30px; bottom:60px; z-index:107; }
 .lb img { border-radius:13px; box-shadow:10px 10px 10px rgba(0,0,0,0.3);  }
 .lb2 { position:absolute; left:30px; bottom:55px; z-index:107; opacity:0.5; }
 .lb2 ul {}
 .lb2 ul li {display:inline; margin-right:18px; vertical-align:middle; }
 .lb2 ul li a { }
 .npbtn img { width:28px; }
 .spbtn img { width:28px; }
 .copyright { position:absolute; right:30px; bottom:55px; font-family: 'NanumBarunGothic', sans-serif; font-size:12px; color:#fff; z-index:104; opacity:0.5; }
 .nextbtn { position:absolute; font-family:'DINBol'; font-size:30px; color:#fff; right:30px; opacity:0.5; top:46%; z-index:105; }
 .prevbtn { position:absolute; font-family:'DINBol'; font-size:30px; color:#fff; left:30px; opacity:0.5;  top:46%; z-index:106; }
 .stopbtn { position:absolute; top:47%; left:49%; z-index:107; }
 .stopbtn img { width:80%;}
 .rb { position:absolute; right:20px; bottom:80px; z-index:108;}
 .rb ul {}
 .rb ul li { text-align:right; }
 .rb ul li a { font-family: 'NanumBarunGothic', sans-serif; font-size:16px; color:#fff; line-height:21px; text-decoration:none; }
 .rb ul li i { opacity:0.5;}
 .rb ul li span { margin-left:15px; }
 .rb ul li a:hover {  }
 .homebtn { position: absolute; top:43%; right:27px; z-index:112; opacity:0.5; /*box-shadow:-10px 10px 10px rgba(0,0,0,0.3);*/ }
 .homebtn img { width:90%; }
 .playlistbtn { position: fixed; width:100%; text-align:center; margin:0 auto; bottom:55px; font-family:'DINBol'; font-size:15px; color:#fff; letter-spacing:0px; z-index:1200; }
 .title { position:absolute; font-family:'DINBol'; font-size:18px; color:#fff; z-index:110; left:64px; top:410px; text-decoration:underline; }
 .song_title { position:absolute; left:30px; top:410px; z-index:115; opacity:0.5; }
 .song_title img { width:20px; }
 .homepage-header { z-index:0;}
 .visual > div { position: absolute; width: 120px; height: 120px; bottom: 0%; z-index: 110; text-align:center; margin:0 auto; left:50px; bottom:50px; display:none;}
 .closebtn { position: fixed; right:30px; top:30px; color:#fff; display:block; font-family:'DINBol'; font-size:30px; cursor:pointer; z-index:999999999999999; }
 }
  
 @media only screen and (min-width: 640px) and (max-width: 1024px) {
 .logo { display:none; }
 #sn_menu_panel { display:none; }
 #sn_menu_icon { display:none; }
 input[id*="sn_menu"] {display:none;}
 header { position:absolute; margin-left:25px; margin-top:50px; margin-bottom:20px; z-index:101}
 header h1 { font-family:'DINBol'; font-size:50px; color:#fff; letter-spacing:-2px; line-height:42px;}
 header .logo img { width:90px; height:87px;}
 .color1 { color:#fff; opacity:0.5; }
 .color2 { color:#ffc926; }
 .color3 { color:#49d1f8; }
 .color4 { color:#137ad2; }
 .color5 { color:#f849b4; }
 .color6 { color:#9db3c8; }
 .color7 { color:#8c1bf5; }
 header #gnb { margin-left:0px; }
 header #gnb ul { }
 header #gnb ul li { }
 header #gnb ul li a { font-family:'DINBol'; font-size:18px; color:#fff; text-decoration:none; letter-spacing:-0.5px; font-weight: 100; line-height:20px;  }
 header #gnb ul li a:hover {  }
 header #gnb ul li a:hover .fn {  }
 header #gnb ul li a span { font-size:13px; color:#fff; margin-right:8px;}
 header #gnb ul li i { opacity:0.5; }
 header h3 { margin-top:0px; z-index:102; }
 header h3 ul {}
 header h3 ul li { margin-bottom:0px; font-family: 'NanumBarunGothic', sans-serif; font-size:13px; color:#fff; line-height:15px; text-decoration:none; font-weight:normal; }
 header h3 ul li i { opacity:0.5; }

 .rt { position:absolute; right:20px; top:25px; z-index:103; }
 .rt ul {}
 .rt ul li { float:left; color:#fff; font-size:11px; }
 .rt ul li a { font-family: 'NanumBarunGothic', sans-serif; color:#fff; text-decoration:none; }
 .op1 { opacity:0.5; }
 .rt ul li a:hover { color:#fff; text-decoration: line-through; }
 .rt ul li a .fd { position: relative; font-size:14px; top:-4px;}
 .rt ul .lastm { margin-right:0; }
 /*.counting { position:absolute; top:20px; right:-8px; text-align:right; }
 .counting2 { position:absolute; top:37px; right:-8px; text-align:right; }*/
 
 .lb { position:absolute; left:25px; bottom:50px; z-index:107; }
 .lb img { width:70px; border-radius:13px; box-shadow:10px 10px 10px rgba(0,0,0,0.3);}
 .lb2 { position:absolute; left:25px; bottom:50px; z-index:107; opacity:0.5; }
 .lb2 ul {}
 .lb2 ul li {display:inline; margin-right:16px; vertical-align:middle; }
 .lb2 ul li a { }
 .npbtn img { width:26px; }
 .spbtn img { width:26px; }
 .copyright { position:absolute; right:25px; bottom:50px; font-family: 'NanumBarunGothic', sans-serif; font-size:11px; text-align:right; color:#fff; z-index:104; opacity:0.5; }
 .nextbtn { position:absolute; font-family:'DINBol'; font-size:25px; color:#fff; right:25px; opacity:0.5; top:46%; z-index:105; }
 .prevbtn { position:absolute; font-family:'DINBol'; font-size:25px; color:#fff; left:25px; opacity:0.5;  top:46%; z-index:106; }
 .stopbtn { position:absolute; top:47%; left:49%; z-index:107;}
 .stopbtn img { width:50%; }
 
 .rb { position:absolute; right:15px; bottom:70px; z-index:108;}
 .rb ul {}
 .rb ul li { text-align:right; }
 .rb ul li a { font-family: 'NanumBarunGothic', sans-serif; font-size:14px; color:#fff; line-height:19px; text-decoration:none; }
 .rb ul li i { opacity:0.5;}
 .rb ul li span { margin-left:8px; }
 .rb ul li a:hover {  }
 .homebtn { position: absolute; top:40%; right:17px; z-index:112; opacity:0.5; /*box-shadow:-10px 10px 10px rgba(0,0,0,0.3);*/ }
 .homebtn img { width:80%; }
 .playlistbtn { position: fixed; width:100%; text-align:center; margin:0 auto; bottom:10px; font-family:'DINBol'; font-size:12px; color:#fff; letter-spacing:0px; z-index:1300; }
 .title { position:absolute; font-family:'DINBol'; font-size:15px; color:#fff; z-index:110; left:55px; top:350px; text-decoration:underline; }
 .song_title { position:absolute; left:25px; top:350px; z-index:115; opacity:0.5; }
 .song_title img { width:17px; }
 .homepage-header { z-index:0;}
 .visual > div { position: absolute; width: 120px; height: 120px; bottom: 0%; z-index: 110; text-align:center; margin:0 auto; left:50px; bottom:50px; display:none;}
 .closebtn { position: fixed; right:25px; top:25px; color:#fff; display:block; font-family:'DINBol'; font-size:25px; cursor:pointer; z-index:999999999999999; }
 }
 
 @media only screen and (min-width: 220px) and (max-width: 640px) {
 .tel { display:none; }
 header {  position:absolute; margin-left:15px; margin-top:45px; margin-bottom:20px; z-index:101; }
 header h1 {  font-family:'DINBol'; font-size:37px; color:#fff; letter-spacing:-2px; line-height:30px;}
 header .logo { display:none; }
 header .logo img { width:60px; height:58px; }
 .color1 { color:#fff; opacity:0.5; }
 .color2 { color:#ffc926; }
 .color3 { color:#49d1f8; }
 .color4 { color:#137ad2; }
 .color5 { color:#f849b4; }
 .color6 { color:#9db3c8; }
 .color7 { color:#8c1bf5; }
 header #gnb { display:none; }
 header #gnb ul { }
 header #gnb ul li { }
 header #gnb ul li a { font-family:'DINBol'; font-size:17px; color:#fff; text-decoration:none; letter-spacing:-0.5px; font-weight: 100; line-height:20px;  }
 header #gnb ul li a:hover {  }
 header #gnb ul li a:hover .fn {  }
 header #gnb ul li a span { font-size:11px; color:#fff; margin-right:8px;}
 header #gnb ul li i { opacity:0.5; }
 header h3 { margin-top:10px; z-index:102; display:block;}
 header h3 ul {}
 header h3 ul li { margin-bottom:0px; font-family: 'NanumBarunGothic', sans-serif; font-size:9px; color:#fff; line-height:10px; text-decoration:none; font-weight:normal; opacity:0.5;  }
 header h3 ul li i { opacity:0.5; }

 .rt { position:absolute; right:15px; top:auto; z-index:103; bottom:48px;}
 .rt ul {}
 .rt ul li { float:left; color:#fff; font-size:9px; margin-left:12px; }
 .rt ul li a { font-family: 'NanumBarunGothic', sans-serif; color:#fff; text-decoration:none; }
 .rt ul li img { width:18px; height:18px; vertical-align: auto; }
 .op1 { opacity:0.6; }
 .rt ul li a:hover { color:#fff; text-decoration: line-through; }
 .rt ul li a .fd { position: relative; font-size:12px; top:-2px;}
 .rt ul .lastm { margin-right:0; }
 .counting { margin-top:8px; }
 .counting2 { margin-top:8px; }

 
 .lb { position:absolute; left:15px; bottom:50px; z-index:107; }
 .lb img { width:70px; border-radius:13px; box-shadow:10px 10px 10px rgba(0,0,0,0.3);}
 .lb2 { position:absolute; left:15px; bottom:45px; z-index:107; opacity:0.5; }
 .lb2 ul {}
 .lb2 ul li {display:inline; margin-right:10px; vertical-align:middle; }
 .lb2 ul li a { }
 .e-mail { display:none; }
 .npbtn img { width:25px; }
 .spbtn img { width:25px; }
 .copyright { display:none; position:absolute; right:15px; bottom:75px; font-family: 'NanumBarunGothic', sans-serif; font-size:10px; text-align:right; color:#fff; z-index:104; opacity:0.5; }
 .nextbtn { position:absolute; font-family:'DINBol'; font-size:25px; color:#fff; right:15px; opacity:0.5; top:46%; z-index:105; }
 .prevbtn { position:absolute; font-family:'DINBol'; font-size:25px; color:#fff; left:15px; opacity:0.5;  top:46%; z-index:106; }
 .stopbtn { position:absolute; top:47%; left:49%; z-index:107;}
 .stopbtn img { width:50%; }
 
 .rb { display:none; position:absolute; right:5px; bottom:70px; z-index:108;}
 .rb ul {}
 .rb ul li { text-align:right; }
 .rb ul li a { font-family: 'NanumBarunGothic', sans-serif; font-size:12px; color:#fff; line-height:18px; text-decoration:none; }
 .rb ul li i { opacity:0.5;}
 .rb ul li span { margin-left:8px; }
 .rb ul li a:hover {  }
 .homebtn { position: absolute; top:40%; right:15px; z-index:112; opacity:0.5; display:none; /*box-shadow:-10px 10px 10px rgba(0,0,0,0.3);*/ }
 .homebtn img { width:70%; }
 .playlistbtn { position: fixed; width:100%; text-align:center; margin:0 auto; bottom:10px; font-family:'DINBol'; font-size:11px; color:#fff; letter-spacing:0px; z-index:1300; }
 .title { position:absolute; font-family:'DINBol'; font-size:12px; color:#fff; z-index:99; left:40px; top:154px; text-decoration:underline; }
 .song_title { position:absolute; left:15px; top:153px; z-index:99; opacity:0.5; }
 .song_title img { width:15px; }
 .homepage-header { z-index:0;}
 .visual > div { position: absolute; width: 120px; height: 120px; bottom: 0%; z-index: 110; text-align:center; margin:0 auto; left:50px; bottom:50px; display:none;}
 
#sn_menu_icon {display:block; width:41px; height:41px; position:fixed; right:10px; top:55px; z-index:100020;}
#sn_menu_icon .sn_menu_open {display:block; width:41px; height:41px; background: transparent; cursor:pointer; border-radius:41px; }
#sn_menu_icon .sn_menu_close {display:none; width:41px; height:41px; background:transparent; cursor:pointer; position:absolute; left:0; top:0; z-index:10;}
#sn_menu_icon .sn_menu_open .bar {display:block; width:24px; height:1px; background:#fff; position:absolute; left:8px; top:19px; transition: background 0s 0.2s}
#sn_menu_icon .sn_menu_open .bar::before {content:""; display:block; width:24px; height:1px; background:#fff; position:absolute; left:0; top:-8px; transform-origin:left top; transition: 0.2s;}
#sn_menu_icon .sn_menu_open .bar::after {content:""; display:block; width:24px; height:1px; background:#fff; position:absolute; left:0; top:8px; transform-origin:left bottom; transition: 0.2s;}
#sn_menu_panel {width:100%; height:100%; position:fixed; left:-100%; top:0; z-index:100010; transition:0.2s 0.3s; background:#000; opacity:0.9;
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;
}
#sn_menu_panel #sn_menu_left {width:50%; height:100%; background:url(skiing2.jpg) no-repeat 20% center; background-size:cover; position:relative; overflow:auto;
  display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center;
}
#sn_menu_panel #sn_menu_left h1 {padding:0; margin:0; text-align:center; font:800 100px/130px 'DINBol'; color:#790; text-shadow:0 0 3px #fff;}
#sn_menu_panel #sn_menu_left #social {text-align:center; width:100%;}
#sn_menu_panel #sn_menu_left .social {color:#555; display:inline-block; font-size:20px; margin:5px; transition:0.2s;}
#sn_menu_panel #sn_menu_left .social:hover {color:#790;}
#sn_menu_panel #sn_menu_left p {font:300 14px/25px 'DINBol'; color:#333; text-align:center;}
#sn_menu_panel #sn_menu_right {order:2; width:calc(50%); height:100%; background:#000; font:400 18px/40px 'DINBol'; color:#aaa; overflow-y:auto; -webkit-overflow-scrolling: touch;
  display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; border-left:1px solid #000; box-sizing:border-box;
}
#sn_menu_right #sn_menu p {position:relative; padding:0; margin:0;}
#sn_menu_right #sn_menu p label {display:block; line-height:40px; text-transform:uppercase; cursor:pointer;}
#sn_menu_right #sn_menu p label::after {content:""; display:block; width:6px; height:6px; border:2px solid #aaa; border-width:0 2px 2px 0; position:absolute; right:20px; top:15px; transform:rotate(-45deg); transition:0.3s;}
#sn_menu_right #sn_menu p label:hover {color:#7a00e2;}
#sn_menu_right #sn_menu p label:hover::after {border-color:#7a00e2;}
#sn_menu_right #sn_menu p label:last-child {display:none; position:absolute; left:0; top:0; width:100%; height:40px; background:rgba(0,0,0,0);}
#sn_menu_right #sn_menu p a {line-height:40px; color:#666; text-decoration:none;}
#sn_menu_right #sn_menu p a:hover {color:#7a00e2;}
#sn_menu_right #sn_menu div p {height:0; overflow:hidden; opacity:0; transition:0.2s; position:relative;}
#sn_menu_right div {padding:0; margin:0; list-style:none;}
#sn_menu_right #sn_menu {width:calc(100% - 50px); max-width:400px; min-width:300px; margin:0 auto; max-height:100%;}
#sn_menu_right #sn_menu > p {text-indent:0;}
#sn_menu_right #sn_menu div {position:relative;}
#sn_menu_right #sn_menu div::before {content:""; display:block; width:1px; height:calc(100% - 20px); background:#7a00e2; opacity:0.3; position:absolute; left:5px; top:0;}
#sn_menu_right #sn_menu div p {text-indent:15px; position:relative;}
#sn_menu_right #sn_menu div p::before {content:""; display:block; width:5px; height:1px; background:#7a00e2; opacity:0.3; position:absolute; left:5px; top:19px;}
#sn_menu_right #sn_menu div div::before {left:20px;}
#sn_menu_right #sn_menu div div p {text-indent:30px;}
#sn_menu_right #sn_menu div div p::before {left:20px;}
#sn_menu_right #sn_menu div div div::before {left:35px;}
#sn_menu_right #sn_menu div div div p {text-indent:45px;}
#sn_menu_right #sn_menu div div div p::before {left:35px;}

input[id*="sn_menu"] {display:none;}
input[class*="ip00"]:checked ~ #wrapper {overflow:hidden;}
input[class*="ip00"]:checked ~ #sn_menu_icon {position:fixed;}
input[class*="ip00"]:checked ~ #sn_menu_icon .sn_menu_open .bar {background:transparent; transition:0s;}
input[class*="ip00"]:checked ~ #sn_menu_icon .sn_menu_open .bar::before {transform: rotate(45deg); width:24px; left:3px;}
input[class*="ip00"]:checked ~ #sn_menu_icon .sn_menu_open .bar::after {transform: rotate(-45deg); width:24px; left:3px;}
input[class*="ip00"]:checked ~ #sn_menu_icon .sn_menu_close {display:block;}
input[class*="ip00"]:checked ~ #sn_menu_panel {left:0; transition:0.2s;}
input[class*="ip01"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu01 + div > p,
input[class*="ip02"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu02 + div > p,
input[class*="ip03"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu03 + div > p,
input[class*="ip04"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu04 + div > p,
input[class*="ip05"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu05 + div > p,
input[class*="ip06"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu06 + div > p,
input[class*="ip07"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu07 + div > p,
input[class*="ip08"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu08 + div > p,
input[class*="ip09"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu09 + div > p,
input[class*="ip10"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu10 + div > p,
input[class*="ip11"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu11 + div > p {height:40px; opacity:1;}

#sn_menu01:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu01 > label:last-child,
#sn_menu02:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu02 > label:last-child,
#sn_menu03:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu03 > label:last-child,
#sn_menu04:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu04 > label:last-child,
#sn_menu05:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu05 > label:last-child,
#sn_menu06:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu06 > label:last-child,
#sn_menu07:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu07 > label:last-child,
#sn_menu08:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu08 > label:last-child,
#sn_menu09:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu09 > label:last-child,
#sn_menu10:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu10 > label:last-child,
#sn_menu11:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu11 > label:last-child {display:block;}

input[class*="ip01"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu01 > label,
input[class*="ip02"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu02 > label,
input[class*="ip03"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu03 > label,
input[class*="ip04"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu04 > label,
input[class*="ip05"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu05 > label,
input[class*="ip06"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu06 > label,
input[class*="ip07"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu07 > label,
input[class*="ip08"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu08 > label,
input[class*="ip09"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu09 > label,
input[class*="ip10"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu10 > label,
input[class*="ip11"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu11 > label {color:#7a00e2;}

input[class*="ip01"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu01 > label::after,
input[class*="ip02"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu02 > label::after,
input[class*="ip03"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu03 > label::after,
input[class*="ip04"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu04 > label::after,
input[class*="ip05"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu05 > label::after,
input[class*="ip06"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu06 > label::after,
input[class*="ip07"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu07 > label::after,
input[class*="ip08"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu08 > label::after,
input[class*="ip09"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu09 > label::after,
input[class*="ip10"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu10 > label::after,
input[class*="ip11"]:checked ~ #sn_menu_panel #sn_menu_right #sn_menu .sn_menu11 > label::after {transform:rotate(45deg); border-color:#7a00e2;}

#header #sn_menu_icon {right:15px;}
#sn_menu_right #sn_menu {min-width:260px; margin:0 auto;}
#sn_menu_panel #sn_menu_left {width:0; display:none;}
#sn_menu_panel #sn_menu_right {width:100%; min-width:320px;}
}
 
 
 
 
 
 
 
 
		  .pads{ background: none; width: 100%; display: flex; /*align-items: flex-end*/}
		  .pads > div{ height: 30px; width: 100px; flex: 1; cursor: pointer; }
		  .pads > div:hover { background:linear-gradient(135deg, #7a00e2, #e200ca); }
		  .pad1 {background: #ffffff; opacity:0.2; height:50px; }
		  .pad2 {background: #ffffff; opacity:0.4; height:10px; }
		  .pad3 {background: #ffffff; opacity:0.5; height:30px; }
		  .pad4 {background: #ffffff; opacity:0.1; }
		  .pad5 {background: #ffffff; opacity:0.3; }
		  .pad6 {background: #ffffff; opacity:0.5; }
		  .pad7 {background: #ffffff; opacity:0.1; }
		  .pad8 {background: #ffffff; opacity:0.3; }
		  .pad9 {background: #ffffff; opacity:0.2; }
		  .pad10 {background: #ffffff; opacity:0.5; }
		  .pad11 {background: #ffffff; opacity:0.1; }
		  .pad12 {background: #ffffff; opacity:0.3; }
		  .pad13 {background: #ffffff; opacity:0.2; }
		  .pad14 {background: #ffffff; opacity:0.4; }
		  .pad15 {background: #ffffff; opacity:0.1; }
		  .pad16 {background: #ffffff; opacity:0.2; }
		  .pad17 {background: #ffffff; opacity:0.5; }
		  .pad18 {background: #ffffff; opacity:0.2; }
		  .pad19 {background: #ffffff; opacity:0.6; }
		  .pad20 {background: #ffffff; opacity:0.3; }

        @keyframes jump {
            0%{ bottom : 0%; left: 20%;  }
            25%{ bottom : 35%;  left: 15%; }
            50%{ bottom : 50%;  left: 50%; }
            100% { bottom: 0%; left: 80%; }
        }
        .visual > div { position: absolute; width: 12px; height: 12px; bottom: 0%; z-index: 110; text-align:center; margin:0 auto; left:118px; bottom:148px; display:none; }

        /* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bl%3A1%2Cs%3A%5B%7BT%3A%22r%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A500%2Cf%3A0%2Ct%3A90%2Cs%3A3%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A0.2%2Cy%3A2%7D%2Cs%3A3%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A1000%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A5%2Cy%3A0.5%7D%2Cs%3A3%2Cb%3A4%7D%5D%7D */

        @keyframes animation { 
        0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        2.15% { -webkit-transform: matrix3d(0.589, 0, 0, 0, 0, 1.514, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.589, 0, 0, 0, 0, 1.514, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        4.3% { -webkit-transform: matrix3d(0.297, 0, 0, 0, 0, 1.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.297, 0, 0, 0, 0, 1.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        6.46% { -webkit-transform: matrix3d(0.158, 0, 0, 0, 0, 2.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.158, 0, 0, 0, 0, 2.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        8.61% { -webkit-transform: matrix3d(0.125, 0, 0, 0, 0, 2.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.125, 0, 0, 0, 0, 2.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        14.16% { -webkit-transform: matrix3d(0.183, 0, 0, 0, 0, 2.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.183, 0, 0, 0, 0, 2.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        19.72% { -webkit-transform: matrix3d(0.205, 0, 0, 0, 0, 1.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.205, 0, 0, 0, 0, 1.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        24.9% { -webkit-transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        25% { -webkit-transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        27.15% { -webkit-transform: matrix3d(0.138, 0.145, 0, 0, -1.445, 1.382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.138, 0.145, 0, 0, -1.445, 1.382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        29.3% { -webkit-transform: matrix3d(0.038, 0.196, 0, 0, -1.964, 0.379, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.038, 0.196, 0, 0, -1.964, 0.379, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        30.83% { -webkit-transform: matrix3d(-0.006, 0.2, 0, 0, -2, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.006, 0.2, 0, 0, -2, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        31.46% { -webkit-transform: matrix3d(-0.016, 0.199, 0, 0, -1.994, -0.164, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.016, 0.199, 0, 0, -1.994, -0.164, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        33.61% { -webkit-transform: matrix3d(-0.029, 0.198, 0, 0, -1.979, -0.292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.029, 0.198, 0, 0, -1.979, -0.292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        39.16% { -webkit-transform: matrix3d(-0.006, 0.2, 0, 0, -1.999, -0.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.006, 0.2, 0, 0, -1.999, -0.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        41.99% { -webkit-transform: matrix3d(0, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        44.72% { -webkit-transform: matrix3d(0.002, 0.2, 0, 0, -2, 0.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.002, 0.2, 0, 0, -2, 0.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        49.9% { -webkit-transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        50% { -webkit-transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        52.15% { -webkit-transform: matrix3d(0, 0.611, 0, 0, -1.486, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0.611, 0, 0, -1.486, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        54.3% { -webkit-transform: matrix3d(0, 0.903, 0, 0, -1.121, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0.903, 0, 0, -1.121, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        55.83% { -webkit-transform: matrix3d(-0.001, 1.015, 0, 0, -0.981, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1.015, 0, 0, -0.981, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        56.46% { -webkit-transform: matrix3d(-0.001, 1.042, 0, 0, -0.948, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1.042, 0, 0, -0.948, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        58.61% { -webkit-transform: matrix3d(0, 1.075, 0, 0, -0.907, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1.075, 0, 0, -0.907, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        64.16% { -webkit-transform: matrix3d(0, 1.017, 0, 0, -0.979, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1.017, 0, 0, -0.979, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        66.99% { -webkit-transform: matrix3d(0, 0.999, 0, 0, -1.001, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0.999, 0, 0, -1.001, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        69.72% { -webkit-transform: matrix3d(0, 0.995, 0, 0, -1.006, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0.995, 0, 0, -1.006, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        75% { -webkit-transform: matrix3d(0, 0.999, 0, 0, -1.002, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0.999, 0, 0, -1.002, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        80.83% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        91.99% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
        100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
        }
 
	#previous {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        left: 10%; top:50%;
		width:40px; height:40px;
        background-image: url('../img/gall_prev_btn.svg') !important; background-size:cover;
		 }
		 
	#next {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        right: 10%; top:50%;
		width:40px; height:40px;
        background-image: url('../img/gall_next_btn.svg') !important; background-size:cover;
		 }
		 
	#toggle {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        left: 50%; bottom:12%; margin-left:-15px;
		width:30px; height:30px;
        background-image: url('../img/gall_toggle_btn.svg') !important; background-size:cover;
		 }
		 
	 #play {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        right: 10%; top:50%;
		width:30px; height:30px;
        background-image: url('../img/.svg') !important; background-size:cover;
		 }
		 
	#pause {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        right: 10%; top:50%;
		width:30px; height:30px;
        background-image: url('../img/.svg') !important; background-size:cover;
		 }

    .add {
		position:absolute;
		z-index:99;
        top: auto;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url('../img/.svg') !important;
		}
		
	@media only screen and (min-width: 220px) and (max-width: 640px) {
	#previous {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        left: 6%; top:50%;
		width:30px; height:30px;
        background-image: url('../img/gall_prev_btn.svg') !important; background-size:cover;
		 }
		 
	#next {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        right: 6%; top:50%;
		width:30px; height:30px;
        background-image: url('../img/gall_next_btn.svg') !important; background-size:cover;
		 }
		 
	#toggle {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        left: 32px; top:150px; 
		width:25px; height:25px;
        background-image: url('../img/gall_toggle_btn.svg') !important; background-size:cover;
		 }
		 
	 #play {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        right: 10%; top:50%;
		width:20px; height:20px;
        background-image: url('../img/.svg') !important; background-size:cover;
		 }
		 
	#pause {
		position:absolute; display:block; opacity:0.5;
		z-index:99;
        right: 10%; top:50%;
		width:20px; height:20px;
        background-image: url('../img/.svg') !important; background-size:cover;
		 }

    .add {
		position:absolute;
		z-index:99;
        top: auto;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url('../img/.svg') !important;
		}
		 }