﻿
@media screen and (min-width:415px) {
    body {background-color: black;text-align:center;}
    ol, ul {list-style: none;margin: 0;padding: 0;}

    .dis_none{display:none !important;}
    .color_or{color: orange;}
    .cur_point{cursor:pointer;}

    #header {width: 100%;height: 101px;position: fixed;display: block;background: #333;z-index: 15;color: #f2f2f2;background: url('../images/bar_menu.png') center no-repeat;background-size:cover;}
    #header {top: 0px;}
    #header a#logo_a{left: 10px;position: fixed;top: 15px;z-index:71;}
        #menu {position: fixed;top: 0;left: 0;z-index: 70;width: 100%;padding: 0;margin: 0;height: inherit;background-repeat: no-repeat;}
        #menu li {display: inline-block;margin: 10px;vertical-align: baseline;}
        #menu li:nth-child(odd) {}
        #menu li:nth-child(even) {width: 50px;}
        #menu li.active {background: url(../images/bar_point.png) no-repeat;background-size: 100% 100%;}
    
        #lang_select {width: 150px;float: right;margin-top: 30px;margin-right:10px;z-index: 71;position: relative;height: 30px;border-radius: 5px;}
    
    .intro {margin-top: 60px;text-align:center;min-height:900px;}

    .section {border: 1px solid black;}
    #section0 {height: 1004px;background: url('../images/1P_bg.jpg') center no-repeat;}
        #title_1p {width: 600px !important;margin: 0 auto;z-index: 13;position: relative;top: 50px;display: block;}
        #cha_1p {width: 1600px !important;margin: 0 auto;position: relative;z-index: 10;}
        .fog {width: 100%;margin: 0 auto;z-index: 5;bottom: 0;position: absolute;left: 0;}
    
        #event_div {display: block;position: relative;top: -250px;z-index: 12;}
            #event_btn_1p {width: 350px;margin: 0 auto;margin-top:20px;}
            #event_txt_1p {width: 800px;display: block;position: relative;margin: 0 auto;}
    
    #section1 {z-index: 5;height: 1004px;min-height:1204px;background: url('../images/2P_bg.jpg') center repeat-x;background-size: 100% 100%;}
    #section1 .text_2p{width: 950px !important;z-index:15} 
    #section1 .input_2p{width:300px;height:25px;text-align:center}
    
    

    #section3 {height: 1004px; min-height:1204px; background: url('../images/3P_bg.jpg') center repeat-x; background-size: 100% 100%;}
    #section3 .intro {background: url('../images/3P_cha_bg.png') center no-repeat;background-position: 50% 60%;height: 660px;}
    #section3 .slide {padding-top: 50px;}
    #section3 .wrap_img{padding-top:120px;}
    #section3 .wrap_img img{width: 650px !important;}

   /* blind 해제*/ 
    #section4 {height: 1004px;background: url('../images/4P_bg.jpg') center repeat-x;background-size: 100% 100%;}
    
    #section5 {height: 1004px;background: url('../images/5P_bg.jpg') center repeat-x;background-size: cover;}
    #section6 {height: 1004px;background: url('../images/6P_bg.jpg') center repeat-x;background-size: 100% 100%;}
    
    #section7 {height:1100px !important; background: url('../images/7P_bg.jpg') center no-repeat;background-size: 100% 100%;}
    
    .quickGroup {z-index: 9997;position: fixed;right: 50px;top: 30%;background: url(../images/quick_bg.png) no-repeat;padding-top: 30px;
        border: solid 0px blue;background-size: 100% 100%; height: 320px;}

    .quickGroup ul li {margin-bottom: 10px;text-align: center;}
    .quickGroup ul li img{width:80%;}
    .quickGroup ul li:last-child {margin: 0;border: solid 0px red;padding: 0;}
    .quickGroup .scr{height:10px;}

    #group_images {margin-top: -50px;}
        #char02 {position: absolute;}
        #char03 {position: absolute;}

        #lightBg01, #lightBg02 {position: absolute;width: 600px;height: 400px;}

        .lightBg01 {top: 0;left: 0;background: url(../images/lightBg01.png) no-repeat;}
        .lightBg02 {top: 500px;right: 0;background: url(../images/lightBg02.png) no-repeat;}

        .char06 {display: block;width: 411px;height: 650px;left: 5%;z-index: 8;
                 background: url(../images/1P_left_cha.png) no-repeat;background-size: 100% 100%;}
        .char07 {display: block;width: 545px;height: 675px;margin-left: 56%;z-index: 1;
            background: url(../images/1P_right_cha.png) no-repeat;background-size: 100% 100%;}

    #footer {width:100%; z-index: 9;  min-height: 50px !important;background-color:black;bottom:0px;position:relative;}
    #footer_logo {width: 100%; height: 40px; background: url('../images/footer.jpg') center no-repeat;
        bottom: 0px;position: absolute;z-index: 100;}

    #video_bg {background: url(../images/7P_video.png) center no-repeat;
        width: 600px; height: 470px;margin: 0 auto;z-index: 6;position: relative;padding-top: 300px;
    }
    #video_bg iframe{margin-top:-100px;}

    #form1 img, #form1 input {display: inline-block; vertical-align: middle;}

    #txtMsg {color: orangered;font-size: 0.8em;}

    #section3 .fp-tableCell {display: table-cell;vertical-align: initial;width: 100%;height: 100%;}

    #section3 .slide img {margin-top: -50px;}

    /*위치*/
    #section3 .fp-slidesNav {position: relative;z-index: 4;opacity: 1;-webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
        left: 0 !important;right: 0;margin: 0 auto !important;}

    #section3 #fp-nav ul li a,
    #section3 .fp-slidesNav ul li a {
        display: block;position: relative;z-index: 1;
        width: 100%;height: 100%;cursor: pointer;
        text-decoration: none;background: url(../images/3P_navi_off.png) center no-repeat;}

    #section3 #fp-nav ul li a.active span,
    #section3 .fp-slidesNav ul li a.active span,
    #section3 #fp-nav ul li:hover a.active span,
    #section3 .fp-slidesNav ul li:hover a.active span {
        height: 12px;width: 12px;margin: -6px 0 0 -6px;
        border-radius: 100%;background: url(../images/3P_navi_on.png) center no-repeat;}

    #section3 #fp-nav ul li a span,
    #section3 .fp-slidesNav ul li a span {
        border-radius: 50%; position: absolute; z-index: 1;
        height: 4px; width: 4px;border: 0;background: #333;
        left: 50%; top: 50%; margin: -2px 0 0 -2px;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }

    #section3 #fp-nav ul li:hover a span,
    #section3 .fp-slidesNav ul li:hover a span {
        width: 10px;height: 10px;margin: -5px 0px 0px -5px;
        background: url(../images/3P_navi_on.png) center no-repeat;}
    #section3 .fp-slides {
        z-index: 1;
        height: 100%;
        overflow: hidden;
        position: relative;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        top: -20px;
    }

    /*슬라이드 화살표 위치*/
    #section3 .fp-controlArrow.fp-prev {
        left: 20%;
        background: url(../images/3P_cha_left_btn.png) no-repeat;
        background-size: 100% 100%;
        width: 20px;
        height: 80px;
        top: 45%;
        border-color: transparent;
    }

    #section3 .fp-controlArrow.fp-next {
        right: 20%;
        width: 20px;
        height: 80px;
        background: url(../images/3P_cha_right_btn.png) no-repeat;
        background-size: 100% 100%;
        top: 45%;
        border-color: transparent;
    }

    .char06 {
        display: block;
        width: 411px;
        height: 650px;
        margin-left: 3%;
        z-index: 8;
        background: url(../images/1P_left_cha.png) no-repeat;
        background-size: 95% 95%;
    }

    .text_wrap_2p {text-align: left; color: white;margin: 0 auto;
        width: 750px;margin-bottom: 10px;font-size: 0.8em;}
    .text_wrap_2p li {list-style: circle;}
    .text_wrap_2p li:first-child {list-style: none;}

    #intro_sec7 {height:806px !important;}
}

@media screen and (min-width:1800px) {
    /*슬라이드 화살표 위치*/
    #section3 .fp-controlArrow.fp-prev {
        left: 28%;
        background: url(../images/3P_cha_left_btn.png) no-repeat;
        background-size: 100% 100%;
        width: 20px;
        height: 80px;
        top: 45%;
        border-color: transparent;
    }

    #section3 .fp-controlArrow.fp-next {
        right: 28%;
        width: 20px;
        height: 80px;
        background: url(../images/3P_cha_right_btn.png) no-repeat;
        background-size: 100% 100%;
        top: 45%;
        border-color: transparent;
    }

    #section7 .char06 {
        display: block;
        width: 411px;
        height: 650px;
        margin-left: 13%;
        z-index: 8;
        background: url(../images/1P_left_cha.png) no-repeat;
        background-size: 100% 100%;
    }

}



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   
    #section3 .fp-slides {
        z-index: 1;
        height: 100%;
        overflow: hidden;
        position: relative;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        top: 0px;
    }

}