@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Nanum+Gothic&family=Noto+Sans+KR:wght@700&family=Noto+Serif+KR&display=swap');
* {
    margin:0;
    padding:0;
    /*padding속성은 내용(content)과 테두리(border))사이의 간격인 패칭 영역의 크기 설정*/
    box-sizing:border-box;
    /*box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경
      속성 값을 border-box로 지정하면 테두리를 포함한 크기를 지정*/
}

a, a:link, a:visited {
    color: inherit;
    /*inherit은 상속*/
    text-decoration: none;
}


li {
    list-style:none;
}

.container {
    width: 1140px;
    margin: 0 auto;
    /*margin:0 auto;로 하면 width의 넓이로 중앙에 맞추는 효과*/
}

main .container {
    width: 1040px;
}

section .container {
    width: 1040px;
}

section {
    font-family: 'Spoqa Han Sans', 'Noto Sans', 'Noto Serif KR', sans-serif;
    padding:5rem;
}

 /*의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정한다. 인덱스 1부터 시작한다. 2 -> 4 -> 8 -> ... 순으로 적용*/
section:nth-child(2n) {
    background-color: #f8f8f8;
    /*#f8f8f8는 회색의 매우 밝은 색조이다.*/
}

section .title {
    margin-bottom: 3rem;
}

section .title h4 {
    font-size: 1.35rem;
    color: #0c2581;
    position: relative;
    /*position속성 정리
    staitc: 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
    relative: static인 상태를 기준으로 움직임. 태긔의 위치를 살짝 변경하고 싶을 때 위, 아래, 왼쪽 속성을 사용해 위치 조절가능
    absolute: position:static속성을 가지고 있지 않은 조상을 기준으로 움직인다.
    fixed: 원하는 위치에 고정하기 위해*/
}

section .title h2 {
    font-size:3.5rem;
}

section .title p {
    font-size: 1.15rem;
}



/*header*/
header {
    position: fixed;
    top:0;
    width:100%;
    padding:1rem;
    /*background-color: black;*/
    z-index:1;
    /*z-index는 가중치*/
    background-color: black;
}

header .container {
    display:flex;
    /*display:flex; 해당 요소를 블록 타입으로 정의하기*/
    justify-content:space-between;
    /*justify-content:space-between; 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치
      justify-content는 플렉스 요소의 수평 방향 정렬 방식을 설정*/
    align-items: center;
    /*align-items: center; 플렉스 욧는 플렉스 컨테이너의 가운데에 배치
      align-items는 플렉스 요소의 수직 방향 정렬 방식 설정*/
    width: 100%;
    /* width: 100%; 요소가 부모 요소의 너비에 맞춰 늘어나긴 하지만 
                    auto를 지정한 것과 달리 페이지를 처음 불러올 
                    때에만 자동으로 늘어난다. 요소에 가로 마진,테두리,페딩을
                    지정하면 그 요소의 너비가 부모 너비를 넘어서 늘어난다.*/
}

header button {
    background-color: transparent;
    /*background-color: transparent; 배경을 투명색으로 해준다.*/
    border: 0;
    /*border:0; 테두리 없애기*/
    cursor: pointer;
    /*cursor: pointer; 커서 올리면 마우스 모양*/
    color:white;
}

header h1 button {
    font-size:2rem;
    /*1.5em, 1.5rem; 상대적인 크기 정함
               em(상위 요소 크기의 1.5배)
               rem(html요소의 크기의 몇 배인지로 크기 정함)*/
    font-weight: bolder;
    /*font-weight: bolder; 상속된 값보다 굵은 굵기
      font-weight 글자의 굵기를 정한다.*/
    /*margin-left:6rem;*/
    /*제목 여백*/
}

header h1 input {
    background-color: transparent;
    padding: 0.2rem;
    margin-left: 0.5rem;
    font-size: 1.2rem;
    color: white;
    border: none;
    border-bottom: solid white 2px;
}

header h1 input::placeholder {
    font-size: 1rem;
    color: white;
}

header nav ul {
    display: flex;  
    /*
    flex: 세로 배치
    block: 가로 배치
    */
}

header nav ul li {
    padding: 10px;
}

/*
header nav ul li:nth-child(4){
    padding-right:6rem;
}*/

