@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'PureunSup';

   src: url('/font/pureunsup_Light.eot');

    src:
        url('/font/pureunsup_Light.eot?#iefix') format('embedded-opentype'),
        url('/font/pureunsup_Light.woff2') format('woff2'),
        url('/font/pureunsup_Light.woff') format('woff');

    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'PureunSup';

    src: url('/font/pureunsup_Medium.eot');

    src:
        url('/font/pureunsup_Medium.eot?#iefix') format('embedded-opentype'),
        url('/font/pureunsup_Medium.woff2') format('woff2'),
        url('/font/pureunsup_Medium.woff') format('woff');

    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'PureunSup';

    src: url('/font/pureunsup_Bold.eot');

    src:
       url('/font/pureunsup_Bold.eot?#iefix') format('embedded-opentype'),
        url('/font/pureunsup_Bold.woff2') format('woff2'),
        url('/font/pureunsup_Bold.woff') format('woff');

    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



.slider3-2 .slide-area li img{width:auto; margin:0 auto}
.slider3-2 .controller .auto i{color:white}
.slider3-2 .controller .indicate-area a, .slider3-2 .controller .indicate-area a:after{border-radius:8px}
.slider3-2 .controller .indicate-area a:after{border:2px solid white}
.slider3-2 .controller .indicate-area a.on:after{background-color:white}
.slider3-2 .controller .indicate-area a.on{width:70px}
.section1 .prev, .section1 .next{width:50px; height:50px; border-radius:100%; border:2px solid white; display:flex; justify-content:center; align-items:center; top:auto; bottom:7px; left:50%; z-index:1}
.section1 .prev img, .section1 .next img{display:none}
.section1 .prev::before, .section1 .next::before{ content:''; width:17px; height:17px; border-top:2px solid white; border-right:2px solid white;  display:block}
.section1 .prev::before{transform:rotate(225deg); margin-left:7px }
.section1 .next::before{transform:rotate(45deg); margin-right:7px }
.section1 .prev{margin-left:-164px}
.section1 .next{margin-left:107px}
.section1 .controller{bottom:45px}
.slider3-2 .show p, .slider3-2 .show h2{animation:none}

.main-visual {

    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 650px;

    overflow: hidden;
    background: url(/img/newslide/newslide1.png) 50% 50% no-repeat;
	display:flex; align-items:center; background-size:cover

}






/* =========================================================
   BLUR LAYER
========================================================= */

.main-visual .visual-blur {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        rgba(255,255,255,0.05);

    backdrop-filter: blur(1.5px);

    -webkit-backdrop-filter: blur(1.5px);

    pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.main-visual .header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;
    height: 82px;

    display: flex;

    align-items: center;

    padding:
        0 clamp(35px, 6vw, 95px);
}







/* =========================================================
   CONTENT
========================================================= */

.main-visual .visual-content {

    position: relative;

    z-index: 10;

    width: 100%;
   

    display: flex;

    align-items: center;

    max-width:1600px; margin:0 auto; flex-wrap:wrap;
	/* 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); z-index:2*/
}

.main-visual .visual-content, .product-visual .product-content .wrap-product-con{margin-top:48px}

/* =========================================================
   LEFT CONTENT
========================================================= */

.main-visual .visual-copy {

    width: 36%;

    max-width: 500px;


    animation:
        copyIn .8s ease both;
}

@keyframes copyIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.main-visual .copy-category {
font-family: 'PureunSup', sans-serif;
    margin-bottom: 10px;

    color:
        rgba(255,255,255,0.85);

    font-size: 20px;

    font-weight: 500;

    letter-spacing: 0;
}


.main-visual .copy-title {

    color: #fff;

    font-size:
        100px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -3px;

    text-shadow:
        0 3px 15px
        rgba(0,0,0,0.25); font-family: 'PureunSup', sans-serif;
		
}

.main-visual .copy-title span, .certification-visual .cert-title span{position:relative}
.main-visual .copy-title span::before, .certification-visual .cert-title span::before{width:13px; height:13px; border-radius:100%; background:white; position:absolute; left:50%; top:-5px; content:''; transform:translate(-50%,0)}
.main-visual .copy-description {

    margin-top: 25px;

    color:
        rgba(255,255,255,0.88);

    font-size: 20px;

    line-height: 1.8;

    letter-spacing: -0.3px; font-weight:700
}

.main-visual .visual-cards {

    width: 59.7%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    margin-left: auto;

}


/* =========================================================
   CARD
========================================================= */

.main-visual .visual-card {

    position: relative;

    height:
        clamp(260px, 461px, 461px);

    overflow: hidden;

    border-radius: 8px;

    background: #777;

    cursor: pointer;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),

        box-shadow .45s ease;
}
.main-visual .card1{background:url(/img/newslide/bgnewcard1.png) 50% 50% no-repeat; background-size:cover}
.main-visual .card2{background:url(/img/newslide/bgnewcard2.png) 50% 50% no-repeat; background-size:cover}
.main-visual .card3{background:url(/img/newslide/bgnewcard3.png) 50% 50% no-repeat; background-size:cover}
.main-visual .visual-card:hover {

    transform:
        translateY(-10px);
}


