/*-------------------------------------------------
Author : PARK SEOJIN
Create date : 2017. 11. 16
-------------------------------------------------*/
.layout-contents {position:relative; margin: 50px 0 0}
.detail-content {position:relative; width: 1440px; margin:0 auto 150px;}
.detail-content:after { display: block; content: ""; clear: both; }
@media (max-width: 1440px) { .detail-content { width: 95%; } }


#header {position: fixed; top:0; left:0; width: 100%; height:80px; z-index:62; transition:all .4s; background:#fff}
#header > div {padding:0 36px}
#header a {display:inline-block; color:#333}
#header .logo {position:absolute; left:28px; z-index:62}
#header .logo h1{ margin-top:0; margin-bottom:0;}
#header .logo h1 a {display:inline-block; width:123px; font-size:0; padding:40px 0; background:url('../images/logo.png') right center no-repeat}
#header.sub {background:none}
#header .a1{ color:#f00; width:100% !important;}
#header .a1:hover{ color:#f00;}

#header .logo h2{ margin-top:0; margin-bottom:0;}
#header .logo h2 a{display:inline-block;font-size:22px;padding:28px 0;color:#222;font-weight:bold;}

/* 언어 */
.language {position:relative; display:inline-block; float:right; margin-right:28px; height:80px; line-height:80px; text-align:center; z-index:62}
.language a {display:inline-block; font-size:13px; font-weight:200; color:#fff;}
.language.active .lang i {transform:rotate(180deg);}
.language .list {display:none;  position:absolute; left:0; max-width:100%; top:28px; width:100%;}
.language .list {}
.language .list li {height:25px; line-height:25px;}
.language .list li a {padding-right:12px}
.language .list li:first-child {margin-top:0;}

/* search */
#header .search-area {position:relative; display:inline-block; float:right; margin:27px 0; z-index:62}
#header .search-area i {font-size:1.6em}
#header .search-area a.close {display:none; margin-left:24px}
#header .search-field {display:none; width:80%; margin:auto; height:80px; line-height:80px}
#header .search-field input[type="text"] {display:inline-block; width:100%; padding:6px; border:0; text-align:center}

/* all-menu  */
#header .all-menu {position:relative; display:inline-block; float:right; margin:29px 0 29px 29px; z-index:62}
#header .all-menu span {display:block; height:4px; background:#444;}
#header .all-menu span:first-child, #header .all-menu span:last-child {width:24px; transition:all .4s ease-in-out}
#header .all-menu span:nth-of-type(2) {width:19px; margin:5px 0 5px 5px; transition:all .4s ease-in-out}
#header .all-menu:hover span:first-child, #header .all-menu:hover span:last-child {width:19px; margin-left:5px}
#header .all-menu:hover span:nth-of-type(2) {width:24px; margin:5px 0}

/* 기본 메뉴 */
#nav {position:absolute; left:58%; transform:translateX(-50%); width:100%}
#nav h2 {display:none}
#nav > ul {text-align:center; width:100%}
#nav > ul > li {display:inline-block; text-align:center;transition:none; margin:0 10px}
#nav > ul > li > a {display:inline-block; padding: 26px 17px 27px; width:100%; font-size:1em; font-weight:600;}
#nav > ul > li > a:hover{ color:#fd0000;}
#nav > ul > li > a > span {display:none}
#nav .l1{ position:absolute;}


#nav .depth2 a {font-size:1.125em; line-height:2.333em; font-weight:200}
#nav .depth2 {overflow:hidden; visibility:hidden; height:0}
#nav .depth3 {display:none}
#nav .depth4 { display:block;}
/*#nav > ul > li.active .depth2 {display:block}*/

/* 처음 메뉴 - vert-nav */
.fp-viewing-firstPage #header {background:none}
.fp-viewing-firstPage #header a {color:#fff}
.fp-viewing-firstPage #header .logo h1 a{background-position:left center}
.fp-viewing-firstPage #header .logo h2 a{color: #fff;display: none;}
.fp-viewing-firstPage #nav {position:absolute; left:inherit; transform: translateY(0); right:0; top:0; width:50%;}
.fp-viewing-firstPage #nav > ul {display:inline-block;}
.fp-viewing-firstPage #nav > ul > li {float:left; width:33.33%; padding:39vh 0 50vh; margin:0; background:rgba(0,0,0,.25); cursor:pointer; transition:padding .4s}
.fp-viewing-firstPage #nav > ul > li > a > span:first-child {display:block; padding-top:66px; text-transform:uppercase;font-size:1.900em; font-weight:400; background-position:center top; background-repeat:no-repeat; transition:padding .6s  }
.fp-viewing-firstPage #nav > ul > li > a {font-weight:600; padding:0}
.fp-viewing-firstPage #nav > ul > li:nth-of-type(1) > a > span:first-child {background-image:url('/images/korean/main/icon01.png');}
.fp-viewing-firstPage #nav > ul > li:nth-of-type(2) > a > span:first-child {background-image:url('/images/korean/main/icon02.png');}
.fp-viewing-firstPage #nav > ul > li:nth-of-type(3) > a > span:first-child {background-image:url('/images/korean/main/icon03.png');}
.fp-viewing-firstPage #nav > ul > li > a > span:last-child {position:relative; display:block; margin:18px auto; width:32px; height:32px; background:#fff; border-radius:50%}
.fp-viewing-firstPage #nav > ul > li > a > span:last-child:before {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:15px; height:3px; background:#56585c; content:''}
.fp-viewing-firstPage #nav > ul > li > a > span:last-child:after {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:3px; height:15px; background:#56585c; content:''}
.fp-viewing-firstPage #nav > ul > li > a:hover > span:last-child, #nav > ul > li.active > a > span:last-child {background:none;}
.fp-viewing-firstPage #nav > ul > li > a:hover > span:last-child:before, #nav > ul > li.active > a > span:last-child:before {display:none}
.fp-viewing-firstPage #nav > ul > li > a:hover > span:last-child:after, #nav > ul > li.active > a > span:last-child:after {height:3px; width:21px; background:#fff}
.fp-viewing-firstPage #nav > ul > li.active {padding:33vh 0 54vh; background:rgba(0,0,0,.4)}
.fp-viewing-firstPage #nav > ul > li.active > a > span:first-child {padding-top:54px}
.fp-viewing-firstPage #nav > ul > li.active .depth2 {overflow:visible; visibility:visible; height:auto}
.fp-viewing-firstPage #nav > ul > li.active > a > span:last-child {margin:28px auto 15px}
.fp-viewing-firstPage #header .all-menu span {background:#fff;background:#f00;}

/* all-menu click시  */
body.bg:before {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3); content:''; z-index:1}
#header.site-map {height:85%}
#header.site-map {background:#fff}
#header.site-map a {color:#333}
#header.site-map h2 {display:inline-block; float:left}
#header.site-map .logo h1 a {background-position:right center}
#header.site-map #nav {width:1650px; left:50%; top:60px; transform:translateX(-50%)}
#header.site-map #nav > ul {margin-left:90px; width:86%; float:left}
#header.site-map #nav > ul > li {overflow:hidden; margin-left:0; text-align:left; width:inherit; padding:10px 0; background:none; border-bottom:1px solid #e2e2e2; position:relative;}
#header.site-map #nav > ul > li:first-child {padding-top:0}
#header.site-map #nav > ul > li > a {vertical-align:top; width:auto; float:left; color:#fe0104; font-size:1.1em; padding:0; margin-right:35px}
#header.site-map #nav > ul > li > a > span {display:none}
#header.site-map #nav > ul > li:nth-of-type(3) .depth2 {overflow:hidden;}
#header.site-map #nav > ul > li:nth-of-type(3) .depth2 li {float:left}
#header.site-map #nav > ul > li:nth-of-type(3) .depth2 > li > a {/*width:auto;*/ width:100%;}
#header.site-map #nav > ul > li:nth-of-type(4) .depth2 {overflow:hidden;}
#header.site-map #nav > ul > li:nth-of-type(4) .depth2 li {float:left}
#header.site-map #nav > ul > li:nth-of-type(4) .depth2 > li > a {/*width:auto;*/ width:100%;}
#header.site-map #nav .depth2 {display:inline-block; float:left; overflow:visible; visibility:visible; height:auto}
#header.site-map #nav .depth2 > li:after {display:block; content:''; clear:both}
#header.site-map #nav .depth2 > li > a {float:left; font-weight:200; font-size:1em; width:250px; margin-right:40px; color:#333;}
#header.site-map #nav .depth3 {overflow:hidden; display:block}
#header.site-map #nav .depth3 li {position:relative; float:left; padding-left:16px; margin-left:20px;}
#header.site-map #nav .depth3 li::before {position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:30%; background:#999; content:''}
#header.site-map #nav .depth3 li:first-child {padding-left:0; margin-left:0}
#header.site-map #nav .depth3 li:first-child::before {display:none}
#header.site-map #nav .depth3 a {color:#444}

