@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100;200;300;400;500;600;700&display=swap');

:root {
    --mc : #002E6A;
    --sc : #D22229;
    --dd : #dddddd;
}

html {font-size:10px;}
body {font-size:1.6rem;}

.g_btn {font-size:1.5rem;font-weight:200;}
.g_btn:after {content:"\e907";font-family:xeicon;display:inline-block;padding:0.5rem;background:rgba(0,0,0,0.3);border-radius:50%;margin-left:1.5rem;vertical-align:middle;transition:0.3s;}
.g_btn:hover:after {margin-left:2rem;}

#hd {display:flex;align-items:center;padding:0 8rem;line-height:10rem;position:sticky;top:0;z-index:1000;}
#hd .gnb {padding:0 12rem;font-size:2rem;}
#hd .gnb>ul {display:flex;}
#hd .gnb>ul>li>a {display:block;padding:0 2rem;font-size:2rem;}
#hd .login {display:flex;margin-left:auto;color:#fff;text-transform:uppercase;font-size:1.2rem;} /*uppercase = 대문자로!*/

#hd.on .login {color:#999;}

#hd .login li {padding:0 2rem;position:relative;}
#hd .login li~li:after {content:"";display:block;width:0.1rem;height:1rem;background:#999;position:absolute;top:50%;left:0;transform:translateY(-50%);}
#hd .search {line-height:3.5rem;}
#hd .search input {width:18rem;border:none;vertical-align:middle;}
#hd .search button {vertical-align:middle;}

#hd.on {background:#fff;}

#search {border:2px solid #fff;border-radius:1.95rem;padding:0 2rem;position:relative;margin:0 4rem;}
#search i {position:absolute;top:-0.2rem;right:-0.3rem;background:transparent;color:#fff;height:3.9rem;width:3.9rem;border-radius:50%;line-height:3.5rem;}

#hd #search input {background:transparent;}

#hd.on #search {border:2px solid var(--mc);}
#hd.on #search i {background:var(--mc);}
#hd.on #search input {background:transparent;}

#hd .top_service {font-size:2.5rem;color:#fff;}
#hd .top_service a {display:inline-block;margin-left:0.5rem;position:relative;line-height:1;}
#hd .top_service small {position:absolute;top:-0.5rem;right:-0.5rem;width:1.5rem;height:1.5rem;background:var(--sc);line-height:1.5rem;color:#fff;font-size:1rem;text-align:center;border-radius:50%;}

#hd.on .top_service {color:#333;}

#hd .gnb>ul>li {position:relative;}
#hd .gnb>ul>li .gnb_2depth {position:absolute;top:11rem;left:50%;width:18rem;border:1px solid var(--dd);background:#fff;transform:translateX(-50%);line-height:3rem;text-align:center;font-size:1.5rem;padding:0.5rem;opacity:0;visibility:hidden;transition:0.5s;box-shadow:0 0 5rem rgba(0,0,0,0.1);z-index:999;}
#hd .gnb>ul>li:hover .gnb_2depth {opacity:1;top:9rem;visibility:visible;}
#hd .gnb>ul>li .gnb_2depth li~li a {display:block;border-top:1px solid var(--dd);}

#hd .gnb>ul>li:after {content:"";display:block;width:0.3rem;height:0.3rem;background:var(--mc);border-radius:50%;position:absolute;top:6rem;left:calc(50% - 0.15rem);opacity:0;transition:0.5s;}
#hd .gnb>ul>li:hover:after {top:3rem;opacity:1;}



