/* CSS Document */
/* ------------------------------------------------------------
 * Name      :web_layout.css    
 * Desc      :page layout 
 * Created   :
 * Updated   :
 ------------------------------------------------------------ */
@font-face {
    font-family: 'Cafe24ClassicType';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Cafe24ClassicType-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



.cafe {font-family: 'Cafe24ClassicType';}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {padding:0; margin:0;}
p, ul, ol, li, dl, dt, dd, form {list-style-image:none; list-style-position:outside; list-style-type:none; border:0px;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}
html, body {font-size:13px;	color:#242424;	line-height:140%; font-family:'SCoreDream', 'Noto Sans KR', sans-serif, dotum, gulim; -webkit-text-size-adjust:none;	-moz-text-size-adjust:none;	-ms-text-size-adjust:none;}
* {box-sizing:border-box; }

a,img,input{selector-dummy:expression(this.hideFocus=true);} 
a:link {text-decoration:none; color:#666666;}
a:visited {text-decoration:none; color:#666666;}
a:hover	{text-decoration:none; color:#333333; }
.img_m {vertical-align:middle;}
.img_t {vertical-align:top;}
.img_b {vertical-align:baseline;}

table {border-collapse:collapse;}
table img {max-width:100%;}

hr {display:none;}
ol, ul, li {list-style:none;}

.tc {text-align: center !important}

#accessibility, .skip, hr, legend {position:absolute;width:0; height:0; font-size:0; line-height:0;overflow:hidden; visibility:hidden ;}
a,img,input{selector-dummy:expression(this.hideFocus=true);} 
a img, fieldset {border:0px none; padding:0px; }
img {vertical-align:top;}
.imgW img {max-width:100%;}
caption {display:none;}
address, em{font-style:normal;}	

html:first-child select {padding-left:5px;} /* Opera Fix */
option, x:-moz-any-link {padding-left:5px;} /* Firefox Fix */
option, x:-moz-any-link, x:default {padding-right:0;} /* Firefox Fix */


/* bold */
strong, b, h4, h5, dt, th, .caption {font-weight:700;}
strong.eb, b.eb, .eb {font-weight:700;}



 body.fixe {overflow:hidden;}
 img {max-width:100%}
 .pc_view {display:block}
 .mb_view {display:none}
 #navigation {display:none;}

 
 
 /* wrap */
 #wrap {width:100%; overflow:hidden; max-width: 1920px; margin:0 auto; color:#4a4a4a; font-size:24px; line-height:1.4em; font-weight:500; transition:all 0.3s 0s ease-in-out; padding-top: 100px; font-weight: 400;}

.header {display: flex; justify-content: space-between; align-items: center;background: #fff; position: fixed; left: 0px; top: 0px; width: 100%; z-index: 99}
.header .inner {width: 100%; display: flex; justify-content: space-between; align-items: center; height: 100px;}
.header h1 img { height: 66px;}
.header .top_menu {display: flex; align-items: center;}
.header .top_menu > li:not(:first-child) {margin-left:30px;}
.header .top_menu > li img {height: 50px;}


 
 
 /* section */
.section {}
.inner {max-width:1400px; margin:0 auto; padding:0px 10px; position:relative;}

#section1 {background:url(../img/key_visual_w.jpg) no-repeat center bottom; height:1200px; padding:0px;}
#section1 .inner {display:flex; width: 100%; height: 100%; align-items: center; padding-bottom: 40px; }

.key_visual .txt_a {color: #fff; font-size:90px; line-height: 1.1em; }
.key_visual .txt_b {color: #fff; font-size:40px; line-height: 1.3em; font-weight:500; padding: 0.6em 0px 3em 0px;}
.key_visual .txt_c {color: #000000; font-size:26px; line-height: 1.3em; font-weight:600; padding: 0px 0px 10px 0px;}
.key_visual .txt_d {color: #333333; font-size:18px; line-height: 1.3em; font-weight:400; padding-bottom: 30px;}
.key_visual .app_btn {max-width: 636px;}


.app_btn {display:flex; justify-content:space-between; margin: 0px -9px;}
.app_btn > li {width: 50%; padding: 0px 9px;}
.app_btn > li > a {display: block; background: #fff; border-radius:20px; -webkit-transition:all 0.3s 0s ease-in-out; transition:all 0.3s 0s ease-in-out;}
.app_btn > li > a:hover {box-shadow: 0px 3px 10px rgba(0, 0, 0, 20%); }

#section2 {background: url(../img/gift_bg.jpg) no-repeat center bottom; overflow: hidden}


.gift_box {position: relative; height: 1100px;}
.gift_box .icon {position: absolute; transition: all 1s 0s ease-in-out;}
.gift_box .icon .star {width: 8px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 50%); position: absolute; top: 150px; left: 120px; overflow: hidden; opacity:1;}
.gift_box .pa0 {left: 50%; bottom:230px; transform: translateX(-50%); z-index: 1; transition: all 1s 1s cubic-bezier(0, 0.55, 0.68, 1.26); max-width: 22vw}
.gift_box .pa1 {left: 32.5%; bottom: 17.8%; max-width: 15vw; z-index: 2}
.gift_box .pa2 {left:54%; bottom:19.2%; max-width: 15vw; z-index: 2}
.gift_box .pa3 {left:23.5%; bottom:1%; max-width: 18vw; z-index:3}
.gift_box .pa4 {left:62%; bottom:7%; max-width: 18vw; z-index:4}
.gift_box .pa5 {left:20%; bottom:20%; max-width: 13vw; z-index:2}
.gift_box .pa6 {left:46%; bottom:13%; max-width: 12vw; z-index:6}
.gift_box .pa7 {left:72%; bottom:3%; max-width: 15vw; z-index:7}
.gift_box .pa8 {left:11.5%; bottom:2.5%; max-width: 15vw; z-index:7}
.gift_box .pa9 {left:76%; bottom:11%; max-width: 19vw; z-index:8}
.gift_box .pa10 {left:5%; bottom:22%; max-width:9vw; z-index:7}


.gift_box .pa0  {}
.gift_box .pa0 {
  -webkit-transform: translate(-50%, 0px);
  -ms-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
}

.on .gift_box .pa0 {
  -webkit-transform: translate(-50%, -250px);
  -ms-transform: translate(-50%, -250px);
  transform: translate(-50%, -250px);

}


.txt_box {display: flex; flex-wrap: wrap; justify-content: space-between; padding-top:120px;}
.txt_box > li {width: 50%; padding-top: 67px;}
.txt_box > li:nth-child(even) { max-width: 380px;}
.txt_box dl dt {font-size:2em; font-family: 'Cafe24ClassicType'; color: #fc5757; padding-bottom: 10px; font-weight: 400; line-height: 1.3em;}
.txt_box dl dd {font-weight:500;}

#section3 {background: url(../img/b_gift.png) no-repeat center bottom #f8e0e2; min-height: 919px; margin-top: -1px;}

.op_box_down {position: relative;}
.op_box_down .txt_a {padding-top:175px; font-size:2em; font-family: 'Cafe24ClassicType'; color: #fc5757; padding-bottom:20px; font-weight: 400; line-height: 1.3em;}
.op_box_down .txt_a > strong {font-size: 1.4em; line-height: 1.1em; padding-top: 1.15em; background: url(../img/ico.png) no-repeat 44px top;}
.op_box_down .txt_b {font-weight:500;}
.op_box_down .app_btn {max-width: 800px; margin: 0 auto; padding-top: 35px; z-index: 2; position: relative}
.op_box_down .phone {position: absolute; left: 0px; top: 100px; width: 100%; display: flex; justify-content: space-between; }
.op_box_down .phone > li {width: 50%; max-width: fit-content;}
.op_box_down .phone > li:nth-child(1) {margin-left:-64px}
.op_box_down .phone > li:nth-child(2) {margin-top: 10%; margin-right:-64px}


.footer {display: flex; flex-direction: column; height: 325px; justify-content: center; align-items: center; font-size: 14px; color: #666666; line-height: 1.3em;}
.footer .f_logo img {height:66px; }
.footer address {max-width: 650px; margin:20px auto;display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.footer address > span {margin:4px 5px;}
.footer address .line {height:13px; background:#999999; width: 1px;}
.footer .bt {text-align: center}
.footer .bt > a {display:inline-flex; background: #fff; align-items: center; height:2.5em; padding: 0px 10px; border: 1px solid #cfcfcf}



 
 /* 1280px */
 @media screen and (max-width:1279px) {
     
  
 
     
 }
 /* 980px  */
 @media screen and (max-width:979px) {
 
     .pc_view {display:none}
     .mb_view {display:block}
	 #wrap {font-size:2.2vw;}
	
     
     #section1 {background: url(../img/key_visual_m.jpg) no-repeat center top/cover; height: 188vw;}
     #section1 .inner {display: block; text-align: center;}
     .key_visual .txt_a {font-size:9vw; padding-top: 10vw;}
     .key_visual .txt_b {padding: 0.2em 0px 21em 0px; font-size: 5vw;}
     .key_visual .txt_c {font-size: 4vw;}
     .key_visual .txt_d {font-size: 2.7vw;}
     
     .key_visual .app_btn {margin: 0 auto;}
     
     #section2 {background: url(../img/gift_bg_m.jpg) no-repeat center top/cover; height:109vw;}
     .txt_box {padding-top:2vw;}
     .txt_box > li:nth-child(even) {max-width:34%}
     .gift_box {height: 100%}
     .gift_box .pa0 {bottom:90vw}
    
    .gift_box .pa1 {bottom:12.8%;}
    .gift_box .pa2 {bottom:13.2%;}
    .gift_box .pa3 {bottom:0%;}
    .gift_box .pa4 {bottom:1%;}
    .gift_box .pa5 {bottom:14%;}
    .gift_box .pa6 {bottom:7%;}
    .gift_box .pa7 { bottom:0%;}
    .gift_box .pa8 {bottom:0%;}
    .gift_box .pa9 {bottom:4%;}
    .gift_box .pa10 { bottom:16%;}

     .on.gift_box .pa0 {bottom: 77vw}
    .gift_box .pa0 {
      -webkit-transform: translate(-50%, 74vw);
      -ms-transform: translate(-50%, 74vw);
      transform: translate(-50%, 74vw);
    }

    .on .gift_box .pa0 {
      -webkit-transform: translate(-50%, 60vw);
      -ms-transform: translate(-50%, 60vw);
      transform: translate(-50%, 60vw);

    }
     
   .txt_box > li {padding-top:7vw;}
   .txt_box > li:nth-child(even) {max-width: 40%;}

     #section3 {background-size:61vw;}
     .op_box_down .txt_a {padding-top: 18vw; font-size:6vw}
     .op_box_down .txt_b {font-size: 2.7vw;}
     .op_box_down .phone {justify-content: center; padding:10vw 0px 30vw 0px; position: relative; left: auto; top: auto}
     .op_box_down .txt_a > strong {background: url(../img/ico.png) no-repeat 6.3vw top; background-size: 13vw; padding-top: 1.1em } 
     
 }

 /* 768  */
 @media screen and (max-width:767px) {
 	

 }
 
 
 /* 480px  */
 @media screen and (max-width:479px) {
     #wrap {padding-top: 60px;}
     .header .inner {height: 60px;}
     .header h1 img {height: 46px;}
     .header .top_menu > li img {height: 30px;}
     .header .top_menu > li:not(:first-child) {margin-left: 20px;}
     .app_btn > li > a {border-radius:10px; }
     
      #section1 {height: auto; min-height: 196vw;}
      .key_visual .txt_b {padding: 0.2em 0px 22em 0px;}
     .txt_box {padding-top: 6vw}
     .txt_box > li {padding-top:4vw; }
     .txt_box dl {font-size: 2.5vw}
     #section3 {min-height: inherit}
     .op_box_down .phone { padding:10vw 4vw 30vw 4vw;}
     .op_box_down .phone > li:nth-child(1) {margin-left:0px; margin-right:-1vw}
     .op_box_down .phone > li:nth-child(2) {margin-top: 10%; margin-right:0px;margin-left:-1vw}
     
 }