@charset "UTF-8";
/* Author: Sinjiny / Create: 2019.01.01
/*==================================================================
* Root
==================================================================*/
:root { 
    background-color: white; 

    /* Width */
    --maxWidth: 800px; 
    
    /* Line Height */
    --lineHeight: 1.4;

    /* Color */
    /* --defaultFc: #414042; */
    --defaultFc: #000; 
    --blue: #03267C; 
    --red: #CD2225; 
    --yellow: #FDB940;     
    --green: #4CAC17;     
    --dark: #1D2436;
    --orange: #F8420A;

    --lGray: #DBDEDF; 
    --nGray: #B7BDC2;
    --wGray: #F2F2F2;
    --gray: #525252;

    /* Radial */
    --boxEdge: 10px;
    --btnEdge: 7px;
    --btnRound: 50px;

    /* Effect */
    --speedy: cubic-bezier(0.21, 0.92, 0.56, 1.22);
}



/*==================================================================
* Reset
==================================================================*/
* { margin: 0; padding: 0; font-family: inherit; font-size: 100%; border: 0; outline: 0; box-sizing: border-box; -webkit-text-size-adjust: none; -webkit-touch-callout: none; -webkit-tap-highlight-color:  rgba(255,255,255,0); }
ul, ol { list-style: none; }
legend { display: none; }
img { max-width: 100%; user-select: none; }
q:before { content: ""; }
q:after { content: ""; }
i,
em { font-style: normal; }

button { background: transparent; cursor: pointer; }

::placeholder { font-size: 0.95em; color: rgba(0,0,0,0.4); font-weight: normal !important; }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
select { padding-left: 10px; border: 1px solid var(--nGray); border-radius: var(--btnEdge); appearance: none; -webkit-appearance: none; }
select { padding-right: 50px; width: auto; background-color: white; background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, var(--lGray), var(--lGray)); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; }
select.mini { padding-right: 35px; height: 30px; background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, var(--lGray), var(--lGray)); background-position: calc(100% - 13px) calc(0.7em + 1px), calc(100% - 8px) calc(0.7em + 1px), calc(100% - 1.8em) 0.2em; }

input[type="number"] { -webkit-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Checkbox, Radio */
input[type="radio"],
input[type="checkbox"] { display: none; }
input[type="radio"] + label,
input[type="checkbox"] + label { display: inline-block; margin-right: 25px; padding-left: 25px; cursor: pointer; position: relative; }
input[type="radio"] + label:before,
input[type="checkbox"] + label:before,
input[type="radio"] + label:after,
input[type="checkbox"] + label:after { content: ""; margin: auto; box-sizing: border-box; position: absolute; left: 0; top: 0; bottom: 0; transition: all 150ms ease-in-out; }
input[type="radio"] + label:before,
input[type="checkbox"] + label:before { width: 20px; height: 20px; background: white; border: 1px solid var(--nGray); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2); }
input[type="radio"] + label:after,
input[type="checkbox"] + label:after { width: 12px; height: 12px; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); left: 4px; }

input[type="radio"] + label:before,
input[type="radio"] + label:after { border-radius: 50%; }
input[type="radio"]:checked + label:after { background: var(--blue); }

input[type="checkbox"] + label:before { border-radius: 2px; }
input[type="checkbox"]:checked + label:after { width: 8px; border: 2px solid var(--blue); border-top: 0; border-left: 0; left: 7px; bottom: 4px; transform: rotate(45deg); }

textarea { padding: 10px; border: 1px solid var(--nGray); border-radius: var(--btnEdge); resize: none; }

.switch { display: inline-block; font-size: 0; border: 1px solid var(--nGray); border-radius: 15px; overflow: hidden; }
.switch input[type="checkbox"] + label { margin: 0; width: 55px; height: 30px; }
.switch input[type="checkbox"] + label:before { width: 26px; height: 26px; background: radial-gradient(circle at center, var(--wGray), white); border: 0; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.4); left: 2px; z-index: 1; }
.switch input[type="checkbox"] + label:after { content: "OFF"; padding: 0 10px; width: 100%; height: 100%; font-size: 10px; color: rgba(0,0,0,0.5); text-align: right; line-height: 30px; background-color: var(--lGray); border: 0; left: 0; bottom: auto; }
.switch input[type="checkbox"]:checked + label:before { left: 33px; }
.switch input[type="checkbox"]:checked + label:after { content: "ON"; color: white; text-align: left; background-color: var(--blue); transform: none; }



/*==================================================================
* Default
==================================================================*/
html { height: 100%; }
body { min-width: 320px; height: 100%; }
body { font-family:  sans-serif;  color: black; line-height: 1; } 

a { color: inherit; text-decoration: none; }

.section { margin: 0 auto; max-width: 1230px; }

/* Button */
.btnArea { text-align: center; }
.btn { display: inline-block; padding: 0 15px; height: 40px; font-size: 1em; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.2); border-radius: var(--btnRound); }
.btn.blue { color: white; background: var(--blue); }
.btn.yellow { color: white; background: var(--yellow); }
.btn.red { color: white; background: var(--red); }
.btn.green { color: white; background: var(--green); }
.btn.gray { color: white; background: var(--nGray); }
.btn.dark { color: white; background: var(--dark); }


/*==================================================================
* Header
==================================================================*/
#header { width: 100%; position: fixed; left: 0; top: 0; z-index: 100; transition: top 150ms linear; }
#header .section { display: flex; padding: 0 15px; max-width: 100%; color: white; position: relative; }
#header.sub .section { color: #5A5A5A; background: none; }
#header:not(.sub) .section { background-color: rgba(1,21,74,0.85); }
#header h1 { width: 140px; }
#header h1 a { display: block; height: 50px; font-size: 0; background: url("../images/homepage/logo/aceqr_white2.svg") no-repeat left 50%; }
#header .menu { display: flex; flex: 1; align-items: center; }
#header .menu > button { display: none; width: 50px; height: 50px; font-size: 0; position: absolute; top: 0; right: 0; z-index: 100; overflow: hidden; }
#header .menu > button:before,
#header .menu > button:after,
#header .menu > button span { margin: auto; background-color: #FFF; border-radius: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; transition: all 300ms ease-in-out; }
#header .menu > button:before,
#header .menu > button:after { content: ""; }
#header .menu > button span { display: inline-block; width: 90%; height: 1px; left: 200%; overflow: hidden; }
#header .menu > button:before,
#header .menu > button:after { width: 50%; height: 2px; top: 0; bottom: 0; transform: rotate(45deg); }
#header .menu > button:after { transform: rotate(-45deg); }
#header .menu > button.off:before,
#header .menu > button.off:after,
#header .menu > button.off span { width: 23px; height: 3px; transform: rotate(0deg); }
#header .menu > button.off:before { top: -16px; }
#header .menu > button.off:after { bottom: -16px; }
#header .menu > button.off span { left: 0; }

