@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');


@font-face {
    font-family: 'NanumBarunGothic';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'NanumBareunGothicLight';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebLight.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebLight.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebLight.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebLight.ttf) format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'NanumBarunGothicBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWebBold.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWebBold.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWebBold.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothic/NanumBarunGothicWebBold.ttf) format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'NanumBareunGothicUltraLight';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.ttf) format("truetype");
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?jsc8cs');
    src: url('../fonts/icomoon.eot?jsc8cs#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff?jsc8cs') format('woff'),
        url('../fonts/icomoon.ttf?jsc8cs') format('truetype'),
        url('../fonts/icomoon.svg?jsc8cs#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-intranet:before {
  content: "\e953";
}
.icon-label:before {
  content: "\e94d";
}
.icon-lock:before {
  content: "\e919";
}
.icon-login:before {
  content: "\e944";
}
.icon-logout:before {
  content: "\e945";
}
.icon-pause:before {
  content: "\e940";
}
.icon-play:before {
  content: "\e941";
}
.icon-qmenu:before {
  content: "\e902";
}
.icon-reply:before {
  content: "\e946";
}
.icon-blank:before {
  content: "\e93e";
}
.icon-blank2:before {
  content: "\e93f";
}
.icon-tel2:before {
  content: "\e935";
}
.icon-cart:before {
  content: "\e933";
}
.icon-clock:before {
  content: "\e932";
}
.icon-gnb:before {
  content: "\e91b";
}
.icon-map:before {
  content: "\e931";
}
.icon-category:before {
  content: "\e930";
}
.icon-write:before {
  content: "\e926";
}
.icon-say2:before {
  content: "\e927";
}
.icon-help:before {
  content: "\e928";
}
.icon-smile:before {
  content: "\e929";
}
.icon-book:before {
  content: "\e92a";
}
.icon-star:before {
  content: "\e92b";
}
.icon-wide:before {
  content: "\e92c";
}
.icon-Alarm:before {
  content: "\e92d";
}
.icon-good:before {
  content: "\e92e";
}
.icon-good-fill:before {
  content: "\e92f";
}
.icon-home:before {
  content: "\e924";
}
.icon-lang:before {
  content: "\e936";
}
.icon-view:before {
  content: "\e925";
}
.icon-password:before {
  content: "\e904";
}
.icon-mail:before {
  content: "\e905";
}
.icon-tel:before {
  content: "\e908";
}
.icon-arrow-b:before {
  content: "\e909";
}
.icon-arrow-l:before {
  content: "\e91d";
}
.icon-arrow-r:before {
  content: "\e91e";
}
.icon-arrow-t:before {
  content: "\e923";
}
.icon-file-down:before {
  content: "\e900";
}
.icon-file-up:before {
  content: "\e901";
}
.icon-blank1:before {
  content: "\e952";
}
.icon-close:before {
  content: "\e903";
}
.icon-arrow-dl:before {
  content: "\e906";
}
.icon-arrow-dr:before {
  content: "\e907";
}
.icon-search:before {
  content: "\e90a";
}
.icon-minus:before {
  content: "\e90b";
}
.icon-plus:before {
  content: "\e90c";
}
.icon-file-excel:before {
  content: "\e90d";
}
.icon-file-img:before {
  content: "\e90e";
}
.icon-file-pdf:before {
  content: "\e90f";
}
.icon-file-ppt:before {
  content: "\e910";
}
.icon-file-reg:before {
  content: "\e911";
}
.icon-file-word:before {
  content: "\e912";
}
.icon-file-zip:before {
  content: "\e913";
}
.icon-cal:before {
  content: "\e914";
}
.icon-delete:before {
  content: "\e915";
}
.icon-file:before {
  content: "\e916";
}
.icon-pencil:before {
  content: "\e917";
}
.icon-say:before {
  content: "\e918";
}
.icon-people:before {
  content: "\e91a";
}
.icon-print:before {
  content: "\e91c";
}
.icon-notification:before {
  content: "\e91f";
}
.icon-forward:before {
  content: "\e969";
}
.icon-cog:before {
  content: "\e994";
}
.icon-checkmark:before {
  content: "\ea10";
}
.icon-arrow-thin-u:before {
  content: "\ea3a";
}
.icon-arrow-thin-r:before {
  content: "\ea3c";
}
.icon-arrow-thin-d:before {
  content: "\ea3e";
}
.icon-arrow-thin-l:before {
  content: "\ea40";
}
.icon-circle-up:before {
  content: "\ea41";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-down:before {
  content: "\ea43";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-link:before {
  content: "\e920";
}
.icon-icon-print:before {
  content: "\e921";
}
.icon-share:before {
  content: "\e922";
}
.icon-home1:before {
  content: "\e954";
}
.icon-home3:before {
  content: "\e955";
}
.icon-pencil1:before {
  content: "\e956";
}
.icon-pencil2:before {
  content: "\e957";
}
.icon-image:before {
  content: "\e937";
}
.icon-images:before {
  content: "\e938";
}
.icon-camera:before {
  content: "\e958";
}
.icon-file-empty:before {
  content: "\e939";
}
.icon-files-empty:before {
  content: "\e934";
}
.icon-file-text2:before {
  content: "\e93a";
}
.icon-file-picture:before {
  content: "\e93b";
}
.icon-copy:before {
  content: "\e93c";
}
.icon-stack:before {
  content: "\e93d";
}
.icon-price-tag:before {
  content: "\e959";
}
.icon-price-tags:before {
  content: "\e95a";
}
.icon-phone:before {
  content: "\e942";
}
.icon-phone-hang-up:before {
  content: "\e943";
}
.icon-pushpin:before {
  content: "\e95b";
}
.icon-location:before {
  content: "\e947";
}
.icon-location2:before {
  content: "\e948";
}
.icon-compass:before {
  content: "\e949";
}
.icon-compass2:before {
  content: "\e94a";
}
.icon-map1:before {
  content: "\e94b";
}
.icon-map2:before {
  content: "\e94c";
}
.icon-clock1:before {
  content: "\e94e";
}
.icon-clock2:before {
  content: "\e94f";
}
.icon-alarm:before {
  content: "\e950";
}
.icon-bell:before {
  content: "\e951";
}
.icon-printer:before {
  content: "\e95c";
}
.icon-quotes-left:before {
  content: "\e977";
}
.icon-quotes-right:before {
  content: "\e978";
}
.icon-spinner11:before {
  content: "\e984";
}
.icon-enlarge:before {
  content: "\e989";
}
.icon-shrink:before {
  content: "\e98a";
}
.icon-cog1:before {
  content: "\e995";
}
.icon-stats-bars:before {
  content: "\e99c";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-link1:before {
  content: "\e9cb";
}
.icon-attachment:before {
  content: "\e9cd";
}
.icon-bookmarks:before {
  content: "\e9d3";
}
.icon-star-empty:before {
  content: "\e9d7";
}
.icon-star-full:before {
  content: "\e9d9";
}
.icon-happy:before {
  content: "\e9df";
}
.icon-smile1:before {
  content: "\e9e1";
}
.icon-sad:before {
  content: "\e9e5";
}
.icon-wink:before {
  content: "\e9e7";
}
.icon-neutral:before {
  content: "\e9f7";
}
.icon-wondering:before {
  content: "\e9fb";
}
.icon-frustrated:before {
  content: "\e9ff";
}
.icon-info:before {
  content: "\ea0c";
}
.icon-checkmark1:before {
  content: "\ea11";
}
.icon-checkmark2:before {
  content: "\ea12";
}
.icon-arrow-up-left2:before {
  content: "\ea39";
}
.icon-arrow-up-right2:before {
  content: "\ea3b";
}
.icon-arrow-down-right2:before {
  content: "\ea3d";
}
.icon-arrow-down-left2:before {
  content: "\ea3f";
}
.icon-share2:before {
  content: "\ea82";
}
.icon-google:before {
  content: "\ea88";
}
.icon-google2:before {
  content: "\ea89";
}
.icon-google3:before {
  content: "\ea8a";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-google-plus2:before {
  content: "\ea8c";
}
.icon-google-plus3:before {
  content: "\ea8d";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-whatsapp:before {
  content: "\ea93";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-onedrive:before {
  content: "\eaaf";
}
.icon-appleinc:before {
  content: "\eabe";
}
.icon-android:before {
  content: "\eac0";
}
.icon-IE:before {
  content: "\eadb";
}
.icon-edge:before {
  content: "\eadc";
}

/* Reset */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
code,
address,
ul,
ol,
li,
nav,
section,
article,
header,
footer,
main,
aside,
dl,
dt,
dd,
table,
thead,
tbody,
tfoot,
label,
caption,
th,
td,
form,
fieldset,
legend,
hr,
input,
button,
textarea,
object,
figure,
figcaption {
    margin: 0;
    padding: 0;
}

body,
input,
select,
textarea,
button,
img,
fieldset {
    border: none;
}

ul, 
ol,
li {
    list-style: none;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

address,
cite,
code,
em,
i {
    font-style: normal;
    font-weight: normal;
}

label,
img,
input,
select,
textarea,
button,
a {
    vertical-align: middle;
}

u,
ins,
a {
    text-decoration: none;
}

button {
    cursor: pointer;
}

/* Normalize */

select {
    border: 1px solid rgb(31, 31, 31);
    /* appearance: none; */
}

/*select 디자인****************************************************************************************************************************************/
select {
    padding: 0 25px 0 5px !important;
    background: url(../imgs/arrow_bottom.svg) calc(100% - 10px) 50% no-repeat #fff;
    background-size: 10px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: none;
    /* 화살표 없애기 for chrome */
    -moz-appearance: none;
    /* 화살표 없애기 for firefox */
    appearance: none;
    /* 화살표 없애기 공통 */
}

select::-ms-expand {
    display: none;
    /* 화살표 없애기 for firefox */
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"],
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
}

input[type="number"] {
    border-bottom: 1px solid #999;
    transition: all 0.3s;
}

input[type="number"]:focus, input[type="text"]:focus {
    border-bottom: 2px solid #000;
}

textarea {
    resize: none;
}


/*scrollbar 디자인****************************************************************************************************************************************/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    height: 50px;
    width: 50px;
    background: rgba(25, 25, 25, 0.5);
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

/*데코 속성****************************************************************************************************************************************/
/*텍스트 데코*/
.underline {
    text-decoration: underline;
}

.bold {
    font-weight: 600;
}

.narrow {
    letter-spacing: -1px;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
}

.textover {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* .must .board_label::after, .must .tit::after, em.must::after { content:'*'; display:inline-block; margin-left:5px; color:#e21818; } */

.overX {
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: pan-x;
}

.overX::-webkit-scrollbar {
    display: none;
}

.must .board_label b,
.must .tit b,
em.must b {
    display: inline-block;
    margin-left: 5px;
    color: #e21818;
}

.must_text {
    color: #333;
    margin-top: 15px;
    font-size: 0.9em;
    word-break: break-word;
}

.must_text em {
    margin-right: 5px;
    font-size: 1em;
    color: #d70000;
    font-weight: 900;
}

.must_wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.must_wrap .must_text {
    margin-top: 0;
}

.ls_narrow {
    letter-spacing: -1px;
}

.blank,
.blank_w {
    display: inline-block;
    transition: all 0.3s;
    height: auto;
}

.blank::after,
.blank_w::after {
    content: '';
    margin-left: 10px;
    display: inline-block;
    width: 13px;
    height: 13px;
    transform: translateY(2px);
    transition: all 0.3s;
}

.blank::after {
    background: url(../../images/custom/icon_blank.svg) 50% 50% no-repeat;
    background-size: contain;
}

.blank_w::after {
    background: url(../../images/custom/icon_blank_w.svg) 50% 50% no-repeat;
    background-size: contain;
}

a.link {
    transition: all 0.3s;
    position: relative;
}

a.link:hover {
    color: var(--text-primary-color) !important;
}

a.link::after {
    content: '';
    width: 0;
    height: 1px;
    background: #1D4E8F;
    display: inline-block;
    transition: all 0.2s;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

a.link:hover::after {
    width: 100%;
}

/* apctp */
:root {
    --font-family-pretendar: "Pretendard";
    --font-family-notoserif: 'Noto Serif KR';
    --font-family-inter: 'Inter';
    --font-family-tw: 'Tw Cen MT';
    --font-family-nanum: 'NanumBarunGothic', sans-serif;
    --font-family-nanum-exb: 'NanumBarunGothicBold', sans-serif;
    --text-primary-color: #1D4E8F;
    --text-white-color: #fefefe;
    --text-black-color: #000;
    --text-black2-color: #221F20;
    --text-black3-color: #707070;
    --text-gray--color: #B1B1B1;
    --text-gray3--color: #868686;
    --text-gray4--color: #565656;
    --text-gray5--color: #EEEEEE;
    --text-gray6--color: #343F4F;
    --text-quickmenu--color: #333F50;
    --backgroundco: #003B77;
    --footer-background: #F3F4F5;
    --quick--background: #1d4b88;
    --quick--linksite: #98B3C4;
    --border-primary: #1D4E8F;
    --font-size--10: 10px;
    --font-size--11: 11px;
    --font-size--12: 12px;
    --font-size--13: 13px;
    --font-size--14: 14px;
    --font-size--15: 15px;
    --font-size--16: 16px;
    --font-size--17: 17px;
    --font-size--14: 14px;
    --font-size--20: 20px;
    --font-size--21: 21px;
    --font-size--22: 22px;
    --font-size--24: 24px;
    --font-size--26: 26px;
    --font-size--28: 28px;
    --font-size--35: 35px;
    --font-size--36: 36px;
}

html,
body {
    position: relative;
    width: 100%;
    min-width: 320px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family-pretendar), sans-serif;
    font-family: var(--font-family-nanum), sans-serif !important;
    word-wrap: break-word;
    font-size: 16px;
}

a {
    /* color: var(--text-white-color); */
    text-decoration: none;
}

/* reset */

.wrap {
    position: relative;
    width: 100%;
}

/*input 디자인****************************************************************************************************************************************/
input[type="text"],
input[type="password"],
select,
textarea {
    font-family: 'notoSans', sans-serif;
    z-index: 1;
    height: 45px;
    color: #333;
    font-weight: 400;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    box-shadow: none;
    -webkit-appearance: none;
    transition: 0.3s ease-in-out;
}

/* 익스 9부터 적용가능, 아이폰 둥근 모서리 설정빼기 */
.textArea {
    padding: 15px;
    resize: none;
}

label {
    cursor: pointer;
}

.inputText[readonly],
.selectText[readonly],
.textArea[readonly],
.inputText[disabled],
.selectText[disabled],
.textArea[disabled] {
    background: #f9f9f9;
    border-color: #e4e4e4;
}

.inputText::placeholder {
    color: #999;
}

.inputText[readonly]:hover,
.selectText[readonly]:hover,
.textArea[readonly]:hover,
.inputText[disabled]:hover,
.selectText[disabled]:hover,
.textArea[disabled]:hover {
    border: 1px solid #e4e4e4;
    box-shadow: none;
}

.inputText:hover,
.selectText:hover,
.textArea:hover,
.textArea:focus,
.inputFile:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-color: #999;
}

/* input text show */
.text_show {
    position: relative;
    transition: all 0.3s;
}

.text_show label {
    position: absolute;
    top: 16px;
    left: 8px;
    transition: all 0.3s;
    line-height: 1em;
    pointer-events: none;
    font-weight: 400;
    color: #666;
    font-size: .9em;
    padding: 0 5px;
    z-index: 9;
}

.text_show .inputText+label {
    top: 50%;
    transform: translateY(-50%);
}

.text_show .textArea+label {
    top: 20px;
    transform: translateY(-50%);
}

.text_show.focus label {
    background: #fff;
    color: #666;
    top: -5px;
    font-size: 0.7em;
}

.text_show.focus .inputText+label,
.text_show.focus .textArea+label {
    transform: translateY(0);
}

.text_show .inputText[disabled]+label,
.text_show .textArea[disabled]+label,
.text_show .inputText[readonly]+label,
.text_show .textArea[readonly]+label {
    visibility: hidden;
}

.text_show.active label {
    opacity: 0;
}

/* popup */
.main_modal_wrap {
    /* display: none !important; */
    width: 400px;    
    max-height: 500px;
    position: fixed;
    top: 150px;
    left: 50px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2);    
}

/* .main_modal_wrap::after { content:''; background:rgba(0,0,0,0.8); width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:10; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); } */
.main_modal {
    position: relative;
    z-index: 11;
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #121212;
}

.main_modal .modal_control {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--text-primary-color);
    height: 50px;
    padding: 0 14px;
}

.main_modal .modal_control .modal_count {
    padding: 0 15px;
    height: 40px;
    display: flex;
    align-items: center;
}

.main_modal .modal_control .btn_s {
    padding: 0 10px;
    border: 1px solid #fff;
    color: #fff;
    background: none;
    height: 30px;
    line-height: 22px;
}

.main_modal .modal_control .btn_s:hover {
    color: #121212;
    background: #fff;
}

.main_modal .modal_control .check {
    align-items: center;
    margin: 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
}

.main_modal .modal_content {
    width: 400px;
    height: 500px;
    padding: 0;
    animation: fadeUp 1s both;
    overflow: hidden;
}

.main_modal .modal_content .modal_slide .swiper-slide {
    width: 100%;
    height: auto;
}

.main_modal .modal_content .swiper-slide {
    width: auto;
    height: 500px;
    overflow: hidden;
}

.main_modal .modal_content .swiper-slide a {
    width: 400px;
    height: 500px;
    display: block;
    position: relative;
    background-color: #fff;
}

.main_modal .modal_content .swiper-slide img {
    height: 100%;
}

.modal-slide {
    position: relative;
}

.modal-slide-control {
    position: absolute;
    bottom: 65px;
    right: 15px;
    z-index: 9;
}

.modal_contr.swiper-button-next,
.modal_contr.swiper-button-prev {
    position: static;
    height: 45px;
    width: 45px;
    border-radius: 50px;
    margin: 0;
}

.modal_contr.swiper-button-next:after,
.modal_contr.swiper-button-prev:after {
    font-size: 20px;
    font-weight: 900;
    color: #333;
}

.modal_contr.swiper-pagination {
    width: auto;
    display: flex;
    align-items: center;
    position: static;
}

.modal_contr.swiper-pagination span {
    /* background: var(--text-primary-color); */
    border: 2px solid var(--text-primary-color);
    width: 12px;
    height: 12px;
    position: relative;
    margin: 0 5px !important;
    display: inline-block;
}

.modal_contr.swiper-pagination-bullet-active::after {
    border: 1px solid #fff;
    background-color: var(--text-primary-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50px;
    content: '';
    animation: fadeIndot 0.5s both cubic-bezier(0.550, 0.085, 0.680, 0.530);
}

.m_slide a {
    width: 100%;
    display: block;
}

.m_slide a img {
    width: 100%;
    max-height: 500px;
}

/* header */

.header {
    position: relative;
    width: 100%;
    height: 607px;
    background-image: url("../imgs/slider_bg_a.png");
    background-position: center;
    background-size: cover;
}

.hd__gd::before {
    content: "";
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.38) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.navbar__wraper {
    position: fixed;
    width: 100%;
    z-index: 99;
    top: 0;
    transition: 0.4s;
    /* background-color: #000; */
}


.nav__space {
    height: 174px;
    border-color: red;
}

.navbar {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.navbar__logos {
    padding-top: 48px;
    display: flex;
}

.navbar__logos li {
    padding-right: 20px;
}

.navbar__logos li:first-child h1 a {
    display: block;
    width: 138px;
    height: 60px;
    background: url(../imgs/apctp__logo.svg) no-repeat;
}

.navbar__logos li:nth-child(2) a {
    display: block;
    width: 104px;
    height: 60px;
    background: url(../imgs/apec__logo.svg) no-repeat;
}


.navbar_menu_top ul {
    margin-right: 75px;
}

.navbar_menu_top {
    font-family: var(--font-family-inter), 'NanumBarunGothic', sans-serif;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 900px;
    height: 65px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.navbar_menu_top ul:first-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.navbar_menu_top ul:first-child li {
    padding-right: 10px;
    font-size: 14px;
    color: var(--text-white-color);
    vertical-align: center;
}

.navbar_menu_top ul:first-child li a {
    color: #f1f1f1;
    font-weight: 600;
}

.navbar_menu_top ul:first-child li a:hover {
    text-decoration: underline;
}

.navbar_menu_top .search__icon {
    display: block;
    width: 18px;
    height: 18px;
    background: url(../imgs/navbar__search.svg) no-repeat;
    background-position: center;
}

.navbar_menu_top #searchKeyword {
    border-radius: 14px;
    padding-left: 15px;
    width: 240px;
    height: 28px;
}

#searchKeyword.search__btn__active {
    display: block;
}

/* lnb */
.deps__2 {
    position: absolute;
    top: 130px;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 97;
    display: none;
    /* background-color: #fff; box-shadow: 0px 0px 30px 0px rgb(24 24 24 / 10%); opacity: 0.94; */
}


.deps__2>div {
    display: flex;
    align-items: center;
    width: 1200px;
    height: 90px;
    margin: 0 auto;
    /* box-shadow: 0px 0px 30px 0px rgb(24 24 24 / 10%); */
}

/* lnb menus */
.deps__2>div p {
    width: 300px;
    height: 90px;
	display: flex;
	align-items: center;
    /* background: linear-gradient(-45deg, #fff 50%, #000 50%); */
    /* background: linear-gradient(130deg, #fff 80%, transparent 80% 100%); box-shadow: 0px 0px 30px 0px rgb(24 24 24 / 10%); */
}

.deps__2 div p span {
    display: block;
    width: 104px;
    height: 90px;
}


.deps__2>div p a {
    display: block;
	/*
    padding-top: 30px;
    padding-right: 42px;
    text-align: center;*/
	font-size: 32px;
	text-align: left;
    font-weight: bold;
    line-height: 28px;
    font-size: var(--font-size--35);
    color: var(--text-gray6--color);
    font-family: var(--font-family-tw), 'NanumBarunGothic', sans-serif;
    text-transform: uppercase;
}



.navbar_gnb ul li:nth-child(4) .deps__2>div p a {
   /* line-height: 28px;
    padding-top: 19px;
    font-size: 32px;*/
	padding-top:0 !important;
}


.deps__2>div ul {
    /* width: 806px; */
    display: flex;
	gap:30px;
    /* justify-content: space-between; */
}

.deps__2>div ul li {
    margin-right: 0px !important;
}


.deps__2>div ul li:first-child {
    padding-left: 16px;
}

.deps__2>div ul li a {
    font-family: var(--font-family-inter);
    font-size: var(--font-size--15);
    font-weight: 700;
    color: var(--text-black2-color);
}

/* 배경 */

.deps__2__bg {
    display: none;
    position: fixed;
    top: 130px;
    width: 100%;
    height: 90px;
    z-index: 97;
    background: #fff;
    box-shadow: rgb(0 0 0 / 16%) 0px 10px 20px;
    opacity: 0.94;
}

.deps__2__bg .deps__2__bg__wrap {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.deps__2__bg .deps__2__bg__wrap p {
    width: 324px;
    height: 100%;
    background: url(../imgs/lnb__h1__bg.jpg) no-repeat;
}

.deps__2__bg.active {
    display: block;
}

/* 언어 버튼 */
.lang__btn {
    position: absolute;
    top: 18px;
    width: 65px;
    height: 28px;
    background: #fff;
    border-radius: 14px;
}

.lang__btn:hover {
    height: 56px;
}

.lang__btn>div {
    display: none;
}

div.lang__btn:hover div {
    display: block;
}

.lang__btn a {
    display: block;
    width: 65px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: var(--font-size--12);
    font-weight: bold;
}

.lang__btn a:hover {
    color: var(--text-primary-color);
}


/* box effect */


/* gnb */
.navbar_gnb {
    /* position: relative; */
    display: flex;
    align-items: center;
}

.navbar_gnb>ul {
    width: 815px;
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar_gnb>ul>li>a {
    font-family: var(--font-family-inter), 'NanumBarunGothic', sans-serif;
    display: block;
    padding: 10px 0;
    height: 65px;
    line-height: 45px;
    font-size: var(--font-size--17);
    font-weight: bold;
    color: var(--text-white-color);
    text-transform: uppercase;
}

.navbar_gnb>ul>li>a:hover {
    color: #fff !important;
    background-color: #343F4F;
}

.navbar_gnb>ul>li {
    flex: auto;
    text-align: center;
}

.navbar_gnb ul li:nth-child(6) .deps__2 ul {
    justify-content: flex-start;
}

/* 서브메뉴 */
.navbar_gnb ul li:first-child:hover .deps__2 {
    display: block;
}

.navbar_gnb ul li:nth-child(2):hover .deps__2 {
    display: block;
}

.navbar_gnb ul li:nth-child(3):hover .deps__2 {
    display: block;
}

.navbar_gnb ul li:nth-child(4):hover .deps__2 {
    display: block;
}

.navbar_gnb ul li:nth-child(5):hover .deps__2 {
    display: block;
}

.navbar_gnb ul li:nth-child(6):hover .deps__2 {
    display: block;
}

.navbar_gnb ul li:nth-child(7):hover .deps__2 {
    display: block;
}


.gnb__btn {
    width: 24px;
    height: 24px;
    margin-left: 44px;
    color: var(--text-black-color);
    background: url(../imgs/navbar__menu.svg) no-repeat;
}

/* gnb scroll */


/* slider */
.apctp__swiper {
    width: 1200px;
    height: 358px;
    color: var(--text-white-color);
    background-color: rgba(0, 0, 0, 0.62);
}

.apctp__swiper>.swiper-wrapper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.activities__figure {
    width: 270px;
    height: 160px;
    overflow: hidden;
    background-color: #f9f9f9;
}

.activities__figure a img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: left top;
    transform: scale(1);
    transition: all .3s ease-out;
}

.activities__swiper .swiper-wrapper .swiper-slide:hover .activities__figure a img {
    transform: scale(1.1);
}

.activities__swiper .swiper-wrapper .swiper-slide ul li:nth-child(2) a {
    background:
        linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)),
        linear-gradient(to right, rgba(29, 78, 143, 1), rgba(29, 78, 143, 1), rgba(29, 78, 143, 1));
    background-size: 100% 0.1em, 0 0.1em;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}

.activities__swiper .swiper-wrapper .swiper-slide:hover>ul li:nth-child(2) a {
    color: var(--text-primary-color) !important;
    background-size: 0 0.1em, 100% 0.1em;
}

.slide__h2 {
    width: 830px;
    font-size: 40px;
    line-height: 57px;
    text-align: center;
    font-family: 'Noto Serif KR', serif;
}

.slide__h3 {
    margin: 20px 0;
    /* margin-top: 20px; */
    width: 830px;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    font-weight: 400;
    color: var(--text-gray--color);
    font-size: var(--font-size--21);
}

.slide__morebtn a {
    display: block;
    width: 94px;
    height: 38px;
    border-radius: 38px;
    margin: 0 auto;
    background-color: #fff;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary-color);
    line-height: 37px;
    text-align: center;
}

.slide__morebtn a:hover {
    color: #fff;
    background-color: var(--text-primary-color);
}

/* animation */
.apctp__swiper .swiper-slide-active .slide__1 h2 {
    animation: textDown 1s both ease-in-out;
    animation-delay: 0.3s;
}

.apctp__swiper .swiper-slide-active .slide__1 .slide__h3 {
    animation: textDown 1s both ease-in-out;
    animation-delay: 0.6s;
}

.apctp__swiper .swiper-slide-active .slide__1 .slide__morebtn {
    animation: textDown 1s both ease-in-out;
    animation-delay: 1s;
}

.apctp__swiper .swiper-slide-active .slide__2 h2 {
    animation: textDown 1s both ease-in-out;
    animation-delay: 0.3s;
}

.apctp__swiper .swiper-slide-active .slide__2 .slide__h3 {
    animation: textDown 1s both ease-in-out;
    animation-delay: 0.6s;
}

.apctp__swiper .swiper-slide-active .slide__2 .slide__morebtn {
    animation: textDown 1s both ease-in-out;
    animation-delay: 1s;
}



/* container */

.container {
    width: 100%;
    margin: 0 auto;
}

.section__activies {
    width: 1240px;
    margin: 0 auto;
    margin-top: 30px;
}

.section__title__1200 {
    margin-top: 30px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.section__title__1200>h2,
.section__title>h2 {
    /* font-family: var(--font-family-nanum-exb); */
    font-size: 23px;
    line-height: 36px;
    color: var(--text-primary-color);
    font-weight: 900;
}

.section__line {
    margin-left: 20px;
    flex: 1;
    height: 1px;
    background-color: var(--backgroundco);
}

.section__activies__ctl {
    display: flex;
}

.section__activies__ctl li a {
    display: block;
    width: 28px;
    height: 28px;
}

/* 메인 학습활동 최신글 버튼 */


.section__activies__ctl li:first-child a {
    border: 1px solid var(--text-primary-color);
    border-right: none;
    background: url(../imgs/main__arrow_left.svg) no-repeat;
    background-position: center;
}

.section__activies__ctl li:first-child a:hover {
    border: none;
    background: url(../imgs/main__arrow_left__on.svg) no-repeat var(--text-primary-color);
    background-position: center;
}

.section__activies__ctl li:last-child a {
    border: 1px solid var(--text-primary-color);
    background: url(../imgs/main__arrow_right.svg) no-repeat;
    background-position: center;
}

.section__activies__ctl li:last-child a:hover {
    border: none;
    background: url(../imgs/main__arrow_right__on.svg) no-repeat var(--text-primary-color);
    background-position: center;
}

/* swiper 버튼 */

/* .swiper-button-next { right: 45px !important; width: 44px !important; height: 80px !important; background: url(../imgs/main__arrow_right.svg) no-repeat; background-position: center; } 

.swiper-button-prev { left: 45px !important; width: 44px !important; height: 80px !important; background: url(../imgs/main__slider__left.svg) no-repeat; background-position: center; } 

/* .swiper-button-next:hover { background: url(../imgs/main__arrow_right__on.svg) no-repeat; background-position: center; } 

.swiper-button-prev:hover { background: url(../imgs/main__slider__left__on.svg) no-repeat; background-position: center; } */

/* .swiper-button-next::after,
.swiper-button-prev::after { display: none; } */

.swiper-button-next {
    right: 45px !important;
    width: 44px !important;
    height: 80px !important;
    background: url(../imgs/main__slider__right.svg) no-repeat;
    background-position: center;
}

.swiper-button-next:hover {
    background: url(../imgs/main__slider__right__on.svg) no-repeat;
}

.swiper-button-prev {
    left: 45px !important;
    width: 44px !important;
    height: 80px !important;
    background: url(../imgs/main__slider__left.svg) no-repeat;
    background-position: center;
}

.swiper-button-prev:hover {
    background: url(../imgs/main__slider__left__on.svg) no-repeat;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

/* activities__swiper */

.activities__swiper {
    margin: 20px 30px;
    padding-left: 20px !important;
    width: 1240px;
    height: 350px;
}

.activities__swiper .swiper-wrapper {
    justify-content: space-between;
}

.activities__swiper .swiper-wrapper .swiper-slide {
    width: 270px !important;
    height: 325px;
    margin-right: 40px !important;
    box-shadow: 0px 8px 15px #00000026;
    transition: all 0.3s ease-out;
}

.activities__swiper .swiper-wrapper .swiper-slide:hover {
    box-shadow: 0px 8px 15px #b6cad9;
}



.activities__swiper .swiper-wrapper .swiper-slide ul {
    font-family: "Pretendard", sans-serif;
    padding: 23px 24px;
}

.activities__swiper .swiper-wrapper .swiper-slide ul li {
    padding-bottom: 16px;
}

.activities__swiper .swiper-wrapper .swiper-slide ul li:nth-child(1) {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary-color);
}

.activities__swiper .swiper-wrapper .swiper-slide ul li:nth-child(2) {
    font-size: 16px;
    width: 222px;
    height: 40px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--text-gray4--color);
}

.activities__swiper .swiper-wrapper .swiper-slide ul li a {
    color: var(--text-gray4--color);
}

.activities__swiper .swiper-wrapper .swiper-slide ul li:nth-child(3) {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-gray3--color);
}

/* */

.section__ws {
    width: 1200px;
    margin: 0 auto;
    display: flex;
}

.workshops__conferences,
.seminars__lectures,
.notice__l,
.notice__r,
.outreachprograms {
    width: 585px;
}

.notice__r {
    margin-left: 30px;
}

.section__title {
    display: flex;
    align-items: center;
}


.section__title>p {
    width: 189px;
    height: 1px;
    flex: 1;
    background: #1D4E8F;
    margin-left: 20px;
}

.seminars__lectures .section__title p {
    width: 258px;
}



.main__title__more__btn a {
    display: block;
    width: 70px;
    height: 28px;
    border: 1px solid var(--border-primary);
    font-size: var(--font-size--14);
    line-height: 24px;
    text-align: center;
    color: #1D4E8F;
    font-weight: bold;
}

.main__title__more__btn a:hover {
    background-color: #1D4E8F;
    color: #fff;
}

.seminars__lectures {
    width: 585px;
    height: 213px;
    margin-left: 30px;
}

.main__list__board {
    margin-top: 26px;
}

.main__list__board li {
    height: 43px;
    border-bottom: 1px solid var(--text-gray5--color);
}

.main__list__board li {
    width: 100%;
    height: auto;
    line-height: 43px;
    font-size: 15px;
    color: var(--text-gray3--color);
    overflow: hidden;
}

.main__list__board li a {
    display: flex;
    justify-content: space-between;
    color: var(--text-grey3-color);
}

.main__list__board li a h4 {
    width: 385px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-grey3-color);
    font-weight: 400;
}

.main__list__board li a p {
    /* width: calc(100% - 385px); */
    color: var(--text-gray3--color);
    letter-spacing: -0.7px;
}

.main__list__board li a:hover h4,
.main__list__board li a:hover p {
    color: var(--text-primary-color);
    font-weight: bold;
}

.section__research {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
}

.section__research ul {
    position: relative;
    width: 1200px;
    height: 240px;
    margin-top: 20px;
    background: url(../imgs/Research__programs__bg.png) no-repeat;
    display: flex;
}

.section__research ul li {
    position: relative;
}

.section__research ul li:nth-child(1) a {
    top: 0;
    left: 0;
    width: 449px;
    height: 240px;
    background: url(../imgs/main__jrg__bg.svg) no-repeat;
}

.section__research ul li:nth-child(1) a:hover {
    /* filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4)); */
    background: url(../imgs/main__jrg__bg__on.png) no-repeat;
}

.section__research ul li:nth-child(2) a {
    top: 0;
    left: 353px;
    width: 499px;
    height: 240px;
    background: url(../imgs/main__yst__bg.svg) no-repeat;
}

.section__research ul li:nth-child(2) a:hover {
    /* top: -240px; left: 450px; */
    /* filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4)); */
    background: url(../imgs/main__yst__bg__on.png) no-repeat;
}


.section__research ul li:nth-child(3) a {
    top: 0;
    left: 754px;
    width: 446px;
    height: 240px;
    background: url(../imgs/main__sag__bg.svg) no-repeat;
}

.section__research ul li:nth-child(3) a:hover {
    background: url(../imgs/main__sag__bg__on.png) no-repeat;
    /* filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4)); */
}

.section__research ul li a {
    position: absolute;
    display: block;
    text-align: center;
    padding-top: 60px;
    transition: all .3s ease-out;
}

.section__research ul li a img {
    filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4));
    transform: scale(1);
    transition: all .3s ease-out;
}

.section__research ul li a:hover img {
    filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4));
    transform: scale(1.1);
}

