﻿.map_section_container {
            position: relative;
            height: 100%;
            padding: 0;
        }

        .map_container {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .map_zoom {
            position: relative;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .mark_container {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .map_controller {
            position: absolute;
            bottom: 2rem;
            left: 3rem;
        }

        .loc_mark {
            z-index: 100;
            position: absolute;
            display: inline-block;
            width: 4.3rem;
            height: 6rem;
            line-height: 4rem;
            text-align: center;
            /*border-radius: 50%;*/
            backface-visibility: hidden;
            -webkit-transform-origin: 50% 50% 0px;
            -moz-transform-origin: 50% 50% 0px;
            -ms-transform-origin: 50% 50% 0px;
            -o-transform-origin: 50% 50% 0px;
            transform-origin: 50% 50% 0px;
            cursor: move;
            -webkit-transition: -webkit-transform 200ms ease-in-out;
            -moz-transition: -moz-transform 200ms ease-in-out;
            -ms-transition: -ms-transform 200ms ease-in-out;
            -o-transition: -o-transform 200ms ease-in-out;
            transition: transform 200ms ease-in-out;
            
        }

            .loc_mark:before {
                /*content: "";*/
                display: block;
                position: absolute;
                bottom: -2.4rem;
                left: 50%;
                margin-left: -1.5rem;
                height: auto;
                opacity: 1;
                filter: alpha(opacity = 0);
                height: 3rem;
                width: 3rem;
                color: #5E5E5E;
                /*border-radius: 1.5rem;*/
                background: rgba(253, 251, 165, 0.8);
                /*background-image:url(../images/taiji.png);*/
                box-shadow: 0 0rem 3rem rgba(253, 251, 165, 1);
                -webkit-transition: all 200ms ease-in-out;
                -moz-transition: all 200ms ease-in-out;
                -ms-transition: all 200ms ease-in-out;
                -o-transition: all 200ms ease-in-out;
                transition: all 200ms ease-in-out;
                -moz-transform: rotateX(80deg);
                -ms-transform: rotateX(80deg);
                -o-transform: rotateX(80deg);
                -webkit-transform: rotateX(80deg);
                transform: rotateX(80deg);
                
   
    /*-moz-animation: taiji-ico-3d 15s  infinite linear;
    -o-animation: taiji-ico-3d 15s  infinite linear;
    -webkit-animation: taiji-ico-3d 15s  linear linear;
    animation: taiji-ico-3d 15s  infinite linear;*/
            }

            .loc_mark:after {
                z-index: 1;
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                /*content: '';*/
                width: 4rem;
                height: 4rem;
                /*background: #FFFFFF;*/
                /*background:#C7254E;*/
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                border-radius: 50% 50% 0 50%;
                box-shadow: 0 0 1rem #000000;
            }

        .mark_bg {
            z-index:2;
            position: absolute;
            top: .3rem;
            left: .3rem;
            display: inline-block;
            width: 3.7rem;
            height: 5.4rem;
            /*border: .1rem solid #C7254E;*/
            /*border-radius: 50%;*/
            /*background-color: #FFFFFF;*/
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .mark_fzt {
            z-index:3;
            position: absolute;
            top: .3rem;
            left: .3rem;
            display: inline-block;
            width: 70%;
            height: 520px;
            /*border: .1rem solid #C7254E;*/
            /*border-radius: 50%;*/
            /*background-color: #FFFFFF;*/
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .markNew {
            color: #FFFFFF;
        }

            .markNew:after,
            .markNew:before {
                color: #FFFFFF;
                background: #C7254E;
            }

        .put_mark_blok {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
        }

            .put_mark_blok button.putMarkIn {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -3.5rem;
                margin-top: -3.5rem;
                line-height: 10rem;
                text-align: center;
                border-radius: 50%;
                width: 7rem;
                height: 7rem;
                border: none;
                background: #D9534F;
                -webkit-transition: all 0.2s ease;
                -moz-transition: all 0.2s ease;
                -ms-transition: all 0.2s ease;
                -o-transition: all 0.2s ease;
                transition: all 0.2s ease;
            }

                .put_mark_blok button.putMarkIn:after {
                    z-index: -1;
                    position: absolute;
                    top: -1.35rem;
                    left: -1.5rem;
                    display: inline-block;
                    content: '';
                    width: 10rem;
                    height: 10rem;
                    background: #FFFFFF;
                    -webkit-transform: rotate(45deg);
                    -moz-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    transform: rotate(45deg);
                    border-radius: 50% 60% 0 60%;
                    box-shadow: .3rem -0.8rem 3rem #000000;
                    -webkit-transition: background-color 0.2s ease;
                    -moz-transition: background-color 0.2s ease;
                    -ms-transition: background-color 0.2s ease;
                    -o-transition: background-color 0.2s ease;
                    transition: background-color 0.2s ease;
                }

                .put_mark_blok button.putMarkIn:before {
                    position: absolute;
                    margin-top: 10rem;
                    margin-left: -4.5rem;
                    line-height: 3.5rem;
                    content: attr(title);
                    display: block;
                    height: 3.5rem;
                    width: 15rem;
                    opacity: 0;
                    background: #FFFFFF;
                    -webkit-transition: all 0.2s ease;
                    -moz-transition: all 0.2s ease;
                    -ms-transition: all 0.2s ease;
                    -o-transition: all 0.2s ease;
                    transition: all 0.2s ease;
                }

                .put_mark_blok button.putMarkIn:hover {
                    background: #FFFFFF;
                }

                    .put_mark_blok button.putMarkIn:hover:after {
                        background: #D9534F;
                    }

                    .put_mark_blok button.putMarkIn:hover:before {
                        opacity: 1;
                        margin-top: 9rem;
                    }

        .fixed {
            position: fixed;
        }

        .mark_list_container {
            margin-bottom: 15rem;
        }

        .common_table {
            width: 100%;
            border-collapse: collapse;
        }

            .common_table thead th,
            .common_table tbody td {
                padding: 1rem .5rem;
                border: .1rem solid #DDDDDD;
                text-align: center;
            }

        .sites_list_box thead th {
            background: rgba(0,0,0,0.05);
        }

        .submit_section {
            padding: 2.5rem 0;
            text-align: right;
        }

        .opt_btn {
            margin: .3rem .5rem;
        }

        #location{position:fixed;left:1rem;bottom:2rem;width:1.5rem;height:1.5rem;background:#fff;border-radius:50%;text-align:center}
        #location .icon{line-height:1.5rem;font-size:1rem;color:#db483a}


@-webkit-keyframes jump {
    0% {
        -webkit-transform: translateY(0px);
        -webkit-transform: rotateX(80deg);
    }

    100% {
        -webkit-transform: translateY(-30px);
        -webkit-transform: rotateX(80deg);
    }
}
@-moz-keyframes jump{
    0% {
        -moz-transform: translateY(0px);
        -moz-transform: rotateX(80deg);
    }

    100% {
        -moz-transform: translateY(-30px);
        -moz-transform: rotateX(80deg);
    }
}
@-o-keyframes jump{
    0% {
        -o-transform: translateY(0px);
        -o-transform: rotateX(80deg);
    }

    100% {
        -o-transform: translateY(-30px);
                -o-transform: rotateX(80deg);
    }
}
@-webkit-keyframes taiji-ico-3d {
	0% {-webkit-transform: rotateX(78deg) rotateY(0deg) rotateZ(0deg);}
	100% {-webkit-transform: rotateX(78deg) rotateY(0deg) rotateZ(360deg);}
}
@-moz-keyframes taiji-ico-3d {
	0% {-moz-transform: rotateX(78deg) rotateY(0deg) rotateZ(0deg);}
	100% {-moz-transform: rotateX(78deg) rotateY(0deg) rotateZ(360deg);}
}
@-ms-keyframes taiji-ico-3d {
	0% {-ms-transform: rotateX(78deg) rotateY(0deg) rotateZ(0deg);}
	100% {-ms-transform: rotateX(78deg) rotateY(0deg) rotateZ(360deg);}
}

	