/* =========================================================
   CARD IMAGE
========================================================= */

.main-visual .card-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1);
}

.main-visual .visual-card:hover .main-visual .card-image {

    transform:
        scale(1.08);
}





/* =========================================================
   CARD CONTENT
========================================================= */

.main-visual .card-content {

    position: absolute;

    z-index: 3;

    left: 25px;
    right: 20px;
    bottom: 22px;
}

.main-visual .card-category {

    margin-bottom: 6px;

    color:
        rgba(255,255,255,0.85);

    font-size: 18px;

    text-transform: uppercase; font-weight:400
}

.main-visual .card-title {

    color: #fff;

    font-size:30px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -1px;
}


/* =========================================================
   CARD LINKS
========================================================= */

.main-visual .card-links {

    margin-top: 18px;

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.main-visual .card-links a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
        rgba(255,255,255,.9);

    font-size: 20px;

    transition:
        color .3s ease; font-weight:500
}

.main-visual .card-links a span {

    font-size: 15px;

    line-height: 1;

    transition:
        transform .3s ease;
}

.main-visual .card-links a:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   BOTTOM CONTROLLER
========================================================= */

.main-visual .visual-controller {

    position: absolute;

    z-index: 30;

    left: 50%;
    bottom: 34px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 14px;
}


/* =========================================================
   ARROW
========================================================= */

.main-visual .slide-arrow {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius: 50%;

    background:
        rgba(255,255,255,.03);

    color: #fff;

    cursor: pointer;

    font-size: 18px;

    transition:
        background .3s ease,
        transform .3s ease;
}

.main-visual .slide-arrow:hover {

    background:
        rgba(255,255,255,.2);

    transform:
        scale(1.08);
}


/* =========================================================
   DOTS
========================================================= */

.main-visual .slide-dots {

    display: flex;

    align-items: center;

    gap: 9px;
}

.main-visual .slide-dot {

    width: 8px;
    height: 8px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.7);

    cursor: pointer;

    transition:
        width .3s ease,
        border-radius .3s ease,
        background .3s ease;
}

.main-visual .slide-dot.active {

    width: 37px;

    border-radius: 20px;

    background: #fff;
}




.main-visual .bottom-line {

    position: absolute;

    z-index: 20;

    left: clamp(40px, 8.3vw, 120px);
    right: clamp(40px, 8.3vw, 120px);

    bottom: 15px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.25),
            transparent 80%
        );

    opacity: .35;
}

.main-visual .visual-content .certi, .product-visual .certi{width:100%;  display:flex;
   text-align:center; font-size:18px; font-weight:700; color:rgba(256,256,256,.8); margin-top:50px; font-family: 'Noto Sans KR', sans-serif;}
.main-visual .visual-content .certi div, .product-visual .certi div {position:relative; width:20%}
.main-visual .visual-content .certi div::after, .product-visual .certi div::after {content:''; position:absolute; width:4px; height:42px; background:rgba(256,256,256,.5); right:0; top:50%; transform:translate(0, -50%)}
.main-visual .visual-content .certi div:first-child::before, .product-visual .certi div:first-child::before {content:''; position:absolute; width:4px; height:42px; background:rgba(256,256,256,.5); left:0; top:50%; transform:translate(0, -50%)}
.main-visual .visual-content .certi img, .product-visual .certi img{max-height:25px}

.certification-visual .wrap-cert-icon{display:flex; align-items:center; gap:18px}
.certification-visual {

    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    background: url(/img/newslide/newslide2.png) 50% 50% no-repeat;
	background-size:cover
}


/* =========================================================
   BACKGROUND
========================================================= */

.certification-visual .cert-bg {

    position: absolute;

    inset: -20px;

    z-index: 0;

    background:
        center center / cover
        no-repeat;

    transform:
        scale(1.certification-visual .05);

    filter:
        blur(4px);

    transition:
        background-image .8s ease;
		
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* 어두운 배경 오버레이 */

.certification-visual .cert-bg::after {

    content: "";

    position: absolute;

    inset: 0;

   background: linear-gradient(to right, #D9D9D9 0%, #737373 100%);
    opacity: .2;
}


/* =========================================================
   LIGHT OVERLAY
========================================================= */

.certification-visual .cert-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,.08),
            transparent 45%
        ),

        linear-gradient(
            to bottom,
            rgba(0,0,0,.12),
            rgba(0,0,0,.12) 65%,
            rgba(0,0,0,.42)
        );

    pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.certification-visual .header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;
    height: 82px;

    display: flex;

    align-items: center;

    padding:
        0 clamp(35px, 6vw, 95px);
}


