@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}
img { vertical-align:top; }
html,body{height:100%;}
*{font-family: 'Malgun Gothic', sans-serif;}

.hide{position:absolute; left:-9999px; top:-9999px; font-size:0; line-height:0; height:0; overflow:hidden;}


.mo {display: none;}
#wrap{overflow: hidden; width:100%; margin:0 auto; position: relative; background: #fff;}
  #wrap .inner {position: relative; max-width: 1200px; margin: 0 auto;}
  #wrap img {max-width: 100%;}

  #wrap header.top {height: 400px;}
  #wrap .top .logo {position: absolute; left: 0; top: 0;}
  #wrap .top #myVideo {width: 100%; height: 100%; object-fit: cover;}
  #wrap.tab01 .top {background: #fc66af;}
  #wrap.tab02 .top {background: #ff5521;}
  #wrap.tab03 .top {background: #6a5bff;}
  #wrap.tab04 .top {background: #0769ff;}
  #wrap.tab05 .top {background: #00bd85;}
  #wrap.tab06 .top {background: #5b91ff;}
  #wrap.tab07 .top {background: #ff0f6d;}
  /* #wrap .top .inner::before {position: absolute; left: 0; bottom: 3px; content: ''; max-width: 1200px; width: 100%; height: 10px;}
  #wrap .top .inner::after {position: absolute; left: 50%; top: 0; content: ''; width: 7%; height: 400px; margin-left: 346px; transform: translateX(-50%);} */

  #wrap nav.nav {position: relative; width: 100%; height: 98px; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; box-shadow: 0 8px 12px 1px rgba(156,156,156,.15); z-index: 1;}
  #wrap .nav .inner {overflow: hidden; position: absolute; left: 50%; top: 0; max-width: 1200px; width: 100%; height: 98px; transform: translateX(-50%); box-sizing: border-box;}
  #wrap .nav ul {}
  #wrap .nav ul:nth-child(1) {position: absolute; left: 4%; width: 38.5%; height: 100%;}
  #wrap .nav ul:nth-child(2) {position: absolute; left: 43%; width: 53.5%; height: 100%;}
  #wrap .nav ul:nth-child(1) li {float: left; width: 29.5%; height: 100%;}
  #wrap .nav ul:nth-child(1) li:nth-child(3) {width: 41%;}
  #wrap .nav ul:nth-child(2) li {float: left; width: 20.6%; height: 100%;}
  #wrap .nav ul:nth-child(2) li:nth-child(2) {width: 22%;}
  #wrap .nav ul:nth-child(2) li:nth-child(3) {width: 29.4%;}
  #wrap .nav ul:nth-child(2) li:nth-child(4) {width: 28%;}
  #wrap .nav ul li a {display: block; width: 100%; height: 100%; text-align: center; align-content: center; font-weight: bold; font-size: 0; text-indent: -999em;}
  #wrap.tab01 .nav .inner {background: url('../images/tab01_nav.png') no-repeat; background-size: 100%;}
  #wrap.tab02 .nav .inner {background: url('../images/tab02_nav.png') no-repeat; background-size: 100%;}
  #wrap.tab03 .nav .inner {background: url('../images/tab03_nav.png') no-repeat; background-size: 100%;}
  #wrap.tab04 .nav .inner {background: url('../images/tab04_nav.png') no-repeat; background-size: 100%;}
  #wrap.tab05 .nav .inner {background: url('../images/tab05_nav.png') no-repeat; background-size: 100%;}
  #wrap.tab06 .nav .inner {background: url('../images/tab06_nav.png') no-repeat; background-size: 100%;}
  #wrap.tab07 .nav .inner {background: url('../images/tab07_nav.png') no-repeat; background-size: 100%;}

  #wrap section.cont {}
  #wrap .cont .cont-box {overflow: hidden; width: 100%; height: 100%; padding: 0 45px 140px; box-sizing: border-box;}
  #wrap .cont .cont-box div[class^="con"] {position: relative; float: left; width: 33.333%; text-align: center;}
  #wrap .cont .cont-box div[class^="con"] img {width: 100%;}
  #wrap .cont a {display: block; position: absolute; top: 66.35%; left: 50%; width: 40.2%; height: 6.3%; font-size: 0; text-indent: -9999px;}
  #wrap.tab04 .cont a {top: 67.05%;}
  #wrap.tab06 .cont a {top: 67.15%;}
  #wrap.tab07 .cont a {top: 65.75%;}

  /* #wrap .cont .cont-box div[class^="con"] {position: absolute; top: 0; width: 30%; height: 100%;}
  #wrap.tab07 .cont-box div[class^="con"] {height: 50%;}
  #wrap.tab07 .cont-box div[class^="con"]:nth-last-child(-n+3) {top: 50%;}
  #wrap.tab07 .cont-box a {top: 74.6%; height: 5.1%;}
  #wrap.tab07 .cont-box div[class^="con"]:nth-last-child(-n+3) a {top: 57.25%;}
  #wrap .cont-box div[class^="con"]:nth-child(3n-2) {left: 4.1%;}
  #wrap .cont-box div[class^="con"]:nth-child(3n-1) {left: 34.9%;}
  #wrap .cont-box div[class^="con"]:nth-child(3n) {left: 65.75%;} */

  #wrap .cont a.btn1 {margin-left: -40.7%;}
  #wrap .cont a.btn2 {margin-left: 1%;}
  #wrap.tab06 .cont h3 {position: relative; z-index: 1;}
  #wrap.tab06 .cont a {z-index: 1;}

  #wrap .cont #myIcon {position: absolute; right: 2%; top: .3%; width: 32%;}
  #wrap.tab03 .cont #myIcon,
  #wrap.tab05 .cont #myIcon,
  #wrap.tab07 .cont #myIcon {right: 0;}
  #wrap.tab06 .cont #myIcon {right: 0; top: -.7%;}

