@import url("../css/popup.css");
@import url("../css/intro.css");

/* ���־��� Ŭ���� */

._stop_audio {}
._play_audio {}

._stop_video {}
._play_video {}

._show_popup {}
._hide_popup {}
._show_popup_alert {}
._hide_popup_alert {}

._show_intro_help {}
._close_intro_help {}

.notice_landscape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    text-align: center;
    color: #ffffff;
    padding-top: 60%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 2000;
    display: none;
}
.notice_landscape p {
    text-align: center;
    margin-bottom: 20px;
}
@media (max-width: 480px) {
    .notice_landscape {
        display: block;
    }
}

.section_page {
    position: relative;
    width: 100%;
    height: 100%;
}
.section_page .home{
    position: absolute;
    top: 0;
    left: 0;
}

/* page right */
.page .contents {
    min-height : 300px;
}

.page_help_intro {
}


/* page_one */
.page_one {
    position: relative;
    width: 100%;
}
.page_one .title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
}

.page_one .title .btn_help {
    position: absolute;
    right: 7%;
    top: 0;
    width: 20%;
    height: 100%;
}

.page_one .map {
    border: 3px solid #395683;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: url("../images/page1/img_map.png") center center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page_one .map .section_area {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.page_one .map .area {
    position: absolute;
    width: 18%;
    height: 17%;
    /*background-color: #f0f0f0;*/
}
.page_one .map .area1 {
    top: 20%;
    left: 5%;
}
.page_one .map .area2 {
    top: 40%;
    left: 3%;
    height: 40%;
}
.page_one .map .area3 {
    top: 20%;
    left: 25%;
    width: 30%;
    height: 40%;
}
.page_one .map .area4 {
    top: 70%;
    left: 38%;
}
.page_one .map .area5 {
    top: 20%;
    left: 60%;
    width: 30%;
    height: 30%;
}
.page_one .map .area6 {
    top: 52%;
    left: 80%;
    height: 40%;
}
.page_one .map .area a {
    display: block;
    width: 100%;
    height: 100%;
}

.page_one .map .section_intro {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
}
.page_one .map .section_intro .img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url("../images/page1/img_popup_hint.png") center center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    border: 3px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 500;
}

