@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root {
    --sf-img-31: url("/solutions/reallusion/images/image_0.png");
    --sf-img-32: url("/solutions/reallusion/images/image_1.png");
    --sf-img-33: url("/solutions/reallusion/images/image_2.png")
}

html,
body,
div,
span,
iframe,
h1,
h2,
h3,
p,
a,
address,
em,
img,
strong,
ul,
li,
form,
footer,
header,
nav {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    letter-spacing: -0.035em;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 400;
    color: #555
}

footer,
header,
nav {
    display: block
}

body {
    line-height: 1.3
}

ul {
    list-style: none
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    word-break: keep-all
}

a {
    text-decoration: none
}

li {
    list-style: none
}

@media (max-width:1023px) {

    body,
    div,
    p {
        font-size: 14px
    }
}

.container {
    position: relative;
    padding-top: 89px
}

.contents {
    position: relative;
    width: 1250px;
    margin: 0 auto;
    min-height: 175px;
    z-index: 2
}

.sub_visual {
    position: relative;
    width: 100%;
    height: 200px;
    background-size: cover !important
}

.sub_visual div {
    position: relative;
    text-align: center;
    margin: 0 auto;
    height: 200px;
    overflow: hidden
}

.sub_visual.sub1 {
    background: url(/solutions/reallusion/images/image_17.jpeg)no-repeat 50% 50%
}

.sub_visual.sub1 h1 {
    padding: 53px 0 0;
    height: 138px
}

@media screen and (max-width:1279px) {
    .container {
        position: relative;
        padding-top: 61px
    }

    .sub_visual div {
        width: 100%;
        border: none
    }
}

@media screen and (max-width:800px) {
    .contents2 {
        padding: 0px 0 100px
    }

    .sub_visual {
        height: 150px;
        background-size: cover !important
    }

    .sub_visual div {
        height: auto
    }

    .sub_visual.sub1 h1 img {
        height: 20px
    }

    .sub_visual.sub1 h1 {
        padding: 34px 0 22px;
        height: auto
    }
}

@media screen and (max-width:1234px) {
    .contents {
        width: 100%;
        padding: 0 18px 20px
    }
}

.tit_ty2 {
    font-size: 30px;
    color: #000000;
    padding: 60px 0 35px 0;
    font-weight: 700
}

.location {
    text-align: right;
    margin: -56px 0 34px;
    color: #999999;
    font-size: 14px
}

.location img {
    margin-right: 6px;
    vertical-align: -3px
}

.location span {
    font-size: 0;
    background: url(/solutions/reallusion/images/image_18.png)no-repeat 0 0;
    width: 7px;
    height: 7px;
    display: inline-block;
    vertical-align: 8px;
    margin: 0 2px
}

@media screen and (max-width:800px) {
    .tit_ty2 {
        font-size: 17px;
        padding: 30px 0 0 0;
        font-weight: 700
    }

    .location {
        margin: 10px 0 20px;
        display: none
    }
}

.btn {
    height: 50px;
    line-height: 50px;
    color: #fff;
    display: inline-block !important;
    font-size: 16px;
    padding: 0 20px;
    border: 0;
    vertical-align: middle;
    border-radius: 5px;
    text-align: center
}

.btn:hover {
    background: #2d6ebd
}

.btn.ty1 {
    min-width: 134px;
    background: #3b80d3;
    letter-spacing: -0.05em
}

.btn.ty1:hover {
    background: #2d6ebd
}

@media screen and (max-width:730px) {
    .btn {
        line-height: 43px;
        height: 43px;
        font-size: 15px
    }

    .btn.ty1 {
        min-width: auto;
        padding: 0 15px
    }
}

.product_menu2 {
    background: #303030;
    width: 1280px
}

.product_menu2 li {
    display: inline-block;
    width: auto;
    background: #303030
}

.product_menu2 li a {
    display: inline-block;
    width: auto;
    padding: 8px 30px 0;
    height: 62px;
    line-height: 46px;
    font-size: 17px;
    color: #fff
}

.product_menu2 li.on a {
    border-bottom: 5px solid #4980c1
}