.section__notice {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 60px;
    display: flex;
}

/* tab */

/* tab default s */
ul.list li,
ul.list li.is_on {
    position: relative;
}

.tab__menu__notice ul.list,
.tab__menu__op ul.list {
    margin-top: 20px;
    width: 584px;
    display: flex;
    height: 41px;
    border-bottom: 1px solid #1d4e8f;
}

.tab__menu__notice ul.list li,
.tab__menu__op ul.list li {
    width: 292px;
}

.tab__menu__notice ul.list,
.tab__menu__op ul.list {
    height: 41px;
    border-left: 1px solid #b1b1b1;
}

.tab__menu__notice ul.list li a,
.tab__menu__op ul.list li a {
    display: block;
    height: 41px;
    font-size: 22px;
    font-weight: bold;
    color: var(--text-gray--color);
    padding-left: 20px;
    text-decoration: none;
    border: 1px solid #b1b1b1;
    border-left: none;
    border-bottom: none;
    text-align: left;
}

.tab__menu__notice ul.list li a:hover,
.tab__menu__op ul.list li a:hover {
    color: var(--text-primary-color);
}

.tab__menu__notice ul.list li.is_on a,
.tab__menu__op ul.list li.is_on a {
    position: relative;
    background-color: var(--text-primary-color);
    color: var(--text-white-color);
    border-color: #1d4e8f;
    /* border-bottom: 1px solid #fff; */
    text-align: left;
}

