@charset "utf-8"; 

:root { 
 --color-pink : #ea2449; 
 --color-purple: #3f55b6; 
 --point-font: 'Agro-m',sans-serif; 

 } 

html, body { font-size: 18px; letter-spacing: -0.038rem; line-height: 1.2; word-break: keep-all; word-wrap: break-word; color:#333; touch-action: auto; overscroll-behavior: auto; text-size-adjust:100%; overflow-x: hidden; scroll-behavior: smooth; font-family: 'Pretendard', sans-serif; } 

#skipNav { position: absolute; left: 0; top: 0; width: 100%; z-index: 999; } 
#skipNav a { display: block; height: 1px; margin-bottom: -1px; overflow: hidden; text-align: center; text-decoration: none; color: #fff; font-size: 16px; } 
#skipNav a:focus { display: block; height: 38px; padding: 10px 0 3px; background: none repeat scroll 0 0 #333; } 
.inner {margin: 0 auto;max-width: 1480px;} 
.br { display: block; } 
@media all and (max-width:1499px) { 
 .inner { margin: 0 30px; } 
 } 
@media all and (max-width:1199px) { 
 html, body { font-size: 16px; } 
 } 
@media all and (max-width:768px) { 
 html, body { font-size: 15px; } 
 .inner { margin: 0 20px; } 
 } 
@media all and (max-width:640px) { 
 .inner { margin: 0 15px; } 
 } 

/* ******************* *
* HEADER
* ******************* */
header { position: relative; z-index: 10; } 
header .top-btn { display: flex; align-items: center; } 
header .top-btn .shortcut { display: flex; align-items: center; font-size: 0.7778rem; color: #000; margin-right: 16px; } 
header .top-btn .shortcut::before { content: ''; display: block; width: 12px; height: 17px; background: url(/culture/resource/images/gamsa/layout/ico_shortcut.png); margin-right: 10px; } 
header .top-btn .shortcut::after { content: ''; display: block; width: 1px; height: 14px; background: #b6b6b6; margin-left: 16px; } 
.header-top { display: flex; padding: 44px 51px 12px; background: #fff; } 
.header-top .logo { position: relative; z-index: 2; } 
.header-top .logo a {display: block;background: url(/culture/resource/images/gamsa/layout/logo.png);width: 243px;height: 53px;} 
.search-frm { margin: 0 auto; position: relative; } 
.search-input { width: 530px; border: 2px solid var(--color-pink); height: 55px; border-radius: 50px; padding: 0 28px; color: #888; } 
.search-input::placeholder { color: #777; } 
.search-btn { background: url(/culture/resource/images/gamsa/layout/ico_search.png)no-repeat; width: 27px; height: 26px; border: none; position: absolute; right: 28px; top: 0px; bottom: 0; margin: auto; } 
.header-nav,
.header-nav .nav,
.header-nav .nav-a1 { height: 62px; } 
.header-nav { background: transparent; border-bottom: 1px solid transparent; transition: 0.3s ease; } 
.header-nav .inner { display: flex; align-items: center; } 
.header-nav .nav-wrap { position: relative; background: #fff; overflow: hidden; } 
.header-nav .nav { display: flex; width: 100%; } 
.header-nav .depth1 { z-index: 2; position: relative; width: 100%; } 
.header-nav .depth1 > ul { display: flex; justify-content: center; } 
.header-nav .depth1 > ul li {position: relative;z-index: 1;font-family: 'Agro-m',sans-serif;width: 25%;} 
.header-nav .nav-a1 {display: flex;align-items: center;font-size: 1.2778rem;font-weight: 500;position: relative;justify-content: center;/* padding: 0 120px; */width: 100%;} 
.header-nav .nav-a1.type2 {padding: 0 83px}
.header-nav .nav-a1::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3px; background-color: var(--color-pink); margin: 0 auto; transition: all .1s; opacity: 0; visibility: hidden; } 
.header-nav .nav-a1.over::after { opacity: 1; visibility: visible; } 
.header-nav .depth2 { display: none; position: absolute; width: 100%; left: 0; top: 62px; padding: 20px 0; border-right: 1px solid #b6b6b6; } 
.header-nav .depth2.active { display: block; } 
.header-nav .depth2 ul,
.header-nav .depth2 ul li {width: 100%}
.header-nav .nav-a2 {display: block;text-align: center;padding: 15px 0;transition: all .2s;color: #191919;width: 100%;} 
.header-nav .nav-a2:hover,
.header-nav .nav-a2:focus { color: var(--color-pink); } 
.header-nav .nav-btn { margin: auto 0 auto auto; } 
[class*='nav-m'] { display: none; } 
.nav-btn-wrap { display: flex; align-items: center; position: absolute; right: 48px; top: 0; height: 62px; } 
.nav-btn-wrap a { display: block; } 
.nav-btn-wrap .login {background: url(/culture/resource/images/gamsa/layout/ico_login.png);margin-right: 19px;width: 38px;height: 36px;color: #333;font-size: 12px;background-repeat: no-repeat;font-weight: bold;padding-top: 27px;background-position-x: center;background-size: 18px;text-align: center;} 
.nav-btn-wrap .logout {background: url(/culture/resource/images/gamsa/layout/ico_logout.png);margin-right: 19px;width: 40px;height: 36px;color: #333;font-size: 12px;background-repeat: no-repeat;font-weight: bold;padding-top: 27px;background-position-x: center;background-size: 18px;text-align: center;} 
.nav-btn-wrap .sitemap {background: url(/culture/resource/images/gamsa/layout/ico_sitemap.png);width: 36px;height: 27px;margin: 0;} 
.nav-m-open { background: url(/culture/resource/images/gamsa/layout/ico_menu_b.svg); width: 32px; height: 32px; background-size: cover; border: none; } 
.nav-m-close { position: absolute; background: url(/culture/resource/images/gamsa/layout/ico_close.svg); width: 20px; height: 20px; background-size: cover; border: none; top: 3%; right: 20px; } 
.nav-m-top { padding: 20px 30px; } 
.nav-m-logo .logo a,
.nav-m-top .logo a {display: block;background: url(/culture/resource/images/gamsa/layout/logo.png);width: 175px;height: 35px;background-size: cover;} 
.nav-bg { background: #fff; position: absolute; height: calc(100% - 62px); width: 100%; bottom: 0; left: 0; overflow: hidden; transition: all .3s; z-index: 1; } 
.header-nav.active .nav-bg { border-top: 1px solid #b6b6b6; } 
.header-mask { display: none; position: fixed; top: 0; left: 0; background: rgb(0, 0, 0, .5); z-index: -1; width: 100%; height: 100%; opacity: 0; visibility: hidden; } 
.header-mask.show { display: block; opacity: 1; visibility: visible; } 

.translated-ltr .header-nav .nav-a1 {padding: 0 66px}

.share-list-wrap {position: relative;margin-right: 5px;} 
.sns-open {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background: none;overflow: hidden;border: 1px solid #b6b6b6;border-radius: 5px;} 
.sns-open::before {content: '';display: block;width: 100%;height: 100%;background: url(/culture/resource/images/gamsa/layout/ico_sns.png) no-repeat center;} 
.share-list { display: none; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; } 
.share-list ul {display: flex;align-items: center;height: 100%;padding-right: 45px;} 
.share-list li { margin: 0 5px; } 
.share-list li > button { display: block; width: 36px; height: 36px; border: none; border-radius: 5px; } 
.share-list li .btn-fb { background: #01549d url(/culture/resource/images/gamsa/layout/ico_facebook.png) no-repeat center / contain; } 
.share-list li .btn-twt { background: #000 url(/culture/resource/images/gamsa/layout/ico_x.png) no-repeat center / contain; } 
.share-list li .btn-band { background: #41cd8e url(/culture/resource/images/gamsa/layout/ico_band.png) no-repeat center / contain; } 
.share-list li .btn-blog { background: #21c407 url(/culture/resource/images/gamsa/layout/ico_blog.png) no-repeat center / contain; } 
.share-list .sns-close { width: 40px; height: 40px; background-image: url(/culture/resource/images/gamsa/layout/ico_close.svg); background-size: 23px; background-repeat: no-repeat; background-position: center; border: 1px solid #b6b6b6; background-color: #fff; } 
.goog-te-gadget-simple {height: 42px;border-radius: 5px;padding: 10px;line-height: 35px;} 

@media all and (max-width: 1800px) { 
 .nav-btn-wrap { position: static; } 
 } 
@media all and (max-width: 1399px) { 
 .header-nav .nav-a1 {font-size: 1.2rem;} 
 .header-top { padding: 44px 30px 12px; } 
 } 

@media all and (max-width: 1199px) { 
 header {transition: all .3s;background: #fff;} 
 header.fixed {position: fixed;width: 100%;border-bottom: 1px solid var(--color-pink);background: #fff;} 
 .header-top { display: none; } 
 .header-nav .nav-wrap { background: none; } 
 .header-nav { padding: 10px 0; } 
 .header-nav,
 .header-nav .nav-a1 { height: auto; } 
 .header-nav .nav { height: 100%; display: none; } 
 .header-nav .nav.open { z-index: 99; } 
 .header-nav .depth1 { width: 100%; margin-top: 0px; order: 3; overflow: auto; } 
 .header-nav .depth1 > ul { display: block; } 
 .header-nav .depth1 > ul li {width: 100%;}
 .header-nav .nav-a1 {justify-content: flex-start;color: #191919;font-weight: 500;margin: 10px 15px 0;padding: 15px;position: relative;transition: 0.3s ease;border-bottom: 1px solid #b6b6b6;font-size: 1.2rem;width: initial;} 
 .header-nav li:not(.has-sub) .nav-a1::after { opacity: 1; visibility: visible; border-width: 2px; border-style: solid; border-color: transparent var(--color-pink) var(--color-pink) transparent; background-color: transparent; width: 6px; height: 6px; transform: rotate(-45deg); left: inherit; top: 0; bottom: 0; margin: auto; right: 30px; } 
 .header-nav .has-sub .nav-a1::before,
 .header-nav .has-sub .nav-a1::after { content: ''; display: block; position: absolute; top: 0; right: 30px; left: inherit; bottom: 0; margin: auto; transition: .35s; width: 2px; height: 12px; background: var(--color-pink); opacity: 1; visibility: visible; } 
 .header-nav .has-sub .nav-a1::after { transform: rotate(90deg); } 
 .header-nav .nav-a1.over::before { display: none; } 
 .header-nav .depth2 { position: static; padding: 20px 20px 10px; width: auto; margin: -10px 30px 0; border-right: none; } 
 .header-nav .has-sub .depth2 > ul { transition: 0.3s ease; overflow: hidden; opacity: 0; visibility: hidden; } 
 .header-nav .has-sub.open .depth2 > ul { opacity: 1; visibility: visible; } 
 .header-nav .nav-a2 { text-align: left; padding: 10px 0; color: #6b6b6b; } 
 [class*='nav-m'] { display: block; } 
 .nav-m-top {padding: 18px 0 5px;} 
 .nav-m-top .logo a {margin: 0 10px 14px;} 
 .nav-m-open {margin-right: auto;}
 .nav { display: none; position: fixed; width: 100%; height: 100%; max-width: 500px; overflow: hidden; top: 0; left: 0; background: #fff; transform: translateX(-100%); transition: .35s; flex-direction: column; } 
 .nav.open { display: flex; transform: translateX(0); } 
 .nav-btn { display: none; } 
 .search-frm {display: block;width: 100%;max-width: 500px;padding: 30px 15px 30px;background: var(--color-pink);} 
 .search-frm form { position: relative; width: 100%; } 
 .search-input { width: 100%; height: 44px; } 
 .search-btn-close { display: none; } 
 .header-mask.show { z-index: 0; } 
 .nav-m-logo { margin: 0 auto; } 
 .nav-m-top .logo { width: fit-content; padding: 0; } 
 .nav-m-top .top-btn { display: flex; justify-content: center; background: var(--color-pink); margin: 0 0 0 -30px; text-align: center; width: calc(63.1% + 42px); height: 43px; } 
 .nav-m-top .top-btn > * { width: 50%; padding: 12px 0; color: #fff; border-right: 1px solid #fff; } 
 .nav-m-top .top-btn .shortcut { border-right: 1px solid #fff; align-items: center; justify-content: center; color: #fff; margin-right: 0; } 
 .nav-m-top .top-btn .shortcut::after { display: none; } 
 .nav-btn-wrap {display: flex;align-items: center;justify-content: center;height: auto;border: 1px solid var(--color-pink);margin: 10px 15px;border-radius: 5px;box-shadow: 0 0 3px #ea244959;} 
 .nav-btn-wrap .blind { position: static; text-indent: 0; font-size: 1rem; overflow: visible; width: auto; height: auto; z-index: 0; } 
.nav-btn-wrap a { display: block; } 
.nav-btn-wrap .login,
.nav-btn-wrap .logout {width: 42%;height: 20px;text-align: center;background: #fff;display: flex;align-items: center;justify-content: center;border-right: 1px solid var(--color-pink);margin: 10px 15px 10px 0;font-size: 1rem;padding-top: 0;font-weight: inherit;} 
.nav-btn-wrap .sitemap {width: 42%;height: 20px;text-align: center;display: flex;align-items: center;justify-content: center;background: #fff;margin: 10px 0;} 
 .nav-bg { display: none; } 
 .nav-m-btn { display: flex;align-items: center;}
 .share-list-wrap {margin-right: 3px;}
 .share-list ul {padding-right: 45px;}
 .share-list li {margin: 0 3px}
 .sns-open,
 .share-list li > button,
 .share-list .sns-close {width: 35px; height: 35px}
 .goog-te-gadget-simple {padding: 10px 3px;height: 38px;line-height: 31px;}
 } 

@media all and (max-width: 640px) { 
 .nav-m-logo .logo a, .nav-m-top .logo a {width: 137px;background-size: contain;height: 29px;} 
 .share-list ul {padding-right: 35px;}
 .sns-open {background: #fff}
  .sns-open,
  .share-list li > button,
  .share-list .sns-close {width: 30px;height: 30px;}
  .goog-te-gadget-simple {padding: 10px 3px;height: 32px;line-height: 25px;}
 } 
@media all and (max-width: 480px) {
  header {background: transparent; margin-bottom: -48px} 
 .header-nav .inner {flex-wrap: wrap}
 .nav-m-open {margin-right: 0}
 .nav-m-btn {width: 100%;justify-content: flex-end;margin-top: 10px;padding-top: 5px}
  header.fixed .nav-m-btn {border-top: 1px solid #e6e6e6}
}




/* sub */
.sub-visual { position: relative; height: 400px; } 
.sub-visual .inner { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; } 
.sub-tit {font-size: 2.5556rem;color: #fff;font-family: 'Agro-m', sans-serif;text-align: center;margin-top: auto;font-weight: normal;} 
.sub-container .sub-tit{color: #323239;font-size: 2.2rem;}
.sub-desc{text-align: center;font-size: 1.1111rem;color: #222;}
.location { color: #fff; margin-top: 20px; display: flex; align-items: center; } 
.location a { display: flex; align-items: center; color: #fff; } 
.location a::after { content: '>'; display: block; color: #fff; margin: 0 10px; } 
.location a:last-of-type::after { display: none; } 
.location img { vertical-align:middle; padding-bottom: 4px; margin-right: 2px; margin-right:8px; margin-left:8px } 
.location span.current { color: #999; } 
.sub-tab {background: var(--color-pink);border-radius: 30px 30px 0 0;max-width: 1400px;min-width: 1400px;padding: 1px 78px;height: 83px;margin-top: auto;position: relative;} 
.sub-tab::after { content: ''; display: block; background: url(/culture/resource/images/gamsa/layout/sub_tab_deco.png) no-repeat bottom; width: 160px; height: 82px; position: absolute; right: -37px; bottom: 0; background-size: 102px; } 
.sub-tab ul { display: flex; height: 100%; align-items: center; flex-wrap: wrap; justify-content: center; } 
.sub-tab ul li { display: flex; justify-content: center; } 
.sub-tab ul li:first-child:nth-last-child(2),
.sub-tab ul li:first-child:nth-last-child(2) ~ li { width: 50%; } 
.sub-tab ul li:first-child:nth-last-child(3),
.sub-tab ul li:first-child:nth-last-child(3) ~ li { width: 33.33%; } 
.sub-tab ul li:first-child:nth-last-child(4),
.sub-tab ul li:first-child:nth-last-child(4) ~ li { width: 25%; } 
.sub-tab ul li:first-child:nth-last-child(5),
.sub-tab ul li:first-child:nth-last-child(5) ~ li { width: 20%; } 
.sub-tab ul li:first-child:nth-last-child(6),
.sub-tab ul li:first-child:nth-last-child(6) ~ li { width: 16.66%; } 
.sub-tab ul li:first-child:nth-last-child(7),
.sub-tab ul li:first-child:nth-last-child(7) ~ li { width: 14%; } 
.sub-tab ul a { font-family: 'Agro-m', sans-serif; color: #fff; font-size: 1.13rem; padding: 10px 20px 7px; text-align: center; } 
.sub-tab ul a:hover,
.sub-tab ul a:focus {text-decoration: underline;}
.sub-tab ul a.active { color: var(--color-pink); background: #fff; border-radius: 30px; padding: 7px 20px 4px; } 
.sub-container { margin-top: 100px; padding: 0 0 70px; } 

@media all and (max-width: 1399px) { 
 .sub-visual .inner {width: auto;margin: 0;} 
 .sub-tab { padding: 0px 80px; min-width: 100%; } 
 .sub-tab::after { display: none; } 
 } 
@media all and (max-width: 1024px) { 
 .sub-tab { padding: 10px 30px; height: fit-content; } 
 .sub-tab ul a { padding: 10px 20px 7px; } 
 .sub-tab::after { display: none; } 
 } 
@media all and (max-width: 768px) { 
 .sub-visual { height: 300px; } 
 .sub-tit {font-size: 2rem}
 .sub-tab { padding: 10px 20px; } 
 .sub-tab ul a {font-size: 1rem;padding: 5px 8px 2px;} 
 .sub-tab ul a.active {padding: 5px 8px 2px;}
 .sub-container { margin-bottom: 60px; margin-top: 70px; } 
 .sub-container .sub-tit {font-size: 1.5rem;}
 .location { margin-top: 6px; } 
 } 
@media all and (max-width: 640px) { 
 .sub-tab {padding: 13px 10px;margin: auto -7px 0;} 
 .sub-tab ul li:first-child:nth-last-child(5),
 .sub-tab ul li:first-child:nth-last-child(5) ~ li,
 .sub-tab ul li:first-child:nth-last-child(6),
 .sub-tab ul li:first-child:nth-last-child(6) ~ li,
 .sub-tab ul li:first-child:nth-last-child(7),
 .sub-tab ul li:first-child:nth-last-child(7) ~ li { width: 20%; } 
 } 

/* ******************* *
* FOOTER
* ******************* */
footer { background-color: #444; padding: 55px 0 140px; } 
footer .btn-top { display: flex; align-items: center; justify-content: center; background: #161616; color: #fff; border-radius: 50%; font-weight: 500; letter-spacing: 0; width: 70px; height: 70px; opacity: .7; position: fixed; bottom: -100%; right: 30px; transition: bottom .5s; z-index: 20; } 
footer .btn-top.over { bottom: 30px; } 
footer .inner { display: flex; justify-content: space-between; align-items: center; } 
.f-cont {display: grid;column-gap: 30px}
.f-cont .top { display: flex; margin-bottom: 55px; grid-column: 1} 
.f-cont .top a::after { content: ''; display: block; width: 1px; height: 13px; background: #909090; margin-left: 20px; } 
.f-cont .top a { display: flex; align-items: center; color: #fff; font-size: 0.8889rem; margin-right: 20px; } 
.f-cont .top li:last-child a { margin-right: 0; } 
.f-cont .top li:last-child a::after { display: none; } 
.f-info { font-size: 0.7778rem; color: #909090; grid-column: 1} 
.f-info ul li a { display: block; font-size: .889rem; background: #262626; border: 1px solid #c0c0c0; padding: 5px 21px; color: #c0c0c0; } 
.f-info address { margin-bottom: 4px; } 
.f-qr {grid-column: 2;grid-row: 1 / span 2;}
@media all and (max-width: 1199px) { 
 footer { padding: 30px 0; } 
 footer .inner { flex-direction: column-reverse; } 
 .f-logo { align-self: flex-end; } 
 .f-cont {align-self: flex-start;width: 100%;grid-auto-columns: auto 50px;} 
 .f-cont .top { margin-bottom: 30px; flex-wrap: wrap; } 
 .f-cont .top a { margin-bottom: 5px; } 
 } 

@media all and (max-width: 640px) { 
 footer { padding: 30px 0 10px; } 
 .f-logo { width: 30%; margin-top: 30px; } 
 .f-qr {width: 50px;}
 }