@charset "utf-8";

@import url("base.css");

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 공통 - UI 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#skip_navi {display:none;}
body.esis_bg {width:100%; height:100%; background-repeat:no-repeat; background-position:top center; background-size:cover; background-attachment: fixed; box-sizing:border-box;}

#wrapper {}
.base_width {margin:0 auto; width:1200px; position:relative;}
/* 데스크탑 */
@media all and (max-width:1200px){
    .base_width {width:100%;}
}

.header {margin-top:35px;}
.header .base_width {display:flex; justify-content:space-between; align-items:center;}

.slogon {padding-top:130px; text-align:center;  position:relative; z-index:1;}
@media all and (max-width:1200px){
    .header {margin:0 15px; margin-top:20px;}
    .header .logo img {height:45px}
    .slogon {margin:0 10%; padding-top:100px;}
}
@media all and (max-width:1024px){
    .slogon {margin:0 5%; padding-top:50px;}
}
@media all and (max-width:640px){
    .header .logo img {height:40px}
}

/* 유학생 서비스 바로가기 */
.service_list {padding:70px 0; position:relative; z-index:1;}
.service_list ul {overflow:hidden;}
.service_list ul li {float:left; width:25%; text-align: center; box-sizing:border-box; margin-bottom:20px;}
.service_list ul li a {}
.service_list ul li img {margin-bottom:10px; border:solid 5px #fff; border-radius:200px; max-width:100%;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);}
.service_list ul li strong {display:block; font-size:19px; color:#333; line-height:1.2; letter-spacing:-1px;
    word-break:keep-all;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;}
.service_list ul li strong span {display:block; font-size:16px; font-weight:normal;}

@media all and (max-width:1200px){
    .service_list {padding:70px 20px;}
    .service_list ul li img {width:80%;}
    .service_list ul li strong {font-size:18px;}
    .service_list ul li strong span {font-size:15px;}
}
@media all and (max-width:1024px){
    .service_list ul li {width:50%;}
    .service_list ul li img {width:50%;}

}
@media all and (max-width:640px){
    .service_list {padding:30px 20px;}
    .service_list ul li img {width:70%;}
    .service_list ul li strong {margin:0 10px; font-size:14px; height:50px;}
    .service_list ul li strong span {font-size:12px;}
}

.rolling_banner {margin:0 20px; position:relative; z-index:1;}
.rolling_banner h3 {padding-left:30px; font-size:22px; font-weight:normal; color:#333; line-height:1.2;
    word-break:keep-all;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;}
.banner_zone {margin-bottom:50px;}
.banner_rolling {padding:10px 50px; background-color:#fff; border-radius:100px; box-sizing:border-box;}
.banner_rolling .slick-initialized .slick-slide {display:flex; justify-content:center; align-items:center;}
.banner_rolling .outline {text-align:center;}
.banner_rolling .outline a {display:inline-block; line-height:60px;}

.banner_rolling .slick-dots {left:0; bottom:-30px; text-align:center;}
.banner_rolling .slick-dots li {margin:0; width:15px; height:15px;}
.banner_rolling .slick-dots li button:before {opacity:1; color:#cccccc; content:''; width:6px; height:6px; background-color:#ccc; border-radius:6px; transition: all 0.5s;}
.banner_rolling .slick-dots li.slick-active button:before {background-color:#ff9d2f;}

/* 테스크탑 */
@media all and (max-width:1200px){
    .banner_zone {margin:0 20px 50px;}
    .banner_rolling .outline a {margin:0 10px;}
}
/* 테블릿*/
@media all and (max-width:1024px){
    .rolling_banner h3 {font-size:20px;}
}
@media all and (max-width:768px){
    .rolling_banner h3 {font-size:18px;}
}
/* 모바일*/
@media all and (max-width:640px){
    .rolling_banner h3 {font-size:16px;}
}


.float_service_1 {position:absolute; top:265px; right:calc(50% - 850px); z-index:0;}
.float_service_2 {position:absolute; top:150px; right:calc(50% - 600px); z-index:0;}
.float_character {position:absolute; top:800px; right:0; overflow:hidden; z-index:0; text-align:right;}
.float_character img {position:relative; right:-40px;}

/* 테스크탑 */
@media all and (max-width:1600px){
    .float_character img {width:80%}
}
/* 테블릿*/
@media all and (max-width:1400px){
    .float_service_1,
    .float_character {display:none}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 Footer
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#footer {display:flex; justify-content:end; padding:30px 20px 20px; color:#333333;}

/* 데스크탑 */
@media all and (max-width:1200px){
}
/* 테블릿 */
@media all and (max-width:768px){
}
/* 모바일 */
@media all and (max-width:640px){
    #footer {font-size:12px;}
}

/* 언어선택 ////////////////////////////////// */
#google_translate_element {display:flex; align-items:center; gap:5px; margin-right:35%;}
#google_translate_element .goog-te-gadget-simple {
    background-color: #fff;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
}
#google_translate_element .translation {margin-top:5px; text-align:center;}

@media all and (max-width:1024px){
    #google_translate_element {margin-right:30%;}
}
@media all and (max-width:768px){
    #google_translate_element {margin-right:20%;}
}
/* 모바일*/
@media all and (max-width:640px){
    #google_translate_element {margin-right:13%;}
    #google_translate_element .translation {width:60px;}
}
@media all and (max-width:480px){
    #google_translate_element {flex-direction:column; flex-direction:column-reverse; gap:3px; margin-right:0;}
    /* #google_translate_element .translation {width:30px;} */
    #google_translate_element .translation {width:50px;}
}