#header .nav { flex: 1; text-align: right; }
#header .nav > ul { display: inline-flex; }
#header .nav > ul li + li { margin-left: 50px; }
#header .language { display: none; padding: 5px 10px; width: 110px; text-align: center; background-color: rgba(0,0,0,0.5); border: 1px solid white; border-radius: 5px; position: absolute; top: 12px; right: 15px; }
#header .language > p { font-size: 15px; font-weight: bold; cursor: pointer; }
#header .language ul { display: none; }
#header .language ul li { margin-top: 10px; }
#header .language ul li button { font-size: 14px; color: inherit; }

#header.sub .menu > button:before,
#header.sub .menu > button:after,
#header.sub .menu > button span { background-color: var(--blue); }

#header.sub:before { content: ""; width: 100%; height: 0; background-color: rgba(255,255,255,0.95); border-bottom: 1px solid rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; transition: height 100ms linear; }
#header.sub h1 a { background-image: url("../images/homepage/logo/aceqr2.svg"); }
#header.sub .menu .nav li a { color: #5A5A5A; }
#header.sub .menu .nav li a.active { font-weight: bold; color: var(--blue); }
#header .language { background-color: transparent; border-color: rgba(0,0,0,0.3); }
#header.sub.moveScroll:before { height: 100%; }
#header.sub.moveScroll .language { background-color: rgba(255,255,255,0.7); }

#header.hide { top: -60px; }

.floatingMenu { --iconSize: 55px; position: fixed; bottom: 1em; right: 1em; z-index: 50; }
.floatingMenu p { position: relative; z-index: 10; }
.floatingMenu button { width: var(--iconSize); height: var(--iconSize); font-size: 0; background: var(--blue); border: 1px solid white; border-radius: 50%; position: relative; }
.floatingMenu button:before,
.floatingMenu button:after { content: ""; margin: auto; width: 50%; height: 2px; background-color: white; position: absolute; top: 0; right: 0; bottom: 0 ;left: 0; }
.floatingMenu button:after { transform: rotate(90deg); }
.floatingMenu ul li { opacity: 0; position: absolute; bottom: 0; right: 0; }
.floatingMenu a { display: inline-flex; justify-content: flex-end; align-items: center; font-size: 0.9em; white-space: nowrap; position: relative; }
.floatingMenu a:after { content: ""; display: inline-block; margin-left: 0.25em; width: var(--iconSize); height: var(--iconSize); border: 1px solid var(--nGray); border-radius: 50%; transform: scale(0) rotate(0deg); }
.floatingMenu a span { display: block; padding: 0.5em 1em; color: white; background-color: var(--blue); border-radius: var(--btnRound); transform: scaleY(0) rotateY(0deg); }
.floatingMenu a.qr-introduce:after { background: white url("../images/homepage/icons/ico-download-02.png") no-repeat center 50%; }
.floatingMenu a.company-introduce:after { background: white url("../images/homepage/icons/ico-download-01.png") no-repeat center 50%; }
.floatingMenu a.homepage-go:after { background: white url("../images/homepage/icons/ico-home.png") no-repeat center 50%; }

#header:not(.sub) .floatingMenu button { background-color: white; border-color: var(--blue); }
#header:not(.sub) .floatingMenu button:before,
#header:not(.sub) .floatingMenu button:after { background-color: var(--blue); }

.floatingMenu *,
.floatingMenu :after { transition: all 300ms cubic-bezier(0.37,-0.13, 0.56, 1.4); }
.floatingMenu.active ul,
.floatingMenu.active ul li { width: initial; }
.floatingMenu.active p button { transform: rotate(225deg); }
.floatingMenu.active ul li { opacity: 1; bottom: calc(var(--iconSize) + 1em); }
.floatingMenu.active ul li a:after { transform: scale(1) rotate(360deg); }
.floatingMenu.active ul li:nth-child(2) { bottom: calc((var(--iconSize) * 2) + 2em); }
.floatingMenu.active ul li:nth-child(3) { bottom: calc((var(--iconSize) * 3) + 3em); }
.floatingMenu.active a span { transform: scaleY(1) ; transition-delay: 150ms; }


.floatingMenu:not(.active) p:after { content: ""; margin: 0 auto; width: 50%; height: 3px; background-color: rgba(0,0,0,0.5); border-radius: 50%; filter: blur(3px); position: absolute; right: 0; bottom: -3px; left: 0; }
.floatingMenu:not(.active) { animation: floatingMotion 1s alternate infinite; }
.floatingMenu:not(.active) p:after { animation: floatingShadow 1s alternate infinite; }

@keyframes floatingMotion {    
  0% { transform: translateY(0) scaleY(0.7) rotateY(360deg); }
  30% { transform: translateY(-0.8em) scaleY(1) rotateY(0deg); }
  100% { transform: translateY(-2em) scaleY(1) rotateY(360deg); }
}
@keyframes floatingShadow {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  80% { opacity: 0.5; transform: scale(0) translateY(0.8em); }
  100% { opacity: 0; transform: scale(0) translateY(2em); }
}

/*==================================================================
* Visual
==================================================================*/
#visual { height: 100%; background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative; overflow: hidden; }
#visual .section { display: flex; flex-direction: column; justify-content: center; height: calc(100%); text-align: left; position: relative; z-index: 1; overflow: hidden; }

#visual .message { padding-left: 120px; font-size: 2.65em; font-weight: bold; color: var(--blue); line-height: 1.2; position: relative; z-index: 10; }
#visual .message p:first-child { margin-bottom: 5px; font-size: 0.7em; font-weight: normal; }