header nav ul li button {
    font-size:1.2rem;
}

/*main*/
main {
    font-family: 'Spoqa Han Sans', 'Noto Sans', 'Noto Serif KR', sans-serif;
    width:100%;
    height:100vh;
    color: white;
    background:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://skgk.co.kr/image/company/skgk_main.jpg') center center;
    /* background:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('../img/main6.jpg') center center; */
    /*background: linear-gradient((rgba(0,0,0,0.8), rgba(0,0,0,0.8))는 그라데이션 검은색으로 살짝 url(사진 링크) center center 사진 위치 정가운데로*/
    background-size: cover;
    /* 화면 크게에 알아서 잘라서 맞춤 */
    display: flex;
    /*display:flex; 해당 요소를 블록 타입으로 정의하기*/
    justify-content: center;
    /*justify-content:center;이거를 사용할려면 display:flex; 이것이 선행되어야 한다. justify-content는 플렉스 요소의 수평 방향 정렬 방식을 설정한다. justify-contnet:center;은 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치된다.*/
    align-items: center;
    /*align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정한다. align-items:center; 플레스 요소는 플렉스 컨테이너의 가운데에 배치된다.*/
    text-align: center;
    /*text-align은 텍스트의 정렬 방향을 의미한다.text-align:center 텍스트를 중앙 정렬한다.*/
}

main h4 {
    font-size:2rem;
}

main .container .download {
    font-size:1.5rem;
}

main h2 {
    font-size: 3.5rem;
    margin: 2rem 0;
    /*margin: 2개의 값이면 첫 번째는 위아래 두 번째는 왼오이다.*/
    letter-spacing: 3px;
    /*letter-spacing:3px; 글자간격을 3px로 만드는 것이다.*/
}

main p {
    max-width: 500px;
    /*max-width는 한줄의 길이를 지정하는 속성이다.*/
    margin: 0 auto;
    font-size: 1.25rem;
}

main p.mean {
    font-weight: bolder;
    font-size: 1.5rem;
}



main button.download {
    background-color: transparent;
    border: 3px solid white;
    /*border: 3px solid white;는 크기, 두께, 색상을 정한다.*/
    border-radius:20px;
    /*border-radius:20px;테두리를 약간 둥글게 만든다.*/
    padding: 1rem 2rem;
    margin-top: 3rem;
    color: white;
    font-weight: bold;
    /*font-weight:bold;글꼴 굵기를 지정한다.여기서는 두껍게*/
    cursor: pointer;
}

main button.mouse {
    background-color: transparent;
    border:none;
    font-size:2rem;
    position:absolute;
    /*position:absolute;는 지정방식은 고정 위치가 뷰포트(조상따름)를 기준으로 위치를 결하는 것과 동일*/

    bottom:1rem;
    /*아래로 1rem만큼 이동*/
    left:50%;
    /*가운데로*/
    transform: translateX(-50%);
    /*transform:translateX(-50%);는 좌우(수평방향)의 이동 거리 값을 지정한다.*/
    /*좌표지정*/
    
    color:white;

    animation: upDown 1s ease-in-out infinite;
    /*animation: 이름 시간 작동방식 무한히;*/
}

/*x ::after(before){y} x가 적용된 후(전)에 y실행*/
main h2 span::after {
    content:"";
    height: 40px;
    width:3px;
    background-color:#fff;
    display:inline-block;
    /*display 속성값이 블록(block)인 요소는 언제나 새로운 줄에서 시작하며, 해당 라인의 모든 너비를 차지한다.
    속성값이 인라인(inline)인 요소는 새로운 줄에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML요소의 내용(contnent)만큼 차지 한다.
    display:inline-block;는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다. 또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있다.*/
    animation: blink .7s ease-in-out infinite;
}



/* intro */
/*x ::after{y} x가 적용된 후(전)에 y실행 즉, 맨 마지막에 실행을 한다. 
반대로 before은 실행을 하기 전에 실행된다. */
section .intro-self::after {
    content:'';
    clear: both;
    /*clear속성은 float를 취소하는 것이다.
    clear: both;는 모든 float를 취소한다고 생각할 것.*/
    display:block;
    /*display:block;은 언제나 새로운 줄에서 시작하며 해당 줄의 모든 너비를 차지한다.*/
}

