/* common */

.tb-center {
    text-align: center;
}

/* font-face */
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'),
    url('../../../font/Pretendard-Light.subset.woff2') format('woff2'),
    url('../../../font/Pretendard-Light.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'),
    url('../../../font/Pretendard-Regular.subset.woff2') format('woff2'),
    url('../../../font/Pretendard-Regular.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'),
    url('../../../font/Pretendard-Medium.subset.woff2') format('woff2'),
    url('../../../font/Pretendard-Medium.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'),
    url('../../../font/Pretendard-SemiBold.subset.woff2') format('woff2'),
    url('../../../font/Pretendard-SemiBold.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'),
    url('../../../font/Pretendard-Bold.subset.woff2') format('woff2'),
    url('../../../font/Pretendard-Bold.subset.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'),
    url('../../../font/Pretendard-ExtraBold.woff2') format('woff2'),
    url('../../../font/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'),
    url('../../../font/Pretendard-Black.woff2') format('woff2'),
    url('../../../font/Pretendard-Black.woff') format('woff');
}

.anima { transform:translate3d(0,5rem,0); opacity:0; transition:all 0.4s ease-out 0.2s;}
.inView { transform:translate3d(0,0,0); opacity:1;}

/* animate */
.anifadeTopStandby{opacity:0;transform:translate3d(0,2rem,0);transition:all 0.2s ease;}
.inView .anifadeTopStandby, .inView.anifadeTopStandby {opacity:1;transform:translate3d(0,0,0);}


/*
.aniDelay1{transition-delay:0.1s !important;}
.aniDelay2{transition-delay:0.2s !important;}
.aniDelay3{transition-delay:0.3s !important;}
.aniDelay4{transition-delay:0.4s !important;}
.aniDelay5{transition-delay:0.5s !important;}
.aniDelay6{transition-delay:0.6s !important;}
.aniDelay7{transition-delay:0.7s !important;}
.aniDelay8{transition-delay:0.8s !important;}
.aniDelay9{transition-delay:0.9s !important;}
.aniDelay10{transition-delay:1.0s !important;}
.aniDelay15{transition-delay:1.5s !important;}
.aniDelay20{transition-delay:2s !important;}
.aniDelay25{transition-delay:2.5s !important;}
.aniDelay30{transition-delay:3s !important;}
*/


.aniDelay5{transition-delay:0.3s !important;}
.aniDelay6{transition-delay:0.4s !important;}
.aniDelay7{transition-delay:0.5s !important;}
.aniDelay8{transition-delay:0.6s !important;}
.aniDelay9{transition-delay:0.7s !important;}
.aniDelay10{transition-delay:0.8s !important;}
.aniDelay15{transition-delay:1.0s !important;}
.aniDelay20{transition-delay:1.5s !important;}
.aniDelay25{transition-delay:2.0s !important;}
.aniDelay30{transition-delay:2.5s !important;}

/* header */
#hdWrap { position: sticky; top:0; z-index: 1000; /*margin-bottom:50px;*/ /* background: rgba(34, 34, 34, 0.7); */ margin: 0 20px 50px 20px; }
#hdWrap #header { /*width: 1920px;*/ /*width: 100%;*/ width: auto; /*margin: 0px 120px 0 120px;*/ margin: 0 auto;  max-width:1440px;   position: relative; height: 80px;}


#hdWrap .leftMenu {
    /*
      transition: 0.5s ease-in-out;
      padding: 80px 60px;
      margin: -80px -60px;
    */
    position: fixed; top: 0px; left: 0px;  z-index: 2000; margin:0 0 0 0px; height: 100vh;
    /*transition: 0.5s ease-in-out !important;*/
    /*min-width:0px;*/
    background: rgba(34, 34, 34, 0.9);
	width: auto;
	transform: translateX(-100%);
	transition: all 0.5s;
    padding: 80px 60px 0 60px;
    min-width:440px;
	
}
#hdWrap.on .leftMenu { transform: translateX(0%);  position:fixed; /*width: 30%;*/ /*background-color: #292929;*/ /*min-width:420px;*/ }
#hdWrap.on .leftMenu .menu_con { height: calc(100% - 80px); overflow-y: auto; }
#hdWrap.on .leftMenu .menu_con::-webkit-scrollbar { display: none;}
#hdWrap.on .leftMenu .menu_con > ul { display: block; width: auto;}
#hdWrap.on .leftMenu .left_logo { display: block; position: relative; z-index: 1000;}
#hdWrap .leftMenu .left_logo { }
#hdWrap .leftMenu .left_logo a { display: block;}
#hdWrap .leftMenu .menu_con > ul { margin: 50px 0 0 0;}
#hdWrap.on .menu_toggle {
    position: absolute;
    top: 90px;
	right: 60px;
    left: auto;
}
#hdWrap .menu_toggle { transition: 0.5s left !important; position: absolute; top: 30px; left: 0px; width: 20px; height: 20px; cursor: pointer; z-index: 3000;}
#hdWrap .menu_toggle span { width: 20px; height: 2px; background: #fff; display: block; transform-origin: center; /*transition: 0.5s ease-in-out; */     transition: opacity 5s!important;}
#hdWrap .menu_toggle span:after, .menu_toggle span:before { /*transition: 0.5s ease-in-out;*/ content: ""; position: absolute; display: block; width: 100%; height: 2px; background: #fff;}
#hdWrap .menu_toggle span:before { top: 50%; margin-top: -2px;}
#hdWrap .menu_toggle span:after {bottom: 2px;}
#hdWrap .menu_toggle input { display: none;}

#hdWrap.on::before {
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: 100;
    width: 100%;
    height: 100%;
}


#hdWrap.on .menu_toggle span { width: 25px;}

#hdWrap .leftMenu .menu_con { position: relative; z-index: 2000; /* display: inline-block; */}
#hdWrap .leftMenu .menu_con > ul {}
#hdWrap .leftMenu .menu_con > ul > li:first-child { margin-top: 0;}
#hdWrap .leftMenu .menu_con > ul > li { padding: 0px 0 0 40px; margin: 40px 0 0 0;}
#hdWrap .leftMenu .menu_con > ul > li > a {
    font-size: 24px;
    font-weight: 700;
    line-height: 31.2px;
    letter-spacing: -0.02em;
    text-align: left;
    transition: color 0.4s;
    color: #fff;
    display:block;
}

#hdWrap .leftMenu .menu_con > ul > li > a:hover {
    color:#357efd;
}

#hdWrap .leftMenu .menu_con > ul > li:nth-child(1) { background: url(../../../img/sub/pro_main/left_menu_icon01.png) 0 center no-repeat;}
#hdWrap .leftMenu .menu_con > ul > li:nth-child(2) { background: url(../../../img/sub/pro_main/left_menu_icon02.png) 0 center no-repeat;}
#hdWrap .leftMenu .menu_con > ul > li:nth-child(3) { background: url(../../../img/sub/pro_main/left_menu_icon03.png) 0 center no-repeat;}
#hdWrap .leftMenu .menu_con > ul > li:nth-child(4) { background: url(../../../img/sub/pro_main/left_menu_icon04.png) 0 center no-repeat;}
#hdWrap .leftMenu .menu_con > ul > li:nth-child(5) { background: url(../../../img/sub/pro_main/left_menu_icon05.png) 0 2px no-repeat;}

#hdWrap .leftMenu .menu_con > ul > li .sub { margin: 30px 0 0 0;}
#hdWrap .leftMenu .menu_con > ul > li .sub li:first-child { margin-top: 0;}
#hdWrap .leftMenu .menu_con > ul > li .sub li { margin: 20px 0 0 0; padding: 0 0 0 15px; position: relative;}
#hdWrap .leftMenu .menu_con > ul > li .sub li a {
    font-size: 24px;
    font-weight: 500;
    line-height: 31.2px;
    text-align: left;
    transition: color 0.4s;
    color: #fff;
}
#hdWrap .leftMenu .menu_con > ul > li .sub li a:hover {
    color:#357efd;
}


#hdWrap .leftMenu .menu_con > ul > li .sub li:before {
    content: "??";
    position: absolute;
    top: 8px;
    left: 0;
    font-weight: bold;
    color:#fff;
}

#hdWrap #header .headerLogo { position: absolute; top: 22px; left: 40px;}
#hdWrap #header .headerLogo a { display: block; }
#hdWrap #header .headerLogo a img { height: 32px; }
#hdWrap #header .headerChat { position: absolute; top: 20px; right: 0;}
#hdWrap #header .headerChat a { background:url(../../../img/sub/check/shop_relocation_fixed_btn.png) 10px center no-repeat; display: block; color: #fff; background-color: #227aff; border-radius: 24px; font-size: 14px; padding: 15px 15px 15px 45px; font-weight: 700;}

#hdWrap.on .menu_toggle span {
    height: 25px;
    position: relative;
    z-index: 100;
    cursor: pointer;
    background:none;
}

#hdWrap.on .menu_toggle span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
}

#hdWrap.on .menu_toggle span:before, #hdWrap.on .menu_toggle span:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 25px;
    width: 2px;
    background-color: #fff;
}

#hdWrap.on .menu_toggle span:before {
    transform: rotate(45deg);
}