/* =========================================================
   LOGO
========================================================= */

.certification-visual .logo {

    width: 150px;

    display: flex;

    align-items: center;
}

.certification-visual .logo img {

    display: block;

    width: 135px;

    height: auto;
}


/* =========================================================
   NAV
========================================================= */

.certification-visual .nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(35px, 4vw, 65px);

    margin-left: auto;
    margin-right: auto;
}

.certification-visual .nav a {

    position: relative;

    color:
        rgba(255,255,255,.92);

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;
}

.certification-visual .nav a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: #fff;

    transform:
        translateX(-50%);

    transition:
        width .3s ease;
}

.certification-visual .nav a:hover::after {

    width: 100%;
}


/* =========================================================
   HEADER TOOLS
========================================================= */

.certification-visual .header-tools {

    display: flex;

    align-items: center;

    gap: 17px;
}

.certification-visual .header-tools button {

    width: 22px;
    height: 22px;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;

    font-size: 15px;

    opacity: .9;
}


/* =========================================================
   CONTENT
========================================================= */

.certification-visual .cert-content {

    position: relative;

    z-index: 10;

    width: 100%;
    height: 100%;

    padding:
        105px clamp(35px, 8.3vw, 120px) 55px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


/* =========================================================
   TITLE
========================================================= */

.certification-visual .cert-title {

    position: relative;

    z-index: 5;

    margin-top: 20px;

    color: #fff;

    font-size:
        clamp(42px, 4.2vw, 100px);

    font-weight: 800;

    line-height: 1;

    letter-spacing:
        -4px;

    text-shadow:
        0 5px 20px
        rgba(0,0,0,.3);

    animation:
        titleIn .8s ease both;
	font-family: 'PureunSup', sans-serif;	
}

@keyframes titleIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   CERTIFICATION AREA
========================================================= */

.certification-visual .cert-layout {

    width: 100%;

    max-width: 1597px;

    margin-top: 18px;

    display: grid;

    grid-template-columns:
        19% 1fr;

    gap: 12px;

    align-items: stretch;
}


/* =========================================================
   TOTAL COUNT
========================================================= */

.certification-visual .cert-count {

    position: relative;

    min-height: 245px;

    padding:
        18px 18px 17px;

    display: flex;

    flex-direction: column;

    border:
        2px solid
        rgba(255,255,255,.8);

    border-radius: 8px;

    background:
        rgba(40,40,40,.12);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    overflow: hidden;
}


/* 작은 아이콘 */

.certification-visual .count-icon {

   

    margin-bottom: 8px;

    position: relative;
}




.certification-visual .count-title {

    font-size: 24px;

    font-weight: 700;

    letter-spacing: .5px; color:white
}


.certification-visual .count-description {

    margin-top: 8px;

    color:
        rgba(255,255,255,.82);


    word-break: keep-all;
}
.certification-visual .cert-description, .certification-visual .count-description{font-size:20px; line-height:1.35}

.certification-visual .count-number {

    margin-top: 93px;

    color: #fff;

    font-size:
        130px;

    font-weight: 800;

    line-height: .9;

    letter-spacing: -4px;  font-family: 'GmarketSansBold';
}


/* =========================================================
   CARD GRID
========================================================= */

.certification-visual .cert-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================================
   CERT CARD
========================================================= */

.certification-visual .cert-card {

    position: relative;

    min-height: 115px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    overflow: hidden;

    border:
        2px solid
        rgba(255,255,255,.75);

    border-radius: 7px;

    background:
        rgba(255,255,255,.13);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.certification-visual .cert-card:hover {

    background:
        rgba(255,255,255,.20);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.2);
}


/* =========================================================
   CARD TEXT
========================================================= */

.certification-visual .cert-info {

    padding:
        14px 14px 12px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;
}

.certification-visual .cert-info .cert-icon{width:26px}




.certification-visual .cert-name {

    font-size: 24px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .3px; color:white
}


.certification-visual .cert-description {

    margin-top: 29px;

    color:
        rgba(255,255,255,.86);

   

    word-break: keep-all;
}


/* =========================================================
   CERTIFICATE IMAGE
========================================================= */

.certification-visual .cert-image {

    position: relative;

    background:
        rgba(255,255,255,.13);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}

.certification-visual .cert-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(255,255,255,.08);
}


.certification-visual .cert-image img {

    position: relative;

    z-index: 2;

   height:193px;

    object-fit: contain;

    transition:
        transform .45s ease;
}

.certification-visual .cert-card:hover
.certification-visual .cert-image img {

    transform:
        scale(1.05);
}


/* =========================================================
   BIG BACKGROUND TEXT
========================================================= */