section .intro-self .left { /**/
    width: 63%;
    float: left;
    padding:0 1rem;
}

section .intro-self .left p { /**/
    font-size: 1.15rem;
    line-height: 2rem;
    margin: 1rem 0;
    font-weight: bolder;
}

section .intro-self .left p:last-child { /**/
    margin: 0;
}

section .intro-self .left h3 { /**/
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

section .intro-self .left h3 strong { /**/
    color: #0c2581;  /*skgk log color*/
}

section .intro-self .right {
    margin-right: 3%;
    margin-top:10rem;
    float:left;
    width:34%;
}

section .intro-self .right .card {
    border: 1px solid #ccc;
    padding: 1rem;
    display: flex;
    /*display: flex;는 수평이 될 요소들의 container에 적용한다.*/
    align-items: center;
    /*align-items속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정한다.
    align-items: center; 안의 내용 요소의 정렬 상태를 가운데로 설정한다.*/
    margin-bottom: 1.52rem;
}

section .intro-self .right .card:last-child {
    margin-bottom: 0;
}

section .intro-self .right .card i {
    font-size: 3rem;
    margin-right:15px;
    cursor: pointer;
}

section .intro-self .right .card h5:hover {
    cursor: pointer;
}

section .intro-self .right .card p:hover {
    cursor: pointer;
}


section .intro-self .map iframe{
    margin-top:2rem;
    width:100%;
}


/*product*/
/*제품소개*/
/*초기화를 하지 않으면 아래의 자식 노드에 영향을 준다.*/

#product::after {
    content: "";
    clear: both;
    display: block;
}

/* section .product-me::after{
    content:"";
    display:block;
    clear: both;
} */

#product .search-wrapper {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
}

#product .search-wrapper #productSearch {
    font-size: 1rem;
    position: relative;
    color: #222222;
    display: block;
    width: 100%;
    height: 3rem;
    border: none;
    border-bottom: solid #aaaaaa 1px;
    /* padding-bottom: 0; */
    padding-left: 1rem;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    background: transparent;
}

section .container .navigation {
    position: relative;
    display : flex;
    /*display:flex; 해당 요소를 블록 타입으로 정의하기*/
    justify-content:space-between;
    /*justify-content:space-between; 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치
    justify-content는 플렉스 요소의 수평 방향 정렬 방식을 설정*/
    width: 80%;
    /* width: 100%; 요소가 부모 요소의 너비에 맞춰 늘어나긴 하지만 
    auto를 지정한 것과 달리 페이지를 처음 불러올 
    때에만 자동으로 늘어난다. 요소에 가로 마진,테두리,페딩을
    지정하면 그 요소의 너비가 부모 너비를 넘어서 늘어난다.*/
    text-align:center;
    margin-bottom: 2rem;
}

section .container .navigation button {
    font-size: 1.2rem;
    background-color: transparent;
    /*background-color: transparent; 배경을 투명색으로 해준다.*/
    padding: 0.5rem;
    border: 2px solid #e2e2e2;
    /*완전 회색 #303030*/
    border-radius: 0.8rem;
    /*border:0; 테두리 없애기*/
    /*cursor: pointer; 커서 올리면 마우스 모양*/
}

#product .user-cards {
    position: relative;
    font-size: 1rem;
    display: block;
    width: 100%;
}

input::placeholder { color: #aaaaaa; }
input:focus { outline: none; }

#product .container p {
    line-height: 1.5rem;
    color:#666;
    padding-bottom: 0.5rem;
}

#product .container .productDescription {
    color:#a0a0a0;
    line-height: 1rem;
    padding-left: 0.5rem;
}

#product .card .modelName {
    font-size: 1.1rem;
    font-weight: bolder;
}

#product .card a img {
    width: 8rem;
    height: auto;
    /* object-fit: cover; */
    display: none;
}

.companyName:hover,
.clicked {
    background-color: #0c2581;
    font-weight: bold;
    cursor: pointer;
    color: #0c2581;
}

#product .card p span:hover ~ .productImg {
    display: block;
}

/*mom*/
/* #product .card a img:hover {
    display: block;
} */

/* #product .card p:hover { */
#product .card p span:hover{
    color: black;
    font-weight: 900;
}

#product .card a:hover .modelName {
    color: black;
}