#hdWrap.on .menu_toggle span:after {
    transform: rotate(-45deg);
}
#hdWrap .leftMenu .menu_con .left_chat { display: none; }
#hdWrap.on .leftMenu .menu_con .left_chat { display: block; margin: 240px 0 80px 0;}
#hdWrap.on .leftMenu .menu_con .left_chat a { display: block; color: #fff; background-color: #227aff; border-radius: 30px; padding: 0 0px 0 0px; text-align: center;  line-height: 58px;}
#hdWrap.on .leftMenu .menu_con .left_chat a span { display: inline-block; background:url(../../../img/sub/check/shop_relocation_fixed_btn.png) 10px center no-repeat;  font-size: 20px; font-weight: 700; color: #fff; padding: 0 0 0 50px;}

#hdWrap #header {
    background: #000;
}

#hdWrap:after {
    content: "";
    background: #000;
    width: calc(100% + 20px);
    position: fixed;
    top: 0;
    height: 100px;
    left: -20px;
    display: block;
    z-index: -1;
}

/* footer */
#ftWrap { margin: 170px 30px 0 30px;}
#ftWrap #footer {
    max-width: 1440px;
    /*margin: 0px 120px 0 120px;*/
    position: relative;
    height: 50px;
    width: auto;
	margin: 0 auto;
}

#ftWrap #footer .nav { margin: 0 0 10px 0; position: relative;}
#ftWrap #footer .nav > ul { font-size: 0;}
#ftWrap #footer .nav > ul li { display: inline-block; margin: 0 30px 0 0;}
#ftWrap #footer .nav > ul li a {
    font-size: 12px;
    font-weight: 500;
    line-height: 60px;
    text-align: left;
    color: #FFFFFF80;
    /*opacity: 0.5;*/
    vertical-align:middle;
}

#ftWrap #footer .nav > ul li a {  transition: color 0.4s;}
#ftWrap #footer .nav > ul li a:hover { color: #FFFFFFCC; }

#ftWrap #footer .nav ul li.on a { color: #FFFFFFCC;}

#ftWrap #footer .info { display: inline-block; vertical-align: top; }
#ftWrap #footer .info p {
    font-family: Pretendard;
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #FFFFFF80;
}
#ftWrap #footer .info p .on { color: #FFFFFFCC; }

#ftWrap #footer .info .copy { margin: 10px 0 15px 0;}


#ftWrap #footer .flogo { display: inline-block; vertical-align: top; margin: 0 30px 0 0;}
#ftWrap #footer .flogo img { filter: contrast(0.1); width: 90px;}

#ftWrap .familySite { width: 160px; position: absolute; top: 10px; right: 0; }
#ftWrap .familySite.on > p, #ftWrap .familySite > p:hover { color: #fff; background-color: #89898999; }
#ftWrap .familySite > p {
    transition: background 0.4s ease-in-out 0s;
    font-size: 12px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: #FFFFFF99;
    border: 1px solid #FFFFFF26;
    padding: 0 12px;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

#ftWrap .familySite > p .arrow {
    height: 4px;
    position: absolute;
    right: 14px;
    top: 50%;
}

#ftWrap .familySite > p .arrow:after {
    position: absolute;
    left: 0;
    top: 0;
    border-top: 2px solid #FFFFFF99;
    border-right: 2px solid #FFFFFF99;
    width: 4px;
    height: 4px;
    transform: rotate(135deg);
    content: '';
}

#ftWrap .familySite.on .arrow {
    transform: scaleY(-1);
    margin-top: 0;
}




#ftWrap .familySite * {transition: 0.5s ease-in-out !important;    }
#ftWrap .familySite .select_box {
    padding-bottom: 0;
    /*opacity: 0;*/
    /*transition: opacity 1s;*/
    /* transition: background 0.4s ease-in-out 0s; */
    /*transition: 0.5s ease-in-out !important;    */
    /*transition: max-height 0.4s ease-out;*/
    transition: 0.5s ease-in-out !important;    
    max-height: 0px;
    bottom: 30px;
    /*height: 0;*/
    position:absolute;
    width: -webkit-fill-available;
    background-color: #5f5f5f;
    overflow:hidden;
        
}

#ftWrap .familySite.on .select_box {
    /*bottom:30px;*/
	transition: 0.5s ease-in-out !important;    
    max-height: 150px;
    /*opacity: 1; */
    height: auto; 
    border-radius: 5px;    
    overflow:hidden;
    margin-bottom:10px;
    border: 1px solid #FFFFFF26;   
    
}

#ftWrap .familySite .select_box ul {
    box-shadow: 0px 2px 14.7px 0.3px rgba(0, 0, 0, 0.08);
    /*height: 8.5rem;*/
    overflow-y: scroll;
    height: 0;
    width: calc(100% + 30px);
}

#ftWrap .familySite.on .select_box ul { height: 14rem; /*padding: 1.5rem 0rem;  */ padding: 0.2rem 0rem;}

#ftWrap .familySite .select_box ul li {
    line-height: 1;
    width:100%;
}

#ftWrap .familySite .select_box ul li + li {
    /*padding-top: 2rem;*/
}

#ftWrap .familySite .select_box ul li a {
    line-height: 30px;
    font-weight: normal;
    color: #fff;
    font-size: 12px;
    display: block;
    /*transition: color 0.4s;*/
    transition: background 0.4s ease-in-out 0s;
    padding-left:1.5em
}
#ftWrap .familySite .select_box ul li a:hover { color:#fff; font-weight:bold; background-color:gray;}


/* quick */
.quick_top {transition: all 0.3s; /* display:none;*/ background:#222; /*transition: background 0.4s ease-in-out 0s;*/ position: fixed; bottom: 120px; right: 30px; border: 1px solid #FFFFFF33; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; text-align: center; box-sizing: border-box; cursor: pointer; z-index:1;}
.quick_top img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.quick_top:hover { background-color: #fff;}
.quick_top:hover img { filter: invert(1);  }

.quick_top.dw { transform: rotate(180deg);}


@media screen and (max-width: 767px) {
    /* header */
    * {/*transition: 0.5s ease-in-out !important;*/}
    #hdWrap #header { /*margin:0 30px; */}
    #hdWrap #header .headerChat a { background-size: 14px auto; padding: 8px 10px 8px 30px; }
    #hdWrap .leftMenu { /*margin: 0 0 0 -30px;*/ padding: 25px 0px 0 0px; }
    #hdWrap.on .leftMenu { /*margin: 0 0 0 -30px;*/ min-width:100%; margin:0; padding-top:25px; padding-left:30px; padding-right:30px; } 
    #hdWrap.on .leftMenu .menu_toggle { top: 40px; right: 30px; left: auto; }
    #hdWrap .leftMenu .left_logo {margin:10px 0 0 0;}
    #hdWrap .leftMenu .left_logo img { height: 32px;}
    #hdWrap .leftMenu .menu_con > ul { margin: 40px 0 0 0;}
    #hdWrap .leftMenu .menu_con > ul > li { margin: 25px 0 0 0; background-size: 22px auto!important; padding-left:35px;}
    #hdWrap .leftMenu .menu_con > ul > li > a { font-size: 20px; line-height: 25px;} 
    #hdWrap .leftMenu .menu_con > ul > li .sub { margin:20px 0 0 0;}
    #hdWrap .leftMenu .menu_con > ul > li .sub li {margin:15px 0 0 0;}
    #hdWrap .leftMenu .menu_con > ul > li .sub li a { font-size: 20px; line-height: 25px;} 
    #hdWrap.on .leftMenu .menu_con .left_chat { margin: 80px 0 40px 0; }
    #hdWrap .leftMenu .menu_toggle { /*left: auto;*/}
    #hdWrap.on .leftMenu .menu_con .left_chat a {line-height: 43px;}
    #hdWrap.on .leftMenu .menu_con .left_chat a span {font-size:15px; background-size: 16px auto; padding:0 0 0 30px;}


	/* footer */
    .quick_top { bottom: 160px; right: 30px; width: 40px; height: 40px; line-height: 40px;}
    #ftWrap { margin: 70px 0 0 0; padding:20px 0 20px 0; border-top: 1px solid #FFFFFF33;}
    #ftWrap #footer { margin: 0 20px; height: auto;}
    #ftWrap #footer .flogo, #ftWrap #footer .info { display: block;}
    #ftWrap .familySite { position: static; width: 100%;}
    #ftWrap #footer .info p { text-align: center;}
    #ftWrap #footer .info p br {display:none;}
    #ftWrap #footer .flogo { margin: 30px 0 12px 0; text-align: center;}
    #ftWrap #footer .flogo img { height: 28px; width: auto;}
    
    #ftWrap #footer .nav > ul {text-align:center;}
    #ftWrap #footer .nav > ul li { /* width: 33.3%;*/ text-align: center; margin: 0 10px 10px 10px;}
    #ftWrap #footer .nav > ul li:nth-child(3n)::after, #ftWrap #footer .nav > ul li:last-child::after { display: none;}
    #ftWrap #footer .nav > ul li a { line-height: 20px; transition: color 0.4s;}
    #ftWrap #footer .nav > ul li a:hover { color: #FFFFFFCC; }
    #ftWrap #footer .nav > ul li::after { 
        content: "";
        background: #FFFFFF33;
        width: 1px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: 0px;
        right: -10px;
    }
}

/* main */
[page=index] #sectionTop {
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 auto 60px;
    max-width: 1400px;
}

[page=index] #sectionTop .left_top {
    float: left;
    width: 50%;
}  

[page=index] #sectionTop .right_top {
    float: right;
    width: 50%;
}

[page=index] #sectionTop p {}

[page=index] #sectionTop .left_top li {
    text-align: left;
}

[page=index] #sectionTop .left_top li.txt01 {
    font-size: 15px;
    line-height: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 55px 0;
}

