@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');
/* NotoSans 폰트 Weight Thin 100, ExL 200, L 300, R 400, M 500, SemiB 600, B 700, ExB 800, BL 900 */

*{margin:0px; padding:0px;}
*, :after, :before{box-sizing:border-box;}
body, html{width:100%; height:100%; min-width:360px; background:#f0f0f0;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,table,a,p{font-family:'Noto Sans SC', 'Noto Sans KR', '맑은 고딕', MalgunGothic, '돋움', Dotum, sans-serif; font-size:18px; color:#666; line-height:1.4em; word-break:keep-all;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img,fieldset{max-width:100%; border:0px; vertical-align:top;}
ul,ol,dl{list-style-type:none;}
a{text-decoration:none;}
caption, legend{border:0px; display:none;}
em{font-style:normal;}
table{width:100%; border:0; border-collapse:collapse;}
input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {appearance: button; -webkit-appearance: button;}

.wrapcon{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}
.blind{display:block; overflow:hidden; position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px;}
select{appearance:none; -webkit-appearance:none;}
select::-ms-expand{display:none;}
select:focus, input:focus, select:active, input:active{outline:none;}
.float_clear:after{display:block; clear:both; content:"";}
textarea{outline:none;}
.divpop h1,.divpop h2,.divpop h3,.divpop h4,.divpop h5,.divpop h6{padding:0 20px; color:var(--color);}
.divpop p{padding:0 20px; color:var(--black);}
.pc_br{display: block;}
.mo_img{display:none;}
input[type="checkbox"]{width:16px; height:16px; vertical-align:middle;}
input[type=checkbox]:checked, input[type=radio]:checked{accent-color:rgb(232,52,40);} 
.loading_blind{display:flex; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:90;}
.loader{position:relative; display:block; width:48px; height:48px; border:solid 3px #FFF; border-radius:50%; box-sizing:border-box; animation:loading 1s linear infinite; margin:auto;}
.loader::after{position:absolute; content:""; box-sizing:border-box; left:50%; top:50%; transform:translate(-50%, -50%); width:56px; height:56px; border-radius:50%; border:solid 3px transparent; border-bottom-color:var(--color);}
@keyframes loading{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
:root{--black:#252121;}
:root{--color:#0145b2;}
:root{--navy:#002e77;}

header{height: 110px;}
nav ul{padding-top: 110px;}
.main_visual{margin-top: 110px;}
.main_bn_flash{position: relative}
.main_bn_flash_ani{position: absolute; top: 0; transform-origin: center center; animation:main_bn_flash_ani 3s ease-in-out infinite;}
@keyframes main_bn_flash_ani{
0%{opacity: 1; transform: scale(1); filter: brightness(1);}
30%{opacity: 1; transform: scale(1); filter: brightness(1);}
35%{opacity: 1; transform: scale(1.15); filter: brightness(1.6);}
40%{opacity: 1; transform: scale(1.1); filter: brightness(1.4);}
45%{opacity: 1; transform: scale(1.05); filter: brightness(1.2);}
50%{opacity: 0.9; transform: scale(0.95); filter: brightness(1.1);}
55%{opacity: 0; transform: scale(1.1); filter: brightness(2.5);}
60%{opacity: 0; transform: scale(1); filter: brightness(1);}
65%{opacity: 0.6; transform: scale(0.9); filter: brightness(1);}
70%{opacity: 1; transform: scale(1); filter: brightness(1);}
100%{opacity: 1; transform: scale(1); filter: brightness(1);}
}
.main_bn_beat{position: relative}
.main_bn_beat_ani{position: absolute; top: 0; animation:main_bn_beat_ani 1.5s ease-in infinite;}
@keyframes main_bn_beat_ani{
0%{transform: scale(1)}
50%{transform: scale(1.1)}
100%{transform: scale(1)}
}
.main_bn_seq{position: relative; overflow: hidden;}
.main_bn_seq_ani li{position: absolute; opacity: 1; transform: scale(1); transform-origin: left center; animation: main_bn_seq_ani 8s ease-in-out infinite;}
.main_bn_seq_ani li:nth-child(1){ animation-delay: 0s;}
.main_bn_seq_ani li:nth-child(2){ animation-delay: 1.2s; transform-origin: left 65%;}
.main_bn_seq_ani li:nth-child(3){ animation-delay: 2.4s; transform-origin: left 75%;}
.main_bn_seq_ani li:nth-child(4){ animation-delay: 3.6s; transform-origin: left 85%;}
@keyframes main_bn_seq_ani{
0%{opacity: 1; transform: scale(1); filter: brightness(1);}
10%{opacity: 1; transform: scale(1); filter: brightness(1);}
12%{opacity: 1; transform: scale(1.1); filter: brightness(1.5);}
18%{opacity: 0.9; transform: scale(0.9); filter: brightness(1.2);}
22%{opacity: 0; transform: scale(1.1); filter: brightness(2);}
25%{opacity: 0; transform: scale(1); filter: brightness(1);}
28%{opacity: 0.5; transform: scale(0.9); filter: brightness(1);}
32%{opacity: 1; transform: scale(1); filter: brightness(1);}
50%{opacity: 1; transform: scale(1); filter: brightness(1);}
100%{opacity: 1; transform: scale(1); filter: brightness(1);}
}
.main_con01{position:relative;}
.main_pop_ani{position:absolute; top:0; animation:scalePop 2.2s ease-in infinite;}
@keyframes scalePop {
  0% { transform: scale(0.5); opacity: 0; }
  30% { transform: scale(1.06); }
  40% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.main_con02{position:relative;}
.main_con02 .txt_dot{display:flex; gap:36.2%; position:absolute; width:10.6944%; top:14%; right:19.5%;}
.main_con02 .txt_dot02{right:22.5%;}
.main_con02 .txt_dot03{right:21%;}
.main_con02 .txt_dot .dot{width:9.2%; animation:dotAni 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;}
.main_con02 .txt_dot .dot:nth-child(1) { animation-delay: 0.2s; }
.main_con02 .txt_dot .dot:nth-child(2) { animation-delay: 0.5s; }
.main_con02 .txt_dot .dot:nth-child(3) { animation-delay: 0.8s; }
.main_con02 .txt_dot img{width:100%;}
@keyframes dotAni {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.main_con03{position:relative;}
.main_align{width: 88.889%; margin: auto; text-align: center;}
.main_contact{background-color: #f1f1ef; font-size: clamp(24px, 5.834vw, 42px); color: #252121; font-weight: 900; padding: 12% 0 7%; text-align: center;}
.sub_visual{margin-top: 110px;}
#pc_bg{background-image: url(/harrington/images/pc_bg.webp); background-repeat: no-repeat; background-size: cover; background-position: bottom; background-attachment: fixed;}
#pc_wrap{display: flex; justify-content: space-between; width: 100%; max-width: 1500px; min-height: 100%; margin: auto;}
.pc_left{position: relative; width: 320px;}
.pc_left_bn{position: fixed; display: flex; height: 100vh; flex-direction: column; justify-content: center;}
.pc_left_ani_w{position: relative; margin-bottom: 30px;}
.pc_left_ani{position: absolute; top: 0; animation:pc_left_ani 1s ease-in infinite;}
@keyframes pc_left_ani{
0%{transform: scale(1)}
50%{transform: scale(1.1)}
100%{transform: scale(1)}
}
.pc_right{position: relative; width: 320px;}
.pc_right_bn{position: fixed; width: 320px; margin-top: 110px;}
#body_wrap{position: relative; width: 100%; max-width: 720px; min-height: 100%; background-color: #FFF;}
header{position: fixed; width: 100%; max-width: 720px; background-color: #FFF; z-index: 10; box-shadow:0px 5px 10px 0px rgba(0,0,0,0.1);}
.top_wrap{position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 4.167%; box-sizing: border-box;}
.top_wrap .top_logo{height: 63.636%;}
.top_wrap .top_logo img{width: auto; height: 100%;}

.top_wrap .top_bn{position: relative; width: 46.97%;}
.top_wrap .top_bn_ani{position: absolute; animation:top_bn_ani 1s ease-in infinite;}
@keyframes top_bn_ani{
0%{transform: scale(1.05)}
50%{transform: scale(1)}
100%{transform: scale(1.05)}
}
.top_wrap .nav_btn{width: 30px; height: 20px; background-image: url(/harrington/images/nav_btn.png); background-repeat: no-repeat; background-size: 100%; cursor: pointer;}
nav{position: fixed; top: 0; display: flex; flex-direction: row-reverse; width: 100%; max-width: 720px; height: 100%; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; overflow: hidden;}
nav::after{position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; background-color: #000; opacity: 0.7; transition: opacity 0.35s ease;}
nav ul{position: relative; width: 70%; max-width: 360px; background-color: #0c2d4c; height: 100%; z-index: 90; transform: translateX(100%); transition: transform 0.35s ease;}
nav ul li{position: relative;}
nav ul li a{display: block; font-size: clamp(16px, 3.334vw, 24px); color: #FFF; font-weight: 700; padding: 5.69% 21.875%;}
nav ul li::before{position: absolute; display: block; content: ""; left: 12.5%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-color: #FFF;}
nav ul li::after{position: absolute; display: block; content: ""; left: 9.375%; bottom: 0; width: 81.25%; height: 1px; background-color: #FFF; opacity: 0.1;}
nav ul li:last-child::after{display: none;}
nav .home_btn{position: absolute; top: 32px; left: 7%;}
nav .home_btn a{font-size: clamp(18px, 3.334vw, 26px);}
nav .home_btn::before{display: none;}
nav .home_btn::after{display: none;}
nav .nav_close{position: absolute; top: 44px; right: 4.167%; width: 22px; height: 22px; background-image: url(/harrington/images/nav_close.png); background-repeat: no-repeat; background-size: 100%; cursor: pointer; z-index: 99;}
nav.on{opacity: 1; pointer-events: auto;}
nav.on::after{opacity: 0.7;}
nav.on ul{transform: translateX(0);}
.sub_visual{position: relative; width: 100%; padding-bottom: 41.667%; background-color: #0c2d4c; background-image: url(/harrington/images/visual_img.png); background-repeat: no-repeat; background-size: cover;}
.sub_subject{position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sub_subject h1{width: 100%; font-size: clamp(24px, 5.834vw, 42px); color: #FFF; font-weight: 700; text-align: center;}
.sub_subject h1::after{display: block; content: ""; width: 9.723%; height: 4.96%; background-color: #FFF; margin: auto; margin-top: 3.056%;}
.sub_subject p{font-size: clamp(18px, 4.723vw, 34px); color: #FFF; font-weight: 300; letter-spacing: 0.3em; margin-top: 3.056%;}
.page_tab{display: flex; flex-wrap: wrap; width: 90%; margin: auto; border: solid 1px #e1e1e1; border-bottom: none;}
.page_tab li{width: 33.333%; border-right: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1;}
.page_tab li:nth-child(3n){border-right: none;}
.page_tab li a{display: block; height: 40px; display: flex; justify-content: center; align-items: center; font-size: clamp(15px, 2vw, 20px); color: #252121;}
.page_tab li.on a{background-color: #0a2848; color: #FFF;}
.plan_panel{margin-top: 10%;}
.floating_bn{position: fixed; width: 100%; max-width: 720px; bottom: 0; z-index: 80;}
.floating_bn_wrap{display: flex;}
.floating_bn_chat{cursor: pointer;}
.floating_bn_ani{position: absolute; width: 59.723%; top: -40%; left: 20.14%; animation:floating_bn_ani 1s ease-in infinite;}
@keyframes floating_bn_ani{
0%{transform: translateY(0)}
50%{transform: translateY(-12%)}
100%{transform: translateY(0)}
}
.footer_menu{display: flex; flex-wrap: wrap;}
.footer_menu li{width: 33.334%;}
.main{margin: 60px auto 140px; width: 88.889%;}
.content{margin: 60px auto 140px; width: 88.889%;}
.tt{font-size:clamp(18px, 4.723vw, 24px); font-weight:600; color:#303030; line-height:1.4;}
.video{position:relative; padding-bottom:56.25%; max-width:640px; margin:3% auto 10%;}
.video iframe{position:absolute; left:0; top:0; width:100%; height:100%;}

/* 1400px 이하 해상도 */
@media screen and (max-width:1400px){
.pc_left, .pc_right{display: none;}
#body_wrap{margin: auto;}
header{height: 80px;}
nav ul{padding-top: 80px;}
nav ul li::before{width: 6px; height: 6px;}
nav .home_btn{top: 16px;}
nav .nav_close{top: 28px;}
.main_visual{margin-top: 80px;}
.sub_visual{margin-top: 80px;}
.main{margin: 50px auto 80px;}
.content{margin: 50px auto 80px;}
}

/* 640px 이하 해상도 */
@media screen and (max-width:640px){
header{height: 60px;}
nav ul{padding-top: 60px;}
nav ul li::before{width: 5px; height: 5px;}
nav .nav_close{top: 18px;}
.main_visual{margin-top: 60px;}
.sub_visual{margin-top: 60px;}
.main{margin: 40px auto 60px;}
.content{margin: 40px auto 60px;}
.page_tab li a{height: 30px;}
.floating_bn_ani{width: 70%; top: -50%; left: 15%;}
}