.tab__menu__notice ul.list li.is_on a::before,
.tab__menu__op ul.list li.is_on a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 1px;
    height: 40px;
    background-color: var(--text-primary-color);
    border-top: 1px solid var(--text-primary-color);
}



/* tab default e */

.cont_area {
    margin-top: 2.5rem;
    position: relative;
}

.cont_area .cont {
    display: none;
}

.cont_area div:first-child {
    display: block;
}

/* Outreach Programs tab e */

.outreachprograms {
    margin-left: 30px;
}

/* tab cont s */

.tab__content {
    margin-top: 40px;
}

.main__event ul li,
.main__books ul li {
    width: 100%;
    overflow: hidden;
}

.main__evt__img {
    display: block;
    width: 292px;
    height: 213px;
    overflow: hidden;
    object-fit: cover;
    /* border: 1px solid #ddd;
    padding: 10px; */
    transform: scale(1);
    transition: all .3s ease-out;
}

.main__evt__img:hover {
    transform: scale(1.1);
}

ul.list li span.tab__arrow {
    position: absolute;
    display: inline-block;
    top: 14px;
    left: 257px;
    width: 15px;
    height: 15px;
    background-image: url(../imgs/tab__arrow.svg);
}

ul.list li button.tab__arrow {
    position: absolute;
    top: 14px;
    left: 257px;
    width: 15px;
    height: 15px;
    background-image: url(../imgs/tab__arrow.svg);
    background-color: transparent;
    transition: all .3s ease-out;
}

