@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root{
    /* Color */
    --c-text01 :#000000;
    --c-text02 :#333333;
    --c-text03 :#666666;
    --c-text04 :#999999;

    /* Typography */
    --f-display :2.7rem; /* 54px */
    --f-fontSize01 :2rem; /* 40px */
    --f-fontSize02 :1.6rem; /* 32px */
    --f-fontSize03 :1.3rem; /* 26px */
    --f-fontSize04 :1.1rem; /* 22px */
    --f-fontSize05 :1rem; /* 20px */
    --f-body1 :0.9rem; /* 18px */
    --f-body2 :0.8rem; /* 16px */
    --f-detail :0.7rem; /* 14px */

    /* Shadows */
    --s-shadow-neutral01 :0px 4px 10px 0px rgba(0, 0, 0, 0.12);
    --s-shadow-neutral02 :0px 8px 20px 0px rgba(0, 0, 0, 0.12);
    --s-shadow-neutral03 :0px 14px 40px 0px rgba(0, 0, 0, 0.14);
    --s-shadow-blue01 :0px 4px 10px 0px #EBEFF4;
    --s-shadow-blue02 :0px 8px 20px 0px #EBEFF4;
    --s-shadow-blue03 :0px 14px 40px 0px #EBEFF4;

    /* Radius */
    --r-radius01:12px;
    --r-radius02:24px;
    --r-radius03:9999999px;
}
html,body * {font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; box-sizing: border-box;}
html,body {
     min-height:100%;margin:0;
    font-size: 20px;
    scroll-behavior: smooth;
/*   박람회 종료시 활성화  */
   /* height: 100vh;
   overflow: hidden; */
/*  //종료  */
}
@media screen and (max-width:1100px) {
    html,body {font-size:19px;}
}
@media screen and (max-width:1000px) {
    html,body {font-size:18px;}
}
@media screen and (max-width:900px) {
    html,body {font-size:17px;}
}
@media screen and (max-width:800px) {
    html,body {font-size:16px;}
}
@media screen and (max-width:700px) {
    html,body {font-size:15px;}
}
@media screen and (max-width:600px) {
    html,body {font-size:14px;}
}
@media screen and (max-width:500px) {
    html,body {font-size:13px;}
}

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select {margin:0;padding:0;}
header,footer,section,article,aside,nav,menu,figure,figcaption {display:block;margin:0;padding:0;}
ul,ol {list-style:none;}
img,fieldset {margin:0;padding:0;border:0;vertical-align:middle;}
input,select,button {vertical-align:middle;}
em,address,i,cite {font-style:normal;}
a {text-decoration:none;color:inherit;}
.fixWrap {width:100%;max-width:1080px;margin:0 auto;}
*[class^="mo-"] {display:none;}
legend, caption{
    overflow: hidden;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
}

@media only screen and (max-width: 1080px) {
      .fixWrap {  max-width: 100% ; padding: 0 2.8vw; box-sizing: border-box;}
} 

@media only screen and (max-width: 780px){
    *[class^="pc-"] {display:none;}
    *[class^="mo-"] {display:inline-block;}
} 

