@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/*font-family: 'Noto Sans KR', sans-serif;*/
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/*font-family: 'Nanum Gothic', sans-serif;*/
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
/*font-family: 'Titillium Web', sans-serif;*/

/* reset */
html {  }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{ margin:0;  padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,var {font-style:normal; font-weight:normal; }
ol,ul {list-style: none; }
caption,th { text-align:left;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight:normal;}
q:before,q:after {content:"";}
a{outline:0;   text-decoration:none; color:#666;}
em { font-style:normal; }
body { font: 12px /1.4 arial, sans-serif; color:#666; }
.h { display:none; }

/*
.group { width: 100%; height: 500%; position: absolute; }
.group>div { width: 100%; height: 20%; background-size: cover; position: relative; }*/
.group { width: 100%; position: absolute; }
.group>div { width: 100%; height: 820px; background-size: cover; position: relative; }
#box1 { overflow: hidden; }
#box2 { overflow: hidden; background-color: #000; }
#box3 { overflow: hidden; }
#box4 { overflow: hidden; }
#box5 { background: url(../images/box5.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; overflow: hidden; }
#box6 { background: url(../images/box6.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; overflow: hidden;}

.group>div h2 { font: bold italic 30px/1.6 'Noto Sans KR','Nanum Gothic', sans-serif; position: absolute; top: 100px; left: 40px; }

/*box1*/
#box1 ul { width: 400%; height: 100%; overflow: hidden; margin-left: -100%;}
#box1 ul li { width: 25%; height: 100%; float: left; position: relative; overflow: hidden;}

/*box1-1*/
#box1 ul li.box1_1 { background: url(../images/box1_4.jpg) no-repeat center center; background-size: cover; }
#box1 .box1_1txt { position: absolute; left: 60px; bottom: 10%; width: 845px; text-align: left;}
#box1 .box1_1btn { margin-top: 20px; }
#box1 .box1_1btn a { margin-right: 50px; }
#box1 .box1_1btn a img {  }
/*box1-2*/
#box1 ul li.box1_2 { background: url(../images/box1_1.jpg) no-repeat center center; background-size: cover; position: relative;}
#box1 .box1_2txt { position: absolute; right: 0px; top: 30%; width: 750; }
/*box1-3*/
#box1 ul li.box1_3 { background: url(../images/box1_2.jpg) no-repeat center center; background-size: cover; position: relative;}
#box1 .box1_3txt { position: absolute; left: 0px; top: 20%; width: 707; }
/*box1-4*/
#box1 ul li.box1_4 { background: url(../images/box1_3.jpg) no-repeat center center; background-size: cover; position: relative;}
#box1 .box1_4txt { position: absolute; right: 0px; bottom: 10%; width: 970; }

#box1 .prev{ position: absolute; top: 50%; left: 50px; margin-top: -32px;}
#box1 .next{ position: absolute;  top: 50%; right: 50px; margin-top: -32px;}


/*box2*/
#box2 video { width: 100%; position: absolute; left: 0; top:50%; }
#box2 .play { position: absolute; top: 50%; left: 50%; margin-left: -64px; margin-top: -64px; opacity: 0.3; transition: all 0.3s;}
#box2 .play:hover { opacity: 1; }
#box2 .pause { position: absolute; top: 50%; left: 50%; margin-left: -64px; margin-top: -64px; display: none; opacity: 0.1; transition:all 0.3s;}
#box2 .pause:hover { opacity: 1; }


/*box3*/
#box3 ul { width: 600%; height: 100%; overflow: hidden;}
#box3 ul li { width: 16.666%; height: 100%; float: left; position: relative;}
#box3 h2 { color: #444;}
#box3>ul>li>div>h3 { font: 100 45px/1.2 'Noto Sans KR','Nanum Gothic', sans-serif; margin-bottom: 15px; }
#box3>ul>li>div>p { font: 300 20px/1.4 'Noto Sans KR','Nanum Gothic', sans-serif;   }
#box3 .box3btn { position: absolute; bottom: 40px; left: 0px; width: 100%; text-align: center;}
.btn_line { width: 100%; height: 1px; border-top: 1px solid #fff; position: absolute; top:50%; left: 0; ;}
.box3btn a { width: 80px; height: 80px; margin: 0 40px; display: inline-block; border-radius: 50%;}
.box3btn .box3_1btn {background: url(../images/box3_1btn.png) no-repeat 0 -80px; }
.box3btn .box3_2btn {background: url(../images/box3_2btn.png) no-repeat 0 -80px;}
.box3btn .box3_3btn {background: url(../images/box3_3btn.png) no-repeat 0 -80px;}
.box3btn .box3_4btn {background: url(../images/box3_4btn.png) no-repeat 0 -80px;}
.box3btn .box3_5btn {background: url(../images/box3_5btn.png) no-repeat 0 -80px;}
.box3btn .box3_6btn {background: url(../images/box3_6btn.png) no-repeat 0 -80px;}
.box3btn a.on { background-position: 0 0px; }

/*box3_1*/
.box3_1 { background: url(../images/box3_1.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; position: relative; }
.box3_1txt {  position: absolute; top: 20%; right: 0px;}
.box3_1txt h3 { text-align: right; color: #444; margin-right: 0px; opacity: 0; transition: all 1s;}
.box3_1txt h3.on { margin-right: 100px; opacity: 1; }
.box3_1txt p { text-align: right; color: #444; margin-right: 0px; opacity: 0; transition: all 1s 0.3s; }
.box3_1txt p.on { margin-right: 100px; opacity: 1; }
/*box3_2*/
.box3_2 { background: url(../images/box3_2.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box3_2txt {  position: absolute; top: 40%; right: 0px;}
.box3_2txt h3 { text-align: right; color: #fff;  margin-right: 0px; opacity: 0; transition: all 1s;}
.box3_2txt h3.on { margin-right: 100px; opacity: 1; }
.box3_2txt p { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s 0.3s;}
.box3_2txt p.on { margin-right: 100px; opacity: 1; }
/*box3_3*/
.box3_3 { background: url(../images/box3_3.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box3_3txt {  position: absolute; top: 20%; left: 0px;}
.box3_3txt h3 { text-align: left; color: #fff; margin-left: 0px; opacity: 0; transition: all 1s; }
.box3_3txt h3.on { margin-left: 60px; opacity: 1; }
.box3_3txt p { text-align: left; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s 0.3s; }
.box3_3txt p.on { margin-left: 60px; opacity: 1; }
/*box3_4*/
.box3_4 { background: url(../images/box3_4.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box3_4txt {  position: absolute; top: 30%; left: 0px;}
.box3_4txt h3 { text-align: left; color: #000; margin-left: 0px; opacity: 0; transition: all 1s;}
.box3_4txt h3.on { margin-left: 60px; opacity: 1; }
.box3_4txt p { text-align: left; color: #000; margin-right: 0px; opacity: 0; transition: all 1s 0.3s; }
.box3_4txt p.on { margin-left: 60px; opacity: 1; }
/*box3_5*/
.box3_5 { background: url(../images/box3_5.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box3_5txt {  position: absolute; top: 30%; left: 0px;}
.box3_5txt h3 { text-align: left; color: #000; margin-left: 0px; opacity: 0; transition: all 1s;}
.box3_5txt h3.on { margin-left: 60px; opacity: 1; }
.box3_5txt p { text-align: left; color: #000; margin-right: 0px; opacity: 0; transition: all 1s 0.3s; }
.box3_5txt p.on { margin-left: 60px; opacity: 1; }
/*box3_6*/
.box3_6 { background: url(../images/box3_6.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box3_6txt {  position: absolute; top: 20%; right: 0px;}
.box3_6txt h3 { text-align: right; color: #000; margin-right: 0px; opacity: 0; transition: all 1s;}
.box3_6txt h3.on { margin-right: 100px; opacity: 1; }
.box3_6txt p { text-align: right; color: #000; margin-right: 0px; opacity: 0; transition: all 1s 0.3s;}
.box3_6txt p.on { margin-right: 100px; opacity: 1; }


/*box4*/
#box4 ul { width: 600%; height: 100%; overflow: hidden;}
#box4 ul li { width: 16.666%; height: 100%; float: left; position: relative;}
#box4 h2 { color: #fff;}
#box4>ul>li>div>h3 { font: 100 45px/1.2 'Noto Sans KR','Nanum Gothic', sans-serif; margin-bottom: 15px; }
#box4>ul>li>div>p { font: 300 20px/1.4 'Noto Sans KR','Nanum Gothic', sans-serif;   }
#box4 .box4btn { position: absolute; bottom: 40px; left: 0px; width: 100%; text-align: center;}
.btn_line { width: 100%; height: 1px; border-top: 1px solid #fff; position: absolute; top:50%; left: 0; ;}
.box4btn a { width: 80px; height: 80px; margin: 0 40px; display: inline-block; border-radius: 50%;}
.box4btn .box4_1btn {background: url(../images/box4_1btn.png) no-repeat 0 -80px;}
.box4btn .box4_2btn {background: url(../images/box4_2btn.png) no-repeat 0 -80px;}
.box4btn .box4_3btn {background: url(../images/box4_3btn.png) no-repeat 0 -80px;}
.box4btn .box4_4btn {background: url(../images/box4_4btn.png) no-repeat 0 -80px;}
.box4btn a.on { background-position: 0 0px; }

/*box4_1*/
.box4_1 { background: url(../images/box4_1.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box4_1txt {  position: absolute; top: 65%; right: 0px;}
.box4_1txt h3 { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s;}
.box4_1txt h3.on { margin-right: 100px; opacity: 1; }
.box4_1txt p { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s 0.3s; }
.box4_1txt p.on { margin-right: 100px; opacity: 1; }
/*box4_2*/
.box4_2 { background: url(../images/box4_2.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box4_2txt {  position: absolute; top: 65%; right: 0px;}
.box4_2txt h3 { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s;}
.box4_2txt h3.on { margin-right: 100px; opacity: 1; }
.box4_2txt p { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s 0.3s;}
.box4_2txt p.on { margin-right: 100px; opacity: 1; }
/*box4_3*/
.box4_3 { background: url(../images/box4_3.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box4_3txt {  position: absolute; top: 25%; right: 0px;}
.box4_3txt h3 { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s;}
.box4_3txt h3.on { margin-right: 100px; opacity: 1; }
.box4_3txt p { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s 0.3s; }
.box4_3txt p.on { margin-right: 100px; opacity: 1; }
/*box4_4*/
.box4_4 { background: url(../images/box4_4.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; }
.box4_4txt {  position: absolute; top: 70%; right: 0px;}
.box4_4txt h3 { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s; }
.box4_4txt h3.on { margin-right: 100px; opacity: 1; }
.box4_4txt p { text-align: right; color: #fff; margin-right: 0px; opacity: 0; transition: all 1s 0.3s;}
.box4_4txt p.on { margin-right: 100px; opacity: 1; }


/*box5*/
/*#box5 .panel li:first-child { display: none; }*/
#box5 .panel li:nth-child(2) { display: none; }
#box5 .panel li:nth-child(3) { display: none; }
#box5 .smallTxt { font: italic 30px/1.4 'Noto Sans KR','Nanum Gothic', sans-serif;; }
#box5 .Ytxt { color: #f4bc00; }
#box5 .panel { margin-top: 120px; width: 100%; height: 100%; position: relative; }
#box5 .panel li { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#box5 h2 { color: #fff; }
#box5>ul>li>div>h3 { font: bold italic 65px/1 'Noto Sans KR','Nanum Gothic', sans-serif; margin-bottom: 15px; }
#box5>ul>li>div>p { font: 300 25px/1.4 'Noto Sans KR','Nanum Gothic', sans-serif;   }
.box5btn { position: absolute; top: 100px; right: 100px; }
.box5btn ul li { float: left; margin: 0 10px; position: relative;}
.box5btn ul li a { font: 20px/1.6 'Noto Sans KR','Nanum Gothic',sans-serif; color: #fff;}
.box5btn ul li p { width: 0%; height: 2px; background-color: #fff; transition: all 0.5s; position: absolute; bottom: 0; left: 50%; }
.box5btn ul li:hover p { width: 100%; left: 0%;}
.box5btn ul li.on p { width: 100%; left: 0%;}

/*obj1*/
#box5 .box5obj1 { width:1400px; height: 470px; position: absolute; top: 0px; left: 50%; margin-left: -700px; }
#box5 .box5obj1 div { width: 0px; height: 1px; background-color: #fff; position: absolute; top: 250px; left: 210px; transition: all 1s; opacity: 0}
#box5 .box5obj1 div.on { width: 1090px; opacity: 1; }
#box5 .box5obj1 img { position: absolute; right: 0px; top: 20px; transition: all 1s; opacity: 0;}
#box5 .box5obj1 img.on { right: 50px; opacity: 1;}
#box5 .box5obj1 h3 { text-align: right; color: #fff; transition: all 1s 0.3s; position: absolute; top: 100px; right: 500px; opacity: 0;}
#box5 .box5obj1 h3.on { right: 550px; opacity: 1;}
#box5 .box5obj1 p { text-align: right; color: #fff; transition: all 1s 0.3s; position: absolute; top: 270px; right: 500px; opacity: 0;}
#box5 .box5obj1 p.on { right: 550px; opacity: 1;}
/*obj2*/
#box5 .box5obj2 { width:1400px; height: 470px; position: absolute; bottom: 80px; left: 50%; margin-left: -700px; }
#box5 .box5obj2 div { width: 0px; height: 1px; background-color: #fff; position: absolute; top: 210px; right: 300px; transition: all 1s; opacity: 0}
#box5 .box5obj2 div.on { width: 1090px; opacity: 1; }
#box5 .box5obj2 img { position: absolute; left: -50px; top: 0; transition: all 1s; opacity: 0;}
#box5 .box5obj2 img.on { left: 0px; opacity: 1;}
#box5 .box5obj2 h3 { text-align: right; color: #fff; margin-right: 0px;transition: all 1s 0.3s; position: absolute; top: 60px; right: 350px; opacity: 0;}
#box5 .box5obj2 h3.on { right: 300px; opacity: 1; }
#box5 .box5obj2 p { text-align: right; color: #fff; margin-right: 0px;transition: all 1s 0.3s; position: absolute; top: 230px; right: 350px; opacity: 0;}
#box5 .box5obj2 p.on { right: 300px; opacity: 1; }
/*obj3*/
#box5 .box5obj3 { width:1600px; height: 800px; position: absolute; top: 0px; left: 50%; margin-left: -800px; }
#box5 .box5obj3 div { width: 0px; height: 1px; background-color: #fff; position: absolute; bottom: 210px; right: 120px; transition: all 1s; opacity: 0}
#box5 .box5obj3 div.on { width: 1090px; opacity: 1; }
#box5 .box5obj3 img { position: absolute; left: -50px; top: 0px; transition: all 1s; opacity: 0; }
#box5 .box5obj3 img.on { left: 0px; opacity: 1;}
#box5 .box5obj3 h3 { text-align: right; color: #fff; margin-right: 0px;transition: all 1s 0.3s; position: absolute; bottom: 210px; right: 165px; opacity: 0;}
#box5 .box5obj3 h3.on { right: 115px; opacity: 1; }
#box5 .box5obj3 p { text-align: right; color: #fff; margin-right: 0px;transition: all 1s 0.3s; position: absolute; bottom: 90px; right: 165px; opacity: 0;}
#box5 .box5obj3 p.on { right: 115px; opacity: 1; }
/*obj4*/
#box5 .box5obj4 { width:1870px; height: 800px; position: absolute; top: 0px; left: 50%; margin-left: -935px; }
#box5 .box5obj4 div { width: 0px; height: 1px; background-color: #fff; position: absolute; bottom: 105px; left: 50%; margin-left: -375.5px; transition: all 1s; opacity: 0}
#box5 .box5obj4 div.on { width: 750px; opacity: 1; }
#box5 .box5obj4 img:nth-child(2) { position: absolute; left: 50%; top: 80px; margin-left: -656px; transition: all 1s; opacity: 0; }
#box5 .box5obj4 img:nth-child(2).on { margin-left: -706px; opacity: 1; }
#box5 .box5obj4 img:nth-child(3) { position: absolute; left: 449px; top: 338px; transition: all 1s; opacity: 0 }
#box5 .box5obj4 img:nth-child(3).on { left: 399px; opacity: 1; animation:spin 0.1s linear infinite;}
#box5 .box5obj4 img:nth-child(4) { position: absolute; left: 1306px; top: 338px; transition: all 1s; opacity: 0 }
#box5 .box5obj4 img:nth-child(4).on { left: 1256px; opacity: 1; animation:spin 0.1s linear infinite; }
#box5 .box5obj4 img:nth-child(5) { position: absolute; left: -50px; top: 0px; transition: all 0.5s; opacity: 0; animation: wind 0.8s ease-in-out infinite alternate }
#box5 .box5obj4 img:nth-child(5).on { left: 0px; opacity: 1; }
#box5 .box5obj4 h3 { text-align: left; color: #fff; margin-right: 0px;transition: all 1s 0.3s; position: absolute; bottom: 110px; left: 50%; margin-left: -325.5px ; opacity: 0}
#box5 .box5obj4 h3.on { margin-left: -375.5px; opacity: 1; }
#box5 .box5obj4 p { text-align: left; color: #fff; margin-right: 0px;transition: all 1s 0.3s; position: absolute; bottom: 20px; left: 50%; margin-left: -325.5px; opacity: 0;}
#box5 .box5obj4 p.on  { margin-left: -375.5px; opacity: 1; }


/*box6*/
#box6 h2 { color: #fff;}
.box6wrap { width: 49.99%; float: left; padding-top:100px; text-align: center;}
.box6wrap table.info1 { overflow: hidden; width: 70%; margin: 80px 0 50px; border-spacing: 0; padding: 0 50px; border-collapse: separate; }
.box6wrap .info1 thead tr th { font: 300 italic 14px/1.4 'Noto Sans KR','Nanum Gothic'; color: #fff; text-align: center; }
.box6wrap .info1 thead tr th:first-child { width: 200px; }
.box6wrap .info1 p.prize { font:  300 30px/2 'Noto Sans KR','Nanum Gothic'; color: #fff;; }
.box6wrap .info1 p.a_space a:first-child { margin-right: 10px; }
.box6wrap .info1 span { display: inline-block; vertical-align: middle; color: #fff; font: 12px /1.4 arial, sans-serif; text-align: left; }
.box6wrap .info1 span.txt2 { font: 18px/2 'Noto Sans KR','Nanum Gothic';; }
.box6wrap .info1 span.icon4 { width: 36px; height: 60px; background: url(../images/box6icon4.png) no-repeat 0 center; display: inline-block; vertical-align: middle;}
.box6wrap .info1 span.icon5 { width: 36px; height: 60px; background: url(../images/box6icon5.png) no-repeat 0 center; display: inline-block;}
.box6wrap .info1 p a { text-decoration: underline; color: #fff; font: 300 14px/1.4 'Noto Sans KR','Nanum Gothic', sans-serif;}

.box6wrap table.main_table { width: 100%; border-spacing: 0; padding: 0 50px; border-collapse: separate; text-align: left;}
.box6wrap table.main_table tr th { border-top: 1px solid #aaa; font: 300 14px/1.4 'Noto Sans KR','Nanum Gothic'; color: #fff; vertical-align: top; padding-top: 34px; width: 23.8%; text-align: left; white-space: nowrap; }
.box6wrap table.main_table tr td { margin: 0;  font: 300 14px/1.4 'Noto Sans KR','Nanum Gothic'; color: #fff; padding-top: 13px; padding-bottom: 13px; vertical-align: top; white-space: nowrap; border-top: 1px solid #aaa; }
.box6wrap table.main_table tr .first_td { border-top: 1px solid #aaa; padding-top: 34px; }
.box6wrap table.main_table tr  .last_td { padding-bottom: 34px; }
.box6wrap img { margin-bottom: 25px; }
.box6wrap .info2 { text-align: left; padding: 0 50px; margin-top: 40px; font: 300 12px/1.4 'Noto Sans KR','Nanum Gothic'; color: #aaa; }

/*header*/
header { position: absolute; top: 0; left: 0; width: 100%; height: 80px; background-color: rgba(255,255,255,0.2); transition: all 0.5s;}
header h1 { position: absolute; top:50%; left: 40px; margin-top: -27px; cursor: pointer; }
header h1 img { width:120px;  }
header ul.gnb { position: absolute; top: 50%; left: 220px; margin-top: -11px; overflow: hidden; transition: all 0.5s;}
header ul.gnb li { float: left; margin-right: 50px; position: relative;}
header ul.gnb li a { font: 16px/1.4 'Titillium Web','Noto Sans KR','Nanum Gothic', sans-serif; color: #666; display: block; transition: all 0.5s;}
header ul.gnb li p { width: 0%; height: 1px; background-color: #666; transition: all 0.5s; position: absolute; bottom: 0; left: 50%; }
header ul.gnb li:hover p { width: 100%; left: 0%;}
header ul.gnb li.on p { width: 100%; left: 0%;}
header ul.quick { position: absolute; top:50%; right: 0; margin-top: -10px; }
header ul.quick li { float: left; margin-right: 30px; }
header ul.quick li a { font: 300 13px/1.6 'Noto Sans KR','Nanum Gothic', sans-serif; color: #666; overflow: hidden; display: block;}
.quick span.icon1 { background-image: url(../images/icon1.png); }
.quick span.icon2 { background-image: url(../images/icon2.png); }
.quick span.icon3 {  background-image: url(../images/icon3.png);  }
.quick span { margin-right: 3px; width: 20px; height: 20px; -webkit-background-size: 20px 20px; background-size: 20px 20px; background-repeat: no-repeat; float: left;}


/*navi*/
.navi { position: fixed; right: 25px; top: 50%; margin-top: -108.5px; display: none;}
.navi li { width: 30px; height: 39px; background: url(../images/navi.png) no-repeat 0 -39px; }
.navi li:last-child { height: 22px; }
.navi li.on{ background-position: 0px 0px; }
.navi li:hover{ background-position: 0px 0px; }
.navi li a{ display: block; height: 100%; }


/*button*/
.top_btn { position: fixed; bottom: 65px; right: 20px; width: 40px; height: 40px; border-radius: 5px; background-color: rgba(0,0,0,0.5); transition: all 0.3s; }
.top_btn img{ position: absolute; top: 50%; left: 50%; opacity: 0.5; margin-top: -7px; margin-left: -11px; transition: all 0.3s; }
.top_btn:hover { background-color: rgba(244,188,0,1); }
.top_btn:hover img { opacity: 1; }
.w_btn { position: fixed; bottom: 15px; right: 20px; width: 40px; height: 40px; border-radius: 5px; background-color: rgba(0,0,0,0.5); transition: all 0.3s; overflow: hidden;}
.w_btn img{ position: absolute; top: 50%; right: 10px; opacity: 0.5; margin-top: -10px; transition: all 0.3s; }
.w_btn:hover { background-color: rgba(244,188,0,1); width: 120px; }
.w_btn p { font: 15px/2.6 'Noto Sans KR','Nanum Gothic', sans-serif; color:#fff; opacity: 0; position: absolute; top: 0; left: 10px; text-indent: -9999px;}
.w_btn:hover p { opacity: 1; text-indent: 0px;}
.w_btn:hover img { opacity: 1; }




@keyframes spin {
	0% {transform: rotate(0deg); }
	100% {transform: rotate(360deg) ;}

}

@keyframes wind {
	0%{ transform:rotateZ(-1deg); }
	100%{ transform:rotateZ(1deg); }
}

@media screen and (min-width:1400px) and (max-width:1680px){

	.box6wrap table.info1 { width: 100%; margin: 80px 0 40px;  }
	.box6wrap .info1 p.prize { font:  300 30px/1.5 'Noto Sans KR','Nanum Gothic'; }
	.box6wrap .info1 span.txt2 { font: 18px/1.5 'Noto Sans KR','Nanum Gothic'; }
	.box6wrap .info1 span.icon4 { height: 50px;}
	.box6wrap .info1 span.icon5 { height: 50px; }

	.box6wrap table.main_table tr th { padding-top: 25px;  }
	.box6wrap table.main_table tr td { padding-top: 10px; padding-bottom: 13px;  }
	.box6wrap table.main_table tr .first_td {padding-top: 25px; }
	.box6wrap table.main_table tr  .last_td { padding-bottom: 25px; }
	.box6wrap img { margin-bottom: 25px; width: 690px; margin-top: 10px;}
	.box6wrap .info2 { margin-top: 30px; }

}

@media screen and (min-width:1024px) and (max-width:1399px){

	#box5 .smallTxt { font: italic 22px/1.4 'Noto Sans KR','Nanum Gothic', sans-serif;; }
	#box5 .panel { margin-top: 150px; }
	#box5>ul>li>div>h3 { font: bold italic 50px/1 'Noto Sans KR','Nanum Gothic', sans-serif; margin-bottom: 15px; }
	#box5>ul>li>div>p { font: 300 18px/1.4 'Noto Sans KR','Nanum Gothic', sans-serif;   }
	.box5btn { right: 40px; }

	/*obj1*/
	#box5 .box5obj1 { width:1000px; height: 340px; top: 50px; left: 50%; margin-left: -500px; }
	#box5 .box5obj1 div { top: 50%; left: 60px;}
	#box5 .box5obj1 div.on { width: 80%; }
	#box5 .box5obj1 img { right: 0px; top: 0px; width: 320px;}
	#box5 .box5obj1 img.on { right: 50px; }
	#box5 .box5obj1 h3 { top: 60px; right: 400px;}
	#box5 .box5obj1 h3.on { right: 450px; }
	#box5 .box5obj1 p { top: 180px; right: 400px; }
	#box5 .box5obj1 p.on { right: 455px; }
	/*obj2*/
	#box5 .box5obj2 { width:1000px; height: 340px; top: 400px; left: 50%; margin-left: -500px; }
	#box5 .box5obj2 div { top: 50%; right: 60px; }
	#box5 .box5obj2 div.on { width: 80%; }
	#box5 .box5obj2 img { left: 0px; top: 0; width: 320px;}
	#box5 .box5obj2 img.on { left: 50px; opacity: 1;}
	#box5 .box5obj2 h3 { top: 60px; right: 110px; }
	#box5 .box5obj2 h3.on { right: 60px;  }
	#box5 .box5obj2 p { top: 180px; right: 110px; }
	#box5 .box5obj2 p.on { right: 60px;  }
	/*obj3*/
	#box5 .box5obj3 { width:1000px; height: 800px;top: 0px; left: 50%; margin-left: -500px; }
	#box5 .box5obj3 div { bottom: 320px; right: 20px; }
	#box5 .box5obj3 div.on { width: 80%; }
	#box5 .box5obj3 img { left: 50%; top: 50%; width: 1000px; margin-top: -278px; margin-left: -550px;}
	#box5 .box5obj3 img.on { left: 50%; margin-left: -500px;}
	#box5 .box5obj3 h3 { bottom: 315px; right: 70px;}
	#box5 .box5obj3 h3.on { right: 20px;  }
	#box5 .box5obj3 p {bottom: 235px; right: 70px; }
	#box5 .box5obj3 p.on { right: 20px; }
	/*obj4*/
	#box5 .box5obj4 { width:1000px; height: 800px;top: 0px; left: 50%; margin-left: -500px; }
	#box5 .box5obj4 div { width: 0px; height: 1px; background-color: #fff; position: absolute; bottom: 200px; left: 50%; margin-left: -288.5px; transition: all 1s; }
	#box5 .box5obj4 div.on { width: 577px; }
	#box5 .box5obj4 img:nth-child(2) { left: 50%; top: 100px; margin-left: -550px; width: 1000px;}
	#box5 .box5obj4 img:nth-child(2).on { margin-left: -500px;  }
	#box5 .box5obj4 img:nth-child(3) { left: 70px; top: 280px; width: 115px;  }
	#box5 .box5obj4 img:nth-child(3).on { left: 120px;}
	#box5 .box5obj4 img:nth-child(4) { left: 675px; top: 280px; width: 115px;}
	#box5 .box5obj4 img:nth-child(4).on { left: 725px; }
	#box5 .box5obj4 img:nth-child(5) { left: 0%; top: 50px; margin-left: -50px; width: 1000px; }
	#box5 .box5obj4 img:nth-child(5).on { margin-left: 0px; }
	#box5 .box5obj4 h3 { bottom: 200px; left: 50%; margin-left: -238.5px ; }
	#box5 .box5obj4 h3.on { margin-left: -288.5px; }
	#box5 .box5obj4 p { bottom: 140px; left: 50%; margin-left: -238.5px; }
	#box5 .box5obj4 p.on  { margin-left: -288.5px; }


	.box6wrap table.info1 { width: 100%; margin: 80px 0 40px;  }
	.box6wrap .info1 thead tr th:first-child { width: 170px; }
	.box6wrap .info1 p.prize { font:  300 25px/1.5 'Noto Sans KR','Nanum Gothic'; }
	.box6wrap .info1 span.txt2 { font: 15px/1.5 'Noto Sans KR','Nanum Gothic'; }
	.box6wrap table.main_table tr th { padding-top: 20px;  }
	.box6wrap table.main_table tr td { padding-top: 10px; padding-bottom: 10px;  }
	.box6wrap table.main_table tr .first_td {padding-top: 20px; }
	.box6wrap table.main_table tr  .last_td { padding-bottom: 20px; }
	.box6wrap img { margin-bottom: 30px; width: 470px; margin-top: 70px;}
	.box6wrap .info2 { margin-top: 30px; }

	header ul.gnb { margin-left: -30px;;}
	header ul.gnb li { float: left; margin-right: 30px;}
	header ul.quick li { float: left; margin-right: 10px; }
}