.certification-visual .big-text {

    position: absolute;

    z-index: 2;

    left: 50%;

    bottom: -4px;

    transform:
        translateX(-50%);

    white-space: nowrap;

    color:
        rgba(255,255,255,.25);

   font-size: 10vw;
white-space: nowrap;
    font-weight: 800;

    line-height: .8;

    letter-spacing:
        -7px;

    pointer-events: none;

    user-select: none;
	 font-family: 'GmarketSansBold';
	 opacity:0.25;
	 
}


/* =========================================================
   CONTROLLER
========================================================= */

.certification-visual .controller {

    position: absolute;

    z-index: 30;

    left: 50%;

    bottom: 25px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 13px;
}


/* =========================================================
   ARROW
========================================================= */

.certification-visual .slide-arrow {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius: 50%;

    background:
        rgba(255,255,255,.03);

    color: #fff;

    font-size: 19px;

    cursor: pointer;

    transition:
        all .3s ease;
}

.certification-visual .slide-arrow:hover {

    background:
        rgba(255,255,255,.18);

    transform:
        scale(1.08);
}


/* =========================================================
   DOT
========================================================= */

.certification-visual .dots {

    display: flex;

    align-items: center;

    gap: 8px;
}

.certification-visual .dot {

    width: 8px;
    height: 8px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.7);

    cursor: pointer;

    transition:
        all .3s ease;
}

.certification-visual .dot.certification-visual .active {

    width: 37px;

    border-radius: 20px;

    background: #fff;
}
.product-visual {

    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    background:url(/img/newslide/newslide3.png) 50% 50% no-repeat; background-size:cover
}
.product-visual .wrap-product-con{display:flex; justify-content:space-between; width:100%; align-items:flex-end}

/* =========================================================
   BACKGROUND
========================================================= */

.product-visual .product-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        center center / cover
        no-repeat;

    transform: scale(1.02);

    transition:
        background-image .8s ease,
        transform 1s ease;
}


/* =========================================================
   OVERLAY
========================================================= */

.product-visual .product-bg::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.22),
            rgba(0,0,0,.04) 55%,
            rgba(0,0,0,.22)
        );

}


/* =========================================================
   HEADER
========================================================= */

.product-visual .header {

    position: absolute;

    z-index: 30;

    top: 0;
    left: 0;

    width: 100%;
    height: 78px;

    display: flex;

    align-items: center;

    padding:
        0 clamp(30px, 7.5vw, 110px);
}


/* =========================================================
   LOGO
========================================================= */

.product-visual .logo {

    width: 150px;

    display: flex;

    align-items: center;
}

.product-visual .logo img {

    width: 135px;

    height: auto;

    display: block;
}


/* =========================================================
   NAV
========================================================= */

.product-visual .nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(30px, 4vw, 65px);

    margin-left: auto;

    margin-right: auto;
}

.product-visual .nav a {

    position: relative;

    font-size: 13px;

    font-weight: 500;

    color:
        rgba(255,255,255,.92);

    white-space: nowrap;
}

.product-visual .nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: 0;
    height: 2px;

    background: #fff;

    transform:
        translateX(-50%);

    transition:
        width .3s ease;
}

.product-visual .nav a:hover::after {

    width: 100%;
}


/* =========================================================
   TOOLS
========================================================= */

.product-visual .header-tools {

    display: flex;

    align-items: center;

    gap: 15px;
}

.product-visual .header-tools button {

    width: 22px;
    height: 22px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;

    font-size: 15px;
}


/* =========================================================
   CONTENT
========================================================= */

.product-visual .product-content {

    position: relative;

    z-index: 10;

    width: 100%;
    height: 100%;

	    display: flex;
    flex-wrap: wrap;
    align-content: center;	max-width:1600px; margin:0 auto
}




.product-visual .product-menu {

  

    display: flex;

    flex-direction: column;

    gap: 9px; width:49%; 
    justify-content: space-between;
}


/* =========================================================
   MENU CARD
========================================================= */

.product-visual .menu-card {

    position: relative;

    width: 100%;

    height: 178px;

    overflow: hidden;

    border-radius: 9px;

    background:white;


    box-shadow:
        0 8px 25px
        rgba(0,0,0,.15);

    color: #222;

    cursor: pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}
.product-visual .menu-card1{background:url(/img/newslide/bg-banner1.png) right 50% no-repeat white; background-size:auto 100%}
.product-visual .menu-card2{background:url(/img/newslide/bg-banner2.png) right 50% no-repeat white; background-size:auto 100%}
.product-visual .menu-card3{background:url(/img/newslide/bg-banner3.png) right 50% no-repeat white; background-size:auto 100%}
.product-visual .menu-card:hover {

    transform:
        translateX(8px);

   

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.25);
}


/* 이미지 */

.product-visual .menu-image {

   
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .82;

    transition:
        transform .6s ease;
}

.product-visual .menu-card:hover .menu-image {

    transform:
        scale(1.06);
}






.product-visual .menu-content {



    width: 230px; position:absolute; z-index:1; top:50%; transform:translate(36px, -50%); 
}

