﻿html {
	scroll-behavior: smooth;
}
body {
	margin:0;
	padding:0;
}
img {	
	display:block;
	margin:0 auto;
	outline:none;
	width:100%;
	max-width:1000px;
}
.center {
	text-align:center;
}
.link {
	margin:20px 0px 50px 0px;
	font-size:30px;	
}
.link a {
	text-decoration:none;
}
.mp4 {
	margin:0 auto;
	padding:10px 0px 20px 0px;
	width:100%;
	max-width:1000px;
	background-color:#334A96;
}
video {
	width:80%;
}

.video-container {
    position: relative;
    height: 0;

    padding-bottom: 56.25%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

table {
	margin:0 auto;
	outline:none;
	width:100%;
	max-width:1000px;
	background-color:#334A96;
}
table img {
	width:100%;
}
table td a img {
	width:100%;
}
.cursor {
	cursor:pointer;
}
#top {
	position:fixed;
	bottom:10px;
	right:10px;
	width:10%;
	min-width:30px;
	max-width:80px;		
}
#top img {
	background-color: #ffffff;
    opacity: 0.5;
    border-radius:50%;
  	-moz-border-radius: 50%;
  	-webkit-border-radius: 50%;   
}

.she {
   position: relative;
}

.kcs {
    position: relative;
}

.kds {
    position: relative;
}
    
.kcas {
    position: relative;
}
    
.yong {
    position: relative;
}


/*교육청 */

.she_img{
    position: relative;
}

.she_top{
    position: absolute;
    max-width: 2000px;
    width: 84%;
    height: 11%;
    top: 85%;
    left: 8%;
    cursor: pointer;


}

.she_home{
    position: absolute;
    max-width: 1800px;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
cursor: pointer;


}

.she_home2{
    position: absolute;
    max-width: 1800px;
    width: 100%;
    height: 13%;
    top: 25%;
    left: 0%;
cursor: pointer;

}

.she_top .she_sch1{
    position: absolute;
    width: 20%;
    height: 25%;
    top: 70%;
    left: 5%;
    cursor: pointer;

}

.she_top .she_sch2{
    position: absolute;
    width: 22%;
    height: 25%;
    top: 70%;
    left: 28%;
    cursor: pointer;

}

.she_top .she_sch3{
    position: absolute;
    width: 22%;
    height: 25%;
    top: 70%;
    left: 51%;
    cursor: pointer;

}

.she_top .she_sch4{
    position: absolute;
    width: 22%;
    height: 25%;
    top: 70%;
    left: 75%;
    cursor: pointer;

}

.she_mid{
    position: absolute;
    max-width: 2000px;
    width: 82%;
    height: 19%;
    top: 49%;
    left: 9%;
    cursor: pointer;

}

.she_m01{
    position: absolute;
    max-width: 1800px;
    width: 30%;
    height: 48%;
    top: 0%;
    left: 0%;
cursor: pointer;

}

.she_m02{
    position: absolute;
    max-width: 1800px;
    width: 34%;
    height: 48%;
    top: 0%;
    left: 33%;
cursor: pointer;

}

.she_m03{
    position: absolute;
    max-width: 1800px;
    width: 30%;
    height: 48%;
    top: 0%;
    left: 70%;
cursor: pointer;

}
.she_m04{
    position: absolute;
    max-width: 1800px;
    width: 30%;
    height: 48%;
    top: 50%;
    left: 21%;
cursor: pointer;

}
.she_m05{
    position: absolute;
    max-width: 1800px;
    width: 30%;
    height: 48%;
    top: 50%;
    left: 54%;
cursor: pointer;

}

.she_map{
    position: absolute;
    max-width: 2000px;
    width: 82%;
    height: 37%;
    top: 18%;
    left: 9%;
    cursor: pointer;

}


.she_btm{
    position: absolute;
    max-width: 2000px;
    width: 50%;
    height: 20%;
    top: 75%;
    left: 25%;
    cursor: pointer;

}

.she_b01{
    position: absolute;
    max-width: 800px;
    width: 30%;
    height: 52%;
    top: 10%;
    left: 9%;
cursor: pointer;

}

.she_b02{
    position: absolute;
    max-width: 800px;
    width: 30%;
    height: 52%;
    top: 10%;
    left: 60%;
cursor: pointer;

}

.she_b03{
    position: absolute;
    max-width: 700px;
    width: 100%;
    height: 17%;
    top: 83%;
    left: 0%;
cursor: pointer;

}

.she_top .she_call,
.she_top .she_location{
    float: left;
    width: 33.33333%;
    height: 10%;
    cursor: pointer;
}



/* 경기자동차고등학교 */

.kcs_img{
    position: relative;
}

.kcs_qr{
    position: absolute;
    max-width: 500px;
    width: 16%;
    height: 9%;
    top: 55%;
    left: 22%;
    cursor: pointer;

}

.kcs_pop{
    position: relative;
    max-width: 1800px;

    width: 100%;
    height: 100%;
    top: 70%;
    left: 40%;
    cursor: pointer;

    border:1px solid green;

}