#visual .message p { height: 1.3em; overflow: hidden; }
#visual .message p:before { content: ""; display: block; height: 100%; line-height: 0; overflow: hidden; animation: messageMotion 1s ease forwards; }
#visual .message p:nth-child(1):before { animation-delay: 300ms; }
#visual .message p:nth-child(2):before { animation-delay: 600ms; }
#visual .message p:nth-child(3):before { animation-delay: 900ms; }
@keyframes messageMotion {
    0% { height: 100%; }    
    100% { height: 0; }    
}

#visual.main { background-image: url("../images/homepage/visual/main.jpg"); background-attachment: fixed; }
#visual.main .message { color: white; }
#visual.main .message p:nth-child(2) { color: #0F54F9; }
#visual.main .btnArea { margin-top: 65px; position: relative; }
#visual.main .btnArea a { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; font-weight: bold; color: #0F54F9; background-color: white; border: 1p solid transparent; border-radius: 50%; transition: all 150ms linear; }
#visual.main .btnArea p:nth-child(1) { position: absolute; left: 5%; top: 100px; }
#visual.main .btnArea p:nth-child(2) { position: absolute; left: 30%; }
#visual.main .btnArea p:nth-child(3) { position: absolute; left: 53%; top: 120px; }

#visual.main .btnArea p { opacity: 0.3; transform: scale(0) translate3d(-200em,-100em,0); animation: mainBtn 600ms linear forwards; }
#visual.main .btnArea p:nth-child(1) { animation-delay: 1.4s; }
#visual.main .btnArea p:nth-child(2) { animation-delay: 1.7s; }
#visual.main .btnArea p:nth-child(3) { animation-delay: 2s; }
@keyframes mainBtn {
    0% { opacity: 0.3; transform: scale(0) translate3d(-200em,-100em,0); }
    80% { opacity: 0.8; transform: scale(0.5) translate3d(50em,10em,0); }
    100% { opacity: 1; transform: scale(1) translate3d(0,0,0); }
}
#visual.main .btnArea a:hover { color: white; background-color: #0F54F9; transform: scale(1.2); }

#visual.certification { background: #E4F3FB url("../images/homepage/visual/cert.jpg") no-repeat center calc(50% + 35px);  }
#visual.labelDesign { background: #F1ECFC;  }
#visual.logis { background: #F1EFED url("../images/homepage/visual/logis.jpg") no-repeat center calc(50% + 35px);  }
#visual.customer { height: 420px; background: #F6F6F6 url("../images/homepage/visual/customer.jpg") no-repeat center 115%;  }
#visual.company { height: 420px; background: #F6F6F6 url("../images/homepage/visual/company.jpg") no-repeat 65% bottom;  }

#visual .slideCont { margin: auto; width: 650px; height: 650px; background-color: white; border-radius: 50%; position: absolute; left: 0; top: 35px; right: 0; bottom: 0; overflow: hidden; }
#visual .slideCont:before { content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,0.005); position: absolute; left: 0; top: 0; z-index: 10; }
#visual .slideCont .slick-list { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
#visual .slideCont .slick-track { display: flex; }
#visual .slideCont .slick-track:before, 
#visual .slideCont .slick-track:after { display: none; }
#visual .slideCont .slick-slide { float: none; }
#visual .slideCont p { display: inline-flex; justify-content: center; align-items: center; height: 650px; background-color: white; border-radius: 50%; overflow: hidden; }
#visual .slideCont p img { display: initial; max-width: 75%; }

#visual.main { height: 100vh; }
#visual.main .message { padding: 0; text-align: center; z-index: 100;  }
#visual.main .message p { height: initial; font-size: 0; position: relative; overflow: hidden; }
#visual.main .message p:nth-child(1) { height: 120px; background: url("../images/homepage/visual/main-script-01.png") no-repeat center 50%; background-size: auto 100%; }
#visual.main .message p:nth-child(2) { margin-top: -15px; height: 50px; background: url("../images/homepage/visual/main-script-02.png") no-repeat center 30vh; background-size: auto 80%; }

#visual .video { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; bottom: 0; right: 0; }
#visual iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
#visual.main + #contents,
#visual.main + #footer { display: none; }

#visual.main .video + .message { display: none; }
#visual.main .video.typo + .message { display: block; }

#visual.main .video.typo + .message p:nth-child(1) { animation: mainScale 600ms var(--speedy) forwards; }
#visual.main .video.typo + .message p:nth-child(2) { animation: scriptTwo 1s ease forwards 300ms; }

#visual.main .video.typo.return + .message p:nth-child(1) { transform: translateY(-12vh); animation: videoOut 1s alternate forwards; }
#visual.main .video.typo.return + .message p:nth-child(2) { transform: translateY(-12vh); animation: videoOut 1s alternate forwards; }
#visual.main .video.typo.return iframe { animation: videoOut 2.5s alternate forwards; }

@keyframes mainScale {
    0% { transform: scale(0) translateY(0); }
    100% { transform: scale(1) translateY(-12vh); }
}

@keyframes scriptTwo {
    0% { background-position: center 50vh; transform: translateY(0); }
    100% { background-position: center 50%; transform: translateY(-12vh); }    
}


.video.playCtr:before { content: ""; width: 100vw; height: 100vh; background: url("../images/homepage/visual/main.jpg") no-repeat center top fixed; background-size: cover; position: absolute; left: 0; top: 0; z-index: 100; }
.video.playCtr iframe { z-index: -1; }

.video:not(.playCtr) iframe { animation: videoIn 3s linear forwards; }

@keyframes videoIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes videoOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* 유투브 Iframe Display none API 호출 못함 */
/* .video:not(.playCtr):not(.end) iframe { opacity: 1; }
 */

@media (min-aspect-ratio: 16/9) {
    #visual .video { height: 350%; top: -125%; }
}
@media (max-aspect-ratio: 16/9) {
    #visual .video { width: 350%; left: -125%; }
}

.svgArea { display: flex; justify-content: center; align-items: center; margin: auto; padding-top: 50px; width: 95%; height: 100%; opacity: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; overflow: hidden; transition: opacity 600ms linear; }
.svgArea.action { opacity: 1;  }
.svgArea svg { flex: 1; visibility: hidden; width: 45%; height: 100%; position: absolute; top: 0; left: 0; transition: all 600ms ease-in-out; shape-rendering: geometricPrecision; }
.svgArea svg.active { width: 45%; visibility: visible; }