#wrap footer {background: #e1e4e7;}
  #wrap footer p {padding-left: 40px; font-size: 33px; color: #a6a6a6;}

#layer-pop {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999;}
  #layer-pop .layer-qr {display: none; position: absolute; left: 50%; top: 50%; width: 100%; margin-top: -150px; text-align: center; transform: translateX(-50%);}
  #layer-pop .layer-qr .btn-close {display: block; position: absolute; left: 50%; bottom: 8%; width: 9%; height: 22%; margin-left: .1%; padding: 0;
    background: transparent; border-radius: 50%; border: 0; transform: translateX(-50%); cursor: pointer;}

/* bs */
#wrap.bs .cont .cont-box {display: none; left: 0; width: 100%;}
#wrap.bs .cont .cont-box.active {display: block;}


/* 해상도 */
@media (min-width: 1921px) {
  #wrap header.top {height: auto;}
}
@media (max-width: 1200px) {
  #wrap nav.nav {height: auto; padding-bottom: 8.102%;}
  #wrap .nav .inner {height: auto; padding-bottom: 8.102%;}
  #wrap .nav ul {height: 100%;}
}
@media (max-width: 900px) {
  #wrap header.top {overflow: hidden; height: auto;}
  #wrap .top #myVideo {height: 100%;}
}
@media (max-width: 720px) {
  #wrap .top .logo {width: 35%; z-index: 1;}
  /* #wrap .top .inner::before {bottom: 0; z-index: 1;}
  #wrap .top .inner::after {width: 100%; height: 15%; margin-left: 0;} */
  #wrap nav.nav {padding-bottom: 26.525%;}
  #wrap .nav .inner {padding-bottom: 26.525%;}
  #wrap.tab01 .nav .inner {background: url('../images/mo/tab01_nav.png') center no-repeat; background-size: 100%;}
  #wrap.tab02 .nav .inner {background: url('../images/mo/tab02_nav.png') center no-repeat; background-size: 100%;}
  #wrap.tab03 .nav .inner {background: url('../images/mo/tab03_nav.png') center no-repeat; background-size: 100%;}
  #wrap.tab04 .nav .inner {background: url('../images/mo/tab04_nav.png') center no-repeat; background-size: 100%;}
  #wrap.tab05 .nav .inner {background: url('../images/mo/tab05_nav.png') center no-repeat; background-size: 100%;}
  #wrap.tab06 .nav .inner {background: url('../images/mo/tab06_nav.png') center no-repeat; background-size: 100%;}
  #wrap.tab07 .nav .inner {background: url('../images/mo/tab07_nav.png') center no-repeat; background-size: 100%;}

  #wrap .nav ul:nth-child(1) {left: 0; top: 0; width: 71%; height: 50%; padding-left: 16%; padding-right: 13%;}
  #wrap .nav ul:nth-child(2) {left: 0; top: 50%; width: 89%; height: 50%; padding-left: 6%; padding-right: 5%;}
  #wrap .nav ul:nth-child(1) li {width: 21%;}
  #wrap .nav ul:nth-child(2) li {width: 21%;}
  #wrap .nav ul:nth-child(1) li:nth-child(1) {width: 31%;}
  #wrap .nav ul:nth-child(1) li:nth-child(2) {width: 30.5%;}
  #wrap .nav ul:nth-child(1) li:nth-child(3) {width: 38.5%;}
  #wrap .nav ul:nth-child(2) li:nth-child(3) {width: 29%;}
  #wrap .nav ul:nth-child(2) li:nth-child(4) {width: 28%;}

  #wrap section.cont h3 {position: relative; z-index: 1;}
  #wrap .cont .cont-box {padding: 0;}
  #wrap .cont .cont-box div[class^="con"] {width: 100%;}

  #wrap .cont a {top: 68.4%; width: 35%; height: 7.15%;}
  #wrap .cont a.btn1 {margin-left: -36%;}
  #wrap.tab01 .con1 a {top: 59.7%; height: 8.4%;}
  #wrap.tab01 .con3 a {top: 61.6%;}
  #wrap.tab02 .con2 a {top: 66.7%;}
  #wrap.tab02 .con3 a {top: 62.35%; height: 6.6%;}
  #wrap.tab03 .con1 a {top: 61.4%; height: 8.8%;}
  #wrap.tab03 .con2 a {top: 66.5%;}
  #wrap.tab03 .con3 a {top: 56.9%; height: 7.8%;}
  #wrap.tab04 .con1 a {top: 62.3%; height: 8.5%;}
  #wrap.tab04 .con2 a {top: 68.4%;}
  #wrap.tab04 .con3 a {top: 53.6%; height: 7.6%;}
  #wrap.tab05 .con1 a {top: 68.3%; height: 7.3%;}
  #wrap.tab05 .con2 a {top: 69.4%; height: 7.5%;}
  #wrap.tab05 .con3 a {top: 58.7%; height: 7.6%;}
  #wrap.tab06 .con1 a {top: 68.5%;}
  #wrap.tab06 .con2 a {top: 67.9%;}
  #wrap.tab06 .con3 a {top: 58.2%; height: 7.3%;}
  #wrap.tab07 .con1 a {top: 68.4%; height: 7.7%;}
  #wrap.tab07 .con2 a {top: 67%; height: 8.5%;}
  #wrap.tab07 .con3 a {top: 64.9%; height: 8.6%;}
  #wrap.tab07 .con4 a {top: 65.8%; height: 8.6%;}
  #wrap.tab07 .con5 a {top: 64.8%; height: 9%;}
  #wrap.tab07 .con6 a {top: 59%; height: 7.7%;}

  #wrap .cont #myIcon {right: -3%; top: .6%; width: 52%;}
  #wrap.tab03 .cont #myIcon {right: -7%;}
  #wrap.tab04 .cont #myIcon {right: 2%; top: 1%; width: 48%;}
  #wrap.tab05 .cont #myIcon {right: 1%;}
  #wrap.tab06 .cont #myIcon {right: -11%; top: 0;}
  #wrap.tab07 .cont #myIcon {width: 50%;}
}