/*제품css*/



*{margin: 0 auto; padding: 0; box-sizing: border-box;}
ul, li{list-style: none;}
a{text-decoration: none; color: inherit; font-family: 'Roboto', sans-serif;}
html{font-size: 16px; -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; }


button:focus {outline: 0;}

#wrap{width: 100%; height: auto;}

@font-face {
    font-family: 'NEXON Lv1 Gothic OTF Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'InfinitySans-RegularA1';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-RegularA1.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '777Balsamtint';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_nine_@1.1/777Balsamtint.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Godo';
  font-style: normal;
  font-weight: 700;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff');
}
/*----------------------------------------------------------------*/



/*-----------------------------------------------------------header*/
.header {
    width: 20%;
    height: 100%;
    float: left;
    position: fixed;
    /*    border: 2px solid blue;*/
}
.header > a {
    width: 50%;
    height: auto;
    display: block;
    margin-left: 20%;
    margin-top: 25%;
    margin-bottom: 20%;
}

.header > a > img {
    width: 100%;
    height: auto;
/*    filter: drop-shadow(13px 22px 3px rgba(243, 141, 141, 0.25));*/
}

.header > ul { 
    width: 100%;
    height: 100%;
    float: left;
    margin-left: -5%;
}

.header > ul > li {
    width: 45%;
    height: 85px;
    margin-bottom: 24px;
    border: 2.5px solid black;
    border-radius: 50px;
    box-shadow: inset -4px -5px 0px rgba(0, 0, 0, 0.25), inset 4px 5px 0px #ffffff;
	background: #fff;
}
.header > ul > li > a {
    font-size: 1.2vw;
    font-family: 'Godo';
    font-weight: 700;
    line-height: 80px;
    text-align: center;
    display: block;
}

.header > ul > .m4 {
    background-color: #ffb0c0;
}

.header > ul > .m1:hover {
    background-color: #a682d3;
}

.header > ul > .m2:hover {
    background-color: #fcc917;
}

.header > ul > .m3:hover {
    background-color: #5fd2ff;
}

.header > ul > .m5:hover {
    background-color: #ebece5;
}

/*----------------------------------------------------------cen_box*/
.cen_box {
    width: 50%;
    height: auto;
    /*float: left;*/
    margin-left: 25%;
    position: relative;
    /*    border: 2px solid green;*/
}

/*-------------------------------------------------------------nav*/
.nav {
    width: 50%;
    height: 100px;
    position: fixed;
    top: 0px;
    z-index: 9999;
    background: #ffffff;
}

.nav > ul {
    width: 40%;
    padding-top: 27px;
    position: fixed;
    left: 25%;
}

.nav > ul > li {
    display: inline-block;
    height: 53px;
    border: 2.5px solid #000000;
    border-radius: 50px;
    margin-right: 21px;
    text-indent: 10px;
    font-weight: 500;
    font-size: 1vw;
	line-height: 48px;
}

.nav > ul > li > a {
    display: block;
	font-family: 'Godo';
}
.nav > ul .pro0 {
    width: 17%;
    background-color: rgba(235, 50, 36);
}

.nav > ul .pro1 {
    width: 17%;
    background-color: #ffffff;
}

.nav > ul .pro2 {
    width:17%;
    background-color: #ffffff;
}

.nav > ul .pro3 {
    width: 17%;
    background-color: #ffffff;
}

.nav > ul .pro4 {
    width: 17%;
    background-color: #ffffff;
}


.nav .pro5 {
    position: fixed;
    top: 45px;
    left: 65.5%;
    font-family: 'Godo';
    font-weight: 500;
    font-size: 1.7vw;
}


.nav > ul .pro0:hover {
    background-color: rgba(235, 50, 36);
}
.nav > ul .pro1:hover {
    background-color: #ffb0c0;
}

.nav > ul .pro2:hover {
    background-color: #5fd2ff;
}

.nav > ul .pro3:hover {
    background-color: #fcc917
}

.nav > ul .pro4:hover {
    background-color: #4bff93;
}

.active0 {
    background-color: rgba(235, 50, 36);
    border-radius: 50px;
    height: 100%;
}

.active1 {
    background-color: #ffb0c0;
    border-radius: 50px;
    height: 100%;
}

.active2 {
    background-color: #5fd2ff;
    border-radius: 50px;
    height: 100%;
}

.active3 {
    background-color: #fcc917;
    border-radius: 50px;
    height: 100%;
}

.active4 {
    background-color: #4bff93;
    border-radius: 50px;
    height: 100%;
}

.active5 {
    background-color: #ffffff;
    border-radius: 50px;
    height: 100%;
}