.product-visual .menu-title {

    font-size: 29px;

    font-weight: 800;

    letter-spacing: -1px;
}

.product-visual .menu-links {

    margin-top: 10px;

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.product-visual .menu-links a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 243px;

    font-size: 19px;

    color: #333;
}

.product-visual .menu-links span {

    font-size: 15px;

    line-height: 1;

    transition:
        transform .25s ease;
}

.product-visual .menu-links a:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   RIGHT MAIN TITLE
========================================================= */

.product-visual .product-copy {

  
    width:43%;

    transform:
        translateY(-40%);

    text-align: right;
}


/* 작은 카테고리 */

.product-visual .copy-category {

    margin-bottom: 10px;

    color:
        rgba(255,255,255,.82);

    font-size: 20px;    font-family: PureunSup, sans-serif; font-weight:500
}


/* 타이틀 */

.product-visual .copy-title {

    color: #fff;

        font-family: PureunSup, sans-serif;

    font-size:100px;

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -3px;

    text-shadow:
        0 4px 12px
        rgba(0,0,0,.38);
}

.product-visual .copy-title strong {

    font-weight: 500;
}


/* 설명 */

.product-visual .copy-description {

    margin-top: 24px;

    color:
        rgba(255,255,255,.88);

    font-size: 20px;

    line-height: 1.7;

    word-break: keep-all;

    text-shadow:
        0 2px 6px
        rgba(0,0,0,.3); font-weight:700
}




.product-visual .cert-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-right:
        1px solid
        rgba(255,255,255,.35);

    color:
        rgba(255,255,255,.85);

    font-size: 13px;

    font-weight: 500;

    transition:
        background .3s ease,
        color .3s ease;
}

.product-visual .cert-item:last-child {

    border-right: 0;
}

.product-visual .cert-item:hover {

    color: #fff;

    background:
        rgba(255,255,255,.08);
}


/* 아이콘 */

.product-visual .cert-icon {

    width: 18px;
    height: 18px;

    border:
        1px solid
        rgba(255,255,255,.8);

    border-radius: 3px;

    position: relative;
}

.product-visual .cert-icon::after {

    content: "";

    position: absolute;

    left: 4px;
    top: 4px;

    width: 7px;
    height: 4px;

    border-left:
        1px solid #fff;

    border-bottom:
        1px solid #fff;

    transform:
        rotate(-45deg);
}


/* =========================================================
   SLIDER
========================================================= */

.product-visual .slider-controller {

    position: absolute;

    z-index: 40;

    left: 50%;

    bottom: 15px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   ARROW
========================================================= */

.product-visual .slider-arrow {

    width: 30px;
    height: 30px;

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);

    color: #fff;

    font-size: 19px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        all .3s ease;
}

.product-visual .slider-arrow:hover {

    background:
        rgba(255,255,255,.18);

    transform:
        scale(1.08);
}


/* =========================================================
   DOTS
========================================================= */

.product-visual .slider-dots {

    display: flex;

    align-items: center;

    gap: 8px;
}

.product-visual .slider-dot {

    width: 8px;
    height: 8px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.75);

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}

.product-visual .slider-dot.active {

    width: 37px;

    border-radius: 20px;

    background: #fff;
}


/* =========================================================
   ANIMATION
========================================================= */

.product-visual .product-menu,
.product-visual .product-copy {

    animation:
        contentIn .8s ease both;
}

.product-visual .product-copy {

    animation-delay:
        .15s;
}

@keyframes contentIn {

    from {

        opacity: 0;

        transform:
            translateY(-5%)
    }

    to {

        opacity: 1;

        transform:
            translateY(0%)
    }
}
.translated-ltr .main-visual .copy-title br, .translated-ltr .main-visual .copy-description br{display:none}
.translated-ltr .main-visual .copy-title{font-size:60px}
.translated-ltr .main-visual .copy-title span::before, .translated-ltr .certification-visual .cert-title span::before{display:none}
@media (max-width: 1700px) {
.main-visual .visual-content{padding:0 50px}
.main-visual .visual-card{background-size:100% 100%}
.certification-visual .count-number{font-size:100px}
.certification-visual .wrap-cert-icon{display:block}
.slider3-2 .slide-area li .certification-visual .count-icon img{margin:0}
.product-visual .product-content{padding:0 50px}	
.product-visual .product-copy {
    width: 49%;}
	}
@media (max-width: 1500px) {
.main-visual .copy-description{font-size:16px}	
.main-visual .copy-title{font-size:90px}
.main-visual .card-title{font-size:24px}
.certification-visual .cert-content{padding: 105px clamp(35px, 50px, 120px) 55px;}
.certification-visual .cert-count br{display:none}
.certification-visual .cert-title span::before{ width:10px; height:10px}
.certification-visual .cert-image img{height:150px}
.certification-visual .cert-description, .certification-visual .count-description {
    font-size: 1rem;}
.product-visual .product-menu{width:45%}	
.product-visual .product-copy {
    width: 54%;}
	}
