#product-line {
    
    position:relative; max-width:868px; max-height:581px; margin:auto;
    user-select:none; margin-bottom:300px;
}


#product-line img {display:block; margin:auto;}
#product-line .car {text-align:center;}
#product-line .rect {
    width:100%; height:100%; top:0; left:0;
    position:absolute;
}
#product-line .dot {
    width:19px; height:19px; position:absolute; transition:all 200ms;
    cursor:pointer; z-index:90; opacity:1;
}
#product-line .dot .d {
    width:19px; height:19px; border-radius:100%; background:#f46302; border:2px solid #fff;
    position:absolute;  transition:all 200ms;
}
#product-line .dot.open {
    opacity:0;
    animation-name: show_dot;
    animation-fill-mode: both;
    animation-duration: 2s;
	animation-direction:alternate;
	animation-timing-function:ease-in-out;
	animation-iteration-count:1;
}
#product-line .dot .d:before,
#product-line .dot .d:after {
    content:''; position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; background:#f46302;
}
#product-line .dot .d:before {width:65%; height:65%; border-radius:100%;}
#product-line .dot .d:after {width:65%; height:65%; border-radius:100%;}
#product-line .dot.active .d {
    border:2px solid #f46302; background:#fff; opacity:1; transform:rotate(0);
    animation:action_dot 500ms both, rotate_dot ease 2s 500ms infinite;
}
#product-line .dot.active .d:before,
#product-line .dot.active .d:after {background:#fff;}
#product-line .dot .con {display:none; position:absolute; transition:all 200ms;}
#product-line .dot .con img {cursor:default; z-index:100;}

#point-01 .dot {top:30%; left:45%; animation-delay:1000ms;}
#point-01 .dot .con {right:19px; bottom:19px;}
#point-01 .dot .con .black-box {transform:translateY(-50%) translateX(-103%);}

#point-02 .dot {top:40%; left:70%; animation-delay:1100ms;}
#point-02 .dot .con {top:9px; left:25px;}
#point-02 .dot .con .black-box {transform:translateY(55%) translateX(0%);}

#point-03 .dot {top:40%; left:50%; animation-delay:1200ms;}
#point-03 .dot .con {top:21px; left:17px;}
#point-03 .dot .con .black-box {transform:translateY(38%) translateX(23%);}

#point-04 .dot {top:58%; left:20%; animation-delay:1300ms;}
#point-04 .dot .con { right:19px; bottom:19px;}
#point-04 .dot .con .black-box {transform:translateY(-80%) translateX(-103%);}

#point-05 .dot {top:77%; left:40%; animation-delay:1400ms;}
#point-05 .dot .con {top:50%; left:140%;}
#point-05 .dot .con .black-box {transform:translateY(30%) translateX(35%);}

/**/
.black-box {
    position:absolute; top:0; left:0; min-width:420px; min-height:280px; z-index:100;
    border-radius:50px 20px; background:#2d2d2d; cursor:default; padding:30px;
    filter:drop-shadow(0 0 10px rgba(0,0,0,0.2)); color:#dbdbdb;
    animation:showAnimation 400ms both;
}
.black-box > div {opacity:0; position:relative; transform:translateX(-30px);}
.black-box .more {display:flex; justify-content: flex-end;}
.black-box .more a {
    color:#ec6901; display:inline-block; padding-right:30px;
    background:url(/images/content/pl/pl_more.png) no-repeat center right;
}
.mobile-rect {position:relative;}
.mobile-rect > img {display:none;}
.mobile-rect .black-box {position:relative; max-width:40%; margin-left:40%; margin-bottom:10%}
.mobile-rect .black-box > div:nth-child(1),
.dot.active .black-box > div:nth-child(1) {animation:boxAnimation 400ms 200ms both;}
.mobile-rect .black-box > div:nth-child(2),
.dot.active .black-box > div:nth-child(2) {animation:boxAnimation 400ms 230ms both;}
.mobile-rect .black-box > div:nth-child(3),
.dot.active .black-box > div:nth-child(3) {animation:boxAnimation 400ms 260ms both;}
.mobile-rect .black-box > div:nth-child(4),
.dot.active .black-box > div:nth-child(4) {animation:boxAnimation 400ms 290ms both;}


/**/
#product-line.mobile .rect .dot .con {display:none !important;}

@media(min-width:1400px){
    .mobile-rect {display:none;}
}
@media(max-width:1180px){
    #product-line {margin-bottom:50px;}
}

@media(max-width:550px){
	.wrap{height:700px;}
    .mobile-rect .black-box {min-width:80%; max-width:90%; margin:10% auto;}
	.black-box .more{padding-top:13%;}
}

/**/
@keyframes show_dot {
    0% {transform:scale(0.8); opacity:0;}
	25% {transform:scale(1.2); opacity:1;}
	50% {transform:scale(0.8); opacity:0;}
    100% {transform:scale(1); opacity:1;}
}

@keyframes rotate_dot {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}

@keyframes action_dot {
    0% {width:19px; height:19px; transform:translateX(0) translateY(0);}
    100% {width:23px; height:23px; transform:translateX(-0px) translateY(-0px);}
}

@keyframes showAnimation {
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes boxAnimation {
    0% {}
    100% {
        opacity: 1;
        transform:translateY(0) translateX(0);
    }
}