.svgArea svg#main_svg { width: 30%; left: 5%; }
.svgArea svg#main_svg_3 { width: 50%; }
.svgArea svg#main_svg_star { margin: auto; width: 60px; height: 60px; bottom: 0; opacity: 0; transition-property: transform; transition-duration: 1s; }

.svgArea svg#main_svg path { transition: fill 600ms ease-in-out; }


/*==================================================================
* Contents
==================================================================*/
#visual.certification + #contents .contBox:first-child { background-color: #F7FCFD; }
#visual.labelDesign + #contents .contBox:first-child { background-color: #FAF7FB; }
#visual.logis + #contents .contBox:first-child { background-color: #FBF8F7; }

/* Content Box */
.contBox { padding: 90px 0; text-align: center; }
.contBox h2 { margin-bottom: 40px; font-size: 2.5em; color: var(--blue); }
.contBox .img img { margin-bottom: 40px; width: 130px; }
.contBox .section > .txt { padding: 0 1.5em; line-height: 1.4; }
.contBox .section > .txt p:first-child { margin-bottom: 15px; }
.contBox .section > .txt p:last-child { margin-top: 15px; }
.contBox strong { font-size: 1.2em; }
.contBox .icoBox { display: flex; justify-content: center; margin: 50px auto 0; padding: 2em; max-width: 905px; text-align: center; border: 1px solid var(--dark); border-radius: var(--boxEdge); position: relative; }
.contBox .icoBox li { flex: 1; font-weight: bold; color: var(--blue); line-height: 1.2; }
.contBox .icoBox li:before { display: block; }
.contBox .icoBox:before { content: attr(data-title); margin: 0 auto; padding: 0.5em 0; max-width: 35%; font-size: 1.1em; color: white; background-color: var(--blue); border-radius: var(--boxEdge); position: absolute; top: -1em; right: 0; left: 0; }

.contBox .icoBox.cert li:nth-child(1):before { content: url("../images/homepage/content/cert-01.png"); }
.contBox .icoBox.cert li:nth-child(2):before { content: url("../images/homepage/content/cert-02.png"); }
.contBox .icoBox.cert li:nth-child(3):before { content: url("../images/homepage/content/cert-03.png"); }
.contBox .icoBox.cert li:nth-child(4):before { content: url("../images/homepage/content/cert-04.png"); }

.contBox .icoBox.hardware li:nth-child(1):before { content: url("../images/homepage/content/hardware-01.png"); }
.contBox .icoBox.hardware li:nth-child(2):before { content: url("../images/homepage/content/hardware-02.png"); }
.contBox .icoBox.hardware li:nth-child(3):before { content: url("../images/homepage/content/hardware-03.png"); }

.contBox .icoBox.labelDesign li:nth-child(1):before { content: url("../images/homepage/content/label-01.png"); }
.contBox .icoBox.labelDesign li:nth-child(2):before { content: url("../images/homepage/content/label-02.png"); }
.contBox .icoBox.labelDesign li:nth-child(3):before { content: url("../images/homepage/content/label-03.png"); }
.contBox .icoBox.labelDesign li:nth-child(4):before { content: url("../images/homepage/content/label-04.png"); }

.contBox .icoBox.logis li:nth-child(1):before { content: url("../images/homepage/content/logis-01.png"); }
.contBox .icoBox.logis li:nth-child(2):before { content: url("../images/homepage/content/logis-02.png"); }
.contBox .icoBox.logis li:nth-child(3):before { content: url("../images/homepage/content/logis-03.png"); }
.contBox .icoBox.logis li:nth-child(4):before { content: url("../images/homepage/content/logis-04.png"); }

.contBox .toonBox { display: flex; align-items: flex-end; flex-wrap: wrap; margin: -10px auto; overflow: hidden; }
.contBox .toonBox p { display: flex; justify-content: center; flex: 0 0 auto; flex-grow: 1; margin: 15px 0; max-width: 100%; }
.contBox .toonBox + h2 { margin-top: 50px }
 
.contBox .imgBox.process img { max-width: 50%; }

.contBox .imgBox.grid { display: flex; flex-wrap: wrap; margin: -10px auto; max-width: 1000px; }
.contBox .imgBox.grid p { flex: 0 0 auto; margin: 10px; width: calc((100% / 3) - 20px); }

.exBox { margin-top: 50px; color: var(--blue); }
.exBox > p:nth-child(1) { font-size: 1.3em; }
.exBox > p:nth-child(2) { margin-top: 10px; font-size: 1.6em; font-weight: bold; }
.exBox .qrContent { margin: 20px auto 0; padding: 30px 0; max-width: 1170px; position: relative; }
.exBox .qrContent .balloon { margin: auto 0; position: absolute; left: 7%; top: -15%; bottom: 0; }
.exBox .qrContent .qrData { margin: 0 auto; width: 306px; height: 275px; background: url("../images/homepage/content/qr-label.png") no-repeat center 50%; position: relative; left: -20px; }
.exBox .qrContent .qrData .qrImg { display: flex; justify-content: center; align-items: center; margin: auto; width: 150px; height: 150px; position: absolute; left: 43px; top: 25px; right: 0; bottom: 0; z-index: 10; overflow: hidden; }
.exBox .qrContent .qrData .qrImg img { position: relative; z-index: 100; }
.exBox .qrContent .qrData span { margin: 0 auto; font-size: 1.1em; font-weight: bold; color: black; position: absolute; left: 43px; bottom: 20px; right: 0; user-select: none; }


