/* 메인 인트로 페이지 */
#intro_main {width: 100%; margin: 0 auto; background: #000;}
#main_wrap {position: relative; width: 100%; left: 50%; transform: translateX(-50%); top: 100px;}
#main_wrap main {position: relative; width: 100%; height: calc(100vh - 100px);  overflow: hidden; left: 50%; transform: translateX(-50%);}

#main_wrap main > .intro_colorbg  {position: absolute; top: -20px; width: 100%; height: calc(100vh + 100px); overflow: hidden;}

/* 움직이는 애니메이션 - 메인 배경*/
@keyframes animate_04
{
    0% {transform: translatey(0);}
    25% {transform: translatey(-20px);}
    75% {transform: translatey(20px);}
    100%  {transform: translatey(0px);}
}

.container_pc {display: block;}
.container_mobile {display: none;}
.intro_nav_pc > ul { width: 100%; height: calc(100vh - 100px); overflow: hidden; position: relative;  z-index: 998;}

.intro_nav_pc > ul > li { position: absolute; width: 217px; height: 217px; display: flex; justify-content: center; align-items: center; font-size: 1.5em; color: rgba(0, 0, 0, .25); text-transform: uppercase; font-weight: 600; letter-spacing: .1em; cursor: pointer; transition: all .1s; border-radius: 50%;/* overflow: hidden;*/ z-index: 889; transition: all .2s;}

.intro_nav_pc > ul > li > a {width: 100%; height: 100%;}

/* 움직이는 애니메이션 - 메인 아이콘*/
@keyframes animate_03
{
    0% {transform: translatey(0);}
    25% {transform: translatey(-15px);}
    75% {transform: translatey(15px);}
    100%  {transform: translatey(0px);}
}

.random-circle { width: 88px; height: 88px; border-radius: 50%; /* 원 모양으로 만듦 */ position: absolute; z-index: 0; cursor: pointer; transition: transform 0.2s, background-color 0.2s;
}

.intro_nav_pc > ul > li.nav_list { position: absolute; transition: all .2s;}
.intro_nav_pc > ul > li.nav01 {top: 106px; left: calc( 100% - (100% - 19%)) ; /*background: #3A5FAC;*/ background: url(../images/intro_menuico01.png) no-repeat center; background-size: 96%;}
.intro_nav_pc > ul > li.nav02 {top: 420px; left: calc( 100% - (100% - 27%)); /*background: #F07D22;*/ background: url(../images/intro_menuico02.png) no-repeat center; background-size: 96%;}
.intro_nav_pc > ul > li.nav03 {top:106px; left: calc( 100% - (100% - 40%)); /*background: #DE1D8E;*/ background: url(../images/intro_menuico03.png) no-repeat center; background-size: 96%;}
.intro_nav_pc > ul > li.nav04 {top: 420px; left: calc( 100% - (100% - 47%)); /*background: #78B886;*/ background: url(../images/intro_menuico04.png) no-repeat center; background-size: 96%;}
.intro_nav_pc > ul > li.nav05 {top:106px; left: calc( 100% - (100% - 62%)); /*background: #EE6236;*/ background: url(../images/intro_menuico05.png) no-repeat center; background-size: 96%;}
.intro_nav_pc > ul > li.nav06 {top: 420px; left: calc( 100% - (100% - 69%)); /*background: #61C6C3;*/ background: url(../images/intro_menuico06.png) no-repeat center; background-size: 96%;}


/* .intro_nav_pc > ul > li.nav01:hover,.intro_nav_pc > ul > li.nav02:hover,.intro_nav_pc > ul > li.nav03:hover,.intro_nav_pc > ul > li.nav04:hover,.intro_nav_pc > ul > li.nav05:hover,.intro_nav_pc > ul > li.nav06:hover {background-size: 100%;} */


/* 하위메뉴 */
/* .boxA ul.Submenu, .boxB ul.Submenu, .boxC ul.Submenu, .boxD ul.Submenu, .boxE ul.Submenu, .boxF ul.Submenu {position: relative; width: 100%; height: 100%;} */
.boxA ul.Submenu li, .boxB ul.Submenu li, .boxC ul.Submenu li, .boxD ul.Submenu li, .boxE ul.Submenu li, .boxF ul.Submenu li {position: absolute;}

ul.Submenu li a img {transition: all .3s; transform: scale(0.9);}
ul.Submenu li:hover a img {transform: scale(1);}

.boxA ul.Submenu li:nth-of-type(1) {top: -62px; left: -105px;}
.boxA ul.Submenu li:nth-of-type(2) {top: -105px; left: 159px;}
.boxA ul.Submenu li:nth-of-type(3) {top: 158px; left: -114px;}

