@charset "utf-8";
@font-face {
    font-family: 'Jeongseon-Arirang-Root';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/JSArirangPPURI-RegularA1.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BonmyeongjoSourceHanSerif';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* 학교장인사말 */
.intro01{word-break: keep-all;background: url(../images/intro/intro01_bg.png)right bottom no-repeat;}
.intro01 .title{position: relative;width: 100%;margin-bottom: 30px;padding: 30px 10px 34px 50px;box-sizing: border-box;font-size: 18px;color: #ececec;background: #004589 url(../images/intro/intro01_titbg.png)left top repeat-y;border-radius: 10px; line-height: 22px;}
.intro01 .title::after{content: "";display: block;position: absolute;width: 454px;height: 243px;top: 30px;right: 25px;background: url(../images/intro/intro01_img2.png)left top no-repeat;}

.intro01 .title .en{font-size: 15px;font-weight: 600;color: #396a9a;text-transform: capitalize;}
.intro01 .title .tit1{display: block;font-size: 30px;color: #fff;font-weight: bold;line-height: 60px;}

.intro01 .txt{font-size: 17px;color: #444;line-height: 30px;padding-left: 15px;}
.intro01 .txt.t1{position: relative;margin-bottom: 20px; padding-bottom: 20px;box-sizing: border-box;border-bottom: 1px dashed #ddd;}
.intro01 .txt.t1::after{content: "Gwangju Girls' Commercial High School";display: block;position: absolute;font-size: 20px;color: #e9e9e9;font-weight: bold;right: 0;bottom: 10px;}

.intro01 .date{font-size: 17px;color: #555;font-weight: 500;padding: 10px 20px 0 0;}
.intro01 .name{font-size: 19px;color: #333;text-align: end;font-weight: 600;padding: 0 20px 0 0;box-sizing: border-box;word-break:keep-all;}
.intro01 .name span{font-family: 'BonmyeongjoSourceHanSerif';font-size: 35px;font-weight: bold;margin-left: 10px;font-weight: normal;}



/* 학교연혁 */
.intro02 .title{position: relative;margin-top: 30px; padding: 25px 50px;box-sizing: border-box;font-size: 25px;font-weight: bold;line-height: 30px; color: #fff;background: url(../images/intro/intro02_titbg.png)left top no-repeat;}
.intro02 .title::after{content: "";display: block;position: absolute;width: 92px;height: 118px;bottom: -15px;right: 50px;background: url(../images/intro/intro02_ic01.png)left top no-repeat;}
.intro02 .title span{font-size: 17px;font-weight: 400;}

.intro02 div.tabcontent{display: none;}
.intro02 div.tabcontent.on{display: block;}

/* 교훈,상징,교가 */
.intro04 .title{padding: 35px 10px;box-sizing: border-box;text-align: center;font-size: 25px;color: #333;background: url(../images/intro/intro04_bg.png)left top no-repeat;}
.intro04 .title .tit1{ display: block; font-size: 25px;font-weight: bold; margin-bottom: 15px;
background: linear-gradient(0deg, #6575ef, #273b92);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.intro04 .title .tit1 .en{display: block;font-size: 15px;font-weight: 500;text-transform: uppercase;}

.intro04 .sim_box{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin-top: 40px;}
.intro04 .sim_box .left{position: relative;width: 108px;padding: 15px 5px;border-radius: 0 20px 20px 20px;font-size: 20px;color: #fff;font-weight: bold;text-align: center;background: linear-gradient(90deg, #2e7092, #2e3192);}
.intro04 .sim_box .left::before{content: "";display: block;position: absolute;width: 73px;height: 17px;top: 17px;right: -73px;background: url(../images/intro/intro04_dot.png)left top no-repeat;}
.intro04 .sim_box .box{position: relative;width: 100%;max-width: 860px;}

.intro04 .sim_box .box1{position: relative;border-radius: 0 20px 20px 20px;border: 1px solid #ddd;padding: 50px 70px;box-sizing: border-box;font-size: 22px;color: #2e3192;}
.intro04 .sim_box .box1::after{content: "gwangju girls' commercial high school";display: block;position: absolute;right: 30px;bottom: 10px; font-size: 20px;font-weight: 500; color: #d8d8d8;text-transform: uppercase;}

.intro04 .sim_box .box2{padding-top: 10px;}
.intro04 .sim_box .box2 .ic{display: flex;justify-content: space-between;align-items: end;margin-bottom: 30px;}
.intro04 .sim_box .box2 .ic .img{width: 100%;max-width: 310px;}
.intro04 .sim_box .box2 .ic .img > p{margin-bottom: 10px;font-size: 19px;font-weight: bold;color: #7b59c8;}
.intro04 .sim_box .box2 .ic .img > p span{display: inline-block;width: 104px;height: 40px;margin-right: 10px;border-radius: 0 20px 20px 20px;text-align: center;font-size: 18px;color: #fff;line-height: 40px;background: #7b59c8;}

.intro04 .sim_box .box2 .ic1 .img > p{color: #7b59c8;}
.intro04 .sim_box .box2 .ic1 .img > p span{background: #7b59c8;}
.intro04 .sim_box .box2 .ic2 .img > p{color: #00aeef;}
.intro04 .sim_box .box2 .ic2 .img > p span{background: #00aeef;}
.intro04 .sim_box .box2 .ic3 .img > p{color: #0b8455;}
.intro04 .sim_box .box2 .ic3 .img > p span{background: #0b8455;}

.intro04 .sim_box .box2 .ic .img > dl{border-radius: 0 20px 20px 20px;overflow: hidden;}
.intro04 .sim_box .box2 .ic .img > dl dt{width: 100%;height: 170px;}
.intro04 .sim_box .box2 .ic .img > dl dd{padding: 10px 10px;box-sizing: border-box;text-align: center;font-size: 17px;font-weight: 500;color: #fff;background: #7b59c8;}

.intro04 .sim_box .box2 .ic1 .img dl dd{background: #7b59c8;}
.intro04 .sim_box .box2 .ic2 .img dl dd{background: #00aeef;}
.intro04 .sim_box .box2 .ic3 .img dl dd{background: #0b8455;}

.intro04 .sim_box .box2 .ic .txt{width: calc(100% - 330px);margin-top: 20px;padding: 50px 20px;box-sizing: border-box;border-bottom: 1px solid #7b59c8;font-size: 17px;color: #333;line-height: 23px;background: #f5f5f5;}

.intro04 .sim_box .box2 .ic1 .txt{border-bottom: 1px solid #7b59c8;background: #f5f5f5 url(../images/intro/intro04_ic01.png)right 20px bottom 10px no-repeat;}
.intro04 .sim_box .box2 .ic2 .txt{border-bottom: 1px solid #00aeef;background: #f5f5f5 url(../images/intro/intro04_ic02.png)right 20px bottom 10px no-repeat;}
.intro04 .sim_box .box2 .ic3 .txt{border-bottom: 1px solid #0b8455;background: #f5f5f5 url(../images/intro/intro04_ic03.png)right 20px bottom 10px no-repeat;}

.intro04 .sim_box .box3 ul li{position: relative;display: flex;margin-bottom: 35px;padding: 25px 10px 25px 130px;box-sizing: border-box;border-radius: 0 20px 20px 20px;border: 1px solid #ddd;box-sizing: border-box;background: #f3effd;}
.intro04 .sim_box .box3 ul li dl{position: absolute;width: 110px;top: -28px;left: 10px;text-align: center;color: #7b59c8;}
.intro04 .sim_box .box3 ul li dl dt{width: 60px;height: 60px;margin: 0 auto 5px;border-radius: 50%;background: url(../images/intro/intro04_g_ic01.png)center center no-repeat, linear-gradient(115deg, #fff, #bfa7f4); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
.intro04 .sim_box .box3 ul li dl dd{font-size: 18px;font-weight: bold;}
.intro04 .sim_box .box3 ul li p{padding-left: 30px;box-sizing: border-box;font-size: 17px;color: #333;line-height: 20px;word-break: keep-all;border-left: 1px dashed #bebebe;}

.intro04 .sim_box .box3 ul li:nth-child(even){background: #fbeffd;}
.intro04 .sim_box .box3 ul li:nth-child(even) dl{color: #da60ee;}

.intro04 .sim_box .box3 ul li.ic1 dl dt{background: url(../images/intro/intro04_g_ic01.png)center center no-repeat, linear-gradient(115deg, #fff, #bfa7f4);}
.intro04 .sim_box .box3 ul li.ic2 dl dt{background: url(../images/intro/intro04_g_ic02.png)center center no-repeat, linear-gradient(115deg, #fff, #f2a6ff);}
.intro04 .sim_box .box3 ul li.ic3 dl dt{background: url(../images/intro/intro04_g_ic03.png)center center no-repeat, linear-gradient(115deg, #fff, #bfa7f4);}
.intro04 .sim_box .box3 ul li.ic4 dl dt{background: url(../images/intro/intro04_g_ic04.png)center center no-repeat, linear-gradient(115deg, #fff, #f2a6ff);}
.intro04 .sim_box .box3 ul li.ic5 dl dt{background: url(../images/intro/intro04_g_ic05.png)center center no-repeat, linear-gradient(115deg, #fff, #bfa7f4);}
.intro04 .sim_box .box3 ul li.ic6 dl dt{background: url(../images/intro/intro04_g_ic06.png)center center no-repeat, linear-gradient(115deg, #fff, #f2a6ff);}
.intro04 .sim_box .box3 ul li.ic7 dl dt{background: url(../images/intro/intro04_g_ic07.png)center center no-repeat, linear-gradient(115deg, #fff, #bfa7f4);}

.intro04 .sim_box .box4 .song_tit{display: flex;justify-content: space-between;padding: 15px 25px;border-radius: 0 20px 20px 20px;background: #6266e2;}
.intro04 .sim_box .box4 .song_tit > span{padding-left: 30px;background: url(../images/intro/intro04_s_ic01.png)left center no-repeat;font-size: 22px;font-weight: bold;color: #fff;line-height: 30px;}
.intro04 .sim_box .box4 .play_btn{position: relative;width: 220px;}
.intro04 .sim_box .box4 .play_btn::after{content: "";display: block;clear: both;}
.intro04 .sim_box .box4 .play_btn dt{float: left;padding-left: 30px;font-size: 18px;font-weight: bold;color: #fff;line-height: 30px; background: url(../images/intro/intro04_s_ic02.png)left center no-repeat;}
.intro04 .sim_box .box4 .play_btn dd{float: right;}
.intro04 .sim_box .box4 .play_btn dd .s_bt{display: flex;gap: 5px;}
.intro04 .sim_box .box4 .play_btn dd .s_bt li a{display: block;width: 30px;height: 30px;border-radius: 50%; background: #fff;text-indent: -99999px;}
.intro04 .sim_box .box4 .play_btn dd .s_bt .bt1 a{background: #fff url(../images/intro/intro04_s_nav01.png)center center no-repeat;}
.intro04 .sim_box .box4 .play_btn dd .s_bt .bt2 a{background: #fff url(../images/intro/intro04_s_nav02.png)center center no-repeat;}
.intro04 .sim_box .box4 .play_btn dd .s_bt .bt3 a{background: #fff url(../images/intro/intro04_s_nav03.png)center center no-repeat;}

.intro04 .sim_box .box4 .s_box{display: flex;justify-content: space-between;padding: 10px 0;border-bottom: 2px solid #6266e2;}
.intro04 .sim_box .box4 .s_box .songImg{width: calc(50% - 10px);padding: 30px 10px;box-sizing: border-box;border: 1px solid #ddd;text-align: center;}
.intro04 .sim_box .box4 .s_box .songImg img{width: 100%;max-width: 274px;}
.intro04 .sim_box .box4 .s_box .s_txt{width: calc(50% - 10px);padding: 25px 10px;box-sizing: border-box;font-size: 16px;color: #333;text-align: center;background: #f3f3ff url(../images/intro/intro04_songBg.png)left bottom no-repeat;}
.intro04 .sim_box .box4 .s_box .s_txt .t1{font-size: 20px;font-weight: bold;margin-bottom: 20px;}
.intro04 .sim_box .box4 .s_box .s_txt li dl dt{width: 60px;margin: 0 auto 5px; padding: 3px 10px;box-sizing: border-box; border-radius: 50px;font-size: 16px;font-weight: 500;color: #fff;background: #6266e2;}
.intro04 .sim_box .box4 .s_box .s_txt li dl dd{line-height: 30px;}

.intro04 .sim_box .box4 .s_box .s_txt .s1{margin-bottom: 10px;}

/* 이사장인사말 */
.intro10_01 .tit_box{padding-top: 30px;margin-bottom: 30px;}
.intro10_01 .tit_box .sub_title{margin-bottom: 20px;}
.intro10_01 .tit_box .sub_title .sub{font-size: 20px;color: #333;padding: 0 20px 0 25px;background: url(../images/intro/intro10_01_titdot.png) left center no-repeat;}
.intro10_01 .tit_box .sub_title .sub.s1{padding-left: 0;background: none;}

.intro10_01 .tit_box .sub_title .sub span{position: relative;font-family: 'BonmyeongjoSourceHanSerif';font-size: 26px;padding: 15px 0 0 10px;box-sizing: border-box;}
.intro10_01 .tit_box .sub_title .sub.s1 span{color: #7b59c8;background: url(../images/intro/intro10_01_img01.png)left top 5px no-repeat;}
.intro10_01 .tit_box .sub_title .sub.s2 span{color: #00a6f3;background: url(../images/intro/intro10_01_img02.png)left top 5px no-repeat;}
.intro10_01 .tit_box .sub_title .sub.s3 span{color: #e75383;background: url(../images/intro/intro10_01_img03.png)left top 5px no-repeat;}

.intro10_01 .tit_box .title{position: relative;padding: 40px 35px 40px 50px;box-sizing: border-box; font-size: 20px;color: #fff;word-break: keep-all;line-height: 30px;background: #533469 url(../images/intro/intro10_01_titbg.png)left top repeat-y;border-radius: 10px;}
.intro10_01 .tit_box .title::after{content: "";display: block;position: absolute;width: 307px;height: 377px;right: 21px;top: 22px;background:  url(../images/intro/intro10_01_img04.png)left top no-repeat;}

.intro10_01 .tit_box .title span{position: relative;display: block;font-size: 25px;font-weight: bold;line-height: 50px;}

.intro10_01 .tit_box .title .c1{background: #00aeef;color: #fff;}

.intro10_01 .txt{font-size: 17px;color: #444;line-height: 30px;}

.intro10_01 .name{padding: 25px 0 0 0;box-sizing: border-box;font-family: 'BonmyeongjoSourceHanSerif';font-size: 28px;text-align: end;color: #333;}

.intro10_01 .bt{display: flex;flex-wrap: wrap;gap: 33px;margin-top: 50px;}
.intro10_01 .bt li{width: 245px;font-size: 16px;}
.intro10_01 .bt li a{display: block;width: 100%;padding: 10px 30px 10px 20px;box-sizing: border-box;color: #555;border: 2px solid #ddd; background: #fff url(../images/intro/intro10_01_arrow.png)right 20px center no-repeat; transition: background 0.3s;}
.intro10_01 .bt li a:hover{font-weight: bold; background: #fff url(../images/intro/intro10_01_arrow.png)right 15px center no-repeat;}

/* 입학안내 */
.entrance01 p.eje_title2 {font-weight: bold;font-size: 20px;}

/* 학과안내 */
.entrance_pic{position: relative;padding: 50px 20px 60px 45px;box-sizing: border-box;font-size: 18px;color: #bdbdbd;font-weight: bold;background: #f4f7ff url(../images/entrance/entrance02_bg.png)right -35px center no-repeat;}
.entrance_pic .tit{position: relative;display: inline-block;padding: 30px 80px 10px 0;margin-bottom: 10px;font-size: 35px;color: #333;line-height: 35px;word-break: keep-all;}
.entrance_pic .majorImg{position: absolute;right:10px;top: 20px;}

.ent_pic1 .tit{background: url(../images/entrance/entrance02_ic01.png)right top no-repeat;}
.ent_pic2 .tit{background: url(../images/entrance/entrance02_ic02.png)right top no-repeat;}
.ent_pic3 .tit{background: url(../images/entrance/entrance02_ic03.png)right top no-repeat;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@ 이용안내 @@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* 사이트맵 */
.sitemap {position:relative;float:left;display:inline;width:100%;padding:5px 0 20px 0;}
.sitemap dl {float:left;width:48%; box-sizing:border-box; padding:0 0 25px 0; border-radius:15px 0 0 0;margin:0 1% 20px;border:1px solid #ddd; background-color:#f9f9f9;}
.sitemap dl dt {font-size:18px; padding:10px 0 10px 15px; background:#fff; border-bottom:1px solid #ddd; border-radius:15px 0 0 0; margin-bottom:10px;}
.sitemap dl dt a{color:#7b59c8; font-weight:bold; padding:5px 0 0 0; }
.sitemap dl dt a:hover {color:#00a6f3;}
.sitemap dl dd { clear:both;font-size:14px; font-weight:bold; padding:7px 0 6px 30px;background:url(../images/help/dt_dot01.gif) 20px 14px no-repeat;}
.sitemap dl dd a {color:#555555;}
.sitemap dl dd a:hover {text-decoration:underline;  }
.sitemap dl dd ul {display:block; clear:both;padding:7px 0 7px 13px; margin:10px 30px 10px 0; background-color:#fff;border:1px dashed #ccc; border-radius:3px;}
.sitemap dl dd ul li {display:inline-block; width:50%;margin:0; font-size:12px;  }
.sitemap dl dd ul li a {display:block; color:#737373; padding:0 0 0 5px; line-height:21px;}
.sitemap dl dd ul li a:hover {text-decoration:underline; color:#ee5861;}

/*오시는 길*/
.customoverlay {position:relative;bottom: 80px;border-radius:6px;border:1px solid #ccc; border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden; background:#e6bf50 url(../images/intro/arrow_white.png) 128px center no-repeat;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:8px 15px;font-size:14px;font-weight:bold; text-transform: uppercase;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px; background:url(../images/intro/vertex_white.png) left top no-repeat;}



/* ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● 반응형 ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● */
@media all and (max-width:1024px) {

/* 학교장인사말 */
.intro01 .title{padding: 10px 15px 30px 15px;border-radius: 10px;font-size: 15px;}
.intro01 .title .en{font-size: 11px;}
.intro01 .title .tit1{font-size: 25px;line-height: 50px;}
.intro01 .title::after{content: none;}
.intro01 .txt.t1::after{content: none;}

.intro01 .txt{padding-left: 0;}

/* 학교연혁 */
.intro02 .title{padding: 25px 20px;font-size: 20px;line-height: 20px;}
.intro02 .title::after{content: none;}
.intro02 .title span{font-size: 10px;}

/* 교훈,상징,교가 */
.intro04 .title{padding: 20px 10px;font-size: 20px;word-break: keep-all;}
.intro04 .sim_box .left{margin-bottom: 10px;}
.intro04 .sim_box .left::before{content: none;}

.intro04 .sim_box .box1{padding: 30px 20px;text-align: center;}
.intro04 .sim_box .box1::after{content: none;}

.intro04 .sim_box .box2 .ic{flex-direction: column;align-items: center;}
.intro04 .sim_box .box2 .ic3{margin-bottom: 0;}
.intro04 .sim_box .box2 .ic .txt{width: 100%;}
.intro04 .sim_box .box2 .ic .img > p span{border-radius: 20px;}

.intro04 .sim_box .box3{padding-top: 30px;}
.intro04 .sim_box .box3 ul li:last-child{margin-bottom: 0;}

.intro04 .sim_box .box4 .song_tit{flex-direction: column;align-items: center;}
.intro04 .sim_box .box4 .song_tit > span{margin-bottom: 10px;}
.intro04 .sim_box .box4 .s_box{flex-direction: column;align-items: center;}
.intro04 .sim_box .box4 .s_box .songImg{width: 100%;margin-bottom: 10px;}
.intro04 .sim_box .box4 .s_box .s_txt{width: 100%;}

/* 이사장인사말 */
.intro10_01 .tit_box .title{padding: 30px 15px;font-size: 18px;}
.intro10_01 .tit_box .title span{font-size: 25px;line-height: 35px;}
.intro10_01 .tit_box .title::after{content: none;}
.intro10_01 .tit_box .sub_title{text-align: center;}
.intro10_01 .tit_box .sub_title .sub{line-height: 40px;word-break: keep-all;padding: 0 10px 0 15px;}
.intro10_01 .txt{background:#fff;}
.intro10_01 .name{font-size: 25px;}

.intro10_01 .bt{gap: 10px;}

/* 학과안내 */
.entrance_pic{padding: 35px 25px;background: #f4f7ff url(../images/entrance/entrance02_bg.png) right -35px bottom no-repeat;}
.entrance_pic .majorImg{text-align: center;position: relative;right: auto;}
.entrance_pic .majorImg img{width: 100%; max-width: 315px;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@ 이용안내 @@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* 사이트맵 */
.sitemap {width:94%; margin:0 3%;}
.sitemap dl dd ul li {display:inline-block; width:90%;margin:0; font-size:12px;  }
.sitemap dl { width:98%; }


}


/* ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● 반응형 (모바일추가) ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● */
@media all and (max-width:768px) {



}
@media all and (max-width:532px) {
    .intro10_01 .bt li{width: 100%;}


}