@media (max-width: 1280px) {
.main-visual .card-links a{font-size:16px}
    .main-visual .copy-title {
        font-size: 80px;
    }	
    .main-visual .visual-content {
        padding: 0 20px;
    }	
.main-visual .visual-copy{width:40%}	
.main-visual .visual-card{height:400px}
.certification-visual .cert-layout {
   
    grid-template-columns: 33% 1fr;}
.certification-visual .cert-image img{height:120px}
.certification-visual .cert-count{justify-content:flex-start}
.certification-visual .count-title, .certification-visual .cert-name{font-size:1.2rem}
.certification-visual .count-number{position:absolute; bottom:18px}
    .product-visual .product-content {
        padding: 0 20px;
    }
.product-visual .menu-card{height:148px}	
	}
@media (max-width: 1100px) {

    .main-visual .nav {

        gap: 25px;
    }




    .main-visual .visual-cards {

        width: 60%;
    }
    .main-visual .copy-title, .product-visual .copy-title {
        font-size: 50px;
    }
	.main-visual .visual-content .certi, .product-visual .certi{font-size:18px}
	    .main-visual .card-title {
        font-size: 20px;
    }
	.main-visual .card-content {
   
    left: 10px;
    right: 10px;
}
    .main-visual .copy-description, .main-visual .card-links a, .product-visual .copy-description {
        font-size: 14px;
    }
    .main-visual .visual-card {
        height: 260px;
    }
.main-visual .copy-title span::before, .certification-visual .cert-title span::before {
    width: 10px;
    height: 10px;}		
 .product-visual .menu-card1, .product-visual .menu-card2, .product-visual .menu-card3{ background-size:70% 100%} 
 .product-visual .menu-card{height:128px} 
 .product-visual .copy-description br{display:none}
 .main-visual .copy-description {
    margin-top: 10px;}
.main-visual .visual-content .certi, .product-visual .certi	{
    margin-top: 30px;}
.certification-visual .cert-description {
    margin-top: 8px;}
.certification-visual .wrap-cert-icon{display:flex; gap:5px}	
.certification-visual .count-icon{margin-bottom:0}	
.product-visual .menu-title {
    font-size: 18px;}
.product-visual .menu-links a{ font-size: 16px;}
    .product-visual .menu-card {
        height: 100px;
    }	
.section1 .controller {
    bottom: 25px;
}	
.section1 .prev, .section1 .next{bottom:-15px}
}
@media (max-width: 1000px) {

    .product-visual .nav {

        gap: 25px;
    }

    .product-visual .product-menu {

        width: 43vw;
    }

    .product-visual .product-copy {

        right: 30px;

        width: 45vw;
    }


    .product-visual .cert-bar {

        left: 30px;
        right: 30px;
    }
	    .certification-visual .count-number {
        font-size: 5rem;
    }
}


@media (max-width: 900px) {

    .certification-visual .nav {

        gap: 22px;
    }

    .certification-visual .cert-content {
        padding: 105px clamp(20px, 20px, 120px) 20px;
    }

    .certification-visual .cert-card {

        grid-template-columns:
            1fr;
    }.certification-visual .cert-description {
    margin-top: 8px;}
	    .main-visual .visual-copy, .main-visual .visual-cards {
        width: 100%; max-width:100%
    }
	.main-visual .copy-title br{display:none}
	.main-visual .copy-title
 {
        font-size: 3rem;
    }
	.main-visual .copy-title span::before, .certification-visual .cert-title span::before{top:-10px}
	.main-visual .copy-description {
    margin-top: 0px; margin-bottom:30px}
	.main-visual .copy-description br{display:none}
	    .main-visual .visual-copy {
        
        text-align: center;
    }
	.main-visual .copy-title span::before, .certification-visual .cert-title span::before {
    width: 10px;
    height: 10px;}
	.product-visual .menu-content {

    transform: translate(20px, -50%);
}
.product-visual .menu-title{ font-size:18px}
.product-visual .menu-links a{font-size:14px}
}

