*{
    font-family: 'Noto Sans', sans-serif;
    list-style: none;
    /*text-decoration: none;  /*텍스트 밑에 밑줄 없에주는거, 그대신 모든 element/코드에 적용됨 */
    border-collapse: collapse;
    margin:0px;
    padding:0px;
    color:black;
    scroll-behavior: smooth;
    scroll-padding: 10rem;

}


h1 {
    font-size: 48px;
    font-weight: 100;
}

.contents1{
    font-size: 20px;
    font-weight: lighter;
}

.contents2{
    font-size: 19px;

}

.contents1_bold{
    font-size: 23px;
    font-weight: bolder;
}

.contents3{
    font-size: 14px;
    font-weight: 100;
}

/*여기 위에는 다 공통 요소*/

/* Dropdown Button */
.dropbtn {
    background-color: #051626;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;

    position: relative;
    right: -1550px;
    bottom: -69px;
    
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;

    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    right: -1550px;
    bottom: -200px;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
}


  /*여기 위에는 다 dropdown */


.intro_bg{
    background-color: #051626;
    width:100%;
    height:718px;
    
}

.header{
    display:flex;
    width: 1280px;
    margin:auto;
    height: 86px;
}

.searchArea{
    width:300px;
    height:40px;
    background: rgba(0,0,0,0.5);
    border-radius:5px;
    margin-top:24px;
}

.searchArea > form > input{
    border:none;
    width:250px;
    height:40px;
    background:rgba(0,0,0,0.0)
    color: #fff;
    padding-left:10px;
}

.searchArea > form > span{   /*오른쪽에서 왼쪽순으로 들어가는거임. searchArea안에 form 안에 span */
    width:50px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    right: -11px; /*검색 아이콘 중앙으로 보내주기*/
}

.description > p{
    color: white;
    text-align: center;  
    position: relative; 
    top: -100px;    /*숫자에 마이너스 붙여야지 위로 올라가는걸로됨*/
    width: 430px;
    margin: auto;
    font-style: italic;

    
    /*An element with position: relative; is positioned relative to its normal position. 
    Setting the top, right, bottom, and left properties of a relatively-positioned element 
    will cause it to be adjusted away from its normal position. 
    Other content will not be adjusted to fit into any gap left by the element.*/
}

.description > a{
    color: skyblue;
    position: relative; 
    top: -100px;
    font-style: italic;
    font-size: 14px;
}

.nav{
    display:flex;
    justify-content: flex-end;
    line-height:86px;
    width:calc(1280px - 300px);
    color:white:
    
}

.nav > li{
    margin-left:84px;
}

.nav > li > a {
    color: white;
    text-decoration: none;
    position: relative;
    
}

.amount{
    display: flex;
    width:1280px;
    background:white;
    margin: auto;
    position: relative;
    top:-66px;
    border:1px solid gray ;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.5); /* 첫번째: 우측으로 #픽셀만큼 박스 쉐도우 --> 좌측으로하려면 숫자에 마이너스 붙이면됨 / 두번째: 하단으로 #픽셀만큼 박스 쉐도우 / 세번째: 그림자 흐려지는 정도 */
}

.amount > li > div {
    text-align: center;
    height: 57px;
    margin-top: 37px;
    color: skyblue;
}

.amount > li:not(:last-child) > div {
    border-right:1px solid gray;
}

.amount > li {
    flex: 1;
    height: 132px;
}

.other_links1 > a{
    color: blue;
    font-weight: bold;
    position: relative; 
    top: 20px;
}




.intro_text{
    width:100%;
    margin: 165px auto 165px auto; /*높이 조정, 순서: 상-우-하-좌, 여기서 좌,우 가 auto */
    text-align: center;
    position: relative;
}


.intro_text > h1,
.intro_text > h4{
    position: relative;
    color:white;
    top: -50px;
}

.leopard_icon {
    position: relative;
    top: -40px;
}


/*main_text0*/

.main_text0{
    width: 100%;
    height: 718px;
    background-color: #f1f2f3;
    margin-top: -132px;
}

.main_text0 > h1{
    text-align: center;
    padding-top: 116px;
}

.main_text0 > .contents1{
    text-align: center;
}

.icons{
    display: flex; /*리스트면 원래 위에서부터 아래로 정열되는데 flex로 이제 horizontal align을 시킴*/ 
    width:1280px;
    height: 302px;
    /* background: orange; */
    margin:auto;

}

.icons > li{
    flex: 1;
    background: white;
    margin-top:49px;
    height:302px;
    text-align: center;

}

.main_text0 > .icons > li:not(:last-child){
    margin-right: 20px;
}

.icons > li > .icon_img{
    margin-top: 36px;
} 

.icons .contents3{
    width: 250px;
    margin: auto;
    /*letter-spacing: -1px;*/
}

.more{
    width: 100px;
    height: 30px;
    background-color: #2F7AF4;
    color: white;
    margin: auto;
    position: relative;
    font-size: 13px;
    top: 35px;
    line-height: 30px;
}

.more > a{
    color: white
}

/*이 밑에는 main_text1*/

.main_text1{
     width: 100%;
     height: 659px;
     background-color: #f1f2f3;
}

.main_text1 > h1 {
    padding-top: 50px;
    text-align: center;
}

.main_text1 > .contents1{
    text-align: center;

}


.more{
    .service{
        width: 1280px;
        display: flex;
        margin: 49px auto;
        /*background-color: skyblue;*/
        height: 427px;
    
    }
    
    .main_text1 > .service > .contents3{
        position: relative;
        right: -15px;
        font-size: 20px;
    }
    
    .service > .contents3 > h2{
        margin-top: 5px;
    }
    cursor: pointer; /*버튼 느낌 내주기*/
}









/*main_text2 밑으로다 이거임*/

.main_text2{
    top: 1979px;
    left: 0px;
    width: 1920px;
    height: 600px;
    margin: auto;
    background-image: url("image/contact.png");
}

.main_text2 > ul{
    display: flex;
    padding-top: 138px;
    position: relative;
    left: -15px;
}

.main_text2 > ul > li{
    flex: 1;
    text-align: center;
}

.main_text2 > ul > li > div > h1,
.main_text2 > ul > li > div{
    color: white;
}

.more2{
top: 2220px;
left: 370px;
width: 220px;
height: 40px;
line-height: 40px;
margin: 45px auto;
border: 1px solid white;
cursor: pointer;
}

footer{
    background-color: #1f1f1f;
    display: flex;
    padding: 30px;
    width: 1860px;
}

footer > div:first-child{
    color:white;
    position: relative;
    right: -270px;s
    top: 0px;
    flex: 3;
}

footer > div:last-child{
    color:white;
    flex: 9;
    position: relative;
    bottom: -20px;
}

/*CSS code for page_1*/






.caption_1 {
    text-align: center;
    position: relative;
    bottom: -50px;
    font-size: 24px;

}

.video_1 {
    position: relative;
    bottom: -100px;
}