@charset "utf-8";

/* 초기화 */

/* 웹폰트 */
/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Thin.woff2') format('woff2'),
    url('../fonts/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraLight.woff2') format('woff2'),
    url('../fonts/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Light.woff2') format('woff2'),
    url('../fonts/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2'),
    url('../fonts/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Medium.woff2') format('woff2'),
    url('../fonts/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2'),
    url('../fonts/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2'),
    url('../fonts/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'),
    url('../fonts/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Black.woff2') format('woff2'),
    url('../fonts/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}



@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notokr-light.eot');
    src: url('../fonts/notokr-light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/notokr-light.woff2') format('woff2'),
    url('../fonts/notokr-light.woff') format('woff'),
    url('../fonts/notokr-light.ttf') format('truetype'),
    url('../fonts/notokr-light.svg#notokr-light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notokr-regular.eot');
    src: url('../fonts/notokr-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/notokr-regular.woff2') format('woff2'),
    url('../fonts/notokr-regular.woff') format('woff'),
    url('../fonts/notokr-regular.ttf') format('truetype'),
    url('../fonts/notokr-regular.svg#notokr-regular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notokr-medium.eot');
    src: url('../fonts/notokr-medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/notokr-medium.woff2') format('woff2'),
    url('../fonts/notokr-medium.woff') format('woff'),
    url('../fonts/notokr-medium.ttf') format('truetype'),
    url('../fonts/notokr-medium.svg#notokr-medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/notokr-bold.eot');
    src: url('../fonts/notokr-bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/notokr-bold.woff2') format('woff2'),
    url('../fonts/notokr-bold.woff') format('woff'),
    url('../fonts/notokr-bold.ttf') format('truetype'),
    url('../fonts/notokr-bold.svg#notokr-bold') format('svg');
    font-weight: 700;
    font-style: normal;
}

/* ONE-Mobile-Title */
@font-face {
    font-family: 'OneMobileTitle';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/OneMobileTitle.eot');
    src: url('../fonts/OneMobileTitle.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OneMobileTitle.woff2') format('woff2'),
        url('../fonts/OneMobileTitle.woff') format('woff'),
        url('../fonts/OneMobileTitle.ttf') format("truetype");
    font-display: swap;
}
/* Insungit Cutelively Jisu */
@font-face {
    font-family: 'Insungit Cutelively Jisu';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/InsungitCutelivelyJisu/InsungitCutelivelyJisu.woff2') format('woff2'),
         url('../fonts/InsungitCutelivelyJisu/InsungitCutelivelyJisu.woff') format('woff'),
         url('../fonts/InsungitCutelivelyJisu/InsungitCutelivelyJisu.ttf') format('truetype');
}


/* 태그 설정 */
/* all style */

