@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

:root {
--white: #f9f9f9;
--green: #026717;
--red: #a00101;
--black: #262626;
--grey: #ededed;
--navy: #0e1774;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: var(--white);
}

::-webkit-scrollbar-thumb {
    width: 4px;
    background: var(--red);
}

html,body {
padding: 0;
margin: 0;
background-color: var(--white); 
text-align: center;
overflow-x: hidden;
font-family: "pretendard", sans-serif;
}

img {
max-width: 100%;
border: 0px;
}

a:link    {color:inherit;text-decoration:none;}
a:visited {color:inherit;text-decoration:none;}
a:active  {color:inherit;text-decoration:none;}
a:hover   {color:inherit;text-decoration:none;}

@keyframes mov1 {
0% {opacity:0;}
100% {opacity:1;}
}
 
@keyframes mov2 {
0% {transform: rotate(0deg);}
80% {transform: rotate(0deg);}
100% {transform: rotate(180deg);} 
}

.bg {
width: 0px;
padding: 300px 100% 0px 0px;
background-image: url('https://imgur.com/Bx0My77.png');
background-size: auto 100%;
position: fixed;
bottom: 0;
z-index: 0;
}

.bg_n {
position: relative;
z-index: 1;
}


.twitter_bt {
width: 50px;
position: absolute;
right: 25px;
top: 25px;
z-index: 999;
}

.top_bt {
width: 30px;
height: 30px;
line-height: 30px;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 999;
background-color: var(--red);
padding: 11px 10px 10px 11px;
border-radius: 50%;
border: 0px;
}

.container {
position: relative;
animation: mov1 1s ease-in-out;
-webkit-animation: mov1 1s ease-in-out;
width: 100%;
max-width: 400px;
margin: 60px auto;
}

.c_contents {
padding: 30px 5%;
}

.f_list {
width: 80%;
height: 16px;
margin: auto;
background-color: var(--grey);
border-radius: 0px;
padding: 20px 20px;
font-size: 9pt;
margin-bottom: 10px;
border-radius: 10px;
}

.f_name {
width: 30%;
text-align: left;
float: left;
font-weight: bold;
}

.f_title {
width: 70%;
text-align: left;
float: left;
}

.circle_19 {
background-color: var(--red);
padding: 2px;
border-radius: 50%;
width: 1px;
height: 1px;
display: inline-block;
position: relative;
top: -2px;
left: 3px;
}

.t1 {width: 270px; margin-bottom: 20px;}
.t2 {width: 80px; margin: 30px 0px;}

.c_foot {
font-weight: bold;
font-size: 10px;
background-color: var(--navy);
color: var(--white);
padding: 5px 10px 7px;
}


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

.twitter_bt {
width: 45px;
right: 20px;
top: 20px;
}

.top_bt {
right: 20px;
bottom: 20px;
}

.div1, .div2 {
position: relative;
top: -30px;
}

.div2 {
width: 70%;
max-width: 450px;
text-align: center;
}

.m_t1 {
width: 100%;
}

.m_menu {
margin: 20px 0px 0px 0px;
}

.m_menu_i {
width: 40%;
display: inline-block;
margin: 10px 1%;
}

.bg {
padding: 150px 100% 0px 0px;
}

}