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: 115%;
}
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_img2{
position: relative;
}
.yj_video{
position: absolute;
max-width: 2500px;
width: 82.5%;
height: 34.3%;
top: 19.7%;
left: 8.7%;
cursor: pointer;
}
.yj_video2{
position: absolute;
max-width: 2500px;
width: 82.5%;
height: 34.3%;
top: 57.7%;
left: 8.7%;
cursor: pointer;
}
.she_top{
position: absolute;
max-width: 2000px;
width: 80%;
height: 3%;
top: 63.5%;
left: 10%;
cursor: pointer;
}
.she_top1{
position: absolute;
max-width: 2000px;
width: 80%;
height: 3%;
top: 67.5%;
left: 10%;
cursor: pointer;
}
.she_top2{
position: absolute;
max-width: 2000px;
width: 80%;
height: 3%;
top: 71.5%;
left: 10%;
cursor: pointer;
}
.she_top3{
position: absolute;
max-width: 2000px;
width: 80%;
height: 3%;
top: 75.5%;
left: 10%;
cursor: pointer;
}
.she_school1{
position: absolute;
max-width: 2000px;
width: 19%;
height: 6%;
top: 81.7%;
left: 18%;
cursor: pointer;
}
.she_school2{
position: absolute;
max-width: 2000px;
width: 20%;
height: 6%;
top: 81.7%;
left: 40%;
cursor: pointer;
}
.she_school3{
position: absolute;
max-width: 2000px;
width: 20%;
height: 6%;
top: 81.7%;
left: 62%;
cursor: pointer;
}
.she_school4{
position: absolute;
max-width: 2000px;
width: 19%;
height: 6%;
top: 88.5%;
left: 18%;
cursor: pointer;
}
.she_school5{
position: absolute;
max-width: 2000px;
width: 19%;
height: 6%;
top: 88.5%;
left: 40%;
cursor: pointer;
}
.she_school6{
position: absolute;
max-width: 2000px;
width: 19%;
height: 6%;
top: 88.5%;
left: 62.5%;
cursor: pointer;
}
.she_home{
position: absolute;
max-width: 1800px;
width: 100%;
height: 15%;
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;
}
/* 경기관광고등학교 */
.kkgo_img{
position: relative;
}
.kkgo_video{
position: absolute;
max-width: 2500px;
width: 75%;
height: 30%;
top: 71%;
left: 10%;
cursor: pointer;
}
.kkgo_link1{
position: absolute;
max-width: 500px;
width: 14%;
height: 6%;
top: 39%;
left: 22%;
cursor: pointer;
}
.kkgo_link2{
position: absolute;
max-width: 500px;
width: 14%;
height: 6%;
top: 39%;
left: 43%;
cursor: pointer;
}
.kkgo_link3{
position: absolute;
max-width: 500px;
width: 15%;
height: 6%;
top: 39%;
left: 63%;
cursor: pointer;
}
.kkgo_qr1{
position: absolute;
max-width: 500px;
width: 14%;
height: 5%;
top: 47.5%;
left: 14%;
cursor: pointer;
}
.kkgo_qr2{
position: absolute;
max-width: 500px;
width: 14%;
height: 5%;
top: 47.5%;
left: 33%;
cursor: pointer;
}
.kkgo_qr3{
position: absolute;
max-width: 500px;
width: 14%;
height: 5%;
top: 47.5%;
left: 52.5%;
cursor: pointer;
}
.kkgo_qr4{
position: absolute;
max-width: 500px;
width: 14%;
height: 5%;
top: 47.5%;
left: 72%;
cursor: pointer;
}
.kkgo_intro_0{
position: absolute;
max-width: 800px;
width: 70%;
height: 32%;
top: 65%;
left: 15%;
cursor: pointer;
}
.kkgo_intro1{
position: relative;
max-width: 700px;
width: 90%;
height: 10%;
top: 7%;
left: 2%;
cursor: pointer;
}
.kkgo_intro2{
position: relative;
max-width: 700px;
width: 90%;
height: 10%;
top: 13%;
left: 2%;
cursor: pointer;
}
.kkgo_intro3{
position: relative;
max-width: 700px;
width: 90%;
height: 10%;
top: 18%;
left: 2%;
cursor: pointer;
}
.kkgo_intro4{
position: relative;
max-width: 700px;
width: 90%;
height: 10%;
top: 25%;
left: 2%;
cursor: pointer;
}
.kkgo_intro5{
position: relative;
max-width: 700px;
width: 90%;
height: 10%;
top: 31%;
left: 2%;
cursor: pointer;
}
.kkgo_intro6{
position: relative;
max-width: 700px;
width: 90%;
height: 10%;
top: 37%;
left: 2%;
cursor: pointer;
}
.kkgo_pop{
position: relative;
max-width: 1800px;
width: 100%;
height: 100%;
top: 70%;
left: 40%;
cursor: pointer;
}
.kkgo_top{
position: absolute;
max-width: 1500px;
width: 85%;
height: 5%;
top: 75%;
left: 8%;
cursor: pointer;
}
/* 여주 제일고등학교 */
.yjfirst_img{
position: relative;
}
.yjfirst_pop{
position: absolute;
max-width: 2500px;
width: 100%;
height: 100%;
top: 15%;
left: 5%;
cursor: pointer;
}
.yjfirst_video{
position: fixed;
max-width: 2500px;
width: 82%;
height: 78%;
top: 68%;
left: 9%;
cursor: pointer;
}
.yjfirst_home1{
position: absolute;
max-width: 500px;
width: 16%;
height: 7%;
top: 49%;
left: 21%;
cursor: pointer;
}
.yjfirst_home2{
position: absolute;
max-width: 500px;
width: 16%;
height: 7%;
top: 49%;
left: 42%;
cursor: pointer;
}
.yjfirst_home3{
position: absolute;
max-width: 500px;
width: 16%;
height: 7%;
top: 49%;
left: 62%;
cursor: pointer;
}
.yjfirst_top{
position: absolute;
max-width: 1500px;
width: 85%;
height: 5%;
top: 75%;
left: 8%;
cursor: pointer;
}
.yjfirst_intro {
position: absolute;
max-width: 2300px;
width: 67%;
height: 25%;
top: 70%;
left: 15%;
cursor: pointer;
}
.yjfirst_intro1 {
position: absolute;
max-width: 2300px;
width: 93%;
height: 15%;
top: 9%;
left: 3%;
cursor: pointer;
}
.yjfirst_intro2 {
position: absolute;
max-width: 2300px;
width: 93%;
height: 15%;
top: 33%;
left: 3%;
cursor: pointer;
}
.yjfirst_intro3 {
position: absolute;
max-width: 2300px;
width: 93%;
height: 15%;
top: 59%;
left: 3%;
cursor: pointer;
}
.yjfirst_intro4 {
position: absolute;
max-width: 2300px;
width: 93%;
height: 15%;
top: 83%;
left: 3%;
cursor: pointer;
}
.yjfirst_pro {
position: absolute;
max-width: 800px;
width: 41%;
height: 5%;
top: 84%;
left: 52%;
cursor: pointer;
}
.yjfirst_cata {
position: absolute;
max-width: 900px;
width: 84%;
height: 4%;
top: 91%;
left: 8%;
cursor: pointer;
}
.yjfirst_classes {
position: absolute;
max-width: 700px;
width: 70%;
height: 15%;
top: 60%;
left: 30%;
transform: translate(-50%, -60%);
}
/* 여주자영농업고등학교 */
.yjag_img{
position: relative;
}
.yjag_qr{
position: absolute;
max-width: 500px;
width: 16%;
height: 9%;
top: 55%;
left: 22%;
cursor: pointer;
}
.yjag_top{
position: absolute;
max-width: 1500px;
width: 85%;
height: 5%;
top: 75%;
left: 8%;
cursor: pointer;
}
.yjag_video{
position: fixed;
max-width: 2500px;
width: 82%;
height: 78%;
top: 54%;
left: 9%;
cursor: pointer;
}
.yjag_home{
position: absolute;
max-width: 1500px;
width: 17%;
height: 6%;
top: 42%;
left: 11%;
cursor: pointer;
}
.yjag_home2{
position: absolute;
max-width: 1500px;
width: 16%;
height: 6%;
top: 42%;
left: 32%;
cursor: pointer;
}
.yjag_home3{
position: absolute;
max-width: 1500px;
width: 16%;
height: 6%;
top: 42%;
left: 52%;
cursor: pointer;
}
.yjag_home4{
position: absolute;
max-width: 1500px;
width: 17%;
height: 6%;
top: 42%;
left: 72%;
cursor: pointer;
}
.yjag_intro {
position: absolute;
max-width: 2300px;
width: 80%;
height:40%;
top: 60%;
left: 8%;
cursor: pointer;
}
.yjag_intro1 {
position: absolute;
max-width: 2000px;
width: 80%;
height:10%;
top: 2%;
left: 10%;
cursor: pointer;
}
.yjag_intro2 {
position: absolute;
max-width: 2000px;
width: 80%;
height:10%;
top:16%;
left: 10%;
cursor: pointer;
}
.yjag_intro3 {
position: absolute;
max-width: 2000px;
width: 80%;
height:10%;
top: 29%;
left: 10%;
cursor: pointer;
}
.yjag_intro4 {
position: absolute;
max-width: 2000px;
width: 80%;
height:10%;
top: 42%;
left: 10%;
cursor: pointer;
}
.yjag_intro5 {
position: absolute;
max-width: 2000px;
width: 80%;
height:10%;
top: 55%;
left: 10%;
cursor: pointer;
}
.yjag_intro6 {
position: absolute;
max-width: 2000px;
width: 80%;
height:10%;
top: 68%;
left: 10%;
cursor: pointer;
}
.yjag_intro7 {
position: absolute;
max-width: 2000px;
width: 80%;
height:10%;
top: 82%;
left: 10%;
cursor: pointer;
}
.yjag_pro {
position: absolute;
max-width: 800px;
width: 41%;
height: 5%;
top: 84%;
left: 52%;
cursor: pointer;
}
.yjag_cata {
position: absolute;
max-width: 900px;
width: 84%;
height: 4%;
top: 91%;
left: 8%;
cursor: pointer;
}
.yjag_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;
}
/*모달*/
.kkgo_intro_modal,
.kkgo_1_modal,
.kkgo_2_modal,
.kkgo_3_modal,
.kkgo_4_modal,
.kkgo_5_modal{
position: absolute;
width: 100%;
height: 250%;
bottom: 2%;
background: rgba(0, 0, 0, 0.8);
display: none
}
.kkgo_6_modal{
position: absolute;
width: 100%;
height: 520%;
bottom: 2%;
background: rgba(0, 0, 0, 0.8);
display: none
}
.yjag_intro_modal,
.yjag_1_modal,
.yjag_2_modal,
.yjag_3_modal,
.yjag_4_modal,
.yjag_5_modal,
.yjag_6_modal,
.yjag_7_modal,
.yjag_8_modal{
position: absolute;
width: 100%;
height: 200%;
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
}
.yjfirst_intro_modal,
.yjfirst_1_modal{
position: absolute;
width: 100%;
height: 120%;
bottom: 2%;
background: rgba(0, 0, 0, 0.8);
display: none
}
.yjfirst_2_modal,
.yjfirst_3_modal,
.yjfirst_4_modal,
.yjfirst_5_modal{
position: absolute;
width: 100%;
height: 200%;
bottom: 2%;
background: rgba(0, 0, 0, 0.8);
display: none
}
.yjfirst_intro_modal_content,
.yjfirst_1_modal_content,
.yjfirst_2_modal_content,
.yjfirst_3_modal_content,
.yjfirst_4_modal_content,
.yjfirst_5_modal_content,
.kkgo_intro_modal_content,
.kkgo_1_modal_content,
.kkgo_2_modal_content,
.kkgo_3_modal_content,
.kkgo_4_modal_content,
.kkgo_5_modal_content,
.kkgo_6_modal_content,
.yjag_intro_modal_content,
.yjag_1_modal_content,
.yjag_2_modal_content,
.yjag_3_modal_content,
.yjag_4_modal_content,
.yjag_5_modal_content,
.yjag_6_modal_content,
.yjag_7_modal_content,
.yjag_8_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;
}