@charset "utf-8";

body, p{word-break:keep-all;}

/*기본*/
.inner{max-width:1200px; margin:0 auto;}
.cf::after{content:""; display:block; clear:both;}
.headerM {display: none;}

/* sitemap */
.headerUtil{
    position:absolute;
    top:50%;
    right:40px;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    gap:28px;

    z-index:999;
}

/* 검색 */

.searchBtn{
    cursor:pointer;
    font-size:22px;
    color:#111;
    transition:.3s;
}

.searchBtn:hover{
    opacity:.7;
}

/* 삼선 */

.siteMapBtn a{
    width:34px;

    display:flex;
    flex-direction:column;
    gap:7px;
}

.siteMapBtn span{
    width:100%;
    height:2px;
    background:#fff;
    transition:.3s;
}

.header:hover .siteMapBtn span{background:#000;}

/* 검색창 */

.searchOverlay{
    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

    background:rgba(255,255,255,0.7);

    z-index:9999;

    opacity:0;
    visibility:hidden;

    transition:.4s;
}

.searchOverlay.active{
    opacity:1;
    visibility:visible;
}

.searchInner{
    width:100%;
    max-width:900px;

    margin: 350px auto 0;
    padding:0 40px;
}

.searchClose{
    position:absolute;
    top:50px;
    right:60px;

    border:none;
    background:none;

    font-size:42px;
    cursor:pointer;

    color:#111;
}

.searchBox{
    width:100%;
    height:90px;

    border-bottom:2px solid #111;

    display:flex;
    align-items:center;
    gap:25px;
}

.searchBox i{
    font-size:28px;
    color:#111;
}

.searchBox input{
    width:100%;
    height:100%;

    border:none;
    outline:none;
    background:none;

    font-size:32px;
    font-weight:500;
    color:#111;
}

.searchBox input::placeholder{
    color:#aaa;
}


/*header*/
.header{position:absolute; top:0; left:0; width:100%; z-index:9999; text-align:center; background:transparent;}
.header:hover{background:rgba(255,255,255,0.7); transition:.3s;}

.header > .logo{position:absolute; left:200px; top:50%; transform:translate(0, -50%); z-index:1000;}
.header > .logo a{display:block; position:relative; height:50px;}
.header > .logo img{position:absolute; left:0; top:0; width:auto; height:50px; transition:.3s;}
.header > .logo .logo_black{opacity:0;}
.header:hover .logo_white{opacity:0;}
.header:hover .logo_black{opacity:1;}

.header > .gnb{line-height:90px; margin-left: 200px;}
.header > .gnb > li{position:relative; display:inline-block; }
.header > .gnb > li > a{display:block; font-size:18px; font-weight:700; padding:0 40px; color:#fff; transition:.3s; position:relative; }

.header:hover .gnb > li > a{color:#000;}
.header > .gnb > li > a::after{content:''; position:absolute; left:50%; bottom:25px; width:0; height:2px; background:#1a73e8; transform:translateX(-50%); transition:width .3s ease;}

.header > .gnb > li > a:hover::after{width:60%;}
.header > .gnb > li > .subMenu{display:none; position:absolute; padding-top:10px; width:100%; z-index:3; line-height:40px;}
.header > .gnb > li > .subMenu > li > a{color:#000;}
.header > .tel{position:absolute; right:3%; top:50%; transform:translate(0, -50%);}
.header > .tel > p{font-size:20px;}
.header > .tel > p > img{height:20px;}
.header > .menuBg{display:none; width:100%; height:250px; background:rgba(255,255,255,.7); position:absolute; left:0; top:90px; z-index:2;}

.header > .gnb > li > .subMenu > li > a:hover{font-weight:700;}

.header > .member{position:absolute; right:20%; top:50%; display: flex; transform:translate(0, -50%); z-index:99; line-height:90px; margin-left: 300px; /* gap: 20px; */ color: #fff;}
.header > .member li a{color:#fff;}
.header > .member li a:hover{font-weight: 800;}
.header:hover .member li a{color:#000;}
.header > .member > li{position:relative; margin-right:16px; padding-right:16px;}
.header > .member > li::after{content:""; display:block; width:1px; height:16px; background:#fff; position:absolute; right:0; top:50%; transform:translate(0, -50%);}
.header:hover .member > li::after{background:#000;}
.header > .member > li:last-child{margin-right:0; padding-right:0;}
.header > .member > li:last-child::after{display:none;}


.goog-te-gadget .goog-te-combo {
    margin: 4px 0;
    padding: 10px 5px;
    border-radius: 50px;
}

.translate-fixed{
	position:absolute;
	top:20px;
	right:100px;
	/* transform:translateY(-50%); */
	z-index:99999;
	width:auto;
}

.goog-te-gadget{
	font-size:0 !important;
	display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
	gap:15px;
}
.goog-te-gadget{width:auto;overflow:hidden;}

.goog-te-gadget .goog-te-combo{width:80px!important;max-width:80px!important;}



/*footer*/

.footer-wrap{background:#393C41; }
.footer-wrap > .foot-inner {display: flex; justify-content: center; gap: 50px; width: 1200px; margin: 0 auto; align-items: center;}
.footer-wrap > .foot-inner > .foot-logo > img{height: 100px;}


.footer{padding:30px 0 10px; line-height:30px; }
.footer > div {position:relative;}
.footer > div > ul{display:flex;}
.footer > div > ul.margin {margin-bottom:10px;}
.footer > div > ul > li{position:relative; margin-right:16px; padding-right:16px; color:#e3e3e3; font-size:16px; font-weight:300;}
.footer > div > ul > li::after{content:""; display:block; width:1px; height:16px; background:#fff; position:absolute; right:0; top:50%; transform:translate(0, -50%);}
.footer > div > ul > li:last-child{margin-right:0; padding-right:0;}
.footer > div > ul > li:last-child::after{display:none;}
.footer > div > ul > li > a {color:#e3e3e3; font-size:16px; font-weight:800;}
.footer > div > p{border-top:1px solid #fff; padding-top:10px; margin-top:10px; color:#e3e3e3; font-size:16px; font-weight:300; }
.footer > div > p > span > a > img {height:20px; margin-left: 5px;}



/*modal*/
.modal{display:none; background:#fff; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:500px; height:800px; padding:20px 30px; border-radius:10px; overflow-y:scroll; z-index:5;}
.modal::-webkit-scrollbar{display:none;}
.modal > a{display:block; width:fit-content; margin:0 0 10px auto; font-size:30px; } 
.modal > div{font-size:15px; line-height:23px;}
.modal > div > strong{display:block;}


@media (max-width:1200px) {
	#container{overflow-x:hidden;}

	.header{display:none;}

	.headerM{display:block;}

	.inner{width:100%; margin:0 auto;}

	/*header*/
	.headerM .logo{display: flex; justify-content: center; align-items: center;}
	.headerM > .top{position:relative; padding:10px 3%;}
	.headerM > .top > h1 > a > img{height:36px; margin-left: -10px;}
	.headerM > .top > .panel{position:absolute; right:5%; top:50%; margin-top:-10px;}
	.headerM > .top > .panel::before{content:""; display:block; width:20px; height:2px; border-top:3px solid #333;}
	.headerM > .top > .panel::after{content:""; display:block; width:20px; height:2px; border-top:3px solid #333;}
	.headerM > .top > .panel > a{display:block; width:16px; height:2px; border-top:3px solid #333; margin:5px 0; text-indent:-9999px;}

	.headerM > .menu{display:none; background:#fff; width:80%; height:100vh; position:fixed; right:-80%; top:0; z-index:100; padding:100px 0 0;}
	.headerM > .menu > .close{position:absolute; right:5%; top:20px; display:flex;}
	.headerM > .menu > .close > a{display:block; text-indent:-9999px;}
	.headerM > .menu > .close::after{content:""; display:block; width:16px; height:16px; border-top:3px solid #333; border-right:3px solid #333; transform:rotate(225deg);}
	.headerM > .menu > .close::before{content:""; display:block; width:16px; height:16px; border-top:3px solid #333; border-right:3px solid #333; transform:rotate(45deg); margin-right:2px;}
	.headerM > .menu > .gnbM > li{width:90%; margin:0 auto;}
	.headerM > .menu > .gnbM > li > a{position:relative; display:block; padding:16px 10px; border-bottom:1px solid #cdcdcd; font-size:1.1rem; font-weight:500;}
	.headerM > .menu > .gnbM > li > a::after{content:""; display:block; width:8px; height:8px; border-top:2px solid #777; border-right:2px solid #777; transform:rotate(135deg); position:absolute; right:3%; top:50%; margin-top:-4px;}
	.headerM > .menu > .gnbM > li > ul{display:none; background:#f5f5f5; padding:8px 16px; border-radius:0 0 10px 10px;}
	.headerM > .menu > .gnbM > li > ul > li > a{display:block; padding:10px 0; font-size:.92rem; font-weight:300;}
	
	.headerM > .menu > .gnbM > li > a.on::after{transform:rotate(315deg); border-color:#333;}
	

	/*footer*/
	.footer{padding:30px 3% 10px;}
	.footer > div > ul{flex-wrap:wrap;}
	.footer > div > ul > li{padding-right:0; font-size:1rem;}
	.footer > div > ul > li::after{display:none;}
	
	.footer > div > p{font-size:1rem; }
	.footer > div > p > span{display: inline-block;}
	.footer > div > p > span> a > img {height:20px;}

	.footer > .snsWrap > ul > li img {height:70px;}
	.footer > div > img.qrCode {height:50px;}
	

	.modal{width:90%; height:70vh; padding:20px 16px;}
	
	.footer-wrap > .foot-inner {flex-direction: column; justify-content: center;width: 100% !important; margin: 0 auto;}
	.footer-wrap > .foot-inner > .foot-logo {display: none;}


}