@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;700;900&display=swap');

* { margin: 0; padding: 0; line-height: 1; text-decoration: none;}
li { list-style: none;}
img { display: block; height: 100%; image-rendering: -webkit-optimize-contrast}
.clearfix:after { display: block; content: ''; clear: both;}
.flex { display: flex!important;}
.flex-sb { justify-content: space-between;}
input[type='file'] { display: none;}
button {display: block; width: 100%; cursor: pointer; border: 0; color: #fff;}
:focus { outline: 0;}
.mgb10 { margin-bottom: 10px;}
.mgr10 { margin-right: 10px;}

body { font-family: 'Chivo','Noto Sans kr', sans-serif;}

#academy-wrap { max-width: 1920px; margin: 0 auto; background: url(/academy/images/front/snu-bg.png) no-repeat center top ; padding: 0 20px; box-sizing: border-box;}

.dotted { position: relative;}
.dotted:after { display: block; content: ''; width: 4px; height: 4px; background-color: #d70507; border-radius: 50%; position: absolute; top: -4px; right: -9px;}
.box-shadow { box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);}

.content1 { max-width: 1200px; margin: 0 auto; padding: 40px 90px 90px; background: url(/academy/images/front/snu-bg2.png) no-repeat center top / cover; box-sizing: border-box; color: #fff; position: relative;}
.snu-logo { margin-bottom: 70px;}
.academy-tit { font-size: 48px; font-weight: 500; margin-bottom: 35px; position: relative;}
.inquiry { position: absolute; right:0; bottom: -8px; width: 170px; height: 60px; line-height:60px; font-size:14px; font-weight:bold; background-color: #4c43bb; text-align:center; display:block; color:#fff;}
.inquiry span { padding-left: 21px; background: url(/academy/images/front/apply-icon.png) no-repeat left center;}
.academy-desc { font-size: 14px;}
.academy-desc span:nth-child(2) { float: right;}
.academy-desc span:nth-child(2).dotted:after { right: auto; left: -9px;}

.academy-infoDate { width: calc(100% - 100px); position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); display: flex; color: #6688ff; font-size: 14px;}
.academy-infoDate div { padding: 30px 25px;}
.academy-infoDate .academy-info { background-color: #001970; width: 60%; padding-left: 40px;}
.academy-infoDate .academy-date { background-color: #132e8a; width: 40%;}
.academy-infoDate .academy-icon { margin-bottom: 5px;}
.academy-infoDate p[class*=desc] { line-height: 1.5;}
.academy-infoDate .academy-date-desc b { color: #fff; display: block; line-height: 1.5;}

.content2 { padding-top: 110px; max-width: 1020px; margin: 0 auto;}

.form-dl { font-size: 13px; margin-bottom: 38px;}
.form-dl dt { font-weight: 500; color: #999999; line-height: 1; margin-bottom: 10px;}
.form-dl dd {position: relative;}
.form-dl dd input, .form-dl dd select , .form-dl dd button { font-family: inherit; font-size: 13px; color: #000000; height: 40px; line-height: 38px; border: 1px solid #e0e0e0; background-color: #f8f8f8; padding: 0 10px; box-sizing: border-box; width: 100%;}
.form-dl dd input::placeholder { color: #bbb;}
.form-dl dd select { background-image: url(/academy/images/front/select-icon.png); background-position: calc(100% - 9px) center; background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.form-dl dd textarea { resize: none; border: 1px solid #e0e0e0; background-color: #f8f8f8; padding: 12px 10px; line-height: 1.3; box-sizing: border-box; font-size: 13px; color: #bbb; font-family: inherit; margin-bottom: 9px; height: 140px; width: 100%;}
.form-dl dd textarea::placeholder { color: #bbb;}
/* .form-dl dd .privacy { border: 1px solid #e0e0e0; background-color: #f8f8f8; padding: 12px 10px; line-height: 1.3; box-sizing: border-box; font-size: 13px; color: #bbb; overflow:auto; margin-bottom: 10px; height: 140px; width: 100%;} */
.form-dl dd.button input { padding-right: 80px; }
.form-dl dd button { position: absolute; right: 0; top: 0; width: 70px; background-color: #ccc; color: #888; border-color: #888;}
.form-dl .info { font-size: 11px; color: #999999; padding-left: 15px; background: url(/academy/images/front/info-icon2.png) no-repeat left top;}
.content2 .submit { line-height: 70px; height: 70px; font-size: 18px; font-weight: bold; background-color: #001970; border: 0;   margin-bottom: 40px;}
.content2 .submit span { padding-left: 26px; background: url(/academy/images/front/submit-icon.png) no-repeat left center; display: inline-block; padding-top: 4px;}
.form-dl input[type="checkbox"] { width:10px; height:10px;}
.form-dl label { font-size: 11px; color: #999999; }
.form-dl input.red { color:#ca1919;}

.privacy-table { margin-bottom: 10px;}
.privacy-table .tbody { border:1px solid #e0e0e0; background-color: #f8f8f8; color: #bbb; font-size: 13px;}
.privacy-table .tr { display:flex;}
.privacy-table .tr > * { flex:1 1; text-align: center; border-right:1px solid #e0e0e0;}
.privacy-table .tr > *:last-child { border-right: 0;}
.privacy-table .tr .th { border-bottom:1px solid #e0e0e0; line-height:25px;}
.privacy-table .tr .td { padding: 15px 10px; display:flex; align-items: center;}
.privacy-table .tr .td span { display: block; width:100%; line-height:1.4;}

.content2 .box1 .form-dl:nth-child(1) { width: 48%;}
.content2 .box1 .form-dl:nth-child(2) { width: 21.6%;}
.content2 .box1 .form-dl:nth-child(3) { width: 22.6%;}
.content2 .box2 .form-dl:nth-child(1) { width: 21.6%;}
.content2 .box2 .form-dl:nth-child(2) { width: 74.5%;}
.content2 .box3 .form-dl:nth-child(1) { width: 21.6%;}
.content2 .box3 .form-dl:nth-child(2) { width: 22.6%;}
.content2 .box3 .form-dl:nth-child(3) { width: 48%;}
.content2 .box4 .form-dl { width: 48%;}
.content2 .box5 .form-dl:nth-child(1) { width: 74.5%;}
.content2 .box5 .form-dl:nth-child(2) { width: 21.6%;}

.footer { max-width: 1020px; margin: 0 auto; display: flex; justify-content: space-between; padding-bottom: 30px;}
.footer .copy { font-size: 11px; color: #999; line-height: 1.7;}

.popup-box { position: fixed; width: 100%; height: 100%; /*background-color: rgba(0, 25, 112, 0.8);*/  left: 0; top: 0;}
.popup-cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 310px; box-sizing: border-box; background-color: #fff;}
.pop-tit { color: #001970; height: 60px; border-bottom: 3px solid #001970; line-height: 59px; padding: 0 30px; position: relative; font-weight: 500; font-size: 18px;}
.pop-tit .pop-close { position: absolute; right: 30px; top: 50%; margin-top: -8px; cursor: pointer;}
.pop-form { padding: 20px 30px;}
.pop-form .form-dl { margin-bottom:20px;}
.pop-form .form-dl:last-child { margin-bottom:0;}
/*.popup-cont .pop-list { padding: 25px 30px; background-color: #e5e5e5; }
.popup-cont .pop-list li { float: left; border: 1px solid #576ebe; height: 35px; line-height: 35px; box-sizing: border-box;}
.popup-cont .pop-list li:nth-child(1) { background-color: #fff; font-size: 12px; padding: 0 10px; width: calc(100% - 70px);}
.popup-cont .pop-list button { background-color: #576ebe; height: 100%; width: 68px; font-size: 12px;}*/
.popup-cont button { background-color: #001970; font-size: 14px; line-height: 60px; height: 60px; }
.popup-cont button span { background: no-repeat left center; }
.popup-cont .search span { padding-left: 21px; background-image: url(/academy/images/front/search-icon.png); }
.popup-cont .close span { padding-left: 18px; background-image: url(/academy/images/front/close-icon-w.png); }


@media screen and (max-width:1024px) {
    #academy-wrap { background-size: cover}

    .snu-logo { margin-bottom: 35px; height: 40px;}
    .academy-tit { font-size: 36px;}
    .inquiry { font-size: 12px; width:140px; height:50px; line-height:50px;}
    .inquiry span { background-size: 13px; padding-left: 18px;}

    .content1 { padding: 30px 50px 50px;}

    .academy-infoDate { font-size: 12px; bottom: -50px; width: calc(100% - 40px);}
    .academy-infoDate .academy-icon { height: 15px;}
    .academy-infoDate .academy-info, .academy-infoDate .academy-date { padding: 15px 20px;}

    .content2 { padding-top: 80px;}

    .content2 .submit { height: 60px; line-height: 60px; font-size: 16px; margin-bottom: 30px;}
    .content2 .submit span { background-size: 13px; padding-top: 3px;}

    .form-dl { margin-bottom: 25px;}
}

@media screen and (max-width:850px) {
	.content1 { padding: 25px 20px 0;}
    .academy-infoDate .academy-info, .academy-infoDate .academy-date { width: 100%;}
    .academy-infoDate { position: static; transform: translateX(0); width: 100% ; margin-left: -20px; margin-top: 20px; font-size: 11px; display: block;}
	.academy-infoDate .academy-info, .academy-infoDate .academy-date { width: 100%; display: flex;}
    .academy-infoDate .academy-icon { height: 11px; margin-bottom: 0; margin-right: 10px; margin-top: 1px}
    .academy-infoDate .academy-info .academy-icon { margin-top: 2px}
    .academy-infoDate .academy-info br { display: none;}
    .academy-infoDate .academy-date .academy-date-desc { display: flex;}
    .academy-infoDate .academy-date .academy-date-desc span {line-height: 1.5;}
    .academy-infoDate .academy-date-desc b {  margin-left: 10px;}
}

@media screen and (max-width:768px) {
    #academy-wrap { background-size: auto;}

    .dotted:after { width: 3px; height: 3px; top: -3px; right: -6px;}

    .academy-tit { font-size: 28px; margin-bottom: 25px;}
    .academy-desc {font-size: 13px;}
    .academy-desc span:nth-child(2).dotted:after { left: -6px;}

    .content2 { padding-top: 30px;}

    .content2 .flex { flex-wrap: wrap;}
    .content2 .form-dl { width: 100%!important;}
    .form-dl { font-size: 12px; margin-bottom: 20px;}
    .form-dl dd input, .form-dl dd select, .form-dl dd button { height: 35px; line-height: 35px; font-size: 12px;}
    .form-dl dd textarea, .form-dl dd .privacy { height: 100px; font-size:12px;}

    .privacy-table .tbody { font-size: 12px;}

    .content2 .submit { height: 50px; line-height: 50px; font-size: 13px;}

    .pop-tit { font-size: 14px; height: 41px; line-height: 39px; border-bottom-width: 2px}
    .pop-tit .pop-close { height: 14px; }
    .pop-tit .pop-close img { height: 100%; }
    .popup-cont .pop-list { padding: 15px 20px;}
    .popup-cont button { line-height: 45px; height: 45px; padding-left:16px;}
}

@media screen and (max-width:550px) {
    .academy-desc span:nth-child(2) { float: none; display: block; margin-top: 15px; margin-left: 6px;}

    .inquiry { position: static; width: 120px; height:40px; line-height:40px; font-size: 11px; margin-top: 15px; }
    .inquiry span { background-size: 11px;}

    .footer { display: block; text-align: center; padding-bottom: 15px;}
    .footer .copy { font-size: 10px;}
    .snu-flogo img { margin: 10px auto;}
}