#header.site-map .all-menu {margin-top:27px;}
#header.site-map .all-menu span {display:none}
#header.site-map .all-menu:after {font-family:'xeicon'; content:'\e921'; font-size:1.6em;background:url(../images/x.png) no-repeat center;}

/* search click시 */
#header.search {background:#fff}
#header.search:after {position:absolute; left:0; top:80px; width:100%; height:calc(100vh - 80px); background:rgba(0,0,0,.3); content:''}
#header.search .search-area a.search {position:relative; color:#fff}
#header .search-area a.search:before {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:22px; background:#000; border-radius:50%; content:''; z-index:-1; opacity:0; transition:background .4s}
#header.search .search-area a.search:before {opacity:1}
#header.search .search-area a.close {display:inline-block; color:#333}
#header.search .all-menu {display:none}
#header.search .logo h1 a {background-position:right center}
#header.search .search-field {display:block}
#header.search .language {display:none}
#header.search #nav {display:none}
.fp-viewing-firstPage #header.search #nav {display:block}
.fp-viewing-firstPage #header.search #nav > ul {top:80px}

#section2 > div {display:block}
#footer {width: 100%; z-index: 1; background-color: #fff; border-top:1px solid #e2e2e2; text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#footer div:first-child {background:#f3f3f3}
#footer div ul {text-align:center}
#footer div li {position:relative; display:inline-block; padding-left:19px; margin-left:16px}
#footer div li:first-child {margin-left:0; padding-left:0}
#footer div li:before {position:absolute; left:0; top:50%; transform: translateY(-50%); width:1px; height:30%; background:#999; content:''}
#footer div li:first-child:before {display:none}
#footer div li a {display:inline-block; padding:12px 0 15px; font-size:0.938em; color:#999}
#footer div:last-child {padding:40px 0 50px; color: #919191; font-size:0.875em}
#footer .copyright {padding-top:8px; font-size: 0.857em;}


