body {
    padding: 0px;
    margin: 0px;
}

.root-ctn.main{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:flex;
    opacity:1;
    /*align-items:center;*/
    justify-content:center;
    text-align:center;
}
.root-ctn{
    /*position:absolute;
    top:100%;*/
    position:relative;
    width:100%;
    min-height:100%;
    z-index:3;
    transition:all ease 0.8s;
}
.root-ctn.active{
    /*top:0%;*/
}

.root-ctn.disabled {
    display: none;
}

.main-ctn {
    display: inline-flex;
    position: relative;
    width: 2286px;
    height: 1297px;
    max-width: 100%;
    max-height: 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: contain;
    background-image: url('../images/content/main-pg1.jpg');
    transition:all ease 0.8s;
}
.main-ctn.disabled{
    display:none;
}
.main-ctn.hidden {
    opacity: 0;
}

.main-ctn .parts{
    width:22%;
    height:14%;
    position:absolute;
    background:rgba(0, 148, 255, 0);
    cursor:pointer;
}

.page-ctn {
    position: relative;
    /*position:absolute;*/
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: contain;
}
.page-ctn.disabled{
    display:none;
}
.page-ctn.active{
    z-index:2;
}

.page-ctn img{
    width:100%;
    height:auto;
    padding:0px;
    margin:0px;
    visibility:hidden;
    box-sizing:border-box;
}

.page-ctn .btn-close{
    width:32px;
    height:32px;
    position:absolute;
    top:20px;
    right:23px;
    padding:5px;
    z-index:3;
    border:0px solid #000;
    background-repeat:no-repeat;
    background-position:50%;
    background-size:contain;
    background-image:url('../images/icon/ic-close.svg');
    cursor:pointer;
}

.main-ctn .parts.p1 {
    left: 6.5%;
    top:auto;
    bottom:9%;
}
.main-ctn .parts.p2 {
    left: 29.5%;
    top:auto;
    bottom:9%;
}
.main-ctn .parts.p3 {
    left: 22%;
    top:48%;
}
.main-ctn .parts.p4 {
    left: 16.5%;
    top:21%;
}
.main-ctn .parts.p5 {
    left: 39%;
    top:21%;
}

.page-ctn.p1 {
    background-image: url('../images/content/pdfr-ctn1-1.jpg');
}
.page-ctn.p2 {
    background-image: url('../images/content/pdfr-ctn2-1.jpg');
}
.page-ctn.p3.idx1 {
    background-image: url('../images/content/pdfr-ctn3-1-1.jpg');
}
.page-ctn.p3.idx2 {
    background-image: url('../images/content/pdfr-ctn3-2.jpg');
}
.page-ctn.p4.idx1 {
    background-image: url('../images/content/pdfr-ctn4-1.jpg');
}
.page-ctn.p4.idx2 {
    background-image: url('../images/content/pdfr-ctn4-2.jpg');
}
.page-ctn.p5 {
    background-image: url('../images/content/pdfr-ctn5-1.jpg');
}

.div-logo {
    width: 8%;
    height: 8%;
    position: absolute;
    top: 3.7%;
    right: 5%;
    background: rgba(0, 148, 255, 0);
    cursor: pointer;
}
.btn-download {
    width: 12%;
    height: 3.8%;
    position: absolute;
    top: 12.5%;
    right: 1.0%;
    background: rgba(0, 148, 255, 0);
    background-repeat:no-repeat;
    background-position:0% 0%;
    background-size:contain;
    background-image:url('../images/icon/download.png');
    cursor: pointer;
}

.div-email {
    width: 11.5%;
    height: 1.5%;
    position: absolute;
    left: 59%;
    bottom: 5.5%;    
    background: rgba(0, 148, 255, 0);
    cursor: pointer;
}

.title-ctn {
    width: 34%;
    height: 37%;
    position: absolute;
    right: 5%;
    /*bottom: 13%;*/
    top: 50%;
    background: rgba(0, 148, 255, 0);
    background-repeat: no-repeat;
    background-position: 0%;
    background-size: contain;
    background-image: url('../images/content/main-img1.png');
    transition: opacity 0.8s linear;
}
.title-ctn.hidden{
    opacity:0;
}

.speech-bubble {
    width: 11.3%;
    height: 11.3%;
    position: absolute;
    right: 3.3%;
    top: 38%;
    background: rgba(0, 148, 255, 0);
    background-repeat: no-repeat;
    background-position: 0%;
    background-size: contain;
    /*background-image: url('../images/content/main-img2.png');*/
    overflow: hidden;
}
.speech-bubble .el-bubble{
    width:100%;
    height:100%;
    display:inline-block;
    background-repeat: no-repeat;
    background-position: 0%;
    background-size: contain;
    background-image: url('../images/content/main-img2.png');
}