[page=index] #sectionTop .left_top li.txt02 p {
    font-size: 40px;
    line-height: 60px;
    font-weight: 900;
    color: #fff;
    opacity: 0;
    letter-spacing: -1px;
    text-align: left;
}

[page=index] #sectionTop .left_top li.txt02 p span.blue {
    color: #227aff;
    letter-spacing: -1px;
}

[page=index] #sectionTop .left_top li.txt02 p:nth-child(1) {
    animation: fadein 1s ease-out forwards;
}

[page=index] #sectionTop .left_top li.txt02 p:nth-child(2) {
    animation: fadein 0.5s 0.5s ease-out forwards;
    margin-bottom: 40px;
}

[page=index] #sectionTop .left_top li.txt02 p:nth-child(3) {
    animation: fadein 1s 1s ease-out forwards;
}

[page=index] #sectionTop .left_top li.txt02 p:nth-child(4) {
    animation: fadein 1s 1s ease-out forwards;
}



[page=index] #sectionTop .right_top li {
    text-align: right;
}

[page=index] #sectionTop .right_top li.txt01 p {}

[page=index] #sectionTop .right_top li.txt01 p img {
    animation: a_rotate 10s linear infinite;
    width: 90px;
    object-fit: cover;
}


[page=index] #sectionTop .right_top li.txt03 p {
    opacity: 0.8;
    font-size: 15px;
    line-height: 30px;
    font-weight: 700;
    color: #fff;
}


[page=index] #sectionTop .right_top li.txt02 {
    margin: 20px 0 155px 0;
}

[page=index] #sectionTop .right_top li.txt02 p {
    font-size: 36px;
    line-height: 40px;
    /*font-weight: 500;*/
    color: inherit;
    text-shadow: -1px 0px #5b5b5b, 0px 1px #5b5b5b, 1px 0px #5b5b5b, 0px -1px #5b5b5b;
}

[page=index] #sectionTop .right_top li.txt03 {}

[page=index] #sectionTop .right_top li p:nth-child(2) {
    margin-bottom: 40px;
}


@keyframes a_rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

[page=index] #sectionTop p .text_gra01 {
    font-weight: 900;
    margin: 0;
    background: linear-gradient(88.89deg, #ffffff 0.48%, #fff 42.46%, #ffffff 84.45%);
    color: transparent;
    -webkit-background-clip: text;
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}


[page=index] #sectionTop p .text_gra02 {
    font-weight: 900;
    margin: 0;
    background: linear-gradient(88.89deg, #2BF2FF 0.48%, #2F76FF 42.46%, #2BF2FF 84.45%);
    color: transparent;
    -webkit-background-clip: text;
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    letter-spacing: -0.02em;
}

[page=index] #sectionTop p .text_gra03 {
    margin: 0;
    background: linear-gradient(88.89deg, #227aff 0.48%, #ffffff 42.46%, #227aff 84.45%);
    color: transparent;
    -webkit-background-clip: text;
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}



@keyframes textclip {
    to {
        background-position: 200% center;
    }
}


[page=index] #sectionTop p .icon {
    margin: 0 10px;
}

[page=index] #sectionTop p .icon02 {
    position: absolute;
    right: -75px;
}

[page=index] #sectionTop p .icon03 {
    position: absolute;
    left: -116px;
    bottom: -60px;
}

[page=index] #sectionTop .more {
    margin: 40px 0 120px 0;
}

[page=index] #sectionTop .more a {
    color: #fff;
    transition: background 0.4s ease-in-out 0s;
    border: 0.5px solid #fff;
    border-radius: 20px;
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    line-height: 40px;
    padding: 0 18px;
    display: inline-block;
}

[page=index] #sectionTop .more a:hover {
    background: #fff;
    color: #000;
}

[page=index] #sectionTop .more a:hover .arrow::after {
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}


[page=index] #section01 {
    /*max-width: 1440px;*/
    margin: 0 auto !important;
    max-width: 1440px
}

[page=index] #section01 ul {
    font-size: 0;
}

[page=index] #section01 ul li {
    transition: background 0.4s ease-in-out 0s;
    width: calc(33.3% - 14px);
    display: inline-block;
    font-size: 12px;
    height: 206px;
    box-shadow: 4px 4px 10px 0px #00000026;
    -webkit-box-shadow: 4px 4px 10px 0px #00000026;
    border: 1px solid #070D1E;
    border-radius: 10px;
    margin-right: 20px;
    box-sizing: border-box;
    vertical-align: top;
}

[page=index] #section01 ul li:nth-child(1) {
    /*background: #3491E8;*/
    background: linear-gradient(to right, #3FA2EE, #3592E8, #2A82E3);
}

[page=index] #section01 ul li:nth-child(2) {
    /*background: #3261DB;*/
    background: linear-gradient(to right, #3C70E3, #3261DB, #2852D3);
}

[page=index] #section01 ul li:nth-child(3) {
    /*background: #153DA8; */
    background: linear-gradient(to right, #204FBB, #153DA8, #103097);
    margin-right: 0;
}

[page=index] #section01 ul li .txt01 {
    position: relative;
    font-family: Pretendard;
    font-size: 38px;
    font-weight: 800;
    line-height: 45.6px;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0 0 30px 0;
    white-space: nowrap;
    overflow: hidden;
    /*text-overflow:ellipsis;*/
}

[page=index] #section01 ul li .txt02 {
    font-family: Pretendard;
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: -0.02em;
    text-align: left;

}

[page=index] #section01 ul li a {
    display: block;
    padding: 40px 40px;
}

[page=index] #section01 ul li .link {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 34px;
    line-height: 34px;
    height: 34px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 16px;
    background-color: #fff;
}

[page=index] #section01 ul li .link img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[page=index] #section01 ul li:hover img {
    filter: brightness(0) invert(1);
}

[page=index] #section01 ul li:nth-child(1):hover .link {
    background: #3491E8;
    border: 1px solid #3491E8;
}

[page=index] #section01 ul li:nth-child(2):hover .link {
    background: #3261DB;
    border: 1px solid #3261DB;
}

[page=index] #section01 ul li:nth-child(3):hover .link {
    background: #3261DB;
    border: 1px solid #153DA8;
}

[page=index] #section01 ul li:nth-child(1):hover p {
    color: #3491E8;
}

[page=index] #section01 ul li:nth-child(2):hover p {
    color: #3261DB;
}

[page=index] #section01 ul li:nth-child(3):hover p {
    color: #3261DB;
}


[page=index] #section01 ul li p {
    color: #fff;
}

[page=index] #section01 ul li:hover {
    background: #fff;
    cursor: pointer;
}

[page=index] #section01 ul li:hover .link {
    border: 1px solid #3491E8;
}

/*
.right_top .keyword {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-content: end;
    justify-items: end;
    justify-self: end;

}                    
.right_top .keyword a:nth-child(1) {
    grid-column-start: 2;
}

.right_top .keyword a:nth-child(2) {
    grid-column-start: 3;
}

.right_top .keyword a:nth-child(3) {
    grid-column: 1 / 2;
}

.right_top .keyword a:nth-child(4) {
    grid-column: 2 / 3;
}

.right_top .keyword a:nth-child(5) {
    grid-column: 3 / 4;
}

.right_top .keyword a:nth-child(6),
.right_top .keyword a:nth-child(7),
.right_top .keyword a:nth-child(8) {
    grid-column: span 1;
}
*/

[page=index] #sectionTop .right_top {}

[page=index] .right_top .keyword p {
    display: flex;
    flex-wrap: wrap;
    margin: 0 !important;
    justify-content: end;
}

[page=index] #sectionTop .right_top .keyword p a {
    line-height: 46px;
    display: block;
    background: #32353b;
    color: #fff;
    padding: 0 20px;
    border-radius: 25px;
    font-size: 16px;
    margin: 0 0 10px 10px;
    ;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
}

[page=index] #sectionTop .right_top .keyword p a:hover {
    background: #0166ff;
}



[page=index] #sectionTop .right_top .qna_send {
    margin: 50px 0 0 0;
    padding: 10px 0;
}

[page=index] #sectionTop .right_top .qna_send a {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    border-bottom: 2px solid #fff;
    padding: 0 0 5px 0;
    transition: all 0.4s ease-in-out 0s;
    vertical-align: top;
}

[page=index] #sectionTop .right_top .qna_send a:hover {
    color: #1f70e7;
    border-bottom: 2px solid #1f70e7;
    transform: scale(1.2);
    transform-origin: right;
}



@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

[page=index] #sectionTop .right_top li.keyword p {
    opacity: 0;
    transform: translateX(100%);
    animation: slideInFromRight 0.5s ease-out forwards;
}

[page=index] #sectionTop .right_top li.qna_send p {
    opacity: 0;
    transform: translateX(100%);
    animation: slideInFromRight 2s ease-out forwards;
    text-align: right;
}


[page=index] #section02 .loop_img {
    margin: 50px 0;
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
}

[page=index] #section02 .loop_img .wrapper {
    display: flex;
    width: max-content;
    animation: scrolling 50s linear infinite;
    will-change: transform;
}

[page=index] #section02 .loop_img .inner {
    display: flex;
    flex-shrink: 0;
}


/*[page=index] #section02 .loop_img .inner.original {
    animation: scrolling 30s linear infinite;
}

[page=index] #section02 .loop_img .inner.clone {
    animation: scrolling 30s linear infinite;
}*/

[page=index] #section02 .loop_img .inner img {
    height: 185px;
    width: auto;
    /*display: flex;
    align-items: center;
    justify-content: center;*/
    flex-shrink: 0;
    max-width: none;
}