/* sub */
#header.sub a {color:#fff}
#header.sub span {background:#fff}
#header.sub .logo a {background-position:left center}
#header.sub #nav > ul > li > a {position:relative;}
#header.sub #nav > ul > li > a:before {position:absolute; bottom:-20px; left:40%; width:0; height:0; border-right:10px solid transparent; border-bottom:10px solid #26315c; transform:rotate(135deg) translateX(-50%); content:''; opacity:0; transition:bottom .4s}
#header.sub #nav > ul > li.active > a:before {bottom:-7px; opacity:1}
#header.sub #nav > ul > li .depth2 {position:absolute; top:80px; left:0; width:100%; background:#26315c; overflow:hidden; visibility:hidden; height:0; transition:overflow .4s, visibility .4s, height .4s}
#header.sub #nav > ul > li.active .depth2 {display:block; overflow:visible; visibility:visible; height:auto}
#header.sub .depth2 > li {display:inline-block;}
#header.sub .depth2 > li > a {color:#fff; padding:10px 14px}
#header.sub .depth2 > li:first-child a {padding-left:0}
#header.sub.menu {background:#fff}
#header.sub.menu:before {position:absolute; top:80px; left:0; background:#26315c; width:100%; height:61px; content:''}
#header.sub.menu a {color:#333}
#header.sub.menu .all-menu span {background:#333}
#header.sub.menu .logo a {background-position:right center}
#header.sub.site-map a {color:#333}
#header.sub.site-map .depth2 > li {float:left; width:100%}
#header.sub.site-map #nav .depth2 > li > a {padding:0}
#header.sub.site-map #nav > ul > li > a:before, #header.sub.site-map.menu:before {display:none}
#header.sub.site-map #nav > ul > li .depth2 {position:inherit; top:inherit; overflow:visible; visibility:visible; height:auto; background:none; width:80%}

