@charset "utf-8";
/* Web site layout style */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Anton&family=Black+Han+Sans&family=Comfortaa:wght@700&family=Lobster&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Song+Myung&family=Sunflower:wght@300;500;700&display=swap');

/*
font-family: 'Abril Fatface', cursive;
font-family: 'Anton', sans-serif;
font-family: 'Black Han Sans', sans-serif;
font-family: 'Comfortaa', cursive;
font-family: 'Lobster', cursive;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Song Myung', serif;
font-family: 'Sunflower', sans-serif;
*/

/* common style area */
body {font-size:16px; background-color:var(--theme-bg-main); font-family: 'Noto Sans KR', sans-serif; color:#2e2e2e; background-image:url(../_images/bg-m04.jpg);}
/* body.body2 {background-image:url(../_images/bg-m04.jpg);}
body.body3 {background-image:url(../_images/bg-m01.jpg);} */
::-webkit-scrollbar {width:10px;}
::-webkit-scrollbar-track {background-color:var(--theme-track-color);}
::-webkit-scrollbar-thumb {box-shadow:inset 0 0 6px var(--theme-thumb-color); border-radius:var(--border-radius-s1);}
a {text-decoration:none; color:var(--defult-color1); padding:0; margin:0; transition:.5s;}
a:hover {color:var(--yellow-color1);}
ul {list-style:none; margin:0; padding:0;}
img {vertical-align:top;}
* {box-sizing:border-box; transition:.1s ease;}
.popup-area.full ::-webkit-scrollbar-track {background-color:var(--defult-color1);}
.popup-area.full ::-webkit-scrollbar-thumb {box-shadow:inset 0 0 6px #bfc5cb;}
.wrap {width:1340px; margin:0 auto; padding:0 20px;}
.onclick {cursor:pointer;}
.scrolloff {overflow:hidden;}
.bg-s1 {background-repeat:no-repeat; background-position:center; background-size:cover; background-attachment:fixed;}
.bs-s1 {}
[class*="pos-fixed-"] {position:fixed; z-index:1000;}
[class*="pos-fixed-right-"] {right:20px;}
[class*="pos-fixed-right-"] [class*="zicon-"] {font-size:2em; color:#c8c8c8;}
[class*="pos-fixed-right-"] [class*="zicon-"]:hover {color:#ffbc00;}
.pos-fixed-right-center {top:50%; transform:translateY(-50%);}
.characters [class*="item-"] {background-repeat:no-repeat; background-size:cover; background-position:center top;}
.footer .ft-area {position:fixed;}
.header, .footer .ft-area {width:100%; padding:0 20px; z-index:1000;}
.footer .ft-area {background-color:rgba(24, 25, 29, .7); -webkit-backdrop-filter:saturate(150%) blur(5px); backdrop-filter:saturate(150%) blur(5px);}
.banner-area {padding:150px 0 50px; position:relative;}
.bn-box {text-align:center;}
.bn-box .item {min-height:100px; display:flex; justify-content:center; align-items:center; font-size:2em; color:#ffde00; font-family: 'yg-jalnan'; word-break:keep-all; background-color:var(--blue-color2); -webkit-backdrop-filter:saturate(150%) blur(5px); backdrop-filter:saturate(150%) blur(5px);}
.move-box .list [class*="btn-"] {width:30px; height:30px; color:var(--defult-color1);}
.move-box .list [class*="btn-"] img {width:100%;}

.container {}

/* header style area */
.header {position:absolute; left:0; top:0; padding:0 20px;}
.header:hover {-webkit-backdrop-filter:saturate(150%) blur(15px); backdrop-filter:saturate(150%) blur(15px);}
.header .hd-area {display:flex; justify-content:space-between; align-items:center;}
.header .hd-area [class*="inc-"]:nth-child(1), .header .hd-area [class*="inc-"]:nth-child(3) {width:20%;}
.header .hd-area [class*="inc-"]:nth-child(2) {width:60%;}
.header .logo {color:var(--logo-color); opacity:.7;}
.header .logo:hover {opacity:1;}
.header .logo a {color:var(--logo-color);}
.header .logo .txt1 {font-weight:100;}
.header .nav-box>.menu {}
.header .inc-box.nav a {font-size:1.3rem; font-weight:bold;}
.header .inc-box.nav .nav-box {justify-content:center;}
.header .inc-box.info .nav-box {justify-content:flex-end;}

nav.nav {z-index:1000;}
nav.nav .nav-tab.wrap {padding:0;}
nav.nav .nav-tab {display:flex; justify-content:space-between;}
nav.nav .nav-tab ul>li>a {display:block; padding:10px;}
nav.nav .nav-tab ul>li>a.on {color:#ffde00;}
.nav-tab>.nav-box {padding:20px;}
.nav-tab>.nav-box:last-child {background-color:var(--theme-bg-color2); position:relative;}
.nav-tab>.nav-box:last-child::before {content:""; width: 0px; height: 0px; border-bottom:200px solid var(--theme-bg-color2); border-left:150px solid transparent; border-right: 100px solid var(--theme-bg-color2); position:absolute; top:0; left:-150px;}
.nav-tab>.nav-box>li {z-index:1;}
.nav-box {display:flex;}
.nav-box>.menu>a {display:block; padding:5px 10px; color:var(--logo-color); font-size:1.2rem;}
.nav-box>.menu>a:hover {color:#C9A063;}
.nav-box>.tel {background-color:#ffbc00;}

/* top banner area */
/* main style */
.theme1, .theme2 {}
.theme1>.theme1, .theme2>.theme2 {height:500px; overflow:hidden; position:relative;}
.theme1 video, .theme2 video {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.theme1 {background-color:#18191d; border-bottom:3px solid #33343b;}
.theme1>.theme2 {display:none;}
.theme2 {background-color:#1E1604; border-bottom:3px solid #33343b;}
.theme2>.theme1 {display:none;}
/* sub style */
.theme1>.txt-banner,
.theme2>.txt-banner {height:300px; letter-spacing:1px; line-height:1; position:relative;}
.txt-banner>h1 {text-align:center; margin:auto; background-image:url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif); background-size:cover; color:transparent; -moz-background-clip:text; -webkit-background-clip:text; text-transform:uppercase; position:absolute; left:50%; top:90%; transform:translate(-50%, -100%);}
.txt-banner>h1:nth-child(1) {font-size:15rem; text-shadow:0 0 0 var(--theme-bg-color4);}
.txt-banner>h1:nth-child(2) {font-size:7rem; text-shadow:5px 5px 2px rgba(255,255,255,.8);}

/* content style area */
main.contents {background:var(--main-bg-rgba); -webkit-backdrop-filter:saturate(100%) blur(30px); backdrop-filter:saturate(100%) blur(30px); margin-top:-40px;}
main.contents .cnt-box {margin-bottom:100px;}
.title-box {margin-bottom:30px; text-align:center;}
.title-box h1 {color:#ceb291; text-shadow:var(--theme-boxshadow1a), var(--theme-boxshadow1b);}
.title-box h2 {color:var(--color-white1);}
.title-box span {color:#99a2a6;}
.title-box span::before {content:"";}
.list-box {display:grid; grid-template-columns:1fr; grid-template-rows:auto; grid-gap:30px;}
.list-box>.data .btn-box {padding:10px 0; display:flex; justify-content:space-around; align-items:center;}

[class*="area-dan"] {display:flex;}
.area-dan2>*:nth-child(1) {width:30%; margin-right:2rem;}
.area-dan2>*:nth-child(2) {width:70%;}
.area-dan3>*:nth-child(1) {width:30%; margin-right:2rem;}
.area-dan3>*:nth-child(2) {width:50%; margin-right:2rem;}
.area-dan3>*:nth-child(3) {width:20%;}

[class*="name-card"] {padding:1rem;}
[class*="name-card"] ul>li {display:flex; justify-content:space-between; margin-bottom:10px;}

[class*="index-card"] [class*="h"] {margin:auto;}
[class*="index-card"] ol {padding-inline-start:20px;}

[class*="doc-card"] ol>li {margin-bottom:10px;}
[class*="doc-card"]>ol,
[class*="doc-card"]>ul {margin-bottom:50px; padding-inline-start:20px;}

section {padding:50px 0; padding-top:0;}
section[class*="error"] {padding:100px 0;}
main#sp2 {padding:100px 0 200px;}

section[class*="sec-doc"] .cnt-box {margin-bottom:10rem; padding:2rem; background:var(--color-white1); border-radius: 8px; box-shadow: 0px 0px 0 1px transparentize(#204754, 0.97), 0px 0px 0 3px transparentize(#204754, 0.98);}

.img-box {position:relative; width:100%; height:300px;}
section[class*="sec"] .image {width:100%; height:200px; position:absolute; border-radius:10px;}
section[class*="sec"] .image.img1 {background-color:rgba(144,144,144,0.50); top:0;}
section[class*="sec"] .image.img2 {background-color:rgba(255, 0, 0, 0.5); top:10px;}
section[class*="sec"] .image.img3 {background-color:rgba(255, 130, 0, 0.5); top:20px;}
section[class*="sec"] .image.img4 {background-color:rgba(255, 230, 0, 0.5); top:30px;}
section[class*="sec"] .image.img5 {background-color:rgba(189, 255, 0, 0.5); top:40px;}
section[class*="sec"] .image.img6 {background-color:rgba(20, 255, 0, 0.5); top:50px;}
section[class*="sec"] .image.img7 {background-color:rgba(0, 255, 201, 0.5); top:60px;}
section[class*="sec"] .image.img8 {background-color:rgba(0, 186, 255, 0.5); top:70px;}
section[class*="sec"] .image.img9 {background-color:rgba(0, 117, 255, 0.5); top:80px;}
section[class*="sec"] .image.img10 {background-color:rgba(89, 0, 255, 0.5); top:90px;}
section[class*="sec"] .image.img11 {background-color:rgba(173, 0, 255, 0.5); top:100px;}
section[class*="sec"] .image.img12 {background-color:rgba(255, 0, 199, 0.5); top:110px;}

.sec-doc1 .index-card1 {padding:10px;}

/* footer style area */
footer {padding:50px 0; background-color:var(--theme-bg-color3); -webkit-backdrop-filter:saturate(150%) blur(15px); backdrop-filter:saturate(150%) blur(15px);}
footer .ft-area {justify-content:space-around;}
footer .info-box {display:flex; justify-content:space-between; align-items:flex-end; color:#9da2b3;}
footer .company-name {font-size:2em; margin-bottom:10px; color:var(--defult-color1); font-weight:bold;}
footer .copyright {font-size:.7em; color:#838383; text-align:center; padding-top:20px; margin-top:20px; border-top:1px solid #2f2f2f;}
footer [class*="tel"] {margin-top:10px; text-align:right;}
footer .tel1 {font-size:1.3em; font-weight:bold; color:var(--defult-color1);}
footer .tel1::before,
footer .tel2::before,
footer .email::before {font-size:14px; margin-right:10px;}
footer .tel1::before {content:"Tel";}
footer .tel2::before {content:"Fax";}
footer .email::before {content:"Email";}


/* @media style area */
@media screen and (max-width:1340px) {
    .wrap {width:100%;}
    nav.nav .nav-tab {border-radius:0;}
}
@media screen and (max-width:850px) {
    .header {position:absolute;}
    .header .hd-area {justify-content:center;}
    .header .hd-area .inc-box.logo {width:100%; display:flex; justify-content:center;}
    .header .hd-area .inc-box.nav, .header .hd-area .inc-box.info {display:none;}
    .bn-top .item-001 {left:-145px;}
    nav.nav {position:fixed; top:auto; bottom:0; width:100%;}
    nav.nav .nav-tab {width:100%;}
    .footer .ft-area {position:fixed; left:0; bottom:0; display:flex; color:#ededed;}
    .footer .ft-area .inc-box.logo {display:none;}
    .footer .ft-area .inc-box .nav-box>.menu a {padding:1em 1.1em; text-align:center;}
}
@media screen and (max-width:768px) {
	.txt-banner>h1:nth-child(1) {font-size:10rem;}
	.txt-banner>h1:nth-child(2) {font-size:6rem;}
}
@media screen and (max-width:700px) {
    nav.nav .nav-tab {background-color:var(--blue-color1);}
    .nav-tab {flex-direction:column-reverse;}
    .nav-tab>.nav-box {justify-content:space-around; padding:10px;}
    .nav-tab>.nav-box:last-child a {font-size:1rem;}
    .nav-tab>.nav-box:last-child::before {display:none;}
	.txt-banner {overflow:hidden;}
	.txt-banner>h1:nth-child(1) {font-size:10rem;}
	.txt-banner>h1:nth-child(2) {font-size:7rem;}
    #sp2 section[class*="sec"] .cnt-box {flex-direction:column-reverse;}
    footer {padding-bottom:150px;}
}

@media screen and (max-width:600px) {
    footer .ft-area {flex-direction:column; padding:0;}
    footer .ft-area .nav .nav-box {justify-content:space-around;}
    footer .ft-area .info .nav-box {background-color:#000;}
    footer .ft-area .info .nav-box .menu {width:33.333333%;}
}

@media screen and (max-width:450px) {
    .banner-area {padding-top:50px;}
    .bn-top .item-001 {left:-10px; bottom:-30px; height:150px;}
    .bn-box .item {padding:.5em 1.5em;}
    .bn-box .item span {display:none;}
    .list-box {grid-gap:50px;}
	.txt-banner>h1:nth-child(2) {font-size:4rem;}
    /* .list-box.style-t3 {grid-template-columns:repeat(2, 1fr); grid-gap:10px;} */
    #ZI_skill .wrap,
    #ZI_info .wrap {padding:0;}
    #ZI_skill .cnt-box,
    #ZI_info .cnt-box {height:250px; overflow:hidden;}
    .list-box.style-t2,
    .list-box.style-t3 {display:flex; overflow-x:scroll; padding:30px; grid-gap:30px;}
    .list-box.style-t2 .card,
    .list-box.style-t3 .card {min-width:250px;}
    #ZI_info .cnt-box {height:290px;}
    .list-box.style-t2 .card {height:250px;}
	[class*="area-dan"] {flex-direction:column;}
	.area-dan2>*:nth-child(1),
	.area-dan2>*:nth-child(2) {width:100%;}
    .footer .ft-area .nav .nav-box .menu {font-size:.9em;}
    footer .info-box {flex-direction:column; align-items:center;}
    .pos-fixed-right-center {top:auto; bottom:140px;}
}

@media screen and (min-width:451px) {
    .list-box {grid-template-columns: 1fr 1fr;}
}

@media screen and (min-width:701px) {
    nav.nav {position:sticky; top:10px; margin-top:-45px;}
    nav.nav .nav-tab {background-color:var(--theme-bg-color1); -webkit-backdrop-filter:saturate(100%) blur(30px); backdrop-filter:saturate(100%) blur(30px); border-radius:20px; overflow:hidden; box-shadow:var(--theme-boxshadow1a), var(--theme-boxshadow1b);}
    #sp2 section[class*="sec"]:nth-child(even) .cnt-box {flex-direction:row-reverse;}
    /* #sp2 section[class*="sec"] .cnt-box>[class*="-box"] {width:50%;} */
    #sp2 section[class*="sec"] .cnt-box>.text-box {width:40%;}
    #sp2 section[class*="sec"] .cnt-box>.img-box {width:60%;}
}

@media screen and (min-width:851px) {
    .nav-box>.tel {display:none;}
    .header .wrap {width:100%; max-width:1920px;}
    .list-box {grid-template-columns:repeat(3, 1fr);}
}

@media screen and (min-width:1101px) {
    .list-box {grid-template-columns:repeat(4, 1fr);}
    .list-box.style-t2 {grid-template-columns:repeat(3, 1fr);}
    .list-box.style-t3 {grid-template-columns:repeat(5, 1fr);}
    /* #main2 .list-box {grid-template-columns:repeat(3, 1fr);} */
}

@media screen and (min-width:600px) and (max-width:800px) {
    .footer .ft-area .nav-box .menu {font-size:.9em;}
}