.kcs_top{
    position: absolute;
    max-width: 1500px;
    width: 85%;
    height: 5%;
    top: 75%;
    left: 8%;
    cursor: pointer;

}

.kcs_home{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 0%;
cursor: pointer;

}

.kcs_home2{
    position: absolute;
    max-width: 800px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 51%;
    cursor: pointer;

}

.kcs_intro {
    position: absolute;
    max-width: 2000px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 8%;

    cursor: pointer;

}

.kcs_pro {
    position: absolute;
    max-width: 800px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 52%;
   cursor: pointer;

}

.kcs_cata {
    position: absolute;
    max-width: 900px;
    width: 84%;
    height: 4%;
    top: 91%;
    left: 8%;
   cursor: pointer;

}

.kcs_home3{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 30%;
    top: 0%;
    left: 0%;
cursor: pointer;
}


.kcs_classes {
    position: absolute;
    max-width: 700px;
    width: 70%;
    height: 15%;
    top: 60%;
    left: 30%;
    transform: translate(-50%, -60%);  

}



/* 군자 디지털 고등학교 */

.kds_img{
    position: relative;
}

.kds_pop{
    position: absolute;
    max-width: 2500px;
    width: 100%;
    height: 100%;
    top: 15%;
    left: 5%;
    cursor: pointer;
}

.kds_video{
    position: fixed;
    max-width: 2500px;
    width: 82%;
    height: 78%;
    top: 68%;
    left: 9%;
    cursor: pointer;
}

.kds_qr{
    position: absolute;
    max-width: 500px;
    width: 16%;
    height: 9%;
    top: 55%;
    left: 22%;
    cursor: pointer;

}

.kds_top{
    position: absolute;
    max-width: 1500px;
    width: 85%;
    height: 5%;
    top: 75%;
    left: 8%;
    cursor: pointer;

}

.kds_home{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 0%;
    cursor: pointer;

}

.kds_home2{
    position: absolute;
    max-width: 800px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 51%;
    cursor: pointer;

}

.kds_intro {
    position: absolute;
    max-width: 2300px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 8%;
    cursor: pointer;

}

.kds_pro {
    position: absolute;
    max-width: 800px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 52%;
    cursor: pointer;
}

.kds_cata {
    position: absolute;
    max-width: 900px;
    width: 84%;
    height: 4%;
    top: 91%;
    left: 8%;
    cursor: pointer;
}


.kds_home3{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 30%;
    top: 0%;
    left: 0%;
    cursor: pointer;

}


.kds_classes {
    position: absolute;
    max-width: 700px;
    width: 70%;
    height: 15%;
    top: 60%;
    left: 30%;
    transform: translate(-50%, -60%);  

}



/* 한국조리과학고등학교 */

.kcas_img{
    position: relative;
}

.kcas_qr{
    position: absolute;
    max-width: 500px;
    width: 16%;
    height: 9%;
    top: 55%;
    left: 22%;
    cursor: pointer;

}


.kcas_top{
    position: absolute;
    max-width: 1500px;
    width: 85%;
    height: 5%;
    top: 75%;
    left: 8%;
    cursor: pointer;
}

.kcas_video{
    position: fixed;
    max-width: 2500px;
    width: 82%;
    height: 78%;
    top: 54%;
    left: 9%;
    cursor: pointer;
    boerder: 1px solid red;
}


.kcas_home{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 0%;
    cursor: pointer;
}

.kcas_home2{
    position: absolute;
    max-width: 800px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 51%;
    cursor: pointer;
}

.kcas_intro {
    position: absolute;
    max-width: 2300px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 8%;
    cursor: pointer;
}

.kcas_pro {
    position: absolute;
    max-width: 800px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 52%;
    cursor: pointer;
}

.kcas_cata {
    position: absolute;
    max-width: 900px;
    width: 84%;
    height: 4%;
    top: 91%;
    left: 8%;
   cursor: pointer;
}

.kcas_home3{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 30%;
    top: 0%;
    left: 0%;
    cursor: pointer;
}


.kcas_classes {
    position: absolute;
    max-width: 700px;
    width: 70%;
    height: 15%;
    top: 60%;
    left: 30%;
    transform: translate(-50%, -60%);  
}

/* 시흥교육청 */
.she_intro {
    position: absolute;
    max-width: 550px;
    width: 50%;
    height: 3%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    cursor: pointer;
}

.she_classes {
    position: absolute;
    max-width: 720px;
    width: 80%;
    height: 15%;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -51%);

    
}
.she_classes .she_classes_1 {
    float: left;
    width: 25%;
    height: 50%;
    margin-top: 16%;
    cursor: pointer;
}

.she_classes .she_classes_2 {
    float: left;
    width: 25%;
    height: 50%;
    margin-top: 6%;
    cursor: pointer;
}

.she_classes .she_classes_3 {
    float: left;
    width: 25%;
    height: 50%;
    margin-top: 6%;
    cursor: pointer;
}

