@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=Questrial&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

.ibm-plex-sans-kr-light {font-family: "IBM Plex Sans KR", sans-serif; font-style: normal; font-weight: 300;}
.ibm-plex-sans-kr-regular {font-family: "IBM Plex Sans KR", sans-serif; font-style: normal; font-weight: 400;}
.ibm-plex-sans-kr-medium {font-family: "IBM Plex Sans KR", sans-serif; font-style: normal; font-weight: 500;}
.ibm-plex-sans-kr-semibold {font-family: "IBM Plex Sans KR", sans-serif; font-style: normal; font-weight: 600;}
.ibm-plex-sans-kr-bold {font-family: "IBM Plex Sans KR", sans-serif; font-style: normal; font-weight: 700;}
.Questrial {font-family: "Questrial", sans-serif; font-weight: 400;font-style: normal;}
.roboto-condensed {font-family: "Roboto Condensed", sans-serif;font-optical-sizing: auto;font-style: normal;}

/* page title */
.bracket-label {position: relative;display: inline-flex;align-items: center;justify-content: center; padding: .6rem 1rem; font-size: 2.5rem; text-transform: uppercase; color: #055ea5; line-height: 1; font-weight: 700; margin:8rem 0 3rem;}
.bracket-label::before {content: '';position: absolute;top: 0;left: 0; width: .8rem; height: .8rem; border-top: 1.5px solid #055ea5;border-left: 1.5px solid #055ea5;}
.bracket-label::after {content: '';position: absolute;bottom: 0;right: 0; width: .8rem; height: .8rem; border-bottom: 1.5px solid #055ea5;border-right: 1.5px solid #055ea5;}
.bracket-label .tr {position: absolute;top: 0;right: 0; width: .8rem; height: .8rem; border-top: 1.5px solid #055ea5;border-right: 1.5px solid #055ea5;}
.bracket-label .bl {position: absolute;bottom: 0;left: 0;width: .8rem;height: .8rem; border-bottom: 1.5px solid #055ea5;border-left: 1.5px solid #055ea5;}





/* subpage img */
@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
.fade-in-fwd{-webkit-animation:fade-in-fwd .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-fwd .6s cubic-bezier(.39,.575,.565,1.000) both; animation-delay:.5s;}


@keyframes kenburns-bottom {
  0% {transform: scale(1.05) translateY(0); transform-origin: 50% 84%;}
  100% {transform: scale(1) translateY(0); transform-origin: bottom;}
}


.sub-visual-bg {padding:16rem 0 12rem; background:url(/img/sub_bar.jpg) no-repeat right bottom; animation:kenburns-bottom 1s ease-in forwards; }


/* 텍스트 전체를 감싸는 영역 */
  .framer-text-reveal {
    font-size: 5rem; /* 글자 크기 */
    font-family: 'Questrial';
    color: #ffffff;
    text-align: center;
    margin: 0;
    display: flex;
    justify-content: center;
    line-height: 1.4;
    overflow: hidden; /* 글자가 아래에서 올라올 때 영역 밖을 숨김 (마스크 효과) */
  }

  /* 개별 글자(알파벳) 설정 */
  .framer-text-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%); /* 초기 위치를 텍스트 높이만큼 아래로 내림 */
    /* 애니메이션 속도 및 부드러운 가속도(Cubic-bezier) 적용 */
    animation: revealText 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    /* HTML 인라인 스타일에서 지정한 --delay 변수값을 가져와 적용 */
    animation-delay: var(--delay); 
  }

  /* 키프레임 애니메이션: 아래에서 위로 올라오며 투명도 100%가 됨 */
  @keyframes revealText {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }





/* login */
.arccslogin {min-height:70vh; display:flex; align-items: center; width: 400px; margin: 0 auto;}
.um-account-name {padding: 1rem 10px 2rem; font-size: 1.3rem;font-weight: 700;font-family: 'Titillium Web';color: #0e559f;text-transform: uppercase;}


/* Footer */
.copyright {width:90%; max-width:1680px; margin:0 auto; text-align: left; display: flex; align-items: center; padding:1rem 1rem 0.5rem;}
.copyright > h6 {color:#8c8c8c; padding-top:10px;}
.mfn-footer a:not(.button,.icon_bar,.mfn-btn,.mfn-option-btn) {color:#8c8c8c;}
.banner-h {max-height: 64px; height:90%;}
#back_to_top.in_footer {right: 25px !important;}
.copyright_apita, .mfn-footer h6 {color: #8c8c8c; font-family: IBM Plex Sans KR;font-size: .9rem; line-height: 1.7; margin-bottom: 0;}
.apita_logo {width:80%; max-width: 175px; opacity: 0.33;}

/* 2024 가이드라인 */
.ppt-background {display: flex; flex-wrap: wrap; gap:2rem;}
.ppt-background > div {width: 48.6%;}

/* Precongress Workshop */

.workshop-day {display: flex; flex-wrap: wrap; justify-content: space-between; gap:2rem;}
.workshop-day > div {width: 30.5%;}
.workshop-day h3 {text-transform: uppercase; margin-bottom: 0; text-align: center; padding: 10px; background:#217bcb;}
.workshop {padding: 2rem 2rem 0; word-break: keep-all; min-height: 200px; border:1px solid #217bcb;}
  .workshop h4 {font-weight: 600; color:#343434;}
  .workshop ul {padding-bottom: 2rem; color:#343434;}
  .section-tit-day4 {font-size:1.3rem; font-weight: 500; line-height: 1.5; color:#343434; margin-bottom: 5px;}
  .entry .title-day4 > h3 {font-size:1.5rem; font-weight: 600; line-height: 1.4; color:#74318e; min-width: 120px;}

.connect {flex-flow: column;align-items: center; padding-bottom: 7.5rem;display: flex; max-width: 1600px;align-items: center;margin: 0 auto;}
.connect_title {color: #217bcb47; text-transform: uppercase;margin-bottom: 0; position: absolute;top: 0; text-align: center;line-height: .8;}
.twoline {padding-top: 21rem;}
.oneline {padding-top: 12.5rem;}


.connect_ribbon {grid-column-gap: 3.75rem; grid-row-gap: 3.75rem; background-color: #217bcb; font-weight: 600; text-transform: uppercase;justify-content: center;align-items: center;width: 120%; height: 3.5rem;display: flex; position: absolute; bottom: 15%;}
.connect_ribbon-back {grid-column-gap: 3.75rem;grid-row-gap: 3.75rem;background-color: #217bcb47;text-transform: uppercase;justify-content: center;align-items: center;width: 120%;height: 3.5rem;display: flex; position: absolute; bottom: 15%; color :#217bcb; font-weight: 600;}
.ribbon_text {color: inherit;flex: none;}
.connect_image {aspect-ratio: 690 / 800;width: 55%; max-width: 770px;position: relative; box-shadow: rgb(0 0 0 / 63%) 0px -15px 30px -10px;}
.u-img-cover {object-fit: cover;width: 100%;height: 100%;position: absolute;inset: 0%;}
.full-100 {min-height:70vh; place-content: center; margin:0 auto;}

.sub-tit {font-size:2.5rem; font-weight: 400; text-align: center;line-height: 1.8;}

.table .table-invited {border-top:1px solid #ddd;}
.table-invited tr:nth-child(even) {background: #343434;}
.ui-tabs .ui-tabs-nav li a {font-size: 1.5rem;padding: 20px 1rem; color: #125ea0;}
.ui-tabs .ui-tabs-nav {border-color: #217bcb;}
.tabs_centered.ui-tabs .ui-tabs-nav li {width:50%;}
.tabs_centered.ui-tabs .ui-tabs-nav li {background-color: #1e1e1e00; border-top: 1px solid #217bcb; border-right: 1px solid #217bcb; border-left: 1px solid #217bcb;}
.ui-tabs .ui-tabs-nav li.ui-state-active a {color:#343434; border:1px solid #217bcb;}
.ui-tabs .ui-tabs-panel {padding: 0 0 15px 0;}
.ui-tabs {border-radius: 0;}
.ui-tabs .ui-tabs-nav li.ui-state-active a:after {background: #217bcb;}
.style-simple .ui-tabs .ui-tabs-nav li.ui-state-active a {background: #217bcb;}

/* REGISTRATION */
.registerpage {width:100%; max-width:1550px; margin:0 auto;}
.reg-flex {display:flex; flex-wrap: wrap; justify-content: center; column-gap:4rem;}
.reg-flex > #section {width:100%; max-width:900px;}
.kind {font-size: 1.1rem; font-weight: 600;}
.subtitle {text-transform: uppercase;} 
.link-hover {padding-right:1rem;}
.link-hover:hover {color:#343434;}
.fee-table {border: 1px solid #ddd; line-height:1.5; margin: 5px 0 3rem;font-family: 'IBM Plex Sans KR'; font-size:.95rem;}
.oversea {color:#1e59d0;}
.domestic {color:#bb4848;}
.m-br {display: none;}
#section {padding:3rem 0;}
.content_wrapper .button, .content_wrapper input[type="submit"] {margin:0;}
.form {font-size:1.2rem; line-height: 1.7;}
#section > h6 {font-size:1rem;}
#section > ol li, #section > ul li {margin-bottom: 0;}

/* Accommodations */
.slider_pagination .slick-active a:after {background-color: #8f7dda;}
.hotel-list {display: flex; flex-wrap: wrap; gap:3rem; width: 100%;}
.hotel-list >.hotelinfo {width: 100%; max-width:51%;}
.hotel-list > img {width: 100%; max-width:45%;}

/* venue */
#venue {display: flex; gap: 2rem; text-align: center;}
#venue > div {width: 33%;}
#venue > div i {font-size: 4rem; padding-bottom: 1rem;}
#venue > div h5 {font-size:1.5rem; line-height: 1.4; margin-bottom: 5px;}
.pc-br {display: block;}

/* Sponsor */
.sp-bn {border: 1px solid #ddd;}
.tab-title {font-weight: 600; color: #343434; width: 20%; min-width: 240px;}
#sponsor-logo > .item {display: flex; padding-bottom: 4rem;}
#sponsor-logo > .item > div {display: flex; gap:1rem; flex-wrap: wrap;}

/* speaker */
    .special-box {display: flex; gap: 2rem; padding:2.5rem 0 2rem; flex-wrap: wrap;} 
.keynote-card {height: 100%; position: relative; border:1px solid #ddd;}
.keynote-image {height: 28rem; background: #f6f6f6; width: 100%;}
.keynote-image img {width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%);}
.keynote-info {position: absolute; top: 2rem; left: 2rem;}
.keynote-name {font-weight: 700; font-size: 3.2rem; line-height: 1.1;}
.keynote-image img:hover {filter: grayscale(0%);}
.keynote-image:hover {background: #cecece;}

/* program */
.entry {display: flex; gap:3rem; padding-bottom: 3rem; border-bottom: 1px solid #ddd; margin-bottom: 3.5rem; color: #343434;}
.entry .title-day1 > h3 {font-size:1.5rem; font-weight: 600; line-height: 1.2; min-width: 130px; color: #343434;}
.section-tit-day1 {font-size:1.5rem; font-weight: 600; margin-bottom: 10px; color: #343434; line-height: 1.2;}
.entry .title-day2 > h3 {font-size:1.5rem; font-weight: 600; line-height: 1.2; min-width: 130px; color: #343434;}
.section-tit-day2 {font-size:1.5rem; font-weight: 600; margin-bottom: 10px; color: #343434; line-height: 1.2;}
.entry .title-day3 > h3 {font-size:1.5rem; font-weight: 600; line-height: 1.2; min-width: 130px; color: #343434;}
.section-tit-day3 {font-size:1.5rem; font-weight: 600; margin-bottom: 10px; color: #343434; line-height: 1.2;}
.entry .body > h5 {font-size:1.1rem; font-weight: 500; color:#343434;}
.entry .body > table {border: 1px solid #ddd; margin-top:12px;}
.entry .body {width:100%;}
#tab1 {padding-top:4rem;}
.agenda {display: flex; align-items: center; justify-content: space-between;}
ul.program-speakerx {padding-top: 1rem; margin: 0 0 0 2rem;}
ul.program-speakerx > li {margin-bottom: 0;}
.textadd {padding:0 10px; font-size: 1.2rem; font-weight: 600; margin: 0 -10px;}
.textadd-box {padding: 2rem 1rem 1rem;}




/* @media screen and (min-width: 1201px) and (max-width: 1500px){
.twoline {padding-top: 14rem;}
.oneline {padding-top: 9.5rem;}
}
 */


@media screen and (min-width: 768px) and (max-width: 1200px){

  .framer-text-reveal {font-size: 2.6rem;}
   .sub-visual-bg {padding: 9.5rem 0 7rem;}

  .textadd {font-size: 1rem; line-height: 1;}
.textadd-box {padding: 2rem 1rem 1rem;}
  .form {font-size: 1rem;}
  .workshop-day > div {width: 100%;}
  .workshop {min-height: 200px;}
  .line-center {margin:1rem auto 0;}
  .sub-tit {margin-top:-2rem;}
.fee-table {font-size: .8rem; margin-top: .5rem;}
.gform_wrapper.gravity-theme .gfield_label{font-size: 1rem !important; padding: 1rem 0 0 0 !important;}
.m-br {display: none;}
.subtitle {font-size: 2rem;}
 
  /* program */
.entry {gap:1.5rem; padding-bottom: 2rem; margin-bottom: 2.5rem;}
.entry .title-day1 > h3, .entry .title-day2 > h3, .entry .title-day3 > h3, .entry .title-day4 > h3, .section-tit {font-size:1.1rem; min-width: 110px;}
.workshop ul {font-size:1.1rem;}
.section-tit-day4, .section-tit-day1, .section-tit-day2, .section-tit-day3 {font-size: 1.1rem; line-height: 1.4;}
.connect_ribbon, .connect_ribbon-back {line-height:3rem;}
.twoline {padding-top: 9rem;}
.oneline {padding-top: 5.5rem;}


/* Sponsor */
.tab-title {font-size:1.5rem;}
#sponsor-logo {margin-bottom: -2rem;}

/* Partner */
  .partner-logo {padding: 1rem 10px; width: calc(96.5% / 2);}
  .partner {gap:1.5rem;}
  .partner_tit {font-size:1.5rem;}
  .partner-logo h5 {font-size:1.2rem;}  
  .partner_bg {background-position: 90% 96%; background-size: 57%;}

  /* Overview */
.gra-text-p {padding:0; width:100%;}
.intro-info-wrap {margin-bottom: 3rem;}
.img-box {padding: 12px 12px 0;}
.txt-box {width: 100%; padding:5px 12px 0 12px;}
th p, td p {font-size: .9rem; padding: .2rem;}
.style-simple table:not(.recaptchatable) th {width: 30%;}
.overview_p {margin-bottom: -3rem;}
.philosophy h4 {font-size:1.5rem; line-height: 2.8rem;}
.philosophy p {font-size:1rem;line-height: 1.8; letter-spacing: -.5px; margin-bottom: -7px;}
.philosophy ul li {width: calc(52.3% - 2rem); margin-bottom: 3rem;}
.philosophy ul {gap:2rem;}
.philosophy {margin-bottom: -10rem;}
.organization {padding:2rem 10px;}
.thai-add {font-size:.9rem;} 

.copyright {width:90%; padding-bottom: 1rem;}

  .keynote-card {width:calc((100% - 2rem) / 3);}
  .keynote-image {height: 30vh; min-height: 330px;}
  .keynote-name {font-size: 1.9rem;}
  .keynote-info {top: 1.2rem; left: 1.4rem;}
      .special-box {gap:1rem; padding:0 0 2rem;}

  .bracket-label {margin:7rem 0 1rem; font-size: 2rem;}
}



@media only screen and (max-width: 767px){
    .bracket-label {margin:5rem 0 0; font-size: 1.5rem;}

.framer-text-reveal {font-size: 1.7rem;}
.sub-visual-bg {background: url(/img/sub_bar.jpg) no-repeat 96% bottom;}
 .sub-visual-bg {padding: 11rem 0 7rem;}

/* login */
	.arccslogin {width: 350px; justify-content: center;}


    .special-box {padding:0 0 2rem; gap:1rem;}
  .keynote-image {height: 26vh; min-height: 235px;}
  .keynote-name {font-size: 1.2rem;}
  .keynote-info {top: 1.1rem; left: 1.1rem;}
  .keynote-card {width:calc((100% - 1rem) / 2);}


  .connect_ribbon, .connect_ribbon-back {height:2.5rem;}
  .subtitle {font-size:1.5rem; line-height: 1.1; padding-bottom: 1rem;}
  .oneline {padding-top: 3.4rem;}
  .twoline {padding-top: 5.4rem;}

  .ppt-background > div {width: 100%;}
  .workshop-day > div {width: 100%;}
  .workshop {min-height: 150px; padding: 1.5rem 1rem;}
  .workshop h4 {font-size:1.1rem;}
  .workshop ul li {font-size:.9rem; margin-bottom: 5px; line-height: 1.4;}
  .workshop ul {padding-bottom: 0;}

  .sub-tit {margin-top:-2rem; font-size:2.2rem;}
  
  .ui-tabs .ui-tabs-nav li {width: 50%!important;}
  .ui-tabs .ui-tabs-nav li a{font-size: 1rem; padding: 15px 5px;}

/* REGISTRATION */
.kind {font-size: 1rem;}
.m-br {display: block;}
.fee-table {font-size: .7rem; margin-top: .5rem; word-break: keep-all;}
.fee-table td {padding:5px;}
#section {padding:2rem 0;}
.form {font-size:.9rem; line-height: 1.5;}
.gform_wrapper.gravity-theme .top_label .gsection_description {line-height: 1.5; padding-top: 1.5rem; font-size: .9rem;}


/* accommodations */
.hotellist {margin: 0 0 15px 1rem !important;}
.RF-download {font-size: 1rem !important; letter-spacing: -.5px !important; padding: 15px !important;}
.content_slider.flat.description ul li img {margin-bottom: 12px;}
.content_slider .slider_pagination {margin-top: 15px; margin-bottom: -2rem;}

/* venue */
#venue {gap:1rem; margin:-2rem 0; flex-direction: column; align-items: center;}
#venue > div i {font-size: 2rem; line-height: 3rem;}
#venue > div {width: 100%;}
#venue > div h5 {font-size:1rem;}
.pc-br {display: none;}

/* Sponsor */
#sponsor-logo {margin-bottom: -3rem;}
#sponsor-logo > .item {flex-wrap: wrap;}
.tab-title {width: 100%; min-width: 350px; font-size: 1.2rem;}
#sponsor-logo > .item > div > a {width:47.7%;}
.sp-bn {min-width:165px !important;}

/* Program */
.entry {flex-direction: column; gap:0; padding-bottom: 1.5rem; margin-bottom: 2.5rem;}
.entry .title-day1 > h3, .entry .title-day2 > h3, .entry .title-day3 > h3, .entry .title-day4 > h3 {font-size: 1rem; margin-bottom: 5px; font-weight: 700;}
.section-tit-day1, .section-tit-day2, .section-tit-day3 {font-size: 1rem; line-height: 1.3;}
.entry .body > h5 {font-size: .9rem;}
.agenda {line-height: 2rem;}
.section-tit-day4, .workshop ul {font-size:.9rem; line-height: 1.5;}
ul.program-speakerx {padding-top: .5rem; margin: 0 0 0 1rem;}
.textadd-box {padding: 1rem 10px 1rem;}
.textadd {font-size: .9rem;line-height: 1.3;}


.copyright {width:88%; padding: 0 1rem; flex-direction: column; align-items: flex-start;}
	.banner-h {max-height: 60px;} 
	#back_to_top.in_footer {right: 3px !important;}
  .copyright_apita {font-size: .8rem !important; line-height: 1.6 !important;}
  .apita_logo {max-width: 125px; padding-bottom: .6rem;}

}