@charset "UTF-8";

* {padding: 0; margin: 0; box-sizing: border-box; font-size: 16px; letter-spacing: -0.13px;}
ul, ol, li {list-style: none;}
a {text-decoration: none; color: inherit;}
/* reset setting */

.innersize {width: 1200px; margin: 0 auto;}

/* header :S */
#header {position: fixed; top: 0; left: 0; z-index: 999; border-bottom: 1px solid #06493d; background-color: rgba(0,0,0,0.1); width: 100%; height: 100px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;}
#header h1 {position: relative; font-weight: bold; z-index: 5;}
#header h1 a {color: #fff; font-size: 28px;}
#header #nav {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: max-content; height: 100%; z-index: 3;}
#header #nav .nav-wrap {display: flex; height: 100%;}
#header #nav .nav-wrap > li > a {color: #fff; position: relative; display: flex; align-items: center; font-size: 18px; font-weight: bold; padding: 0 30px; height: 100%;}
#header #nav .nav-wrap .nav-sub {display: none; text-align: center; padding-top: 10px;}
#header #nav .nav-wrap .nav-sub.open {display: block;}
#header #nav .nav-wrap .nav-sub li {display: flex; justify-content: center;}
#header #nav .nav-wrap .nav-sub a {color: #e9e9e9; display: block; padding: 10px 0; font-size: 15px;}
#header #menu {position: absolute; top: 0; right: 0; width: 100px; height: 100px; text-indent: -9999px; position: absolute; background-image: url(../img/ico-menu-dark.png); background-repeat: no-repeat; background-position: center center; cursor: pointer; transition: all 0.3s; z-index: 5;}
#header #menu.open {background-image: url(../img/ico-close.png);}
#header #navM-bg {display: none; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; z-index: 1;}
#header #navM-bg.open {display: block;}
#login-box, #login-box2 {position: relative; z-index: 999; margin-right: 60px;}

@media (min-width: 240px) and (max-width:768px) {
    #header {height: 75px; padding: 0 20px;}
    #header h1 a {font-size: 22px;}
    #header #menu {width: 75px; height: 75px;}
    #header #navM-bg {height: 260px; display: none !important;}
    #header #nav {display: none; left: 0; transform: none; padding: 75px 0 20px; height: 100vh;  background: rgba(0,0,0,0.8); width: 100%;}
    #header #nav.open {display: block;}
    #header #nav .nav-wrap > li > a {font-size: 18px; height: auto; padding: 12px 20px;}
    #header #nav .nav-wrap {flex-direction: column; margin-top: 50px;}
    #header #nav .nav-wrap .nav-sub {text-align: left; margin: 0 20px; border-radius: 10px; width: auto; display: none; padding-top: 5px;}
    #header #nav .nav-wrap .nav-sub.open {display: none;}
    #header #nav .nav-wrap .nav-sub.mopen {display: block !important;}
    #header #nav .nav-wrap .nav-sub li {justify-content: start;}
    #header #nav .nav-wrap .nav-sub a {font-size: 13px; padding: 10px 20px;}
}
/* header :E */

/* -------------------------------------------------------------------------------------- */
/* ---------------------------------------- index main :S ---------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* mainV :S */
#mainV {width: 100%; height: 100vh; overflow: hidden; position: relative;}
#mainV #mainV-slide li {width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center;}
#mainV #mainV-slide li.mainV01 {background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/mainV.jpg) center / cover no-repeat;}
#mainV #mainV-slide li.mainV02 {background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/mainV2.jpg) center / cover no-repeat;}
#mainV #mainV-slide li.mainV03 {background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/mainV3.jpg) center / cover no-repeat;}
#mainV #mainV-slide #mainV-text {width: 1200px; margin: 0 auto; text-align: center;}
#mainV #mainV-slide .mainV-t1 {font-size: 60px; font-weight: bold; color: #fff;}
#mainV #mainV-slide .mainV-t2 {font-size: 30px; margin-top: 10px; color: #fff;}
#mainV #controler {position: absolute; bottom: 30%; left: calc((100vw - 1200px) / 2); display: flex; align-items: center;}
#mainV #left {position: relative;}
#mainV #right {position: relative; margin-left: 40px;}
#mainV #controler .swiper-pagination {position: relative; color: #fff; font-size: 17px; top: 0; bottom: inherit; left: 0;}
#mainV #controler .swiper-pagination-current {font-weight: bold !important; font-size: 20px;}
#mainV .swiper-button-next:after, #mainV .swiper-button-prev::after {color: #fff; font-size: 14px;}
#mainV #controler .swiper-button-prev::after {content: 'prev'; clear: both;}
#mainV #controler .swiper-button-next {right: auto; left: 20px;}
#mainV #controler .swiper-button-prev {right: 20px; left: auto;}
#mainV #playBtn {position: relative; width: 13px; height: 13px; z-index: 1; cursor: pointer;}
#mainV #playBtn .stop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/pause-button.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; text-indent: -9999px;}
#mainV #playBtn .play {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-image: url(../img/play-button-arrowhead.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; text-indent: -9999px;}
#mainV #playBtn.click .stop {display: none;}
#mainV #playBtn.click .play {display: block;}

@media (min-width: 240px) and (max-width:768px) {
    #mainV #mainV-slide #mainV-text {width: 100%; padding: 0 20px;}
    #mainV #mainV-slide #mainV-text .mainV-t1 {font-size: 36px;}
    #mainV #mainV-slide #mainV-text .mainV-t2 {font-size: 14px; margin-top: 10px;}
    #mainV #controler {left: 20px;}
    #mainV #controler .swiper-pagination {font-size: 13px;}
    #mainV #playBtn {width: 12px; height: 12px;}
    #mainV #controler .swiper-button-next:after, #mainV #controler .swiper-button-prev:after { font-size: 10px;}
    #mainV #right {margin-left: 30px;}
    #mainV #controler .swiper-button-prev {right: 12px;}
    #mainV #controler .swiper-button-next {left: 12px;}
}
/* mainV :E */

/* sec2 :S */
#sec2 {position: relative; padding: 100px 0;}
#sec2::before {content: ''; clear: both; position: absolute; left: 0; bottom: 0; background-color: #f2f2f2; width: 60%; height: 70%;}
#sec2::after {content: 'Professional Golfer'; clear: both; position: absolute; color: #06493d; opacity: 0.1; font-size: 75px; top: 15%; font-weight: 600; left: 100px;}
#sec2 .innersize {position: relative;}
#sec2 #sec2-slide {overflow: hidden;}
#sec2 .swiper-button-next:after, #sec2 .swiper-button-prev:after {display: none;}
#sec2 .swiper-button-prev {background-image: url(../img/btn-arrow.png); content: ''; background-position: center center; background-size: contain; background-repeat: no-repeat; width: 60px; height: 60px; right: inherit; left: -80px; transform: rotate(180deg);}
#sec2 .swiper-button-next {background-image: url(../img/btn-arrow.png); content: ''; background-position: center center; background-size: contain; background-repeat: no-repeat; width: 60px; height: 60px; left: inherit; right: -80px;}
#sec2 .swiper-slide {display: flex; align-items: center; gap: 50px; justify-content: space-between; cursor: pointer;}
#sec2 #sec2-textB .sec2-tit {font-size: 40px; font-weight: 600; color: #06493d;}
#sec2 #sec2-textB .sec2-sub {margin: 40px 0; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; line-height: 1.6rem; font-size: 30px;}
#sec2 .swiper-slide img {width: 700px; height: 550px; object-fit: cover; border-radius: 24px;}

