.wrap {width:1200px; margin:0 auto;}
.fixedBox {position:fixed;}
.scrolloff {overflow:hidden;}
/* header style */
header {background-color:#fff;}
header .hdtop {display:flex; justify-content:space-between; align-items:center; padding:10px;}
header .logo h1 {margin:auto;}
header .logo img {height:60px;}
header [class*="btn-"] {transition:.5s; background-color:transparent; outline:none; border:none;}
header .search-box {font-size:150%;}
header .search-box input[name="keyword"] {border:none; border-bottom:#ffcc00 solid 1px; outline:none; padding:10px; transition:.5s;}
header .search-box input[name="keyword"]:focus {border-bottom:#ff9900 solid 1px;}
header .search-box [class="btn-search"] {color:#ffcc00;}
header .search-box [class="btn-search"]:hover {cursor:pointer; color:#ff9900;}
header .mamber {text-align:right;}
header .mamber [class*="btn-"] a {display:block; padding:5px 10px;}
header .mamber [class*="btn-"] a:hover [class*="zicon-"] {color:#ff9900;}
header .mamber [class*="btn-"] [class*="zicon-"] {color:#ffcc00; margin-right:5px; font-size:20px; vertical-align:middle;}
/* header .mamber [name="btn-join"] {border-bottom:#adddfb solid 1px;}
header .mamber [name="btn-login"] {border-bottom:#ffc2c2 solid 1px;} */
header .hdbotton {}
nav a {display:block; padding:10px; white-space:nowrap; font-size:120%;}
nav.top {display:flex; flex-direction:column; justify-content:center; position:relative;}
nav.top .menu1 {display:flex; justify-content:center; flex-wrap:wrap; align-items:center; z-index:2;}
nav.top .menu1 .m1 {position:relative; padding:10px 0;}
nav.top .menu1 .m1:hover .mline {animation:ani1 1s; width:100%;}
nav.top .menu1 .m1:hover .menu2 {display:block; z-index:1; animation:ani2 .5s;}
nav.top .menu1 .m1 .mline {display:block; width:0; height:1px; background-color:#ffcc00;}
nav.top .menu2 {display:none; position:absolute; left:50%; top:100%; min-width:150px; transform:translateX(-50%); background-color:rgba(255,255,255,.7); padding:0 10px 10px 10px; border-radius:0 0 5px 5px; z-index:1;}
nav.top .menu2 [class*="m2"] {display:block; background-color:#fff; transition:.5s; vertical-align:middle;}
nav.top .menu2 [class*="m2"] a [class*="zicon-"] {font-size:12px; margin-right:5px; color:#b4ac99;}
nav.top .menu2 [class*="m2"] a:hover, nav.sMenu .menu2>[class*="m2"] a:hover {color:#fff;}
nav.sMenu {background-color:rgba(255,255,255,.7); border-radius:3px; margin-bottom:20px;}
nav.sMenu .sTitle {padding:10px; text-align:center; font-size:18px; font-weight:bold; color:#626870;}
nav.sMenu .menu2 {padding:5px;}
nav.sMenu .menu2 [class*="m2"] {background-color:#fff; font-size:16px; border-bottom:#dfdfdf solid 1px; border-radius:3px; transition:.5s; margin-bottom:5px;}
nav.top .menu2 [class*="m2"]:hover,nav.top .menu2 .m2-on, nav.sMenu .menu2>[class*="m2"]:hover, nav.sMenu .menu2 .m2-on {background-color:#ffcc00;}
nav.top .menu2 .m2-on:hover, nav.sMenu .menu2 .m2-on:hover {background-color:#ff9900;}

/* contents style */
.layout-box {display:flex;}
.layout-box .row-box-3 {width:31.333333%;}
.layout-box.align-bt {justify-content:space-between; margin-top:50px;}
.tbn-area {position:relative; overflow:hidden;}
.tbn-area::before, .tbn-area::after, .page_main section::before, .page_main section::after, [class^="page_sub"]::before, [class^="page_sub"]::after {content:""; position:absolute; left:0; width:100%; height:120px; background-position:center; background-repeat:repeat-x; z-index:0}
.tbn-area::before {top:0; background-image:url(./image/bgt-a.png);}
.tbn-area::after {bottom:0; background-image:url(./image/bgb-a.png);}
.tbn-area .titlebox {width:70%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; text-align:center; z-index:1;}
.tbn-area .titlebox .t1 {white-space:nowrap;}
.tbn-area .ziani {margin:0; padding:0;}
.tbn-area.mainpage {min-height:300px; background:center url("./image/svg/patten1.svg"), center url("./image/svg/patten2.svg"), linear-gradient(#949fa4, #607680);}
.tbn-area.subpage {min-height:150px; background:center / 30% url("./image/svg/patten1.svg"), center / 30% url("./image/svg/patten3.svg"), linear-gradient(#607680, #82a8b9);}
.ziani>.zicon-moon {width:100px; position:absolute; left:-100px; top:100%; animation:ani3 20s linear infinite;}
.ziani>.zicon-moon .st0{fill:#FFCC00; animation:ani4 5s infinite;}
.ziani>.zicon-moon .st1{fill:#FF9900;}
.ziani>.zicon-airplane {width:100px; position:absolute; left:-150px; top:50%; animation:ani5 20s linear infinite;}
.ziani>.zicon-airplane .st0{fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; stroke-miterlimit:10;}
.page_main section {padding-top:50px; padding-bottom:140px; position:relative; overflow:hidden;}
.page_main section::before {top:0; background-image:url(./image/bgt-a.png);}
.page_main section::after {bottom:0; background-image:url(./image/bgb-a.png);}
.page_main section:nth-child(1) {background:center / 20% url("./image/svg/patten5.svg"), center / 40% url("./image/svg/patten-c1.svg"), linear-gradient(#e4f6ff, #afc5d0);}
.page_main section:nth-child(2) {background:center / 20% url("./image/svg/patten4.svg"), center / 40% url("./image/svg/patten-c2.svg"), linear-gradient(#4c79ac, #416996);}
.page_main section:nth-child(3) {background:center / 20% url("./image/svg/patten6.svg"), center / 40% url("./image/svg/patten-c3.svg"), linear-gradient(#e4eaff, #afb6d0);}
.page_main section:nth-child(3) .zi-title-s1 .title {color:#584782;}
.page_main section:nth-child(4) {background:center url("./image/svg/patten-c4.svg"), linear-gradient(#5f4cac, #554196);}
.page_main section:nth-child(5) {background:center / 20% url("./image/svg/patten7.svg"), center / 50% url("./image/svg/patten-c4.svg"), linear-gradient(#ffe4fc, #ccafd0);}
.page_main section:nth-child(5) .zi-title-s1 .title {color:#82477e;}
.page_main section:nth-child(6) {background:center / 50% url("./image/svg/patten7.svg"), linear-gradient(#a44cac, #964190);}
.page_main section:nth-child(7) {background:center url("./image/bg-1.png"), linear-gradient(#fff8e4, #d0cbaf);}
.page_main section:nth-child(7) .zi-title-s1 .title {color:#827a47;}
.page_main section:nth-child(8) {background:center url("./image/bg-2.png"), linear-gradient(#ac974c, #968441);}
.page_main section .zi-title-s1 .title {text-shadow:#fff 0 0 5px;}
.page_main section .wrap {z-index:1;}
[class^="page_sub"] {padding-top:120px; padding-bottom:140px; position:relative;}
[class^="page_sub"]::before {top:0px; background-image:url(./image/bgt-a.png); z-index:0;}
[class^="page_sub"]::after {bottom:0; background-image:url(./image/bgb-a.png);}
.layout-s1 {display:flex; flex-wrap:wrap; justify-content:space-between;}
.layout-s1>li:first-child {width:900px;}
.layout-s1>li:last-child {width:260px; margin-left:40px; position:relative;}
.layout-box1 {display:flex;}
.asideArea {display:flex; flex-direction:column; position:sticky; top:30px;}
.asideArea .box {background-color:rgba(255,255,255,.7); padding:10px; margin-bottom:20px; border-radius:3px;}
.asideArea .search .search-box {display:flex; overflow:hidden; position:relative;}
.asideArea .search .search-box>select[name*="where"] {display:none;}
.asideArea .search .search-box>input {width:100%; border:none; display:inline-block; outline:none; padding:10px 35px 10px 0; border-bottom:#dfdfdf solid 1px; transition:.5s;}
.asideArea .search .search-box>input.search_input:focus {color:#ff9900; border-bottom:#ffcc00 solid 1px;}
.asideArea .search .search-box>button.search_btn {position:absolute; right:0; font-size:14px; padding:10px; background-color:transparent; color:#999; border:none;}
.asideArea .search .search-box>button.search_btn:hover {cursor:pointer; color:#fff; color:#ff9900;}
.asideArea [name="btn-default"] {background-color:#4a565d; color:#fff; width:100%; padding:10px; text-align:center;}
.asideArea [name="btn-default"]:hover {color:#ffcc00;}
.ad-kakao {padding:5px; text-align:center;}
.ad-google {padding:0 !important;}
.ad-google2 {padding:10px; margin-top:50px; background-color:rgba(255,255,255,.7);}
.ad-google3 {padding:.5%;}

.zi-dds5 [class*="data"] .name {width:30px; height:30px; font-size:15px; padding:6px 0; background-color:#ffcc00; color:#fff; border-radius:100%; text-align:center; margin-right:10px; text-transform:capitalize;}
.zi-dds5 [class*="data"] .subject {width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.zi-dds5 [class*="data"] .title {width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.zi-dds5 [class*="data"] .date {color:#999;}

/* footer style */
footer {padding:40px 20px; background-color:#fff; color:#dfdfdf;}
footer .copyrights {text-align:center;}

.fullmenu {display:none; left:0; top:0; width:100vw; height:100vh; background-color:rgba(255,255,255,.7); z-index:200;}
.fullmenu a {display:block;}
.fullmenu .fmBg, .fullmenu .fmTop {position:absolute; left:0; top:0; width:100vw; padding:10px;}
.fullmenu .fmBg {height:100vh; background-color:rgba(0,0,0,.7);}
.fullmenu .fmTop button {font-size:200%; padding:5px;}
.fullmenu .fmTop button:hover {color:#ffcc00;}
.fullmenu .fmTop {display:flex; justify-content:space-between;}
.fullmenu .fmTop [class*="btn-"] {color:#fff; font-size:200%; padding:10px;}
.fullmenu .fmTop [class*="btn-"]:hover {color:#ffcc00;}
.fullmenu .fmBox {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.fullmenu .fmenu1 {display:flex; justify-content:center; padding:10px; background-color:rgba(255,255,255,.7);}
.fullmenu .fm1 {background-color:rgba(255,255,255,1); white-space:nowrap; padding:10px;}
.fullmenu .fm1>a {padding:10px; font-size:140%; border-bottom:#ffcc00 solid 1px; text-align:center; color:#626a78;}
.fullmenu .fm2>a {padding:10px; font-size:120%;}
.fullmenu .fm2>a:hover {background-color:#ffcc00; color:#fff;}

.slMenu {z-index:100;}
.slMenu .mList {display:flex; background-color:rgba(38, 44, 50, 0.7); padding:5px 0;}
.slMenu .mList .btn {font-size:18px; position:relative;}
.slMenu .mList .btn a, .slMenu .mList [class*="btn-"]  {padding:5px 10px; color:#fff; text-align:center; text-transform:capitalize;}
.slMenu .mList .btn a:hover, .slMenu .mList [class*="btn-"]:hover {cursor:pointer; color:#ffcc00; background-color:#333;}
.slMenu .mList .btn a {display:block;}

/***** swiper add css : start *****/
.swiper-container>.swiper-pagination {bottom:30px;}
.swiper-container>.swiper-pagination>[class*="swiper-pagination-bullet"] {border:#dfdfdf solid 2px;}
.swiper-container>.swiper-pagination>.swiper-pagination-bullet {width:15px; height:15px; background-color:#fff; opacity:1;}
.swiper-container>.swiper-pagination>.swiper-pagination-bullet-active {width:50px; height:18px; border-radius:80px; background-color:#63bebb;}
.swiper-container>[class*="swiper-button-"] {color:#63bebb; font-size:70px; width:70px; height:70px; margin-top:auto; font-weight:bold; line-height:100%; transform:translateY(-50%); z-index:10;}
.swiper-container .swiper-slide {background-position:center; background-repeat:no-repeat; background-size:cover;}
/* .zi-slide2 {width:1200px;} */
.zi-slide2>.swiper-wrapper>.swiper-slide {font-size:12px; text-align:left; height:230px;}
.zi-slide2>[class*="swiper-button-"] {color:#999;}
.zi-slide2>[class*="swiper-button-"]:hover {color:#7c7046;}
.zi-slide2 .swiper-slide {border:#fff solid 10px; transition:.5s;}
.zi-slide2 .swiper-slide:hover .infoBox {opacity:1;}
.zi-slide2 .infoBox {height:100%; background-color:rgba(0,0,0,.7); padding:10px; position:relative; opacity:0; transition:.5s;}
.zi-slide2 .infoBox a {display:block; font-size:150%; color:#fff; line-height:130%;}
.zi-slide2 .infoBox .goView {position:absolute; left:50%; top:50%; transition:.5s; transform:translate(-50%, -50%); background-color:#fff; font-size:140%; outline:none; border:none; padding:5px 10px; border-radius:3px;}
.zi-slide2 .infoBox .goView:hover {cursor:pointer; box-shadow:rgba(255,255,255,.7) 0 0 0 3px;}



/* @media max style */
@media screen and (max-width:1200px) {
    .wrap {width:100%;}
    .swiper-container.zi-slide2 {width:100%;}
}
@media screen and (max-width:1024px) {
    header .logo img {height:45px;}
    nav.top .menu1 .m1:hover .menu2 {display:none;}
    .layout-s1 {margin:20px 10px;}
    .layout-s1>li:first-child {width:100%;}
    .layout-s1>li:last-child {width:100%; margin-left:auto;}
    .fullmenu .fmBox {width:90%;}
    .fullmenu .fmenu1 {flex-wrap:wrap; justify-content:flex-start;}
    .fullmenu .fmenu1 .fm1 {width:25%;}
}
@media screen and (max-width:892px) {
    .tbn-area .titlebox {width:90%;}
    .slMenu {left:0; bottom:0;}
    .slMenu .mList {width:100vw; justify-content:space-around;}
}
@media screen and (max-width:768px) {
    .layout-box {flex-wrap:wrap;}
    .layout-box .row-box-3 {width:100%;}
}
@media screen and (max-width:670px) {
    .hdtop .search {display:none;}
}
@media screen and (max-width:570px) {
    nav.top {display:none;}
    .tbn-area.mainpage {min-height:520px;}
}
@media screen and (max-width:425px) {
    header .search {display:none;}
    .slMenu .mList .btn-mg {display:none;}
    .fullmenu .fmBox {width:80%; height:100vh; overflow-y:scroll; left:100%; top:0; transform:translate(-100%, 0); padding-bottom:50px; background-color:#fff;}
    .fullmenu .fmTop {width:20%; flex-direction:column; padding:0; text-align:center;}
    .fullmenu .fmTop button {width:100%; padding:10px;}
    .fullmenu .fmTop .rArea {order:-1; background-color:#fff;}
    .fullmenu .fmTop .lArea button {color:#fff;}
    .fullmenu .fmTop [class*="btn-"] {padding:20px;}
    .fullmenu .fmTop [name*="btn-close"] {color:#ffcc00;}
    .fullmenu .fmenu1 {flex-direction:column; padding:0;}
    .fullmenu .fmenu1 .fm1 {width:100%;}
}
@media screen and (max-width:375px) {
    button[class*="btn-"] a>span {display:none;}
}

/* @media min style */
@media screen and (min-width:1025px) {
    header {position:relative;}
    header .hd-inc {min-width:250px;}
    header .logo, header .mamber {position:absolute; top:50%; transform:translateY(-50%); z-index:3;}
    header .logo {left:10px;}
    header .mamber {right:10px;}
    header .search {margin:0 auto;}
    header .search-box input[name="search"] {width:500px;}
    nav.top .menu1 .m1 {margin:0 10px;}
    .slMenu .mList .btn:nth-child(3) {order:0;}
    .slMenu .mList .btn:hover::after {content:attr(title-data); position:absolute; white-space:nowrap; right:100%; top:0; background-color:#333; color:#ffcc00; padding:7px; font-size:14px;}
}
@media screen and (min-width:893px) {
    .slMenu {right:0; top:50%; transform:translateY(-50%);}
    .slMenu .mList {flex-direction:column;}
    .slMenu .mList .phone {display:none;}
}