/*@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }

    50.01% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}*/

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


/*[page=index] #section02 .loop_img:hover .inner {
    animation-play-state: paused;
}*/

#wrap #ftWrap {
    margin-top: 50px;
}



/* responsive */

@media screen and (max-width: 767px) {
    [page=index] #content {
        margin: 20px 0 0 0;
        width: auto;
    }

    [page=index] #sectionTop {
        margin: 0px 0 70px 0;
    }

    [page=index] #sectionTop p {
        /*font-size: 40px; line-height: 60px; */
        padding: 0 20px;
    }

    [page=index] #sectionTop p .icon02,
    .mk-pro #sectionTop p .icon03 {
        display: none;
    }

    [page=index] #sectionTop p .icon img {
        height: 50px;
    }

    [page=index] #sectionTop .more a {
        font-size: 14px;
        line-height: 35px;
        padding: 0 15px;
    }

    [page=index] #sectionTop .more {
        margin: 20px 0 60px 0;
    }

    [page=index] #section01 {
        width: auto;
        margin: 0 20px;
    }

    [page=index] #section01 ul li {
        width: 100%;
        height: 140px;
        margin: 0 0 15px 0;
    }

    [page=index] #section01 ul li a {
        padding: 20px 20px;
    }

    [page=index] #section01 ul li .txt01 {
        font-size: 30px;
        margin: 0 0 15px 0;
    }

    [page=index] #section01 ul li .txt02 {
        font-size: 15px;
    }

    [page=index] #section01 ul li .txt02 br {
        display: none;
    }


    [page=index] #sectionTop .left_top,
    [page=index] #sectionTop .right_top {
        float: none;
        width: auto;
    }

    [page=index] #sectionTop .left_top .txt01 {
        font-size: 13px;
        line-height: 30px;
        margin: 0 0 20px 0;
    }

    [page=index] #sectionTop .left_top li.txt02 p {
        font-size: 28px;
        line-height: 40px;
        font-weight: 900;
        color: #fff;
    }

    [page=index] #sectionTop .left_top li.txt02 p:nth-child(2) {
        margin: 0 0 30px 0;
    }

    [page=index] #sectionTop .left_top li.txt02 p:nth-child(2) {}

    [page=index] #sectionTop .right_top {
        margin: 60px 0 0 0;
    }

    [page=index] #sectionTop .right_top li.txt01 p {}

    [page=index] #sectionTop .right_top li.txt01 p img {
        width: 60px;
    }


    [page=index] #sectionTop .right_top li.txt02 {
        margin: 15px 0 50px 0;
    }

    [page=index] #sectionTop .right_top li.txt02 p {
        font-size: 26px;
        line-height: 30px;
    }

    [page=index] #sectionTop .right_top li.txt03 {}

    [page=index] #sectionTop .right_top li.txt03 p {
        font-size: 14px;
        line-height: 25px;
    }

    [page=index] #sectionTop .right_top li p:nth-child(2) {
        margin-bottom: 20px;
        letter-spacing: -1px;
    }

    [page=index] #sectionTop .right_top .keyword p a {
        line-height: 36px;
        padding: 0 16px;
        border-radius: 22px;
        font-size: 14px;
        margin: 0 0 8px 8px;
        ;
    }

    [page=index] #sectionTop .right_top .keyword p a:hover {
        background: #0166ff;
    }



    [page=index] #sectionTop .right_top .qna_send {
        margin: 30px 0 0 0;
    }

    [page=index] #sectionTop .right_top .qna_send a {
        font-size: 18px;
        border-bottom: 2px solid #fff;
        padding: 0 0 5px 0;
    }

    [page=index] #sectionTop .right_top .qna_send a:hover {
        transform: scale(1.2);

    }
    
    [page=index] #section02 .loop_img {
        margin: 20px 0 30px 0;
    }

    [page=index] #section02 .loop_img img {
        height: 120px !important;
        width: auto !important;
    }
 
    @keyframes scrolling {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    
    [page=index] .mk-pro #ftWrap {
        margin-top: 30px;
    }
}

/* ÄÁÅÙÃ÷ */
#contaniner.mk-pro {
    padding-top: 0;
    overflow: visible;
}

.mk-pro #content { min-height: 400px; margin: 122px auto 0; }
.mk-pro [page=index] { min-height: 400px; margin: 92px 0 0 !important; }

.mk-pro .section { padding-top: 0; }

.mk-pro #sectionTop { text-align: center;}

.mk-pro #sectionTop p {
    font-size: 74px;
    font-weight: 900;
    line-height: 111px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;

}

.mk-pro #sectionTop p .text_gra01 { 
    font-weight: 900; 
    margin: 0; 
    background: linear-gradient(88.89deg, #ffffff 0.48%, #fff 42.46%, #ffffff 84.45%); 
    color: transparent; 
    -webkit-background-clip: text;
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}


.mk-pro #sectionTop p .text_gra02 { 
    font-weight: 900; 
    margin: 0; 
    background: linear-gradient(88.89deg, #2BF2FF 0.48%, #2F76FF 42.46%, #2BF2FF 84.45%); 
    color: transparent; 
    -webkit-background-clip: text;
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    letter-spacing: -0.02em;
}



@keyframes textclip { to { background-position: 200% center;}}


.mk-pro #sectionTop p .icon { margin: 0 10px;}
.mk-pro #sectionTop p .icon02 { position: absolute; right: -75px;}
.mk-pro #sectionTop p .icon03 { position: absolute; left: -116px; bottom: -60px;}

.mk-pro #sectionTop .more { margin: 40px 0 120px 0;}
.mk-pro #sectionTop .more a {     transition: background 0.4s ease-in-out 0s; border: 0.5px solid #fff; border-radius: 20px; font-family: Pretendard; font-size: 14px; font-weight: 700; line-height: 21px; text-align: left; line-height: 40px; padding: 0 18px; line-height: 40px; display: inline-block;}

.mk-pro #sectionTop .more a:hover { background: #fff; color: #000;}
.mk-pro #sectionTop .more a:hover .arrow::after {  border-top: 2px solid #000; border-right: 2px solid #000;}

.mk-pro .banner_list { 
    margin: 120px auto 0 auto;
    position: relative;
    overflow: hidden;
    width: calc(100% + 40px);
    left: -20px; 
}
.mk-pro .banner_list .loop_banner.bottom_con ul:last-child {
    padding: 0;
}
.mk-pro .banner_list ul li { border-radius: 0; border: 0; margin: 0 0.8rem;}
.mk-pro .banner_list .top_con { margin-bottom: 1.5rem; }
.mk-pro .banner_list ul li a {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
}

.mk-pro .tab_cm {
   margin: 133px auto 0 auto;
}

.mk-pro .section .tab {
    /*transition: all 0.5s;*/
    transition: all 0.3s ease;
}
.mk-pro .section .tab.fixed {
    position: fixed;
    top: 80px;
    /*transform: translateY(80px);*/
    width: 100%;
    background: #000;
    z-index: 500;
}



.mk-pro .ft_more {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #292A2F;
    z-index: 500;
    transition: all 0.3s ease;
    opacity: 1;
}

.mk-pro .ft_more.hide {
    opacity: 0;
}