@media (min-width: 240px) and (max-width:768px) {
    #sec2 {padding: 50px 0;}
    #sec2::before {width: 100%; height: 68%; bottom: auto; top: 0;}
    #sec2::after {display: none;}
    #sec2 .innersize {width: 100%; padding: 0 20px;}
    #sec2 .swiper-button-prev {width: 30px; height: 30px; left: 20px;}
    #sec2 .swiper-button-next {width: 30px; height: 30px; right: 20px;}
    #sec2 .swiper-slide {flex-direction: column-reverse; gap: 20px;}
    #sec2 .swiper-slide img {width: 100%; height: 200px; border-radius: 8px;}
    #sec2 #sec2-textB .sec2-tit {font-size: 20px;}
    #sec2 #sec2-textB .sec2-sub {font-size: 20px; line-height: 1.2rem; margin: 10px 0; font-weight:bold;}
}
/* sec2 :E */

/* sec3 :S */
#sec3 {padding: 100px 0;}
#sec3 #card-wrap {display: flex; gap: 20px;}
#sec3 #card-wrap li {flex: 1; aspect-ratio: 3/5; align-content: center; transition: all 0.1s; padding: 20px; justify-items: center; cursor: pointer;}
#sec3 #card-wrap li:hover {outline: 10px solid #06493d;}
#sec3 #card-wrap li.card01 {background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/theme01-4.jpg) center / cover no-repeat;}
#sec3 #card-wrap li.card02 {background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/theme01-5.jpg) center / cover no-repeat;}
#sec3 #card-wrap li.card03 {background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/theme01-6.jpg) center / cover no-repeat;}
#sec3 #card-in {display: flex; flex-direction: column; align-items: center;}
#sec3 #card-in .card-tit {font-size: 38px; font-weight: 500; margin-top: 20px; color: #fff; text-align: center;}
#sec3 #card-in .card-sub {font-size: 18px; margin: 20px 0; color: #fff; text-align: center;}

@media (min-width: 240px) and (max-width:768px) {
    #sec3 {padding: 50px 0;}
    #sec3 .innersize {padding: 0 20px; width: 100%;}
    #sec3 #card-wrap {flex-direction: column;}
    #sec3 #card-in .card-tit {font-size: 18px;}
    #sec3 #card-in .card-sub {font-size: 14px;}
}
/* sec3 :E */

/* sec4 :S */
#sec4 {padding: 100px 0; height: 100vh; width: 100%; position: relative; color: #fff;}
#sec4::before {content: ''; clear: both; background: linear-gradient(90deg, #06493d 3%, #0d0907 100%); width: 50%; height: 100%; position: absolute; left: 0; top: 0;}
#sec4::after {content: ''; clear: both; background: url(../img/theme01-7.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 50%; height: 100%; position: absolute; top: 0; right: 0;}
#sec4 .innersize {display: flex; height: 100%; align-items: center;}
#sec4 #sec4-tBox {position: relative; width: 50%; z-index: 1;}
#sec4 #sec4-tBox .sec4-tB-top {margin-bottom: 50px;}
#sec4 #sec4-tBox .sec4-tit {font-size: 45px; font-weight: bold; word-break: keep-all;}
#sec4 #sec4-tBox .sec4-sub {font-size: 20px; margin-top: 20px; line-height: 1.8rem; word-break: keep-all;}
#sec4 #sec4-tBox .sec4-vm {border: 1px solid #fff; display: flex; position: relative; justify-content: center; gap: 10px; font-weight: bold; transition: all 0.3s; padding: 5px 20px; width: 160px; height: 50px; align-items: center; min-width: max-content;}
#sec4 #sec4-tBox .sec4-vm::after {content: ''; clear: both; background-image: url(../img/add.svg); width: 20px; height: 20px; display: block; background-position: center center; background-repeat: no-repeat; background-size: contain;}
#sec4 #sec4-tBox .sec4-vm:hover {background-color: rgba(255,255,255,.2);}

@media (min-width: 240px) and (max-width:768px) {
    #sec4 {padding: 50px 0 0; height: auto;}
    #sec4::before {width: 100%;}
    #sec4::after {display: none; position: relative; width: 100%; height: 100vw; top: auto;}
    #sec4 .innersize {width: 100%; padding: 0 20px;}
    #sec4 #sec4-tBox {width: 100%; padding-bottom: 50px;}
    #sec4 #sec4-tBox .sec4-tB-top {margin-bottom: 30px; text-align: center;}
    #sec4 #sec4-tBox .sec4-tit {font-size: 22px;}
    #sec4 #sec4-tBox .sec4-sub {font-size: 14px; line-height: 1.3rem;}
    #sec4 #sec4-tBox .sec4-vm {margin: 0 auto; padding: 10px 20px; width: 130px; height: 40px; font-size: 12px;}
    #sec4 #sec4-tBox .sec4-vm::after {width: 16px; height: 16px;}
}
/* sec4 :E */

/* sec5 :S */
#sec5 {padding: 100px 0; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/theme01-8.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;}
#sec5 .innersize {display: flex; align-items: center; justify-content: center;}
#sec5 #sec5-tBox {text-align: center; color: #fff; margin-bottom: 50px;}
#sec5 #sec5-tBox .sec5-tit {font-size: 45px; font-weight: bold; word-break: keep-all;}
#sec5 #sec5-tBox .sec5-sub {font-size: 20px; margin-top: 20px; line-height: 1.8rem; word-break: keep-all;}

@media (min-width: 240px) and (max-width:768px) {
    #sec5 {padding: 50px 0;}
    #sec5 .innersize {width: 100%; padding: 0 20px;}
    #sec5 #sec5-tBox {margin-bottom: 30px;}
    #sec5 #sec5-tBox .sec5-tit {font-size: 22px;}
    #sec5 #sec5-tBox .sec5-sub {font-size: 14px; line-height: 1.3rem; margin-bottom: 10px;}
}
/* sec5 :E */