ul.list li button.tab__arrow:hover {
    transform: rotate(180deg);
}

ul.list li.is_on a .tab__arrow {
    top: 13px;
    background-image: url(../imgs/tab__arrow__on.svg);
}

ul.list li.is_on a button.tab__arrow {
    top: 13px;
    background-image: url(../imgs/tab__arrow__on.svg);
    background-color: transparent;
    transition: all .3s ease-out;
}

ul.list li.is_on a button.tab__arrow:hover {
    transform: rotate(180deg);
}

/* tab cont e */


/* event__s*/

.main__event ul,
.main__books ul {
    display: flex;
}

.main__event li:nth-child(2),
.main__books li:nth-child(2) {
    margin-left: 20px;
}

.main__event h3 a,
.main__books h3 a {
    font-size: var(--font-size--20);
    font-weight: bold;
    color: var(--text-black-color);
}

.main__event p a,
.main__books p a {
    display: block;
    margin-top: 20px;
    font-size: var(--font-size--15);
    font-weight: 100;
    line-height: 1.75;
    color: var(--text-black-color);
}

.main__books p a{
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.main__event h3 a:hover,
.main__event p a:hover,
.main__books h3 a:hover,
.main__books p a:hover {
    text-decoration: underline;
}

/* event__e*/

/* evt book s */

/* .main__books ul:first-child li:first-child a {
    display: inline-block;
    width: 125px;
    height: 213px;
    background: url(../imgs/books_list_0001.png) no-repeat;
    background-position: center;
}

.main__books ul:first-child {
    display: flex;
    justify-content: space-between;
}

.main__books ul:first-child li:nth-child(2) h3 {
    width: 420px;
    font-size: var(--font-size--20);
    font-weight: bold;
}

.main__books ul:first-child li:nth-child(2) dl {
    display: flex;
    margin-top: 20px;
}

.main__books ul:first-child li:nth-child(2) dl dd {
    margin-bottom: 10px;
    font-size: var(--font-size--15);
    line-height: 26px;
}

.main__books ul:first-child li:nth-child(2) dl dd:first-child {
    width: 99px;
}

.no_book_img {
    width: 125px;
    height: 213px;
    background-color: #f9f9f9;
} */

/* evt book e */
/* Quick Header */
.main__quick__menu .quick__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    padding: 0 20px;
    top: 0;
    left: 317px;
    width: 357px;
    height: 40px;
    background-color: var(--text-primary-color);
}

.main__quick__menu .quick__header ul {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow-y: hidden;
}

.main__quick__menu .quick__header ul li:first-child {
    color: var(--text-white-color);
    font-size: var(--font-size--16);
    font-weight: bold;
}

.swiper__pagination__quick {
    width: auto;
}

.main__quick__menu .quick__header ul li:nth-child(2) {
    opacity: 0.6;
    cursor: pointer;
}

.main__quick__menu .quick__header ul li:nth-child(2):hover {
    opacity: 1;
}

.main__quick__menu .quick__header ul li:nth-child(3) {
    opacity: 0.6;
    width: 40%;
}

.main__quick__menu .quick__header ul li:nth-child(4) {
    cursor: pointer;
    opacity: 0.6;
}

.main__quick__menu .quick__header ul li:nth-child(4):hover {
    opacity: 1;
}

.swiper__pagination__quick>span {
    margin: 5px;
    background-color: #fff;
    opacity: .6;
}

.swiper__pagination__quick>span.swiper-pagination-bullet-active {
    opacity: 1;
}

/* quickmenu */
.quickmenu__swiper {
    width: 674px;
    height: 379px;
    margin: 40px 0;
    box-shadow: 0px 20px 30px #00000061;
}

.main__movie {
    width: 100%;
}