.main_visual {position:relative;background:url(../img/left_bg.jpg) no-repeat center center/cover;padding:8rem 16rem;color:#fff;font-size:2.5rem;}

.main_visual figure img {border-radius:3rem;box-shadow:0.5rem 0.5rem 3rem rgba(0,0,0,0.3);}

.main_visual .left {width:8rem;height:100%;background:#fff;position:absolute;top:0;left:0;font-size:1.5rem;font-weight:300;color:#333;writing-mode: vertical-rl;text-align:center;padding:0 3.25rem 0 0;}

.main_visual .left strong {display:inline-block;width:0.1rem;height:10rem;background:var(--dd);font-size:0;margin-top:3rem;}
.main_visual .left strong:after {content:"";display:block;width:100%;height:0;background:var(--mc);animation:bar 1s infinite;}

@keyframes bar {
    to {height:100%;}
}


.main_visual .right {position:absolute;top:-10rem;right:0;width:70rem;height:calc(100% + 10rem);background:url(../img/visual_bg02.jpg)no-repeat center center/cover;padding:23rem 8rem 0 8rem;z-index:999;}

.main_visual .right strong {display:block;font-family:'Noto Serif KR', serif;font-size:7.2rem;font-weight:100;margin-bottom:5rem;line-height:1.2;}
.main_visual .right h3 {font-family:'Noto Serif KR', serif;font-size:2.8rem;font-weight:300;margin-bottom:3rem;line-height:1.6;}
.main_visual .right p {color:var(--dd);font-family:'Noto Serif KR', serif;font-size:1.8rem;font-weight:100;margin-bottom:5rem;line-height:1.4;}

.main_visual .slide_bottom {display:flex;align-items:center;font-size:2.3rem;margin:2rem 0 0 0;}
.main_visual .slide_bottom>* {margin-right:2rem;}
.main_visual .slide_bottom .page {width:auto;}
.main_visual .slide_bottom .bar {position:relative;width:30rem;height:0.2rem;background:rgba(255,255,255,0.5);}
.main_visual .slide_bottom .bar:after {content:"";display:block;position:absolute;width:0;height:100%;top:0;left:0;background:#fff;}
.main_visual .slide_bottom .bar.on:after {width:100%;transition:2s;}



.content {padding:15rem 0;}
.content h2 {font-size:3.1rem;font-family:'Noto Serif KR',serif;margin-bottom:2rem;}
.content p {font-size:1.7rem;margin-bottom:5rem;color:#888;}
.content .container {width:130rem;margin:0 auto;padding:0 1rem;}
.content .txt {text-align:center;background:#fff;padding:4rem 2rem 4rem 2rem;}
.content .txt strong {display:block;margin-bottom:1.2rem;}
.content .txt .price {font-size:2.3rem;font-weight:500;letter-spacing:-0.025em;}
.content img {width:100%;}



.sc02 {position:relative;background:url(../img/main_bg02.jpg) no-repeat center center/cover; text-align:right;}
.sc02 h2 {opacity:0;transform:translate(0,10rem);transition:0.3s;}
.sc02 p {opacity:0;transform:translate(0,10rem);transition:0.3s;}
.sc02 .pr_slider {padding:1rem 0;opacity:0;transform:translate(-30rem,0);transition:0.3s;}
.sc02 .pr_btn {opacity:0;transition:0.3s;}

.sc02.on h2 {text-align:right;opacity:1;transform:translate(0,0);transition:0.3s;}
.sc02.on p {text-align:right;opacity:1;transform:translate(0,0);transition:0.3s;}
.sc02.on .pr_slider {padding:1rem 0;transform:translate(0,0);opacity:1;transition:0.3s 0.3s;}
.sc02.on .pr_btn {opacity:1;transition:0.3s 0.5s;}


.sc02 .pr_slider figure {box-shadow:0 0 2rem rgba(0,0,0,0.2);position:relative;overflow:hidden;}
.sc02 .pr_slider figure:before {content:"";display:block;width:0;height:0;border-top:0.2rem solid var(--mc);border-left:0.2rem solid var(--mc);position:absolute;top:0;left:0;opacity:0;}
.sc02 .pr_slider figure:after {content:"";display:block;width:0;height:0;border-bottom:0.2rem solid var(--mc);border-right:0.2rem solid var(--mc);position:absolute;bottom:0;right:0;opacity:0;}

.sc02 .pr_slider figure:hover:before {opacity:1;width:100%;height:100%;transition:0.5s;}
.sc02 .pr_slider figure:hover:after {opacity:1;width:100%;height:100%;transition:0.5s;}

.sc02 .pr_btn i {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:3rem;padding:1.3rem;background:rgba(0,0,0,0.3);}
.sc02 .pr_btn i.xi-arrow-left {margin-left:-70rem;}
.sc02 .pr_btn i.xi-arrow-right {margin-left:70rem;}
.sc02 .pr_btn .page {text-align:center;margin:2rem 0 0;}



.sc03 {text-align:center;}
.sc03 h2 {opacity:0;transform:translate(0,10rem);transition:0.1s;}
.sc03 p {opacity:0;transform:translate(0,10rem);transition:0.1s;}
.sc03 .pr_slider {padding:1rem 0;opacity:0;transform:translate(0,20rem);transition:0.1s;}

.sc03.on h2 {opacity:1;transform:translate(0,0);transition:0.1s;}
.sc03.on p {opacity:1;transform:translate(0,0);transition:0.1s;}
.sc03.on .pr_slider {padding:1rem 0;opacity:1;transform:translate(0,0);transition: 0.3s;}



.sc04 {background:#f8f8f8;position:relative;}

.sc04 .container-fluid {display:flex;}
.sc04 .container-fluid>div {flex:1;}
.sc04 .left {display:flex;justify-content:flex-end;justify-content:flex-end;align-items:center;}
.sc04 .tit {width:65rem;}

.sc04 .tit h2 {line-height:1.4;transform:translateY(10rem);opacity:0;transition:0.3s;}
.sc04 .tit p {transform:translateY(10rem);opacity:0;transition:0.3s;}
.sc04 .tit a {transform:translateY(10rem);opacity:0;transition:0.3s;}

.sc04.on .tit h2 {line-height:1.4;transform:translateY(0);opacity:1;transition:0.3s;}
.sc04.on .tit p {transform:translateY(0);opacity:1;transition:0.3s 0.3s;}
.sc04.on .tit a {transform:translateY(0);opacity:1;transition:0.3s 0.5s;}

.sc04 .g_btn {font-size:18px;font-family:'Noto Serif KR',serif;font-weight:500;}
.sc04 .g_btn:after {background:var(--mc);color:#fff;font-size:16px;}

.sc04 .right {width:50%;}
.sc04 .right .pr_slider {width:140%;}

.sc04 .wave {position:absolute;top:23rem;left:0;width:15rem;height:8rem;background:url(../img/des_obj.png);background-repeat:repeat-x;background-position-x:0;animation:wave 6s infinite linear;}

@keyframes wave {
    to {background-position-x:-100%;}
}

.sc04 figure {position:relative;padding-bottom:10rem;}

.sc04 figure .set {position:absolute;bottom:0;right:-8rem;width:42rem;opacity:0;}
.sc04.on figure .set {opacity:1;transition:0.5s;}

.sc04 figure .original {filter:grayscale(0.7);}
.sc04.on figure .original {filter:grayscale(0);transition:0.5s;}





.sc05 {padding:0 0;position:relative;}
.sc05 img {width:100%;}
.sc05 .container-fluid {display:flex;}
.sc05 .container-fluid>div {flex:1;}
.sc05 .right {display:flex;justify-content:flex-start;align-items:center;padding:0 0 0 8rem;}
.sc05 .tit {width:65rem;}

.sc05 .tit h2 {line-height:1.4;transform:translateY(10rem);opacity:0;transition:0.3s;}
.sc05 .tit p {transform:translateY(10rem);opacity:0;transition:0.3s;line-height:1.6;}
.sc05 .tit a {display:block;transform:translateY(10rem);opacity:0;transition:0.3s;}

.sc05.on .tit h2 {line-height:1.4;transform:translateY(0);opacity:1;transition:0.3s;}
.sc05.on .tit p {transform:translateY(0);opacity:1;transition:0.3s 0.3s;}
.sc05.on .tit a {transform:translateY(0);opacity:1;transition:0.3s 0.5s;}

.sc05 .g_btn {font-size:18px;font-family:'Noto Serif KR',serif;font-weight:500;}
.sc05 .g_btn:after {background:var(--mc);color:#fff;}

.sc05 .left {width:50%;}

.sc05 .pr_btn i {position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:999;background:var(--mc);color:#fff;font-size:3rem;padding:1rem;}

.sc05 .pr_btn i.xi-arrow-left {margin-left:-2.5rem;background:#fff;color:var(--mc);}
.sc05 .pr_btn i.xi-arrow-right {margin-left:2.5rem;}



.sc06 {background:url(../img/main_bg03.jpg) no-repeat center center/cover;color:#fff;}

.sc06 .container {display:flex;align-items:center;}
.sc06 .container .left {flex:2.3;border-right:1px solid rgba(255,255,255,0.5);padding:5rem 0;transform:translateX(-20rem);opacity:0;transition:0.2s;}
.sc06 .container .center {flex:4;transform:translateY(10rem);opacity:0;transition:0.2s;}
.sc06 .container .right {flex:6;transform:translateX(20rem);opacity:0;transition:0.3s;}

.sc06.on .container .left {transform:translateX(0);opacity:1;transition:0.3s;}
.sc06.on .container .center {transform:translateY(0);opacity:1;transition:0.3s 0.3s;}
.sc06.on .container .right {transform:translateX(0);opacity:1;transition:0.3s 0.5s;}

.sc06 .container .left strong {display:block;width:8rem;background:#222;padding:0.5rem 0 0.7rem 0;text-align:center;margin-bottom:2rem;font-size:1.4rem;}
.sc06 .container .left h3 {font-size:2.5rem;font-weight:300;margin-bottom:4rem;line-height:1.4;}
.sc06 .container .left .date {font-size:1.3rem;font-weight:300;letter-spacing:0.08em;}
.sc06 .center .latest {padding:3rem 0 3rem 3rem;}
.sc06 .center .latest span {margin-right:2rem;color:#ddd;font-size:1.3rem;}
.sc06 .center .latest a {display:block;width:30rem;line-height:3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sc06 .container .right .case {padding-bottom:56%;position:relative;}
.sc06 .container .right iframe {position:absolute;top:0;left:0;width:100%;height:100%;}



#ft {padding:5rem 0;background:#222;color:#929292;font-size:1.4rem;font-weight:300;line-height:1.8;}
#ft .container {display:flex;width:130rem;margin:0 auto;}
#ft .container strong {color:#fff;font-weight:700;}
#ft .container .left {flex:7;}

#ft .container .right {flex:3;text-align:right;}
#ft .container .right .sns {margin-bottom:4rem;}
#ft .container .right i {font-size:2.1rem;color:#fff;padding:0.75rem;background:#444;border-radius:50%;margin-left:1rem;}

#ft .container .right .customer {font-size:1.5rem;color:#f2f2f2;}
#ft .container .right .customer a~a:before {content:"";display:inline-block;width:0.1rem;height:1.2rem;background:#ddd;margin:0 1rem;}

#ft address {font-size:1.2rem;margin-top:3rem;}