/* sec6 :S */
#sec6 {padding: 100px 0;}
#sec6 .innersize {position: relative;}
#sec6 #sec6-textB {text-align: center; margin-bottom: 50px;}
#sec6 #sec6-textB .sec6-tit {font-size: 45px; font-weight: 600;}
#sec6 #sec6-textB .sec6-sub {font-size: 20px; margin-top: 20px;}
#sec6 #sec6-slide {overflow: hidden; position: relative;}
#sec6 #sec6-slide .swiper-wrapper {padding-bottom: 100px;}
#sec6 #sec6-slide .swiper-slide a {display: block; width: 100%; height: 380px;}
#sec6 #sec6-slide .swiper-slide a img {width: 100%; height: 100%; object-fit: cover; border-radius: 24px;}
#sec6 #sec6-slide #sec6-controler {position: absolute; bottom: 0; left: 0; display: flex; gap: 10px; width: 100%; align-items: center;}
#sec6 #sec6-slide #sec6-controler .swiper-progress {height: 4px; background-color: #ddd; position: relative; width: calc(100% - 130px);}
#sec6 #sec6-slide #sec6-controler .swiper-button-next {width: 55px; height: 55px; position: static; border: 1px solid #444; color: #444; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; margin-top: 0;}
#sec6 #sec6-slide #sec6-controler .swiper-button-next::after {content: ''; background-image: url(../img/left-arrow.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: 16px; height: 16px; display: block; transform: rotate(180deg);}
#sec6 #sec6-slide #sec6-controler .swiper-button-prev {width: 55px; height: 55px; position: static; border: 1px solid #444; color: #444; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; margin-top: 0;}
#sec6 #sec6-slide #sec6-controler .swiper-button-prev::after {content: ''; background-image: url(../img/left-arrow.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: 16px; height: 16px; display: block;}
#sec6 #sec6-slide #sec6-controler .swiper-button-next:hover, #sec6 #sec6-slide #sec6-controler .swiper-button-prev:hover {background-color: #06493d; border-color: #06493d;}
#sec6 #sec6-slide #sec6-controler .swiper-button-next:hover::after, #sec6 #sec6-slide #sec6-controler .swiper-button-prev:hover::after {background-image: url(../img/left-arrow-white.svg);}
#sec6 #sec6-slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #06493d;}
#sec6 #sec6-slide #sec6-controler .swiper-button-disabled {opacity: 0.3 !important;}

@media (min-width: 240px) and (max-width:768px) {
    #sec6 {padding: 50px 0;}
    #sec6 .innersize {width: 100%; padding: 0 20px;}
    #sec6 #sec6-textB {margin-bottom: 30px;}
    #sec6 #sec6-textB .sec6-tit {font-size: 22px;}
    #sec6 #sec6-textB .sec6-sub {font-size: 14px;}
    #sec6 #sec6-slide .swiper-wrapper {padding-bottom: 50px;}
    #sec6 #sec6-slide #sec6-controler .swiper-button-prev {width: 40px; height: 40px;}
    #sec6 #sec6-slide #sec6-controler .swiper-button-next {width: 40px; height: 40px;}
    #sec6 #sec6-slide #sec6-controler .swiper-button-prev::after, #sec6 #sec6-slide #sec6-controler .swiper-button-next::after {width: 12px; height: 12px;}
    #sec6 #sec6-slide #sec6-controler .swiper-progress {width: calc(100% - 100px);}
    #sec6 #sec6-slide .swiper-slide a {height: 300px;}
    #sec6 #sec6-slide .swiper-slide a img {border-radius: 8px;}
}
/* sec6 :E */

/* sec7 :S */
#sec7 {padding: 100px 0; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../img/theme01-9.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff;}
#sec7 .innersize {display: flex; justify-content: space-between; gap: 50px;}
#sec7 #sec7-left {width: calc(100% - 550px);}
#sec7 #sec7-left .sec7-tit {font-size: 45px; font-weight: 600;}
#sec7 #sec7-left #info-wrap {margin-top: 100px; display: flex; gap: 20px;}
#sec7 #sec7-left #info-wrap li {flex: 1; display: flex; align-content: center; flex-direction: column;}
#sec7 #sec7-left #info-wrap img {height: 50px; margin-bottom: 20px; object-fit: contain;}
#sec7 #sec7-left #info-wrap .info-text {word-break: break-all; text-align: center;}
#sec7 #sec7-left #info-wrap .info-text .bold {margin: 20px 0; display: block; font-weight: bold;}
#sec7 #sec7-right {width: 480px; background-color: rgba(255,255,255,.2); padding: 50px;}
#sec7 #sec7-right .consult-tit {font-size: 30px; font-weight: 600; margin-bottom: 20px; text-align: center;}
#sec7 #sec7-right #input-wrap li {margin-bottom: 20px;}
#sec7 #sec7-right #input-wrap .sound-only {display: none;}
#sec7 #sec7-right #input-wrap input {background-color: transparent; color: #fff; border: none; border-bottom: 1px solid #bfbfbf; width: 100%; font-size: 16px; padding: 10px;}
#sec7 #sec7-right #input-wrap input::placeholder {font-size: 16px; color: #bfbfbf;}
#sec7 #sec7-right #input-wrap textarea {background-color: transparent; color: #fff; border: none; border-bottom: 1px solid #bfbfbf; width: 100%; font-size: 16px; padding: 10px;}
#sec7 #sec7-right #input-wrap textarea::placeholder {font-size: 16px; color: #bfbfbf;}
#sec7 #sec7-right #sec7-submit {background-color: #06493d; display: flex; width: 100%; height: 60px; font-size: 20px; text-align: center; align-items: center; justify-content: center; font-weight: 500; color: #fff; border: none; cursor: pointer;}
#sec7 #sec7-right #sec7-submit:hover {background-color: #f5a418;}

@media (min-width: 240px) and (max-width:768px) {
    #sec7 {padding: 50px 0;}
    #sec7 .innersize {width: 100%; padding: 0 20px; display: block;}
    #sec7 #sec7-left {width: 100%;}
    #sec7 #sec7-left .sec7-tit {font-size: 22px;}
    #sec7 #sec7-left #info-wrap {margin-top: 50px; margin-bottom: 20px;}
    #sec7 #sec7-left #info-wrap img {height: 30px; margin-bottom: 10px;}
    #sec7 #sec7-left #info-wrap .info-text {font-size: 12px;}
    #sec7 #sec7-right {width: 100%; padding: 20px;}
    #sec7 #sec7-right .consult-tit {font-size: 18px;}
    #sec7 #sec7-right #input-wrap li {margin-bottom: 10px;}
    #sec7 #sec7-right #input-wrap input {font-size: 14px;}
    #sec7 #sec7-right #input-wrap input::placeholder {font-size: 14px;}
    #sec7 #sec7-right #input-wrap textarea {font-size: 14px;}
    #sec7 #sec7-right #input-wrap textarea::placeholder {font-size: 14px;}
    #sec7 #sec7-right #sec7-submit {height: 40px; font-size: 16px;}
}
/* sec7 :E */

