@charset "utf-8";/* 320 모바일 ---------- */
#wrap { min-width: 320px; width: 100%; position: relative; overflow: hidden; }

/* 320 공통 */
.pc_ver { display: none; }
.inner { width: 100%; padding: 0 6.25vw; position: relative; }
h2 { display: none; }

/* 320 헤더 */
header.sub { background: transparent; }
header { width: 100%; height: 17.96875vw; position: fixed; top: 0; left: 0; z-index: 600; transition: all .3s; }
header.scOn { box-shadow: 0 0 10px rgba(0,0,0,.1); background: #fff; }
/* 320 로고 */
header .logo { padding-top: 6.25vw; }
header.sub .logo a { background-image: url(/asset/images/logo_w.svg); }
header .logo a,
header.scOn .logo a { display: block; text-indent: -9999px; width: 27.1875vw; height: 7.03125vw; background: url(/asset/images/logo.svg) no-repeat; }
/* 320 모바일 & 사이트맵 메뉴 */
header .snb { width: 60%; height: 100%; position: fixed; top: 0; right: -60%; background: #303030; padding: 18vw 6.25vw 0; z-index: 601; box-sizing: border-box; transition: all .3s; }
header .snb.on { right: 0; }
header .snb ul { }
header .snb li { margin-bottom: 6.25vw; }
header .snb li a { color: #fff; font-family: 'Titillium Web', sans-serif; font-weight: 600; font-size: 9.375vw; line-height: 1.2em; position: relative; }
header .snb li a::after { display: block; content: ""; width: 1.5625vw; height: 1.5625vw; background: #0071bb; position: absolute; bottom: 3.75vw; right: -3.125vw; }
/* 320 모바일 & 사이트맵 메뉴버튼 */
header .btn_menu { position: absolute; top: 4.0625vw; right: 4.53125vw; z-index: 602; }
header .btn_menu a { display: block; width: 9.375vw; height: 9.375vw; padding-top: 4.21875vw; }
header .btn_menu span { display: block; text-indent: -9999px; width: 5.9375vw; height: 0.78125vw; background: #303030; margin: 0 auto; position: relative; }
header.sub .btn_menu span { background: #fff; }
header.sub.scOn .btn_menu span,
header.scOn .btn_menu span { background: #303030; }
header .btn_menu.on span { background: transparent; }
header .btn_menu span::before,
header .btn_menu span::after { display: block; content: ""; width: 5.9375vw; height: 0.78125vw; background: #303030; position: absolute; left: 0; transition: all .3s; }
header.sub .btn_menu span::before,
header.sub .btn_menu span::after { background: #fff; }
header.scOn .btn_menu span::before,
header.scOn .btn_menu span::after { background: #303030; }
header .btn_menu.on span::before,
header .btn_menu.on span::after { background: #fff; }
header .btn_menu span::before { top: -2.1875vw; }
header .btn_menu span::after { bottom: -2.1875vw; }
header .btn_menu.on span::before { top: 0; transform: rotate(45deg); }
header .btn_menu.on span::after { bottom: 0; transform: rotate(135deg); }
/* 320 모바일 검정배경 */
header .bg_black { width: 100%; height: 100%; background: #000; opacity: .3; position: fixed; top: 0; left: 0; z-index: 600; display: none; }

/* 320 푸터 */
footer { text-align: center; background: linear-gradient(to bottom, #242424 62.25vw, #0071bb 0); width: 100%; color: #fff; }
/* 320 푸터로고 */
footer .flogo { padding-top: 8.296875vw; margin-bottom: 6.25vw; }
footer .flogo a { display: block; width: 29.21875vw; height: 12.65625vw; background: url(../images/flogo.svg) no-repeat; margin: 0 auto; text-indent: -9999px; }
/* 320 주소 */
footer address { font-size: 3.75vw; line-height: 1.2em; margin-bottom: 7.1288vw; }
footer address strong { font-weight: 300; display: block; margin-bottom: 1.875vw; }
footer address span:not(:last-child) { margin-right: 1.5625vw; }
footer address span:last-child { display: block; margin-top: 2vw; }
footer address i { color: #0071bb; font-weight: 500; }
/* 320 푸터메뉴 */
footer .fmenu { margin-bottom: 10vw; }
footer .fmenu ul { display: flex; justify-content: center; }
footer .fmenu li { position: relative; margin: 0 1.5625vw; }
footer .fmenu li:not(:last-child) { }
footer .fmenu li:not(:last-child)::after { display: block; content: "|"; color: #0071bb; position: absolute; top: 0; right: -2.1875vw; font-size: 3.75vw; }
footer .fmenu li a { color: #fff; font-size: 3.75vw; font-weight: 300; }
/* 320 카피라이트 */
footer .copy { font-family: 'Titillium Web', sans-serif; padding-bottom: 3.75vw; font-size: 3.75vw; }

/* 320 푸터 유닛 */
/* .hutill { position: fixed; bottom: 95px; right: 20px; z-index: 600; } 챗봇있을때 */
.hutill { position: fixed; bottom: 20px; right: 20px; z-index: 600; }
.hutill li { margin-top: 10px; transition: all .3s; }
.hutill li.you { margin-bottom: -70px; position: relative; z-index: 2; }
.hutill li.top { opacity: 0; }
.hutill.scOn li.you { margin-bottom: 0; }
.hutill.scOn li.top { opacity: 1; }
.hutill li a { display: block; background: #0071bb; width: 40px; height: 40px; border-radius: 50%; color: #fff; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,.5); transition: all .3s; }
.hutill li span { margin-top: 10px; font-size: 20px; }
.hutill li p { opacity: 0; transition: all .3s; }
.frogue-launcher { box-shadow: 0 0 10px rgba(0,0,0,.5); }

/* ---------- 320 모바일 끝 */

/* 768 태블릿 시작 ---------- */
@media screen and (min-width: 768px) { /* 768 헤더 */
 /* 768 모바일 메뉴 */
 header .snb { width: 48%; right: -48%; }
 header .snb li { margin-bottom: 4.25vw; }
 header .snb li a { font-size: 6.375vw; }

 /* 320 푸터 */
 footer { text-align: center; background: linear-gradient(to bottom, #242424 51.25vw, #0071bb 0); width: 100%; color: #fff; }
 /* 768 주소 */
 footer address { font-size: 2.75vw; }
 footer address span:last-child { display: inline; margin-top: 0; }
 /* 768 푸터메뉴 */
 footer .fmenu li a { font-size: 2.75vw; }
 footer .fmenu li:not(:last-child)::after { font-size: 2.75vw; }
 /* 768 카피라이트 */
 footer .copy { padding-bottom: 5vw; font-size: 2.75vw; }

 .hutill li a { width: 60px; height: 60px; }
 .hutill li span { margin-top: 15px; font-size: 30px; }
 }
/* ---------- 768 태블릿 끝 */

/* 1024 pc 시작 ---------- */
@media screen and (min-width: 1024px) { /* 1024 공통 */
 .pc_ver { display: block; }
 .mob_ver { display: none; }
 .inner { width: 1200px; padding: 0; margin: 0 auto; }

 /* 1024 헤더 */
 header,
 header.sub { height: 170px; transition: all .3s; }
 header.scOn { top: -65px; height: 170px; }
 /* 1024 로고 */
 header .logo { padding-top: 96px; }
 header.sub .logo a { background-image: url(/asset/images/logo_w.svg); }
 header .logo a,
 header.scOn .logo a { padding-top: 96px; width: 174px; height: 45px; }
 header.sub.scOn .logo a { background-image: url(/asset/images/logo.svg); }
 /* 1024 모바일 & 사이트맵 메뉴 */
 header .snb { width: 100%; right: 0; padding: 340px 0 0; top: -210%; }
 header .snb.on { top: 0; }
 header .snb ul { width: 172px; margin: 0 auto; }
 header .snb li { margin-bottom: 20px; }
 header .snb li a { font-size: 40px; }
 header .snb li a::after { width: 10px; height: 10px; bottom: 15px; right: -20px; transition: all .3s; }
 header .snb li:hover a::after { width: 30px; right: -40px; }
 /* 1024 모바일 & 사이트맵 메뉴버튼 */
 header .btn_menu { position: absolute; top: 108px; right: 0; }
 header .btn_menu a { width: 38px; height: 32px; padding-top: 13px; transition: all .3s; }
 header .btn_menu:hover a { padding-top: 0; }
 header .btn_menu span { width: 38px; height: 5px; transition: all .3s; position: absolute; top: 50%; left: 0; transform: translateY(-50%); margin: 0; }
 header.scOn .btn_menu:hover span,
 header .btn_menu:hover span { background: #0071bb; transform: rotate(90deg); left: -15px; width: 33px; top: 13px; }
 header .btn_menu span::before,
 header .btn_menu span::after { width: 38px; height: 5px; }
 header .btn_menu:hover span::before,
 header .btn_menu:hover span::after { background: #0071bb; width: 40px; }
 header .btn_menu span::before { top: -13px; }
 header .btn_menu span::after { bottom: -13px; }
 header .btn_menu:hover span::before { transform: rotate(-90deg); top: -18px; left: -18px; }
 header .btn_menu:hover span::after { transform: rotate(-90deg); bottom: 18px; left: 12px; }
 /* 1024 모바일 검정배경 */
 header .bg_black { width: 0; height: 0; }
 /* 1024 pc 메뉴 */
 header .gnb { position: absolute; top: 124px; left: 430px; }
 header .gnb ul { display: flex; }
 header .gnb li { margin-right: 46px; position: relative; }
 header .gnb li::after { display: block; content: ""; width: 5px; height: 5px; background: #0071bb; position: absolute; top: -5px; right: -10px; opacity: 0; transition: all .3s; }
 header .gnb li:hover::after { opacity: 1; }
 header.sub .gnb li.loca::after { background: #fff; }
 header .gnb li.loca::after,
 header.scOn .gnb li.loca::after { display: block; content: ""; width: 5px; height: 5px; background: #0071bb; position: absolute; top: -5px; right: -10px; transition: all .3s; opacity: 1; }
 header.sub .gnb li a { color: #fff; }
 header .gnb li a,
 header.scOn .gnb li a { font-family: 'Titillium Web', sans-serif; font-size: 23px; color: #303030; font-weight: 600; }

 /* 1024 푸터 */
 footer { background: linear-gradient(to bottom, #242424 330px, #0071bb 0); }
 /* 1024 푸터로고 */
 footer .flogo { padding-top: 52px; margin-bottom: 40px; }
 footer .flogo a { width: 218px; height: 81px; }
 /* 1024 주소 */
 footer address { font-size: 18px; margin-bottom: 46px; }
 footer address strong { margin-bottom: 12px; }
 footer address span:not(:last-child) { margin-right: 12px; }
 /* 1024 푸터메뉴 */
 footer .fmenu { margin-bottom: 64px; }
 footer .fmenu li { margin: 0 16px; }
 footer .fmenu li:not(:last-child)::after { right: -16px; font-size: 14px; }
 footer .fmenu li a { font-size: 14px; }
 /* 1024 카피라이트 */
 footer .copy { padding-bottom: 24px; font-size: 16px; }

 /* 1024 푸터 유닛 */
 .hutill li:hover a { height: 80px; border-radius: 30px; }
 .hutill li:hover p { opacity: 1; }
 }
/* ---------- 1024 pc 끝 */