@media (max-width: 768px) {



    .main-visual .main-visual {

        height: auto;

        min-height: 100vh;
    }


      .certification-visual .wrap-cert-icon {
        display: flex;
    }

    .main-visual .header {

        height: 65px;

        padding:
            0 20px;
    }

    .main-visual .logo {

        width: 120px;
    }

    .main-visual .logo img {

        width: 110px;
    }

    .main-visual .nav {

        display: none;
    }

    .main-visual .header-tools {

        margin-left: auto;
    }


    /* CONTENT */

    .main-visual .visual-content {

        min-height: 100vh;

        height: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: center;


        padding:
            100px 20px 100px;
    }


    /* COPY */

    .main-visual .visual-copy {

        width: 100%;

        max-width: none;

        margin:
            0 0 35px;
    }

    .main-visual .copy-category {

        font-size: 11px;
    }

    .main-visual .copy-title {

        font-size:
            clamp(34px, 10vw, 48px);

        letter-spacing: -2px; word-break:keep-all
    }
    .main-visual .copy-title span::before, .certification-visual .cert-title span::before {
        width: 5px;
        height: 5px; top:-5px
    }
    .main-visual .copy-description {

        margin-top: 18px;

        font-size: 14px;

        line-height: 1.7; word-break:keep-all
    }

    .main-visual .visual-content .certi, .product-visual .certi {
        font-size: 14px;
    }
    /* CARDS */

    .main-visual .visual-cards {

        width: 100%;

        margin: 0;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 6px;
    }

    .main-visual .visual-card {

        height: 230px;

        border-radius: 6px;
    }

    .main-visual .card-content {

        left: 12px;
        right: 10px;
        bottom: 12px;
    }

    .main-visual .card-title {

        font-size: 13px;
    }

    .main-visual .card-links {

        margin-top: 10px;
    }

    .main-visual .card-links a {

        font-size: 8px;
    }


    /* CONTROLLER */

    .main-visual .visual-controller {

        bottom: 30px;
    }


    .main-visual .bottom-line {

        display: none;
    }

 

    .certification-visual {

        height: auto;

        min-height: 100vh;

        overflow: hidden;
    }


    /* HEADER */

    .certification-visual .header {

        height: 65px;

        padding:
            0 20px;
    }

    .certification-visual .logo {

        width: 115px;
    }

    .certification-visual .logo img {

        width: 105px;
    }

    .certification-visual .nav {

        display: none;
    }

    .certification-visual .header-tools {

        margin-left: auto;
    }


    /* CONTENT */

    .certification-visual .cert-content {

        height: auto;

        min-height: 100vh;

        padding:
            100px 18px 90px;
    }


    /* TITLE */

    .certification-visual .cert-title {

       

        font-size:
            clamp(34px, 9vw, 48px);

        letter-spacing: -2.5px;

        text-align: center;
    }


    /* LAYOUT */

    .certification-visual .cert-layout {

        width: 100%;

        margin-top: 20px;

        grid-template-columns:
            1fr;

        gap: 10px;
    }


    /* COUNT */

    .certification-visual .cert-count {

        min-height: 150px;

        padding: 15px;

    }

    .certification-visual .count-number {

        position: absolute;

        right: 18px;
        bottom: 12px;

        font-size: 55px;
    }

    .certification-visual .count-description {

        max-width: 65%;
    }


    /* LIST */

    .certification-visual .cert-list {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            auto;

        gap: 8px;
    }


    /* CARD */

    .certification-visual .cert-card {

        min-height: 120px;

        grid-template-columns:
           1fr 50%;
    }


    .certification-visual .cert-info {

        padding: 14px;
    }


    /* BIG TEXT */

    .certification-visual .big-text {

        font-size:
            24vw;

        bottom: 20px;

        letter-spacing: -3px;
    }


    /* CONTROLLER */

    .certification-visual .controller {

        bottom: 28px;
    }

    .product-visual .product-visual {

        height: auto;

        min-height: 100vh;

        overflow: hidden;
    }


    /* HEADER */

    .product-visual .header {

        height: 65px;

        padding:
            0 20px;
    }

    .product-visual .logo {

        width: 115px;
    }

    .product-visual .logo img {

        width: 105px;
    }

    .product-visual .nav {

        display: none;
    }

    .product-visual .header-tools {

        margin-left: auto;
    }


    /* CONTENT */

    .product-visual .product-content {

        height: auto;

        min-height: 100vh;

        padding:
            95px 18px 190px;
    }


    /* RIGHT COPY -> TOP */

    .product-visual .product-copy {

        position: relative;

        top: auto;
        right: auto;

        width: 100%;

        transform: none;

        margin:
            10px auto 35px;

        text-align: right;
    }

    .product-visual .copy-category {

        font-size: 10px;
    }

    .product-visual .copy-title {

        font-size:
            clamp(42px, 12vw, 58px);

        letter-spacing: -2px;
    }

    .product-visual .copy-description {

        margin-top: 18px;

        font-size: 10px;

        line-height: 1.7;
    }


    /* LEFT MENU -> BELOW */

    .product-visual .product-menu {

        position: relative;

        left: auto;
        top: auto;

        transform: none;

        width: 100%;

        gap: 8px;

        margin: 0 auto;
    }

    .product-visual .menu-card {

        height: 88px;

        border-radius: 8px;
    }



    .product-visual .menu-title {

        font-size: 15px;
    }


    /* CERT BAR */

    .product-visual .cert-bar {

        position: absolute;

        left: 0;
        right: 0;

        bottom: 0;

        height: 75px;

        grid-template-columns:
            repeat(5, 1fr);
    }

    .product-visual .cert-item {

        flex-direction: column;

        gap: 5px;

        font-size: 9px;
    }

    .product-visual .cert-icon {

        width: 15px;
        height: 15px;
    }


    /* CONTROLLER */

    .product-visual .slider-controller {

        bottom: 85px;
    }
	    .certification-visual .cert-description, .certification-visual .count-description
 {
        font-size: 0.8rem;
    }
.certification-visual .wrap-cert-icon{gap:5px}	
    .certification-visual .count-title, .certification-visual .cert-name {
        font-size: 0.9rem;
    }
    .certification-visual .cert-image img {
        height: 80px;
    }	

.translated-ltr .main-visual .copy-title{font-size:40px}	
}
@media(max-width:540px){
.main-visual .visual-content, .product-visual .product-content .wrap-product-con {
    margin-top: 0;
}	
.section1{height:100vh; min-height:650px}
.main-visual .copy-title{font-size:2rem; line-height:1.5}
.product-visual .copy-title{font-size:2rem}
.product-visual .copy-title br{display:none}
.section1 .prev, .section1 .next{bottom:67px}
.section1 .controller {
    bottom: 95px;
}
.main-visual .visual-content{justify-content:start}
.certification-visual .cert-list {
        grid-template-columns: 1fr}
.certification-visual .cert-count, .certification-visual .cert-card {
        min-height: inherit;}	
.certification-visual .count-icon img, .certification-visual .cert-info .cert-icon img{height:20px; width:auto}	
.certification-visual .cert-title{margin-top:0}
.certification-visual .count-description br{display:none}
    .certification-visual .count-description {
        max-width: 85%;
    }	
.certification-visual .count-number{font-size:35px}		
.section1 .prev, .section1 .next {
    width: 40px;
    height: 40px;}
.main-visual .copy-description{margin-bottom:0}	
.certification-visual .wrap-cert-icon{align-items:center}
    .certification-visual .count-title, .certification-visual .cert-name {
        font-size: 12px;
    }
.certification-visual .count-icon{margin-bottom:0}	
.certification-visual .cert-layout, .certification-visual .cert-list{gap:5px}
.certification-visual .cert-count, .certification-visual .cert-info{padding:10px}
.product-visual .wrap-product-con{flex-wrap:wrap; flex-direction: column-reverse;}
.product-visual .product-copy{text-align:center}

.translated-ltr .main-visual .copy-title{font-size:30px}
	}