/* sec8 :S */
#sec8 {padding: 100px 0; background-color: #efefef;}
#sec8 .innersize {display: flex; position: relative;}
#sec8 #sec8-Twrap {width: 210px; margin-top: 15px;}
#sec8 #sec8-Twrap .sec8-tit {font-size: 30px; font-weight: 600;}
#sec8 #sec8-Twrap .sec8-sub {font-size: 14px; margin-top: 5px; color: #999;}
#sec8 #sec8-list {width: calc(100% - 210px);}
#sec8 #sec8-list ul {display: flex;}
#sec8 #sec8-list li {display: flex; width: 50%; height: 140px; cursor: pointer;}
#sec8 #sec8-list .sec8-thumnail {width: 210px; min-height: 140px; object-fit: cover; border-radius: 8px;}
#sec8 #sec8-list-text {width: calc(100% - 230px); font-size: 14px; color: #7e7465; padding: 10px 30px 0 0; margin-left: 20px;}
#sec8 #sec8-list-text .sec8-list-tit {display: block; font-size: 18px; color: #111; font-weight: 600; width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#sec8 #sec8-list-text .sec8-list-sub {margin-top: 10px; height: 45px; word-break: keep-all;     overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4rem;}
#sec8 #sec8-list-text .sec8-list-date {margin-top: 15px;}
#sec8 .sec8-vm {position: absolute; bottom: 0; left: 0; display: inline-block;}

@media (min-width: 240px) and (max-width:768px) {
    #sec8 {padding: 50px 0;}
    #sec8 .innersize {width: 100%; padding: 0 20px; flex-direction: column;}
    #sec8 #sec8-Twrap {width: 100%; margin-top: 0;}
    #sec8 #sec8-list {margin-top: 20px; width: 100%;}
    #sec8 #sec8-list ul {flex-direction: column;}
    #sec8 #sec8-list li {width: 100%; height: 100px; margin-top: 30px;}
    #sec8 #sec8-list li:first-child {margin: 0;}
    #sec8 #sec8-list .sec8-thumnail {display: none;}
    #sec8 #sec8-list-text {width: 100%; margin-left: 0;}
    #sec8 #sec8-list-text .sec8-list-tit {font-size: 16px;}
    #sec8 #sec8-list-text .sec8-list-sub {font-size: 13px; line-height: 1.2rem;}
    #sec8 #sec8-list-text .sec8-list-date {font-size: 13px; margin-top: 10px;}
    #sec8 .sec8-vm {width: auto; right: 20px; bottom: auto; top: 0; left: auto; font-size: 12px;}
}
/* sec8 :E */
/* -------------------------------------------------------------------------------------- */
/* ---------------------------------------- index main :E ---------------------------------- */
/* -------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------- */
/* ---------------------------------------- subPage :S ---------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* 서브페이지 공통 :S */
#sub-cmn-bnr {position: relative; display: table; width: 100%; height: 450px; overflow: hidden; padding-top: 100px; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0.5)), url(../img/theme01-10.jpg) center / cover no-repeat;}
#sub-cmn-bnr.sub2 {background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0.5)), url(../img/theme01-11.jpg) center / cover no-repeat;}
#sub-cmn-bnr.sub3 {background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0.5)), url(../img/theme01-12.jpg) center / cover no-repeat;}
#sub-cmn-bnr.sub4 {background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0.5)), url(../img/theme01-12.jpg) center / cover no-repeat;}
#sub-cmn-bnr.sub5 {background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0.5)), url(../img/theme01-13.jpg) center / cover no-repeat;}
#sub-cmn-bnr #sub-cmn-title {position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); text-align: center; width: 100%;}
#sub-cmn-bnr #sub-cmn-title .sub-cmn-t1 {color: #fff; font-weight: bold; font-size: 36px;}
#sub-cmn-bnr #sub-cmn-title .sub-cmn-t2 {color: rgba(255,255,255,.6);}

#sub-cmn-tab {position: relative; width: 100%; top: -35px;}
#sub-cmn-tab #sub-cmn-tabwrap {display: table; table-layout: fixed; width: 100%;}
#sub-cmn-tab #sub-cmn-tabwrap li {transition: all 0.3s; border: 1px solid #ccc; border-left: none; display: table-cell; text-align: center; background-color: #fff;}
#sub-cmn-tab #sub-cmn-tabwrap li:first-child {border-left: 1px solid #ccc;}
#sub-cmn-tab #sub-cmn-tabwrap li:hover {background-color: #06493d}
#sub-cmn-tab #sub-cmn-tabwrap li.on {background-color: #06493d;}
#sub-cmn-tab #sub-cmn-tabwrap li a {font-size: 18px; transition: all 0.3s; padding: 20px 0; display: block;}
#sub-cmn-tab #sub-cmn-tabwrap li:hover a {color: #fff; font-weight: bold;}
#sub-cmn-tab #sub-cmn-tabwrap li.on a {color: #fff; font-weight: bold;}

@media (min-width: 240px) and (max-width:768px) {
    #sub-cmn-bnr {height: 200px; padding-top: 70px;}
    #sub-cmn-bnr #sub-cmn-title {bottom: 10px;}
    #sub-cmn-bnr #sub-cmn-title .sub-cmn-t1 {font-size: 24px;}
    #sub-cmn-bnr #sub-cmn-title .sub-cmn-t2 {font-size: 14px; margin: 10px 0;}

    #sub-cmn-tab .innersize {width: 100%;}
    #sub-cmn-tab {top: 0;}
    #sub-cmn-tab #sub-cmn-tabwrap li a {padding: 10px 5px; font-size: 14px;}
}
/* 서브페이지 공통 :E */

/* 인사말 :S */
#sub01 {margin: 100px auto;}
#sub01 #sub01-textB {text-align: center; margin-bottom: 50px;}
#sub01 #sub01-textB .sub01-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub01 #sub01-textB .sub01-t2 {font-size: 32px; font-weight: bold;}
#sub01 #sub01-wrap {margin-top: 100px; display: flex; justify-content: space-between;}
#sub01 #sub01-wrap .sub01-wrap-img {max-width: 100%; border-radius: 36px 0;}
#sub01 #sub01-wrap #sub01-wrap-tB {margin-left: 50px;}
#sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t1 {font-weight: bold; font-size: 30px;}
#sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t2 {margin: 50px 0; font-size: 18px; line-height: 1.6rem;}
#sub01 #sub01-wrap #sub01-wrap-tB #sub01-list li {font-size: 18px; line-height: 1.8rem;}
#sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t3 {margin-top: 50px; font-size: 18px; position: relative;}
#sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t3::before {content: ''; clear: both; position: absolute; width: 100px; height: 2px; background-color: #111; top: 50%; left: -110px;}
#sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t3 span {font-size: 36px; font-weight: bold;}