/* Tab */
.tabCont { background-color: #F6F6F6; }
.tab { display: inline-flex; justify-content: center; align-content: center; background-color: white; border: 2px solid var(--blue); border-radius: 50px; position: sticky; position: -webkit-sticky; top: 55px; z-index: 10; overflow: hidden; }
.tab button { padding: 0 10px; min-width: 215px; height: 40px; color: var(--blue); text-align: center; border: 0; }
.tab button.active { color: white; background-color: var(--blue); }
.tabItm { display: none; margin-top: 30px; line-height: 1.4; background-color: inherit; }
.tabItm.active { display: block; }
.tabItm > .txt { padding: 0 1.5em; }
.tabItm > .info { margin-top: 50px; }

.contBox.tabCont .section + .section { margin-top: 90px; }

.tabItm .gridCont { display: flex; flex-wrap: wrap; margin: 20px auto -10px; max-width: 905px; counter-reset: typeNum; }
.tabItm .gridCont > * { flex: 0 0 auto; margin: 10px; width: calc((100% / 2) - 20px); background-color: white; }
.tabItm .gridCont h3 { padding: 10px; font-size: 0.9em; }
.tabItm .gridCont .script { padding: 15px; font-size: 0.9em; line-height: 1.4; }
.tabItm .gridCont .imgBox + .script { border-top: 2px solid #F6F6F6; }

.tabItm .gridCont .type h3 { color: var(--blue); background-color: #E4F3FB; position: relative; }
.tabItm .gridCont .type h3:before { content: counter(typeNum); counter-increment: typeNum; margin: auto 0; width: 25px; height: 25px; font-size: 1.2em; font-weight: bold; text-align: center; line-height: 25px; border: 2px solid var(--blue); border-radius: 3px; position: absolute; left: 10px; top: 0; bottom: 0; }
.tabItm .gridCont .type .imgBox { padding: 25px 20px 20px; }

.tabItm .gridCont .itmBox h3 { color: white; background-color: #AAA; }

.tabItm iframe { width: 560px; height: 315px; }

.tab.fix { display: flex; margin: 0 -15px; padding: 3px 5px; background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.1); border-top: 0; border-radius: 0 0 15px 15px; box-shadow: 0 0 1em rgba(0,0,0,0.3); top: 50px; }
.tab.fix button { border-radius: 50px; transform: scale(0.9); }


/* Category */
.category { display: inline-flex; align-items: center; margin-bottom: 30px; }
.category button { height: 30px; color: #5A5A5A; }
.category button.active { font-weight: bold; color: var(--blue); }
.category button + button { margin-left: 2em; }


/* 실시간 상담 신청 작성 */
.conBox.requestBox { padding: 90px 0; background: #eaeaea; }
[class*="request"] h2 { margin-bottom: 1.5em; font-size: 2.5em; color: black; letter-spacing: -2px; }
.request-form { margin: 0 auto; padding: 0 50px; max-width: 700px; text-align: center; }
.request-form fieldset > *:not(legend) + * { margin-top: 1em;}
.request-form input[type="text"],
.request-form input[type="tel"] { padding-left: 1.3em; height: 80px; }
.request-form input[type="text"],
.request-form input[type="tel"],
.request-form [contenteditable] { width: 100%; font-size: 17px; color: #999394; text-align: left; background-color: white; border-radius: 0.3em; border: 1px solid #eaeaea; }
.request-form [contenteditable] { padding: 1.4em 1.3em; min-height: 200px; line-height: 1.4; }
.request-form [contenteditable]:empty:before { content: attr(placeholder); color: #BEBEBE; }

.request-form .apply { margin-top: 2em; color: #999394; }
.request-form .apply p:first-child { --agreeSize : 25px; }
.request-form .apply p:first-child label { display: inline-flex; align-items: center; padding-left: calc(var(--agreeSize) + 10px); height: var(--agreeSize); position: relative; }
.request-form .apply p:first-child label:before { content: ""; display: inline-block; width: var(--agreeSize); height: var(--agreeSize); background-color: #fff; border: 1px solid white; border: 1px solid #999394; border-radius: 5px; position: absolute; top: 0; left: 0; }
.request-form .apply p:first-child input:checked + label:after { content: ""; width: 8px; height: 16px; border: 3px solid #7e7a7a; border-left: 0; border-top: 0; position: absolute; bottom: 0.4em; left: 0.5em; transform: rotate(45deg);}
.request-form .apply p:first-child button { height: var(--agreeSize); font-weight: bold; color: #999394; }
.request-form .apply > * + * { margin-top: 2.5em; }
.request-form .apply button.counsel { width: 350px; height: 95px; line-height: 95px; font-size: 25px; color: white; background-color: #03257b; border-radius: 95px; }

.request-form input[type="radio"] + label:after, 
.request-form input[type="checkbox"] + label:after { width: 0; height: 0; box-shadow: none; left: 0; }
.request-form input[type="radio"] + label,
.request-form input[type="checkbox"] + label { margin-right: 0; }

/*==================================================================
* Loading
==================================================================*/
.loading { margin: 1.5em auto; width: 30px; height: 30px; position: relative; }
.loading:before,
.loading:after { content: ""; margin: auto; width: 0; height: 0; border: 5px solid var(--blue); border-radius: 50%; opacity: 1; position: absolute; left: -100%; top: -100%; right: -100%; bottom: -100%; animation: loading 1s infinite; }
.loading:after { animation-delay: -0.5s; }  

@keyframes loading {
    0% { width: 0; height: 0; opacity: 1; transform: scale(1); }    
    100% { width: 100%; height: 100%; border-width: 1px; opacity: 0; transform: scale(1.2); }
}

.dataLoader { display: inline-block; margin-top: 1em; position: relative; width: 25px; height: 25px; }
.dataLoader:before,
.dataLoader:after { content: ""; }
.dataLoader:before,
.dataLoader:after,
.dataLoader span { display: inline-block; margin: auto 0; width: 4px; background: var(--blue); position: absolute; top: 0; bottom: 0; animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}
.dataLoader:before { left: 0; animation-delay: -0.24s; }
.dataLoader span { left: 8px; animation-delay: -0.12s; }
.dataLoader:after { left: 16px; animation-delay: 0; }
  @keyframes lds-facebook {
    0% { height: 100%; }
    50%, 100% { height: 50%; }
  }

/*==================================================================
* Form
==================================================================*/
.form fieldset { padding: 1em; background-color: white; border-radius: var(--boxEdge); }
.form .label { display: inline-block; width: 150px; }
.form fieldset > *:not(legend) { display: flex; align-items: center; position: relative; }
.form fieldset > *:not(legend) + * { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); }
.form fieldset .label { padding-left: 45px; line-height: 40px; opacity: 0.6; position: relative; }
.form fieldset .label:before { content: ""; width: 40px; height: 100%; background-repeat: no-repeat; background-position: center 50%; background-size: 50%; position: absolute; left: 0; top: 0; }
.form fieldset .label.title:before { background-image: url("../images/homepage/icons/title.png"); }
.form fieldset .label.content:before { background-image: url("../images/homepage/icons/content.png"); }
.form fieldset .label.author:before { background-image: url("../images/homepage/icons/author.png"); }
.form fieldset .label.password:before { background-image: url("../images/homepage/icons/password.png"); }
.form fieldset .label.secret:before { background-image: url("../images/homepage/icons/secret.png"); }
.form input[type="text"],
.form input[type="password"] { height: 40px; }
.form input[type="text"],
.form input[type="password"],
.form .textarea { width: calc(100% - 150px); color: black; white-space: pre; background-color: var(--wGray); border: 0; }
.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form .textarea:focus { border: 1px solid var(--blue); }
.form .textarea { padding: 10px; min-height: 80px; word-break: break-all; line-height: 1.4; border-radius: var(--btnEdge); position: relative; }
.form .textarea:empty:before { content: attr(placeholder); font-size: 0.95em; color: rgba(0,0,0,0.4); }
.form .textarea  + textarea { display: none; }
.form .switch + i { display: none; margin-left: 1em; font-size: 0.9em; color: var(--red); line-height: 30px; }
.form .switch input[type="checkbox"] + label{ width: 80px; }
.form .switch input[type="checkbox"] + label:after { content: attr(data-false); font-size: 12px; }
.form .switch input[type="checkbox"]:checked + label:before { left: 52px; }
.form .switch input[type="checkbox"]:checked + label:after { content: attr(data-true); }


/*==================================================================
* Board
==================================================================*/
.search { display: inline-block; margin: 0 auto 30px; padding-right: 35px; max-width: 280px; border-bottom: 1px solid rgba(0,0,0,0.5); position: relative; }
.search * { vertical-align: middle; }
.search input { width: 100%; height: 30px; font-weight: bold; border: 0; border-radius: 0; }
.search button { width: 30px; height: 30px; font-size: 0; background: url("../images/homepage/icons/search.png") no-repeat center 50%; background-size: 75%; position: absolute; top: 0; right: 0; }
.search + .btn { margin-left: 1em; }

/* Board List */
.bbsList { margin: 0 auto; max-width: 1100px; }
.bbsList ul { display: flex; flex-wrap: wrap; align-items: center; margin: -10px -10px 0; padding-bottom: 100px; }
.bbsList li { flex: 0 0 auto; margin: 10px; width: calc((100% / 4) - 20px); background-color: white; border: 1px solid var(--nGray); box-shadow: 10px 10px 10px rgba(0,0,0,0.1), 3px 3px 5px -3px rgba(0,0,0,0.1); position: relative; overflow: hidden; transition-property: box-shadow, width; transition-duration: 300ms, 150ms; }
.bbsList li a,
.bbsList li button { width: 100%; height: 100%; font-size: 0; position: absolute; left: 0; top: 0; z-index: 1; }
.bbsList li .conBox { padding: 45px 10px 15px; text-align: left; position: relative; }
.bbsList li .image { margin: -45px -10px 0; height: 180px; position: relative; overflow: hidden; }
.bbsList li .image img { margin: auto; max-width: 180%; max-height: 150%; position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; transition: all 300ms linear; }
.bbsList li .title { margin-bottom: 10px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; line-height: 25px; overflow: hidden; }
.bbsList li .info { font-size: 0.9em; color: var(--dark); }
.bbsList li .info > *:first-child { text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; overflow: hidden; }
.bbsList li .info > .date { margin-top: 5px; font-size: 0.9em; opacity: 0.5; }
.bbsList li .info.secret:before { content: ""; width: 60px; height: 60px; background: url("../images/homepage/icons/lock.png") no-repeat center 50%; background-size: 80%; opacity: 0.35; position: absolute; right: -10px; bottom: -5px; }
.bbsList li .status { padding: 0 0 0 25px; width: 100%; font-size: 1.1em; color: var(--orange); line-height: 35px; border-bottom: 1px solid var(--lGray); position: absolute; left: 0; top: 0; }
.bbsList li .status:before { content: ""; margin: auto 0; width: 5px; height: 5px; background-color: var(--orange); border-radius: 50%; position: absolute; left: 10px; top: 0; bottom: 0; }
.bbsList li .status.complete { color: var(--blue); }
.bbsList li .status.complete:before { background-color: var(--blue); }
.bbsList li .image + .title { margin-top: 40px; }
.bbsList li .cat { padding: 0 0 0 25px; width: 100%; font-size: 1.1em; color: var(--blue); line-height: 35px; border-bottom: 1px solid var(--lGray); position: absolute; left: 0; top: 0; }
.bbsList li .cat:before { content: ""; margin: auto 0; width: 5px; height: 5px; background-color: var(--blue); border-radius: 50%; position: absolute; left: 10px; top: 0; bottom: 0; }

.bbsList li { transform: translateZ(0); animation: listMotion 300ms linear forwards; }

.bbsList li:nth-child(odd) { animation-delay: 100ms; }
.bbsList li:nth-child(even) { animation-delay: 150ms; }

@keyframes listMotion {
    0% { transform: translateY(10px); }
    65% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
.bbsList li:hover { border-color: rgba(0,0,0,0.5); box-shadow: none; transform: scale(0.2); }
.bbsList li:hover .image img { transform: scale(1.2); }

/* Board Write & view */
.bbsWrite,
.bbsView { margin: 0 auto; max-width: 800px; text-align: left; }
.bbsWrite .form,
.bbsView .form { border: 1px solid #DDD; }
.bbsWrite .btnArea,
.bbsView .btnArea { padding: 2em 0; }
.bbsWrite .btnArea .btn,
.bbsView .btnArea .btn { min-width: 100px; }

/* View */
.bbsView { overflow: hidden; }
.bbsView .info { display: flex; }
.bbsView .info > * + * { margin-left: 1em; }
.bbsView .info + .conBox ,
.bbsView .conBox + .info { border-top: 1px solid var(--lGray); }
.bbsView .title { margin-bottom: 0.5em; font-size: 1.2em; font-weight: bold; }
.bbsView .txt { font-size: 1em; line-height: 1.4; white-space: pre-line; }
.bbsView .question { background-color: white; border: 1px solid rgba(0,0,0,0.2); }
.bbsView .viewCont > *,
.bbsView .question > *,
.bbsView .answer > * { padding: 1em; }
.bbsView .answer { margin-top: 1em; background-color: #F6F6F6; border: 1px solid rgba(0,0,0,0.2); }
.bbsView .answer .info { justify-content: flex-end;  }

.bbsView .viewCont { border: 1px solid rgba(0,0,0,0.2); }
.bbsView .viewCont .cat { font-weight: bold; }

/* Icon */
.ico { display: inline-block; width: 30px; height: 30px; font-size: 0; background-repeat: no-repeat; background-position: center 50%; background-size: 60%; overflow: hidden; }
.ico[data-type="modify"] { background-image: url("../images/homepage/icons/pen.png"); }
.ico[data-type="delete"] { background-image: url("../images/homepage/icons/trash.png"); }


/*==================================================================
* Popup
==================================================================*/
.dim { width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); position: absolute; left: 0; top: 0; z-index: 0; }
.popup { display: none; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 1em; text-align: center; position: fixed; left: 0; top: 0; z-index: 1000; }
.popup .popSection { padding: 15px; width: 300px; background-color: white; border: 1px solid var(--dark); border-radius: var(--boxEdge); box-shadow: 15px 15px 30px rgba(0,0,0,0.3); position: relative; z-index: 1; overflow: hidden; }
.popup .popSection .title { margin: -15px -15px 15px; padding: 10px 15px; font-size: 1.1em; font-weight: bold; color: white; background-color: var(--dark);  }
.popup .popSection input { width: 100%; height: 40px; text-align: center; }
.popup .popSection .warning { margin-top: 10px; color: var(--red); }
.popup .message { padding: 0.5em; font-size: 1.1em; line-height: 1.4; white-space: pre; }
.popup .btnSection { margin-top: 15px; }
.popup .btnSection .btn { min-width: 100px; }

.popup .popSection { transform: translateY(100%); animation: popMotion 300ms alternate forwards; }


/* Request Popup */
.popup.psnInfo { display: none; justify-content: center; align-items: center; padding: 2em; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; backdrop-filter: blur(10px); }
.popup.psnInfo .inner { padding: 2em 1em; max-width: 960px; background-color: #F3F3F3; border: 1px solid #d2d2d2; border-radius: 0.8em; position: relative; }
.popup.psnInfo .inner .title { font-size: 1em; font-weight: 600; text-align: center; }
.popup.psnInfo .inner .content { margin-top: 1.5em; padding: 1em; max-height: 70vh; text-align: left; font-size: 14px; white-space: pre-line; line-height: 1.4; background-color: #ffffff; border: 1px solid #e8e8e8; border-radius: 0.8em; overflow: hidden; overflow-y: auto; }
.popup.psnInfo .close { position: absolute; top: 1em; right: 1em; }
.popup.psnInfo .close button { width: 30px; height: 30px; font-size: 0; position: relative; }
.popup.psnInfo .close button:before,
.popup.psnInfo .close button:after { content: ""; margin: auto; width: 70%; height: 3px; background-color: #102648; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: rotate(45deg); }
.popup.psnInfo .close button:after { transform: rotate(-45deg); }
.popup.psnInfo.active { display: inline-flex; }
.popup.psnInfo .content::-webkit-scrollbar { display: none; }


@keyframes popMotion {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

.popup.active { display: flex; }


/*==================================================================
* List Table
==================================================================*/
.listContents { min-height: 100%; background: linear-gradient(45deg, #333, #121212); }
.listTableArea { margin: 0 auto; padding: 50px; max-width: 1440px; width: 100%; }
.listTable { margin-bottom: 1rem; width: 100%; color: #212529; border-collapse: collapse; }
    
.listTable,
.listTable * { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.2); }

.listTable tr { text-align: left; }
.listTable td,
.listTable th { padding: .9rem; vertical-align: top; border-top: 1px solid #dee2e6; }


/*==================================================================
* Footer
==================================================================*/
#footer { font-size: 0.8em; color: white; background-color: var(--gray); }
#footer .section { display: flex; justify-content: center; align-items: center; padding: 40px 0; }
#footer .section ul { display: flex; }
#footer .section > * + * { margin-left: 40px; }
#footer .section ul li + li { margin-left: 15px; }
#footer .section h6 { width: 110px; text-align: center; }
#footer .section h6 img:first-child { filter: brightness(0) invert(1); }
#footer .section h6 img + img { margin-top: 0.5em; max-width: 80%; }
#footer .section .siteInfo > * + * { margin-top: 7px; }
#footer .section .siteInfo p span { display: inline-block; margin-left: 10px; padding-left: 10px; position: relative; }
#footer .section .siteInfo p span:before { content: ""; width: 2px; height: 80%; background: #4ED0F1; position: absolute; top: 0; bottom: 0; left: 0; }
#footer .section > :last-child { font-size: 0.8em; text-transform: uppercase; opacity: 0.6; }
#footer .section .siteInfo strong { color: #4ED0F1; }



/*==================================================================
* Media Query
==================================================================*/
@media only screen and (max-width: 1366px){
    body { font-size: 15px; }

    .bbsList li { width: calc((100% / 3) - 20px); }
}

@media only screen and (max-width: 1280px){
    .section { padding: 0 15px; }
    
    .contBox .toonBox p { padding: 0 1em; }

    .exBox .qrContent { padding: 0; }
    .exBox .qrContent .balloon { position: static; transform: scale(0.65); }
    .exBox .qrContent .qrData { margin-top: -7vh; left: -10px; transform: scale(0.65); }
}

@media only screen and (max-width: 1023px){
    #header .section { display: block; color: #5A5A5A; }
    #header h1 { width: 120px; }
    #header .menu { display: block; position: absolute; top: 0; right: 0; z-index: 100; }
    #header .menu button { display: block; }
    #header .menu .nav { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; width: 100%; height: calc(100% - 50px); background-color: rgba(255,255,255,0.95); position: fixed; left: 0; top: 50px; overflow: hidden; overflow-y: auto; transform: translateX(100%); transition: transform 300ms linear; }
    #header .menu .nav > ul { display: block; text-align: center; }
    #header .menu .nav > ul li + li { margin: 25px 0 0; }
    #header .menu .nav > ul a { font-size: 0.95em; }
    #header .menu .nav > ul a.active { font-size: 1.2em; }
    #header .menu .nav .language { margin-top: 30px; padding: 15px; width: 85%; position: static; }
    #header .menu .nav .language ul { display: flex; flex-wrap: wrap; margin-top: 20px; }    
    #header .menu .nav .language ul li { flex: 0 0 auto; width: calc(100% / 2); }
    #header .menu .nav .language ul li button { width: 100%; text-align: center; }
    #header .menu button:not(.off) + .nav { transform: translateX(0); }

    #visual .message { padding-left: 15px; }
    .svgArea svg { width: 60%; }    
    
    .contBox .toonBox,
    .contBox .toonBox p { display: block; margin: 0; }
    .contBox .toonBox p { padding: 1em 0; }
}

@media only screen and (max-width: 768px){
   
    #visual .message { font-size: 1.8em; }
    #visual .message p { height: 1.25em; }
    
    .video.playCtr:before { background-position: calc(100% - 40%) 50%; }
    #visual.main .video.return:after { content: ""; width: 95%; height: 100%; background: linear-gradient(90deg, rgba(0,6,30,1), rgba(2,28,81,0.4), transparent); position: absolute; left: 0; top: 0; z-index: 10; }
    #visual.main { background-position: calc(100% - 40%) 50%; background-attachment: scroll; position: relative; overflow: hidden; }    
    #visual.main .message p:nth-child(1) { height: 17vw; }
    #visual.main .message p:nth-child(2) { height: 7vw; }
    
    #visual:not(.main):not(.company):not(.customer) { background-position: center 42vh; background-size: 70vw; }
    #visual.customer { height: 200px; background-position: center 117%; background-size: auto 120px; }
    #visual.company { height: 200px; background-position: 5% bottom; background-size: auto 30vw; }
    #visual:not(.main):not(.company) .message { padding: 0; text-align: center; top: -20vh; }
    #visual .slideCont { margin: 0 auto; width: 70vw; height: 70vw; top: 42vh; }
    #visual .slideCont p { height: 70vw; }
    
    .svgArea svg:not(#main_svg):not(#main_svg_2):not(#main_svg_star) { width: 100% !important; }    
    .svgArea svg.active { width: 80%; }
    .svgArea svg#main_svg_3 { left: -23%; }
    .svgArea svg#main_svg,
    .svgArea svg#main_svg_2 { width: 80%; }
    
    .tab button { min-width: 100px; height: 30px; font-size: 0.9em; }

    .contBox { padding: 40px 0; }    
    
    .contBox .txt br { display: none; }
    .contBox h2 { margin-bottom: 30px; font-size: 1.5em; }

    .contBox .icoBox { flex-wrap: wrap; }
    .contBox .icoBox li { flex: 0 0 auto; width: calc(100% / 2); font-size: 0.85em; }
    .contBox .icoBox li:nth-child(3),
    .contBox .icoBox li:nth-child(4) { margin-top: 2em; }
    .contBox .icoBox li:before { transform: scale(0.8); }
    
    .contBox .img img { margin-bottom: 30px; width: 90px; }

    .contBox .imgBox.process img { max-width: 100%; }
    .contBox .imgBox.grid { margin: -5px; }
    .contBox .imgBox.grid p { margin: 5px; width: calc((100% / 2) - 10px); }

	.contBox.tabCont .section + .section { margin-top: 80px; }

    .tabItm .txt br { display: none; }
    .tabItm .gridCont .script br { display: none; }
    .tabItm .gridCont .type,
    .tabItm .gridCont .itmBox { margin: 0; width: 100%; border: 1px solid rgba(0,0,0,0.2); overflow: hidden; }
    .tabItm .gridCont .type + .type,
    .tabItm .gridCont .itmBox + .itmBox { margin-top: 20px; }
    .tabItm .gridCont .type h3 { padding-left: 55px; text-align: left; }
    .tabItm iframe { width: 100%; height: 52.45vw;}

    .bbsList li { width: calc((100% / 2) - 20px); }
 
    .form fieldset > *:not(legend) { display: block;  }
    .form fieldset .label { display: block; padding-left: 30px; width: 100%; line-height: 30px; } 
    .form fieldset .label:before { width: 30px; left: -5px; }
    .form input[type="text"],
    .form input[type="password"],
    .form .textarea { margin-left: 30px; width: calc(100% - 30px); }
    .form .switch { position: absolute; top: 10px; right: 0; }
    .form .switch + i { display: none; margin: 0.25em 0 0; padding-left: 30px; line-height: 1.2; }

    #footer .section { flex-direction: column; text-align: center; }
    #footer .section h6 { margin: 0 auto; }
    #footer .section > * + * { margin: 20px 0 0; }
    
    
	[class*="request"] h2 { margin-bottom: 1.25em; font-size: 2.3em; }
	.conBox.requestBox { padding: 40px 0; background: #eaeaea; }
	.request-form input[type="text"],
	.request-form input[type="tel"] { padding-left: 1em; height: 50px; }
	.request-form .apply button.counsel { width: 240px; height: 60px; line-height: 60px; font-size: 21px; color: white; border-radius: 95px; }
	.request-form [contenteditable] { padding: 0.8em 1em; min-height: 200px; line-height: 1.4; } 
}

@media only screen and (max-width: 450px){
    body { font-size: 4.3vw; }

    .search + .btn { margin: 0 0 1em; }

    .bbsList ul { margin: 0; }
    .bbsList li { margin: 0 0 1em; width: 100%; }
    
	.request-form{ padding: 0 1em; }
	[class*="request"] h2 { margin-bottom: 1.25em; font-size: 1.7em; }
	.request-form input[type="text"],
	.request-form input[type="tel"],
	.request-form [contenteditable] { font-size: 15px; }
	.request-form .apply { font-size: 0.9em; }
	.request-form .apply p:first-child + p button { width: 200px; height: 55px; line-height: 55px; font-size: 18px; }    
	
	.popup.psnInfo { padding: 1em; }
}