.hide {
    display: none;
}

.pageHide {
    display: none;
}

/* pagination */

#product .pagination {
    display: flex;
    justify-content: center;
    /*가로 축을 기준으로 center에 둠*/
    align-items: center;
    /*세로 축을 기준으로 center에 둠*/
    margin-top: 20px;
}

#product .pagination button {
    margin: 0 5px;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    color: #666;
    font-size: 16px;
}

#product .pagination button:disabled {
    color: #cccccc;
}

#product .pagination .page-numbers {
    font-size: 1rem;
    display: flex;
    margin: 0 5px;
}

/* #product .pagination .page-numbers button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
} */

#product .pagination .page-numbers button.active {
    color: #007bff;
    font-weight: bold;
}

#product .pagination .page-numbers button:hover {
    font-weight: bold;
}

#product .pagination .arrow {
    font-size: 1.2rem;
    line-height: 1;
}

#product .pagination .arrow:hover {
    cursor: pointer;
    font-weight: bolder;
}




/*background*/
.bg{
    width: 100%;
    height:100vh;
    background:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://skgk.co.kr/image/company/skgk_bg.jpg') center center;
    /*background: linear-gradient((rgba(0,0,0,0.8), rgba(0,0,0,0.8))는 그라데이션 검은색으로 살짝 url(사진 링크) center center 사진 위치 정가운데로*/
    background-size: cover;


    /* background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url("https://skgk.co.kr/image/company/woman_notebook.jpg") center center; */
    /* background-size: cover; */
    background-attachment: fixed;
    /*background-attachment: fixed;시 문서를 스크롤 할 경우 배경 이미지가 고정된 위치를 가진다. 예를 들어 body에 fixed로 배경이미지를 적용한 경우 컨텐츠는 오르고 내리되, 배경 이미지는 움직이지 않는다.*/
}

/*
header nav ul li:nth-child(4){
    padding-right:6rem;
}*/

/* section .container .navigation nav ul li button{
    font-size:1.2rem;
    cursor: pointer;
} */



/*nth-child 클래스는 형제 목록에서 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정한다. */


/* section .title h2 a{
    font-size:1.2rem;
    text-decoration: underline ;
    color: #0c2581;
} */


/* contact */
#contact {
    background-color: #f8f8f8;
}

#contact::after {
    display: block;
    clear: both;
    content: "";
}

section .contact_outline .contact_content p {
    margin-bottom: 0.7rem;
    font-size: 1.25rem;
    /* line-height: 2rem; */
}

section .contact_outline .contact_img {
    margin-top: 3rem;
    width: 100%;
}

section .contact_outline .contact_img .contact_card {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    margin-right: 5%;
    padding: 1rem;
    width: 30%;
    float: left;
}

section .contact_outline .contact_img .contact_card:last-child {
    margin-right: 0;
}

section .contact_outline .contact_img .contact_card p:hover {
    cursor: pointer;
}


section .contact_outline .contact_img .contact_card .contact_title {
    font-size: 1.1rem;
    font-weight: 100;
    padding-right: 3px;
    padding-bottom: 5px;
}

section .contact_outline .contact_img .contact_card .contact_text {
    font-size: 1.3rem;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    gap: 10px; /* 링크 사이의 간격 */
}

section .contact_outline .contact_img .contact_card .contact_text a {
    /* flex: 0 0 47%; 링크의 너비를 45%로 설정 */
    margin: 0 5px;
    text-align: center;
}

section .contact_outline .contact_bg_img {
    margin-top: 4rem;
    margin-bottom: 2rem;
    width: 100%;
}

/*
last-child는 형제 요소중 가장 마지막의 요소를 의미한다. 
*/
/* section .contact_outline .contact_img .contact_card:last-child .contact_text {
    display: flex;
    justify-content: center;
} */


/*agree*/

#agree {
    background-color: white;
}
.agree_main {
    margin-top: 3rem;
}

#agree  h1 {
    font-weight: bolder;
    padding-bottom: 2rem;
    font-weight: bolder;
}

#agree h2 {
    font-weight: bolder;
    padding-bottom: 1.5rem;
}

#agree h3 {
    font-weight: bolder;
    padding-top: 1rem;
    font-weight: bolder;
}