@media (min-width: 240px) and (max-width:768px) {
    #sub01 {margin: 10vw auto;}
    #sub01 .innersize {width: 100%; padding: 0 20px;}
    #sub01 #sub01-textB .sub01-t1 {font-size: 12px;}
    #sub01 #sub01-textB .sub01-t2 {font-size: 26px;}
    #sub01 #sub01-wrap {margin-top: 100px; flex-direction: column; margin-top: 50px;}
    #sub01 #sub01-wrap #sub01-wrap-tB {margin-left: 0; margin-top: 20px;}
    #sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t1 {font-size: 20px;}
    #sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t2 {font-size: 12px; margin: 20px 0; line-height: 1.4rem;}
    #sub01 #sub01-wrap #sub01-wrap-tB #sub01-list li {font-size: 12px; line-height: 1.4rem;}
    #sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t3 {margin-top: 30px; font-size: 12px; text-align: right;}
    #sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t3 span {font-size: 26px;}
    #sub01 #sub01-wrap #sub01-wrap-tB .sub01-wrtB-t3::before {left: auto; right: 0; top: 100%; margin-top: 10px;}
    #sub01 #sub01-wrap .sub01-wrap-img {border-radius: 8px 0;}
}
/* 인사말 :E */

/* 연혁 :S */
#sub01-1 {margin: 100px auto;}
#sub01-1 #sub01a-textB {text-align: center; margin-bottom: 50px;}
#sub01-1 #sub01a-textB .sub01-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub01-1 #sub01a-textB .sub01-t2 {font-size: 32px; font-weight: bold;}
#sub01-1 #sub01a-wrap2 {width: 10vw; min-width: 300px; padding: 20px; margin: 100px auto; border: 5px solid #06493d; display: flex; align-items: center; justify-content: center;}
#sub01-1 #sub01a-wrap2 img {max-width: 100%; display: block;}
#sub01-1 #sub01a-wrap {margin-top: 100px; display: flex; justify-content: space-between;}
#sub01-1 #sub01a-wrap #sub01a-wrapper > li {display: flex; justify-content: space-between; gap: 50px; margin-bottom: 100px;}
#sub01-1 #sub01a-wrap #sub01a-wrapper > li:last-child {margin-bottom: 0;}
#sub01-1 #sub01a-wrap .sub01a-tB {display: flex; margin-right: 50px; border-top: 1px solid #333; }
#sub01-1 #sub01a-wrap .sub01a-tB .sub01a-tB-t1 {font-weight: bold; font-size: 22px; margin-right: 50px; padding-top: 20px; border-top: 2px solid #06493d; color: #06493d;}
#sub01-1 #sub01a-wrap .sub01a-tB .sub01a-list {padding-top: 20px;}
#sub01-1 #sub01a-wrap .sub01a-tB .sub01a-list li {padding-left: 15px; position: relative; line-height: 1.6rem;}
#sub01-1 #sub01a-wrap .sub01a-tB .sub01a-list li::before {content: ''; clear: both; top: 10px; left: 0; width: 5px; height: 5px; background-color: #06493d; position: absolute;}
#sub01-1 #sub01a-wrap .sub01a-img {max-width: 100%;}

@media (min-width: 240px) and (max-width:768px) {
    #sub01-1 {margin: 10vw auto;}
    #sub01-1 .innersize {width: 100%; padding: 0 20px;}
    #sub01-1 #sub01a-textB .sub01-t1 {font-size: 12px;}
    #sub01-1 #sub01a-textB .sub01-t2 {font-size: 26px;}
    #sub01-1 #sub01a-wrap {margin-top: 100px;}
    #sub01-1 #sub01a-wrap #sub01a-wrapper > li {flex-direction: column; gap: 20px; margin-bottom: 40px;}
    #sub01-1 #sub01a-wrap #sub01a-wrapper > li:nth-child(even) {flex-direction: column-reverse;}
    #sub01-1 #sub01a-wrap .sub01a-tB {margin-right: 0;}
    #sub01-1 #sub01a-wrap .sub01a-tB .sub01a-list li {font-size: 13px; line-height: 1.2rem;}
}
/* 연혁 :E */

/* 구성원 :S */
#sub01-2 {margin: 100px auto;}
#sub01-2 #sub01b-textB {text-align: center; margin-bottom: 50px;}
#sub01-2 #sub01b-textB .sub01-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub01-2 #sub01b-textB .sub01-t2 {font-size: 32px; font-weight: bold;}
#sub01-2 #sub01b-wrap {margin: 100px 0;}
#sub01-2 #sub01b-wrap #sub01b-list {display: flex; flex-wrap: wrap;}
#sub01-2 #sub01b-wrap #sub01b-list > li {position: relative; width: 100%;}
#sub01-2 #sub01b-wrap #sub01b-list > li::after {content: ''; clear: both; display: block; height: 50px; width: 1px; border-right: 1px dashed #ccc; margin: 0 auto;}
#sub01-2 #sub01b-wrap #sub01b-list li span {display: flex; align-items: center; margin: 0 auto; width: 200px; height: 50px; color: #fff; font-size: 20px; justify-content: center;}
#sub01-2 #sub01b-wrap #sub01b-list .ceoBox {width: 100%;}
#sub01-2 #sub01b-wrap #sub01b-list .ceoBox span {background-color: #3244a0;}
#sub01-2 #sub01b-wrap #sub01b-list .midBox span {background-color: #384db9;}
#sub01-2 #sub01b-wrap #sub01b-list .midBox span.mid-box2 {position: absolute; top: 0; left: 50%; margin-left: 150px;}
#sub01-2 #sub01b-wrap #sub01b-list .midBox span.mid-box2::before {content: ''; clear: both; display: block; position: absolute; left: -50px; width: 50px; height: 1px; border-top: 1px dashed #ccc;}
#sub01-2 #sub01b-wrap #sub01b-list .teamBox {width: 25%; position: relative; border-top: 1px dashed #ccc;}
#sub01-2 #sub01b-wrap #sub01b-list .teamBox span {background-color: #4a66f4;}
#sub01-2 #sub01b-wrap #sub01b-list .teamBox ul {text-align: center; margin-top: 20px;}
#sub01-2 #sub01b-wrap #sub01b-list .teamBox li {line-height: 1.5rem;}
#sub01-2 #sub01b-wrap #sub01b-list .teamBox::after {display: none;}
#sub01-2 #sub01b-wrap #sub01b-list .teamBox::before {content: ''; clear: both; display: block; height: 50px; width: 1px; border-right: 1px dashed #ccc; margin: 0 auto;}

@media (min-width: 240px) and (max-width:768px) {
    #sub01-2 {margin: 10vw auto;}
    #sub01-2 .innersize {width: 100%; padding: 0 20px;}
    #sub01-2 #sub01b-textB .sub01-t1 {font-size: 12px;}
    #sub01-2 #sub01b-textB .sub01-t2 {font-size: 26px;}
    #sub01-2 #sub01b-wrap {margin: 50px 0;}
    #sub01-2 #sub01b-wrap #sub01b-list li span {font-size: 12px; width: 100px;}
    #sub01-2 #sub01b-wrap #sub01b-list > li::after {height: 30px;}
    #sub01-2 #sub01b-wrap #sub01b-list .midBox span.mid-box2 {margin-left: 80px;}
    #sub01-2 #sub01b-wrap #sub01b-list .midBox span.mid-box2::before {left: -30px; width: 30px;}
    #sub01-2 #sub01b-wrap #sub01b-list .teamBox::before {height: 30px;}
    #sub01-2 #sub01b-wrap #sub01b-list .teamBox {padding: 0 5px;}
    #sub01-2 #sub01b-wrap #sub01b-list .teamBox span {width: 100%;}
    #sub01-2 #sub01b-wrap #sub01b-list .teamBox li {font-size: 12px; line-height: 1.2rem;}
}
/* 구성원 :E */