/* *::before, ::after {content:''; display:none;} */
span, em {display:inline-block;}
* {margin:0px; padding:0px;}
* {box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
* {-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
* {max-height: 1000000px;}
html, body{color:#000;font-size:16px;font-family: 'Pretendard','Noto Sans KR', sans-serif;}

@media screen and (max-width: 400px) {
    html, body{font-size:15px;}
}
@media screen and (max-width: 300px) {
    html, body{font-size:14px;}
}

body {line-height:1;}
form, div, p, span, ul, li, dl, dt, textarea, h1, h2, h3, h4 {margin:0px; padding:0px; word-break:keep-all;}
table legend {visibility:hidden; overflow:hidden; width:0; height:0; margin:0; padding:0;}
table, th, td {border-spacing:0px; border-collapse:collapse;}
ul, ol, dl, li, dt, dd {list-style:none;} 
img, fieldset {display:inline; max-width:100%; border:0px; line-height:0;}
figure{display:block; line-height:0;}
header, nav, aside, section, address, article, main, footer, hgroup, div {display:block;}
dfn,em {font-weight: bold; font-style: normal;}
del,s {display: inline-block;}
figcaption {display: block;}
input, textarea, select, button {font-family: inherit;}
input[type="button"], input[type="text"], input[type="submit"], input[type="password"], select{vertical-align:middle;appearance:none;-webkit-appearance: none;-moz-appearance: none;-webkit-border-radius:0; -moz-border-radius:0;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s; }
input[type="text"]::-ms-clear {display: none;}
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {margin: 0; appearance: none; -webkit-appearance: none;}
button, input[type="button"] {border:0; cursor: pointer;}
a:link    {text-decoration:none;}
a:visited {text-decoration:none;}
a:active  {text-decoration:none;}
a:hover   {text-decoration:none;}
/* SKIP */
.hide {font-size:0;text-indent:-9999px;visibility:hidden;}
.skipH{position:absolute; height:0; width:0; left:-9999px; overflow:hidden; font-size:0; line-height:0;}
a.skipNav {display:block; position:absolute; z-index:500; left:0; top:-10000px; font-size:1.3em; text-align:center; width:100%;}
a.skipNav:hover, a.skipNav:focus, a.skipNav:active{position:absolute; top:0; z-index:500; padding:15px 0; color:#ffffff; font-weight:bold;background: none repeat scroll 0 0 #1d60a7;}

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



/* 레이아웃 공통*/
html,body{height:100%;} 
body.action{overflow:hidden;height: 100%;}
*{line-height: 1.3;}
#wrap{overflow:hidden;position:relative; min-height:100%; background: #fff;}
#main {position:relative; overflow:hidden; max-width:450px; margin:0 auto;}
.conArea {width:100%; max-width:450px; margin:0 auto; padding:0 20px; transition:.3s;}

@media screen and (max-width: 300px) {
	.conArea {padding: 0 15px;}
}


/* heading titles */
.h2 {display:block; position: relative; margin-bottom: 30px; border-bottom: 1px solid #dddddd; font-weight: 700; font-size: 2.25rem; color: #000;}
.h2:not(:last-child) {margin-bottom: 0;}
.h3 {display:block; position: relative; margin-bottom: 20px; padding-left: 15px; font-weight: 700; font-size: 1.75rem; color: #000;}
.h3::before {content:""; position: absolute; top: 15%; left: 0; width: 6px; height: 70%; background-color: #6667ab;}
.h4 {display:block; position: relative; margin-bottom: 15px; padding-left: 10px; font-weight: 600; font-size: 1.5rem; color: #000;}
.h4::before {content:""; position: absolute; top: 15%; left: 0; width: 7px; height: 7px; background-color: #6667ab;}
.h5 {margin-bottom: 15px; font-weight: 600; font-size: 1.25rem; color: #000;}
.h6 {margin-bottom: 10px; font-weight: 500; font-size: 1.125rem; color: #000;}
/* //heading titles */



/* intro */
#intro {height:100%;}
#intro .conArea {position:relative; overflow:hidden; box-shadow: 1px 1px 15px rgba(0,0,0,0.1) inset;}
#intro .introWrap {display:flex; position:relative; height:100%; flex-direction: column; justify-content:space-between;}

#intro .introWrap .titWrap {display:flex; position:relative; height:100%; padding:0 30px; flex-direction: column; align-items:center; opacity:1; transition:opacity .5s;}
#intro .introWrap .titWrap .tit {display:block; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-weight:700; font-size:2.0625rem; color:#0068A1; text-align:center; opacity:1;}
#intro .introWrap .titWrap .tit.v01 {animation:titV01 5.5s ease-in-out infinite alternate-reverse;}
#intro .introWrap .titWrap .tit.v02 {animation:titV02 5.5s ease-in-out infinite alternate-reverse;}

#intro .introWrap .titWrap .ship {display:block; position:absolute; transition:.3s;}
#intro .introWrap .titWrap .ship > img {display:block; width:100%;}
#intro .introWrap .titWrap .nowShip {top:67%; left:-100%; width:407px; padding-bottom:20px; animation:shipNow 10s linear infinite;}
#intro .introWrap .titWrap .nowShip::before {content:''; position:absolute; bottom:-2px; left:0; z-index:1; width:220px; height:15px; background:url(../images/intro/i_wave_front.svg) no-repeat center; animation:wave1 2s ease-in infinite alternate-reverse; transition:.5s;}
#intro .introWrap .titWrap .nowShip::after {content:''; position:absolute; bottom:-2px; right:0; z-index:1; width:240px; height:18px; background:url(../images/intro/i_wave_back.svg) no-repeat center; animation:wave1 2s ease-in infinite alternate-reverse; transition:.5s;}
#intro .introWrap .titWrap .pastShip {top:8%; right:-100%; width:270px; padding-bottom:0px; animation:shipPast 10s linear infinite;}
#intro .introWrap .titWrap .pastShip::before {content:''; position:absolute; bottom:2px; left:0px; z-index:1; width:250px; height:18px; background:url(../images/intro/i_wave_past.svg) no-repeat center; animation:wave2 2s ease-in infinite alternate-reverse; transition:.5s;}

#intro .introWrap .logoCon {display:block; height:100%; padding:30px 0 40px; transition:.3s;}
#intro .introWrap .logoCon .logo {display:block; margin:0 auto; transition:.3s;}

@keyframes titV01 {
	0% {opacity:0;}
    49.5% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}
@keyframes titV02 {
    0% {opacity:1;}
    49% {opacity:0;}
	50% {opacity:0;}
	100% {opacity:0;}
}
@keyframes shipNow {
	0% {left:-100%;}
	100% {left:100%;}
}
@keyframes shipPast {
	0% {right:-70%;}
	100% {right:100%;}
}
@keyframes wave1 {
	from{
		transform:translate(-10px, 0);
	}
	to{
		transform:translate(10px, 0);
	}
}
@keyframes wave2 {
	from{
		transform:translate(-15px, 0);
	}
	to{
		transform:translate(0px, 0);
	}
}

@media screen and (max-width:370px){
	#intro .conArea {height:100vh;}
    #intro .introWrap::before {width:350px; background-size:350px;} 
    #intro .introWrap::after {width:220px; background-size:220px;}
    #intro .introWrap .titWrap .nowShip {width:320px;}
    #intro .introWrap .titWrap .nowShip::before {bottom:1px; width:200px; background-size:200px;}
    #intro .introWrap .titWrap .nowShip::after {bottom:1px; width:170px; background-size:170px;}
    #intro .introWrap .titWrap .pastShip {width:240px;}
    #intro .introWrap .titWrap .pastShip::before {bottom:-2px; left:-10px; width:230px; height:25px; background-size:230px;}

    #intro .introWrap .titWrap .tit {font-size:1.75rem;}
	#intro .introWrap .logoCon {padding:20px 0 30px;}
    #intro .introWrap .logoCon .logo {height:22px;}
}
@media screen and (max-height:1000px){
    #intro .introWrap .titWrap .pastShip {top:14%;}
}
@media screen and (max-height:900px){
    #intro .introWrap .titWrap .pastShip {top:12%;}
}
@media screen and (max-height:800px){
    #intro .introWrap .titWrap .pastShip {top:9%;}
}
@media screen and (max-height:700px){
    #intro .introWrap .titWrap .pastShip {top:6%;}
}


/* Header */
#header {display:block; position:relative; top:0; left:50%; z-index:99; width:100%; max-width:450px; height:70px; padding:0 20px; background-color:transparent; border-bottom:1px solid rgba(255,255,255,0.2); transform:translateX(-50%); transition:.3s;}
#header.fixed {position:fixed;}
#header .headerWrap {display:flex; position:relative; height:100%; align-items:center; justify-content:space-between;}

#header .globalCon {position:relative;}
#header .globalCon .btnGlobal {display:block; position:relative; width:34px; height:34px; background-color:transparent; transition:.3s;}
#header .globalCon .btnGlobal::before {content:''; display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; border-radius:12px; background:url(../images/common/i_global.svg) no-repeat center, #1EBCBB; transition:.3s; transform:rotate(45deg);}
#header .globalCon .langList {display:none; position:absolute; top:18px; left:50%; width:118%; padding:25px 0 20px; border-radius:0 0 100px 100px; background-color:#fff; border:1px solid #E9E9E9; transform:translateX(-50%);}
#header .globalCon .langList > li {display:block;}
#header .globalCon .langList > li:not(:first-child) {padding-top:10px;}
#header .globalCon .langList > li .btnLang {display:block; margin:0 auto; background-color:#fff; font-weight:700; font-size:0.875rem; color:#7E8790;}
#header .globalCon .langList > li .btnLang:focus,
#header .globalCon .langList > li .btnLang:hover,
#header .globalCon .langList > li .btnLang.active {color:#00B6D1;}

#header #logo {display:block; overflow:hidden; padding-left:5rem; flex-shrink:0; flex-grow:1;}
#header #logo .con {display:flex; justify-content:center; transition:.3s;}
#header #logo .con .img {display:block; transition:.3s;}
#header .utilList {display:flex; align-items:center;}
#header .utilList > li {display:block; position:relative;}
#header .utilList > li:not(:first-child) {padding-left:5px;}
#header .utilList > li .util {display:block; overflow:hidden; position:relative; width:36px; height:36px; border-radius:50%; transition:.3s;}
#header .utilList > li .util::before {content:''; display:block; position:absolute; top:50%; left:50%; width:150%; height:150%; background-color:transparent; background-repeat:no-repeat; background-position:center center; transform:translate(-50%, -50%) scale(1); transition:.3s;}
#header .utilList > li .util:focus::before,
#header .utilList > li .util:hover::before,
#header .utilList > li .util.active::before {background-color:rgba(20,41,81,0.2); transform:translate(-50%, -50%) scale(0.9);}
#header .utilList > li .btnSearch {background-color:#3E79F4;}
#header .utilList > li .btnSearch::before {background-image:url(../images/common/i_search.svg);}
#header .utilList > li .btnSearch.close::before {background-image:url(../images/common/i_menuClose.svg);}
#header .utilList > li .util.v01 {background-color:#3E79F4;}
#header .utilList > li .util.v02 {background-color:#1D3E7F;}
#header .utilList > li .util.v03 {background-color:#E85B6C;}
#header .utilList > li .btnMenu::before {background-image:url(../images/common/i_menu.svg);}
#header .utilList > li .btnMenu.active::before {background-image:url(../images/common/i_menuClose.svg);}

@media screen and (max-width:385px){
	#header {padding:0 15px;}
    #header .globalCon {position:absolute; right:82px;}
    #header .globalCon .btnGlobal {width:32px; height:32px;}
    #header .globalCon .langList {padding:22px 0 15px;}
    #header .globalCon .langList > li:not(:first-child) {padding-top:7px;}
	#header #logo {padding:0;}
	#header #logo .con {justify-content:flex-start;}
	#header #logo .con .img {height:27px;}
	#header .utilList > li .util {width:34px; height:34px;}
	#header .utilList > li .util::before {background-size:16px;}
}



/* #menuModal */
#menuModal {visibility: hidden; overflow:hidden; position: absolute; top: 0; left: 100%; z-index: 90; width: 100%; height: 100%; transition:left 0.5s, visibility 0s 0.5s;}
#menuModal.active {visibility: visible; left:0; transition: visibility 0s 0s;}
#menuModal::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0); transition: background 0.3s;}
#menuModal.active::before {background-color: rgba(255,255,255,1);}

/* mainMenu */
#mainMenu {display:block; overflow-x:hidden; overflow-y:auto; position:absolute; top:0; left:0; width:100%; height:100vh; opacity:0; transform:translateX(100%); transition:transform .7s;}
#mainMenu.on {opacity:1; transform:translateX(0%);}
#mainMenu .conArea {height:100vh;}
#mainMenu .list {display:block; width:100%; padding-top:20px; transition:.3s;}
#mainMenu .list > li {display:block; transition:.3s;}
#mainMenu .list > li:not(:first-child) {padding-top:10px;}
#mainMenu .list > li .tit01 {display:block; position:relative; padding:15px 30px 15px 37px; font-weight:700; font-size:1.125rem; color:#000; transition:.3s;}
#mainMenu .list > li .tit01:focus,
#mainMenu .list > li .tit01:hover,
#mainMenu .list > li .tit01.active {color:#3E79F4;}
#mainMenu .list > li .tit01::before {content:''; display:block; position:absolute; top:50%; left:0; width:24px; height:24px; background-repeat:no-repeat; background-position:center; transform:translateY(-50%); transition:.3s;}
#mainMenu .list > li .tit01.dep02::after {content:''; display:block; position:absolute; top:50%; right:10px; width:18px; height:18px; background-image:url(../images/common/i_plus.svg); background-repeat:no-repeat; background-position:center; transform:translateY(-50%); transition:.3s;}
#mainMenu .list > li .tit01.dep02:focus::after,
#mainMenu .list > li .tit01.dep02.active::after {background-image:url(../images/common/i_plus_on.svg);}

#mainMenu .list > li .tit01.v01::before {background-image:url(../images/common/i_tit_01.svg);}
#mainMenu .list > li .tit01.v01:focus::before,
#mainMenu .list > li .tit01.v01:hover::before,
#mainMenu .list > li .tit01.v01.active::before {background-image:url(../images/common/i_tit_01_on.svg);}

#mainMenu .list > li .tit01.v02::before {background-image:url(../images/common/i_tit_02.svg);}
#mainMenu .list > li .tit01.v02:focus::before,
#mainMenu .list > li .tit01.v02:hover::before,
#mainMenu .list > li .tit01.v02.active::before {background-image:url(../images/common/i_tit_02_on.svg);}

#mainMenu .list > li .tit01.v03::before {background-image:url(../images/common/i_tit_03.svg);}
#mainMenu .list > li .tit01.v03:focus::before,
#mainMenu .list > li .tit01.v03:hover::before,
#mainMenu .list > li .tit01.v03.active::before {background-image:url(../images/common/i_tit_03_on.svg);}

#mainMenu .list > li .tit01.v04::before {background-image:url(../images/common/i_tit_04.svg);}
#mainMenu .list > li .tit01.v04:focus::before,
#mainMenu .list > li .tit01.v04:hover::before,
#mainMenu .list > li .tit01.v04.active::before {background-image:url(../images/common/i_tit_04_on.svg);}

#mainMenu .list > li .tit01.v05::before {background-image:url(../images/common/i_tit_05.svg);}
#mainMenu .list > li .tit01.v05:focus::before,
#mainMenu .list > li .tit01.v05:hover::before,
#mainMenu .list > li .tit01.v05.active::before {background-image:url(../images/common/i_tit_05_on.svg);}

#mainMenu .list > li .tit01.v06::before {background-image:url(../images/common/i_tit_06.svg);}
#mainMenu .list > li .tit01.v06:focus::before,
#mainMenu .list > li .tit01.v06:hover::before,
#mainMenu .list > li .tit01.v06.active::before {background-image:url(../images/common/i_tit_06_on.svg);}

#mainMenu .list > li .tit01.v07::before {background-image:url(../images/common/i_tit_07.svg);}
#mainMenu .list > li .tit01.v07:focus::before,
#mainMenu .list > li .tit01.v07:hover::before,
#mainMenu .list > li .tit01.v07.active::before {background-image:url(../images/common/i_tit_07_on.svg);}

#mainMenu .list > li .tit01.v08::before {background-image:url(../images/common/i_tit_08.svg);}
#mainMenu .list > li .tit01.v08:focus::before,
#mainMenu .list > li .tit01.v08:hover::before,
#mainMenu .list > li .tit01.v08.active::before {background-image:url(../images/common/i_tit_08_on.svg);}

#mainMenu .list-02 {display:none; padding:17px 20px; background-color:#F5F7F9;}
#mainMenu .list > li:first-child .list-02 {display:block;}
#mainMenu .list-02 > li {display:block; transition:.3s;}
#mainMenu .list-02 > li:not(:first-child) {padding-top:10px;}
#mainMenu .list-02 > li .tit02 {display:block; font-weight:400; font-size:1rem; color:#7E8790; transition:.3s;}
#mainMenu .list-02 > li .tit02:focus,
#mainMenu .list-02 > li .tit02:hover,
#mainMenu .list-02 > li .tit02.active {font-weight:600; color:#3E79F4;}

/* 스크롤 */
#mainMenu::-webkit-scrollbar {width: 3px; height: 3px; box-sizing: content-box;}
#mainMenu::-webkit-scrollbar-thumb {height: 30%; border-radius: 2px; background:#3E79F4;}
#mainMenu::-webkit-scrollbar-track {padding: 0 5px; border-radius: 5px; background:#e4e4e4;}

@media screen and (max-width:385px){
    #mainMenu .list {padding-top:10px;}
	#mainMenu .list > li .tit01 {padding:12px 30px 12px 30px;}
    #mainMenu .list > li .tit01::before {width:20px; height:20px; background-size:20px;}
    #mainMenu .list > li .tit01.dep02::after {width:16px; height:16px; background-size:16px;}
    #mainMenu .list-02 {padding:15px 17px;}
}


/* 통합검색 */
#searchWrap {display:none; position:absolute; top:0; left:0; z-index:97; display:block; width:100%; height:100%; background-color:#fff; opacity:0; transform:translateY(-120%); transition:transform .7s;}
#searchWrap.active {opacity:1; transform:translateY(0%);}
#searchWrap .searchCon {position:relative; padding:150px 20px 0 20px; text-align: center; transition:padding .3s;}
#searchWrap .searchCon::before {content:''; display:block; position:absolute; top:40px; left:50%; width:135px; height:107px; background:url(../images/common/img_searchBg.svg) no-repeat center; transform:translateX(-50%); transition:.3s;}
#searchWrap .searchCon .inSearch {width:100%; padding:10px 50px 10px 20px; border:0; border-bottom:1px solid #000; font-weight:600; font-size:0.875rem; color:#000; transition:padding .3s, color .3s;}
#searchWrap .searchCon .inSearch::placeholder {font-weight:400; font-size:0.875rem; color:#7E8790; transition:color .3s;}
#searchWrap .searchCon .btnSubmit {display:block; position:absolute; bottom:10px; right:40px; width:18px; height:18px; background-color:transparent; background-image:url(../images/common/i_searchCon.svg); background-repeat:no-repeat; background-position:center center; transition:.3s;}
#searchWrap .searchCon .btnSubmit:focus,
#searchWrap .searchCon .btnSubmit:hover,
#searchWrap .searchCon .btnSubmit.active {background-image:url(../images/common/i_searchCon_on.svg);}

@media screen and (max-width:385px){
	#searchWrap .searchCon {padding:120px 15px 0 15px;}
    #searchWrap .searchCon::before {top:25px; width:115px; background-size:115px;}
    #searchWrap .searchCon .inSearch {padding:8px 45px 8px 15px;}
    #searchWrap .searchCon .btnSubmit {bottom:8px; right:30px;}
}



















/* 대메뉴명 > 페이지명 */
#con .s0000 {display:block;}


@media screen and (max-width:350px){
	
}