/*--youtube-----------------------------------------------*/
.con0 {
    width: 100%;
    height: 1300px;
    overflow: hidden;
    padding-top: 170px;
    background-color: #fff;   
    
}
.con0 .you {
    width: 100%;
    height: 100%;
    font-size: 1.5rem; /*24px*/
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}
.skin{width: 100%;}
.skin img{
    width: 90%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding-bottom: 0px;
}
.you p{padding-bottom: 20px;}
.you a{
    position: absolute;
    z-index: 123123123123123123;
    width: 90%; 
    height: 35%;
    
}
.you iframe{
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    
}
/*--ebook--------------------------------------------------------*/
.ex{
    width: 100%;
    height: 50px;
    float: left;
    margin-top: 140px;
    padding-left: 10px;
}
.ex>img{
    width: 30px;
    height: auto;
    margin-right: 10px;
}
.ex>p{
    width: 200px;
    height: auto;
    font-size: 14px;
    line-height: 35px;
    font-weight: 600;
    float: left;
}

.con1 {
    width: 100%;
    height: auto;
    padding-top: 170px;
    background-color: #fff;
/*    display: none;*/
    /*    border: 1px solid blue;*/
}

.ebo .look{
    width: 25px;
    height: auto;
    position: absolute;
    top: 7vw;
    left: 9.5vw;
    cursor: pointer;
}

.ebo{
	width: 100%;
    height: 300px;
    margin-bottom: 10px;
    font-size: 1.5rem; /*24px*/
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
    position: relative;
}
.ebo1{
    margin-top: 80px;
    background: #fff;
}
.ebo>img{
	float: left;
    margin-left: 27px;
    width: 28%;
}
.ebo .t_box {
	float: left;
    height: 100px;
    position: absolute;
    left: 35%;
    top: 15%;
}

.b_title{
    font-weight: 600;
    padding-bottom: 4px;
    
}
.b_auth{
    font-size: 17px;
       padding-bottom: 14px;
}
.cost_txt{
    float: left;
    padding-right: 10px;
}
.cost_num{
   font-weight: bolder
    color: orangered;
    font-size: 1.5rem;
}
/*-----------------------------------북스토어 버튼*/


.store_btn> li{
	width: 140px;
	height: 50px;
	float: left;
	position: relative;
	top: 200px;
	left: 0px;
	z-index: 999;
	margin-right: 10px;
	font-size: 18px;
	text-indent: 10px;
    background: #fff;
    font-family: 'Godo'
}