#agree h4 {
    font-weight: bolder;
    padding-top: 0.5rem;
}

.person p {
    color: #262A2D;
    padding-bottom: 0.3rem;
}

.email p {
    color: #262A2D;
    padding-bottom: 0.3rem;
}

.email h2 {
    font-weight: bolder;
    padding-top: 1.7rem;
}




/*company*/
#company {
    background-color: white;
}

section .do-me::after {
    content:"";
    display:block;
    clear:both;
}

  /* 2사각형 크기와 간격, 내부 여백 설정 */
section .do-me .do-inner{
    background-color:#fff;
    width:22%;
    padding:2rem; 
    float:left;
    margin-right:4%;
    cursor:pointer;
}
  /* 3마지막 사각형의 외부 여백 설정 */
section .do-me .do-inner:last-child{
    margin-right:0;
}
  /* 4아이콘 폰트 크기와 색상 */
section .do-me .do-inner .icon i{
    font-size:1.5rem;
    display:none;
}

/*서진이 이름 김
section .do-me .do-inner .seojin i{
    font-size:1.4rem;
    z-index: 1;
    color:#ff6a6a;
}
*/

section .do-me .do-inner .content p span {
    display:none;
}

section .do-me .do-inner .log span img{
    height: auto;
    width:100vh;
    /*넓이에 따라 높이를 자동 조절한다.*/
    position:relative;
    max-width:100%;
}

section .do-me .do-inner .seojin_img span img{
    margin-top:0;
}

section .do-me .do-inner .siemens_img span img{
    margin:1.6rem 0;
}

section .do-me .do-inner .kansai_img span img{
    margin:1.6rem 0;
}

section .do-me .do-inner .nohken_img span img{
    margin-top:1rem;
}

  /* 5HTML5, CSS3, BootStrap v5.0 텍스트 크기와 간격 */
section .do-me .do-inner .content h3{
    font-size:2rem;
    margin:1rem 0;
}
  /* 6사각형 텍스트 크기 */
section .do-me .do-inner .content p{
    font-size:1.15rem;
}
  /* 7do-inner 클래스에 마우스를 올리면 배경색과 텍스트 색상 변경 */
section .do-me .do-inner:hover {
    background-color:#0c2581;
    color:white;
}

section .do-me .do-inner:hover .icon i {
    transition-duration: 0.7s;
    margin-top: 2rem;
    display: inline-block;
}

  /* 8do-inner 클래스에 마우스를 올리면 아이콘 폰트 색상 변경 */
section .do-me .do-inner:hover i {
    transition-duration: 0.5s;
    margin-top: 3rem;
    color:white;
}

section .do-me .do-inner:hover #seojin i {
    margin-top:0;
}

section .do-me .do-inner:hover .content span {
    transition-duration: 0.7s;
    margin-top: 2rem;
    display: block;
    margin-bottom: 3rem;
}

section .do-me .do-inner:hover .log span {
    display: none;
}


/*footer*/
section .footer::after{
    content:"";
    display:block;
    clear:both;
}

#last {
    background-color: black;
    color: #606060;
    padding: 2rem 0;
}

section .footer .footer_menu {
    text-align: center;
}

section .footer .footer_menu a{
    width: 100%;
    padding: 0px 24px 15px 24px;
}

section .footer hr{
    margin:1rem 0;
    width: 100%;
}


section .footer .summary{
    display: flex;
}

section .footer .summary .summary_main {
    float:left;
    width: 15%;
    margin-left:10%;
    margin-right:5%;
}

/* section .footer .summary .summary_main .summary_main_img {
    width: 5%;
} */

section .footer .summary .summary_main .summary_main_name {
    width: 100%;
    color: white;
    float: left;
    text-align: center;
}

section .footer .summary .summary_main img {
    position:relative;
    max-width:100%;
}

section .footer .summary .summary_content .summary_right {
    float:left;
    position:relative;
    width:65%;
    margin-left:5%;
    /*line-height: 2rem;*/
}

/*
section .footer .summary span{
    padding-right:24px;
}
*/

/*세로로 수직선 그리기
    width: 100%;
    border-right:1px solid gray;
*/






@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes blink {
    0%{
        opacity: 1;
        /*opacity는 불투명도를 설정한다.
          opacity: 1;는 선명하게
          opacity: 0;는 안보이게 해준다.*/
    }
    100%{
        opacity:0;
    }
}


