/* 메인 */
#content  {width:100%; max-width: 1920px; margin: 110px auto 0; position:relative;}
#content .paragraph {width:100%; display:inline-block; position:relative; padding: 120px 0;}
#content .paragraph .inner {position:relative;}

/* 메인 외국 사이트 링크 */
.country_pc {position: absolute; top: 350px; left: 0px; transform: rotate(-90deg); z-index: 51; display: flex; align-items: center; gap: 30px; color: #a18b62;}
.country_pc:after {content: ""; display: block; position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 18px; background: #a18b62;}

/* main */
#content #main {width: 100%; padding: 70px 0 100px;}
#content #main .inner {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 600px;}
#content #main .inner .main_box {position: relative;}
#content #main .inner .main_box a {width: 100%; height: 100%; display: block;}
#content #main .inner .main_box.main_box1 {background: #fbf9f4; grid-row: 1 / 3; color:#a18b62;}
#content #main .inner .main_box.main_box2 {background: #d9b959; color:#fff;}
#content #main .inner .main_box.main_box3 {background: url(images/main_img03.jpg) no-repeat center; background-size: 100%; transition: background-size .5s ease; grid-column: 3 / 5; color:#a18b62}
#content #main .inner .main_box.main_box4 {background: #f6f1e4; color:#a18b62;}
#content #main .inner .main_box.main_box5 {background: #c7c5c6; color:#fff;}
#content #main .inner .main_box.main_box6 {background: #f2e2ce; color:#a18b62;}
#content #main .inner .main_box.main_box7 {background: url(images/main_img05.jpg) no-repeat center left; background-size: 100%; transition: background-size .5s ease; grid-column: 4 / 6; color:#a18b62;}

#content #main .inner .main_box.main_box1:hover,
#content #main .inner .main_box.main_box3:hover,
#content #main .inner .main_box.main_box4:hover,
#content #main .inner .main_box.main_box5:hover,
#content #main .inner .main_box.main_box7:hover {background-size: 107%; transition: background-size .5s ease;}

#content #main .inner .main_box p {font-weight: 600; font-size: 24px;}
#content #main .inner .main_box.main_box1 p,
#content #main .inner .main_box.main_box2 p,
#content #main .inner .main_box.main_box4 p,
#content #main .inner .main_box.main_box5 p,
#content #main .inner .main_box.main_box6 p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#content #main .inner .main_box.main_box3 p {position: absolute; top: 50%; left: 22%; transform: translate(-50%, -50%);}

#content #main .inner .main_box.main_box7 p {position: absolute; top: 50%; right: 10%; transform: translate(-50%, -50%);}



/* main scrolling text */
.scrolling_text_bg {margin-top: -240px; margin-bottom: -140px;}

.scrolling_text_bg .track {overflow:hidden; position:relative;}

.scrolling_text_bg .track .jost:after {
    content:"";
    white-space:nowrap;
    padding-right:50px;
}

.scrolling_text_bg .track .jost {
    font-size: 25rem;
    color: rgba(201,170,47,0.1);
    padding-left:100%;
    display:inline-block;
    white-space:nowrap;
    overflow: hidden;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:160s;
    animation-iteration-count:infinite;
}

@keyframes marquee {
    from   {transform: translate(0%);}
    99%,to {transform: translate(-100%);}
}


/* 미디어쿼리 반응형 */
@media (max-width: 1600px) {
    #content  {margin: 150px auto 0;}

    /* 메인 외국 사이트 링크 */
    .country_pc {display: none;}

    /* main */
    /* #content #main {max-width: 1200px; margin: 0 auto; padding: 0 0 80px 0;}
    #content #main .inner {height: 1600px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr;}
    #content #main .inner .main_box.main_box1 {grid-column: 1 / 2; grid-row: 1 / 3;}
    #content #main .inner .main_box.main_box2 {grid-column: 2 / 3; grid-row: 1 / 2;}
    #content #main .inner .main_box.main_box3 {grid-column: 1 / 4; grid-row: 3 / 4;}
    #content #main .inner .main_box.main_box4 {grid-column: 1 / 2; grid-row: 4 / 5;}
    #content #main .inner .main_box.main_box5 {grid-column: 2 / 3; grid-row: 2 / 3;}
    #content #main .inner .main_box.main_box6 {grid-column: 2 / 3; grid-row: 4 / 5;}
    #content #main .inner .main_box.main_box7 {grid-column: 1 / 4; grid-row: 5 / 6;}

    #content #main .inner .main_box.main_box1,
    #content #main .inner .main_box.main_box3,
    #content #main .inner .main_box.main_box4,
    #content #main .inner .main_box.main_box5,
    #content #main .inner .main_box.main_box7 {background-size: cover;}

    #content #main .inner .main_box.main_box1:hover,
    #content #main .inner .main_box.main_box3:hover,
    #content #main .inner .main_box.main_box4:hover,
    #content #main .inner .main_box.main_box5:hover,
    #content #main .inner .main_box.main_box7:hover {background-size: cover; transition: unset;} */

    #content #main .inner .main_box.main_box1,
    #content #main .inner .main_box.main_box3,
    #content #main .inner .main_box.main_box4,
    #content #main .inner .main_box.main_box5,
    #content #main .inner .main_box.main_box7 {background-size: cover;}

    /* #content #main .inner .main_box.main_box3 p {color: #fff;} */

    #content #main .inner .main_box.main_box1:hover,
    #content #main .inner .main_box.main_box3:hover,
    #content #main .inner .main_box.main_box4:hover,
    #content #main .inner .main_box.main_box5:hover,
    #content #main .inner .main_box.main_box7:hover {background-size: cover; transition: unset;}
}

@media (max-width: 1500px) {
    
}

@media (max-width: 1400px) {
    
}

@media (max-width: 1300px) {
    
}

@media (max-width: 1200px) {
    /* main */
    #content #main {max-width: 1200px; margin: 0 auto; padding: 0 0 80px 0;}
    #content #main .inner {height: 1600px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr;}
    #content #main .inner .main_box.main_box1 {grid-column: 1 / 2; grid-row: 1 / 3;}
    #content #main .inner .main_box.main_box2 {grid-column: 2 / 3; grid-row: 1 / 2;}
    #content #main .inner .main_box.main_box3 {grid-column: 1 / 4; grid-row: 3 / 4;}
    #content #main .inner .main_box.main_box4 {grid-column: 1 / 2; grid-row: 4 / 5;}
    #content #main .inner .main_box.main_box5 {grid-column: 2 / 3; grid-row: 2 / 3;}
    #content #main .inner .main_box.main_box6 {grid-column: 2 / 3; grid-row: 4 / 5;}
    #content #main .inner .main_box.main_box7 {grid-column: 1 / 4; grid-row: 5 / 6;}
}

@media (max-width: 1100px) {
    
}

@media (max-width: 1024px) {
    
}

@media (max-width: 960px) {
    
}

@media (max-width: 840px) {
    
}

@media (max-width: 720px) {
    /* main */
    #content #main .inner {height: 1200px;}
}

@media (max-width: 640px) {
    #content {margin: 120px auto 0;}
    #content .paragraph {padding: 60px 0;}

    /* main */
    #content #main .inner .main_box p {font-size: 18px;}
}


@media (max-width: 600px) {
    /* main */
    #content #main .inner {height: 100vh;}
    /* #content #main .inner .main_box.main_box3 p {right: 0;} */

    /* main scrolling text */
    .scrolling_text_bg {margin-top: -155px; margin-bottom: -55px;}
    .scrolling_text_bg .track .jost {font-size: 15rem;}
}


@media (max-width: 540px) {
    
}


@media (max-width: 480px) {
    #content {margin: 100px auto 0;}

    /* main */
    /* #content #main .inner .main_box.main_box3 {color: #fff;}
    #content #main .inner .main_box.main_box3 p {right: unset; left: 50%;} */
}


@media (max-width: 400px) {
    
}