.store_btn .btn_list{
	width: 140px;
	height: 160px;
/*	border: 3px solid black;*/
	border-radius: 15px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	padding-top: 40px;
	font-size: 14px;
	display: none;
	background-color: #fafafa;
}
.store_btn .btn_list>li{
	width: 140px;
	height: 28px;
	margin-left: 0px;
	text-indent: 5px;
}
.store_btn .btn_list img{
	width: 20px;
}
/*---hover----*/
.store_btn> li> .btn_hov-1{
	display: block;
	border: 2.5px solid black;
	border-radius: 50px;
	background-color: #fff;
	cursor: pointer;
}
.store_btn> .btn_ko-1:hover .btn_list-1{
	display: block;
    animation: list-1 linear .1s;
    animation-iteration-count: 1;
    transform-origin: 0% 0%;
    animation-fill-mode: forwards;
}
@keyframes list-1{
    0%{
        opacity: 1;
        transform: scale(0);
    }
    20%{
        opacity: 1;
        transform: scale(0.2);
    }
    40%{
        opacity: 1;
        transform: scale(0.4);
    }
    60%{
        opacity: 1;
        transform: scale(0.6);
    }
    80%{
        opacity: 1;
        transform: scale(0.8);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
.store_btn> li> .btn_hov-2{
	display: block;
	border: 2.5px solid black;
	border-radius: 50px;
	background-color: #fff;
	cursor: pointer;
}
.store_btn> .btn_en-1:hover .btn_list-2{
	display: block;
    animation: list-2 linear .1s;
    animation-iteration-count: 1;
    transform-origin: 0% 0%;
    animation-fill-mode: forwards;
}
@keyframes list-2{
    0%{
        opacity: 1;
        transform: scale(0);
    }
    20%{
        opacity: 1;
        transform: scale(0.2);
    }
    40%{
        opacity: 1;
        transform: scale(0.4);
    }
    60%{
        opacity: 1;
        transform: scale(0.6);
    }
    80%{
        opacity: 1;
        transform: scale(0.8);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
/*---hover----*/
.ebo1{
    margin-bottom: 0px;
}
.ebo1 .store_btn> li{
	left: 70px;
}
.ebo2 .store_btn> li{
	top: 70px;
}
.ebo3 .store_btn> li{
	top: 70px;
}
.ebo4 .store_btn> li{
	left: 70px;
}


/*--artwork--------------------------------------------------------*/

.con2 {
    display: none;
    padding-top: 100px;
    width: 100%;
    height: 960px;
}

.con2 > img {
    width: auto;
    height: 100%;
}

.cos{
	width: 100%;
    height: 320px;
	position: relative;
	margin-top: 150px;
}
.cos1>video{
    width: 70%;
    margin-top: 80px;
    margin-left: 80px;
}

.cos_header{
    width: 70%;
    height: 72%;
    margin-top: 40px;
    margin-left: 80px;
    border-bottom: solid 1px #c0c0c0;
}
.cos_header>div{
    width: 100%;
}
.cos_header>div>img{
    width: 20%;
    margin: 10px;
}
.cos_header>p{
    color: #4d4d4d;
    margin-bottom: 40px;
    font-size: 1.5rem;
    font-weight: 600;
   font-family: 'Nanum Gothic', sans-serif;
    text-align: center;
}
.cos>img{
    width:378px;
	float: left;
    margin-left: 12px;
}

.cos .t_box{
	float: left;
    position: absolute;
    left: 500px;
}
.cos .t_box .na{
	font-size: 1.5rem; /*24px*/
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}
.cos .t_box .pr{
	font-size: 1.5rem; /*24px*/
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}
.cos .t_box > span {
    font-size: 1rem; /*16px*/
    color: #888;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}
.cos .t_box .hash {
    font-family: 'Nanum Gothic', sans-serif;
    color: #aaaa99;
    font-weight: 600;
}

.cos button {
    width: 135px;
    height: 50px;
    border: 2.5px solid #000000;
    border-radius: 50px;
    font-family: 'Godo';
    font-weight: 700;
    font-size: 1.25rem;  /*20px*/
    background-color: #ffffff;
    position: absolute;
    left: 500px;
    top: 250px;
    cursor: pointer;}
	


/*--wallpaper--------------------------------------------------------*/
.con3 {
	width: 100%;
    display: none;
    padding-top: 150px;
    position: relative;
}


.con3 .mobile{
    width: 100%;
    height: auto;
}

.con3> p {
    width: 100%;
    height: auto;
    float: left;
    font-family: 'NEXON Lv1 Gothic OTF Bold';
    font-weight: normal;
    font-size: 2rem; /*46px*/
    margin-left: 87.5%;
}
.con3 .wall_btn{
    width: 8%;
    height: auto;
    float: right;
    position: relative;
}
.con3 .pbtn, .mbtn {
    border: none;
    border-radius: 0px 20px 20px 0px;
    cursor: pointer;
    position: absolute;
    left: -5px;
}

.con3 .pbtn {
    width: 40px;
    height: 80px;
    top: 0px;
    z-index: -2;
    border: 2.5px solid black;
    background-color: #fcc917;
}

.con3 .mbtn {
    width: 40px;
    height: 80px;
    top: 60px;
    z-index: -3;
    border: 2.5px solid black;
    background-color: #ffffff;
}
.con3 .mbtn>p{
    font-family: 'Godo';
    font-weight: 900;
    font-size: 14px;
    text-indent: -6px;
    transform: rotate(90deg);
}
.con3 .pbtn>p{
    font-family: 'Godo';
    font-weight: 900;
    font-size: 14px;
    text-align: center;
    transform: rotate(90deg);
}
.mbtn.active11{
    width: 40px;
    height: 80px;
    top: 60px;
    z-index: -1;
}
.pbtn.active12{
    width: 40px;
    height: 80px;
    top: 0px;
    z-index: -3;
}


.con3 .pc{
    width: 92%;
    height: auto;
    float: left;
    overflow: hidden;
}
.con3 .pc .pc-container {
     width: 33.3%;
    height: auto;
    display: inline-block;
    float: left;
    border: 0;
    cursor: pointer;
}
.con3 .pc .pc-container>img {
    width: 100%;
    height: auto;
    display: block;
}
.con3 .pc .pc-container:hover .pc-content-hover{
    display: block;
}
.con3 .pc .pc-container>img:hover{
    filter: grayscale(80%);
}
.con3 .pc .pc-content-hover{
    width: 100px;
    height: auto;
    padding: 1rem;
    background-color: #fff;
    font-weight: 400;
    border-radius: 20px;
    position: absolute;
    top:0;
    left: -480px;
    white-space: nowrap;
    display: none;
}

.title{
    color: #2e2e2e;
    font-size: 1rem;
    font-weight: 700;
}
.category{
    font-size: 0.5rem;
    color: #787878;
}
.pc-content{
    position: absolute;
    display: none;
}


.con3 .mobile{
    width: 92%;
    height: auto;
    float: left;
    overflow: hidden;
}
.con3 .mobile .pc-container {
     width: 33.3%;
    height: auto;
    display: inline-block;
    float: left;
    border: 0;
    cursor: pointer;
}
.con3 .mobile .pc-container>img {
    width: 100%;
    height: auto;
    display: block;
}
.con3 .mobile .pc-container:hover .pc-content-hover{
    display: block;
}
.con3 .mobile .pc-container>img:hover{
    filter: grayscale(80%);
}
.con3 .mobile .pc-content-hover{
    width: 100px;
    height: auto;
    padding: 1rem;
    background-color: #fff;
    font-weight: 400;
    border-radius: 20px;
    position: absolute;
    top:0;
    left: -480px;
    white-space: nowrap;
    display: none;
}



.active6 {
    background-color: #fcc917;
    border-radius: 50px;
}

.active7 {
    background-color: #ffffff;
    border-radius: 50px;
}

/*--medical--------------------------------------------------------*/

.con4 {
    width: 100%;
    height: auto;
    padding-top: 100px;
    display: none;
    /*    border: 1px solid blue;*/
}
.medi{
	width: 100%;
    height: 320px;
	position: relative;
	margin-top: 100px;
}
.medi>img{
    width:378px;
	float: left;
    margin-left: 12px;
}

.medi .t_box{
	float: left;
    position: absolute;
    left: 500px;
}
.medi .t_box .na{
	font-size: 1.5rem; /*24px*/
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}
.medi .t_box .pr{
	font-size: 1.5rem; /*24px*/
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}
.medi .t_box > span {
    font-size: 1rem; /*16px*/
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 600;
}

.medi button {
    width: 135px;
    height: 50px;
    border: 2.5px solid #000000;
    border-radius: 50px;
    font-family: 'Godo';
    font-weight: 700;
    font-size: 1.25rem;  /*20px*/
    background-color: #ffffff;
    position: absolute;
    left: 500px;
    top: 250px;
    cursor: pointer;
	text-decoration: line-through;
}


/*-----------------------------------------------------------aside*/
aside {
    width: 25%;
    height: auto;
    float: right;
    /*    border: 2px solid pink;*/
}


/*--wallpaper --------------------------------------------------------*/
.modal_calendar{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999999;
	background: rgba(0,0,0,0.8);
	display: none;
}
.modal_calendar>img{
	height: 100%;
	width: auto;
	float: left;
}
.modal_calendar-01>img{
	margin-left: 35%;
}
.modal_calendar-02>img{
	margin-left: 35%;
}
.modal_calendar-03>img{
	margin-left: 35%;
}
.modal_calendar-04>img{
	margin-left: 35%;
}
.modal_calendar-05>img{
	margin-left: 35%;
}
.modal_calendar-06>img{
	margin-left: 35%;
}
.modal_calendar-07>img{
	margin-left: 35%;
}
.modal_calendar-08>img{
	margin-left: 35%;
}
.modal_calendar-09>img{
	margin-left: 35%;
}
.modal_calendar-010>img{
	margin-left: 35%;
}
.modal_calendar-011>img{
	margin-left: 35%;
}
.modal_calendar-012>img{
	margin-left: 35%;
}
.modal_calendar .btn_box{
	width: 50px;
	height: 50px;
	background-color: #fff;
	float: left;
	display: block;
	margin-top: 20px;
}
.modal_calendar .btn_nemo{
	width: 50px;
	height: 50px;
	background-color: #fff;
	float: left;
	margin-bottom: 20px;
	cursor: pointer;
}
.modal_calendar .btn_d .fa-save{
	font-size: 30px;
	margin-top: 10px;
	margin-left: 10px;
}
.modal_calendar .btn_nemo>img{
	width: 30px;
	margin-top: 10px;
	margin-left: 10px;
}
.modal_calendar .btn_d:hover .fa-save{
	color: #fff;
}
.modal_calendar .btn_d:hover{
	background-color: darkorange;
}
.modal_calendar .btn_x:hover{
	background-color: darkorange;
}
.modal_calendar .btn_x:hover .xxx{
    display: block;	
}
.modal_calendar .btn_x:hover img{
    display: none;	
}
.modal_calendar .btn_x .xxx{
	position: absolute;
	display: none;
}

/*--wallpaper --------------------------------------------------------*/



/*-----------------------------------------------------------ebook modal*/
.modal_01{
    width: 77%;
    height: 100%;
    position: fixed;
    right: 0px;
    z-index: 99999;
    background-color: rgba(0,0,0,0.7);
    display: none;
}
.x_btn_01{
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 45%;
    margin-left: -50px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    background-color: #FAC5D0;
}
.x_btn_01>img{
    width: 30px;
    height: auto;
}
.modal_t_01{
    width: 500px;
    height: auto;
    margin-top: 200px;
    margin-left: 100px;
    font-size: 30px;
    font-family: 'Godo';
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.modal_01 .right{
    width: 100%;
    height: 100%;
    background-color: rrgba(0,0,0,0.56);
}
.modal_01 .right .slide{
    width: 750px;
    height: 700px;
    position: relative;
    top: -155px;
    left: 320px;
    overflow: hidden;
}

.modal_01 .right .imgslide{
    width: 2250px;
    height: auto;
    position: absolute;
    z-index: 9999;
}
.modal_01 .right .imgslide>li{
    float: left;
}
.modal_01 .right .imgslide>li>img{
    width: 750px;
    height: auto;
}
.modal_01 .right .slide .movebtn {
  width: 200px;
  color: #000000;
  top: 770px;
    left: 1400px;
  position: fixed;
  z-index: 999999;
  font-size: 60px;
}

.modal_01 .right .slide .movebtn .pre {
  float: left;
  margin-left: 10px;
}
.modal_01 .right .slide .movebtn .pre>img{
    width: 30px;
    height: auto;
}
.modal_01 .right .slide .movebtn .next {
  float: right;
  margin-right: 10px;
}
.modal_01 .right .slide .movebtn .next>img{
    width: 30px;
    height: auto;
}
/*---------------------------------------------*/

.modal_02{
    width: 80%;
    height: 100%;
    position: fixed;
    right: 0px;
    z-index: 99999;
    background-color: rgba(0,0,0,0.7);
    display: none;
}
.x_btn_02{
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 45%;
    margin-left: -50px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    background-color: #FDD52A;
}
.x_btn_02>img{
    width: 30px;
    height: auto;
}
.modal_t_02{
    width: 500px;
    height: auto;
    margin-top: 200px;
    margin-left: 100px;
    font-size: 30px;
    font-family: 'Godo';
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.modal_02 .right{
    width: 100%;
    height: 100%;
    background-color: rrgba(0,0,0,0.56);
}
.modal_02 .right .slide{
    width: 750px;
    height: 700px;
    position: relative;
    top: -155px;
    left: 320px;
    overflow: hidden;
}

.modal_02 .right .imgslide{
    width: 2250px;
    height: auto;
    position: absolute;
    z-index: 9999;
}
.modal_02 .right .imgslide>li{
    float: left;
}
.modal_02 .right .imgslide>li>img{
    width: 750px;
    height: auto;
}
.modal_02 .right .slide .movebtn {
  width: 200px;
  color: #000000;
  top: 770px;
    left: 1400px;
  position: fixed;
  z-index: 999999;
  font-size: 60px;
}

.modal_02 .right .slide .movebtn .pre {
  float: left;
  margin-left: 10px;
}
.modal_02 .right .slide .movebtn .pre>img{
    width: 30px;
    height: auto;
}
.modal_02 .right .slide .movebtn .next {
  float: right;
  margin-right: 10px;
}
.modal_02 .right .slide .movebtn .next>img{
    width: 30px;
    height: auto;
}

/*-----------------------------------------*/

.modal_03{
    width: 80%;
    height: 100%;
    position: fixed;
    right: 0px;
    z-index: 99999;
    background-color: rgba(0,0,0,0.7);
    display: none;
}
.x_btn_03{
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 45%;
    margin-left: -50px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    background-color: #569F37;
}
.x_btn_03>img{
    width: 30px;
    height: auto;
}
.modal_t_03{
    width: 500px;
    height: auto;
    margin-top: 200px;
    margin-left: 100px;
    font-size: 30px;
    font-family: 'Godo';
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.modal_03 .right{
    width: 100%;
    height: 100%;
    background-color: rrgba(0,0,0,0.56);
}
.modal_03 .right .slide{
    width: 750px;
    height: 700px;
    position: relative;
    top: -155px;
    left: 320px;
    overflow: hidden;
}

.modal_03 .right .imgslide{
    width: 2250px;
    height: auto;
    position: absolute;
    z-index: 9999;
}
.modal_03 .right .imgslide>li{
    float: left;
}
.modal_03 .right .imgslide>li>img{
    width: 750px;
    height: auto;
}
.modal_03 .right .slide .movebtn {
  width: 200px;
  color: #000000;
  top: 770px;
    left: 1400px;
  position: fixed;
  z-index: 999999;
  font-size: 60px;
}

.modal_03 .right .slide .movebtn .pre {
  float: left;
  margin-left: 10px;
}
.modal_03 .right .slide .movebtn .pre>img{
    width: 30px;
    height: auto;
}
.modal_03 .right .slide .movebtn .next {
  float: right;
  margin-right: 10px;
}
.modal_03 .right .slide .movebtn .next>img{
    width: 30px;
    height: auto;
}

/*--------------------------------------------*/
.modal_04{
    width: 80%;
    height: 100%;
    position: fixed;
    right: 0px;
    z-index: 99999;
    background-color: rgba(0,0,0,0.7);
    display: none;
}
.x_btn_04{
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 45%;
    margin-left: -50px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    background-color: #36255F;
}
.x_btn_04>img{
    width: 30px;
    height: auto;
}
.modal_t_04{
    width: 500px;
    height: auto;
    margin-top: 200px;
    margin-left: 100px;
    font-size: 30px;
    font-family: 'Godo';
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.modal_04 .right{
    width: 100%;
    height: 100%;
    background-color: rrgba(0,0,0,0.56);
}
.modal_04 .right .slide{
    width: 750px;
    height: 700px;
    position: relative;
    top: -155px;
    left: 320px;
    overflow: hidden;
}

.modal_04 .right .imgslide{
    width: 2250px;
    height: auto;
    position: absolute;
    z-index: 9999;
}
.modal_04 .right .imgslide>li{
    float: left;
}
.modal_04 .right .imgslide>li>img{
    width: 750px;
    height: auto;
}
.modal_04 .right .slide .movebtn {
  width: 200px;
  color: #000000;
  top: 770px;
    left: 1400px;
  position: fixed;
  z-index: 999999;
  font-size: 60px;
}

.modal_04 .right .slide .movebtn .pre {
  float: left;
  margin-left: 10px;
}
.modal_04 .right .slide .movebtn .pre>img{
    width: 30px;
    height: auto;
}
.modal_04 .right .slide .movebtn .next {
  float: right;
  margin-right: 10px;
}
.modal_04 .right .slide .movebtn .next>img{
    width: 30px;
    height: auto;
}

.logo_mobile{
	display: none;
}
.side_box{
	display: none;
}
.open{
	display: none;
}
/*-----------------------------------------------------------media*/
@media (max-width: 1280px){
	body {background: #880e4f;}
	html{font-size: 12px;}
}

	
	
	
@media (max-width: 1024px){
	body {background: #4a148c;}
  
}
	
	
	
	
@media (max-width: 960px){
	body {background: #311b92;}
	
}
	
	
	

@media (max-width: 768px){
/*	body {background: #4a148c;}*/
	body {background: #fff;
		  overflow-x: hidden;
	}
	.header{
		display: none;
	}
	aside{
		display: none;
	}
	.wbox{
		width: 100%;
		height: 190px;
		background: #fff;
		position: fixed;
		top: 0;
		z-index: 9999;
		display: block;
	}
	.logo_mobile{
		display: block;
		width: 35%;
		height: auto;
		float: left;
		position: fixed;
		z-index: 99999;
		margin-left: 5%;
		margin-top: -85px;
	}
	.logo_mobile>a{
		width: 100%;
		height: auto;
		display: block;
	}
	.logo_mobile>a>img{
		width: 100%;
		height: auto;
	}
	 .side_box{
        width: 200px;
        height: 100%;
        position: fixed;
        top: 0;
        right: -200px;
        z-index: 9999999;
        transition: 0.4s;
        background-color: #fff;
		display: block;
    }
    .side_box>ul{
        width: 100%;
        height: auto;
        position: absolute;
        top: 10%;
    }
    .side_box>ul>li{
        width: 100%;
        height: 30px;
        text-align: right;
        padding-right: 25%;
        font-size: 12PX;
    }
    .close{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 3%;
        right: 17%;
        z-index: 99999;
/*        background-color: forestgreen;*/
        cursor: pointer;
    }
    .side_box .line{
        width: 30px;
        height: 4px;
        margin-bottom: 5px;
        border-radius: 50px;
        background-color: #4f4f4f;
    }
    .side_box .line01{
        transform-origin: top left;
        transform: rotate(40deg);
    }
    .side_box .line02{
        background-color: rgba(0,0,0,0);
    }
    .side_box .line03{
        transform-origin: bottom left;
        transform: rotate(-40deg);
    }
    .open{
        width: 30px;
        height: 30px;
        position: fixed;
        top: 3%;
        right: 5%;
        z-index: 99999;
        cursor: pointer;
		display: block;
/*        background-color: hotpink;*/
    }
    .open .line{
        width: 25px;
        height: 4px;
        margin-bottom: 5px;
        border-radius: 50px;
        background-color: #4f4f4f;
    }
	
	
	.cen_box{
		width: 100%;
		height: auto;
		margin-top: 15%;
		margin-left: 0%;
	}
	.nav{
		width: 100%;
		height: 50px;
		position: absolute;
		background-color: rgba(0,0,0,0);
	}
	.nav>ul{
		width: 100%;
		left: 5%;
	}
	.nav>ul>li{
        width: 20%;
		height: 40px;
		border: 2.5px solid black;
		margin-right: 5px;
		font-size: 14px;
		line-height: 38px;
	}
  .nav .pro0{
		width: 20%;
	}
    .nav .pro1{
		width: 20%;
	}
    .nav .pro2{
		width: 20%;
	}
    .nav .pro4{
        width: 20%;
	}
	.nav .pro5{
        display: none;
	}
	
	.ex{
		width: 90%;
		height: 20px;
		margin-top: 80px;
		padding-left: 15px;
	}
	.ex>img{
		width: 20px;
		height: auto;
		margin-right: 5px;
		float: left;
	}
	.ex>p{
		font-size: 12px;
		line-height: 15px;
		
	}
    .con0{
        height: 700px;
    }
    .you {
        width: 100%;
        margin-top: -60px;
    }
    .you .skin img{ 
        width: 100%;
        padding-left:1%; 
        padding-right:1%;
    }
    .you a{width: 100%;}
    .you iframe{
        padding-left:1%; 
        padding-right:1%; 
        width: 100%;
        height: 170%;
    }
	
	.ebo{
		margin-bottom: 150px;
	}
	.ebo>img{
		width: 100%;
		margin-left: 0;
		
	}
	.ebo .t_box{
		top: 85%;
		left: 20%;
	}
	
	.ebo1{
		margin-top: -20px;
	}
	.ebo4{
		margin-bottom: 200px;
	}
	.store_btn>li{
		width: 85px;
		font-size: 12px;
		top: 80px;
	}
	.store_btn .btn_list{
		width: 85px;
		height: 140px;
		font-size: 10px;
		padding-top: 30px;
	}
	.store_btn .btn_list>li{
		margin-left: 0px;
	}
	.store_btn .btn_list img{
		width: 15px;
	}
	.ebo1 .store_btn>li{
		left: 21%;
	}
	.ebo2 .store_btn>li{
		top: 25px;
		left: 3%;
	}
	.ebo3 .store_btn>li{
		top: 25px;
		left: 3%;
	}
	.ebo4 .store_btn>li{
		left: 21%;
	}
	
	.look{
		display: none;
	}
	
/*------------------------------------------	*/
	.con2{
		width:100%;
		height: 500px;
	}
	.con2>img{
		width: auto;
		height: 100%;
		margin-left: -25px;
	}
/*------------------------------------------	*/
	.con3{
		padding-top: 100px;
	}
	.con3>p{
		font-size: 14px;
		margin-left: 280px;
	}
	.con3 .pbtn, .mbtn{
		border-radius: 0px 15px 15px 0px;
	}
	.con3 .pbtn{
		width: 30px;
		height: 60px;
	}
	.con3 .mbtn{
		width: 30px;
		height: 60px;
		top: 50px;
	}
	.con3 .pbtn>p{
		font-size: 12px;
	}
	.con3 .mbtn>p{
		font-size: 12px;
		text-indent: -9px;
	}
	.con3 .pc .pc-container{
		width: 50%;
	}
	
/*------------------------------------------	*/	
	.con4{
		width: 100%;
		height: auto;
	}
	.con4 .medi{
		width: 100%;
		height: 520px;
		margin-top: 0px;
	}
	.con4 .medi .t_box{
		left: 40px;
		top: 300px;
	}
	.con4 .medi>img{
		width: 80%;
		margin-left: 10%;
	}
	.con4 .medi button{
		width: 80px;
		height: 32px;
		border: 2.5px solid black;
		left: 220px;
		top: 357px;
		
	}
	.con4 .med2 button{
		top: 335px;
	}
}

	
	

@media (max-width: 576px){
	body {background: #fff;
		  overflow-x: hidden;
	}

	.header{
		display: none;
	}
	aside{
		display: none;
	}

	.wbox{
		width: 100%;
		height: 120px;
		background: #fff;
		position: fixed;
		top: 0;
		z-index: 9999;
		display: block;
	}
	.logo_mobile{
		display: block;
		width: 35%;
		height: auto;
		float: left;
		position: fixed;
		z-index: 99999;
		margin-left: 10%;
		margin-top: -35px;
	}
	.logo_mobile>a{
		width: 100%;
		height: auto;
		display: block;
	}
	.logo_mobile>a>img{
		width: 100%;
		height: auto;
	}
	 .side_box{
        width: 200px;
        height: 100%;
        position: fixed;
        top: 0;
        right: -200px;
        z-index: 9999999;
        transition: 0.4s;
        background-color: #fff;
		display: block;
    }
    .side_box>ul{
        width: 100%;
        height: auto;
        position: absolute;
        top: 10%;
    }
    .side_box>ul>li{
        width: 100%;
        height: 30px;
        text-align: right;
        padding-right: 25%;
        font-size: 12PX;
    }
    .close{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 3%;
        right: 17%;
        z-index: 99999;
/*        background-color: forestgreen;*/
        cursor: pointer;
    }
    .side_box .line{
        width: 30px;
        height: 4px;
        margin-bottom: 5px;
        border-radius: 50px;
        background-color: #4f4f4f;
    }
    .side_box .line01{
        transform-origin: top left;
        transform: rotate(40deg);
    }
    .side_box .line02{
        background-color: rgba(0,0,0,0);
    }
    .side_box .line03{
        transform-origin: bottom left;
        transform: rotate(-40deg);
    }
    .open{
        width: 30px;
        height: 30px;
        position: fixed;
        top: 3%;
        right: 10%;
        z-index: 99999;
        cursor: pointer;
		display: block;
/*        background-color: hotpink;*/
    }
    .open .line{
        width: 25px;
        height: 4px;
        margin-bottom: 5px;
        border-radius: 50px;
        background-color: #4f4f4f;
    }
	
	
	.cen_box{
		width: 100%;
		height: auto;
		margin-top: 15%;
		margin-left: 0%;
		padding-left: 2%;
		padding-right: 2%;
	}
	.nav{
		width: 90%;
		height: 50px;
		position: absolute;
		background-color: rgba(0,0,0,0);
	}
	.nav>ul{
		width: 90%;
		left: 5%;
	}
	.nav>ul>li{
		height: 30px;
		border: 2.5px solid black;
		margin-right: 5px;
		font-size: 10px;
		line-height: 25px;
	}
	.nav .pro5{
		width: 13%;
		font-size: 12px;
		position: fixed;
		top: 95px;
		right: -50px;
	}
	
	.ex{
		width: 90%;
		height: 20px;
		margin-top: 80px;
		padding-left: 15px;
	}
	.ex>img{
		width: 20px;
		height: auto;
		margin-right: 5px;
		float: left;
	}
	.ex>p{
		font-size: 12px;
		line-height: 15px;
	}
	
	.ebo{
		margin-bottom: 150px;
	}
	.ebo>img{
		width: 100%;
		margin-left: 0;
		
	}
	.ebo .t_box{
		top: 80%;
		left: 14%;
	}
	
	.ebo1{
		margin-top: -20px;
	}
	.ebo4{
		margin-bottom: 200px;
	}
	.store_btn>li{
		width: 85px;
		font-size: 12px;
		top: 80px;
	}
	.store_btn .btn_list{
		width: 85px;
		height: 140px;
		font-size: 10px;
		padding-top: 30px;
	}
	.store_btn .btn_list>li{
		margin-left: 0px;
	}
	.store_btn .btn_list img{
		width: 15px;
	}
	.ebo1 .store_btn>li{
		left: 12%;
	}
	.ebo2 .store_btn>li{
		top: 25px;
		left: -4%;
	}
	.ebo3 .store_btn>li{
		top: 25px;
		left: -4%;
	}
	.ebo4 .store_btn>li{
		left: 12%;
	}
	
	.look{
		display: none;
	}
	

/*------------------------------------------	*/
    
    
    .you iframe{
        padding-left:1%; 
        padding-right:5%; 
        width: 100%;
        height: 170%;
    }
    .cos_header{
        margin-left:65px;
    }
    .cos_header>div{
        width: 100%;
    }
    .cos_header>div>img{
        width: 35%;
    }
    
    
    .cos1>video{
        margin-left: 35px;
        margin-top: 0;
        width: 1%;
        padding-bottom: 40px;
            display:none;
        
    }
	.con2{
		width:100%;
		height: 600px;
	}
	.con2>img{
		width: auto;
		height: 100%;
		margin-left: -25px;
	}
    
    	.con2{
		width: 100%;
		height: auto;
	}
	.con2 .cos{
		width: 100%;
		height: 520px;
		margin-top: 0px;
	}
	.con2 .cos .t_box{
		left: 40px;
		top: 300px;
	}
	.con2 .cos>img{
		width: 80%;
		margin-left: 10%;
	}
	.con2 .cos button{
		width: 80px;
		height: 32px;
		border: 2.5px solid black;
		left: 220px;
		top: 357px;
		
	}
	.con4 .med2 button{
		top: 335px;
	}
/*------------------------------------------	*/
	.con3{
		padding-top: 100px;
	}
	.con3>p{
		font-size: 14px;
		margin-left: 280px;
	}
	.con3 .pbtn, .mbtn{
		border-radius: 0px 15px 15px 0px;
	}
	.con3 .pbtn{
		width: 30px;
		height: 60px;
	}
	.con3 .mbtn{
		width: 30px;
		height: 60px;
		top: 50px;
	}
	.con3 .pbtn>p{
		font-size: 12px;
	}
	.con3 .mbtn>p{
		font-size: 12px;
		text-indent: -9px;
	}
	.con3 .pc .pc-container{
		width: 50%;
	}
	
/*------------------------------------------	*/	
	.con4{
		width: 100%;
		height: auto;
	}
	.con4 .medi{
		width: 100%;
		height: 520px;
		margin-top: 0px;
	}
	.con4 .medi .t_box{
		left: 40px;
		top: 300px;
	}
	.con4 .medi>img{
		width: 80%;
		margin-left: 10%;
	}
	.con4 .medi button{
		width: 80px;
		height: 32px;
		border: 2.5px solid black;
		left: 220px;
		top: 357px;
		
	}
	.con4 .med2 button{
		top: 335px;
	}
}