/* 오시는길 :E */
#sub01-2 {margin: 100px auto;}
#sub01-2 #sub01b-map .root_daum_roughmap {width: 100%;}
#sub01-2 #sub01b-map .root_daum_roughmap .wrap_map {height: 360px;}
#sub01-2 #sub01b-map .root_daum_roughmap .wrap_controllers {display: none;}
#sub01-2 #sub01b-location {padding: 20px; background-color: #f1f1f1;}
#sub01-2 #sub01b-location img {width: 12px; height: 12px;}
#sub01-2 #sub01b-com #sub01b-com-wrap > li {margin-bottom: 50px;}
#sub01-2 #sub01b-com #sub01b-com-wrap > li:last-child {margin-bottom: 0;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-com-tit {margin-bottom: 10px;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-com-tit .sub01b-com-t1 {font-size: 64px; color: rgba(24, 24, 24, 0.1); font-weight: bold; display: inline-block;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-com-tit .sub01b-com-t2 {position: relative; left: -50px; font-size: 22px; font-weight: bold; display: inline-block;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList {display: flex;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList li {width: 25%;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList li span {color: #fff; border-radius: 60px; background-color: #06493d; padding: 5px 20px; margin: 2px 0; font-size: 14px; display: inline-block;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList li.sub01b-num02 span {background-color: #256e2a;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList li.sub01b-num03 span {background-color: #55256e;}
#sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList li.sub01b-num04 span {background-color: #ff0d0d;}
#sub01-2 #sub01b-com #sub01b-com-wrap #sub01b-car li {margin-bottom: 20px;}
#sub01-2 #sub01b-com #sub01b-com-wrap #sub01b-car li:last-child {margin-bottom: 0;}
#sub01-2 #sub01b-com #sub01b-com-wrap #sub01b-car p.sub01b-carBold {font-weight: bold; color: #06493d;}

@media (min-width: 240px) and (max-width:768px) {
    #sub01-2 {margin: 50px auto;}
    #sub01-2 #sub01b-textB .sub01b-t1 {font-size: 12px;}
    #sub01-2 #sub01b-textB .sub01b-t2 {font-size: 26px;}
    #sub01-2 #sub01b-map .root_daum_roughmap .wrap_map {height: 300px;}
    #sub01-2 #sub01b-location {font-size: 12px;}
    #sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-com-t3 {font-size: 14px;}
    #sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList {flex-direction: column;}
    #sub01-2 #sub01b-com #sub01b-com-wrap .sub01b-comList li {width: 100%;}
}
/* 오시는길 :E */

/* 스토리 :S */
#sub02 {margin: 100px auto;}
#sub02 #sub02-textB {text-align: center; margin-bottom: 50px;}
#sub02 #sub02-textB .sub02-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub02 #sub02-textB .sub02-t2 {font-size: 32px; font-weight: bold;}
#sub02 #sub02-wrap2 {margin: 50px 0; text-align: center;}
#sub02 #sub02-wrap2 .sub02-t1 {font-weight: bold; font-size: 20px; margin-bottom: 30px;}
#sub02 #sub02-wrap2 .sub02-t2 {color: #333;}
#sub02 #sub02-wrap {margin-top: 100px;}
#sub02 #sub02-wrap #sub02-list li {display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 50px;}
#sub02 #sub02-wrap #sub02-list .fil-round {position: absolute; background-color: #06493d; border-radius: 50%; width: 100px; height: 100px; right: 0; top: 0;}
#sub02 #sub02-wrap #sub02-list .border-round {position: absolute; background-color: #fff; border: 10px solid #ccc; width: 150px; height: 150px; border-radius: 50%; left: 0; top: 0;}
#sub02 #sub02-wrap #sub02-list .sub02-list-img {max-width: 100%; position: relative;}
#sub02 #sub02-wrap #sub02-list .sub02-list-text {background-color: #fff; box-shadow: 5px 5px 5px rgba(0,0,0,.2); position: relative; left: -50px; padding: 50px; border-radius: 24px; z-index: 3;}
#sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-listT-t1 {font-size: 22px; color: #06493d; margin-bottom: 10px; font-weight: bold;}
#sub02 #sub02-wrap #sub02-list li:nth-child(even) .sub02-list-text {left: auto; right: -50px;}
#sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-listT-t2 {line-height: 1.6rem;}
#sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-list-btn {display: flex; justify-content: end;}
#sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-list-btn a {transition: all 0.3s; display: inline-block; margin-top: 20px; border: 1px solid #06493d; background-color: #06493d; color: #fff; border-radius: 8px; padding: 5px 20px;}
#sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-list-btn:hover a {background-color: #fff; color: #06493d;}

@media (min-width: 240px) and (max-width:768px) {
    #sub02 {margin: 50px auto;}
    #sub02 .innersize {width: 100%; padding: 0 20px;}
    #sub01-2 #sub02-textB .sub02-t1 {font-size: 12px;}
    #sub01-2 #sub02-textB .sub02-t2 {font-size: 26px;}
    #sub02 #sub02-wrap #sub02-list li {flex-direction: column;}
    #sub02 #sub02-wrap #sub02-list li:nth-child(even) {flex-direction: column-reverse;}
    #sub02 #sub02-wrap #sub02-list .sub02-list-text {position: static; padding: 20px 10px; margin-top: 20px;}
    #sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-listT-t1 {font-size: 20px;}
    #sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-listT-t2 {font-size: 12px; line-height: 1.2rem;}
    #sub02 #sub02-wrap #sub02-list .sub02-list-text .sub02-list-btn a {font-size: 12px;}
    
}
/* 스토리 :E */