.she_classes .she_classes_4 {
    float: left;
    width: 25%;
    height: 50%;
    margin-top: 16%;
    cursor: pointer;
}

.she_qr_con {
    position: absolute;
    top: 77%;
    left: 50%;
    transform: translate(-50%, -77%);
    max-width: 700px;
    width: 70%;
    height: 20%;
}

.she_qr {
    float: right;
    max-width: 200px;
    width: 20%;
    height: 100%;
    cursor: pointer;
}

.she_pro {
    position: absolute;
    top: 96%;
    left: 50%;
    transform: translate(-50%, -92%);
    width: 60%;
    height: 4%;
    max-width: 600px;
    cursor: pointer;
}


/*경기스마트고*/

.ksh_img{
    position: relative;
}

.ksh_pop{
    position: absolute;
    max-width: 2500px;
    width: 100%;
    height: 100%;
    top: 20%;
    left: 0;
    cursor: pointer;
}

.ksh_qr{
    position: absolute;
    max-width: 500px;
    width: 15%;
    height: 9%;
    top: 55%;
    left: 22%;
    cursor: pointer;
}

.ksh_qr2{
    position: absolute;
    max-width: 500px;
    width: 15%;
    height: 9%;
    top: 55%;
    left: 38%;
    cursor: pointer;
}

.ksh_qr3{
    position: absolute;
    max-width: 500px;
    width: 15%;
    height: 9%;
    top: 55%;
    left: 54%;
    cursor: pointer;
}

.ksh_top{
    position: absolute;
    max-width: 1500px;
    width: 85%;
    height: 5%;
    top: 75%;
    left: 8%;
    cursor: pointer;
}

.ksh_home{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 0%;
    cursor: pointer;
}

.ksh_home2{
    position: absolute;
    max-width: 800px;
    width: 48%;
    height: 100%;
    top: 0%;
    left: 51%;
    cursor: pointer;
}

.ksh_intro {
    position: absolute;
    max-width: 2300px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 8%;
    cursor: pointer;
}

.ksh_pro {
    position: absolute;
    max-width: 800px;
    width: 41%;
    height: 5%;
    top: 84%;
    left: 52%;
   cursor: pointer;
}

.ksh_cata {
    position: absolute;
    max-width: 900px;
    width: 84%;
    height: 4%;
    top: 91%;
    left: 8%;
    cursor: pointer;

}

.ksh_home3{
    position: absolute;
    max-width: 1500px;
    width: 48%;
    height: 30%;
    top: 0%;
    left: 0%;
    cursor: pointer;
}


.ksh_classes {
    position: absolute;
    max-width: 700px;
    width: 70%;
    height: 15%;
    top: 60%;
    left: 30%;
    transform: translate(-50%, -60%);  

}


/*백암고*/

.baek_top {
    position: absolute;
    max-width: 550px;
    width: 55%;
    height: 7%;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -22%);
    
}

.kcs_top .kcs_call,
.kcs_top .kcs_location{
    float: left;
    width: 33.33333%;
    height: 100%;
    cursor: pointer;
}



.kcs_classes {
    position: absolute;
    max-width: 700px;
    width: 70%;
    height: 15%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%);  

}
.kcs_classes .kcs_classes_1 {
    float: left;
    width: 33.33333%;
    height: 50%;
    margin-top: 11%;
    cursor: pointer;
}

.kcs_prog {
    position: absolute;
    top: 96%;
    left: 50%;
    transform: translate(-50%, -96%);
    width: 60%;
    height: 5%;
    max-width: 600px;
    cursor: pointer;
}





/*모달*/
.kcs_intro_modal,
.kcs_1_modal,
.kcs_2_modal{
    position: absolute;
    width: 100%;
    height: 100%;

    bottom: 2%;

    background: rgba(0, 0, 0, 0.8);
    display: none

}

.kcas_intro_modal,
.kcas_1_modal,
.kcas_2_modal{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 2%;
    background: rgba(0, 0, 0, 0.8);
    display: none
}

.ksh_intro_modal,
.ksh_1_modal,
.ksh_2_modal{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 2%;
    background: rgba(0, 0, 0, 0.8);
    display: none
}

.kds_intro_modal,
.kds_1_modal,
.kds_2_modal{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 2%;
    background: rgba(0, 0, 0, 0.8);
    display: none
}

.kds_intro_modal_content,
.kds_1_modal_content,
.kds_2_modal_content,
.kds_3_modal_content,
.kds_4_modal_content,
.kds_5_modal_content,
.kcs_intro_modal_content,
.kcs_1_modal_content,
.kcs_2_modal_content,
.kcas_intro_modal_content,
.kcas_1_modal_content,
.kcas_2_modal_content,
.ksh_intro_modal_content,
.ksh_1_modal_content,
.ksh_2_modal_content{
    width: 100%;

    max-width: 800px;
    background-color: white;
    border-radius: 5px;
    position: absolute;

    left: 50%;
    transform: translate(-50%, 30%);
    box-sizing: border-box;
    cursor: pointer;
}