@charset "utf-8";

/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video,input{ margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;color:#333;font-style:normal; }
body{line-height:1.2;word-break:break-all}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav,ul,li{list-style:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:#333}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #f2f2f2;margin:15px 0 20px;padding:0}
input,select{vertical-align:middle}
html{font-size:13px}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:1px}
html{-webkit-text-size-adjust:none}
img { vertical-align:top; }
html,body{height:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family: 'Malgun Gothic', sans-serif;}

.text-hidden {position: absolute;text-indent: -9999em;font-size: 0;}
img {max-width: 720px; width: 100%;}

#wrap {overflow: hidden; width: 100%; background: #fff;}
.container, .foot {width: 100%;}
.inner {position: relative; max-width: 720px; margin: 0 auto;}
div[class^="btn"] a {display: block; width: 100%; height: 100%;}
a {text-indent: -999em;}

.head {overflow: hidden; width: 100%;}
.head .inner {background: #202a3c;}
.head .logo {max-width: 37.5%; margin: 0 auto;}
.head .nav {position: relative; border-top: 1px solid #fff;}
.head .nav .navList {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.head .nav .navList li {display: inline-block; height: 100%;}
.head .nav .navList li:nth-child(1) {width: 27%;}
.head .nav .navList li:nth-child(2) {width: 22.2%;}
.head .nav .navList li:nth-child(3) {width: 22.2%;}
.head .nav .navList li:nth-child(4) {width: 26.65%;}
.head .nav .navList li a {display: block; width: 100%; height: 100%;}

section {position: relative;}
.section[class*="tab"] {display: none;}
.section .btnWrap {position: absolute; left: 50%; top: 22.75%; width: 92%; height: 3.1%; transform: translateX(-50%);}
.section .btn {position: absolute; width: 50%; text-indent: -999em;}
.section .btn1 {left: 0;}
.section .btn2 {right: 0;}
.section.main .btnWrap {left: 0; bottom: 0; top: auto; width: 100%; height: 9.5%; transform: translateX(0);}
.section.tab1 .btnWrap {top: 20.48%; height: 2.8%;}

.section div[class*="box"]>a {position: absolute; right: 5%; width: 10%; height: 2.2%;}
.section .box1 a {top: 32.4%;}
.section .box2 a {top: 57.45%;}
.section .box3 a {top: 96.1%;}
.section.tab1 div[class*="box"]>a {height: 2%;}
.section.tab1 .box1 a {top: 28%;}
.section.tab1 .box2 a {top: 51.75%;}
.section.tab1 .box3 a {top: 96.45%;}
.section.tab2 .box1 a {top: 31.1%;}

.footer .inner {background: #303030;}

/* popup */
.popup {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.75);}
.popup .pop {overflow: hidden; position: absolute; left: 50%; top: 9%; width: 92%; max-width: 720px; padding: 20px;
  border-radius: 50px; background: #fff; text-align: center; transform: translateX(-50%);}
.popup .pop .inner {overflow: hidden; overflow-y: auto; max-height: 80vh;}
.popup .pop img {max-width: 100%;}
.popup .pop a {position: absolute; right: 40px; top: 30px; width: 38px; height: 38px; background: url('../images/pop_close.png') no-repeat; z-index: 9;}