/* 브로슈어 */
.quick__menu__brochure {
    width: 100%;
    height: 100%;
    background: url(../imgs/quick__pdf__bg.jpg);
}

.quick__menu__brochure ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 365px;
    height: 379px;
    margin: 0 auto;
}

.quick__menu__brochure ul li {
    height: 319px;
    text-align: center;
}

.quick__menu__brochure ul li img {
    display: block;
    margin: 16px 0;
    box-shadow: 0px 20px 30px #00000061;
}

.quick__menu__brochure ul li p {
    color: #fff;
    font-size: var(--font-size--22);
    font-weight: bold;
}

.quick__menu__brochure ul li button {
    width: 100px;
    height: 28px;
    font-size: var(--font-size--13);
    font-weight: bold;
    line-height: 12px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: border .2s ease-in-out, box-shadow .2s ease-in-out;
    box-shadow: none;
    border-radius: 50px;
    background-color: transparent;
}

.quick__menu__brochure ul li button:hover {
    color: var(--text-white-color);
    border: 1px solid var(--text-primary-color);
    background-color: var(--text-primary-color);
}


/* 퀵메뉴 아이콘 */

.main__quick__menu {
    position: relative;
    display: flex;
    width: 1200px;
    height: 459px;
    margin: 0 auto;
    margin-bottom: 60px;
    background: linear-gradient(90deg, #fff 337px, #E1EBF5 0%);
}

.quick__apctp {
    background: radial-gradient(circle, rgba(148, 187, 233, 1) 0%, rgba(29, 78, 143, 1) 100%);
}

.__icons li a span {
    display: block;
}

.quickmenu {
    width: 526px;
    margin: 0 auto;
    margin-top: 40px;
}

.quickmenu .__icons {
    width: 446px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.quickmenu .__icons li a {
    display: block;
    width: 105px;
    height: 139px;
    text-align: center;
    color: var(--text-quickmenu--color);
}

.quickmenu .__icons li a:hover .quick__img {
    border-radius: 50%;
    background-color: var(--quick--background);
    border-radius: 0px 20px 30px #00000061;
    filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.6));
}

.quickmenu .__icons li a:hover .quick__title {
    text-decoration: underline;
}

.__icons .quick__img {
    display: block;
    width: 105px;
    height: 105px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4));
}

/* .__icons .quick__img:hover { border-radius: 50%; background-color: var(--quick--background); border-radius: 0px 20px 30px #00000061; } */

.quickmenu .__icons li:nth-child(1) a .quick__img {
    background-image: url(../imgs/main_quick_icon_a.svg);
}

.quickmenu .__icons li:nth-child(1) a:hover .quick__img {
    background-image: url(../imgs/main_quick_icon_a__on.svg);
}

.quickmenu .__icons li:nth-child(2) a .quick__img {
    background-image: url(../imgs/main_quick_icon_b.svg);
}

.quickmenu .__icons li:nth-child(2) a:hover .quick__img {
    background-image: url(../imgs/main_quick_icon_b__on.svg);
}

.quickmenu .__icons>li:nth-child(3) a .quick__img {
    background-image: url(../imgs/main_quick_icon_c.svg);
}

.quickmenu .__icons>li:nth-child(3) a:hover .quick__img {
    background-image: url(../imgs/main_quick_icon_c__on.svg);
}

.quickmenu .__icons>li:nth-child(4) a .quick__img {
    background-image: url(../imgs/main_quick_icon_d.svg);
}

.quickmenu .__icons>li:nth-child(4) a:hover .quick__img {
    background-image: url(../imgs/main_quick_icon_d__on.svg);
}

.quickmenu .__icons .quick__title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-top: 18px;
}

.quickmenu .__icons .quick__title:hover {
    text-decoration: underline;
}


.__linksites {
    width: 446px;
    margin: 81px auto 0;
    display: flex;
    justify-content: space-between;
}

.__linksites>li {
    width: calc(100% / 3 - 10px);
    height: 159px;
    box-shadow: 0px 4px 8px #98B3C4;
}

.__linksites>li:hover {
    box-shadow: inset 0px 5px 10px 0px #98B3C4;
}

.__linksites>li>a {
    display: block;
    color: var(--text-quickmenu--color);
}

.__linksites>li>a:hover {
    text-decoration: underline;
}

.__linksites>li>a .linksites__img {
    width: 140px;
    height: 82px;
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 0.4));
}

.__linksites>li:nth-child(1)>a .linksites__img {
    background-image: url(../imgs/aapps_logo.svg);
}

.__linksites>li:nth-child(2)>a .linksites__img {
    background-image: url(../imgs/aapps_bulletin_logo.svg);
}

.__linksites>li:nth-child(3)>a .linksites__img {
    width: 110px;
    background-image: url(../imgs/crossroad_logo.svg);
}

.__linksites>li>a .linksites__title {
    display: block;
    width: 110px;
    height: 35px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--font-size--12);
    line-height: 1.5;
    word-break: keep-all;
}

/* activitys */

.activities__listup ul li .activity__img {
    width: 320px;
    height: 240px;
    background-color: whitesmoke;
}

.activities__listup ul li .activity__img a:hover {
    font-weight: bold;
}

.activities__listup ul li .activity__img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.activities__listup ul li .activity__title {
    width: calc(100% - 340px);
}

.activities__listup ul li .activity__title .title a {
    font-size: 1rem;
}

.activities__listup ul li .activity__title ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.activities__listup ul li .activity__title ul li {
    position: relative;
    margin-right: 10px;
    padding-right: 10px;
}

.activities__listup ul li .activity__title ul li:after {
    content: '';
    position: absolute;
    background: #d7d7d7;
    width: 1px;
    height: 15px;
    right: 0;
    top: 3px;
}

.activities__listup ul li .activity__title ul li:last-child:after {
    display: none;
}


.activities__listup ul li .activity__title ul li::before {
    content: "";
    width: 1px;
    height: 10px;
    background-color: #000;
}


/* footer */

footer {
    position: relative;
    width: 100%;
    background-color: var(--footer-background);
}

footer .footer__container {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}

.footer__banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__container>h1 {
    display: inline-block;
    font-family: var(--font-family-pretendar);
    font-size: var(--font-size--22);
    font-weight: bold;
    margin-top: 30px;
}

.apctp__info {
    display: flex;
    margin-top: 20px;
    font-size: var(--font-size--13);
}

.apctp__info ul li {
    line-height: 27px;
}

.apctp__info ul:nth-child(1) li span:nth-child(1) {
    display: inline-block;
    /* width: 34px; 한글 */
    width: 95px;
    color: var(--text-gray3--color);
}

.apctp__info ul:nth-child(2) li span:nth-child(1) {
    color: var(--text-gray3--color);
}

.apctp__info ul li span:not(:nth-child(1)) {
    margin-left: 18px;
}

.apctp__info ul:nth-child(2) {
    position: absolute;
    left: 300px;
}

footer .footer__container h3 {
    display: inline-block;
    font-size: var(--font-size--13);
    font-weight: bold;
    margin-top: 20px;
}

/* banner */

.footer__banner {
    margin-top: 30px;
}


.footer__line {
    width: 1200px;
    height: 1px;
    margin-top: 20px;
    background-color: var(--text-gray4--color);
}

.footer__bottom__info {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* social */

.footer__social__icons {
    width: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__bottom__info li:nth-child(2) {
    font-size: var(--font-size--13);
}

.footer__social__icons>li a {
    display: block;
    width: 25px;
    height: 21px;
    background-repeat: no-repeat;
    overflow: hidden;
}

.footer__social__icons li:nth-child(1) a {
    background-image: url(../imgs/footer_social_icon_1.svg);
}

.footer__social__icons li:nth-child(1) a:hover {
    background-image: url(../imgs/footer_social_icon_1__on.svg);
}

.footer__social__icons li:nth-child(2) a {
    background-image: url(../imgs/footer_social_icon_2.svg);
}

.footer__social__icons li:nth-child(2) a:hover {
    background-image: url(../imgs/footer_social_icon_2__on.svg);
}

.footer__social__icons li:nth-child(3) a {
    background-image: url(../imgs/footer_social_icon_3.svg);
}

.footer__social__icons li:nth-child(3) a:hover {
    background-image: url(../imgs/footer_social_icon_3__on.svg);
}

.footer__social__icons li:nth-child(4) a {
    background-image: url(../imgs/footer_social_icon_4.svg);
}

.footer__social__icons li:nth-child(4) a:hover {
    background-image: url(../imgs/footer_social_icon_4__on.svg);
}

.visual__title {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 3.125rem;
    font-weight: 600;
    /* line-height: 200px; */
    color: #fff;
    text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
    padding: 170px 0 72px;
    text-align: left;
}

.colloquium__title__img {
    /* display: flex;
    margin-bottom: 40px; */
}

.colloquium__title__img img {
    margin: 40px 0;
    width: 100%;
}

.font__size__21 {
    font-size: var(--font-size--21);
}

.link__btn {
    /* width: 38px;
    height: 38px;
    border-radius: 38px; */
    background: var(--text-primary-color);
    font-weight: bold;
}

.m_slide {
    background-color: #fff;
}

/* sub */
.con_box {
    margin: 40px 0;
}

.con_box>p {
    margin: 10px 0;
    background: #fafbfc;
    border-radius: 16px;
    padding: 40px;
    margin-top: 20px;
    line-height: 1.7em;
}

/* 독후감 */

.etc__page__con {
    margin: 40px 0;
}

/* 연구사업 */
.border__btn {
    background-color: var(--text-primary-color);
    border-radius: 38px;
    color: #fff;
    padding: 8px 18px;
}

/* 벤리 */
.info1 table {
    margin-top: 40px;
}

/* 조직도 */
.org-map a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1rem !important;
}

/* info */
.info__office {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}

.info__office li:first-child {
    font-weight: bold;
}

/* network */
.network-01 div div:nth-child(31),
.network-01 div div:nth-child(9) {
    /* display: none; */
}

/* 게시판 */
#bo_v_atc>table {
    width: 100% !important;
    border-top: 3px solid #000;
    font-family: 'notoSans', sans-serif !important;
    font-weight: 400;
    color: #000 !important;
    text-align: justify;
}

/* 조직도 */
.org__map__wrap {
    width: 100%;
    text-align: center;
}

/* 네트워크 */
.symbol__title {
    margin-top: 50px;
    display: flex;
    align-items: center;
}

.symbol__title h3 {
    font-size: 20px;
    margin-left: 16px;
}

.symbol__title h3 a:hover {
    color: var(--text-primary-color);
}

.symbol__title .title__h__line {
    flex: 1;
    margin-left: 20px;
    height: 1px;
    background-color: #1D4E8F;
}

