*{margin: 0; padding: 0;}
a{text-decoration: none; color: #111; display: block; font-family: 'Noto Sans KR', sans-serif;}
li{list-style: none;}
div{box-sizing: border-box;}
header,section,footer{width: 100%; float: left;}
img{width: 100%;}
i{font-style: normal;}
html,body{
    color:#111;
    cursor: url('../img/mouse.png'),default;
    font-family: 'Noto Sans KR', sans-serif;
}
/* 스크롤바 */
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-thumb {
    background-color: #4822a8;
    border-radius: 30px;
    transition: all 0.1s;
}
body::-webkit-scrollbar-track {
    background-color: rgb(224, 224, 224);
    border-radius: 30px;
}


.wrap{
    position: relative;
}
/* 헤더 */
header{
    width: 100%;
    height: 100px;
    padding: 0 60px;
    position: fixed;
    top: 0;
    z-index: 100;
    transition: all 0.3s;
}
header .logo a{
    width: 160px;
    height: 100px;
    float: left;
    margin-right: 45px;
    background-image: url(../img/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    transition: all 0.3s;
}
header nav ul{
    display: flex;
}
header nav ul li{
    padding: 0 35px;
    line-height: 100px;
}
header nav ul li a{
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s;
    font-family: 'NEXON Lv1 Gothic OTF';
    padding: 3px 0;
    display: inline;
}
/* 헤더 nav active */
header nav ul li.active a{
    border-bottom: 2px solid #fff;
}
/* 헤더 active */
header.active{
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
header.active .logo a{
    background-image: url(../img/logo1.png);
}
header.active nav ul li a{
    color: #111;
}
header.active nav ul li.active a{
    border-bottom: 2px solid #111;
}
/* 헤더 active-white */
header.active-white .logo a{
    background-image: url(../img/logo1.png);
}
header.active-white nav ul li a{
    color: #111;
}
header.active-white nav ul li.active a{
    border-bottom: 2px solid #111;
}
header.active-white .mobile_btn a{
    color: #111;
}

header .mobile_btn{position: absolute; top: 50%; right: 0; transform: translate(0,-50%);padding: 0 20px; height: 100%; display: none;}
header .mobile_btn a{font-size: 45px; color: #fff; transition: all 0.3s; height: 100%; display: flex; align-items: center; justify-content: center;}
header.active .mobile_btn a{color: #111;}
header .mobile_nav{position: absolute; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100vh; top: 0; z-index: 200; display: none; }
header .mobile_navBox{width: 60%; height: 100vh; background-color: #fff; position: absolute; top: 0; right: -60%;  transition: all 0.3s;}
header .mobile_navBox .mobile_top_menu{height: 70px; position: relative;}
header .mobile_navBox .mobile_top_menu a{font-size: 40px; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); padding: 0 20px;}
header .mobile_navBox nav ul{display: flex; flex-direction: column; border-top: #111 1px solid;}
header .mobile_navBox nav ul li{border-bottom: #111 1px solid;}
header .mobile_navBox nav ul li a{color:#111; width: 100%; display: block; padding: 0;}


/* footer */
footer{
    height: 300px;
    background-color: #6400ff;
    color: #fff;
}
footer .center_box{
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
}
footer nav{
    width: 250px;
    height: 100%;
}
footer nav ul{
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content:  space-between;
}
footer nav ul li a{
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    transition: all 0.5s;
    display: inline;
}
footer nav ul li a:hover{
    margin-left: 15px;
}
footer .f_box1{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
footer .f_box1 .f_contact p{
    font-weight: 100;
}
footer .f_box1 h3{
    font-weight: normal;
}
footer .f_box2{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
footer .f_box2 .sns ul{
    float: right;
}
footer .f_box2 .sns ul li{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    margin-left: 20px;
    position: relative;
}
footer .sns ul li a{
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
}
footer .sns ul li a img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
}
footer .sns ul li:first-child a img{
    width: 32px;
}
.f_detail{
    position: absolute;
    bottom: -65px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}
footer .speech-bubble {
	position: relative;
	background: #fff;
	border-radius: .4em;
    width: 70px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sns ul > li:hover > .f_detail{
    display: block;
}
footer .speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #fff;
	border-top: 0;
	margin-left: -10px;
	margin-top: -10px;
}
.f_detail .speech-bubble p{
    color: #111;
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    line-height: 16px;
}
.f_detail .speech-bubble p span{
    color: #111;
    font-weight: 400;
    font-size: 14px;
}

footer .f_box2 h3{
    font-weight: normal;
    display: none;
    text-align: center;
}


/* 탑버튼 */
.top{
    width: 60px;
    height: 60px;
    background-color: #4822a8;
    position: fixed;
    bottom: 50px;
    right: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.top img{
    width: 24px;
    transition: all 0.3s;
}
.top:hover img{
    margin-bottom: 10px;
}


@media screen and (max-width:1440px){
    /* 공통 */
    header{padding:0 20px;}
    footer .center_box{ width:1200px;}

}

@media screen and (max-width:1280px){
    /* 공통 */
    header, header .logo a{height: 80px; padding: 0;}
    header .logo a {width: 120px; margin-right: 20px;}
    header nav ul li {line-height: 80px; padding: 0 30px;}
    footer{height:100%;}
    footer .center_box{ width:1000px; flex-direction:column; gap: 30px;}
    footer .f_box1 h3{display: none;}
    footer .f_box1 .f_contact p{ font-size: 24px;}
    footer .f_box2 .sns ul{float: none;}
    footer .f_box2 .sns ul li:first-child{margin: 0;}
    footer .f_box2 h3{display: block; margin-top: 50px; font-size: 20px; font-weight: 600;}
    footer .f_box2 .f_copy{text-align: center; margin-top: 20px;}
}

@media screen and (max-width:1024px){
    /* 공통 */
    footer .center_box{ width:900px;}
}

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

    /* 공통 */
    footer .center_box{ width:100%; padding:30px 30px;}
    header, header .logo a{ height: 70px;}
    header .logo a{margin: 0; width: 100px;}
    header nav ul li{line-height: 70px; padding: 0 20px;}

}

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

    /* 공통 */
    header > nav {display: none;}
    header .mobile_btn{display: block;}
    footer .f_box2 h3{font-size: 16px;}
    .top {width: 50px; height: 50px; bottom: 30px; right: 25px; box-shadow: 0 0 10px 1px #111;}
    .top img{width: 20px;}
    .top:hover img{margin-bottom: 0;}
}

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

    /* 공통 */
    footer nav ul li a {font-size: 24px;}
    footer .f_contact h2{font-size: 20px;}
    footer .f_box1 .f_contact p {font-size: 18px;}
    footer .f_box2 h3 {font-size: 12px; margin-top: 20px;}
    footer .sns {display: none;}

}

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

    /* 공통 */
    header, header .logo a, header .mobile_navBox .mobile_top_menu {height: 50px;}
    header .logo a {width: 80px;}
    header .mobile_btn a {font-size: 30px;}
    header .mobile_navBox {width: 70%;}
    header .mobile_navBox .mobile_top_menu a{font-size: 26px;}
    header nav ul li a {font-size: 18px;}
    header nav ul li {line-height: 60px;}
    
    footer .center_box{padding: 20px 15px;}
    footer .f_box2 h3{display: none;}
    footer .f_box2 .f_copy{font-size: 14px;}
    .top{width: 40px; height: 40px; bottom: 20px; right: 20px;}
    .top img {width: 15px;}
   
}

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

    /* 공통 */
    header .mobile_navBox {width: 100%;}

}



.btn-disabled { cursor: default !important;}