.page_one .map .section_info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
}
.page_one .map .info {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: center center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    display: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.page_one .map .info1 {
    background-image: url("../images/page1/img_map_1.png");
}
.page_one .map .info2 {
    background-image: url("../images/page1/img_map_2.png");
}
.page_one .map .info3 {
    background-image: url("../images/page1/img_map_3.png");
}
.page_one .map .info4 {
    background-image: url("../images/page1/img_map_4.png");
}
.page_one .map .info5 {
    background-image: url("../images/page1/img_map_5.png");
}
.page_one .map .info6 {
    background-image: url("../images/page1/img_map_6.png");
}
.page_one .map .info a {
    display: block;
    width: 100%;
    height: 100%;
}




/* page3 */
.page_two {
    position: relative;
    width: 100%;
    background-color: #22344f;
}
.page_two .title {
    position: absolute;
    top: 15px;
    left: 10px;
    z-index: 100;
}
.page_two .btn_video {
    position: absolute;
    top: 40px;
    left: 45px;
    z-index: 100;
}
.page_two .btn_help {
    position: absolute;
    top: 40px;
    left: 60px;
    z-index: 100;
}
.page_two .info {
    position: absolute;
    top: 80px;
    left: 10px;
    z-index: 100;
}

.page_two .map {
    position: relative;
    margin-left: 25%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.page_two .map .img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 4px solid #395683;
    position: absolute;
    bottom: 0;
    right: 0;
}
.page_two .map .img img {
    width: 100%;
    height: 100%;
}
.page_two .map .section_flag {
    display: none;
}
.page_two .map .flag {
    position: absolute;
    width: 30px;
}
.page_two .map .flag1 {
    top: 18%;
    left: 40%;
}
.page_two .map .flag2 {
    top: 12%;
    left: 59%;
}
.page_two .map .flag3 {
    top: 45%;
    left: 50%;
}
.page_two .map .flag4 {
    top: 47%;
    left: 60%;
}
.page_two .map .flag a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_two .map .flag a img{
    width: 100%;
}
.page_two .map .flag a .focus{
    display: none;
}
.page_two .map .flag.on a img{
    display: none;
}

.page_two .map .flag.on a .focus{
    display: block;
}

.section_page_popup {
    position: relative;
    background: url("../images/page2/bg_peak.png") center center no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    padding: 17px 50px;
}
.section_page_popup .header {
    background: url("../images/common/img_popup_header.png");
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 25px;
    position: relative;
}
.section_page_popup .title {
    margin-left: 10px;
    font-size: 12px;
    color: #ffba00;
    line-height: 25px;
}
.section_page_popup .title em {
    margin-left: 10px;
    font-size: 10px;
    color: #ffffff;
    line-height: 25px;
}
.section_page_popup .btn_close {
    position: absolute;
    top: 0px;
    right: 10px;
    width: 12px;
    height: 12px;
    z-index: 1000;
}
.section_page_popup .btn_close img {
    width: 12px;
    height: 12px;
}
.section_page_popup .wrap {
    min-height: 200px;
    border: 2px solid #000000;
    background-color: #000000;
    position: relative;
}


/* page_gallery */
.page_gallery {
    position: relative;
    width: 100%;

    background-color: #000000;
}

/* page4 */
.page_three {
    position: relative;
    width: 100%;
    background-color: #22344f;
}
.page_three .title {
    position: absolute;
    top: 15px;
    left: 10px;
    z-index: 100;
}
.page_three .btn_video {
    position: absolute;
    top: 45px;
    left:50px;
    z-index: 100;
}
.page_three .btn_help {
    position: absolute;
    top: 45px;
    left: 65px;
    z-index: 100;
}
.page_three .info {
    position: absolute;
    top: 80px;
    left: 10px;
    z-index: 100;
}

.page_three .map {
    position: relative;
    margin-left: 25%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.page_three .map .basic{
    width: 100%;
    height: 100%;
}
.page_three .map .basic img {
    width: 100%;
    height: 100%;
}
.page_three .map .section_area{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
.page_three .map .section_area >div {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
}
.page_three .map .section_area img {
    width: 100%;
    height: 100%;
}

.page_three .map .name{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page_three .map .name img {
    width: 100%;
    height: 100%;
}
.page_three .map .section_country {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.page_three .map .country {
    position: absolute;
    width: 60px;
    height: 30px;
}
.page_three .map .country1 {
    top: 26.4%;
    left: 37.9%;
}
.page_three .map .country2 {
    top: 3%;
    left: 43%;
}
.page_three .map .country3 {
    top: 24%;
    left: 17%;
}
.page_three .map .country4 {
    top: 47.5%;
    left: 22%;
}

.page_three .map .country5 {
    top: 85%;
    left: 58%;
    width: 90px;
}

.page_three .map .country6 {
    top: 10.9%;
    left: 61%;
}

.page_three .map .country7 {
    top: 7%;
    left: 10%;
}
.page_three .map .country8 {
    top: 41%;
    left: 75%;
}

.page_three .map .country9 {
    top: 59%;
    left: 29%;
    width: 120px;
}
.page_three .map .country10 {
    top: 70.7%;
    left: 74.6%;
    width: 15%;
}


.page_three .map .country a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_three .map .country a img{
    width: 100%;
}



.page_three .map .flag {
    position: absolute;
    width: 30px;
}
.page_three .map .flag1 {
    top: 13.6%;
    left: 56.1%;
}
.page_three .map .flag2 {
    top: 5.6%;
    left: 26%;
}
.page_three .map .flag3 {
    top: 39%;
    left: 68.8%;
}
.page_three .map .flag4 {
    top: 46%;
    left: 50.2%;
}
.page_three .map .flag5 {
    top: 76%;
    left: 50.8%;
}
.page_three .map .flag6 {
    top: 63%;
    left: 70.8%;
}






.page_three .map .flag a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_three .map .flag a img{
    width: 100%;
}


/* nation */
.page_country {
    position: relative;
    width: 100%;
}
.page_country .nav {
    width: 100%;
    height: 100%;
}
.page_country .nav img {
    width: 100%;
    height: 100%;
}
.page_country .btn_back {
    position: absolute;
    top: 85%;
    left: 50%;
    margin-left: -30px;
    width: 60px;
}

/* nation1 */
.page_country_01 .section_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page_country_01 .section_area .area {
    position: absolute;
    width: 13.8%;
    height: 39%;
    top: 34%;
}
.page_country_01 .section_area .area a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_country_01 .section_area .area1 {
    left: 10.2%;
}
.page_country_01 .section_area .area2 {
    left: 31.6%
}
.page_country_01 .section_area .area3 {
    left: 51.8%
}
.page_country_01 .section_area .area4 {
    left: 73%
}



/* nation2 */
.page_country_02 .section_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page_country_02 .section_area .area {
    position: absolute;
    width: 16%;
    height: 39%;
    top: 34%;
}
.page_country_02 .section_area .area a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_country_02 .section_area .area1 {
    left: 10.2%;
}
.page_country_02 .section_area .area2 {
    left: 31.6%
}
.page_country_02 .section_area .area3 {
    left: 51.8%
}
.page_country_02 .section_area .area4 {
    left: 73%
}



/* nation3 */
.page_country_03 .section_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page_country_03 .section_area .area {
    position: absolute;
    width: 16%;
    height: 39%;
    top: 34%;
}
.page_country_03 .section_area .area a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_country_03 .section_area .area1 {
    left: 23%;
}
.page_country_03 .section_area .area2 {
    left: 44%;
}
.page_country_03 .section_area .area3 {
    left: 65%;
}


/* nation4 */
.page_country_04 .section_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page_country_04 .section_area .area {
    position: absolute;
    width: 16%;
    height: 39%;
    top: 34%;
}
.page_country_04 .section_area .area a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_country_04 .section_area .area1 {
    left: 23%;
}
.page_country_04 .section_area .area2 {
    left: 44%;
}
.page_country_04 .section_area .area3 {
    left: 65%;
}


/* nation5 */
.page_country_05 .section_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page_country_05 .section_area .area {
    position: absolute;
    width: 16%;
    height: 39%;
    top: 34%;
}
.page_country_05 .section_area .area a {
    display: block;
    width: 100%;
    height: 100%;
}
.page_country_05 .section_area .area1 {
    left: 23.5%;
}
.page_country_05 .section_area .area2 {
    left: 44.4%;
}
.page_country_05 .section_area .area3 {
    left: 64.4%;
}