#header.sub.site-map #nav > ul > li:nth-of-type(3) .depth2 li {width:auto;}
#header.sub.site-map #nav > ul > li:nth-of-type(4) .depth2 li {width:auto;}
#header.scroll-menu {background:#fff; border-bottom:1px solid #e2e2e2; height:75px}
#header.scroll-menu .logo a {background-position:right center; padding:35px 0}
#header.scroll-menu a {color:#333;}
#header.scroll-menu .all-menu {margin:29px 0 24px 29px}
#header.scroll-menu .all-menu span {background:#333}
#header.scroll-menu .language {height:75px; line-height:75px}
#header.scroll-menu .search-area {margin:27px 0 20px}
#header.scroll-menu .language .list {top:25px}
#header.scroll-menu.search:after {top:75px}
#header.scroll-menu.sub.menu:before {top:75px}
#header.scroll-menu.sub #nav > ul > li.active > a:before {bottom:-10px}
#header.scroll-menu.sub #nav > ul > li .depth2 {top:75px}
#header.scroll-menu.sub #nav > ul > li > a {padding: 23px 17px;}

.sub-visual {position:relative; width:100%; height:600px; background:url('/images/korean/sub/sub-visual13.jpg') center/cover no-repeat}
.sub-visual p {position:relative; display:inline-block; float:left; padding-right:100px; color:#fff; font-size:1.875em}
.sub-visual p:after {position:absolute; right:0; top:50%; transform:translateY(-50%); width:72px; height:2px; background:#fff; content:''}
.sub-visual p:last-child {float:right; padding:0 0 0 100px}
.sub-visual p:last-child:after {right:inherit; left:0}
.sub-visual > div {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; padding:0 36px; opacity:1; transition:opacity .8s }
.sub-visual .sub-title {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:65px 44px 68px; width:380px}
.sub-visual .sub-title:before {position:absolute; left:10px; top:10px; width:100%; height:100%; background:rgba(0,0,0,.4); content:''; z-index:-2}
.sub-visual .sub-title:after {position:absolute; left:0; top:0; width:100%; height:100%; border:2px solid rgba(255,255,255,.7); content:''; z-index:-1}
.sub-visual h2 { padding:0 30px; font-size:2.5em; font-weight:400; color:#fff; text-align:center; vertical-align:middle}
.sub-visual h2 span {display:block; font-size:0.4em}
.sub-visual a {position:absolute; top:50%; transform:translateY(-50%); color:#fff; vertical-align:middle; width:20%; height:100%}
.sub-visual a i {font-size:1.5em; position:absolute; top:50%; transform:translateY(-50%);}
.sub-visual a.left {left:5%; text-align:left;}
.sub-visual a.left i {left:0}
.sub-visual a.right {right:5%; text-align:right;}
.sub-visual a.right i {right:0}

.sub-visual.sub0101 {background-image:url('/images/korean/sub/sub-visual01.jpg')}
.sub-visual.sub0102 {background-image:url('/images/korean/sub/sub-visual02.jpg')}
.sub-visual.sub0103 {background-image:url('/images/korean/sub/sub-visual03.jpg')}
.sub-visual.sub0104 {background-image:url('/images/korean/sub/sub-visual04.jpg')}
.sub-visual.sub0105 {background-image:url('/images/korean/sub/sub-visual05.jpg')}
.sub-visual.sub0106 {background-image:url('/images/korean/sub/sub-visual14.jpg')}
.sub-visual.sub0107 {background-image:url('/images/korean/sub/sub-visual15.jpg')}
.sub-visual.sub0201 {background-image:url('/images/korean/sub/sub-visual06.jpg')}
.sub-visual.sub0202 {background-image:url('/images/korean/sub/sub-visual07.jpg')}
.sub-visual.sub0203 {background-image:url('/images/korean/sub/sub-visual08.jpg')}
.sub-visual.sub0301 {background-image:url('/images/korean/sub/sub-visual09.jpg')}
.sub-visual.sub0302 {background-image:url('/images/korean/sub/sub-visual10.jpg')}
.sub-visual.sub0303 {background-image:url('/images/korean/sub/sub-visual11.jpg')}

.sub-visual.sub05 {background-image:url('/images/korean/sub/sub-visual12.jpg')}


.path-layout {background:#fff; border-bottom:1px solid #e2e2e2; z-index:2; transition:position .4s}
.path-layout > div {width:1440px; margin:auto;}
.path-layout div p {display:inline-block; padding:0 22px; color:#555; height:60px; line-height:60px; border-left:1px solid #e2e2e2; border-right:1px solid #e2e2e2}
.path-layout .group {position:relative; display:inline-block; width:200px; height:60px; line-height:60px; border-right:1px solid #e2e2e2; margin-left:-4px}
.path-layout .group > a:after {position:absolute; right:20px; top:50%; transform:translateY(-50%); font-family:'xeicon'; content:'\e936'}
.path-layout .group a {display:inline-block; padding-left:25px;  width:100%; color:#555}
.path-layout .group ul {position:absolute; left:0; top:60px; overflow:hidden; visibility:visible; height:0; border:1px solid #e2e2e2; border-top:0; width:calc(100% + 1px); background:#fff; transition:overflow .4s, visibility .4s, height .4s; z-index:1}
.path-layout .group ul.active {top:61px; overflow:visible; visibility:visible; height:auto}
.path-layout .group a:hover {background:#f3f3f5}

/* .sub-visual.fade-out {position:fixed; top:0; left:0; width:100%;  height:80px; z-index:1}
.sub-visual.fade-out > div {opacity:0;} */

.sub-visual.sub {top:-525px !important; z-index:10}
.sub-visual > div.sub {opacity:0}
.path-layout.sub {position:fixed; top:75px; left:0; width:100%; z-index:3}


#footer div:first-child {background:#fff; position:relative; width:1440px; margin:auto}
#footer div:last-child {background:#f3f3f3}
.top {position:absolute; right:0; top:-1px; width:50px; height:50px; padding:8px 0; background:#333;  color:#fff; text-align:center; z-index:10; font-size:0.875em}
.top i {display:block}

@media(max-width:1650px){
  #header.site-map #nav {width:95%}
  #header.site-map #nav > ul {margin-left:10px; width:91%; text-align:inherit}
  #header .a1:hover{ color:#f00;}
}
@media(max-width:1440px){
  .path-layout > div {width:100%}
  #footer div:first-child {width:100%}
  #header .a1:hover{ color:#f00;}
}
@media(max-width:1200px){
  #header.site-map #nav > ul {margin-left:0; width:100%}
  #header.site-map h2 br {display:none}
  #header .a1:hover{ color:#f00;}
}

@media(max-width:1025px){
  .detail-content {width:90%; margin:40px auto}
  .fp-viewing-firstPage #header.search #nav {display:none}

  
  .path-layout > div {width:100%}
  #header > div {padding:0 20px}
  #nav {display:none}
  .language {display:none; float:none; margin-right:0; height:60px; line-height:60px}
  .language .lang {display:none}
  .language .list {display:block; position:inherit; left:inherit; top:inherit;}
  .language .list li {position:relative; display:inline-block; margin-left:7px; padding-left:13px;}
  .language .list li:before {position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:40%; background:#e2e2e2; content:''}
  .language .list li:first-child {padding-left:0; margin-left:0}
  .language .list li:first-child:before {display:none}
  .language .list li a {position:relative; padding-right:0; font-weight:900; transition:color .2s}
  .language .list li a:after {position:absolute; left:0; bottom:-4px; width:100%; height:4px; background:#aa095c; content:''; opacity:0; transform:scaleX(0); transition:opacity .2s, transform .3s}
  .language .list li.active a {color:#aa095c !important}
  .language .list li.active a:after  {opacity:1; transform:scaleX(1);}
  #header.site-map {height:100vh}
  #header.site-map #nav {display:block; width:100%; left:0; transform:translateX(0);}
  #header.site-map h2 {display:none}
  #header.site-map #nav > ul {margin-left:0; width:inherit; float:none}
  #header.site-map #nav > ul > li {padding:0; border:0;border-bottom: 1px solid #e2e2e2;}
  #header.site-map #nav > ul > li > a {position:relative; padding:20px; /*width:100%;*/ /*border-bottom:1px solid #e2e2e2*/}
  #header.site-map #nav > ul > li > a:after {position:absolute; right:20px; top:50%; transform:translateY(-50%); font-family:'xeicon'; content:'\e941'; display:none;}
  #header.site-map #nav > ul > li .depth2 {height:0; overflow:hidden; visibility:hidden; width:100%; border-bottom:1px solid #e2e2e2; background:#f3f3f5;}
  #header.site-map #nav > ul > li:last-child .depth2 li {float:none}
  #header.site-map #nav .depth2 > li > a {float:none; width:100%; padding:10px 30px; margin-right:0; font-size:1.250em}
  #header.site-map #nav .depth3 {display:none}
  #header.site-map #nav > ul > li.active > a:after {content:'\e944'}
  #header.site-map #nav > ul > li.active > a {background:#fe0104; color:#fff;}
  #header.site-map #nav > ul > li.active{background:#fe0104; color:#fff;}
   #header.site-map #nav > ul > li.active > a.a1{background:#fe0104; color:#fff;width:100% !important;}
  #header.site-map #nav > ul > li.active .depth2 {height:auto; overflow:visible; visibility:visible;}

  #header.site-map .language {display:inline-block;}
  #header.site-map .logo {display:none}
  #header.site-map .search-area {display:none}
  #header.site-map .all-menu {margin-top:20px}

  #nav > ul > li {display:block}
  #header.sub.site-map #nav > ul > li .depth2 {width:100%; height:0; overflow:hidden; visibility:hidden;}
  #header.sub.site-map #nav > ul > li.active .depth2 {height:auto; overflow:visible; visibility:visible;}
  #header.sub.site-map .depth2 > li {display:block}
  #header.sub.site-map #nav .depth2 > li > a {padding:10px 30px}
  #header.site-map #nav > ul > li:nth-of-type(3) .depth2 li {float:none}
  #header.site-map #nav > ul > li:nth-of-type(4) .depth2 li {float:none}

  #header .search-area a.search:before {padding:17px}
  #header .search-field {float:left; width:80%}
  #header.search .logo {display:none}

  #footer div li a {padding:5px 0}
  #footer div:last-child {padding:20px 0}
  .top {top:100%}

  .sub-visual {height:400px}
  .sub-visual.sub {top:-325px !important}
}
@media(max-width:767px){
  #nav .depth4 { display:none;}
  #header .a1:hover{ color:#fff;}
  .sub-visual p {display:none}
  .path-layout div p {display:none}
  .path-layout div .group01 {display:none}
  .path-layout .group {border-right:0; width:100%; margin-left:0}

  #footer div li:nth-of-type(4) {padding-left:0; margin-left:0}
  #footer div li:nth-of-type(4):before {display:none}
  #footer div:last-child {padding:10px 12px;}
  #footer div:last-child address span:first-child {display:block}
  #footer .copyright {padding:0}
}
@media(max-width:700px){
  .sub-visual .sub-title {width:80%}
	#header .a1:hover{ color:#fff;}
}

@media(max-width:425px){
  #nav .depth4 { display:none;}
  #header .a1:hover{color:#fff;}
  #header, #header .logo h1{height:70px}
  #header .logo h1 a {padding:35px 0}
  #header .logo h2 a{padding:20px 0;font-size:18px;}
  #header .search-area {margin:20px 0}
  #header .all-menu {margin:19px 0 19px 20px}
  #header .search-field {height:60px; line-height:60px; width:60%}
  #header.search:after {top:60px}
  .path-layout.sub {top:60px}
  .sub-visual.sub {top:-340px !important}
  .sub-visual .sub-title {width:90%}
  .sub-visual h2 {font-size:2.4em; padding:0}
}