:root{
    --fpTF: cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

/* common */
.content-box{ height: 100%; padding: var(--commonG); padding-top: calc(var(--headerH) + (var(--commonG) * 2)); }
.content-box .inner{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
footer{ padding-top: 0; }

/* floating */
.floating .sticky{ transition: transform 700ms; }
.floating.last .sticky{ transform: translateY(calc(var(--footerH) * -1)); }
 

/* fp-nav */
#fp-nav{ padding: 0 var(--commonG); top: 50%; left: 0; right: 0 !important; transform: translateY(-50%); margin: 0 !important; pointer-events: none; opacity: 1; transition: opacity 0.7s; }
#fp-nav ul{ padding: 0 30px; }
#fp-nav ul li{ width: unset !important; height: unset !important; margin: 30px 0 0 !important; }
#fp-nav ul li:first-of-type{ margin: 0 !important; }
#fp-nav ul li:last-of-type{ display: none; }
#fp-nav ul li a{ width: 15px !important; display: flex; justify-content: center; pointer-events: auto; }
#fp-nav ul li a span{ width: 7px !important; height: 7px !important; display: inline-block; background: #DDD !important; border: 3px solid transparent !important; position: static; margin: 0 !important; }

#fp-nav ul li a.active span{ width: 15px !important; height: 15px !important; background: transparent !important; border-color: var(--mainColor) !important; }

#fp-nav.scroll ul li a span{ background: #FFF !important; }
#fp-nav.scroll ul li a.active span{ background: transparent !important; }
#fp-nav.white ul li a.active span{ background: transparent !important; border-color: #FFF !important; }
#fp-nav.last{ opacity: 0; }
#fp-nav.last ul li a{ pointer-events: none; }


/* title-box */
.title-box *{ font-family: var(--engFont); }
.title-box > *:not(:last-child){ margin-bottom: 30px; }
.title-box em{ display: block; font-size: 22px; font-weight: 500; color: #FFF; line-height: 1.35; }
.title-box h2{ font-size: 6.2rem; font-weight: 600; color: #FFF; line-height: 1.4; }
.title-box p{ font-size: 22px; font-weight: 300; color: rgba(255, 255, 255, 0.9); line-height: 1.7; }  


/* moreview */
.moreview{ display: inline-flex; align-items: center; font-family: var(--engFont); font-size: 20px; font-weight: 600; color: var(--mainColor) !important; padding: 10px; margin: -10px; }
.moreview i{ display: inline-block; width: 6px; height: 8px; background: var(--mainColor); mask: url("/img/main/icon_moreview.svg") no-repeat center center / contain; -webkit-mask: url("/img/main/icon_moreview.svg") no-repeat center center / contain; transform: translateY(2px); margin-left: 15px; }

.moreview.white{ font-weight: 500; color: #FFF !important; }
.moreview.white i{ background: #FFF; }

@media screen and (hover: hover) and (pointer: fine){
    .moreview{ opacity: 0.5; transition: opacity 0.4s; }
    .moreview:hover{ opacity: 1; }
}

/* slick-info */
.slick-info > div{ display: flex; align-items: center; margin-inline: -15px; }
.slick-info .bar{ width: 100%; background: #E5E5E5; }
.slick-info .bar > div { width: 0; height: 2px; background: var(--mainColor); }
.slick-info button{ flex-shrink: 0; display: inline-flex; background: none; border: none; padding: 15px; }
.slick-info button i{ display: inline-flex; width: 10px; height: 16px; background: #000; mask: url("/img/main/icon_slick_arrow.svg") no-repeat center center / contain; -webkit-mask: url("/img/main/icon_slick_arrow.svg") no-repeat center center / contain; }
.slick-info button.prev{ transform: scaleX(-1); }


@media screen and (max-height: 800px){
    /* common */
    .content-box{ padding: 0; }
    .content-box .inner{ padding-block: 60px; }

    /* floating */
    .floating{ padding-bottom: var(--footerH); }     
    .floating .sticky{ transform: translateY(0) !important; transition: unset; }
}

@media screen and (max-width: 1800px){
    /* fp-nav */
    #fp-nav ul{ padding: 0 3px; }
}

@media screen and (max-width: 1700px){
    /* title-box */
    .title-box > *:not(:last-child){ margin-bottom: 25px; }
    .title-box em{ font-size: 20px; }
    .title-box p{ font-size: 21px; }
}

@media screen and (max-width: 1280px){
    /* fp-nav */
    #fp-nav ul li a,
    #fp-nav ul li a.active span{ width: 12px !important; }
    #fp-nav ul li a span{ width: 5px !important; height: 5px !important; }
    #fp-nav ul li a.active span{ height: 12px !important; }

    /* title-box */
    .title-box > *:not(:last-child){ margin-bottom: 20px; }
    .title-box em{ font-size: 18px; }
    .title-box h2{ font-size: 5.7rem; }
    .title-box p{ font-size: 20px; }  

    /* moreview */
    .moreview{ font-size: 19px; }
    .moreview i{ width: 6px; height: 8px; margin-left: 10px; transform: translateY(0); }  
}

@media screen and (max-width: 1200px){
    /* common */
    main{ padding-top: calc(var(--commonG) + var(--headerH)); }
    footer{ padding-top: var(--commonG); }
    .content-box{ padding: 0; }
    .content-box .inner{ padding-block: 60px; }

    /* floating */
    .floating{ padding-bottom: var(--footerH); }  
    .floating .sticky{ padding-bottom: var(--innerGap); transform: translateY(0) !important; transition: unset; }
}

@media screen and (max-width: 960px){
    /* title-box */
    .title-box em{ font-size: 16px; }
    .title-box p{ font-size: 18px; }  
}


/* visual */
#visual{
    --gapTB: 80px;
}

#visual{ position: relative; padding-left: 27%; position: relative; overflow: hidden; }
#visual::before{ content: ""; width: 50%; height: 100%; background: linear-gradient(to right, #FFF 61.51%, rgba(255, 255, 255, 0.00) 100%); position: absolute; top: 0; left: 0; z-index: 10; }
#visual .visual{ max-height: 100svh; height: 100vh; }
#visual .cover{ display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--commonG) + var(--headerH)); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
#visual .column > *:not(:last-of-type){ margin-bottom: var(--gapTB); }

#visual .slick-info .dots{ flex-shrink: 0; }
#visual .slick-info .slick-dots{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 120px; }
#visual .slick-info .slick-dots li{ cursor: pointer; }
#visual .slick-info .slick-dots button{ display: none !important; }

#visual .text-slick,
#visual .text-slick .slick-list{ overflow: visible; }
#visual .text .logo,
#visual .text p{ opacity: 0; transform: translateY(calc(var(--aosP) / 2)); }
#visual .text .logo{ margin-bottom: var(--gapTB); }
#visual .text .logo img{ width: auto; height: auto; } 
#visual .text p{ font-size: 22px; font-weight: 300; color: #111; line-height: 1.6; }
#visual .text p strong{ font-weight: 600; }    

#visual .text.enter .logo,
#visual .text.enter p{ animation: visualEnter var(--aosT) both; }
#visual .text.enter p{ animation-delay: 0.1s; }

#visual .text.leave .logo,
#visual .text.leave p{ animation: visualLeave var(--aosT) both; }

@media screen and (max-width: 1700px){
    #visual{
        --gapTB: 60px;
    }

    #visual .text .logo img{ height: 125px; }
    #visual .text p{ font-size: 21px; }
}

@media screen and (max-width: 1280px){
    #visual{
        --gapTB: 40px;
    }

    #visual .text .logo img{ height: 100px; }
    #visual .text p{ font-size: 20px; }
}

@media screen and (max-width: 1200px){
    #visual{ display: flex; flex-direction: column-reverse; padding: 0; }
    #visual::before{ display: none; }
    #visual .visual-slick{ position: relative; z-index: -1; }
    #visual .visual{ max-height: unset; height: unset; aspect-ratio: 16 / 9; position: relative; }
    #visual .cover{ background: #FFF; padding: 50px 0; position: relative; z-index: 100; }
    #visual .cover::after{ content: ""; height: 25%; background: linear-gradient(to bottom, #FFF, transparent); position: absolute; top: calc(100% - 1px); left: 0; right: 0; pointer-events: none; }
}

@media screen and (max-width: 960px){
    #visual .text .logo{ margin-bottom: 20px; }
    #visual .text .logo img{ height: 75px; }
    #visual .text p{ font-size: 19px; }
}

@media screen and (max-width: 640px){
    #visual .text .logo img{ height: 60px; }
}


/* solution */
#solution .inner{ background: url("/img/main/solution_bg.jpg") no-repeat center center / cover; }
#solution .title-box{ text-align: center; margin-bottom: 105px; }
#solution .title-box em{ font-weight: 700; color: var(--mainColor); }
#solution .title-box h2{ font-weight: 700; color: #111; }
#solution .title-box p{ font-weight: 400; color: #333; }

#solution .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; }
#solution .grid-box > *{ margin: 10px; }
#solution .item{ padding-top: 10px; }
#solution .item .flex{ display: flex; align-items: center; background: rgba(255, 255, 255, 0.5); border: 1px solid #FFF; box-shadow: 20px 20px 20px rgba(var(--mainRGB), 0.15); backdrop-filter: blur(5px); padding: 30px; margin-top: -10px; transform: translateY(0); transition: background 0.4s, border-color 0.4s, transform 0.4s; }
#solution .item .flex > *{ display: flex; }

#solution .item .txt{ flex: 1 1 auto; align-items: center; min-width: 0; }
#solution .item .txt i{ flex-shrink: 0; display: inline-block; width: 45px; height: 45px; background: var(--mainColor); mask: var(--icon) no-repeat center center / contain; -webkit-mask: var(--icon) no-repeat center center / contain; margin-right: 12px; transition: background 0.4s; }
#solution .item .txt p{ flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 500; color: var(--mainColor); transition: color 0.4s; }

#solution .item .btn{ flex-shrink: 0; margin-left: 15px; }
#solution .item .btn > *{ display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: none; font-family: var(--baseFont); font-size: 16px; font-weight: 500; color: #FFF; text-stroke: 0.012em transparent; -webkit-text-stroke: 0.012em transparent; padding: 13px 15px; margin-left: 5px; transition: background 0.4s, color 0.4s, text-stroke-color 0.4s; }
#solution .item .btn > *.blue{ background: #0079EA; }

@media screen and (hover: hover) and (pointer: fine){
    #solution .item:hover .flex{ background: var(--mainColor); border-color: var(--mainColor); transform: translateY(-10px); }
    #solution .item:hover .txt i{ background: #FFF; }
    #solution .item:hover .txt p{ color: #FFF; }
    #solution .item:hover .btn > *:not(.blue){ background: #FFF; color: var(--mainColor); text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); }  
}

@media screen and (max-width: 1700px){
    #solution .title-box{ margin-bottom: 85px; }

    #solution .item .flex{ padding: 25px; }
    #solution .item .txt i{ width: 40px; height: 40px; }
    #solution .item .txt p{ font-size: 19px; }
    #solution .item .btn > *{ padding: 11px 13px; }
}

@media screen and (max-width: 1500px){
    #solution .grid-box{ grid-template-columns: repeat(2, 50%); }
    #solution .item .flex{ padding: 20px; }
}

@media screen and (max-width: 1280px){
    #solution .title-box{ margin-bottom: 60px; }

    #solution .item .flex{ padding: 17px; }
    #solution .item .txt i{ width: 35px; height: 35px; }
    #solution .item .txt p{ font-size: 18px; }
    #solution .item .btn > *{ font-size: 15px; }
}

@media screen and (max-width: 1200px){
    #solution br.m{ display: block; }
}

@media screen and (max-width: 960px){
    #solution .title-box{ margin-bottom: 30px; }

    #solution .grid-box{ grid-template-columns: repeat(1, 100%); margin: -5px; }
    #solution .grid-box > *{ margin: 5px; }  
    #solution .item .flex{ transform: translateY(0) !important; }
}


/* performance */
#performance{ 
    --innerTB: 80px;
    --left: 630px;
    --lineHeight: 1em;
    --border: rgba(255, 255, 255, 0.2);
}

#performance .mobile{ display: none; }
#performance .inner{ display: block; position: relative; }
#performance .inner > div{ height: 100%; }
#performance .bg, 
#performance .bg > div{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#performance .bg{ background: url("/img/main/performance_bg.jpg") no-repeat center center / cover; z-index: -1; }
#performance .bg > div{ opacity: 0; transition: opacity var(--aosT); } 
#performance .bg > div.on{ opacity: 1; }  

#performance .grid-box{ height: 100%; display: grid; grid-template-columns: var(--left) calc(100% - var(--left)); grid-template-rows: 1fr auto; }
#performance .left{ display: flex; flex-direction: column; padding-block: var(--innerTB); padding-right: 110px; }
#performance .right{ grid-row: auto / span 2; padding-block: var(--innerTB); }
#performance .right .title-box{ display: none; }
#performance .bottom{ display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--innerTB); }

#performance .slick-info{ display: none; } 
#performance .slick-info button i{ background: #FFF; }
#performance .slick-info .bar{ flex-shrink: 0; width: 120px; background: rgba(255, 255, 255, 0.3); }
#performance .slick-info .bar div{ background: #FFF; }

#performance .slick-box{ margin-top: 20px; }
#performance .fade .box{ display: none; }
#performance .fade .title-box h2.eng{ font-weight: 700; }

#performance .counter-box{ display: flex; width: calc(100% + ((100vw - 1600px) / 2) - var(--commonG)); height: 100%; }
#performance .column{ width: calc(100% / 3); display: grid; grid-template-rows: repeat(2, 50%); height: 100%; position: relative; }
#performance .column::before{ content: ""; width: 1px; height: calc(100% + (var(--innerTB) * 2)); background: var(--border); position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#performance .item{ flex-shrink: 1; padding: 0 40px 40px; }
#performance .box,
#performance .box *{ font-family: var(--engFont); font-weight: 600; color: #FFF; }
#performance .box .value{ display: flex; align-items: flex-start; height: var(--lineHeight); font-size: 5.6rem; transition: font-size var(--aosT); overflow: hidden; } 
#performance .box .value sup{ height: unset !important; font-size: xx-large; vertical-align: text-top; line-height: var(--lineHeight); }
#performance .box p{ font-size: 22px; margin-top: 10px; }


/* counter */
#performance .counter,
#performance .counter *{ font-family: var(--engFont); font-weight: 600; color: #FFF; }
#performance .counter{ position: relative; }
#performance .counter em,
#performance .counter .num span:not(.eng){ font-family: var(--engFont2); }
#performance .counter em,
#performance .counter em *{ color: transparent !important; } 
#performance .counter .num{ display: flex; position: absolute; top: 0; left: 0; }
#performance .counter .num div{ display: flex; flex-direction: column; position: relative; }
#performance .counter .num div.odd{ transform: translateY(0); }
#performance .counter .num div.even{ transform: translateY(calc(-100% + var(--lineHeight))); }
#performance .counter .num span{ height: var( --lineHeight); display: inline-flex; align-items: center; line-height: var(--lineHeight); }

@media screen and (hover: hover) and (pointer: fine){
    #performance .column{ transition: width var(--aosT); pointer-events: none; }
    #performance .item{ pointer-events: auto; }
    #performance .box{ opacity: 0.5; transition: opacity var(--aosT); }
    
    #performance .column:hover{ width: 45.5%; }  
    #performance .item:hover .box{ opacity: 1; }
    #performance .item:hover .value{ font-size: 8.4rem; }
    #performance .item:hover .num div.odd{ animation: numCounter var(--aosT) ease-out both; }
    #performance .item:hover .num div.even{ animation: numCounter var(--aosT) ease-in reverse both; } 
}

@media screen and (max-width: 1700px){
    #performance{ 
        --innerTB: 60px;
        --left: 500px;
    }
        
    #performance .left{ padding-right: 90px; }

    #performance .counter-box{ width: calc(100% + var(--innerGap)); }
    #performance .item{ padding: 0 30px 30px; }
    #performance .item p{ font-size: 20px; }
}

@media screen and (max-width: 1280px){
    #performance{ 
        --left: 400px;
    }

    #performance .left{ width: 400px; padding-right: 60px; }
    #performance .item{ padding: 0 25px 25px; }
    #performance .item p{ font-size: 18px; }
}

@media screen and (max-width: 1200px){
    #performance .mobile{ display: block; }
    #performance .pc{ display: none; }
    
    #performance .grid-box{ display: block; }
    #performance .left,
    #performance .bottom{ transform: translateY(var(--aosP)); }
    #performance .left.aos-animate,
    #performance .bottom.aos-animate{ transform: translateY(0); }
    #performance .left{ width: 100%; padding: 0; }
    #performance .right{ display: none; }
    #performance .bottom{ text-align: center; padding: 30px 0 0; }
    #performance .clone{ margin-top: 20px; }
    #performance .slick-info{ display: block; }
    
    #performance .title-box{ text-align: center; }
    #performance .title-box p br{ display: none; }
    #performance .title-box p br.m{ display: block; }

    #performance .slick-box{ width: calc(100% + (var(--innerGap) * 2)); margin-left: calc(var(--innerGap) * -1); }
    #performance .fade-slick .slick-track{ display: flex; }
    #performance .fade{ float: unset; width: 500px; height: unset !important; display: flex; flex-direction: column; justify-content: center; background: rgba(255, 255, 255, 0.15); padding: 30px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); margin-right: 20px; box-sizing: border-box; }
    #performance .fade .box{ display: block; }
    #performance .fade .title-box h2{ display: none; }

    #performance .box{ text-align: center; margin-bottom: 20px; }
    #performance .box .value{ font-size: 7rem; justify-content: center; }
    #performance .box .value sup{ font-size: x-large; }
    
    #performance .fade.slick-active .box,
    #performance .fade.slick-now .box{ opacity: 1; }
    #performance .fade.slick-active .num div.odd,
    #performance .fade.slick-now .num div.odd{ animation: numCounter var(--aosT) ease-out both; }
    #performance .fade.slick-active .num div.even,
    #performance .fade.slick-now .num div.even{ animation: numCounter var(--aosT) ease-in reverse both; } 



    /* #performance .counter-box{ width: 100%; }
    #performance .column{ width: calc(100% / 3) !important; display: block; }
    #performance .column:not(:last-of-type){ border-right: 1px solid var(--border); }
    #performance .column::before{ display: none; }
    #performance .item{ min-height: unset; text-align: center; padding: 40px 25px; }
    #performance .item:not(:last-of-type){ border-bottom: 1px solid var(--border); }
    #performance .item:only-child{ border-bottom: 1px solid var(--border); }
    #performance .item .value{ justify-content: center; font-size: 7rem !important; }
    #performance .item .value sup{ font-size: x-large; } */
}

@media screen and (max-width: 768px){
    #performance .fade{ width: 400px; }    
}


/* news */
#news .inner{ background: url("/img/main/news_bg.jpg") no-repeat center center / cover; }   
#news .title-box{ margin-bottom: 30px; }
#news .content{ display: grid; grid-template-columns: repeat(4, 25%); margin: -10px; }
#news .content > *{ box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.15); margin: 10px; position: relative; overflow: hidden; }
#news .content .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#news .content .bg img{ width: 100%; height: 100%; object-fit: cover; }
#news .content a{ display: flex; flex-direction: column; height: 100%; color: #FFF; padding: 40px; position: relative; z-index: 10; }
#news .content em,
#news .content em *{ font-family: var(--engFont); font-weight: 600; } 
#news .content em{ display: block; font-size: 28px; position: relative; overflow: hidden; }
#news .content em::before{ content: attr(data-txt); display: block; font-family: inherit; font-weight: inherit; line-height: 1.3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateY(100%); transition: transform 0.4s; }
#news .content em.eng::before{ font-family: var(--engFont); }
#news .content em span{ display: block; transform: translateY(0); transition: transform 0.4s; } 
#news .content p{ font-size: 18px; font-weight: 400; }
#news .content p strong{ font-family: var(--engFont); font-size: 4.2rem; font-weight: 600; }
#news .content ul{ display: flex; flex-wrap: wrap; margin: -5px 0; margin-left: -31px; }
#news .content ul li{ padding-left: 31px; margin: 5px 0; position: relative; }
#news .content ul li::before{ content: ""; width: 1px; height: 15px; background: #FFF; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); }

#news .content .top{ flex: 1 0 auto; text-align: right; }
#news .content .top em{ text-align: left; }
#news .content .bottom > *:not(:last-child){ margin-bottom: 10px; }
#news .content .column2{ grid-column: auto / span 2; }
#news .content .row2{ grid-row: auto / span 2; }
#news .content .row3{ grid-row: auto / span 3; }

#news .content .symbol .bg{ background: var(--skyBlue) url("/img/main/news_symbol.svg") no-repeat bottom right / auto; }
#news .content .symbol em,
#news .content .symbol em *{ font-weight: 700; }
#news .content .symbol em{ color: var(--mainColor); }
#news .content .symbol .top{ margin-bottom: 30px; }

@media screen and (hover: hover) and (pointer: fine){
    #news .content .bg{ transform: scale(1); transition: transform 0.4s; }
    #news .content > *:hover .bg{ transform: scale(1.07); }
    #news .content > *:hover .moreview{ opacity: 1; }
    #news .content > *:hover em::before{ transform: translateY(0); }
    #news .content > *:hover em span{ transform: translateY(-100%); }
}

@media screen and (max-width: 1700px){
    #news .content a{ padding: 30px; }
    #news .content em{ font-size: 24px; }
    #news .content .moreview{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
    #news .title-box{ margin-bottom: 20px; }

    #news .content a{ padding: 25px; }
    #news .content em{ font-size: 22px; }
    #news .content p{ font-size: 17px; }
    #news .content p strong{ font-size: 5rem; }
    #news .content ul{ margin: -3px 0; margin-left: -21px; }
    #news .content ul li{ padding-left: 21px; margin: 3px 0; }
    #news .content ul li::before{ height: 12px; left: 10px; }
    #news .content .moreview{ font-size: 18px; }

    #news .content .bottom > *:not(:last-child){ margin-bottom: 6px; }  

    #news .content .symbol .top{ margin-bottom: 20px; }
}

@media screen and (max-width: 1024px){
    #news .content{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #news .content a{ padding: 20px; }

    #news .content address{ margin-top: 30px; }
}

@media screen and (max-width: 960px){
    #news .content em{ font-size: 20px; }
    #news .content .moreview{ font-size: 17px; }
}

@media screen and (max-width: 830px){
    #news .inner{ padding-bottom: 90px; }
}

@media screen and (max-width: 768px){
    #news .content{ grid-template-columns: repeat(2, 50%); margin: -5px; }
    #news .content > *{ order: 3; margin: 5px; }
    #news .content .symbol{ order: 1; }
    #news .content .symbol a{ padding: 15px 17px; }
    #news .content .row3{ order: 0; }
}


/* 팝업 (open) */
.popup.open .inner{ width: 620px; background: #FFF; box-shadow: 0 0 30px rgba(var(--mainRGB), 0.3); }
.popup.open .content{ font-size: 20px; font-weight: 400; color: #222; text-align: center; padding: 40px; position: relative; z-index: 10; }
.popup.open .content::before{ content: ""; background: linear-gradient(135deg, #FFF, rgba(var(--mainRGB), 0.15), #FFF); border: 2px solid #FFF; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; box-sizing: border-box; }
.popup.open .content h2{ font-size: 32px; font-weight: 700; color: var(--mainColor); margin-bottom: 35px; }
.popup.open .content .pBox{ background: #FFF url("/img/main/news_symbol.svg") no-repeat right bottom / auto; padding: 65px 30px; }
.popup.open .content .pBox > *:not(:last-child){ margin-bottom: 25px; }
.popup.open .content .pBox p{ line-height: 1.5; }
.popup.open .content .pBox p img{ height: 45px; margin-top: 5px; }
.popup.open .content .dl{ background: var(--mainColor); padding: 17px; }
.popup.open .content .dl dl{ display: flex; justify-content: center; font-size: 18px; color: #FFF; margin-right: -15px; }
.popup.open .content .dl dl > *{ margin-right: 15px;  }
.popup.open .content .dl dl dt{ flex-shrink: 1; font-weight: 500;}
.popup.open .content .dl dl dd{ font-family: var(--engFont); font-weight: 200; }

@media screen and (max-width: 1700px){
    .popup.open .inner{ width: 550px; }
    .popup.open .content{ font-size: 19px; padding: 30px; }
    .popup.open .content h2{ font-size: 28px; margin-bottom: 25px; }
    .popup.open .content .pBox{ padding-block: 50px; }
}

@media screen and (max-width: 960px){
    .popup.open .inner{ width: 500px; }
    .popup.open .content{ font-size: 18px; padding: 25px; }
    .popup.open .content br.m{ display: block; }
    .popup.open .content h2{ font-size: 24px; }
    .popup.open .content .pBox{ padding: 35px 25px; }
    .popup.open .content .dl{ padding: 12px; }
    .popup.open .content .dl dl{ font-size: 17px; }
}