/******************************************
    header
*******************************************/
.header {position:relative;width:94%;max-width:1080px;margin:0 auto; display: flex;justify-content: space-between; align-items: center;}
.header:before {content:"";display:block;width:300%;height:1px;position:absolute;top:88spx;left:-100%;}
.header .header-link {display: flex;align-items: center;justify-content: center; width: 243px; height: 63px;}
.header h1 {width:243px;aspect-ratio: 243 / 32 ;margin: 0;text-indent:-9999px;overflow:hidden;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/logo/logo.svg') no-repeat center center; background-size: contain;cursor:pointer;}
.header .nav-area {display:inline-block;width:100%;}

.headerWrap {position:absolute;top:0px;left:0;display:inline-block;width:100%;height:auto;padding:0px 0;z-index:1000;background:none;overflow:hidden;transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;}
.headerWrap:before {content:"";display:block;width:100%;height:0;position:absolute;top:100px;left:0;background:rgba(255,255,255,0.5);transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.headerWrap.mobile {display:none;}

.header .nav-area .navigation {display:flex;justify-content:flex-end;justify-items:center;gap:20px;width:100%;box-sizing:border-box;padding:20px 0;text-align: right}
.header .nav-area .navigation > li {width:13.15%;max-width:110px;position:relative;text-align:center;vertical-align:top;}
.header .nav-area .navigation > li > a {position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;line-height:26px;/*padding:20px 0;*/padding:10px 0;}
.header .nav-area .navigation > li > a > span {font-size: 16px;}
.header .nav-area .navigation > li.active a {font-weight: 700;}
.header .nav-area .navigation > li a.request{margin:4px 0;padding:0;border-bottom:0 none;}
.header .nav-area .navigation > li a.request span{background-color:#000;color:#fff;width:104px;height:40px;padding:0;border-radius:9999px;display:inline-block;font-weight:700;line-height:40px;}
.header .nav-area .navigation > li a.request:hover span {color:#fff; }

.pc .header .nav-area .navigation > li:hover > a:before {width:100%;left:0;/*transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;*/}
.mobile .header .nav-area .navigation > li > a > span.select:before {width:100%;left:0;transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;}
.mobile .header .nav-area .navigation > li > a > span:before {bottom:5px;}

.headerWrap.open {background:#fff;transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;}
.headerWrap.open:before {height:100%;background:rgba(255,255,255,1);transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;}
.headerWrap.open .header:before {background:rgba(0,0,0,0.1);}
.headerWrap.open .header .nav-area .navigation > li > a {color:#333;transition: color 0.3s;font-weight:400; box-sizing: border-box;}
.headerWrap.open .header .nav-area .navigation > li.hideLink{display: block;}
.headerWrap.open.pc .header .nav-area .navigation > li:hover > a {font-weight:700;color:#1EC95B;}
.headerWrap.open.mobile .header .nav-area .navigation {overflow-y:auto;height: calc(100vh - 20px - 10vw);border-top:1px solid #E4E8F1;margin-top: 0;padding:0;}
.headerWrap.open.mobile .header .nav-area .navigation > li {max-width:initial;min-height:54px;margin-left:0;border-bottom:1px solid #E4E8F1;}
.headerWrap.open.mobile .header .nav-area .navigation > li > a {display:block;width:100%;height:54px;padding:0;font-size:15px;font-weight:400;line-height:54px;color:#000;}
.headerWrap.open.mobile .header .nav-area .navigation > li > a:focus {outline:none;}
.headerWrap.open.mobile .header .nav-area .navigation > li > a > span {display:block;position:relative;width:100%;height:100%;font-size:15px;}
.headerWrap.open.mobile .header .nav-area .navigation > li > a > span.select {font-weight:700;color:#1EC95B;}
.headerWrap.open.mobile .header .nav-area .navigation > li > a > span.select:after {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/main/navIconUp.svg")}

.headerWrap {position:fixed;top:0px;left:0;border-bottom:1px solid #E4E8F1;background:#fff;}
.headerWrap.pc {height:88px;padding:0;border-bottom:0;transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;background:transparent;}
.headerWrap.pc:before {position: absolute; top: 0; left: 0; display:block; width: 100%; height: 88px; background:rgba(255,255,255,0.6); backdrop-filter:blur(40px);}
.headerWrap.pc .header {z-index:1;}
.headerWrap.pc .header .nav-area .navigation > li:last-child {max-width:104px;margin-left:22px;}
.headerWrap.pc .header .nav-area .navigation > li > a {white-space:nowrap;color:#000;/*transition:all 0.3s;font-weight:bold; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;*/}
.headerWrap.pc.open {border-bottom:1px solid #E4E8F1;}
.headerWrap.pc:after {position:absolute;top:87px;left:0;width:100%;height:1px;background-color:#fff;content:"";}

@media only screen and (max-width: 640px){
    .header-banner-area {display:none;}
}

@media only screen and (min-width: 769px){
    .mNav-point {display:none;}
}
@media only screen and (max-width: 860px){ 
    .header .header-link {width: 200px;height:52px;}
    .header .nav-area .navigation > li > a {font-size: 16px;}
}
@media only screen and (max-width: 768px){
    .header .header-link {height: auto; width: 176px; margin:0; text-align: left;}
    .headerWrap.pc {display:none;}
    .headerWrap.mobile {display:block;height:60px;padding:0;}
    .header h1 {width: 176px; margin-right: auto;}
    .header:before {display:none;}
    .headerWrap.mobile .header {display: block;width:100%;padding:0;box-sizing:border-box;}
    .headerWrap.mobile .header .header-link {height:60px;margin-left:20px;}

    .header .mobile-top{position: relative;}
    .header .toggle-btn {display: inline-block;position:absolute;top:20px;right:18px;width:20px;height:20px;padding:2px;box-sizing:border-box;}
    .header .mNav-toggle {display:block;width:16px;height:2px;position:absolute;top:50%;right:2px;transform: translateY(-50%);border-radius: 9999px;background:#000;text-indent:-999px;transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
    .header .mNav-toggle:before {content:"";display:block;width:16px;height:2px;position:absolute;top:-5px;left:0;border-radius: 9999px;background:#000;transition:all 0.3s; -webkit-transition:all 0.3s;}
    .header .mNav-toggle:after {content:"";display:block;width:16px;height:2px;position:absolute;top:5px;left:0;border-radius: 9999px;background:#000;transition:all 0.3s; -webkit-transition:all 0.3s;}

    .header .nav-area{height: 39px; position: relative;}
    .header .nav-area .navigation{display: block; overflow-x: auto; margin: 0; padding: 0 20px; display: flex; gap: 20px; /*justify-content: space-between;*/ justify-content: normal; white-space: nowrap;}
    .header .nav-area .navigation > li {width: auto;}
    .header .nav-area .navigation > li.hideLink{display: none;}
    .header .nav-area .navigation > li a {display:inline-block;width:auto;font-size:150%; padding: 8px 0 7px;}
    .header .nav-area .navigation > li.active a {font-weight: 400;}

    .headerWrap.open {position:fixed;width:100%;height:100%;border-bottom:0 none;}
    .headerWrap.open .header:before {display:block;width:50%;height:100%;position:fixed;bottom:0;right:0;top:auto;left:auto;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/nav_bg.png') bottom right no-repeat;background-size:100%;}

    .headerWrap.open .header .nav-area .navigation > li{width: 100%;}
    .headerWrap.open .header .mNav-toggle {background:#fff;}
    .headerWrap.open .header .mNav-toggle:before {background:#333;transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); top:0;transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
    .headerWrap.open .header .mNav-toggle:after {background:#333;transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); top:0;transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
    .headerWrap.open .header .nav-area .navigation {display:block;}
    .headerWrap.open.mobile .header .nav-area .navigation > li.active > a {font-weight:700;}
    .mNav-point {display:inline-block;padding:15px 20px;position:absolute;top:0;right:50px; margin-top:10px;color:#fff;}
    .mNav-point:after {content:"";display:block;width:100%;height:100%;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/nav_point.png') no-repeat;position:absolute;top:50%;margin-top:-23%;background-size:100%;left:0;z-index:-1;}
    #footer_banner{position:fixed; left:0; bottom:0; width:100%; padding:20px 16px; text-align:center; z-index:999; }
    #footer_banner_closer{ position:absolute; top:20px; right:20px; }
    
    
    /* sticky */
    .headerWrap.mobile{height: auto; position: relative;}
    .header .nav-area .navigation > li > a{color: #000;}
    .header .nav-area .navigation .sub-menu-mo{display: none;}
    #navigation{position: sticky; top: -60px; left: 0; z-index: 99999;}
}

@media only screen and (max-width: 640px){
    .headerWrap {top:0px;padding:10px 0;background:#fff;}
    .headerWrap.open {width:100%;height:100%;}

    .mNav-point {right:40px;margin-top:2px;}
    /*.dis-mo {display:inline-block;}*/
    
}

/******************************************
*******************************************
                footer
*******************************************
*******************************************/
.footerWrap {width:100%;background:#f7f7f7;}
.footerWrap li, .footerWrap p, .footerWrap a, .footerWrap span  {font-family:Noto-L;font-size:13px;letter-spacing:-1px;color:#666;}

.sponsor {width:100%;padding:10px;box-sizing:border-box;line-height:100%;font-size:0;}
.sponsor .tit {position:absolute;top:25px;left:0;font-size:16px;}
.sponsor .host {position:relative;display:inline-block;width:100%;padding-left:50px;box-sizing:border-box;}
.sponsor .support {position:relative;display:inline-block;width:100%;padding-left:50px;box-sizing:border-box;}
.sponsor .support li {width:auto;float:left;margin-right:2.4%;}

.associate {width:100%;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#fff;}
.associate ul {width:100%;max-width:1080px;margin:0 auto;padding:15px 0;text-align:center;}
.associate li {display:inline-block;padding:0 10px;width:13%;box-sizing: border-box;}
.associate li a {display:block;}
.associate li span {display:block;color:#888;font-size:12px;letter-spacing:-1px;}

.footer {display:inline-block;padding:50px 0;}
.footer .company {position:relative;width:60%;float:left;padding-left:150px;box-sizing:border-box;}
.footer .company:before {content:"";display:block;width:121px;height:22px;position:absolute;top:0;left:0;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/im_common.png') right bottom no-repeat;}
.footer .company .info span {display:inline-block;position:relative;padding-left:20px;margin-bottom:3px;}
.footer .company .info span:before {content:"";width:1px;height:10px;margin-left:9px;padding-left:9px;border-left:1px solid #bbb;position:absolute;top:5px;left:0;}
.footer .company .info .line {border-bottom:1px solid #bbb;padding-left:0;}
.footer .company .info .line:before {content:"";width:100%;height:1px;margin:0 auto;position:absolute;bottom:2px;left:0;}
.footer .company .addr {margin-bottom:3px;}
.footer .company .num {margin-bottom:5px;}
.footer .award {width:40%;float:right;font-size:0;}
.footer .award li {display:inline-block;width:50%;margin-bottom:10px;padding-right:10px;box-sizing:border-box;}
.footer .award li a {position:relative;display:table-cell;height:40px;padding-left:60px;font-family:돋움,돋움체,Dotum;font-size:11px;vertical-align:middle;}
.footer .award li a:before {content:"";display:block;width:50px;height:40px;position:absolute;top:0;left:0;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/im_common.png') -40px bottom no-repeat;vertical-align:middle;}
.footer .award li .fb:before {background-position:-40px bottom;}
.footer .award li .cs:before {background-position:-90px bottom;}
.footer .award li .kebi:before {background-position:-140px bottom;}
.footer .award li .ltm:before {background-position:-190px bottom;}
.footer .award li .mainbiz:before {width:55px;background-position:-95px -320px;}
.footer .award .col-wlb {margin-left:50%;}
.footer .award li .wlb:before {background-position:-32px -320px;} /* 이미지 좌측정렬일 경우 40px*/
.footer .notice {width:60%;float:left;padding-left:150px;margin-top:20px;box-sizing:border-box;}
.footer .notice .ssl {padding-left:35px;position:relative;}
.footer .notice .ssl:before {content:"";display:inline-block;width:26px;height:26px;position:absolute;top:8px;left:0;background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmsaf.com/saf/r/v1/common/im_common.png') 0 bottom no-repeat;}
.footer .copy {width:60%;float:left;padding-left:150px;margin-top:10px;box-sizing:border-box;}

/* top btn */
.top-btn {display: inline-flex;justify-content: center;align-items: center;position: fixed;right: 5%;bottom: 5%;width: 3.5rem;aspect-ratio: 1 / 1 ;border-radius: 50%;border: 1px solid #191919;text-align: center; cursor: pointer; z-index: 99;}
.top-btn > span {display: inline-block;line-height: 1;transform: translateY(-10%);}
.top-btn > span > span {display: block;line-height: 1;font-size: 14px;}
@media only screen and (min-width: 1100px){
    .sponsor {max-width:1080px;margin:0 auto;}
    .sponsor:after {content:'';display:block;width:100%;clear:both;}
    .sponsor .tit {position:absolute;top:30px;left:0;font-size:20px;}
    .sponsor .host {position:relative;width:20%;float:left;padding-left:50px;box-sizing:border-box;}
    .sponsor .support {position:relative;width:80%;float:right;padding-left:50px;box-sizing:border-box;}
    .sponsor .support li:last-child {margin-right:0;}
}


@media only screen and (max-width: 1024px){
    .footer .company, .footer .notice {padding:0;}
    .footer .company:before {display:block;width:121px;height:22px;position:relative;}
    .footer .company .info {margin-top:10px;}
    .footer .award li {display:inline-block;width:50%;vertical-align:top;}
    .footer .award li a {height:30px;}
    .footer .award li a:before {margin-top:-5px;}
    .footer .award li .dis-pc {display:none;}
    /*.footer .award .col-wlb {margin-left:0;width:100%;}*/
    .footer .copy {padding:0;}
}

@media only screen and (max-width: 768px) {
    .associate ul {padding:5px 0;}
    .associate li {width:20%;box-sizing:border-box;vertical-align:top;padding:5px;}
    .associate li img {width:90%;max-width:100px;}
    .associate li a span {font-size:10px;}
    .top-btn {display: none;}
}
@media only screen and (max-width: 640px){
    .footerWrap .dis-pc {display:none;}
    .footer {padding:30px 0;}
    .footerWrap li, .footerWrap p, .footerWrap a, .footerWrap span {font-size:12px;}
    .sponsor .tit {font-size:13px;top:20px;}
    .sponsor img {height:36px;}
    .associate li {width:25%;}
    .footer .company .info span {padding-left:10px;}
    .footer .company .info span:before {margin-left:3px;padding-left:3px;}
    .footer .company, .footer .award, .footer .notice {width:100%;float:none;padding:0;}
    .footer .award {margin-top:20px;}
    .footer .award li a {font-size:10px;}
    .footer .award .col-wlb {margin-left:0;}
    .footer .copy {width:100%;float:none;padding:0;text-align: center;}
}


/******************************************
*******************************************
공용 배너
*******************************************
*******************************************/
.title-banner {text-align: center;  background-repeat: no-repeat; background-size: cover; background-position: center; padding: 4rem 0 4.5rem; }
.title-banner h1 { font-size: var(--f-display); color: #fff; } 
@media only screen and (max-width: 720px){
    .title-banner {padding: 40px 0;} 
}


/******************************************
*******************************************
모바일 하단 바 
*******************************************
*******************************************/
.m-inquiry-bar { display: none; } 
.m-inquiry-bar { position: fixed; left: 0; bottom: 0; z-index: 99999; width: 100%; padding: 16px 16px 24px; box-sizing: border-box; justify-content: space-evenly; align-items: center; border-top: 1px solid #E4E8F1; background: #fff; } 
.m-inquiry-bar > a { display: inline-block; width: 100%; font-size: 1.23rem; font-weight: 700; color: #fff; height: 3.7rem; border-radius: 8px; text-align: center; line-height: 3.7rem; } 
.m-inquiry-bar > a.sign-up-btn:hover { background: #18A149; } 
.m-inquiry-bar > a.sign-up-btn { background: #1EC95B; } 
.m-inquiry-bar > a.tel-btn { background: #0F2792; } 
@media only screen and (max-width: 768px){
    .m-inquiry-bar { display: flex; } 
}



/******************************************
*******************************************
세유박 종료 팝업
*******************************************
*******************************************/
.saf-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background-color: rgba(0,0,0,.6); } 
.saf-popup-mo { display: none; } 

@media only screen and (min-width: 641px){
    .saf-popup-img { width: 865px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 100px; padding-top: 120px; box-sizing: border-box; } 
}
@media only screen and (max-width: 640px){
    .saf-popup-img { display: none; } 
    .saf-popup-mo { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; } 
    .saf-popup-img-mo { display: block; width: 100%; padding: 20px; padding-top: 60px; box-sizing: border-box; } 
    .saf-popup-img-mo-btn { position: absolute; left: 50%; bottom: 10%; transform: translate(-50%, -50%); width: 70%; } 
}

/* 브랜드 대상 */
.bn-article { display: flex; justify-content: center; align-items: center; padding: 2rem 0; font-size: 2rem; } 
.bn-article > span > span { position: relative; font-size: 1.3rem; display: inline-block; margin-right: 2rem; color: #E23542; padding: 0 .5rem; margin-bottom: 1rem; } 
.bn-article > span > span::before,
.bn-article > span > span::after { content: ''; width: .9rem; height: 1.75rem; position: absolute; top: 50%; transform: translateY(-50%); } 
.bn-article > span > span::before { right: 100%; background: url('/image/common/bn_img01.png') no-repeat center center; background-size: cover; } 
.bn-article > span > span::after { left: 100%; background: url('/image/common/bn_img02.png') no-repeat center center; background-size: cover; } 
.bn-article > p { font-size: 2rem; } 
.bn-article > p > strong { position: relative; display: inline-block; margin-left: .4rem; } 
.bn-article > p > strong > span { font-size: 1rem; position: absolute; right: 0; top: 100%; display: inline-block; line-height: 1; color: #A1A1A1; font-weight: 400; } 
.bn-article > p > strong > span::before { content: '*'; position: absolute; right: 100%; top: 0; margin-right: .2rem; } 

@media only screen and (max-width: 1080px){
    .bn-article { display: block; padding: 2rem; text-align: center; } 
    .bn-article > span { display: block; } 
    .bn-article > p > strong { display: block; word-break: keep-all; } 
}

/******************************************
*******************************************
              혜택
*******************************************
*******************************************/

.benefit-con-box {position: relative;margin-bottom: 6rem;padding: 3rem 2rem 2rem;background: #fff;border-radius: 10px;box-shadow: 0 6px 10px rgba(0, 0, 0, 16%);letter-spacing: -1px;}
.benefit-con-box:last-child {margin-bottom: 0;}
.benefit-con-box > dl {display: inline-block;position: absolute;left: 50%;top: 0;transform: translate(-50%,-50%);background: #fff;border-radius: 3rem;border: 2px solid #5A09FB;font-size: 1.6rem;font-weight: 700;}
.benefit-con-box > dl > dt {display: inline-block;margin-left: -1px;padding:.1rem 1.4rem;background: #5A09FB;border-radius: 3rem;    color: #fff;}
.benefit-con-box > dl > dd {display: inline-block;color: #5A09FB;padding:.1rem 1.4rem .1rem .7rem;}
.benefit-con-box > h2 {margin-bottom: 2.3rem;font-size: 1.8rem;}
.benefit-con-box > h2 > strong {color: #5A09FB;}
.benefit-con-wrap {margin-bottom: 6rem;}
.benefit-con-wrap:last-child {margin-bottom: 0;}
.benefit-con3.first .imgBox,.benefit-con3.last .imgBox {text-align: right;}
.benefit-con3.first img {width: 45%;max-width: 182px;}
.benefit-con3.last img {width: 75%;max-width: 317px;}
.benefit-con3-title > span {display: inline-block;position: relative;z-index: 1;margin-bottom: 2rem;padding: .25rem 2rem;border-radius: 3rem;background: #E72626;font-size: 1.3rem;color: #fff;}
.benefit-con3-title > span::before {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: -1;width: 300%;height: 1px;background: #E72626;}
.benefit-con-text {margin-top: 2rem;margin-bottom: 1rem;text-align: left;font-size: 1rem;color: #191919;}
.benefit-con-grid {display: grid;grid-gap: 1rem;text-align: left;}
.benefit-con-grid.grid2 {grid-template-columns: repeat(2,1fr);}
.benefit-con-grid.grid3 {grid-template-columns: repeat(3,1fr);}
.benefit-con-grid.full {margin-bottom: 1rem;}
.benefit-con {display: flex;flex-direction: column;justify-content: space-between;position: relative;padding: 2rem 1.5rem ;background: #F1F1F5;border-radius: 10px;}
.benefit-con .circle {display: flex;justify-content: center;align-items: center;position: absolute;right: 0;top: 0;transform: translateY(-10px);width: 6rem;aspect-ratio: 1 / 1;border-radius: 50%;background: #E72626;box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);font-size: 0.9rem;font-weight: 700;color: #fff;text-align: center;}
.benefit-con .textBox {margin-bottom: 1rem;}
.benefit-con .textBox > h3 {font-size: 1.3rem;line-height: 1.4;  margin-bottom: 0.5rem;}
.benefit-con .textBox > h3:last-child {margin-bottom: 0;}
.benefit-con1 .textBox > h3 {font-size: 1.6rem;}
.benefit-con .textBox > h3 > span {display: inline-block;margin-bottom: .5rem;padding: .1rem 0.3rem;background: #fff;border: 1px solid #E72626;border-radius: 5px;font-size: 0.9rem;font-weight: 400;color: #E72626;}
.benefit-con .textBox > h3 > strong {color: #E72626;}
.benefit-con .textBox > h3 > span.color {color: #424DB7;border-color: #424DB7;}
.orBox > p,.benefit-con .textBox small {display: block;font-size: 0.7rem;color: #767676;font-weight: 400;}
.benefit-con .textBox p > small {display: inline-block;}
.benefit-con .textBox > ul {margin-top: 1rem;list-style: inside;}
.benefit-con .textBox > ul > li {font-size: 1rem;}
.benefit-con .textBox > ul > li::marker {font-size: 70%;}
.benefit-con .textBox > ul > li > strong {font-size: 1.3rem;}
.benefit-con .textBox > ul > li > span {color: #E72626;}
.benefit-con .textBox > ul.list-benefit-text {color: #E72626;}
.benefit-con .textBox > ul.list-benefit-text span{vertical-align: middle;}
.benefit-con .textBox > ul.list-benefit-text span.txt-desc {font-size: .7rem;color: #767676;}
.benefit-con .textBox > p {margin-bottom: 0.5rem;font-size: 1rem;}
.benefit-con .textBox > ul.textBox-list{margin-top: 0;}
.benefit-con .textBox > ul.textBox-list > li,.benefit-con .textBox > p.textBox-text {color: #767676;font-size: 0.8rem;}
.benefit-con img {width: 100%;}
.benefit-con1-grid {display: grid;grid-gap: 1rem;grid-template-columns: auto 48%;}
.benefit-con1 .line-break {display: inline-block;}
.benefit-con1-img{text-align: right;}
.benefit-con1-img img{width: 74.5%;max-width: 321px;}
.benefit-con1-img.img2 img{width: 69.07%;max-width: 297px;}
.benefit-con1-img.img3 img{width: 42.235%;max-width: 397px;}
.benefit-con2 p.txt-desc{margin-bottom:0;font-size:.7rem;color:#767676;}
.benefit-con .flexbox {display: flex;justify-content: space-between;align-items: start;}
.benefit-con .flexbox .orBox {padding-top: 1rem;}
.benefit-con .flexbox .orBox > span {display: inline-block;margin-bottom: 1rem;padding: 0 1rem;border-radius: 2rem;border: 1px solid #191919;font-size: 1rem;}
.benefit-con .flexbox img {width: 50%;}
.benefit-con-link a {display: inline-block;margin-top: 2rem;padding: .5rem 3.5rem;background: #191919;border-radius: 10px;font-size: 1.1rem;color: #fff;}
.benefit-con-top-con {position: relative;width: 90%;margin: 0 auto 3rem;}
.benefit-con-top-con > img {position: absolute;width: 55%;left: 49%;bottom: 0;transform: translateY(10%);z-index: 3;}
.benefit-con-top-con .textBox-wrap {display: flex;justify-content: center;align-items: center;position: relative;z-index: 1;    width: 60%;}
.benefit-con-top-con .textBox-wrap::before {content: '';position: absolute;left: 30%;top: 0;z-index: -2;width: 100%;height: 100%;border-radius: 9rem;background: #E7DBFF;}
.benefit-con-top-con .textBox-wrap .textBox {width: 100%;padding: 3.5rem 0 4rem;    background: #5A09FB;border-radius: 9rem;}
.benefit-con-top-con .textBox-wrap .textBox > div > span {display: inline-block;font-size: 1.3rem;color: #FEDE29;}
.benefit-con-top-con .textBox-wrap .textBox h3 {display: flex;align-items: center;justify-content: center;color: #fff;font-size: 2.5rem;}
.benefit-con-top-con .textBox-wrap .textBox h3 > span {display: inline-block;margin-right: 0.4rem;font-size: 1.1rem;font-weight: 400;}
.benefit-con-top-con .textBox-wrap .textBox h3 > strong {display: inline-block;font-size: 4.3rem;line-height: 1;}
.pc-w50{width: 50%;}
@media only screen and (max-width: 767px) {
    .pc-w50 {width: 100%;}
    .benefit-con-box {padding: 3rem 1rem 2rem;}
    .benefit-con-box > dl {display: flex;font-size: calc(1rem + 1.9446vw);white-space: nowrap;}
    .benefit-con-box > h2 {font-size: calc(1rem + 1.9446vw);}
    .benefit-con3-title > span {font-size: calc(1rem + 0.8334vw);}
    .benefit-con3-title > span::before {width: 200%;}
    .benefit-con-text {font-size: calc(1rem + 0.2778vw);}
    .benefit-con-grid.grid2,.benefit-con-grid.grid3 {grid-template-columns: repeat(1,1fr);}
    .benefit-con .circle {font-size: 1rem;}
    .benefit-con1 .textBox > h3,.benefit-con .textBox > h3 {font-size: calc(1rem + 1.389vw);}
    .benefit-con .textBox > h3 > span {font-size: calc(1rem + 0.2778vw);}
    .orBox > p,.benefit-con .textBox small {font-size: calc(1rem + -0.2778vw);}
    .benefit-con .textBox > ul > li {font-size: calc(1rem + 0.2778vw);}
    .benefit-con .textBox > ul > li > strong {font-size: calc(1rem + 1.389vw);}
    .benefit-con .textBox > ul.list-benefit-text span.txt-desc {display: block;font-size: calc(1rem - 0.2778vw);padding-left: 1.1rem;}
    .benefit-con .textBox > p {font-size: calc(1rem + 0.2778vw);}
    .benefit-con .textBox > ul.textBox-list > li,.benefit-con .textBox > p.textBox-text {font-size: 1rem;}
    .benefit-con .textBox {margin-bottom: 0.5rem;}
    .benefit-con-grid.grid3 .benefit-con img {width: 60%;margin-left: auto;}
    .benefit-con1-grid {grid-template-columns: repeat(1,1fr);}
    .benefit-con1 .line-break {display: block;}
    .benefit-con1-img img{width: 77.7%;margin-top: 1.5rem;}
    .benefit-con1-img.img2 img{width: 73.25%;}
    .benefit-con1-img.img3 img {width: 79.25%;}
    .benefit-con .flexbox {display: flex;justify-content: space-between;align-items: start;}
    .benefit-con .flexbox.mo-bl {display: block;}
    .benefit-con .flexbox.mo-bl > img {width: 100%;}
    .benefit-con .flexbox .orBox > span {font-size: calc(1rem + 0.2778vw);}
    .benefit-con-link a {font-size: calc(1rem + 0.2778vw);}
    .benefit-con-top-con {width: 100%;margin: 0 auto 7rem;}
    .benefit-con-top-con > img {width: 90%;left: 54%;transform: translate(-50%, 10%);}
    .benefit-con-top-con .textBox-wrap {display: flex;justify-content: center;align-items: center;width: 70%;        margin: 0 auto;}
    .benefit-con-top-con .textBox-wrap::before {left: 5%;        border-radius: 50%;}
    .benefit-con-top-con .textBox-wrap .textBox {display: flex;justify-content: center;align-items: center;width: 100%;aspect-ratio: 1 / 1;padding: 0;    border-radius: 50%;}
    .benefit-con-top-con .textBox-wrap .textBox > div {transform: translateY(-70%);}
    .benefit-con-top-con .textBox-wrap .textBox > div > span {font-size: 1rem;}
    .benefit-con-top-con .textBox-wrap .textBox h3 {font-size: calc(1rem + 2.778vw);}
    .benefit-con-top-con .textBox-wrap .textBox h3 > span {font-size: calc(1rem + -0.2778vw);}
    .benefit-con-top-con .textBox-wrap .textBox h3 > strong {font-size: calc(1rem + 8.0562vw);}
}


/******************************************
*******************************************
              프로그램 상단
*******************************************
*******************************************/
.container-width {width: 100%;margin: 0 auto;padding: 5rem 1rem;text-align: center; line-height: 1.4;}
.language-abroad-section01 .container-width {padding: 5rem 1rem 0;}
.language-abroad-title {margin:0 auto 0;}
.language-abroad-title > small {display: block;width: 100%;font-size: calc(1rem + 1.389vw);}
.language-abroad-title > strong {display: block; margin-bottom: 0.5rem; color: #000;font-size: calc(1rem + 9.6vw); }
.language-abroad-title > span {display: inline-block;  padding: .2rem 1rem;background: #000;-webkit-border-radius: 2rem;-moz-border-radius: 2rem;border-radius: 2rem;font-size: calc(1rem + 0.8334vw);color: #fff;}
.language-abroad-section01-con {position: relative; z-index: 2; padding: 1.5rem 1rem;background: rgba(255,255,255, 95%);-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; transform: translateY(4rem); }
.language-abroad-section01-con-title {margin-bottom: 1rem;font-size: calc(1rem + 0.7vw);font-weight: 400;}
.language-abroad-section01-con-title > span {color: #FF3F05;}
.language-abroad-section01-con-title > strong {font-size: calc(1rem + 2.5vw);}
.language-abroad-section01-con-grid {display: grid;grid-template-columns: repeat(1,1fr);grid-gap: 1.2rem;margin-bottom: 0.5rem;}
.language-abroad-section01-con-grid li {display: flex;justify-content: center;align-items: center;padding: 2.5rem 0;background: transparent linear-gradient(125deg, #DFF8FF 0%, #FFF384 100%) 0% 0% no-repeat ;border: 1px solid #B8B8B8;border-radius: 10px;box-shadow: 5px 5px 10px rgba(0, 0, 0, 6%);font-size: calc(1rem + 1.389vw);}
.language-abroad-section01-con-grid li strong {color: #E72626;}
.language-abroad-section01-con-grid li small {font-size: calc(1rem + 0.5556vw); display: inline-block; line-height: 1.2;}
.language-abroad-section01-con p {font-size: calc(1rem + -0.2778vw); }
.language-abroad-section01-con p > strong {display: block; margin-top: 1.5rem; color: #191919;font-size: calc(1rem + 1.9446vw);}
.language-abroad-section01-con p > strong > strong {color: #5F3DCE;}
@media screen and (min-width:1080px) {
    .container-width {max-width: 1080px;padding: 5rem 0;}
    .language-abroad-section01 .container-width {padding: 5rem 0 0;}
    .language-abroad-section01-con-grid {grid-template-columns: repeat(3,1fr); padding: 0 3rem;}
}
@media screen and (min-width:780px) {
    .language-abroad-title > small {font-size: 2rem;}
    .language-abroad-title > strong {font-size: 5.5rem;}
    .language-abroad-title > span {font-size: 1.8rem;}
    .language-abroad-section01-con-title {font-size: 1.1rem;}
    .language-abroad-section01-con-title > strong {font-size: 1.8rem;}

    .language-abroad-section01-con-grid li {font-size: 1.3rem;}
    .language-abroad-section01-con-grid li small {font-size: 1rem;}
    .language-abroad-section01-con p {font-size: 0.8rem;}
    .language-abroad-section01-con p > strong {font-size: 1.6rem;}
}

/******************************************
*******************************************
            준비반
*******************************************
*******************************************/
.language-abroad-section04-width {width: 100%;text-align: center;padding: 0 1rem;}
.language-abroad-section04-bottom {padding-bottom: 5rem;}
.language-abroad-section04-con {background: #fff;padding: 0 1rem;}
.language-abroad-section04-row {padding: 3rem 1rem; word-break: keep-all;}
.language-abroad-section04-row:first-child {border-bottom: 1px solid #888888;}
.language-abroad-section04-con-title {margin-bottom: 1rem;font-size: calc(1rem + 2.4vw); }
.language-abroad-section04-con-title > span {display: inline-block;margin:0 .6rem 1rem;padding: .5rem 1rem;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;border: 2px solid #9B8DD8;font-size: calc(1rem + 0.2778vw);color: #9B8DD8;font-weight: 400;}
.language-abroad-section04-con-title > span:first-child {border: 2px solid #FF3F05;background: #FF3F05;color: #fff;}
.language-abroad-section04-con-text {margin-bottom: 1rem;font-size: calc(1rem + 0.8334vw);}
.language-abroad-section04-con-img {width: 100%;max-width: 450px;margin-bottom: 1rem;aspect-ratio: 141 / 122;}
.language-abroad-section04-con-list {padding-left: 1rem;text-align: left;}
.language-abroad-section04-con-list > li {position: relative;font-size: 1rem;color: #888888;line-height: 1.3;}
.language-abroad-section04-con-list > li::before {content: '※';position: absolute;right: 100%;top: 0;margin-right: .5rem;}





@media screen and (max-width: 1120px) {
    .saf-main-width{padding: 0 20px;}
}

@media screen and (min-width:1080px) {
    .language-abroad-section04-width {width: 1080px;padding: 0;margin: 0 auto;}
    .language-abroad-section04-bottom {padding-bottom: 5rem;}
}
@media screen and (min-width:780px) {
    .language-abroad-section04-row {display: grid;grid-template-columns: repeat(2,1fr);column-gap: 5rem;text-align: left;}
    .language-abroad-section04-con-title {width: 120%;margin-bottom: 1rem;font-size: 2rem;}
    .language-abroad-section04-con-title > span {padding: .4rem 1rem;font-size: 1rem;}
    .language-abroad-section04-con-title > span:first-child {margin-left: 0;}
    .language-abroad-section04-con-text {margin-bottom: 2rem;font-size: 1.1rem;}
    .language-abroad-section04-con-img {grid-column: 2;grid-row: 1 / span 3;width: 100%;margin-bottom: 1rem;}
    .language-abroad-section04-con-list {display: block;}
    .language-abroad-section04-con-list > li {font-size: .8rem;}
}

@media screen and (max-width:768px) {
    :root{
        /* Typography */
        --f-display :2.153rem; /* 28px */
        --f-fontSize01 :1.923rem; /* 25px */
        --f-fontSize02 :1.692rem; /* 22px */
        --f-fontSize03 :1.538rem; /* 20px */
        --f-fontSize04 :1.384rem; /* 18px */
        --f-fontSize05 :1.23rem; /* 16px */
        --f-body1 :1.153rem; /* 15px */
        --f-body2 :1.076rem; /* 14px */
        --f-detail :1rem; /* 13px */
    }
}