* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'NexonLv1Gothic';
color: #223547 ;
}
*, *:before, *:after {
box-sizing:border-box;
}
a {
text-decoration: none;
color: #223547 ;
}
li {
list-style: none;
}
/* header */
#header {
display: flex;
justify-content: space-between;
}
#header nav {
margin: 10px;
}
#header nav li {
position: relative;
display: inline;
}
#header nav li a {
width: 30px;
height: 30px;
border: 1px solid #223547;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 30px;
font-family: 'NexonLv1Gothic';
}
#header nav li.active a {
background-color: #223547;
color: #fff;
}
#header nav li .sub {
position: absolute;
left: 0;
top: 35px;
width: 400px;
}
#header nav li .sub li a {
width: auto;
background-color: transparent;
color: #223547;
border: 0;
text-align: left;
line-height: 1.2;
}
#header nav li .sub li.active a {
text-decoration: underline;
}
/* main */
#main {
margin: 50px 10px;
}
.search__wrap {
max-width: 1400px;
margin: 0 auto;
border: 3px solid #223547;
border-radius: 20px;
background-color: #F1F3F6;
text-align: center;
padding: 30px;
}
.search__wrap > span {
font-size: 20px;
margin-bottom: 20px;
display: inline-block;
}
.search__wrap > h1 {
font-family: 'Tmon';
color: #223547;
font-size: 6vw;
margin-bottom: 10px;
}
.search__box {
margin-bottom: 20px;
}
.search__box label{
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden
}
.search__box input {
border: 2px solid #223547;
padding: 15px 40px;
width: 70%;
border-radius: 50px;
font-size: 20px;
}
.search__tab li.active a {
background-color: #223547;
color: #fff;
}
.search__list {}
.search__list li {
text-align-last: left;
line-height: 1.7;
}
.search__list li.hide {
display: none;
}
.search__list li.show {
display: block;
}
@media (max-width: 600px){
.search__wrap {
padding: 20px;
}
.search__wrap > span {
font-size: 16px;
margin-bottom: 10px;
}
.search__wrap > h1 {
font-size: 44px;
}
.search__box input {
font-size: 16px;
padding: 12px 30px;
}
}
.search__info {
text-align: right;
padding-top: 10px;
margin-bottom: 30px;
border-bottom: 2px dashed #223547;
}
.search__info .type {
text-align: center;
margin-bottom: 10px;
}
.search__info .keyword {
text-align: center;
margin-bottom: 10px;
}
.search__info .keyword span {
border: 2px solid #223547;
border-radius: 50px;
padding: 10px;
display: inline-block;
margin-bottom: 4px;
}
.search__info .keyword span:hover {
background-color: #223547;
color: #fff;
cursor: pointer;
}
/* footer */
#footer {
text-align: center;
}
#footer a {
color: #000;
font-family: 'NexonLv1Gothic';
padding-bottom: 50px;
}
#footer a:hover {
text-decoration: underline;
}