/*공통*/

/*노멀라이징*/
html, body {overflow-x: hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing: antialiased;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,textarea {margin: 0;padding: 0;border: 0;font-size: 100%;font-family: 'NanumSquare', sans-serif;vertical-align: baseline;box-sizing: border-box;outline: none !important;word-break: keep-all;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;word-break: keep-all;}
body,html {line-height: 1;box-shadow: none;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size-adjust: auto;word-break: keep-all;}
ol, ul,li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}    
a {text-decoration: none;color: inherit;}
button {outline: 0;border: 0;cursor: pointer;box-shadow: none;}
button:hover p, button:hover span, button:hover {color: skyblue;transition: all 0.3s;}

/**/
section {overflow: hidden;}
.visual {width: 100vw;height: 36.4583vw;}
.contents {width: 62.5vw;height: 100%;margin: 0 auto;}


/*------------------------------------------------------------*/

/*헤더*/
header {width: 100vw;height: 5.2083vw;background: white;}
header .contents {width: 62.5vw;height: 100%;margin: 0 auto;padding-top: 1%;position: relative;}
header .contents h1.logo {width: 7.9167vw;float: left;}
header .contents h1.logo img {width: 7.9167vw;}
header .gnb {-webkit-appearance:none;display: -webkit-box;display: -ms-flexbox;width: 45.6771vw;height: 2.6042vw; display: flex;justify-content: space-around; /*가맹안내 추가시 space-between으로 변경*/color: #000;float: right;margin-top: 2%;}
header .gnb>li {flex: 1;display:-webkit-box-flex: 1;float: left;width: 10vw;height:2.6042vw;font-weight: bold;letter-spacing: -0.5px;font-size: 1.250em;position: relative;line-height: 3.3vw;}
header .gnb>li:nth-child(1)>a.over {border-bottom: 3px solid #d53d0d;}
header .gnb>li:nth-child(2)>a.over {border-bottom: 3px solid #62a2bc;}
header .gnb>li:nth-child(3)>a.over {border-bottom: 3px solid #f59d15;}
header .gnb>li:nth-child(4)>a.over {border-bottom: 3px solid #005892;}
header .gnb>li:nth-child(5)>a.over {border-bottom: 3px solid #71af2e;}
header .gnb ul.sub {width: 90%;position: absolute;top: 111%;line-height: 2vw;font-size: 0.8em;background: white;text-indent: 0.75em;z-index: 999;background: #f6f6f6;height: auto;}
header .gnb .sub li {border-bottom: 1px solid #eee;height: 50px; color: #606060;font-weight: 550;transform: skew(-0.1deg);line-height: 50px;}
header .gnb .sub li:last-child {border: 0;}
header .gnb .sub li.over {color: #2eb0dd;}
header .sns {width: 8.25vw;height: 1.7188vw;position: absolute;top: 0.5208vw;right: 1.0417vw;}
header .sns li {;width: 1.7188vw;height: 1.7188vw;background: #dcdcdc;border-radius: 5px;text-align: center;float: left;margin: 0 10px 0 0;}
header .sns li a img{opacity: 0.8;margin-top: 0.3646vw;height: 0.9896vw;}
header #btn_menu {display: block;width: 30px;height: 30px;background: transparent;position: absolute;z-index: 999;top: 0.8vw;right: 0.7813vw;text-align: center;padding: 0;display: none;}
header #btn_menu div {width: 30px;height: 4px;background: #444;margin: 6px 0;border-radius: 50px;transition: all 0.2s;}
header #btn_menu div:first-child {margin-top: 0;}
header #btn_menu div.click:first-child {transform: rotate(-45deg)translate(-3px,4px);}
header #btn_menu div.click:nth-child(2) {display: none;}
header #btn_menu div.click:last-child{transform:rotate(45deg)translate(-3px,-4px);}
header ul.mo_gnb {width: 60vw;height: 100vh;background: #fafafa;position: fixed;z-index: 99;right: -60vw;top: 6vw;}
header ul.mo_gnb>li {height: auto;width: 100%;border-bottom: 1px solid #eee;line-height: 5vw;text-indent: 2vw;font-weight: 600;font-size: 1.8vw;color: #333;transform: skew(-0.1deg);}
header ul.mo_gnb>li a {display: block;position: relative;}
header ul.mo_gnb>li img {width: 2.4772vw;display: inline-block;position: absolute;left: 90%;top: 30%;}
header ul.mo_sub {position: relative;font-size: 1.5vw;font-weight: 600;color:#444;}
header ul.mo_sub li {transform: skew(-0.1deg);}
header ul.mo_sns {position: relative;width: 60%;height: 6vw;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;border: 1px solid red;padding: 0.5vw 5vw;}
header ul.mo_sns li {float: left;width: 5vw;height: 5vw;margin-left: 1vw;}
header ul.mo_sns li img {height: 15px;}

/*푸터*/
footer {height: auto; background: #bababa;text-align: center;line-height: 1.25;padding: 1.5vw;font-size: 1.032em;}
footer p {display: block; margin-bottom: 1vw;}


/*작은 PC 브라우저*/
@media all and (min-width: 1025px) and (max-width: 1499px) {
    header ul.sub li {height: 40px; line-height:40px;}
    header ul.sns {position: absolute;}
    header ul.gnb {margin-top: 1.5%;}
    header ul.gnb>li {font-size: 1.050em;margin-bottom: 0.5rem;}
}
/*태블릿 가로 사이즈 -gnb 햄버거 메뉴로 변경*/
@media screen and (min-width:768px) and (max-width:1024px) {
    header {position: fixed; z-index: 999;height: 10vw;}
    header .contents {height: 10vw; width: 96vw !important;}
    header .contents h1.logo img {width: 15vw;top: 5vw;}
    header ul.gnb, ul.sns {display: none;}
    header #btn_menu {display: block; top:3.5vw;}
    header ul.mo_gnb {top: 10vw;}
    header ul.mo_gnb>li {line-height: 6.3vw; font-size: 19px;}
    header ul.mo_sub li {font-size: 16px;}
    footer {font-size: 14px;}
}
/*태블릿 세로, 모바일 가로 사이즈*/
@media screen and (min-width:480px) and (max-width:767px) {
    header {position: fixed; z-index: 999; height: 12vw;}
    header .contents {height: 12vw; width: 96vw !important; padding-top: 2%;}
    header .contents h1.logo img {width: 22vw;}
    header ul.gnb, ul.sns {display: none;}
    header ul.mo_gnb {top: 12vw;}
    header ul.mo_gnb>li {line-height: 6.3vw; font-size: 16px !important;}
    header ul.mo_sub li {font-size: 14px !important;}
    header #btn_menu {display: block;}
    .contents {width: 96vw !important;}
    header #btn_menu {width: 20px; height: 15px; top: 5vw;right: 0.5rem;}
    header #btn_menu div {width: 20px; height: 3px; margin: 3px 0}
    header #btn_menu div.click:first-child {transform: rotate(-45deg) translate(-1.5px,3px);}
    header #btn_menu div.click:nth-child(2) {display: none;}
    header #btn_menu div.click:last-child {transform: rotate(45deg) translate(-1.5px,-3px);}
    footer {font-size: 13px;}
}
/*모바일 세로 사이즈*/
@media screen and (max-width: 479px) {
    header {position: fixed; z-index: 999; height: 12vw;}
    header .contents {height: 12vw; width: 96vw !important; padding-top: 2%;}
    header .contents h1 {margin-left: 0.25rem;margin-top: -2px;}
    header .contents h1.logo img {width: 22vw;}
    header ul.gnb, ul.sns {display: none;}
    header ul.mo_gnb {top: 12vw;}
    header ul.mo_gnb>li {line-height: 10vw; font-size: 16px !important;}
    header ul.mo_sub li {font-size: 14px !important;}
    header #btn_menu {display: block;}
    .contents {width: 96vw !important;}
    header #btn_menu {width: 20px; height: 15px; top: 5vw;right: 0.5rem;}
    header #btn_menu div {width: 20px; height: 3px; margin: 3px 0}
    header #btn_menu div.click:first-child {transform: rotate(-45deg) translate(-1.5px,3px);}
    header #btn_menu div.click:nth-child(2) {display: none;}
    header #btn_menu div.click:last-child {transform: rotate(45deg) translate(-1.5px,-3px);}
    footer {font-size: 14px;}
}