@media (max-width: 480px) {
.section1 .prev {
    margin-left: -134px;
}	
.section1 .next {
    margin-left: 87px;
}
	.section1 .controller {
    bottom: 105px;
}
.section1 .controller {
        bottom: 95px;
    }
    .main-visual .visual-content {

        padding:
            90px 15px 85px;
    }

      .main-visual .visual-content .certi, .product-visual .certi {
        font-size: 0.7rem;
    }

    .main-visual .copy-description {

        font-size: 10px;
    }
	.slider3-2 .slide-area li .certi img{ height:20px}

    .main-visual .visual-cards {

        grid-template-columns:
            repeat(3, 1fr);
    }
.main-visual .visual-content .certi div::after, .product-visual .certi div::after, .main-visual .visual-content .certi div:first-child::before, .product-visual .certi div:first-child::before{width:1px}
    .main-visual .visual-card {

        height: 190px;
    }

    .main-visual .card-content {

        left: 9px;
        right: 8px;
        bottom: 9px;
    }

    .main-visual .card-category {

        font-size: 18px; font-weight:400
    }

    .main-visual .card-title {

        font-size: 11px;

        letter-spacing: -0.5px;
    }
.section1 .prev, .section1 .next {
    width: 40px;
    height: 40px;}

    .main-visual .slide-arrow {

        width: 27px;
        height: 27px;

        font-size: 15px;
    }

    .main-visual .slide-dot {

        width: 7px;
        height: 7px;
    }

    .main-visual .slide-dot.main-visual .active {

        width: 30px;
    }.certification-visual .cert-content {

        padding:
            90px 12px 85px;
    }

    .certification-visual .cert-title {

        font-size: 31px;
    }

    
    .certification-visual .cert-name {

        font-size: 12px;
    }

    .certification-visual .cert-description {

        font-size: 9px;

        margin-top: 5px;
    }

   

    .certification-visual .count-description {

        font-size: 9px;
    }

    .product-visual .product-content {

        padding:
            90px 12px 185px;
    }



    .product-visual .copy-description {

        font-size: 9px;
    }

    .product-visual .menu-card {

        height: 82px;
    }

    .product-visual .menu-title {

        font-size: 14px;
    }

    .product-visual .menu-links {

        margin-top: 7px;
    }

    .product-visual .menu-links a {

        font-size: 9px;
    }

    .product-visual .cert-bar {

        height: 70px;
    }

    .product-visual .cert-item {

        font-size: 8px;
    }
}