@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');
html {font-size:20px;}
body {font-size:.0.8rem;}
hr {display:none;}
hr.mhr {display:block; position:relative; border-top:1px solid#ddd; margin:2.3rem 0; overflow:visible;}
hr.mhr:after {content:"\e935"; font-family: xeicon!important; background:#ddd; padding:0.5rem; position:absolute; top:-0.95rem; left:50%; transform:translateX(-50%); border-radius:50%;}


/*헤더*/
.header {display:flex; justify-content:space-between; position:fixed; top:0; left:0; width:100%; min-width:95rem; background:rgba(0, 0, 0, 0.8); color:#f3f3f3; padding:0rem 3rem; line-height:5rem; z-index:19;}

.header>nav>ul {display:flex;}
.header>nav>ul>li>a {display:block; padding:0 1.5rem;}

.header>a {font-size:2rem; line-height:5rem;}  /*<-이건 xi-bars를 잡고있는 a임*/
.header>a::before {content:"\e91c"; font-family: xeicon!important;}
.header>a.on::before {content:\e921;}


/*메인 네비부분 (오른쪽)*/
.navbar {position:fixed; top:50%; right:3rem; transform:translateY(-50%); color:#999;}
.navbar>li a {display:block; width:0.75rem; height:0.75rem;font-size:0; margin:0.3rem auto; text-align:center; position:relative;}
.navbar>li a:after {content:"＊"; font-family: xeicon!important; font-size:0.5rem; display:inline-block; border-radius:50%; text-align:center; margin:auto; transition:0.5s;}
.navbar>li.on a:after {transform:scale(2.5) rotate(360deg); color:#f00;}



/*콘01 - 메인페이지 */
.con01 {background:url(../img/main.png) no-repeat center center/cover; text-align:center; color:#f3f3f3;}
.con01 strong {display:block; font-size:2.3rem; font-weight:100; margin-bottom:1rem; letter-spacing:0.5rem; opacity:0; transform:translateY(100px);} 
.con01 h2 {font-size:4rem; font-weight:700; margin-bottom:2rem; opacity:0; transform:translateY(100px);} 
.con01 span {display:block; font-size:0.8rem; font-weight:300; opacity:0; transform:translateY(100px);} 

.con01.on strong {opacity:1; transform:translateY(0); transition:0.6s;} 
.con01.on h2 {opacity:1; transform:translateY(0); transition:0.6s 0.4s;} 
.con01.on span {opacity:1; transform:translateY(0); transition:0.6s 0.7s;} 






/*콘02 - 서브페이지01 */
.con02 {text-align:center;}
.con02 .container {width:80rem; margin:0 auto;}
.con02 h2 {font-family: 'Montserrat', sans-serif; font-size:2rem; font-weight:200; margin-bottom:1rem;}

/*.con02 .brand_wrap {display:flex; flex-flow:column wrap; height:25rem;}
.con02 .brand_wrap .itm01 {background:#888; height:25rem; width:40rem;}
.con02 .brand_wrap .itm02 {background:#777; height:12.5rem; width:40rem;}
.con02 .brand_wrap .itm03 {background:#666; height:12.5rem; width:40rem;}  flex로 짜기(가로 슬라이드 돌릴때 힘들수도)*/  

/*.con02 .brand_wrap {display:grid; grid-template-columns:40rem 40rem; grid-template-rows:12.5rem 12.5rem;}
.con02 .brand_wrap .itm01 {grid-row: 1 / 3; background:#888;}
.con02 .brand_wrap .itm02 {background:#777;}
.con02 .brand_wrap .itm03 {background:#666;} grid로 짜기(아직 덜배워서 못쓰겠음)*/

.con02 .brand_name {display:flex; justify-content:center; margin:0 0 2rem 0;}
.con02 .brand_name li {padding:0 1rem;}
.con02 .brand_name li img {height:1rem;} /*<-잘안쓰는방법.이미지가 들쑥날쑥해서 맞추기위해 사용*/

.con02 .brand_name li:after {content:""; display:block; width:0; height:0.1rem; background:#fd7070bb; transition:0.3s; margin:0.5rem auto 0 auto;}
.con02 .brand_name li.on:after {width:100%; }   


.con02 .brand_wrap {}
.con02 .brand_wrap>div {float:left;}
.con02 .brand_wrap .itm01 {background:#888; height:25rem; width:40rem;}
.con02 .brand_wrap .itm02 {background:#777; height:12.5rem; width:40rem;}
.con02 .brand_wrap .itm03 {background:#666; height:12.5rem; width:40rem;} /*float으로 짜기(그나마 간단..?)*/

.con02 .itm01 figure {height:25rem; padding:12rem 0;}
.con02 .itm02 figure {height:12.5rem; padding:5rem 0;}
.con02 .itm03 figure {height:12.5rem; padding:5rem 0;}

.con02 figure {color:#fff; background-position:center center; background-repeat:no-repeat; background-size:cover;}

.con02 .itm01 .cn01 {background-image:url(../img/main_story_v0101.png);}
.con02 .itm01 .cn02 {background-image:url(../img/main_story_v0201.png);}
.con02 .itm01 .cn03 {background-image:url(../img/main_story_v0301.png);}
.con02 .itm01 .cn04 {background-image:url(../img/main_story_v0401.png);}

.con02 .itm02 .cn01 {background-image:url(../img/main_story_v0102.png);}
.con02 .itm02 .cn02 {background-image:url(../img/main_story_v0202.png);}
.con02 .itm02 .cn03 {background-image:url(../img/main_story_v0302.png);}
.con02 .itm02 .cn04 {background-image:url(../img/main_story_v0402.png);}

.con02 .itm03 .cn01 {background-image:url(../img/main_story_v0103.png);}
.con02 .itm03 .cn02 {background-image:url(../img/main_story_v0203.png);}
.con02 .itm03 .cn03 {background-image:url(../img/main_story_v0303.png);}
.con02 .itm03 .cn04 {background-image:url(../img/main_story_v0403.png);}

.con02 figure h3 {font-size:1.5rem; font-weight:700; margin-bottom:0.5rem;}
.con02 figure p {font-size:0.75rem; font-weight:300;}






/*콘03 - 서브페이지02 */
.con03 {background:#F5F2ED url(../img/main_ourbg_icn.png) no-repeat right bottom;}

.con03 .container {display:flex; width:80rem; margin:0 auto;}
.con03 .container>* {flex:1;}
.con03 .container img {width:100%;}
.con03 .txt {padding:5rem 0 5rem 5rem; font-family: 'Montserrat', sans-serif;}

.con03 .txt h2 {font-size:1rem; font-weight:300; margin-bottom:1rem;}
.con03 .txt strong {display:block; font-size:2.5rem; font-weight:700; margin-bottom:2rem;}
.con03 .txt p {font-family: 'Noto Sans KR'; line-height:1.6; margin-bottom:3rem;}
.con03 .txt a {display:inline-block; line-height:2rem; background:#333; color:#fff; text-align:center; padding:0 2rem;}

.con03 figure {opacity:0; transform:translateX(-500px);}
.con03 .txt {opacity:0; transform:translateY(300px);}

.con03.on figure {opacity:1; transform:translateX(0); transition:0.5s;}
.con03.on .txt {opacity:1; transform:translateY(0); transition:0.5s 0.3s;}




/*콘04 - 서브페이지03 */
.con04 {background:#F5F2ED url(../img/main_pebg.png) no-repeat left top;}

.con04 .container {display:flex; width:80rem; margin:0 auto;}
.con04 .container>* {flex:1;}
.con04 .container img {width:100%;}
.con04 .txt {padding:5rem 0 5rem 5rem; font-family: 'Montserrat', sans-serif;}

.con04 .txt h2 {font-size:1rem; font-weight:300; margin-bottom:1rem;}
.con04 .txt strong {display:block; font-size:2.5rem; font-weight:700; margin-bottom:2rem;}
.con04 .txt p {font-family: 'Noto Sans KR'; line-height:1.6; margin-bottom:3rem;}
.con04 .txt a {display:inline-block; line-height:2rem; background:#333; color:#fff; text-align:center; padding:0 2rem;}

.con04 figure {opacity:0; transform:translateX(500px);}
.con04 .txt {order:-1; opacity:0; transform:translateY(300px);}

.con04.on figure {opacity:1; transform:translateX(0); transition:0.5s;}
.con04.on .txt {opacity:1; transform:translateY(0); transition:0.5s 0.3s;}
.con04.on .txt {animation:bounce 1.5s infinite;}







/*콘05 - 서브페이지04 */
.con05 {background:#E6E7E2;}
.con05 .tit {font-size:2.5rem; font-weight:700; padding:1rem 0 0 0; line-height:1.2; background:url(../img/bg_joy.png) no-repeat right bottom/300px;}

/*.con05 .container {display:flex; flex-flow:row wrap; width:80rem; margin:0 auto;}
.con05 .container>div {width:20%; height:12.5rem; background:#fa7538;} flex로 짜기*/

/*.con05 .container {width:80rem; margin:0 auto;}
.con05 .container>div {float:left; width:20%; height:12.5rem; background:#fa7538;} float으로 짜기*/

.con05 .container {display:grid; grid-template-columns:repeat(5, 1fr); width:80rem; margin:0 auto;}
.con05 .container>div {height:calc(80rem / 5 - 1rem);} /*grid로 짜기*/


.con05 .itm {position:relative; overflow:hidden;}
.con05 .itm img {width:125%; transition:0.5s;}
.con05 .itm .sns {display:flex; justify-content:center; align-items:center; position:absolute; top:100%; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); color:#fff; font-size:2rem; transition:0.5s;}
.con05 .itm .sns a {display:block; margin:0 0.25rem; }
.con05 .itm:hover .sns {top:0;}
.con05 .itm figure {overflow:hidden;}
.con05 .itm:hover img {transform:scale(1.2);}





/*푸터 */
.footer .top {text-align:center; font-size:1rem; line-height:5rem; border-bottom: 1px solid #ddd;}
.footer .top>li {display:inline-block; }
.footer .top>li a {padding:0 1rem;}
.footer .top>li~li::before {content:""; display:inline-block; width:0.1rem; height:0.75rem; background:#ddd;}

.footer .customer {text-align:center; font-size:0.8rem; line-height:3rem; font-weight:300;}
.footer .customer>li {display:inline-block;}
.footer .customer>li a {padding:0 1rem;}
.footer .customer>li~li::before {content:""; display:inline-block; width:0.1rem; height:0.5rem; background:#ddd;}

.footer .service {text-align:center; font-size:0.7rem; line-height:1rem; font-weight:300; color:#666;}
.footer .service>li {display:inline-block;}
.footer .service>li a {padding:0 0.5rem;}
.footer .service>li~li::before {content:""; display:inline-block; width:0.1rem; height:0.5rem; background:#ddd;}

.footer address {text-align:center; padding:0.75rem 0 2rem 0; font-size:0.65rem; color:#444;}








.now {position:fixed; top:50%; left:3rem; transform:translateY(-50%);}                   /*<-왼쪽에 있는 스크롤할때마다 바뀌는 숫자*/




.wheel {position:absolute; bottom:4rem; left:50%; transform:translateX(-50%); width:2rem; height:3.2rem;  border:3px solid rgba(255, 255, 255, 0.5); border-radius:0.5rem 0.5rem 0.8rem 0.8rem; font-size:0; }
.wheel span {display:block; width:0.2rem; height:0.8rem; background:rgba(255, 255, 255, 0.5); position:absolute; bottom:0.5rem; left:50%; transform:translateX(-50%); border-radius:0.1rem; animation:wheel 0.7s infinite;}



@keyframes wheel {
    to {bottom:0.8rem;}
}


.all_menu {display:none; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.94); width:100%; height:100vh;}
.all_menu .container {display:flex; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70rem; text-align:center; color:#f2f2f2; font-size:1.2rem; }
.all_menu .container>li {flex:1;}
.all_menu a {display:block; line-height:1.6;}
.all_menu dt {font-size:1.8rem; font-weight:700; margin-bottom:2rem; }
.all_menu dt:after {content:""; display:block; width:0rem; height:0.1rem; background:#fd7070bb; margin:1rem auto; transition:0.3s;}
.all_menu li:hover dt:after {width:3rem; }
.all_menu dd:hover {color:#fd7070bb;}