.sliding-element {
    position: relative;
    top: -150%; /* 초기에 숨겨진 상태로 설정 */
    transition: top 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55); /* cubic-bezier를 사용하여 이징 효과 적용 */
}

.root-ctn .controls {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
}
.root-ctn.disabled .controls{
    display:none;
}

/*.root-ctn .controls .sp{
    width:16px;
    height:16px;
    margin:0px 10px;
    border-radius:50%;
    border:1px solid #a0a0a0;
    background-color:rgba(220,220,220,0.6);
    cursor:pointer;
}
.root-ctn .controls .sp.active{
    border:1px solid rgba(14, 91, 250,1);
    background-color:rgba(14, 91, 250,0.6)
}*/

.root-ctn .controls .sp{
    width:28px;
    height:28px;
    margin:0px 12px;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:cover;    
    cursor:pointer;
}
.root-ctn .controls .sp.active{
    cursor:default;
}

.root-ctn .controls .sp.pre{
    background-image:url('../images/icon/ic-pre-act.png');
}
.root-ctn .controls .sp.pre.active{
    background-image:url('../images/icon/ic-pre.png');
}

.root-ctn .controls .sp.next{
    background-image:url('../images/icon/ic-next-act.png');
}
.root-ctn .controls .sp.next.active{
    background-image:url('../images/icon/ic-next.png');
}


.resf-parts .section,
.parts .section {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 148, 255, 0);
}

.cover-vplayer{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,0.45);
    z-index:10;
}
.cover-vplayer.disabled{
    display:none;
}
.cover-vplayer .vplayer-ctn{
    position:relative;
    width:820px;
    height:480px;
    border:1px solid rgba(30,30,30,0.9);
}
.cover-vplayer video{
    width:100%;
    height:100%;
    object-fit:cover;
}
.vplayer-ctn .btn-v-close {
    width: 32px;
    height: 32px;
    position: absolute;
    top: -45px;
    right: 0px;
    padding: 5px;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    background-image: url(../images/icon/ic-close.svg);
    cursor: pointer;
}

.page-ctn.p1 .slider-ctn.sd1 {
    /*width: 41%;
    height: 47.3%;*/
    width:35.2%;
    height:46.3%;
    position: absolute;
    /*left: 3.9%;
    top: 38%;*/
    left:11%;
    top:32%;
    background: rgba(0, 148, 255, 0);
    box-sizing: border-box;
}
.page-ctn.p1 .btn-p1-video {
    /*width: 25.2%;*/
    width:20%;
    height: 5.5%;
    position: absolute;
    /*left: 11.8%;
    top: 89.1%;*/
    left:18%;
    top:86.5%;
    background: rgba(0, 148, 255, 0);
    border-radius:24px;
    box-sizing: border-box;
    cursor:pointer;
}

.page-ctn.p1 .btn-p1-img1 {
    display:none;
    width: 11%;
    height: 3.3%;
    position: absolute;
    left: auto;
    right: 3.5%;
    top: 71%;
    background-color: rgba(0, 148, 255, 0);
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: contain;
    background-image: url('../images/content/btn-p1-img1.png');
    cursor: pointer;
}

.page-ctn.p2 .btn-p2-label1 {
    /*width: 12.2%;*/
    width:9.7%;
    height: 3.6%;
    position: absolute;
    /*left: 31.8%;
    top: 29.9%;*/
    left:32%;
    top:24.2%;
    background: rgba(0, 148, 255, 0);
    border-radius: 24px;
    box-sizing: border-box;
    cursor: pointer;
}
.page-ctn.p2 .btn-p2-label2 {
    width: 10.8%;
    height: 3.6%;
    position: absolute;
    left: 55.8%;
    top: 30.5%;
    background: rgba(0, 148, 255, 0);
    box-sizing: border-box;
    cursor: pointer;
}
.page-ctn.p2 .btn-p2-label3 {
    width: 6.9%;
    height: 10.2%;
    position: absolute;
    left: 55.9%;
    top: 79.0%;
    background: rgba(0, 148, 255, 0);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
}

.page-ctn.p2 .btn-p2-img2,
.page-ctn.p2 .btn-p2-img1 {
    /*width: 19.8%;
    height: 20%;*/
    width:16.3%;
    height:20.3%;
    position: absolute;
    /*left: 4.4%;
    top: 57.9%;*/
    left:12%;
    top:53.5%;
    background: rgba(0, 148, 255, 0);
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
}
.page-ctn.p2 .btn-p2-img2 {
    /*left: 24.6%;
    top: 57.9%;*/
    left:29%;
    top:53.5%;
}