/* 프로그램 :S */
#sub03 {margin: 100px auto;}
#sub03 #sub03-textB {text-align: center; margin-bottom: 50px;}
#sub03 #sub03-textB .sub03-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub03 #sub03-textB .sub03-t2 {font-size: 32px; font-weight: bold;}
#sub03 #sub03-wrap #sub03-list {display: flex; flex-wrap: wrap;}
#sub03 #sub03-wrap #sub03-list li {background-color: #eee; width: 32%; margin-bottom: 20px; margin-right: 16px; cursor: pointer; position: relative;}
#sub03 #sub03-wrap #sub03-list .hover-line span {position: absolute; background-color: #06493d;}
@keyframes borders-top {100% {width: 100%;}}
@keyframes borders-height {100% {height: 100%;}}
#sub03 #sub03-wrap #sub03-list .hover-line span.hover-top {width: 0; height: 4px; top: 0; right: 0;}
#sub03 #sub03-wrap #sub03-list li:hover .hover-line span.hover-top {animation: borders-top .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub03 #sub03-wrap #sub03-list .hover-line span.hover-left {width: 4px; height: 0; top: 0; left: 0;}
#sub03 #sub03-wrap #sub03-list li:hover .hover-line span.hover-left {animation: borders-height .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub03 #sub03-wrap #sub03-list .hover-line span.hover-right {width: 4px; height: 0; bottom: 0; right: 0;}
#sub03 #sub03-wrap #sub03-list li:hover .hover-line span.hover-right {animation: borders-height .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub03 #sub03-wrap #sub03-list .hover-line span.hover-bottom {width: 0; height: 4px; bottom: 0; left: 0;}
#sub03 #sub03-wrap #sub03-list li:hover .hover-line span.hover-bottom {animation: borders-top .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub03 #sub03-wrap #sub03-list .sub03-img {border-bottom: 1px solid #eee; text-align: center; height: 370px; max-height: 370px; overflow: hidden; width: 100%; object-fit: cover;}
#sub03 #sub03-wrap #sub03-list .sub03-list-text {position: relative; padding: 10px;}
#sub03 #sub03-wrap #sub03-list .sub03-list-text p {display: block; font-weight: bold;}
#sub03 #sub03-wrap #sub03-list .sub03-list-text p span {position: absolute; display: inline-block; text-align: center; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px 10px 2px 10px; font-size: 12px; color: #fff; background-color: #06493d; border-radius: 60px;}

@media (min-width: 240px) and (max-width:768px) {
    #sub03 {margin: 50px auto;}
    #sub03 .innersize {width: 100%; padding: 0 20px;}
    #sub03 #sub03-textB .sub03-t1 {font-size: 12px;}
    #sub03 #sub03-textB .sub03-t2 {font-size: 26px;}
    #sub03 #sub03-wrap #sub03-list li {width: 49%; margin-right: 1%;}
    #sub03 #sub03-wrap #sub03-list .sub03-img {height: auto;}
    #sub03 #sub03-wrap #sub03-list .sub03-list-text p {font-size: 12px;}
    #sub03 #sub03-wrap #sub03-list .sub03-list-text p span {position: static; transform: none; text-align: center; width: 100%; margin-top: 10px;}
}
/* 프로그램 :E */

/* 이벤트 :S */
#sub04 {margin: 100px auto;}
#sub04 #sub04-textB {text-align: center; margin-bottom: 50px;}
#sub04 #sub04-textB .sub04-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub04 #sub04-textB .sub04-t2 {font-size: 32px; font-weight: bold;}
#sub04 #sub04-wrap #sub04-list {display: flex; flex-wrap: wrap;}
#sub04 #sub04-wrap #sub04-list li {background-color: #eee; width: 32%; margin-bottom: 20px; margin-right: 16px; cursor: pointer; position: relative;}
#sub04 #sub04-wrap #sub04-list .hover-line span {position: absolute; background-color: #06493d;}
#sub04 #sub04-wrap #sub04-list .hover-line span.hover-top {width: 0; height: 4px; top: 0; right: 0;}
#sub04 #sub04-wrap #sub04-list li:hover .hover-line span.hover-top {animation: borders-top .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub04 #sub04-wrap #sub04-list .hover-line span.hover-left {width: 4px; height: 0; top: 0; left: 0;}
#sub04 #sub04-wrap #sub04-list li:hover .hover-line span.hover-left {animation: borders-height .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub04 #sub04-wrap #sub04-list .hover-line span.hover-right {width: 4px; height: 0; bottom: 0; right: 0;}
#sub04 #sub04-wrap #sub04-list li:hover .hover-line span.hover-right {animation: borders-height .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub04 #sub04-wrap #sub04-list .hover-line span.hover-bottom {width: 0; height: 4px; bottom: 0; left: 0;}
#sub04 #sub04-wrap #sub04-list li:hover .hover-line span.hover-bottom {animation: borders-top .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1; animation-fill-mode: forwards;}
#sub04 #sub04-wrap #sub04-list .sub04-img {border-bottom: 1px solid #eee; text-align: center; height: 370px; max-height: 370px; overflow: hidden; width: 100%; object-fit: cover;}
#sub04 #sub04-wrap #sub04-list .sub04-list-text {position: relative; padding: 10px; text-align: center;}
#sub04 #sub04-wrap #sub04-list .sub04-list-text p {display: block; font-weight: bold;}
#sub04 #sub04-wrap #sub04-list .sub04-list-text p span {display: block; text-align: center; padding: 6px 10px 4px 10px; font-size: 12px; color: #fff; background-color: #06493d; border-radius: 60px; margin-top: 10px;}

@media (min-width: 240px) and (max-width:768px) {
    #sub04 {margin: 50px auto;}
    #sub04 .innersize {width: 100%; padding: 0 20px;}
    #sub04 #sub04-textB .sub04-t1 {font-size: 12px;}
    #sub04 #sub04-textB .sub04-t2 {font-size: 26px;}
    #sub04 #sub04-wrap #sub04-list li {width: 49%; margin-right: 1%;}
    #sub04 #sub04-wrap #sub04-list .sub04-img {height: auto;}
    #sub04 #sub04-wrap #sub04-list .sub04-list-text p {font-size: 12px;}
}
/* 이벤트 :E */

/* 공지사항 :S */
#sub05 {margin: 100px auto;}
#sub05 #sub05-textB {text-align: center; margin-bottom: 50px;}
#sub05 #sub05-textB .sub05-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub05 #sub05-textB .sub05-t2 {font-size: 32px; font-weight: bold;}
#sub05 #sub05-wrap table {border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; border-collapse: collapse; border-spacing: 0 5px; width: 100%; background-color: #fff; font-size: 14px;}
#sub05 #sub05-wrap thead > tr th {border-bottom: 1px solid #ececec; height: 40px;}
#sub05 #sub05-wrap tbody > tr {border-left: 2px solid transparent;}
#sub05 #sub05-wrap tbody > tr:hover {border-color: #253dbe;}
#sub05 #sub05-wrap tbody > tr:nth-child(even) {background-color: #fbfbfb;}
#sub05 #sub05-wrap tbody > tr td {color: #666; padding: 10px 5px; border-top: 1px solid #ecf0f1; border-bottom: 1px solid #ecf0f1; line-height: 1.4rem; height: 60px; word-break: break-all;}
#sub05 #sub05-wrap .table-num {width: 50px; text-align: center;}
#sub05 #sub05-wrap .table-tit .table-text a {font-weight: bold;}
#sub05 #sub05-wrap .table-see {width: 50px; text-align: center;}
#sub05 #sub05-wrap .table-date {width: 60px; text-align: center;}

