@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');


*{font-family: 'Nanum Gothic', sans-serif;}

body{margin:0px;}
a{text-decoration: none; color:black; display: flex; align-items: center;}
a:hover{font-weight: bold;}
h1, h2, h3, h4{margin: 5px;}
ul{list-style: none;}

section{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.container {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0px 10px;
}
.main_background {
    margin-top: 5vh;
    width: 100%;
    height: 250px;
    /* background-color: #abcdef; */
    border: solid black 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-sizing: border-box;
    background-image: url('./images/main_backgroud.jpg'); /* 이미지 경로를 적절히 변경하세요 */
    background-size: auto; /* 이미지가 컨테이너 크기에 맞게 확장되도록 설정 */
    background-position: center -150px; 
}
.main_logo {
    position: absolute;
    top: calc(5vh + 250px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.contents {
    width: 100%;
    padding: 100px 20px 20px;
    min-height: 65vh;
    border: solid black 2px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 5vh;
}
.slogan{text-align: center; font-size: 30px; margin-bottom: 15px;}
.logo_img {
    border-radius: 50%;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    width: 150px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
}
.vh5{
    height: 5vh;
}        
.app_wrapper {
    display: flex;
    align-items: center; 
}
.product_1 ol {
    list-style: none;
    counter-reset: items;
    font-size: 15px;
}

.product_1 ol > li {
    display: flex;
    counter-increment: items;
    padding-bottom: 5px;
}

.product_1 ol > li:before {
    margin-right: 10px;
    vertical-align: top;
    line-height: 45px;
}
.product_1 ol > li:before {
    content: counter(items) ". ";
}
.icon_hyperlink{width: 15px; height: 15px; margin: 0px 10px;}
/* .product_1 ol > li:nth-child(n+10):before {
    content: counter(items) ". ";
} */
.contents_footer{display: flex; justify-content: space-evenly; align-items: center;}
.privacy_policy{cursor: pointer;}
.icon_privacy_policy{height: 10px; margin: 0px 10px; transition: 0.5s;}
.icon_privacy_policy_clicked{rotate: 180deg; transition: 0.5s;}
.app_icon{height: 50px; width: 50px; border-radius: 5px; border: 1px black solid; box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); margin-right: 10px;}
.privacy_list{position: absolute; bottom: calc(5vh + 50px); list-style: none; display: none;
      border-radius: 5px; padding: 5px 10px; background-color: lightgray; border-radius: 5px;}
.privacy_list_clicked{display: block;}
.privacy_list > li{padding: 5px 0px;}
.hover-bold{font-weight: normal;}
.hover-bold:hover{font-weight: bold;}

@media screen and (max-width: 640px){
    ol{padding-left: 10px;}
    ul{padding-left: 10px;}

    .slogan{font-size: 25px; font-weight: 800;}
    .contents_footer{display: block;}
    .contents_footer > *{display: flex; justify-content: center;}
    .privacy_list{bottom: calc(5vh + 100px);}
    .icon_hyperlink{margin: 0px 10px;}
    .app_date{flex-shrink: 0;}
}