.sf-hidden {
    display: none !important
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

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

:root {
    --swiper-navigation-size: 44px
}


.sub_visual.Reallusion {
    background: url(/solutions/reallusion/images/image_58.jpeg)no-repeat 50% 50%
}

.sub_visual.Reallusion h1 img {
    width: 300px
}

@media screen and (max-width:800px) {
    .sub_visual.Reallusion {
        background-size: 200% !important;
        background-position: 50%top !important
    }

    .sub_visual.Reallusion .product_menu2 li {
        width: 40%
    }
}

.more_list.reallusion_more iframe {
    width: 400px;
    height: 230px
}

.wrap {
    width: 1250px;
    margin: 0 auto
}

.flex {
    display: flex
}

.view_pc {
    display: inline-block !important
}

.pointB02 {
    color: #393939 !important
}

.top_bg {
    width: 100%;
    height: 500px;
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 103px
}

.top_bg>div {
    padding-left: 130px
}

.top_bg p {
    font-size: 27px;
    color: #fff;
    text-shadow: 0 0 10px rgba(25, 106, 174, 64)
}

.top_bg p span {
    font-size: 23px;
    display: block;
    color: #fff;
    letter-spacing: 4px
}

.sub_logo {
    font-size: 0;
    line-height: 0;
    display: inline-block;
    margin-top: 25px
}

.mt140 {
    margin-top: 140px !important
}

.titleA {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-bottom: 35px
}

.titleB {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-bottom: 2px solid #fff;
    padding-bottom: 15px;
    display: inline-block
}

.titleC {
    font-size: 30px;
    font-weight: 600;
    color: #3991cf;
    line-height: 1.5
}

.sub_text01 {
    font-size: 25px;
    color: #045f99;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px
}

.sub_text02 {
    font-size: 21px;
    color: #2e3139;
    text-align: center
}

.textA {
    font-size: 40px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    line-height: 1.5
}

.textA strong {
    font-weight: 600;
    color: #fff;
    display: block
}

.pointB02 {
    font-size: 23px;
    color: #7694b0;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 35px
}

.icon_box {
    display: flex;
    margin-top: 95px;
    flex-wrap: wrap
}

.icon_box li {
    text-align: center;
    padding: 0 15px;
    padding-top: 90px;
    background-repeat: no-repeat
}

.icon_box li p {
    line-height: 1.6
}

.icon_box.f3 li {
    width: 33.333%
}

.icon_box .pointB01 {
    font-size: 21px;
    color: #045f99;
    font-weight: 600
}

.icon_box .text {
    font-size: 18px;
    color: #2e3139;
    margin-top: 20px;
    letter-spacing: -1.5px
}

.more_list {
    display: flex;
    margin-top: 53px;
    flex-wrap: wrap
}

.more_list>li {
    text-align: center
}

.more_list>li:last-child {
    margin-right: 0 !important
}

.more_list .imgArea {
    width: 100%;
    overflow: hidden;
    margin-bottom: 16px;
    background-position: center;
    background-repeat: no-repeat
}

.more_list .textArea .title {
    font-size: 25px;
    color: #045f99;
    font-weight: 500;
    margin-bottom: 13px
}

.more_list .textArea .sub_title {
    font-size: 19px;
    color: #2e3139;
    line-height: 1.5
}

.more_list .textArea .text {
    font-size: 17px;
    color: #2e3139;
    line-height: 1.5;
    margin: 24px 0 37px 0
}

.more_list.f3>li {
    width: calc((100%/3) - 19px);
    margin-right: 27px
}

.gray_area {
    background-color: #f8f9fb
}

.border {
    padding: 37px 30px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    margin-top: 25px
}

@media screen and (max-width:1234px) {
    .wrap {
        width: 100%;
        margin: 0
    }

    .top_bg {
        height: 40vw
    }

    .top_bg>div {
        padding-left: 7vw
    }

    .top_bg p {
        font-size: 2.5vw
    }

    .top_bg p span {
        font-size: 2vw
    }

    .bg_section .wrap,
    .gray_area .wrap {
        padding: 0 18px
    }

    .icon_box .pointB01 br,
    .icon_box .text br {
        display: none
    }

    .more_list.reallusion_more iframe {
        width: 26vw;
        height: 15vw
    }
}

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

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

@media screen and (max-width:900px) {
    .top_bg {
        margin-bottom: 50px
    }

    .mt140 {
        margin-top: 60px !important
    }

    .icon_box {
        margin-top: 30px
    }

    .icon_box.f3 li {
        width: 100%;
        text-align: left;
        padding: 10px 0 10px 80px
    }

    .icon_box .text {
        margin-top: 2px
    }

    .more_list .imgArea {
        margin-bottom: 15px
    }

    .more_list .textArea .text {
        margin: 10px 0 25px 0
    }

    .border {
        padding: 37px 10px
    }
}

@media screen and (max-width:800px) {
    .top_bg>div {
        padding-left: 5vw
    }

    .titleA {
        font-size: 30px;
        margin-bottom: 20px
    }

    .titleB {
        font-size: 30px
    }

    .titleC {
        font-size: 26px
    }

    .textA {
        font-size: 36px;
        line-height: 1.3
    }

    .textA strong {
        display: inline-block
    }

    .sub_text01 {
        font-size: 22px
    }

    .sub_text02 {
        font-size: 18px
    }

    .icon_box .pointB01 {
        font-size: 18px
    }

    .icon_box .text {
        font-size: 17px
    }

    .more_list {
        margin-top: 40px
    }

    .more_list .textArea .title {
        font-size: 22px;
        margin-bottom: 8px
    }

    .more_list .textArea .sub_title {
        font-size: 18px
    }

    .more_list .textArea .text {
        font-size: 16px;
        margin: 8px 0 35px 0
    }

    .more_list.f3>li {
        width: calc((100%/2) - 5px);
        margin-right: 10px
    }

    .more_list.f3>li:nth-child(2n) {
        margin-right: 0
    }

    .more_list.f3>li:nth-child(n+3) {
        margin-top: 20px
    }

    .border {
        padding: 15px 10px
    }

    .more_list.reallusion_more iframe {
        width: 50vw;
        height: 29vw
    }
}

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

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

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

@media screen and (max-width:500px) {
    .mt140 {
        margin-top: 30px !important
    }

    .top_bg {
        margin-bottom: 20px
    }

    .titleA {
        font-size: 24px;
        margin-bottom: 15px
    }

    .titleB {
        font-size: 22px;
        padding-bottom: 10px
    }

    .titleC {
        font-size: 18px;
        line-height: 1.4
    }

    .sub_text01 {
        font-size: 19px
    }

    .sub_text02 {
        font-size: 16px
    }

    .textA {
        font-size: 22px;
        line-height: 1.3
    }

    .pointB02 {
        font-size: 17px;
        margin-bottom: 15px
    }

    .icon_box .pointB01 {
        line-height: 1.4
    }

    .icon_box .text {
        font-size: 16px
    }

    .icon_box.f3 li {
        padding: 60px 0 20px 0;
        text-align: center
    }

    .more_list {
        margin-top: 30px
    }

    .more_list .imgArea {
        height: 55vw
    }

    .more_list .textArea .title {
        font-size: 20px
    }

    .more_list .textArea .sub_title {
        font-size: 16px;
        line-height: 1.3
    }

    .more_list .textArea .text {
        font-size: 14px
    }

    .more_list.f3>li {
        width: 100%;
        margin-right: 0
    }

    .more_list.f3>li:nth-child(n+2) {
        margin-top: 20px
    }

    .more_list.reallusion_more iframe {
        width: 90vw;
        height: 50vw
    }
}

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

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

.contents2 {
    position: relative;
    width: 100%;
    background: #fff;
    margin: 0;
    z-index: 1;
    padding: 0 0 20px 0
}

.top_bg.reallusion_top {
    background: url(/solutions/reallusion/images/image_59.jpeg)center no-repeat
}

.sub_logo.reallusion01 {
    width: 490px;
    height: 57px;
    background: url(/solutions/reallusion/images/image_60.png)left top no-repeat;
    background-size: 100%
}

.sub_logo.reallusion02 {
    width: 152px;
    height: 73px;
    background: url(/solutions/reallusion/images/image_61.png)left top no-repeat;
    background-size: 100%
}

.reallution_sec01 {
    background: url(/solutions/reallusion/images/image_62.jpeg)center top no-repeat;
    padding: 111px 0 169px 0
}

.reallution_sec01 .flex {
    margin-top: 113px;
    justify-content: center
}

.reallution_sec01 .flex .imgArea {
    margin-right: 100px
}

.reallution_icon .icon01 {
    background-image: url(/solutions/reallusion/images/image_63.png);
    background-position: center top
}

.reallution_icon .icon02 {
    background-image: url(/solutions/reallusion/images/image_64.png);
    background-position: center top 5px
}

.reallution_icon .icon03 {
    background-image: url(/solutions/reallusion/images/image_65.png);
    background-position: center top 3px
}

.reallution_gray {
    padding: 80px 0 130px 0;
    text-align: center
}

.reallution_gray .border {
    border: 5px solid #89a8c5
}

.reallusion_more li {
    background-position: center;
    background-repeat: no-repeat
}

.reallution_sec02 {
    padding: 100px 0 130px 0;
    background: url(/solutions/reallusion/images/image_66.jpeg)center top no-repeat;
    text-align: center;
    background-size: cover
}

.reallution_sec02 .flex {
    margin-top: 65px;
    align-items: center;
    justify-content: space-between
}

.reallution_sec02 .textArea {
    padding-right: 70px;
    text-align: left;
    width: calc(100% - 661px)
}

.reallution_sec02 .imgArea {
    width: 661px
}

.reallution_sec02 .text {
    font-size: 18px;
    color: #fff;
    line-height: 1.5;
    margin-top: 29px
}

.recommend {
    margin-top: 70px;
    display: flex;
    align-items: center
}

.recommend>p {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    width: 260px;
    text-align: left
}

.recom_list {
    display: flex;
    width: calc(100% - 260px)
}

.recom_list li {
    width: 20%;
    padding-top: 65px;
    background-repeat: no-repeat
}

.recom_list li.recom01 {
    background-image: url(/solutions/reallusion/images/image_67.png);
    background-position: center top
}

.recom_list li.recom02 {
    background-image: url(/solutions/reallusion/images/image_68.png);
    background-position: center top 5px
}

.recom_list li.recom03 {
    background-image: url(/solutions/reallusion/images/image_69.png);
    background-position: center top 3px
}

.recom_list li.recom04 {
    background-image: url(/solutions/reallusion/images/image_70.png);
    background-position: center top 3px
}

.recom_list li.recom05 {
    background-image: url(/solutions/reallusion/images/image_71.png);
    background-position: center top
}

.recom_list li p {
    font-size: 19px;
    color: #fff;
    font-weight: 300
}

@media screen and (max-width:1234px) {
    .top_bg.reallusion_top {
        background-size: 100vw
    }

    .sub_logo.reallusion01 {
        width: 37vw;
        height: 5vw
    }

    .reallution_sec02 .textArea {
        width: 60%
    }

    .reallution_sec02 .imgArea {
        width: 40%
    }
}

@media screen and (max-width:1130px) {
    .reallution_sec01 .flex .imgArea {
        overflow: hidden;
        margin-right: 2vw;
        width: 30vw
    }

    .reallution_sec01 .flex .video {
        overflow: hidden;
        width: 57vw
    }
}

@media screen and (max-width:1000px) {
    .product_content {
        max-width: 90%;
        margin: auto
    }

    .reallution_sec01 .flex .imgArea {
        width: 32vw;
        display: none
    }

    .reallution_sec01 .flex .video {
        width: 100%;
        text-align: center
    }

    .reallution_sec02 .flex {
        flex-wrap: wrap
    }

    .reallution_sec02 .textArea {
        width: 100%;
        padding-right: 0
    }

    .reallution_sec02 .imgArea {
        width: 100%;
        margin-top: 20px
    }
}

@media screen and (max-width:900px) {
    .reallution_icon .icon01 {
        background-position: left 7px center;
        background-size: 52px
    }

    .reallution_icon .icon02 {
        background-position: left center;
        background-size: 64px
    }

    .reallution_icon .icon03 {
        background-position: left 12px center;
        background-size: 44px
    }

    .reallution_sec01 {
        padding: 80px 0 70px 0
    }

    .recommend {
        display: block;
        margin-top: 50px
    }

    .recommend>p {
        width: 100%;
        margin-bottom: 30px
    }

    .recom_list {
        width: 100%
    }

    .reallution_sec01 .flex {
        margin-top: 60px
    }

    .reallution_gray {
        padding: 40px 0 60px 0
    }

    .reallution_sec02 {
        padding: 70px 0 60px 0
    }

    .reallution_sec02 .flex {
        margin-top: 45px
    }
}

@media screen and (max-width:800px) {
    .tit_ty2 {
        padding-bottom: 15px
    }

    .reallution_sec01 .flex {
        margin-top: 50px
    }

    .reallution_gray {
        padding: 40px 0 70px 0
    }

    .reallution_sec02 {
        padding: 60px 0 70px 0
    }

    .reallution_sec02 .text {
        font-size: 17px;
        margin-bottom: 15px
    }

    .recom_list {
        flex-wrap: wrap
    }

    .recom_list li {
        width: calc(100%/3)
    }

    .recom_list li:nth-child(n+4) {
        margin-top: 20px
    }

    .reallution_sec01 .flex .video iframe {
        width: 100% !important
    }
}

@media screen and (max-width:500px) {
    .reallution_icon .icon01 {
        background-position: center top;
        background-size: 52px
    }

    .reallution_icon .icon02 {
        background-position: center top;
        background-size: 64px
    }

    .reallution_icon .icon03 {
        background-position: center top;
        background-size: 44px
    }

    .reallution_sec01 {
        padding: 40px 0 30px 0
    }

    .reallution_sec01 .flex {
        margin-top: 20px
    }

    .reallution_sec02 .text {
        font-size: 13px;
        margin-top: 8px
    }

    .reallution_gray {
        padding: 20px 0 50px 0
    }

    .reallution_sec02 {
        padding: 40px 0 30px 0
    }

    .recommend>p {
        font-size: 16px
    }

    .recom_list li p {
        font-size: 13px
    }
}