@media (min-width: 240px) and (max-width:768px) {
    #sub05 {margin: 50px auto;}
    #sub05 .innersize {width: 100%; padding: 0 20px;}
    #sub05 #sub05-textB .sub05-t1 {font-size: 12px;}
    #sub05 #sub05-textB .sub05-t2 {font-size: 26px;}
    #sub05 #sub05-wrap table {font-size: 12px; line-height: 1.2rem;}
}
/* 공지사항 :E */

/* 제휴문의 :S */
#sub05-2 {margin: 100px auto;}
#sub05-2 #sub05a-textB {text-align: center; margin-bottom: 50px;}
#sub05-2 #sub05a-textB .sub05a-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub05-2 #sub05a-textB .sub05a-t2 {font-size: 32px; font-weight: bold;}

@media (min-width: 240px) and (max-width:768px) {
    #sub05-2 {margin: 50px auto;}
    #sub05-2 .innersize {width: 100%; padding: 0 20px;}
}
/* 제휴문의 :E */

/* 자주묻는 질문 :S */
#sub05-3 {margin: 100px auto;}
#sub05-3 #sub05c-textB {text-align: center; margin-bottom: 50px;}
#sub05-3 #sub05c-textB .sub05c-t1 {letter-spacing: 5px; opacity: 0.6; font-size: 13px; margin-bottom: 10px;}
#sub05-3 #sub05c-textB .sub05c-t2 {font-size: 32px; font-weight: bold;}
#sub05-3 #sub05c-srh {background-color: #f7f7f7; padding: 30px; text-align: center; margin: 10px auto;}
#sub05-3 #sub05c-srh form {display: flex; align-items: center; justify-content: center; gap: 5px;}
#sub05-3 #sub05c-srh input {border: 1px solid #d0d3db; width: 300px; height: 45px;}
#sub05-3 #sub05c-srh button {padding: 0 10px; height: 45px; width: 88px; font-size: 18px; font-weight: bold; color: #fff; background-color: #434a54; cursor: pointer; display: flex; align-items: center; gap: 5px; justify-content: center;}
#sub05-3 #sub05c-srh button::before {content: ''; clear: both; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(../img/searc.svg); display: block;}
#sub05-3 #sub05c-box li {position: relative; border-bottom: 1px solid #ececec; background-color: #fff; cursor: pointer;}
#sub05-3 #sub05c-box li:first-child {border-top: 1px solid #ececec;}
#sub05-3 #sub05c-box .sub05c-text {position: relative; text-align: left; min-height: 50px; line-height: 30px; padding: 15px; padding-left: 50px;}
#sub05-3 #sub05c-box .deco {display: inline-block; position: absolute; width: 30px; height: 30px; top: 15px; left: 15px; text-align: center; color: #fff; border-radius: 50%; line-height: 28px; background-color: #111;}
#sub05-3 #sub05c-box .sub05c-tit {font-weight: bold;}
#sub05-3 #sub05c-box .plus-btn {position: absolute; right: 15px; top: 15px; width: 30px; height: 30px;}
#sub05-3 #sub05c-box .plus-btn img {display: none; width: 100%; height: 100%; object-fit: contain;}
#sub05-3 #sub05c-box .answer-box {display: none; padding: 20px 5px 20px 50px; background-color: #fefefe; line-height: 2; color: #666;}
#sub05-3 #sub05c-box li .plus-icon {display: block;}
#sub05-3 #sub05c-box li.on .plus-icon {display: none;}
#sub05-3 #sub05c-box li.on .minus-icon {display: block;}

@media (min-width: 240px) and (max-width:768px) {
    #sub05-3 {margin: 50px auto;}
    #sub05-3 .innersize {width: 100%; padding: 0 20px;}
    #sub05-3 #sub05c-textB .sub05c-t1 {font-size: 12px;}
    #sub05-3 #sub05c-textB .sub05c-t2 {font-size: 26px;}
    #sub05-3 #sub05c-box .sub05c-tit {font-size: 14px;}
    #sub05-3 #sub05c-box .answer-box {font-size: 14px;}
    #sub05-3 #sub05c-srh {padding: 20px 10px;}
    #sub05-3 #sub05c-srh input {width: 60%;}
    #sub05-3 #sub05c-srh button {font-size: 14px;}
    #sub05-3 #sub05c-srh button::before {width: 14px; height: 14px;}
}
/* 자주묻는 질문 :E */

/* -------------------------------------------------------------------------------------- */
/* ---------------------------------------- subPage :E ---------------------------------- */
/* -------------------------------------------------------------------------------------- */

/* ft-banner :S */
#ft-banner {position: fixed; z-index: 100; right: 30px; bottom: 30px; display: flex; align-items: center; justify-content: center;}
#ft-banner .goTop {position: relative; width: 65px; height: 65px; border-radius: 50%; background-color: #000; opacity: 0.5; animation: updown 1s ease infinite; transition: all 0.3s ease; cursor: pointer;}
#ft-banner .goTop:hover {background-color: #06493d;}
#ft-banner .goTop img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); width: 30px; height: 30px;}
@keyframes updown {0% {transform: translateY(0);} 50% {transform: translateY(-10px);} 100% {transform: translateY(0);}}

@media (min-width: 240px) and (max-width:768px) {
	#ft-banner {right: 20px;}
    #ft-banner .goTop {width: 40px; height: 40px;}
    #ft-banner .goTop img {width: 20px; height: 20px;}
}
/* ft-banner :E */

/* footer :S */
#footer {padding: 50px 0; background-color: #272727;}
#footer #f-inner {position: relative; width: 1200px; margin: 0 auto; display: flex;}
#footer .f-logo {width: 180px; font-size: 26px; font-weight: bold; word-break: keep-all; color: #6a6a6a; }
#footer #address { width: 60%; margin-left: 50px;}
#footer #address li {display: inline-block; margin-right: 30px;}
#footer #address li a {color: #fff; font-size: 13px; font-weight: bold;}
#footer #address .address-detail {margin-top: 25px; color: #999; font-size: 12px; font-weight: 300; line-height: 1.4rem;}
#footer #sns {position: absolute; top: -7px; right: 0; display: flex;}
#footer #sns li {margin-left: 10px;}
#footer #sns li:first-child {margin-left: 0;}
#footer #sns a {display: block;}

@media (min-width: 240px) and (max-width:768px) {
    #footer {padding: 30px 20px;}
    #footer #f-inner {width: 100%; padding: 0px 0px; flex-direction: column;}
    #footer .f-logo {margin-bottom: 15px;}
    #footer #address {margin-left: 0; width: 100%;}
    #footer #address li {margin: 0 10px 5px 0;}
    #footer #address .address-detail {margin-top: 10px;}
    #footer #sns {position: static; margin-top: 15px;}
	.map_infor p {font-size:16px;}
}
/* footer :E */