.symbol__title>a {
    display: block;
    width: 70px;
    height: 28px;
    line-height: 23px;
    font-size: 14px;
    font-weight: bold;
    color: #1d4e8f;
    border: 1px solid #1d4e8f;
    background: #fff;
    text-align: center;
}

.symbol__title>a:hover {
    background-color: #1D4E8F;
    color: #fff;
}

.mi__list {
    margin-top: 40px;
    /*display: flex;*/
	display: inline;
    justify-content: space-between;
}

.mi__list>li {
    width: calc(50% - 30px);
    float: left;
    height: 200px;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
    border-radius: 0.5rem;
    box-shadow: rgb(103 113 133 / 20%) 0.75rem 1.5rem 4rem 0rem;
    color: rgb(18, 29, 51);
    min-width: 0px;
    padding: 1.25rem;
    transition: background-image 0.6s ease 0s;
}
.mi__list>li { margin:15px 15px 15px 0;}
.mi__list>li:nth-child(2n) { margin-left:15px; }
@media (max-width: 700px){
   .mi__list>li {width: calc(100% - 15px); margin:0 0 15px; }
   .mi__list>li:nth-child(2n) { margin-left:0px; }
}



.mi__list>li ul li {
    margin-bottom: 0.25rem;
}

.mi__list>li ul li:first-child {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 1.25rem;
}

/* 국제협력 */
.scope__img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border: 1px solid #e7e7e7;
    border-radius: 1rem;
}

.scope__img img {
    width: 100%;
    height: auto;
    padding: 3rem;
}

.symbol__p {
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.75rem;
    text-align: justify;
}

/* 방문정보 */
.info__interior__img {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
}

/* 과학문화 */
.outreach__intro__imgs {
    width: 100%;
    margin-top: 30px;
    padding: 30px 40px;
    border-radius: 30px;
    background-color: #FAFBFC;
}

.outreach__intro__imgs ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.outreach__intro__imgs ul li {
    width: calc(100% / 3 - 10px);
    height: 394px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0px 8px 16px #00000014;
    overflow: hidden;
    transition: all 0.5s;
}

.outreach__intro__imgs ul li:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;/
}

.outreach__intro__imgs ul li>div {
    width: 100%;
    height: 50%;
    overflow: hidden
}

.outreach__intro__imgs ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all .3s ease-out;
}

.outreach__intro__imgs ul li img:hover {
    transform: scale(1.1);
}

.outreach__intro__imgs ul li p {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 12rem;
}


/* 과학도서 */
.apctp__book__frame {
    position: relative;
    width: 100%;
    height: 1500px;
    overflow: hidden;
}

.apctp__book__frame iframe {
    border: none;
    width: 100%;
    height: 1500px;
}

/* 정보마당 */
.scope__img__mg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* border: 1px solid #e7e7e7;
    border-radius: 1rem; */
    margin-top: 40px;
}

/* 오시는 길 */

.office__container {
    position: relative;
}

.office_map {
    width: 100%;
    height: 600px;
    background: #fff;
    transition: box-shadow 0.3s;
    border: 1px solid #333333;
}

.office_text {
    background: #fff;
    position: absolute;
    bottom: -50px;
    right: -50px;
    z-index: 9;
    padding: 30px;
    border: 1px solid #333333;
    box-shadow: rgb(50 50 93 / 13%) 0px 20px 50px -20px, rgb(0 0 0 / 7%) 0px 20px 40px -20px;
}

.office_text img {
    height: 25px;
    display: inline-block;
    margin-bottom: 20px;
}

.office_text dl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 15px;
}

.office_text dl dt {
    width: 50px;
    font-weight: 600;
    padding: 3px 0;
}

.office_text dl dd {
    width: calc(100% - 50px);
    padding: 3px 0;
}

.root_daum_roughmap_landing {
    width: 100% !important;
    height: 100% !important;
}



.yst__info {
    display: flex;
    align-items: flex-start;
}

.facilities__table {
    display: table;
    table-layout: fixed;
}

/* 과학도서 */
/* sub_title */
.sub_title {
    text-align: center;
    margin: 20px 0 65px;
}

.sub_title .title .btn_prev {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50px;
    width: 25px;
    height: 25px;
    background: none;
    margin: -3px 15px 0 0;
}

.sub_title em {
    color: #888;
    font-size: 1em;
    font-weight: 900;
    text-transform: capitalize;
    white-space: nowrap;
    margin-top: 20px;
}

.sub_title h2 {
    font-size: 2.4em;
    line-height: 1.3em;
    font-weight: 900;
    font-family: godo;
    position: relative;
    display: flex;
    letter-spacing: -0.5px;
    align-items: center;
    justify-content: center;
}

.sub_title .title strong {
    padding: 5px 15px;
    border: 1px solid #333;
    border-radius: 50px;
    display: inline-block;
    white-space: nowrap;
    font-weight: 900;
    font-size: 1.2em;
    margin-top: 10px;
}

.scontents .inner {
    margin: 80px 0;
}

/*article*/
.rearticle {}

.article_list ul {
    width: calc(100% + 40px);
    display: flex;
    flex-wrap: wrap;
    margin: 0px -20px 0;
}

.article_list ul li {
    width: calc(33.333% - 40px);
    margin: 20px;
}

.article_list ul li .img_box {
    width: 100%;
    height: 0;
    padding-bottom: 61.808%;
    border: 1px solid #ededed;
    background: url(../imgs/logo.svg) 50% 50% no-repeat #f4f4f4;
    background-size: 30%;
    transition: all 0.5s;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
}

.article_list ul li .bg_box {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    transition: box-shadow 0.5s, transform 0.5s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.article_list ul li .img_box:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    /*  transform:scale(1.01); */
}

.article_list ul li .img_box:hover .bg_box {
    transform: translate(-50%, -50%) scale(1.1);
    transition: transform .5s;
}

.article_list ul li .text_box {
    font-size: 13px;
    position: relative;
}

.article_list ul li .category {
    color: #1a88d9;
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 0 13px;
    display: inline-block;
    font-size: 0.9em;
    position: relative;
}

.article_list ul li .category::after {
    content: '';
    width: 0;
    height: 1px;
    background: #1a88d9;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s;
}

.article_list ul li .category:hover::after {
    width: 100%;
}

.article_list ul li .title {
    width: 100%;
    display: block;
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.5em;
    transition: all .3s;
}

.article_list ul li .title:hover {
    color: #1a88d9;
}

.article_list ul li .by {
    color: #888;
    font-size: 0.9em;
    line-height: 1.4em;
    display: flex;
    margin-bottom: 13px;
    align-items: center;
}

.article_list ul li .text {
    margin-top: 6px;
}

.article_list ul li .text a {
    -webkit-line-clamp: 2;
    line-height: 1.7em;
}

.article_list ul li.on {
    opacity: 0.3;
}

.article_list ul li .time {
    color: #888;
    background: url(../images/icon_time.svg) 0% 50% no-repeat;
    background-size: 15px 15px;
    padding-left: 20px;
}

.article_list ul li .text_box .resp {
    position: absolute;
    top: 0;
    right: 0;
}

.article_content .resp .like {
    cursor: pointer;
}

.article_content .resp .left {
    display: flex;
}

.article_content .resp .left .say {
    margin-left: 25px;
}

/*페이지수*/
.sorting_wrap {
    margin-bottom: 30px;
    color: #666;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.sorting_wrap .total {
    margin-top: 15px;
    font-weight: 500;
}

.sorting_wrap .total .count {
    color: #1a88d9;
    font-weight: 900;
}

/*검색*/
.search_wrap {
    display: flex;
}

.search_select {
    width: 150px;
    height: 40px;
    position: relative;
    border: 1px solid #333;
    padding-left: 10px !important;
    border-radius: 50px;
    margin-right: 5px;
    font-weight: 500;
    transition: all 0.3s !important;
}

.search_box {
    width: 300px;
    height: 40px;
    position: relative;
    border: 1px solid #333;
    border-radius: 50px;
    transition: all 0.3s !important;
    font-weight: 500;
}

.search_select:hover,
.search_box:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
}

.search_box .inputText {
    width: calc(100% - 40px);
    height: 100%;
    float: left;
    border: none;
    padding-left: 15px;
    border-radius: 40px 0 0 40px !important;
}

.search_box .btn_search {
    width: 40px;
    height: 100%;
    font-size: 1.2em;
    border: none;
    border-radius: 0 40px 40px 0 !important;
    color: #333;
    transition: all 0.3s;
    background: transparent;
}

.search_box button:hover,
.search_box .inputText:hover {
    box-shadow: none;
}

.search_box .btn_search:hover {
    color: #000;
}

/*pagenation*/
.pagination {
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.pagination ul {
    display: flex;
    justify-content: center;
    padding-left: 0;
    border-radius: 4px;
}

.pagination li {
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
}

.pagination li a {
    display: inline-block;
    cursor: pointer;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #333;
    font-size: 1em;
    transition: background-color 0.3s;
}

.pagination li a:hover {
    background-color: #ededed;
}

.pagination li.active a {
    font-weight: bold;
    color: #fff;
    background: #333;
}

.pagination .first,
.pagination .last,
.pagination .next,
.pagination .prev {
    margin: 0 2px;
}

.bottom_wrap .pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
}

/*article detail view*/
.article_header {
    text-align: center;
    margin-top: 40px;
}

.sub_title .article_header.title strong {
    font-size: 1.1em;
    display: block;
    border: none;
    padding: 0;
    border-radius: 0;
}

.article_header strong a {
    color: #1a88d9;
    text-transform: capitalize;
    font-weight: 900;
}

.article_header h2 {
    font-size: 2.4em;
    font-weight: 900;
    margin: 20px 0;
}

.article_header .subtitle {
    font-size: 1.2em;
    margin-bottom: 10px;
    display: block;
}

.article_header em {
    font-weight: 400;
    display: block;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.3em;
}

.article_header .header_img {
    width: 100%;
    margin-top: 50px;
}

.article_header .header_img img {
    width: 100%;
}

.sub_title h2.webznView {
    font-size: 1.8em;
}

/*기사내용*/
.article_content {
    width: 100%;
    /* border-left:1px solid #ededed; padding-left:100px; */
    font-size: 1.2em;
    line-height: 2em;
    transition: all 0.5s;
    transition-delay: 0.2s;
}

.article_content .share {
    margin-top: 50px;
}

.article_content figcaption {
    font-size: 0.8em;
    line-height: 1.6em;
}