.mk-pro .section .tab  { /*border-top: 1px solid #FFFFFF1A;*/ border-bottom: 1px solid #FFFFFF1A;  }
.mk-pro .section .tab ul { font-size: 0; max-width: 1280px; margin:0 auto; }
.mk-pro .section .tab ul li { 
    width: 20%; 
    display: inline-block; 
    vertical-align: top; 
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;        
}
.mk-pro .section .tab ul li.on a { color:#fff; }
.mk-pro .section .tab ul li a {
    text-align: center;
    color:#FFFFFF80;
    font-size: 24px;
    font-weight: 700;
    line-height: 74px;
    letter-spacing: -0.02em;
    display: block;
    transition:color 0.4s;
}

.mk-pro .section .cont .more { margin: 120px 0 0px 0; text-align: center; }
.mk-pro .section .cont .more a {
    line-height:50px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    background-color: #227AFF;
    display: inline-block;
    padding:0 40px;
    border-radius: 50px;
    margin: 0 0 30px 0;
    transition: background 0.4s ease-in-out 0s;
    color: #fff;
}
.mk-pro .section .cont .more a:hover { color: #227AFF; background-color: #fff;  }

.mk-pro .section .cont .more .more_txt {
    font-size: 20px;
    font-weight: 400;
    line-height: 41.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #FFFFFF80;
}

.mk-pro .section .cont .more .more_wrap { 
    background: #292A2F;
    position: relative;
    height: 84px;
    width: 100%;
    left: 10px;
}

.mk-pro .section .cont .more .more_wrap a {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.mk-pro .section .cont .more .more_wrap .more_txt {
    position: absolute;
    left: 0;
    top: 50%;
    /* margin-top: -40px; */
    text-align: left;
    transform: translateY(-50%);
}

.mk-pro .section .cont .more .more_wrap .more_txt br {display: none;}

.mk-pro .section .cont .more .more_wrap .innerWrap { /*height: 124px;*/ height: 100%;}
.mk-pro .section .cont .more .more_wrap .more_txt { color: #fff; }

.mk-pro .section .cont .more .add_txt { margin: 60px 0 60px 0; text-align: left;}
.mk-pro .section .cont .more .add_txt .tit {
    font-size: 20px;
    font-weight: 700;
    line-height: 25.2px;
    padding: 0 0 0 30px;
    background: url(../../../img/sub/pro_main/notice_icon.png) 0 center no-repeat;
    color: #fff;
    margin:0 0 30px 0;
}
.mk-pro .section .cont .more .add_txt dl {}
.mk-pro .section .cont .more .add_txt dl:first-child { margin-top: 0;}
.mk-pro .section .cont .more .add_txt dl { margin: 10px 0 20px 0;}
.mk-pro .section .cont .more .add_txt dl dt {
    font-size: 15px;
    font-weight: 700;
    line-height: 19.6px;
    color:#fff;
    letter-spacing: 0;
}
.mk-pro .section .cont .more .add_txt dl dd {
    font-size: 15px;
    font-weight: 400;
    line-height: 23.8px;
    margin: 5px 0 0 0;
    letter-spacing: 0;
    /*padding-left: 16px;*/
}
.mk-pro .section .cont .more .add_txt dl dd p {
    color: #FFFFFF80;
    font-size: 15px;
    font-weight: 400;
    line-height: 25.8px;
    letter-spacing: 0;
}

.mk-pro .section .cont .more .add_txt dl dd p span {
    background: #292A2F;
    border: 1px solid #595a5e;
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 14px;
}


.mk-pro .section .tab ul li a:hover { color:#fff; }

.mk-pro .section .cont { /*margin: 120px auto;*/ margin: 120px 20px;}
.mk-pro .section .innerWrap { max-width: 1280px; margin: 0 auto; position: relative;}
.mk-pro .section .cont .tit { }
.mk-pro .section .cont .tit .txt01 {
    font-size: 24px;
    font-weight: 700;
    line-height: 38.4px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #227AFF;
}
.mk-pro .section .cont .tit .txt02 {
    font-size: 48px;
    font-weight: 800;
    line-height: 67.2px;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 5px 0 24px 0;
    color: #fff;
}

.mk-pro .section .cont .tit .txt03 {
    font-size: 32px;
    font-weight: 400;
    line-height: 51.2px;
    letter-spacing: -0.02em;
    text-align: center;
    color:#FFFFFF80;
}

.mk-pro .section .cont .tit .txt04 { 
    padding: 50px 0;
    transition: background 0.4s ease-in-out 0s;
    width: 100%;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #FFFFFF1A;
    border-radius: 10px;
    box-sizing: border-box;
    vertical-align: top;
    background-color: #292A2F;		
    text-align:center;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.02em;
    color: #FFFFFF80;
    margin: 60px 0 0 0;
    display: none;
}

.mk-pro .section .cont .tit .txt04:hover {
    background: #fff;
    cursor: pointer;
    color: #000;
}

.mk-pro .more_link { max-width:1280px; margin:120px auto 0 auto; }
.mk-pro .more_link ul { font-size: 0; }
.mk-pro .more_link ul li { transition: background 0.4s ease-in-out 0s; width: calc(50% - 14px); display: inline-block; font-size: 12px; /*height: 206px;*/ box-shadow: 4px 4px 10px 0px #00000026;  border: 1px solid #070D1E; border-radius: 10px;
    margin-right: 20px; box-sizing: border-box; vertical-align: top; }
.mk-pro .more_link ul li:nth-child(1) { /*background: #3491E8;*/ background: linear-gradient(to right, #3FA2EE, #3592E8, #2A82E3); }
.mk-pro .more_link ul li:nth-child(2) { /*background: #3261DB;*/ background: linear-gradient(to right, #3C70E3, #3261DB, #2852D3);  margin-right: 0;} 
.mk-pro .more_link ul li:nth-child(3) { /*background: #153DA8; */ background: linear-gradient(to right, #204FBB, #153DA8, #103097); }

.mk-pro .more_link ul li .txt01 {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.02em;
    text-align: left;
    /* margin: 0 0 30px 0; */
    white-space: nowrap;
    /*overflow: hidden;*/
    /*text-overflow:ellipsis;*/
}

.mk-pro .more_link ul li .txt02 {
    font-family: Pretendard;
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: -0.02em;
    text-align: left;

}

.mk-pro .more_link ul li a {display:block; padding: 40px 40px;}
.mk-pro .more_link ul li .link { 
    position: absolute;
    right: -10px;
    top: 0;
    display: block;
    width: 32px;
    height: 100%;
    text-align: center;
    margin-right:0;
}

.mk-pro .more_link ul li .link.arrow::after {
    position: absolute;
    left: 0;
    top: 50%;
    content: '';
    width: 16px;
    height: 16px;
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
    transform: rotate(45deg);
    margin-top: -8px;
}

.mk-pro .more_link ul li:nth-child(1):hover .link::after {
    border-top: 5px solid #3491E8;
    border-right: 5px solid #3491E8;    
}
.mk-pro .more_link ul li:nth-child(2):hover .link::after {
    border-top: 5px solid #3261DB;
    border-right: 5px solid #3261DB;    
}



.mk-pro .more_link ul li .link img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mk-pro .more_link ul li:hover img {filter: brightness(0) invert(1);}

/*
.mk-pro .more_link ul li:nth-child(1):hover .link { background: #3491E8; border:1px solid #3491E8; }
.mk-pro .more_link ul li:nth-child(2):hover .link { background: #3261DB; border:1px solid #3261DB; }
.mk-pro .more_link ul li:nth-child(3):hover .link { background: #3261DB; border:1px solid #153DA8; }
*/
.mk-pro .more_link ul li:nth-child(1):hover p { color:#3491E8; }
.mk-pro .more_link ul li:nth-child(2):hover p { color:#3261DB; }
.mk-pro .more_link ul li:nth-child(3):hover p { color:#3261DB; }


.mk-pro .more_link ul li p { color: #fff;}

.mk-pro .more_link ul li:hover { background: #fff; cursor: pointer; }
/*
.mk-pro .more_link ul li:hover .link {border: 1px solid #3491E8; }
*/

.mk-pro #section01 {  margin: 133px auto 0 auto;}



.mk-pro #section01 .info { margin: 120px 0;}
.mk-pro #section01 .info ul { 
    font-size: 0; 
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.mk-pro #section01 .info ul li { padding: 50px 0; transition: background 0.4s ease-in-out 0s; width: calc(33.3% - 27px); display: inline-block; font-size: 12px;  border: 1px solid #FFFFFF1A; border-radius: 10px;
    margin:0 40px 40px 0; box-sizing: border-box; vertical-align: top; background-color: #292A2F;}
.mk-pro #section01 .info ul li:nth-child(3n) { margin-right: 0;}

.mk-pro #section01 .info ul li .img { text-align: center; margin:0 0 20px 0;}
.mk-pro #section01 .info ul li .txt {
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
}

.mk-pro #section01 .info ul li .txt strong {
    display: block;
    font-family: Pretendard;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
    margin: 0 0 10px 0;
}


.mk-pro #section01 .info ul li .txt span {
    display: block;
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
}


.mk-pro #section01 .info ul li:hover { background: #fff; cursor: pointer; }
.mk-pro #section01 .info ul li:hover p, .mk-pro #section01 .info ul li:hover p span, .mk-pro #section01 .info ul li:hover p strong { color:#292A2F; }

.mk-pro #section02 .info { margin: 120px 0;}
.mk-pro #section02 .info ul { font-size: 0; }
.mk-pro #section02 .info ul li { position: relative; padding: 0px 0; transition: background 0.4s ease-in-out 0s; width: calc(33.3% - 27px); display: inline-block; font-size: 12px;  border: 1px solid #227AFF; border-radius: 50%;
    margin-right: 40px; box-sizing: border-box; vertical-align: top; }
.mk-pro #section02 .info ul li:nth-child(3) {
    margin-right: 0;
}
[page=page2] #section02 .info ul li {
    position: relative;
    transition: background 0.4s ease-in-out 0s;
    width: calc(25% - 24px);
    display: inline-block;
    font-size: 12px;
    border: 1px solid #227AFF;
    margin-right: 30px;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 5px;
}
[page=page2] #section02 .info ul li:nth-child(3) {
    margin-right: 30px;
}
[page=page2] #section02 .info ul li:nth-child(4) {
    margin-right: 0;
}
.mk-pro #section02 .info ul li::before { 
    content: "";
    display: block;
    padding-top: 100%; 
}

.mk-pro #section02 .info ul li .rate_wrap { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;	
}

.mk-pro #section02 .info ul li .txt_wrap  {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}
.mk-pro #section02 .info ul li .txt_wrap .tit {
    font-size: 34px;
    font-weight: 700;
    line-height: 47.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #438EFF;
}
.mk-pro #section02 .info ul li .txt_wrap .txt {
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #FFFFFF80;
    margin: 20px 0 0 0;
}


.mk-pro #section02 .info ul li:hover { background: #438EFF; cursor: pointer; }
.mk-pro #section02 .info ul li:hover .txt_wrap p { color:#fff; }

.mk-pro #section04 { }

.mk-pro #section04 .info { margin: 120px 0 0 0;}
.mk-pro #section04 .info ul { font-size: 0; }
.mk-pro #section04 .info ul li { transition: background 0.4s ease-in-out 0s; width: calc(50% - 13px); display: inline-block; font-size: 12px; box-shadow: 4px 4px 10px 0px #00000026;  border: 1px solid #070D1E; border-radius: 10px;
    margin-right: 20px; box-sizing: border-box; vertical-align: top; padding: 0px 40px;}
.mk-pro #section04 .info ul li:nth-child(1) { background: #3491E8; }
.mk-pro #section04 .info ul li:nth-child(2) { background: #3261DB; margin-right: 0;}

.mk-pro #section04 .info ul li .txt {
    position: relative;
    font-family: Pretendard;
    font-size: 32px;
    font-weight: 700;
    line-height: 120px;
    letter-spacing: -0.02em;
    text-align: left;
}

.mk-pro #section04 .info ul li .link {}
.mk-pro #section04 .info ul li .link .arrow { height: 16px; }
.mk-pro #section04 .info ul li .link .arrow::after {
    width: 16px;
    height: 16px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
}


.mk-pro #section04 .info ul li .link { position: absolute; right: 10px; top: 0; display: block; height: 32px;}

.mk-pro #section04 .info ul li:hover { background: #fff; cursor: pointer; }
.mk-pro #section04 .info ul li:hover p { color:#3491E8; }
.mk-pro #section04 .info ul li:hover .link {}
.mk-pro #section04 .info ul li:hover .link .arrow { height: 16px; }
.mk-pro #section04 .info ul li:hover .link .arrow::after {
    width: 16px;
    height: 16px;
    border-top: 4px solid #3491E8;
    border-right: 4px solid #3491E8;
}


.mk-pro #section01 .gress-container {
    position: relative;
    width: 100%;
    max-width: 970px;
    margin: 120px auto 40px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

.mk-pro #section01 .gress-container .step-wrap:nth-child(3) .circle {
    background-color: #35C9FD;
    outline: 2px solid #35C9FD;                           
}