.boxB ul.Submenu li:nth-of-type(1) {top: -15px; left: -123px;}
.boxB ul.Submenu li:nth-of-type(2) {top: 176px; left: -99px;}
.boxB ul.Submenu li:nth-of-type(3) {top: 234px; left: 120px;}

.boxC ul.Submenu li:nth-of-type(1) {top: -89px; left: -71px;}
.boxC ul.Submenu li:nth-of-type(2) {top: 135px; left: -124px;}
.boxC ul.Submenu li:nth-of-type(3) {top: 4px; left: 245px;}

.boxD ul.Submenu li:nth-of-type(1) {top: -60px; left: -102px;}
.boxD ul.Submenu li:nth-of-type(2) {top: 170px; left: -104px;}
.boxD ul.Submenu li:nth-of-type(3) {top: 81px; left: 250px;}
.boxD ul.Submenu li:nth-of-type(4) {top: 232px; left:122px;}

.boxE ul.Submenu li:nth-of-type(1) {top: -102px; left: -52px;}
.boxE ul.Submenu li:nth-of-type(2) {top: 167px; left: -102px;}
.boxE ul.Submenu li:nth-of-type(3) {top: -73px; left: 208px;}
.boxE ul.Submenu li:nth-of-type(4) {top: 140px; left: 230px;}

.boxF ul.Submenu li:nth-of-type(1) {top: -64px; left: -92px;}
.boxF ul.Submenu li:nth-of-type(2) {top: 200px; left: -71px;}
.boxF ul.Submenu li:nth-of-type(3) {top: -40px; left: 226px;}
.boxF ul.Submenu li:nth-of-type(4) {top: 172px; left: 220px;}





/* 움직이는 애니메이션 */
@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}


@media all and (max-width: 1700px) {
    .container_pc {display: none;}
    .container_mobile {display: block;}
    #main_wrap {background-image: none;}
    #main_wrap main {height: auto; min-height: 100vh;}
    
    nav.intro_nav_mobile {width: 98%; margin: 20px auto;}
    nav.intro_nav_mobile > div:nth-of-type(2n-1) {border-bottom: 2px solid #ccc;}
    .container_mobile .accordion_first {width: 96%; height: 150px; margin: 15px auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 55px;}
    /* .container_mobile .intro_mobile_nav01 {border-bottom: 2px solid #3A5FAC;}
    .container_mobile .intro_mobile_nav02 {border-bottom: 2px solid #E91556;}
    .container_mobile .intro_mobile_nav03 {border-bottom: 2px solid #11A8EB;}
    .container_mobile .intro_mobile_nav04 {border-bottom: 2px solid #DE1D8E;}
    .container_mobile .intro_mobile_nav05 {border-bottom: 2px solid #0FD598;}
    .container_mobile .intro_mobile_nav06 {border-bottom: 2px solid #EE6236;}  */

    nav.intro_nav_mobile > div:nth-of-type(2n-1) > div:first-child {width: 50%; display: flex; justify-content: center;}

    .container_mobile .accordion_first div:last-child {width: 50%; display: flex; justify-content: center;}
    .container_mobile .accordion_second { width: 96%; margin: 0px auto 10px; padding-bottom: 20px; border-bottom: 1px solid #4d4d4d ; display: none;}
    .container_mobile .accordion_second ul {line-height: 1.5; font-size: 18px;}
    .container_mobile .accordion_second ul li { text-align: left; margin-left: 20px; padding-left: 5%;}
    .container_mobile .accordion_second ul li a {display: inline-block; color: #fff; padding: 10px 30px; position: relative;}
    .container_mobile .accordion_second ul li a::before {content: ""; position: absolute; display: block; width: 5px; height: 5px; background: #fff; top: 50%; transform: translateY(-50%); left: 10px;}

    .container_mobile .intro_mobile_nav01 ~ .accordion_second a::before {background-color: #FBF200;}
    .container_mobile .intro_mobile_nav02 ~ .accordion_second a::before {background-color: #FF00E2;}
    .container_mobile .intro_mobile_nav03 ~ .accordion_second a::before {background-color: #0199FF;}
    .container_mobile .intro_mobile_nav04 ~ .accordion_second a::before {background-color: #FF8F00;}
    .container_mobile .intro_mobile_nav05 ~ .accordion_second a::before {background-color: #0CE33B;}
    .container_mobile .intro_mobile_nav06 ~ .accordion_second a::before {background-color: #fff;} 
}

@media all and (max-width: 420px) {
    .container_mobile .accordion_first {padding: 20px 30px;}
    .container_mobile .accordion_first div:last-child {width: 30%;}
    .container_mobile .accordion_first div:last-child img {transform: scale(0.9);}
}