.article_content .resp {
    margin: 50px 0 20px;
    padding: 15px 15px 15px 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: rgba(50, 50, 93, 0.1) 0px 10px 20px -10px, rgba(0, 0, 0, 0.20) 0px 15px 30px -15px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.article_content .resp .share {
    margin-top: 0;
    display: flex;
    align-items: center;
}

.article_content .resp .like span {
    width: 25px;
    height: 25px;
}

.article_content .resp .like span::before {
    background-size: 25px 50px;
}

.article_view .writer_info {
    transition: margin-top 0.5s, opacity 0.5s, top 0.5s, bottom 0.5s;
    /* padding:40px 20px; border-radius:15px; background:#333; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; */
}

.article_view .writer_info .writer_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.article_view .writer_info .writer {
    display: flex;
    align-items: center;
}

.article_view .writer_info .writer span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    background: #ddd;
    color: #333;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    margin-right: 10px;
}

.article_view .writer_info .writer strong {
    width: 100%;
}

.article_view.active .article_content {
    opacity: 1;
    margin-top: 0;
}

.article_view.active .writer_info {
    opacity: 1;
    margin-top: 0;
}

.article_view.active .writer_info.float {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-480px);
}

.article_view.active .writer_info.float.fix {
    position: absolute;
    bottom: 50px;
    top: auto;
    left: 0;
    transform: translateX(0);
    transition: bottom 0.5s
}

/*기사컨텐츠*/
.article_view {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 50px 0;
    align-items: flex-start;
    border-top: 1px solid #333;
    margin-top: 50px;
}

.writer_info {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.writer_info .writer_pic {
    width: 130px;
    height: 130px;
    border-radius: 130px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.5);
}

.writer_info strong {
    font-size: 1.5em;
}

.writer_info em {
    color: #888;
    font-weight: 500;
    margin-top: 13px;
    font-size: 0.9em;
    line-height: 1.4em;
    text-align: center;
}

.writer_info button {
    margin-top: 20px;
    /* width:100%; */
    border-color: #333;
    border-radius: 50px;
}

.writer_info button span {
    margin-left: 10px;
    font-size: 0.8em;
}

/* 기사 이미지 */
.fr-view img {
    width: 100% !important;
    object-fit: none;
}

/* 국제협력 */

.worldmap__wrap {
    width: 100%;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
}

svg {
    padding: 20px;
}

#tooltip {
    padding: 15px;
    background-color: #eee;
    color: #9c9c9c;
    width: 100%;
    text-align: center;
}

.land {
    fill: #ccc;
    fill-opacity: 1;
    stroke: white;
    stroke-opacity: 1;
    stroke-width: 0.5;
    transition: 0.2s ease-out;
}

.land_apctp {
    fill: #1D4E8F;
    fill-opacity: 1;
    stroke: white;
    stroke-opacity: 1;
    stroke-width: 0.5;
    transition: 0.2s ease-out;
}

.land:hover {
    fill: #a9a9a9;
}

.land_apctp:hover {
    fill: #a9a9a9;
}

.tooltip {
    background-color: #333;
    color: #fff;
    padding: 1em;
}


@media screen and (max-width: 1200px) {
    .navbar {
        width: 100%;
        justify-content: space-around;
    }

    .navbar_menu_top {
        width: 100%;
    }

    .section__activies {
        width: 100%;
    }

    .section__title__1200 {
        width: 95%;
        justify-content: space-around;
    }

    .apctp__swiper {
        width: 95%;
    }

    .slide__space {
        display: none;
    }

    .navbar_gnb>ul {
        width: 100%;
    }

    .activities__swiper {
        width: 95%;
    }

    /*  */
    .section__ws {
        width: 95%;
    }

    .main__list__board li a h4 {
        width: 60%;
    }

    .cont_area ul li {
        width: 100%;
    }

    /* 연구사업 */

    .section__research {
        width: 95%;
    }

    .section__research ul {
        width: 100%;
    }

    .section__notice {
        width: 95%;
    }

    .main__quick__menu {
        width: 95%;
    }

    .workshops__conferences,
    .seminars__lectures,
    .notice__l,
    .notice__r,
    .outreachprograms {
        width: 47.5%;
    }

    /* research */

    .section__research ul {
        width: 100%;
    }

    .section__research ul li {
        width: calc(100% / 3);
        background: rgba(0, 0, 0, 0.62);
        /* filter: grayscale(100%); */
    }

    .section__research ul li a {
        position: relative;
    }

    .section__research ul li:nth-child(1) a {
        width: 100%;
        left: 0;
        background: none;
    }

    .section__research ul li:nth-child(1) a:hover {
        background: none;
        background: rgba(255, 255, 255, 0.38);
    }

    .section__research ul li:nth-child(2) a {
        width: 100%;
        left: 0;
        background: none;
    }

    .section__research ul li:nth-child(2) a:hover {
        background: none;
        background: rgba(255, 255, 255, 0.38);
    }

    .section__research ul li:nth-child(3) a {
        width: 100%;
        left: 0;
        background: none;
    }

    .section__research ul li:nth-child(3) a:hover {
        background: none;
        background: rgba(255, 255, 255, 0.38);
    }

    /* research end */

    footer .footer__container {
        width: 95%;
    }

    .footer__line {
        width: 100%;
    }

    /* tab menu */

    .tab__menu__notice ul.list,
    .tab__menu__op ul.list {
        width: 100%;
    }

    ul.list li button.tab__arrow {
        left: unset;
        right: 20px;
    }

    .cont_area div:first-child {
        width: 95%;
    }

    .cont_area div:nth-child(2) {
        width: 95%;
    }

    /* quick */

    /* .main__quick__menu .quick__header{
        right: 0;
    }

    .quickmenu__swiper{
        
    }

    .quickmenu{
        width: 38%;
    }

    .quickmenu .__icons{
        width: 100%;
        justify-content: space-around;
    }

    .quickmenu .__icons li a{
        width: 100%;
    }

    .__icons .quick__img{
        width: 100%;
    }

    .__linksites{
        justify-content: space-around;
        width: 100%;
        padding: 0 10px
    }

    .__linksites>li{
        width: calc(100% / 3 - 5px);
    }

    .__linksites>li>a .linksites__img{
        width: 100%;
    } */

    .main__quick__menu {
        flex-direction: column;
        height: auto;
        background: none;
        /* background: #E1EBF5; */
    }

    .main__quick__menu .quick__header {
        width: 100%;
        left: 0;
    }

    .quickmenu .__icons {
        width: 70%;
        justify-content: space-around;
    }

    .quickmenu__swiper {
        /* margin: 80px 0; */
        width: 100%;
        height: 379px;
        font-size: 0;
        background-color: #000;
    }

    .quickmenu {
        width: 100%;
        margin-top: 0;
        background-color: #E1EBF5;
    }

    .__linksites {
        width: 60%;
        margin: 40px auto;
    }

    .quick__menu__brochure {
        background-size: cover;
    }

    .slide__h2 {
        width: 95%;
    }

    .slide__h3 {
        width: 80%;
        margin: 20px auto;
    }

    .main__evt__img {
        width: 100%;
        height: auto;
    }

    .main__books ul:first-child li:nth-child(2) h3 {
        width: 100%;
    }

    .visual__title {
        /* line-height: 260px; */
        width: 96%;
    }

    /* 독후감 */
    .etc__page__title {
        margin-top: 60px;
    }

    /* 오시는길 */
    .office_text {
        right: 30px;
        bottom: 30px;
    }

}

@media screen and (max-width: 1100px) {
    .header {
        height: 477px;
        padding-top: 90px;
    }

    .hd__gd::before {
        display: none;
    }

    .navbar__wraper {
        display: none;
    }

    .nav__space {
        display: none;
        /* height: 90px; */
    }

    .main__movie {
        width: 100%;
        height: 100%;
    }

    .footer__banner {
        flex-wrap: wrap;
    }

    .main_modal_wrap {
        top: 80px;
        /* left: 50%;
        translate: -50%; */
    }

    /* Upcoming */
    .section__activies__ctl {
        display: none;
    }

    /* 채용공고 */

    #bo_v_con table {
        word-break: keep-all;
        vertical-align: baseline;
        overflow-x: auto;
    }

    #bo_v_con table tbody tr:first-child td {
        word-break: keep-all;
    }

    /* 정보 */
    .con_box {
        overflow-x: auto;
    }

    .con_box table {
        word-break: keep-all;
    }


    /* 조직도 */
    .org__map {
        width: 800px;
        height: 600px;
        background: url(../../../theme/d/html/image/n/company/org.jpg) no-repeat;
        margin: 0 auto;
    }

    .org__map ul {
        display: flex;
        flex-wrap: wrap;
    }

    .org__map ul li {
        width: calc(100% / 3);
    }

    /* 행사 */
    #bo_v_atc {
        overflow-x: auto;
    }

    #bo_v_atc table {
        width: 100% !important;
    }

    section#bo_v_atc table tr td {
        word-break: normal;
    }

    /* 서브메뉴 */


}

@media screen and (max-width: 900px) {
    .article_list ul li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 15px 15px 25px;
    }

    .article_list ul li .img_box {
        width: 180px;
        padding-bottom: 0;
        height: 111px;
        border-radius: 10px;
    }

    .article_list ul li .img_box a {
        border-radius: 10px;
    }

    .article_list ul li .title {
        font-size: 1.3em;
    }

    .article_list ul li .text_box {
        width: calc(100% - 200px);
    }
}