.mk-pro #section01 .gress-container .step-wrap:nth-child(4) .circle {
    background-color: #2B9FFE;
    outline: 2px solid #2B9FFE;                           
}

.mk-pro #section01 .gress-container .step-wrap:nth-child(5) .circle {
    background-color: #227AFF;
    outline: 2px solid #227AFF;                           
}                        



.mk-pro [page=page1] #section05 .process-container .process-line {
    /*position: absolute; */
    top: 0;
    /* left: 50%; */
    left: 50%;
    height: 1px;
    background: linear-gradient(90deg, #3EEFFD 0%, #227AFF 100%);
    z-index: 0;
    /*max-width: calc(100% - 0px);*/
    /*width: 100%;*/
    width: calc(100% - 20%);
    /* transform: translate(-50%, -50%); */
    max-width: 1000px;
    margin: 100px auto 70px auto;
}

.mk-pro [page=page1] #section05 .process-container .process-line:after {
    position: absolute;
    top: -1px;
    left: 0;
    content: "";
    border: 1px dashed #000000;
    /* height: 1px; */
    width: 100%;
}

.mk-pro [page=page1] #section05 .process-container .process-step .step-wrap {
    position: relative;
    z-index: 1;
    top: -166px;
    height: 0;
}

.mk-pro [page=page1] #section05 .process-container .process-step .step-wrap .circle:hover {
    transform: scale(1.5);
    top: -0px;                                                
}

.mk-pro [page=page1] #section05 .process-container .process-step .step-wrap .circle {
    width: 18px;
    height: 18px;
    border: 2px solid #000000;
    border-radius: 50%;
    background-color: #35C9FD;
    margin: 0 auto;
    outline: 2px solid #35C9FD;
    box-sizing: border-box;
    transition: all 0.5s;
    cursor: pointer;
    position:relative;
}

.mk-pro [page=page1] #section05 .process-container .process-step .step-wrap .step-text {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}                

.mk-pro [page=page1] #section05 .process-container .process-step-wrap {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 20px;
    margin: 40px auto;
    max-width: 1280px;
    align-items: stretch;
}




.mk-pro [page=page1] #section05 .process-container .process-step {
    padding: 50px 23px;
    transition: background 0.4s ease-in-out 0s;
    width: calc(25% - 27px);
    display: inline-block;
    font-size: 12px;
    border: 1px solid #FFFFFF1A;
    border-radius: 10px;
    margin: 0 32px 32px 0;
    box-sizing: border-box;
    vertical-align: top;
    background-color: #292A2F;
}

.mk-pro [page=page1] #section05 .process-container .process-step:nth-child(2) h3 {
     color: #35C9FD;                                
}

.mk-pro [page=page1] #section05 .process-container .process-step:nth-child(3) h3 {
     color: #2B9FFE;                                
}

.mk-pro [page=page1] #section05 .process-container .process-step:nth-child(4) h3 {
     color: #227AFF;                                
}                        

.mk-pro [page=page1] #section05 .process-container .process-step:nth-child(4n) {
    margin-right: 0;
}

.mk-pro [page=page1] #section05 .process-container .process-step .step-content {

}

.mk-pro [page=page1] #section05 .process-container .process-step:hover { background: #fff; cursor: pointer; }
.mk-pro [page=page1] #section05 .process-container .process-step:hover li {color:#292A2F; }                        


.mk-pro [page=page1] #section05 .process-container .step-title {
    font-size: 14px;
    color: #00a9ff;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
.mk-pro [page=page1] #section05 .process-container .step-content h3 {
    font-family: Pretendard;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #00d4ff;
    margin: 0 0 22px 0;
}
.mk-pro [page=page1] #section05 .process-container .step-content ul {
    list-style: none;
    font-size: 14px;
    line-height: 1.8;
}
.mk-pro [page=page1] #section05 .process-container .step-content ul li {
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    letter-spacing: -0.05em;
    text-align: left;
    color: #fff;                            
}


.mk-pro [page=page1] #section05 .process-container .gress-wrap {}

/* ¸ÂÃã°³¹ß */
/* ¸ÂÃã °³¹ß info Ãß°¡ */
[page=page3] #section01 .info {
    margin: 120px 0;
}

[page=page3] #section01 .info ul.ellipse {
    font-size: 0;
}

[page=page3] #section01 .info ul.ellipse li {
    position: relative;
    padding: 0px 0;
    transition: background 0.4s ease-in-out 0s;
    width: calc(33.3% - 27px);
    display: inline-block;
    font-size: 12px;
    border: 1px solid #227AFF;
    border-radius: 50%;
    margin-right: 40px;
    box-sizing: border-box;
    vertical-align: top;
    background-color: transparent;
}

[page=page3] #section01 .info ul.ellipse li:nth-child(3) {
    margin-right: 0;
}

[page=page3] #section01 .info ul.ellipse li::before {
    content: "";
    display: block;
    padding-top: 100%;
}

[page=page3] #section01 .info ul.ellipse li .rate_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

[page=page3] #section01 .info ul.ellipse li .txt_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

[page=page3] #section01 .info ul.ellipse li .txt_wrap .tit {
    font-size: 34px;
    font-weight: 700;
    line-height: 47.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #438EFF;
}

[page=page3] #section01 .info ul.ellipse li .txt_wrap .txt {
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #FFFFFF80;
    margin: 20px 0 0 0;
}


[page=page3] #section01 .info ul.ellipse li:hover {
    background: #438EFF;
    cursor: pointer;
}

[page=page3] #section01 .info ul.ellipse li:hover .txt_wrap p {
    color: #fff;
}

[page=page3] #section02 .banner_list .bottom_con {
    display: none;
}

[page=page3] #section02 .banner_list ul li {
    width: 100%;
    margin: 0 30px 30px 30px;
}

[page=page3] #section02 .banner_list ul li a {
    border-radius: 15px;
}

[page=page3] #section02 .banner_list ul li a img {
    width: 100px;
    max-width: none;
}

[page=page3] #section02 .info ul {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

[page=page3] #section02 .info ul li {
    padding: 25px 0 0px 0;
    border: 1px solid #FFFFFF1A;
    border-radius: 10px;
    margin: 0 40px 40px 0;
    background-color: #292A2F;
}

[page=page3] #section02 .info ul li::before { display: none; }

[page=page3] #section02 .info ul li:hover {
    background: #fff;
    cursor: pointer;
}

[page=page3] #section02 .info ul li:hover h2 span,
[page=page3] #section02 .info ul li:hover .txt p {
    color: #292A2F;
}

[page=page3] #section02 .info ul li h2 {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 30px 0;
}

[page=page3] #section02 .info ul li h2 span {
    color: #fff;
    font-family: Pretendard;
    font-size: 28px;
    font-weight: 700;
    line-height: 39.2px;
    letter-spacing: -0.02em;
    text-align: center;
    margin-left: 10px;
}

[page=page3] #section02 .info ul li .txt {
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
}

[page=page3] #section02 .info ul li .txt p {
    margin: 0px 33px;
    padding: 33px 0;
    border-top: 1px solid #3e3f43;
    font-family: Pretendard;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
}


