@charset "utf-8";
:root{ --ani:cubic-bezier(.32,.94,.6,1); --bounce1: -0.5rem; --bounce2: -0.25rem; --movearrow: .2rem; }
.order1 { order: 1; }
.order2 { order: 2; }
.bounce { animation: bounce 2s infinite; }
@media(max-width:990px){
    .order1 { order: 2; }
    .order2 { order: 1; margin-bottom: 3rem; }
    .fullInner { width: 100%; }
    .fullInner .textInner { width: 85%; margin: auto; }
    .fullInner .lineInner { width: 85%; left: 50%; transform: translateX(-50%); }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(var(--bounce1));
    -ms-transform: translateY(var(--bounce1));
    -webkit-transform: translateY(var(--bounce1));
    transform: translateY(var(--bounce1));
  }
  60% {
    -moz-transform: translateY(var(--bounce2));
    -ms-transform: translateY(var(--bounce2));
    -webkit-transform: translateY(var(--bounce2));
    transform: translateY(var(--bounce2));
  }
}

.blockquote { position: relative; display: inline-block; }
.blockquote::before, .blockquote::after { position: absolute; top: -25%; }
.blockquote::before { content: url(../img/common/blockquote_prefix.png); left: -3.5rem; }
.blockquote::after { content: url(../img/common/blockquote_suffix.png); right: -3.5rem; } 
@media(max-width:990px){
  .blockquote::before, .blockquote::after { transform: scale(.75); }
}
.typing-text { display: inline; white-space: pre-wrap; word-break: break-all; line-height: 1; }
.typing-cursor { display: inline-block; width: 1px; height: 1.1em; background-color: #000; margin-left: 2px; vertical-align: middle; animation: blink 0.8s step-end infinite; }
/* .typing-text.typing-complete::after { display: none; } */
@keyframes blink {
    from, to { background-color: transparent; }
    50% { background-color: #000; }
}

.moveArrow { position: relative; width: 1rem; height: auto; aspect-ratio: 1/1; left: 50%; transform: translateX(-50%); }
.moveArrow::before, .moveArrow::after { position: absolute; content: ''; width: 100%; height: 100%; border-left: var(--movearrow) solid rgba(var(--pointcolor-rgb), .7); border-bottom: var(--movearrow) solid rgba(var(--pointcolor-rgb), .7); }
.moveArrow::before { transform: translate(var(--movearrow), calc( var(--movearrow) * 6 )) rotate(-45deg); animation: arrows 3s linear infinite; }
.moveArrow::after { transform: translate( calc( var(--movearrow) * 3 ) , 0px) rotate(-45deg); animation: arrows 3s linear infinite -1.5s; }
@keyframes arrows {
  0% {
    border-left: var(--movearrow) solid rgba(var(--pointcolor-rgb), 0);
    border-bottom: var(--movearrow) solid rgba(var(--pointcolor-rgb), 0);
    transform: translate( calc( (var(--movearrow) / 2) * -1 ), calc( (var(--movearrow) * 3 ) * -1 )) rotate(-45deg);
  }
  10%, 90% {
    border-left: var(--movearrow) solid rgba(var(--pointcolor-rgb), 0);
    border-bottom: var(--movearrow) solid rgba(var(--pointcolor-rgb), 0);
  }
  50% {
    border-left: var(--movearrow) solid rgba(var(--pointcolor-rgb), .7);
    border-bottom: var(--movearrow) solid rgba(var(--pointcolor-rgb), .7);
    transform: translate(calc( (var(--movearrow) / 2) * -1 ), 0px) rotate(-45deg);
  }
  100% {
    border-left: var(--movearrow) solid rgba(var(--pointcolor-rgb), 0);
    border-bottom: var(--movearrow) solid rgba(var(--pointcolor-rgb), 0);
    transform: translate(calc( (var(--movearrow) / 2) * -1 ), calc( var(--movearrow) * 3 )) rotate(-45deg);
  }
}

.bg-marquee { position: relative; width: 100%; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-track span { white-space: nowrap; padding-right: 60px; color: rgba(var(--pointcolor-rgb), .1); text-transform: uppercase; }
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* .scroll-bg-effect { display: inline; background-clip: text; background-color: var(--gray); background-image: linear-gradient(90deg, var(--textcolor) 50%, var(--gray) 50%); background-position: 0 0; background-repeat: no-repeat; background-size: 0% 200%; color: transparent; will-change: background-size; } */
.scroll-bg-effect { display: inline; webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, var(--textcolor) 50%, var(--gray) 50%); background-size: 200% 100%; background-position: 100% 0;  background-repeat: no-repeat; color: transparent; will-change: background-position; }
.scroll-bg-effect-reverse { background-color: rgba(255,255,255,.2); background-image: linear-gradient(90deg, #fff 50%, rgba(255,255,255,.2) 50%); }

.checklist li { padding: .7rem 1.5rem .7rem 1rem; background-color: var(--pointcolor); border-radius: .25rem; }
.checklist.flex li:not(:first-child) { margin-left: 1rem; }
@media(max-width:1544px){
  .checklist { display: block; }
  .checklist li { display: inline-flex; }
  .checklist li:not(:first-child) { margin-left: 0; margin-top: 1rem; }
}

.swiperCtrl .arrow { margin: 0 .5rem; cursor: pointer; }
@media(max-width:990px){
  .swiperCtrl .arrow svg { width: 3rem; height: 3rem; }
}
.swiper-pagination.sw-progress { top: auto; bottom: -4rem; height: 2px; background-color: #ebeff1; }
.swiper-pagination.sw-progress .swiper-pagination-progressbar-fill { background-color: var(--pointcolor); }

#main { position: relative; }

#main #mainslide { position: relative; overflow: hidden; width: 100%; height: 100vh; transition: transform .5s var(--ani); }
#main #mainslide .mainSwiper { position: relative;  opacity: 0; transform: scale(1.05); width: 100%; height: 100%; transition: all 2s var(--ani); }
#main #mainslide .mainSwiper.on { opacity: 1; transform: scale(1); }
#main #mainslide .mainSwiper .swiper-slide { height: 100%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .3s; }
#main #mainslide .mainSwiper .swiper-slide-active { transform: skew(0); }
#main #mainslide .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: 80% no-repeat; background-size: cover;  background-position: center; }
#main #mainslide .inner { position: relative; height: 100%; }
#main #mainslide .inner .txt { position: absolute; left: 0; bottom: 10%; z-index: 10; }
#main #mainslide .bg.bg-1 { background-image: url(../img/main/img_mainSlide01.jpg); }
#main #mainslide .bg.bg-2 { background-image: url(../img/main/img_mainSlide02.jpg); }
#main #mainslide .bg.bg-3 { background-image: url(../img/main/img_mainSlide03.jpg); }
#main #mainslide .swiper-pagination { bottom: 5%; left: calc((100% - var(--layoutwidth)) / 2); text-align: left; }
#main #mainslide .swiper-pagination .swiper-pagination-bullet { opacity: .5; width: 2.5rem; height: 2.5px; border-radius: 0; background-color: #fff; transition: .3s; }
#main #mainslide .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; }
#main #mainslide .scrollDownMark { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); color: #fff; opacity: .7; z-index: 10; }
#main #mainslide .scrollDownMark svg { top: 0; }
@media(max-width:768px){
    #main #mainslide { height: 95vh; }
    #main #mainslide .bg.bg-1 { background-image: url('/img/main/img_mainSlide01_m.jpg'); }
    #main #mainslide .bg.bg-2 { background-image: url('/img/main/img_mainSlide02_m.jpg'); }
    #main #mainslide .bg.bg-3 { background-image: url('/img/main/img_mainSlide03_m.jpg'); }
    #main #mainslide .swiper-pagination { display: none; left: 5%; }
    #main #mainslide .scrollDownMark { bottom: 3%; }
    #main #mainslide .scrollDownMark span { font-size: 1.25rem; }
    #main #mainslide .scrollDownMark svg { width: 2.5rem; height: 2.5rem; }
}

#main #carousel { position: absolute; bottom: 0; left: 0; width: 100%; z-index: -2; }
#main #carousel ul { display: flex; align-items: center; }

#main #weAreNow { background-image: linear-gradient(to bottom, var(--backcolor), #fff); }

#main #relationship { position: relative; min-height: 920px; background-image: url(../img/main/bg_relationship.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 3rem 0; }
#main #relationship .titWrap { position: absolute; right: calc((100% - var(--layoutwidth)) / 2); bottom: 3rem; }
#main #relationship h2 {  text-align: right; }
@media(max-width:1544px){
  #main #relationship .titWrap { right: 5%; bottom: 5rem; }
}
@media(max-width:768px){
  #main #relationship { min-height: 1311px; background-image: url(../img/main/bg_relationship_m.jpg); padding: 5rem 0; }

}

#main #longTime .txt_info { background-color: var(--backcolor2); padding: 4rem; }
#main #longTime .txt_info .chart li { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 115px; padding: 0 3rem; background-color: #f0f2f5; }
#main #longTime .txt_info .chart li:not(:last-of-type) { margin-bottom: 1rem; }
#main #longTime .txt_info .chart li span { color: #9ea7b7; }
#main #longTime .txt_info .chart li .fill { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #b6bfce; }
#main #longTime .txt_info .chart li:nth-child(4) .fill { background-image: linear-gradient(to right, var(--pointcolor), var(--quickcolor1)); }
#main #longTime .img_info { display: flex; align-items: flex-end; background-image: url(../img/main/bg_longTime.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 4rem; }
@media(max-width:768px){
  #main #longTime h2 { width: 90%; margin: auto; }
  #main #longTime .txt_info { padding: 2.5rem; }
  #main #longTime .txt_info .chart li { height: 100px; padding: 0 2rem; }
  #main #longTime .txt_info .chart li .fill { max-width: 55%; }
  #main #longTime .img_info { background-image: url(../img/main/bg_longTime_m.jpg); margin-top: 2.5rem; padding: 15rem 4rem 2.5rem 4rem; }
}

#main #forYou .forYouSwiper .swiper-slide { transform: scale(0.9); filter: grayscale(1); transition: .3s; }
#main #forYou .forYouSwiper .swiper-slide-active { transform: scale(1); filter: grayscale(0); }
#main #forYou .forYouSwiper .swiper-slide h4 { color: transparent; transition: .3s; }
#main #forYou .forYouSwiper .swiper-slide-active h4 { color: initial; }
#main #forYou .forYouSwiper .swiper-slide .img-wrap { border-radius: .5rem; overflow: hidden; }
#main #forYou .forYouSwiper .swiper-label { display: none; position: absolute; width: 100%; bottom: 0; left: 0; right: 0; background-color: var(--pointcolor); padding: .75rem 1.25rem; }
#main #forYou .forYouSwiper .swiper-slide-active .swiper-label { display: flex; }
#main #forYou .forYouSwiper .swiper-label span { opacity: .8; }
#main #forYou .forYouSwiper .swiper-label img { max-width: 110px; }

#main #oticonNo1 .box.txt { padding-left: 8rem; }
#main #oticonNo1 .box.txt h2 .font-110 { line-height: .5; }
@media(max-width:990px){
  #main #oticonNo1 .box.txt { padding-left: 0; padding-top: 3rem; }
  #main #oticonNo1 .box.txt > img { max-width: 50%; }
}

#main #trust .content-upper { position: relative; min-height: 850px; background-image: url(../img/main/bg_trust01.png); background-repeat: no-repeat; background-size: cover; background-position: bottom center; }
#main #trust .content-lower { position: relative; min-height: 1143px; background-image: url(../img/main/bg_trust02.png); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 5rem 0; }
#main #trust .content-lower .gradient { margin: 3rem 0; padding: 1.5rem 0; background-image: linear-gradient(to right, transparent, rgba(10,41,97,.8), transparent); }
#main #trust .content-lower .gradient span { opacity: .8; }
#main #trust .trustSwiper + .sw-progress .swiper-pagination-progressbar-fill { background-color: var(--quickcolor4); }
@media(max-width:768px){
  #main #trust .content-upper { min-height: 585px; background-image: url(../img/main/bg_trust01_m.png); background-size: 100% auto; }
  #main #trust .content-lower { min-height: auto; background-image: url(../img/main/bg_trust02_m.png); padding: 5rem 0 10rem; }
}

#main #proof .img { border-radius: .5rem; overflow: hidden; }
#main #proof .txt { position: absolute; left: 2rem; top: 2rem; }
@media(max-width:768px){
  #main #proof .img img { aspect-ratio: 1/1; object-fit: cover; }
  #main #proof .txt { left: 1.5rem; top: 1.5rem; }
}

#main #ourNews { background-color: #f6f8fc; }
#main #ourNews .ourNewsSwiper .swiper-slide a { position: relative; }
#main #ourNews .ourNewsSwiper .swiper-slide a > img { aspect-ratio: 1/1; object-fit: cover; border-radius: .5rem; overflow: hidden; }
#main #ourNews .ourNewsSwiper .swiper-slide a .blogtitle { position: absolute; width: 100%; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem; background-color: var(--quickcolor1); border-radius: 0 0 .5rem .5rem; overflow: hidden; }
#main #ourNews .ourNewsSwiper .swiper-slide a .blogtitle > h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; max-height: 2.5em; }
#main #ourNews .ourNewsSwiper .swiper-slide a .blogtitle > img { max-width: 5rem; opacity: .5; margin: .5rem auto; }
#main #ourNews .ourNewsSwiper .swiper-slide a aside { position: absolute; top: 1rem; right: 1rem; }
@media(max-width:990px){
  #main #ourNews .ourNewsSwiper .swiper-slide a aside img { max-width: 3rem; }
}

#main #duzonTV { background-color: #f6f8fc; }
#main #duzonTV .flexList { --x-gap: 3rem; --y-gap: 3rem; }
#main #duzonTV .videoBox { cursor: pointer; }
#main #duzonTV .ytbListSwiper { height: 100%; }
#main #duzonTV .ytbListSwiper .swiper-slide { width: 95%; border-bottom: 1px solid #dfdfdf; padding-bottom: 1rem; cursor: pointer; }
#main #duzonTV .ytbListSwiper .thumb { width: 30%; }
#main #duzonTV .ytbListSwiper .thumb img { height: auto; object-fit: cover; }
#main #duzonTV .ytbListSwiper .info { width: 65%; }
#main #duzonTV .ytbListSwiper .swiper-pagination { left: auto; right: 0; background-color: #ebeff1; }
#main #duzonTV .ytbListSwiper .swiper-pagination .swiper-pagination-progressbar-fill { background-color: var(--pointcolor); }
@media(max-width:990px){
  #main #duzonTV .ytbListSwiper { min-height: 450px; }
}
@media(max-width:768px){
  #main #duzonTV .ytbListSwiper { min-height: 350px; }
  #main #duzonTV .ytbListSwiper .swiper-slide { width: 97.5%; padding-bottom: .5rem; }
  #main #duzonTV .ytbListSwiper .thumb { width: 50%; }
  #main #duzonTV .ytbListSwiper .info { width: 45%; }
  #main #duzonTV .ytbListSwiper .info .blogo { width: 35%; }
}

#main #socials a { width: 50%; padding: 1rem 3rem; }
#main #socials a .circleLine { width: 3.5rem; height: auto; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
@media(max-width:990px){
  #main #socials a { width: 50%; padding: 1rem 2rem; }
  #main #socials a .circleLine { width: 2.75rem; }
}

#main #facillity .facillityThumbs { --x-gap: .5rem; --y-gap: .5rem; }
#main #facillity .facillityThumbs .box { cursor: pointer; }
#main #facillity .facillityThumbs .box img { filter: grayscale(1); border: 3px solid transparent; transition: .3s; }
#main #facillity .facillityThumbs .box.on img { filter: grayscale(0); border-color: var(--pointcolor); }
@media(max-width:990px){
  #main #facillity .slider { width: 80%; margin: 5rem auto 0; padding-left: 0; }
  #main #facillity .facillityThumbs { --x-gap: .25rem; --y-gap: .25rem; }
}

#main #location { position: relative; background-color: #fff; z-index: 1; }
#main #location .flexList { --x-gap: 3rem; --y-gap: 3rem; }
#main #location .info .centerList { max-width: 85%; }
#main #location .info .centerList li h5 { margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid #1c1c1c; }
#main #location .info .centerList ol .flex p { position: relative; width: 5rem; text-align: justify; }
#main #location .info .centerList ol .flex p::after { display: inline-block; content: ''; width: 100%; }
#main #location .map { position: relative; }
#main #location .map .mapButtons { position: absolute; display: flex; align-items: center; bottom: 2rem; right: 2rem; z-index: 20; }
#main #location .map .mapButtons a { padding: .75rem 1.5rem; border-radius: .5rem; line-height: 1; }
#main #location .map .mapButtons a:not(:first-child) { margin-left: .75rem; }
#main #location .map .mapButtons a.naver { background-color: #02c758; }
#main #location .map .mapButtons a.kakao { background-color: #fae100; }
#main #location .root_daum_roughmap { width: 100%; height: auto; aspect-ratio: 1/1; }
#main #location .root_daum_roughmap, #main #location .root_daum_roughmap .wrap_map { height: 100% !important; }
#main #location .root_daum_roughmap .wrap_controllers,
#main #location .root_daum_roughmap > .cont { display: none; }
#main #location .root_daum_roughmap .map_border { display: none; }
@media(max-width:990px){
  #main #location .info .centerList { max-width: 100%; }
  #main #location .info .centerList ol .flex p { width: 25%; margin-right: 3rem; }
  #main #location .map .mapButtons a img { max-height: 16px; }
}

#quickCounsel #quickCounselFrm table th, #quickCounsel #quickCounselFrm table td { padding: 1rem 0; }
#quickCounsel #quickCounselFrm table th { text-align: left; vertical-align: top; }
#quickCounsel #quickCounselFrm table tr th:not(:first-child) { padding: 1rem 0 1rem 3rem; }
#quickCounsel #quickCounselFrm table th > label { padding-top: 1rem; }
#quickCounsel #quickCounselFrm table th > label > samp { position: relative; top: -.25rem; left: .25rem; }
#quickCounsel #quickCounselFrm table input[type=text],
#quickCounsel #quickCounselFrm table input[type=tel],
#quickCounsel #quickCounselFrm table textarea { padding: 1rem 1.5rem; height: auto; background-color: #f6f6f6; border: none !important; box-shadow: none !important; border-radius: .5rem; }
#quickCounsel #quickCounselFrm table textarea { min-height: 200px; resize: none; }
#quickCounsel #quickCounselFrm table input[type=text]::placeholder,
#quickCounsel #quickCounselFrm table input[type=tel]::placeholder,
#quickCounsel #quickCounselFrm table textarea::placeholder { color: #b0b4b9; font-weight: 600; }
#quickCounsel #quickCounselFrm table input[type=checkbox] { transform: scale(1.25); accent-color: var(--pointcolor); }
@media(max-width:990px){
    #quickCounsel #quickCounselFrm table,
    #quickCounsel #quickCounselFrm table tbody,
    #quickCounsel #quickCounselFrm table th,
    #quickCounsel #quickCounselFrm table td { display: block; }
    #quickCounsel #quickCounselFrm table th, #quickCounsel #quickCounselFrm table td,
    #quickCounsel #quickCounselFrm table tr th:not(:first-child) { padding: .5rem 0 }
    #quickCounsel #quickCounselFrm table tr { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #quickCounsel #quickCounselFrm table th { width: 20%; }
    #quickCounsel #quickCounselFrm table td { width: 75%; }
    #quickCounsel #quickCounselFrm table th > label { padding-top: .5rem; }
    #quickCounsel #quickCounselFrm table input[type=text],
    #quickCounsel #quickCounselFrm table input[type=tel],
    #quickCounsel #quickCounselFrm table textarea { font-size: 1.25rem; padding: 1.5rem; }
    #quickCounsel #quickCounselFrm table input[type=checkbox] { transform: scale(1); }
    #quickCounsel #quickCounselFrm table input[type=checkbox] + label { font-size: 1.25rem; }
    #quickCounsel #quickCounselFrm table tr:last-child th { display: none; }
    #quickCounsel #quickCounselFrm table tr:last-child td { width: 100%; padding: 1.5rem 0 0; }
}

#subTop { position: relative; }
#subTop .subTopBg > img { width: 100%; height: 100%; object-fit: cover; }
#subTop .subTopInner { position: absolute; left: calc((100% - var(--layoutwidth)) / 2); bottom: 10%; z-index: 5; letter-spacing: -0.5px; }
#subTop .subTopInner .breadcrumb { margin-bottom: 4rem; }
#subTop .subTopInner .breadcrumb span { width: 4px; height: auto; aspect-ratio: 1/1; background-color: #fff; margin: 0 1.5rem; }
@media(max-width:1544px){
  #subTop, #subTop .subTopBg { min-height: 95vh; }
  #subTop .subTopBg > img { height: 95vh; width: auto; max-width: none; }
  #subTop .subTopInner { left: 5%; }
}
@media(max-width:768px){
    #subTop .subTopInner { left: 7.5%; bottom: 15%; }
}