@media screen and (max-width: 820px) {

    .__linksites {
        width: 70%;
    }

    .footer__banner li {
        width: calc(100% / 4);
    }

    .section__ws {
        width: 95%;
        flex-direction: column;
    }

    .workshops__conferences,
    .seminars__lectures {
        width: 100%;
    }

    .seminars__lectures {
        margin-top: 40px;
        margin-left: 0;
        height: auto;
    }

    /* JRG */
    .peoples ul {
        display: flex;
        flex-direction: column;
    }

    .person .imgArea {
        margin: 0 auto;
    }

    .peoples ul.grid2.type11.typeVertical li.person .imgArea {
        margin: 0 auto;
    }

    .peoples ul.grid2.type11.typeVertical li.person {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    .peoples ul.grid2.type11.typeVertical li.person .infoArea {
        padding: 40px !important;
        border: 1px solid #ddd;
        margin: 20px 0 40px;
    }

    .peoples ul.grid2.type10 li.person .imgArea {
        margin: 0 auto !important;
    }

    .peoples ul.grid2.type10 li.person .infoArea {
        padding: 1rem;
        margin: 20px 0;
    }
}

@media screen and (max-width: 700px) {
    .article_list ul {
        width: 100%;
        margin: 0;
    }

    .article_list .article_wrap ul {
        margin: 0;
        width: 100%;
    }

    .article_list ul li {
        margin: 0 0 30px;
    }

    .article_list ul li:last-child {
        margin: 0;
    }
}

@media screen and (max-width: 720px) {
    .outreach__intro__imgs ul li {
        width: calc(100% / 2 - 10px);
    }

    .office_map {
        height: 250px;
    }

    .office_text {
        position: static;
    }
}

@media screen and (max-width: 600px) {
    .article_list ul li .img_box {
        margin-bottom: 15px;
        width: 130px;
    }

    .article_list ul li .text_box {
        width: calc(100% - 150px);
    }

    .article_list ul li .category {
        font-size: 0.8em;
    }

    .article_list ul li .title {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .article_list ul li .text {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 500px) {
    .article_list ul {
        justify-content: space-between;
    }

    .article_list ul li {
        width: calc(50% - 10px);
        display: block;
        margin: 0 0 50px;
    }

    .article_list ul li:last-child {}

    .article_list ul li .img_box {
        width: 100%;
        height: 0;
        padding-bottom: 61.808%;
    }

    .article_list ul li .text_box {
        width: 100%;
    }

    .article_list ul li .category {
        margin: 0 0 2px;
    }

    .article_list ul li .title {
        margin-bottom: 10px;
        line-height: 1.3em;
        font-size: 1.1em;
    }

    .article_list ul li .text {
        margin-top: 9px;
    }

    .article_list ul li .text a {
        line-height: 1.5em;
    }

    .article_list ul li .by {
        width: 100%;
        font-size: 10px;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

@media screen and (max-width: 480px) {

    html,
    body {
        overflow-x: hidden;
    }

    .wrap {
        height: 100vh;
    }

    .slide__h2 {
        width: 95%;
        height: auto;
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .slide__h3 {
        width: 95%;
        margin-top: 10px;
        height: auto;
        line-height: 1.5rem;
    }

    .slide__morebtn {
        margin-top: 16px;
    }

    .slide__morebtn a {
        margin-top: 10px;
    }

    .section__ws {
        flex-direction: column;
    }

    .workshops__conferences,
    .seminars__lectures,
    .notice__l,
    .notice__r,
    .outreachprograms {
        width: 100%;
    }

    .seminars__lectures {
        margin-top: 40px;
        margin-left: 0;
        height: auto;
    }

    .main__list__board li a h4 {
        width: 50%;
    }

    .cont_area ul li {
        width: 100%;
    }

    .section__research ul {
        flex-direction: column;
        height: auto;
    }

    .section__research ul li {
        width: 100%;
    }

    .section__research ul li:nth-child(2) {
        background: url(../imgs/Research__programs__bg.png) center;
    }

    .section__research ul li:nth-child(2) a {
        background-color: rgba(0, 0, 0, 0.62);
    }

    .section__research ul li:nth-child(3) {
        background: url(../imgs/Research__programs__bg.png) right;
    }

    .section__research ul li:nth-child(3) a {
        background-color: rgba(0, 0, 0, 0.62);
    }

    /* notice */

    .section__notice {
        flex-direction: column;
    }

    .outreachprograms {
        margin-top: 40px;
        margin-left: 0;
    }

    .notice__r {
        margin-left: 0;
        margin-top: 40px;
    }

    /* Main Outreach */
    .main__event ul,
    .main__books ul {
        flex-direction: column;
    }

    .cont_area div:first-child {
        width: 100%;
    }

    .main__event li:nth-child(2),
    .main__books li:nth-child(2) {
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
    }

    /* quickmenu */

    .__linksites {
        flex-direction: column;
        width: 95%;
    }

    .apctp__info {
        display: block;
    }

    .apctp__info ul:nth-child(2) {
        position: relative;
        left: 0;
    }

    .quickmenu .__icons {
        width: 100%;
    }

    .quickmenu .__icons li a {
        width: 100%;
        height: auto;
        margin: 10px 0;
    }

    .__icons .quick__img {
        width: 100%;
    }

    .__linksites>li {
        width: 100%;
    }

    .__linksites>li:nth-child(1)>a .linksites__img {
        background-image: url(../imgs/aapps_logo.svg);
    }

    .__linksites>li:nth-child(2)>a .linksites__img {
        background-image: url(../imgs/aapps_bulletin_logo.svg);
    }

    .__linksites>li:nth-child(3)>a .linksites__img {
        background-image: url(../imgs/crossroad_logo.svg);
    }

    .__icons .quick__img {
        width: 105px;
    }

    /* footer */

    .footer__bottom__info {
        flex-direction: column;
    }

    .footer__bottom__info li {
        margin-bottom: 1rem;
    }

    .footer__banner li {
        width: calc(100% / 3);
        margin: 5px 0;
    }

    .footer__bottom__info li:nth-child(2) p {
        text-align: center;
    }

    .main__evt__img {
        /* border: 1px solid #ddd;
        padding: 0 10px; */
    }

    .apctp__info ul:nth-child(1) li span:nth-child(1) {
        width: 30%;
    }

    /* 메인 게시판 효과 */

    a.link::after {
        content: '';
        width: 0;
        height: 0;
        background: #fff;
    }

    .quickmenu .__icons {
        width: 100%;
        flex-wrap: wrap;
    }

    .__icons li {
        width: calc(100% / 2);
    }

    /* 학술 */

    .top-cate.type1 ul {
        flex-direction: column;
    }

    .top-cate.type1 ul li.on {
        width: 100%;
    }

    .top-cate.type1 ul li {
        width: 100% !important;
    }

    /* 학술활동 */
    .activities-read table.type2 {
        min-width: 900px;
    }

    .scope__img img{
        padding: 1em;
    }

    /* 연구논문 */
    .research-listup ul li p {
        margin: 10px;
    }

    .research-listup ul li p span {
        width: 30% !important;
    }

    .research-listup ul li p b {
        width: 70% !important;
    }

    /* 벤자민 */
    .peoples {
        overflow-x: auto;
    }

    .tbl_wrap {
        overflow-x: auto;
    }

    .tbl_wrap table {
        width: 100%;
    }

    /* 세미나 및 강연 */
    .activities-listup ul li {
        flex-direction: row !important;
    }

    .activities-listup ul li .seminar_right {
        margin: 0 !important;
    }

    .activities-listup ul li p {
        display: flex;
        flex-direction: column;
    }

    .activities-listup ul li p.title b {
        font-size: 1rem;
    }

    .activities-listup ul li p:first-child span,
    .seminar_right .organizer span {
        display: none;
    }

    .activities-listup ul li .seminar_img {
        margin-right: 10%;
    }

    .seminar_right .organizer b a {
        width: 100px;
        height: 28px;
        line-height: 24px;
    }

    .activities-listup ul li {
        max-height: unset !important;
    }

    /* 사무국 */
    .peoples ul.grid2.type11 li.person .imgArea {}

    .peoples ul.grid2.type11 li.person .infoArea {
        /* width: 100% !important;  */
        /* padding: 20px !important;         */
    }

    /* jrg */
    .peoples ul.grid1.type12 li.person .imgArea {
        float: none !important;
        margin: 0 auto !important;
    }

    .peoples ul.grid1.type12 li.person .infoArea {
        width: 100% !important;
        padding: 40px !important;
        border: 1px solid #ddd;
        margin-top: 1rem;
    }

    .peoples ul.grid1.type12 li.person .infoArea .s1 p {
        line-height: 1.2rem;
    }


    /* 독후감 */

    .reading- table {
        width: 100% !important;
    }

    /* 조직도 */

    .org-map a {
        background-color: var(--text-primary-color);
        height: auto;
    }

    .org-map a {
        display: flex !important;
        height: 48px !important;
        line-height: 13px !important;
        align-items: center;
        justify-content: center;
        background-color: #1D4E8F !important;
        font-size: 10px !important;
    }

    /* 이벤트 */
    #bo_cate ul {
        margin-top: 1rem;
    }

    /* 과학문화-소개 */
    .outreach__intro__imgs ul li {
        width: calc(100% / 1 - 10px);
    }

    /* 회사 소개 */
    [class~=company] [class~=ceo_img] img {
        width: 100% !important;
    }

    /* 방문자 */
    .coll_top {
        padding: 30px 10px;
    }

    /* 국제협력 */
    .mi__list{
        flex-direction: column;
    }

    .mi__list>li{
        width: 100%;
        margin-bottom: 20px;
    }


}

@media screen and (max-width: 450px) {

    .main_modal_wrap {
        width: calc(100% - 2em);
        height: auto;
        top: 80px;
        left: 1em;
    }

    .modal_contr.swiper-pagination span {
        margin: 0 5px !important;
    }

    .main_modal .modal_content {
        width: 100%;
        height: auto;
    }

    .main_modal .modal_content .swiper-slide {
        width: 100% !important;
    }

    .main_modal .modal_content .swiper-slide a {
        width: 100%;
        height: auto;
        display: flex;
    }

    .main_modal .modal_content img {
        width: 100%;
        height: auto !important;
        min-height: 0;
    }

    /* 조직도 */
    .peoples ul.grid2.type10 li.person {
        display: flex;
        flex-direction: column;
    }
}

@media all and (max-width: 410px) {
    .workshops__conferences .section__title>h2 {
        width: 50%;
    }
}

@media all and (max-width: 360px) {
    .modal-slide-control {
        margin: 13px 0;
        bottom: 100px;
    }

    .main_modal .modal_control {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 10px 14px 15px;
    }

    .main_modal .modal_control .btn_s {
        height: 35px;
        width: 100%;
        margin-top: 5px;
    }

    .main_modal_wrap {
        min-height: 0;
    }

    
}

@media screen and (max-width: 320px) {
    .main__list__board li a h4 {
        width: 50%;
    }

}



/* keyframe */

@keyframes textDown {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}


@keyframes textshow {
    0% {
        letter-spacing: 1em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        letter-spacing: 0;
        opacity: 1;
    }
}

@keyframes skip {
    from {
        opacity: 0;
        transform: translate(-50%, -50%);
    }

    20% {
        opacity: 0;
        transform: translate(-50%, 250%);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    to {
        transform: translate(-50%, -50%);
    }
}

@keyframes fadeupInforLogin {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }

    100% {
        transform: translateY(-10%);
        opacity: 1;
    }
}

@keyframes fadeupInforLoginText {
    0% {
        transform: translateY(50%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 0.6;
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomUp {
    0% {
        transform: translateY(50%) scale(.6);
        opacity: 0;
    }

    50% {
        transform: translateY(-10%) scale(1.05);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        transform: translateY(0%);
        opacity: 1;
    }

    100% {
        transform: translateY(50%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIndot {
    0% {
        opacity: 0;
        width: 0;
        height: 0;
    }

    100% {
        opacity: 1;
        width: 17px;
        height: 17px;
    }
}

@keyframes fadeup {
    0% {
        transform: translateY(50%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeLeft {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }

    50% {
        transform: translateX(-1%)
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeRight {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }

    50% {
        transform: translateX(1%)
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}