.page-ctn .btn-pic-popup {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.page-ctn.p4.idx2 .slider-ctn.sd1,
.page-ctn.p4.idx1 .slider-ctn.sd1 {
    /*width: 26%;*/
    width:23.7%;
    height: 25%;
    position: absolute;
    /*left: 3.8%;
    top: 35.6%;*/
    left:10.7%;
    top:29%;
    background: rgba(0, 148, 255, 0);
    box-sizing: border-box;
}
.page-ctn.p4.idx2 .slider-ctn.sd2,
.page-ctn.p4.idx1 .slider-ctn.sd2 {
    /*width: 26%;*/
    width:23.7%;
    height: 25%;
    position: absolute;
    /*left: 37.0%;
    top: 35.6%;*/
    left:38.1%;
    top:29%;
    background: rgba(0, 148, 255, 0);
    box-sizing: border-box;
}
.page-ctn.p4.idx2 .slider-ctn.sd3,
.page-ctn.p4.idx1 .slider-ctn.sd3 {
    /*width: 26%;*/
    width:23.7%;
    height: 25%;
    position: absolute;
    /*left: 70.5%;
    top: 35.6%;*/
    left:65.7%;
    top:29%;
    background: rgba(0, 148, 255, 0);
    box-sizing: border-box;
}

.page-ctn.p5 .btn-p5-img3,
.page-ctn.p5 .btn-p5-img2,
.page-ctn.p5 .btn-p5-img1 {
    /*width: 22.6%;*/
    width:19.7%;
    height: 23.4%;
    position: absolute;
    /*left: 6.1%;
    top: 61.5%;*/
    left:13.2%;
    top:58.7%;
    background: rgba(0, 148, 255, 0);
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
}
.page-ctn.p5 .btn-p5-img2 {    
    /*left: 38.9%;
    top: 61%;*/
    left:40.9%;
    top:58.7%;
}
.page-ctn.p5 .btn-p5-img3 {
    /*left: 71.6%;
    top: 61.5%;*/
    left:68.5%;
    top:58.7%;
}

.page-ctn .slider-ctn .sd-frame {
    width:100%;
    height:100%;
    box-sizing:border-box;
    position:relative;
}

.page-ctn .slider-ctn .loading {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -10px;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: contain;
    background-image: url('../images/loader/loading_2.gif');
    /*z-index:3;*/
}

.kw-p-ctn {
    position: absolute;
    top: -10%;
    left: 13%;
    display: inline-flex;
    margin-left: -24px;
}
/*.kw-p-ctn.p1 {
    left: 38%;
    top: 10%;    
}*/

.kw-p-ctn .loader-puff {
    display: inline-block;
    width: 48px;
    height: 48px;
    /* position: absolute; */
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: contain;
    background-image: url('../images/loader/puff2.svg');
    z-index: 3;
}

@keyframes aniKWPoint {
    50% {
        transform: scale(0);
        opacity: 0.5;
    }
}

.chart-ctn.chart1 {
    /*width: 39%;
    height: 28%;*/
    width:32%;
    height:30%;
    position: absolute;
    /*left: 4%;
    top: 35.6%;*/
    left:12.3%;
    top:37.2%;
    background: #fff;
    box-sizing: border-box;
}
.chart-ctn.chart2 {
    /*width: 37%;
    height: 27%;*/
    width:27%;
    height:22%;
    position: absolute;
    /*left: 4%;*/
    left:13%;
    top: 69%;
    background: #fff;
    box-sizing: border-box;
}
.chart-ctn.chart3 {
    display:none;
    width: 37%;
    height: 27%;
    position: absolute;
    right: 6%;
    top: 68%;
    background: #fff;
    box-sizing: border-box;
}

.chart-ctn.chart4 {
    /*width: 49%;
    height: 38%;*/
    width:42%;
    height:43%;
    position: absolute;
    right: auto;
    /*top: 53%;*/
    top:42%;
    left:47%;
    background: #fff;
    box-sizing: border-box;
}

.chart-ctn .frame-chart{
    width:100%;
    height:100%;
    box-sizing:border-box;
}

/*************  photoviewer css   **********************/

.photoviewer-modal {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .3);
}

.photoviewer-header .photoviewer-toolbar {
    background-color: rgba(0, 0, 0, .5);
}

.photoviewer-stage {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .85);
    border: none;
}

.photoviewer-footer .photoviewer-toolbar {
    background-color: rgba(0, 0, 0, .5);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.photoviewer-header,
.photoviewer-footer {
    border-radius: 0;
    pointer-events: none;
}

.photoviewer-title {
    color: #ccc;
}

.photoviewer-button {
    color: #ccc;
    pointer-events: auto;
}

.photoviewer-header .photoviewer-button:hover,
.photoviewer-footer .photoviewer-button:hover {
    color: white;
}