/* ?? ?? ???? */
[page=page3] #section04 .process-cont{position:relative;display:flex;justify-content: space-between;gap: 2%;margin: 120px 0;}
[page=page3] #section04 .process-cont:after{content:'';width: 81%;left: 9%;position: absolute;top: 37px;display:block;height: 1px;background: linear-gradient( 90deg,#3EEFFD,#35C9FD,#35B0FD,#2B9FFE,#227AFF);-webkit-mask: repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px);mask: repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px);}
[page=page3] #section04 .process-cont li{flex: 0 0 calc((100% - (4 * 2%)) / 5);}
[page=page3] #section04 .process-cont li .step-box{font-size:15px; font-weight:700;color:#FFFFFF;text-align:center}
[page=page3] #section04 .process-cont li .step-box span{display:block;width:12px;height:12px;border-radius:100%;position:relative;z-index:2;margin: 13px auto 0;}
[page=page3] #section04 .process-cont li .step-box span:after{content:'';display:block;position:absolute;width:18px;height:18px;left:-4px;top:-4px;border-radius:100%; border:1px solid #000000;z-index:1}
[page=page3] #section04 .process-cont li .proc-tit{margin-top:35px;border-radius: 10px;padding:4rem 0; text-align:center; border:1px solid #FFFFFF20;font-weight:700;font-size:24px;background:#292A2F} 
[page=page3] #section04 .process-cont li:nth-child(1) .proc-tit{color:#3EEFFD}
[page=page3] #section04 .process-cont li:nth-child(2) .proc-tit{color:#35C9FD}
[page=page3] #section04 .process-cont li:nth-child(3) .proc-tit{color:#35B0FD}
[page=page3] #section04 .process-cont li:nth-child(4) .proc-tit{color:#2B9FFE}
[page=page3] #section04 .process-cont li:nth-child(5) .proc-tit{color:#227AFF}
[page=page3] #section04 .process-cont li:nth-child(1) .step-box span{background:#3EEFFD}
[page=page3] #section04 .process-cont li:nth-child(2) .step-box span{background:#35C9FD}
[page=page3] #section04 .process-cont li:nth-child(3) .step-box span{background:#35B0FD}
[page=page3] #section04 .process-cont li:nth-child(4) .step-box span{background:#2B9FFE}
[page=page3] #section04 .process-cont li:nth-child(5) .step-box span{background:#227AFF}
[page=page3] #section04 .process-cont li:nth-child(1) .step-box span:after{border-color:#3EEFFD}
[page=page3] #section04 .process-cont li:nth-child(2) .step-box span:after{border-color:#35C9FD}
[page=page3] #section04 .process-cont li:nth-child(3) .step-box span:after{border-color:#35B0FD}
[page=page3] #section04 .process-cont li:nth-child(4) .step-box span:after{border-color:#2B9FFE}
[page=page3] #section04 .process-cont li:nth-child(5) .step-box span:after{border-color:#227AFF}

[page=page3] #section05 .cta-cont{}
[page=page3] #section05 .cta-cont .cta-swiper{display:none}
[page=page3] #section05 .cta-cont .cta-card{display:flex;gap:20px;justify-content: center;margin: 120px 0;}
[page=page3] #section05 .cta-cont .cta-card li{width:380px;height:500px;border-radius:20px;padding:60px 40px}
[page=page3] #section05 .cta-cont .cta-card li:nth-child(1){background: linear-gradient(0deg, #36497C 0%, #728BCD 100%);transform: rotate(-12deg) translate(-45px, 40px);}
[page=page3] #section05 .cta-cont .cta-card li:nth-child(2){background: linear-gradient(0deg, #2D16C7 0%, #393079 100%);}
[page=page3] #section05 .cta-cont .cta-card li:nth-child(3){background: linear-gradient(0deg, #FF7C56 0%, #DE5831 100%);transform: rotate(12deg) translate(45px, 40px);}
[page=page3] #section05 .cta-cont .cta-card li .img{}
[page=page3] #section05 .cta-cont .cta-card li .img img{}
[page=page3] #section05 .cta-cont .cta-card li .txt-box{margin-top:50px;text-align:center;}
[page=page3] #section05 .cta-cont .cta-card li .txt-box .tit{font-size:32px; font-weight:600;color:#fff}
[page=page3] #section05 .cta-cont .cta-card li .txt-box .txt{margin-top:15px;font-size:20px;font-weight:400;color:#fff}
[page=page3] #section05 .cta-cont .cta-card li .txt-box .hashtag{margin-top:15px;font-size:20px;font-weight:500;color:#FDDD2B}
[page=page3] #section05 .cta-cont a{transition: background 0.4s ease-in-out 0s;width:360px;height:80px; background:#227AFF; border-radius:100px;color:#fff;font-size:28px;font-weight:700;display:flex;justify-content: center;align-items: center;margin:160px auto 0;}
[page=page3] #section05 .cta-cont a:hover{background:#fff; color:#227AFF}

.mk-pro [page=page3] #section03 .banner_list ul li a{pointer-events: auto;cursor: pointer;}
.mk-pro [page=page1] #section03 .banner_list ul li a{pointer-events: auto;cursor: pointer;}