/*animation 정의 내리기*/
@keyframes upDown{
    0%{
        bottom:1rem;
    }
    50%{
        bottom:1.5rem;
    }
    100%{
        bottom:1rem;
    }
}


/*반응형 웹사이트 만들기*/
/*@media 어디다 보여줄거니? and 언제해줄거니?
@media screen and (max-width: 1140px)는 화면에만 적용할거고 1140px보다 작아졌을 때에 적용할거야.*/
@media all and (max-width: 1140px){
    /*header*/
    main .container{
        width:992px;
    }
    section .container{
        width:600px;
    }
    /*intro_me*/
    section .intro-self .left{
        width:100%;
        margin-bottom:1.5rem;
        margin-left:0rem;
        margin-top:0rem;
    }
    section .intro-self .right{
        margin-left: 3%;
        margin-right: 3%;
        width:94%;
        padding:0rem;
        margin-top: 0;
    }
    section .intro-self .map{
        width:100%;
        
    }
    /*what_i_do*/
    section .do-me .do-inner{
        width:100%;
        margin-bottom: 1rem;
    }
    /* section .do-me .do-inner{
        width:48%;
        margin-bottom: 1.5rem;
        margin-right:0;
    }
    section .do-me .do-inner:nth-child(2n+1){
        margin-right: 4%;
    } */
    /*portpolio*/
    /* section .product-me .product-inner{
        width: 48%;
        margin-right:0;
    }
    section .product-me .product-inner:nth-child(2n+1){
        margin-right:4%;
    } */
    #product .container #seojin_left{
        
        width:100%;
        margin-bottom: 3rem;
        
    }
    #product .container .right{
        width:100%;
    }
    /*contact_with_me*/
    /* section .container .title h2{
        padding-right:2em;
    }
    section .footer .summary .summary_main{
        margin-left:30%;
        margin-right:30%;
        width:40%;
    }
    section .footer .summary .summary_main a img{
        max-width:100%;
    }
    section .footer .summary .summary_content .summary_right{
        margin-top: 2rem;
        width:90%;
        text-align: center;
    } */
    section .container .navigation {
        width: 100%;
    }
}

@media all and (max-width: 992px){
    /*html*/
    html{
        font-size:14px;
    }
    /*header*/
    main .container{
        width:768px;
    }
    /*portpolio*/
    /* section .product-me .product-inner{
        width: 100%;
        text-align: center;
        text-align: center;
    } */
    
}

@media all and (max-width: 768px){
    /*html*/
    html{
        font-size:13px;
    }
    /*header*/
    main .container{
        width:576px;
    }
    section .container{
        width:400px;
    }
    section .container .navigation button {
        font-size: 0.8rem;
        background-color: transparent;
        /*background-color: transparent; 배경을 투명색으로 해준다.*/
        border: 1px solid #e2e2e2;
    }
    .container h1 button {
        font-size: 18px;
    }
    .container h1 input {
        font-size: 11px;
    }
    .container nav ul li button{
        font-size: 12px;
    }
    .container nav ul li a img {
        font-size: 10px;
    }
    section .contact_outline .contact_img .contact_card {
        width: 100%;
        margin: none;
        margin-bottom: 1rem;
    }
}

@media all and (max-width: 576px){
    /*html*/
    html{
        font-size:12px;
    }
    /*header*/
    main .container{
        width:480px;
    }
    section .container{
        width:360px;
    }
    /*what_i_do*/
    
    section .do-me .do-inner{
        width:100%;
        margin-right:0;
    }
    section .footer .summary .summary_content .summary_right p {
        font-size: 0.7rem;
    }
}

@media only handheld and (max-width: 576px){
    html{
        font-size:11px;
        margin-right:2rem;
    }
}
@media all and (max-width: 400px){
    /*html*/
    html{
        font-size:11px;
    }
    /*header*/
    main .container{
        width:320px;
    }
    section .container{
        width:320px;
    }
    /*main*/
    main h4{
        font-size:1.5rem;
    }
    /*intro_me*/
    section .title{
        font-size:3rem;
    }
    section .footer .summary .summary_content .summary_right p {
        font-size: 0.4rem;
    }
}