.mk-pro .section .cont .more .more_wrap a.my-fit-btn{background:#fff;color: #227AFF;transition: background 0.4s ease-in-out 0s;right:230px}
.mk-pro .section .cont .more .more_wrap a.my-fit-btn:hover{background:#227AFF;color: #fff;}


@media screen and (max-width: 1100px) {
    .mk-pro .section .tab ul li a{font-size:18px}
    [page=page3] #section04 .process-cont li .proc-tit{font-size:18px}
    [page=page3] #section05 .cta-cont .cta-card li{width:30%;height:400px;padding:30px 20px}
    [page=page3] #section05 .cta-cont .cta-card li .txt-box{margin-top:40px;}
    [page=page3] #section05 .cta-cont .cta-card li .txt-box .tit{font-size:24px; }
    [page=page3] #section05 .cta-cont .cta-card li .txt-box .txt{margin-top:15px;font-size:16px;}
    [page=page3] #section05 .cta-cont .cta-card li .txt-box .hashtag{margin-top:15px;font-size:16px;}
    .mk-pro .section .cont .more .more_wrap a{}
    .mk-pro .section .cont .more {
        margin: 0px 0 0px 0;
        width: -webkit-fill-available;   
   }    
   
   .mk-pro .section .cont .more .more_wrap .more_txt br {display: block;}
   .mk-pro .section .cont .more .more_wrap a {
        font-size: 16px;
        line-height: 40px;   
        transform: none;
   }

    .mk-pro .section .cont .more .more_wrap .more_txt {
        transform: none;
        font-size: 16px;
    }
    
    .mk-pro .section .cont .more .more_wrap .innerWrap {
        padding: 20px 0;
    }
    
    .mk-pro .section .cont .more .more_wrap {height: auto;left:0  }
    .mk-pro .section .cont .more .more_wrap .innerWrap { height: auto; padding: 30px 0;}
    .mk-pro .section .cont .more .more_wrap .more_txt { text-align: center; position: static; margin: 0; padding:0 50px;}
    .mk-pro .section .cont .more .more_wrap a { margin:10px 0 0 0; display:inline-block; position: static;}
    .mk-pro .section .cont .more .more_txt { font-size: 18px;line-height: 25px;}
    .mk-pro .section .cont .more .more_wrap a.my-fit-btn{margin-right:10px}


}


@media screen and (max-width: 767px) {


    .mk-pro #content { margin: 96px 0 0 0; width:auto; }
    .mk-pro #sectionTop p { font-size: 30px; line-height: 45px; padding:0 20px; letter-spacing: -0.2rem; }
    .mk-pro #sectionTop p .icon02, .mk-pro #sectionTop p .icon03 { display: none;}
    .mk-pro #sectionTop p .icon img { height: 50px; }
    .mk-pro #sectionTop .more { margin: 20px 0 60px 0; }

    .mk-pro .section .tab ul{
        display:flex;
        gap:9.7%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        white-space:nowrap;
        padding:0 16px;
    }
    .mk-pro [page=page2] .section .tab ul{justify-content: center;}
    .mk-pro .section .tab ul::-webkit-scrollbar{ display:none; }
    .mk-pro .section .tab ul li { 
        flex:0 0 auto;
        width:auto;
        scroll-snap-align:center; 
    }
    
    .mk-pro .section .tab ul li:nth-child(6){ display:none;}
    .mk-pro .section .tab ul li a { font-size: 14px; line-height: 60px;}
    .mk-pro .section .tab ul li a:hover {color: #FFFFFF80;}
    .mk-pro .section .tab ul li.on a {color: #fff;}
    .mk-pro #section01 { margin: 60px 0 0 0;}
    .mk-pro .section .cont { margin: 70px 0; padding: 0 20px;}
    .mk-pro .section .cont .tit .txt01 { font-size: 18px; line-height: 35px;}
    .mk-pro .section .cont .tit .txt02 { font-size: 25px; line-height: 40px; margin: 5px 0 15px 0;}  
    .mk-pro .section .cont .tit .txt03 { font-size: 16px; line-height: 25px;}
    .mk-pro .section .cont .tit .txt04 { 
        display: block;
        font-size:18px;
    }

 
    .mk-pro .section .cont .more .add_txt {  margin: 120px 0 0 0; }
    .mk-pro .section .cont .more .more_wrap { 
        /*width: calc(100% + 30px);
        left: -30px;*/
    }

    .mk-pro .section .cont .more .more_wrap {height: auto;  }
    .mk-pro .section .cont .more .more_wrap .innerWrap { height: auto; padding: 30px 0;}
    .mk-pro .section .cont .more .more_wrap .more_txt { text-align: center; position: static; margin: 0; padding:0 50px;}
    .mk-pro .section .cont .more .more_wrap a { margin:10px 0 0 0; display:inline-block; position: static;}

    .mk-pro #section01 .info { margin: 60px 0;}
    .mk-pro #section01 .info ul li:first-child { margin:0;}
    .mk-pro #section01 .info ul li { width: 100%; margin: 20px 0 0 0; padding: 25px 0;}
    .mk-pro #section01 .info ul li .txt { font-size: 18px; line-height: 25px;}
    .mk-pro #section01 .info ul li .txt strong {/* font-size: 25px; line-height: 37px; letter-spacing: -2%; */}
    .mk-pro #section01 .info ul li .txt span { /*word-break: keep-all; overflow-wrap: break-word;*/ padding:0 5%; /*font-size: 20px; line-height: 30px; letter-spacing: -2%;*/ }
    .mk-pro #section01 .info ul li .img { margin: 0 0 10px 0;}
    .mk-pro #section01 .info ul li .img img { height: 50px; }
    .mk-pro .section .cont .more { margin: 60px 0 0 0;}
    .mk-pro .section .cont .more a { font-size: 18px; line-height: 50px; padding:0 20px; margin: 0 0 20px 0;}
    .mk-pro .section .cont .more .more_txt { font-size: 18px; line-height: 25px; }

    .mk-pro #section02 .info { margin: 60px 0; } 
    .mk-pro #section02 .info ul { padding: 0 20%;}
    .mk-pro #section02 .info ul li { padding: 0px 0;  width: 100%; margin: 0 0 20px 0;}
    .mk-pro #section02 .info ul li .txt_wrap .tit { font-size: 17px; line-height:20px;}
    .mk-pro #section02 .info ul li .txt_wrap .txt { font-size: 14px;  margin: 10px 0 0 0; line-height:23px; letter-spacing:-1px;}

    /* ¸ÂÃã °³¹ß info ŸÀÔ Ãß°¡ */
    [page=page3] #section01 .info { margin: 60px 0; padding:0;}
    [page=page3] #section01 .info ul.ellipse { padding: 0 20%;}
    [page=page3] #section01 .info ul.ellipse li { padding: 0px 0;  width: 100%; margin: 0 0 20px 0;}
    [page=page3] #section01 .info ul.ellipse li .txt_wrap .tit { font-size: 17px; line-height:20px;}
    [page=page3] #section01 .info ul.ellipse li .txt_wrap .txt { font-size: 14px;  margin: 10px 0 0 0; line-height:23px; letter-spacing:-1px;}

    .mk-pro #section04 .tab { display:none; }
    .mk-pro #section04 .mk-pro .more_link {display:none;}
	
	.mk-pro [page=page1] #section05  .process-wrap {
       display: flex;
       position:relative;
       margin: 40px 0 0 0;
     
   }
   
   .mk-pro [page=page1] #section05 .process-container .process-step .step-wrap {
       top: 20%;
        right: 108%;
       position: absolute;
       display:flex;
        justify-content: center;
        align-items: baseline;       
   }
   .mk-pro [page=page1] #section05 .process-container .process-step .step-wrap .step-text {
           margin: 0 10px 16px 0;
        display: block;
        width: 100%;
        white-space: nowrap;           
   }

    .mk-pro [page=page1] #section05 .process-container {
        display: flex;
    }
    .mk-pro [page=page1] #section05 .process-container .process-line {
        width: 1px;
        height: calc(100% - 220px);
        margin: auto 2% auto 20%;
        position: relative;
        left: 0;
        top: -33px;
    }

    .mk-pro [page=page1] #section05 .process-container .process-step-wrap {
        display: block;
        width: 70%;
    }


    .mk-pro [page=page1] #section05 .process-container .process-line:after {
        position: absolute;
        top: 0;
        left: 0px;
        content: "";
        border: 1px dashed #000000;
        /* height: 1px; */
        width: 1px;
        height: 100%;
    }


    .mk-pro [page=page1] #section05 .process-container {
        /*
        flex-direction: column;
        align-items: center;
        */
        width: 100%;
        margin: 0px 0 0px 0%;                   
        gap: 0;

    }

    .mk-pro [page=page1] #section05 .process-container .process-step:nth-child(4n) {
        margin-bottom: 0;
    }

    .mk-pro [page=page1] #section05 .gress-container .step-wrap {
        width:100%;
    }

    .mk-pro [page=page1] #section05 .process-container .process-step {
        width: 100%;
        margin: 0px 0 40px 0;
        padding: 20px 23px;
        position: relative;
    }

    .mk-pro [page=page1] #section05 .process-container .step-content h3 {
        text-align: left;
        font-size: 20px;
        line-height: 30px;
        margin: 0 0 10px 0;
    }
    
    .mk-pro [page=page1] #section05 .process-container .process-step .step-wrap .circle {
        position:relative;
        width:10px;
        height:8px;
        border: 1px solid #000000!important;
        outline: 1px solid #35C9FD!important;
    }
    .mk-pro .tab_cm {
        margin: 60px auto 0 auto;
    }
    
    
   .mk-pro .section .cont .more {
        margin: 0px 0 0px 0;
        width: -webkit-fill-available;   
   }    
   
   .mk-pro .section .cont .more .more_wrap .more_txt br {display: block;}
   .mk-pro .section .cont .more .more_wrap a {
        font-size: 16px;
        line-height: 40px;   
        transform: none;
   }

    .mk-pro .section .cont .more .more_wrap .more_txt {
        transform: none;
        font-size: 16px;
    }
    
    .mk-pro .section .cont .more .more_wrap .innerWrap {
        padding: 20px 0;
    }

    .mk-pro .banner_list {
        margin: 50px auto 0 !important;
    }

    .mk-pro .banner_list ul li {
        width: auto;
        max-width: 100%;
        margin: 0 0.8rem !important;
    }

    .mk-pro .banner_list ul li img {
        max-width: none;
        height: 70px;
    }

    [page=page2] #section02 .info {
        padding: 0;
    }

    [page=page2] #section02 .info ul {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0;
    }

    [page=page2] #section02 .info ul li {
        width: calc(50% - 12px);
        margin: 0;
    }

    [page=page2] #section02 .info ul li:nth-child(3) {
        margin-right: 0;
    }

    [page=page3] #section02 .banner_list ul li a img {
        width: auto !important;
    }

    [page=page3] #section02 .banner_list .full_roll {
        opacity: 0;
        height: 0;
        width: 0;
        margin: 0;
    }

    [page=page3] #section02 .banner_list .bottom_con {
        display: flex !important;
        opacity: 1;
        height: auto;
    }

    [page=page3] #section02 .info ul {
        padding: 0;
    }

    [page=page3] #section02 .info {
        margin: 60px 0;
        padding: 0;
    }

    [page=page3] #section02 .info ul li {
        width: 100%;
        margin: 20px 0 0 0;
        padding: 15px 0 0px 0;
    }

    [page=page3] #section02 .info ul li h2 {
        margin: 0 0 5px 0 !important;
    }

    [page=page3] #section02 .info ul li h2 span {
        font-size: 24px;
        margin-left: 5px;
    }

    [page=page3] #section02 .cont .info ul li .txt {
        font-size: 18px;
        line-height: 25px;
        padding: 15px 15px;
        position: relative;
    }

    [page=page3] #section02 .info>ul>li .txt p {
        margin: 0px 22px;
        padding: 22px 0;
        font-size: 16px;
    }

    [page=page3] #section04 .process-cont{margin:60px 0;flex-direction: column;gap:100px}
    [page=page3] #section04 .process-cont li {display: flex;justify-content: space-between;align-items: center;}
    [page=page3] #section04 .process-cont li .step-box{display: flex;align-items: center; width:75px;justify-content: space-between;font-size:13px}
    [page=page3] #section04 .process-cont li .step-box span{margin: 0 0 0 15px;width: 6px;height: 6px;}
    [page=page3] #section04 .process-cont li .step-box span:after {width: 12px;height: 12px;}
    [page=page3] #section04 .process-cont li .proc-tit{width: calc(100% - 100px);padding: 1.5rem;text-align: left; margin-top: 0;font-size:16px}
    [page=page3] #section04 .process-cont:before {content:'';position:absolute;top:4.5%;left:71px;height:92%;width:2px;background:linear-gradient(180deg,#3EEFFD,#35C9FD,#35B0FD,#2B9FFE,#227AFF);-webkit-mask:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px);mask:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px);}
    [page=page3] #section04 .process-cont:after {display:none;}


    [page=page3] #section05 .cta-cont .cta-card{display:none}
    [page=page3] #section05 .cta-cont .cta-swiper {margin:60px 0;display:block}
    [page=page3] #section05 .cta-cont .cta-swiper li{width:320px;height:430px;border-radius:20px;padding:50px 30px}
    [page=page3] #section05 .cta-cont .cta-swiper li:nth-child(1){background: linear-gradient(0deg, #36497C 0%, #728BCD 100%);}
    [page=page3] #section05 .cta-cont .cta-swiper li:nth-child(2){background: linear-gradient(0deg, #2D16C7 0%, #393079 100%);}
    [page=page3] #section05 .cta-cont .cta-swiper li:nth-child(3){background: linear-gradient(0deg, #FF7C56 0%, #DE5831 100%);}

    [page=page3] #section05 .cta-cont .cta-swiper li .txt-box{margin-top:40px;text-align:center;}
    [page=page3] #section05 .cta-cont .cta-swiper li .txt-box .tit{font-size:25px; font-weight:600;color:#fff}
    [page=page3] #section05 .cta-cont .cta-swiper li .txt-box .txt{margin-top:15px;font-size:18px;font-weight:400;color:#fff}
    [page=page3] #section05 .cta-cont .cta-swiper li .txt-box .hashtag{margin-top:15px;font-size:18px;font-weight:500;color:#FDDD2B}
    [page=page3] #section05 .cta-cont a{width: 220px;height: 50px;background: #227AFF;border-radius: 40px;color: #fff;font-size: 16px;font-weight: 700;display: flex;justify-content: center;align-items: center;margin: 60px auto 0;}
    [page=page3] #section05 .cta-cont a:hover{background: #227AFF;color: #fff;transition: background 0s}


}