@import "global.css";
@import "twentytwenty.css";

html.fixed {height:100%;}
html.fixed body {height:100%; overflow:hidden;}

#wrap {min-width: 1640px; overflow: hidden;}
#wrap::after {content: ''; display: block; width: 100%; height: 100%; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 1; animation: fadeOut 1s 0.4s forwards;}
#wrap.open::after {display: none;}

#header {width: 100%; position: absolute; left: 0; top: 0; z-index: 10; transition: all 0.3s;}
#header .inner_box {width: 1640px; margin: 0 auto; position: relative; transition: all 0.3s;}
#header .logo button {display: block; width: 96px; height: 96px; background: url(../images/logo.jpg) 0 0 no-repeat; background-size: 96px; position: absolute; left: 0; top: 56px; transition: all 0.3s;}
#header .gnb {position: absolute; left: 195px; top: 77px; transition: all 0.3s;}
#header .gnb ul {overflow: hidden;}
#header .gnb ul li {float: left; margin-left: 68px; transition: all 0.3s;}
#header .gnb ul li:first-child {margin-left: 0;}
#header .gnb ul li button {display: block; color: #fff; font-size: 18px; line-height: 55px; text-align: center; font-family: 'Gotham Book'; transition: all 0.3s;}
#header .btn_menu {display: none;}
#header.fixed {position: fixed;}
#header.fixed .inner_box {height: 70px;}
#header.fixed .logo button {width: 57px; height: 57px; background-size: 57px; top: 6px;}
#header.fixed .gnb {top: 0;}
#header.fixed .gnb ul li button {line-height: 70px;}
#header.fixed .gnb ul li button.on {font-family: 'Gotham'; font-weight: 700;}
#header.cc .gnb ul li button {color: #003A5D;}

#contents {position:relative;}
#contents .section_01 {background-color: #003A5D;}
#contents .section_01 .inner_box {width: 1640px; height: 1080px; margin: 0 auto; position: relative;}
#contents .section_01 .txt_box {padding: 360px 0 0 195px;}
#contents .section_01 .txt_box .txt_01 {font-size: 28px; color: #fff; font-weight: 500; opacity: 0;}
#contents .section_01 .txt_box .title {width: 100%; height: 188px; margin-bottom: 35px; background: url(../images/sec_01_txt_01.png) 0 0 no-repeat; opacity: 0;}
#contents .section_01 .txt_box .txt_02 {font-size: 20px; line-height: 34px; color: #fff; font-weight: 300; opacity: 0;}
#contents .section_01 .txt_box .txt_02 strong {font-weight: 500;}
#contents .section_01 .img {width: 675px; height: 1080px; background: url(../images/sec_01_img_01.jpg) 0 0 no-repeat; background-size: 675px; position: absolute; left: calc(50% + 276px); top: 0;}
#contents .section_01 .btn_box {position: absolute; right: 0; top: 858px; overflow: hidden; z-index: 1;}
#contents .section_01 .btn_box li {display: block; width: 55px; height: 55px; margin-left: 15px; background-size: 55px !important; float: left;}
#contents .section_01 .btn_box li a {display: block; width: 55px; height: 55px;}
#contents .section_01 .btn_box li:nth-child(1) {background: url(../images/ico_01.png) 0 0 no-repeat;}
#contents .section_01 .btn_box li:nth-child(2) {background: url(../images/ico_02.png) 0 0 no-repeat;}

#contents .section_02 {padding: 155px 0;}
#contents .section_02 .inner_box {width: 1640px; margin: 0 auto; position: relative;}
#contents .section_02 .txt_box {padding: 0 0 0 235px; opacity: 0;}
#contents .section_02 .txt_box .txt_01 {margin-bottom: 25px; font-size: 28px; color: #003A5D; font-weight: 500;}
#contents .section_02 .txt_box .title {font-size: 70px; line-height: 80px; color: #003A5D; font-family: 'Gotham'; font-weight: 700; position: relative;}
#contents .section_02 .txt_box .title span {display: inline-block; font-size: 32px; color: #003A5D; font-weight: 500; position: absolute; left: 160px; top: -10px;}
#contents .section_02 .txt_box .txt_02 {margin-bottom: 55px; padding-left: 10px; font-size: 14px; color: #898989; font-weight: 300; position: relative;}
#contents .section_02 .txt_box .txt_02::after {content: '*'; display: block; font-size: 14px; color: #898989; font-weight: 300; position: absolute; left: 0; top: 0;}
#contents .section_02 .txt_box .txt_03 {font-size: 20px; line-height: 34px; color: #000; font-weight: 300;}
#contents .section_02 .img {width: 442px; height: 614px; background: url(../images/sec_02_img_01.png) 0 0 no-repeat; background-size: 442px; position: absolute; left: 1064px; top: -47px; opacity: 0;}
#contents .section_02 .img::after {content: ''; display: block; width: 179px; height: 16px; background: url(../images/sec_02_img_02.png) 0 0 no-repeat; position: absolute; left: -179px; top: 300px;}

#contents .section_03 {padding: 110px 0 125px; background-color: #F8F9FA;}
#contents .section_03 .inner_box {width: 1640px; margin: 0 auto; position: relative;}
#contents .section_03 .subtitle {margin-bottom: 30px; font-size: 28px; text-align: center; font-weight: 500; color:#003A5D; opacity: 0;}
#contents .section_03 .title {margin-bottom: 40px; font-size: 70px; color: #003A5D; text-align: center; font-family: 'Gotham'; font-weight: 700; opacity: 0;}
#contents .section_03 .info_box::after {content: ''; display: block; clear: both;}
#contents .section_03 .info_box > div {width: 50%; height: 846px; float: left; position: relative;}
#contents .section_03 .info_box > div:nth-child(1) {background: url(../images/sec_03_img_01.png) 257px 114px no-repeat; opacity: 0;}
#contents .section_03 .info_box > div:nth-child(1) .tit {display: inline-block; width: 110px; height: 40px; line-height: 40px; text-align: center; background-color: #003A5D; color: #fff; font-size: 20px; font-weight: 500; position: absolute; left: calc(50% + 45px); bottom: 120px;}
#contents .section_03 .info_box > div:nth-child(1) .txt li {font-size: 20px; line-height: 25px; font-weight: 500; color: #003A5D; position: absolute; text-align: center;}
#contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(1) {left: 227px; top: 238px;}
#contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(2) {left: 479px; top: 56px;}
#contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(3) {left: 730px; top: 238px;}
#contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(4) {left: 589px; top: 614px;}
#contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(5) {left: 297px; top: 614px;}
#contents .section_03 .info_box > div:nth-child(2) {opacity: 0;}
#contents .section_03 .info_box > div:nth-child(2)::after {content: ''; display: block; width: 550px; height: 481px; background: url(../images/sec_03_img_02.png) 0 0 no-repeat; background-size: 487px; position: absolute; left: 37px; top: -16px;}
#contents .section_03 .info_box > div:nth-child(2)::before {content: ''; display: block; width: 281px; height: 258px; background: url(../images/sec_03_img_03.png) 0 0 no-repeat; background-size: 240px; position: absolute; left: 396px; top: 32px;}
#contents .section_03 .info_box > div:nth-child(2) .tit {display: inline-block; width: 472px; height: 46px; line-height: 46px; text-align: center; background-color: #003A5D; color: #fff; font-size: 24px; font-weight: 500; position: absolute; left: 53px; top: 410px;}
#contents .section_03 .info_box > div:nth-child(2) .txt_01 {position: absolute; left: 58px; top: 485px;}
#contents .section_03 .info_box > div:nth-child(2) .txt_01 li {font-size: 20px; line-height: 29px; color:#003A5D; margin-top: 18px;}
#contents .section_03 .info_box > div:nth-child(2) .txt_01 li:first-child {margin-top: 0;}
#contents .section_03 .info_box > div:nth-child(2) .txt_01 li span {display: inline-block; margin-right: 10px; font-family: 'Gotham'; font-size: 18px; font-weight: 700; font-style: italic;}
#contents .section_03 .info_box > div:nth-child(2) .txt_02 {padding-left: 10px; margin-top: 15px; font-size: 14px; line-height: 22px; color: #898989; font-weight: 300; position: relative; left: 30px;}
#contents .section_03 .info_box > div:nth-child(2) .txt_02::after {content: '*'; font-size: 14px; color: #898989; font-weight: 300; position: absolute; left: 0; top: 0;}

#contents .section_04 {padding: 110px 0;}
#contents .section_04 .inner_box {width: 1640px; margin: 0 auto; position: relative;}
#contents .section_04 .subtitle {margin-bottom: 25px; font-size: 28px; text-align: center; font-weight: 500; color:#003A5D; opacity: 0;}
#contents .section_04 .title {margin-bottom: 130px; font-size: 70px; line-height: 75px; color: #003A5D; text-align: center; font-family: 'Gotham'; font-weight: 700; opacity: 0;}
#contents .section_04 .title span {font-size: 60px; font-family: 'Pretendard'; font-weight: 700;}
#contents .section_04 .img {margin-bottom: 100px; height: 513px; background: url(../images/sec_04_img_01.png) center center no-repeat; opacity: 0; position: relative;}
#contents .section_04 .img .txt {font-size: 14px; font-weight: 300; color: #B1B1B1; position: absolute; right: 285px; bottom: 0;}
#contents .section_04 .step_list {padding-left: 227px;}
#contents .section_04 .step_list::after {content: ''; display: block; clear: both;}
#contents .section_04 .step_list > li {float: left; width: 354px; margin-left: 62px; opacity: 0; position: relative;}
#contents .section_04 .step_list > li:first-child {margin-left: 0;}
#contents .section_04 .step_list .no {display: inline-block; width: 80px; height: 80px; background-color: #003A5D !important; background-size: 56px !important;}
#contents .section_04 .step_list li:nth-child(1) .no {background: url(../images/sec_04_step_01.png) center 11px no-repeat;}
#contents .section_04 .step_list li:nth-child(2) .no {background: url(../images/sec_04_step_02.png) center 11px no-repeat;}
#contents .section_04 .step_list li:nth-child(3) .no {background: url(../images/sec_04_step_03.png) center 11px no-repeat;}
#contents .section_04 .step_list .txt_box {height: 782px; padding: 45px 0; border: 1px solid #003A5D; position: relative; box-sizing: border-box;}
#contents .section_04 .step_list .txt_box .name {margin-bottom: 25px; font-size: 32px; color: #000; font-weight: 600; text-align: center;}
#contents .section_04 .step_list .txt_box .txt {font-size: 16px; line-height: 32px; color: #000; font-weight: 300;}
#contents .section_04 .step_list li:nth-child(1) .txt_box .txt {padding-left: 47px;}
#contents .section_04 .step_list li:nth-child(2) .txt_box .txt {padding-left: 56px;}
#contents .section_04 .step_list li:nth-child(3) .txt_box .txt {padding-left: 49px;}
#contents .section_04 .step_list .txt_box .video {padding: 0 20px; position: absolute; left: 0; bottom: 40px;}
#contents .section_04 .step_list .txt_box .video video {width: 100%;}
#contents .section_04 .step_list .txt_box .info_01 {margin-top: 50px; position: relative;}
#contents .section_04 .step_list .txt_box .info_01 span {display: block; padding-left: 162px; margin-bottom: 20px; font-size: 14px; line-height: 18px; font-weight: 300; color: #000; white-space: nowrap; position: relative;}
#contents .section_04 .step_list .txt_box .info_01 span::after {content: ''; display: block; position: absolute;}
#contents .section_04 .step_list .txt_box .info_01 span:nth-child(1)::after {width: 26px; height: 26px; border-radius: 100%; background-color: #CFDB00; left: 102px; top: -5px;}
#contents .section_04 .step_list .txt_box .info_01 span:nth-child(2)::after {width: 19px; height: 19px; border-radius: 100%; background-color: #F18D00; left: 105px; top: 0;}
#contents .section_04 .step_list .txt_box .info_01 span:nth-child(3)::after {width: 16px; height: 16px; border-radius: 100%; background-color: #FABE00; left: 106px; top: 0;}
#contents .section_04 .step_list .txt_box .info_01 span:nth-child(4)::after {width: 65px; height: 17px; background: url(../images/sec_04_ico_01.png) 0 0 no-repeat; background-size: 65px; left: 82px; top: 10px;}
#contents .section_04 .step_list .txt_box .info_02 {padding: 0 26px; position: relative; z-index: 1;}
#contents .section_04 .step_list .txt_box .info_02 > div {width: 100%; margin-top: 40px; padding: 10px; border: 2px solid #00ADBB; box-sizing: border-box; position: relative;}
#contents .section_04 .step_list .txt_box .info_02 .tit {display: inline-block; padding: 0 15px; font-size: 16px; font-weight: 700; color: #00ADBB; background-color: #fff; position: absolute; left: 10px; top: -12px;}
#contents .section_04 .step_list .txt_box .info_02 p {margin-top: 15px; padding-left: 95px; position: relative; font-size: 12px; line-height: 21px; color: #000;}
#contents .section_04 .step_list .txt_box .info_02 p strong {position: absolute; left: 0; top: 0;}
#contents .section_04 .step_list .t {font-size: 14px; font-weight: 300; color: #B1B1B1; position: absolute; right: 0; bottom: -30px;}

#contents .section_05 {padding: 110px 0 60px; background-color: #F8F9FA;}
#contents .section_05 .inner_box {width: 1361px; margin: 0 auto; position: relative;}
#contents .section_05 .title {margin-bottom: 70px; font-size: 70px; line-height: 75px; color: #003A5D; text-align: center; font-family: 'Gotham'; font-weight: 700; opacity: 0;}
#contents .section_05 .img_box {height: 395px; margin-bottom: 40px;}
#contents .section_05 .img_box span {display: block; height: 395px; float: left; background-size: 100% !important;}
#contents .section_05 .img_box .img_01 {width: 395px; margin-right: 19px; background: url(../images/sec_05_img_01.png) 0 0 no-repeat; opacity: 0;}
#contents .section_05 .img_box .img_02 {width: 533px; margin-right: 19px; background: url(../images/sec_05_img_02.png) 0 0 no-repeat; opacity: 0;}
#contents .section_05 .img_box .img_03 {width: 395px; background: url(../images/sec_05_img_03.png) 0 0 no-repeat; opacity: 0;}
#contents .section_05 .txt_box {opacity: 0;}
#contents .section_05 .txt_box::after {content: ''; display: block; clear: both;}
#contents .section_05 .txt_box li {height: 64px; margin-bottom: 50px; font-size: 20px; float: left; color: #003A5D;}
#contents .section_05 .txt_box li:nth-child(1),
#contents .section_05 .txt_box li:nth-child(4),
#contents .section_05 .txt_box li:nth-child(7) {width: 414px;}
#contents .section_05 .txt_box li:nth-child(2),
#contents .section_05 .txt_box li:nth-child(5),
#contents .section_05 .txt_box li:nth-child(8) {width: 552px;}
#contents .section_05 .txt_box li:nth-child(3),
#contents .section_05 .txt_box li:nth-child(6),
#contents .section_05 .txt_box li:nth-child(9) {width: 395px;}
#contents .section_05 .txt_box li:first-child {background: url(../images/sec_05_img_04.png) 0 0 no-repeat; background-size: 257px;}
#contents .section_05 .txt_box li span {display: block; margin-bottom: 5px; font-size: 18px; font-family: 'Gotham'; font-weight: 700; font-style: italic;}
#contents .section_05 .txt_box li em {font-size: 14px;}

#contents .section_06 {padding: 110px 0;}
#contents .section_06 .inner_box {width: 1640px; margin: 0 auto; position: relative;}
#contents .section_06 .title {margin-bottom: 70px; font-size: 70px; line-height: 75px; color: #003A5D; text-align: center; font-family: 'Gotham'; font-weight: 700; opacity: 0;}
#contents .section_06 .slider {padding-left: 236px; overflow: hidden; opacity: 0;}
#contents .section_06 .slider > div {width: 338px; height: 338px; margin: 0 76px 28px 0; float: left;}
#contents .section_06 .before_after_img {width: 338px; height: 338px;}
#contents .section_06 .twentytwenty-horizontal .twentytwenty-before-label:before, 
#contents .section_06 .twentytwenty-horizontal .twentytwenty-after-label:before {top: auto; bottom: 8px;}
#contents .section_06 .txt {font-size: 16px; font-weight: 300; color: #003A5D; position: absolute; left: 1223px; top: 510px; opacity: 0;}

#contents .section_07 {padding: 110px 0 60px; background-color: #F8F9FA;}
#contents .section_07 .inner_box {width: 1085px; margin: 0 auto; position: relative;}
#contents .section_07 .title {margin-bottom: 70px; font-size: 70px; line-height: 75px; color: #003A5D; text-align: center; font-family: 'Gotham'; font-weight: 700; opacity: 0;}
#contents .section_07 .partners_box {opacity: 0;}
#contents .section_07 .partners_box ul {width: 1152px;}
#contents .section_07 .partners_box ul li {float: left; width: 220px; height: 92px; margin-bottom: 55px; margin-right: 68px;}
#contents .section_07 .partners_box ul li:nth-child(1) {background: url(../images/sec_07_logo_01.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(2) {background: url(../images/sec_07_logo_02.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(3) {background: url(../images/sec_07_logo_03.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(4) {background: url(../images/sec_07_logo_04.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(5) {background: url(../images/sec_07_logo_05.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(6) {background: url(../images/sec_07_logo_06.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(7) {background: url(../images/sec_07_logo_07.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(8) {background: url(../images/sec_07_logo_08.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(9) {background: url(../images/sec_07_logo_09.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(10) {background: url(../images/sec_07_logo_10.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(11) {background: url(../images/sec_07_logo_11.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul li:nth-child(12) {background: url(../images/sec_07_logo_12.png) center 0 no-repeat;}
#contents .section_07 .partners_box ul::after {content: ''; display: block; clear: both;}

#footer {padding: 170px 0; background-color: #003A5D;}
#footer .inner_box {width: 1640px; margin: 0 auto; position: relative;}
#footer .inner_box::after {content: ''; display: block; width: 96px; height: 96px; background: url(../images/footer_logo.png) 0 0 no-repeat; background-size: 96px; position: absolute; left: 0; top: 10px;}
#footer address {padding-left: 828px; font-size: 16px; line-height: 28px; font-weight: 300; color: #fff;}

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

  #wrap {min-width: 428px; }

  #header .inner_box {width: 428px;}
  #header .logo button {width: 75px; height: 75px; background-size: 75px; left: 37px; top: 47px;}
  #header .gnb {display: block; width: 300px; height: 100%; position: fixed; left: auto; right: -100%; top: 0; background-color: #003A5D; transition: all 0.3s;}
  #header.menu_open .gnb {right: 0;}
  #header .gnb ul {overflow: hidden; padding-top: 120px;}
  #header .gnb ul li {float: none; margin-left: 0; margin-bottom: 50px;}
  #header .gnb ul li button {width: 100%; font-size: 20px;}
  #header .btn_menu {display: block; position: absolute; top: 37px; right: 37px; z-index: 1001; width: 27px; height: 27px; transition: all 0.3s;}
  #header .btn_menu:before {display: block; content: ''; position: absolute; top: 8px; left: 0; width: 100%; height: 2px; background: #003A5D; text-indent: -9999em; transition: all 300ms;}
  #header .btn_menu span {display: block; position: absolute; top: 18px; left: 0; width: 100%; height: 2px; background: #003A5D; text-indent: -9999em; transition: all 300ms;}
  #header .btn_menu:after {display: block; content: ''; position: absolute; top: 28px; left: 0; width: 100%; height: 2px; background: #003A5D; text-indent: -9999em; transition: all 300ms;}
  #header.menu_open .btn_menu {position: fixed;}
  #header.menu_open .btn_menu:before {top: 18px; background: #ffffff; transform: rotate(45deg);}
  #header.menu_open .btn_menu span {background: #ffffff; opacity: 0;}
  #header.menu_open .btn_menu:after {top: 18px; background: #ffffff; transform: rotate(-45deg);}
  #header.fixed .logo button {width: 57px; height: 57px; background-size: 57px; top: 6px;}
  #header.fixed .gnb {top: 0;}
  #header.fixed .gnb ul li {margin-left: 0;}
  #header.fixed .gnb ul li button {line-height: 55px;}
  #header.fixed .btn_menu {top: 17px;}
  #header.cc .gnb ul li button {color: #fff;}

  #contents .section_01 {background-color: #fff;}
  #contents .section_01 .inner_box {width: 428px; height: 1388px;}
  #contents .section_01 .txt_box {width: 100%; height: 462px; padding: 125px 0 0 37px; box-sizing: border-box; background-color: #003A5D; position: absolute; left: 0; bottom: 0;}
  #contents .section_01 .txt_box .txt_01 {font-size: 22px; color: #003A5D; position: absolute; left: 40px; top: -302px; z-index: 1;}
  #contents .section_01 .txt_box .title {background: url(../images/sec_01_txt_01_m.png) 0 0 no-repeat; background-size: 320px; position: absolute; left: 40px; top: -278px; z-index: 1;}
  #contents .section_01 .txt_box .txt_02 {font-size: 18px; line-height: 32px;}
  #contents .section_01 .txt_box .txt_02 br {display: none;}
  #contents .section_01 .txt_box .txt_02 span {display: block;}
  #contents .section_01 .img {width: 428px; height: 926px; overflow: hidden; background: url(../images/sec_01_img_01.jpg) 0 0 no-repeat; background-size: 600px; position: absolute; left: 0; top: 0;}
  #contents .section_01 .img::after {content: ''; display: block; width: 100%; height: 283px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); position: absolute; left: 0; bottom: 0;}
  #contents .section_01 .btn_box {right: 37px; top: 822px;}
  #contents .section_01 .btn_box li {width: 40px; height: 40px; margin-left: 10px; background-size: 40px !important;}
  #contents .section_01 .btn_box li a {width: 40px; height: 40px;}
  
  #contents .section_02 {padding: 110px 0;}
  #contents .section_02 .inner_box {width: 428px; padding: 0 35px; box-sizing: border-box;}
  #contents .section_02 .txt_box {padding: 0;}
  #contents .section_02 .txt_box .txt_01 {font-size: 22px; letter-spacing: -0.07em;}
  #contents .section_02 .txt_box .title span {left: 140px;}
  #contents .section_02 .txt_box .title {font-size: 60px; line-height: 72px;}
  #contents .section_02 .txt_box .txt_02 {font-size: 13px;}
  #contents .section_02 .txt_box .txt_02::after {font-size: 13px;}
  #contents .section_02 .txt_box .txt_03 {margin-bottom: 100px; font-size: 16px; line-height: 32px;}
  #contents .section_02 .txt_box .txt_03 br {display: none;}
  #contents .section_02 .img {width: 357px; height: 496px; background-size: 357px; position: static;}
  #contents .section_02 .img::after {display: none;}
  
  #contents .section_03 {padding: 110px 0;}
  #contents .section_03 .inner_box {width: 428px;}
  #contents .section_03 .subtitle {margin-bottom: 20px; font-size: 18px;}
  #contents .section_03 .title {margin-bottom: 70px; font-size: 70px;}
  #contents .section_03 .info_box > div {width: 100%; float: none;}
  #contents .section_03 .info_box > div:nth-child(1) {height: 494px; margin-bottom: 120px; background-size: 354px; background-position: center 47px;}
  #contents .section_03 .info_box > div:nth-child(1) .tit {width: 85px; height: 30px; line-height: 30px; font-size: 16px; left: calc(50% - 42px); bottom: 0;}
  #contents .section_03 .info_box > div:nth-child(1) .txt li {font-size: 16px; line-height: 22px;}
  #contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(1) {left: 37px; top: 95px;}
  #contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(2) {left: 185px; top: 0;}
  #contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(3) {left: 337px; top: 95px;}
  #contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(4) {left: 259px; top: 390px;}
  #contents .section_03 .info_box > div:nth-child(1) .txt li:nth-child(5) {left: 57px; top: 390px;}
  #contents .section_03 .info_box > div:nth-child(2) {height: 810px;}
  #contents .section_03 .info_box > div:nth-child(2)::after {background-size: 456px; position: absolute; left: -30px; top: 0;}
  #contents .section_03 .info_box > div:nth-child(2)::before {background-size: 161px; left: 244px; top: -66px;}
  #contents .section_03 .info_box > div:nth-child(2) .tit {width: 354px; height: 35px; line-height: 35px; font-size: 18px; left: 35px; top: 398px;}
  #contents .section_03 .info_box > div:nth-child(2) .txt_01 {left: 45px; top: 470px;}
  #contents .section_03 .info_box > div:nth-child(2) .txt_01 li {font-size: 16px; line-height: 26px;}
  #contents .section_03 .info_box > div:nth-child(2) .txt_01 li span {margin-bottom: 3px; display: block;}
  #contents .section_03 .info_box > div:nth-child(2) .txt_02 {font-size: 13px; line-height: 20px; left: 0;}
  #contents .section_03 .info_box > div:nth-child(2) .txt_02::after {font-size: 13px;}
  
  #contents .section_04 {padding: 110px 0;}
  #contents .section_04 .inner_box {width: 428px;}
  #contents .section_04 .subtitle {font-size: 22px;}
  #contents .section_04 .subtitle span {display: block;}
  #contents .section_04 .title {margin-bottom: 60px; font-size: 60px; line-height: 72px;}
  #contents .section_04 .title span {font-size: 45px;}
  #contents .section_04 .img {margin-bottom: 100px; height: 1093px; background: url(../images/sec_04_img_01_m.png) center center no-repeat; background-size: 325px;}
  #contents .section_04 .img .txt {font-size: 10px; right: 55px; bottom: -20px;}
  #contents .section_04 .step_list {padding: 0 35px;}
  #contents .section_04 .step_list > li {float: none; width: 100%; margin-left: 0; margin-top: 90px;}
  #contents .section_04 .step_list > li:first-child {margin-top: 0;}
  #contents .section_04 .step_list .no {width: 80px; height: 80px; position: relative; left: calc(50% - 40px); background-size: 56px !important;}
  #contents .section_04 .step_list .txt_box {height: 782px; padding: 45px 0;}
  #contents .section_04 .step_list .txt_box .name {text-align: center;}
  #contents .section_04 .step_list .txt_box .txt {font-size: 16px; line-height: 32px;}
  #contents .section_04 .step_list .txt_box .video {padding: 0 20px; bottom: 20px;}
  #contents .section_04 .step_list .txt_box .info_01 {margin-top: 50px;}
  #contents .section_04 .step_list .txt_box .info_01 span {margin-bottom: 20px !important; font-size: 13px;}
  #contents .section_04 .step_list .txt_box .info_01 span::after {content: ''; display: block; position: absolute;}
  #contents .section_04 .step_list .txt_box .info_01 span:nth-child(1)::after {top: -5px;}
  #contents .section_04 .step_list .txt_box .info_01 span:nth-child(2)::after {top: 0;}
  #contents .section_04 .step_list .txt_box .info_01 span:nth-child(3)::after {top: 0;}
  #contents .section_04 .step_list .txt_box .info_01 span:nth-child(4)::after {width: 65px; height: 17px; background: url(../images/sec_04_ico_01.png) 0 0 no-repeat; background-size: 65px; top: 10px;}
  #contents .section_04 .step_list .txt_box .info_01 span:nth-child(1) {margin-bottom: 0;}
  #contents .section_04 .step_list .txt_box .info_01 span:nth-child(3) {position: relative; left: 0; top: 0;}
  #contents .section_04 .step_list .txt_box .info_01 span:nth-child(4) {position: relative; left: 0; top: 0;}
  #contents .section_04 .step_list .txt_box .info_02 {margin-top: 30px;}
  #contents .section_04 .step_list .txt_box .info_02 p {margin-top: 10px;}
  #contents .section_04 .step_list .txt_box .info_02 p strong {position: absolute; left: 0; top: 0;}
  #contents .section_04 .step_list .t {font-size: 10px; bottom: -22px;}
  
  #contents .section_05 {padding: 110px 0;}
  #contents .section_05 .inner_box {width: 428px; padding: 0 37px; box-sizing: border-box;}
  #contents .section_05 .title {font-size: 60px; line-height: 72px;}
  #contents .section_05 .img_box {height: 901px; margin-bottom: 50px;}
  #contents .section_05 .img_box span {display: block; float: left;}
  #contents .section_05 .img_box .img_01 {width: 354px; height: 354px; margin: 0 0 15px;}
  #contents .section_05 .img_box .img_02 {width: 354px; height: 163px; margin: 0 0 15px; background-position: 0 -75px;}
  #contents .section_05 .img_box .img_03 {width: 354px; height: 354px;}
  #contents .section_05 .txt_box {position: relative;}
  #contents .section_05 .txt_box::before {background-size: 246px; position: absolute; left: 40px; top: 0;}
  #contents .section_05 .txt_box li {width: 100% !important; padding-left: 20px; margin-bottom: 9px; font-size: 16px; float: none; box-sizing: border-box;}
  #contents .section_05 .txt_box li span {margin-bottom: 5px;}
  #contents .section_05 .txt_box li:first-child {background-position: center 0; margin-bottom: 25px; padding-left: 0;}
  
  #contents .section_06 {padding: 110px 0 170px;}
  #contents .section_06 .inner_box {width: 428px;}
  #contents .section_06 .title {font-size: 60px; line-height: 72px;}
  #contents .section_06 .slider {padding-left: 83px; overflow: hidden;}
  #contents .section_06 .slider > div {width: 263px; height: 263px; margin: 0; float: none;}
  #contents .section_06 .before_after_img {width: 263px; height: 263px;}
  #contents .section_06 .twentytwenty-horizontal .twentytwenty-before-label:before, 
  #contents .section_06 .twentytwenty-horizontal .twentytwenty-after-label:before {top: auto; bottom: 8px;}
  #contents .section_06 .txt {width: 100%; left: 0; top: 505px; text-align: center;}
  #contents .section_06 .slider .slick-arrow {display: inline-block; width: 10px; height: 17px; font-size: 0; color: transparent; background: url(../images/sec_06_control.png) 0 0 no-repeat; background-size: 20px; position: absolute; top: 122px; z-index: 1; outline: none;}
  #contents .section_06 .slider .slick-arrow.slick-prev {background-position: left 0; left: 30px;}
  #contents .section_06 .slider .slick-arrow.slick-next {background-position: right 0; right: 30px;}
  #contents .section_06 .slider .slick-arrow.slick-prev.slick-disabled,
  #contents .section_06 .slider .slick-arrow.slick-next.slick-disabled {opacity: 0.2;}

  #contents .section_07 .inner_box {width: 100%;}
  #contents .section_07 .title {font-size: 60px;}
  #contents .section_07 .partners_box ul {width: 100%;}
  #contents .section_07 .partners_box ul li {float: none; width: 100%; margin-right: 0;}

  #footer {padding: 80px 0;}
  #footer .inner_box {width: 428px;}
  #footer .inner_box::after {width: 80px; height: 80px; background-size: 80px; left: 37px; top: 0;}
  #footer address {padding:115px 37px 0; font-size: 12px; line-height: 22px;}
}

#contents .section_01 .txt_box .title {animation: fadeUp 1s 1s forwards;}
#contents .section_01 .txt_box .txt_01 {animation: fadeIn 2s 1.6s forwards;}
#contents .section_01 .txt_box .txt_02 {animation: fadeIn 2s 1.8s forwards;}
#contents .section_02.ani .txt_box {animation: fadeUp 1s forwards;}
#contents .section_02.ani .img {animation: fadeIn 2s 0.4s forwards;}
#contents .section_03.ani .subtitle {animation: fadeUp 1s forwards;}
#contents .section_03.ani .title {animation: fadeUp 1s forwards;}
#contents .section_03.ani .info_box > div:nth-child(1) {animation: fadeIn 1.5s 0.4s forwards;}
#contents .section_03.ani .info_box > div:nth-child(2) {animation: fadeIn 1.5s 0.8s forwards;}
#contents .section_04.ani .subtitle {animation: fadeUp 1s forwards;}
#contents .section_04.ani .title {animation: fadeUp 1s forwards;}
#contents .section_04.ani .img {animation: fadeIn 1.5s 0.4s forwards;}
#contents .section_04.ani .step_list > li:nth-child(1) {animation: fadeLeft 1.5s 0.8s forwards;}
#contents .section_04.ani .step_list > li:nth-child(2) {animation: fadeLeft 1.5s 1.2s forwards;}
#contents .section_04.ani .step_list > li:nth-child(3) {animation: fadeLeft 1.5s 1.6s forwards;}
#contents .section_05.ani .title {animation: fadeUp 1s forwards;}
#contents .section_05.ani .img_box .img_01 {animation: fadeIn 2s 0.4s forwards;}
#contents .section_05.ani .img_box .img_02 {animation: fadeIn 2s 0.6s forwards;}
#contents .section_05.ani .img_box .img_03 {animation: fadeIn 2s 0.8s forwards;}
#contents .section_05.ani .txt_box {animation: fadeIn 2s 1.2s forwards;}
#contents .section_06.ani .title {animation: fadeUp 1s forwards;}
#contents .section_06.ani .slider {animation: fadeIn 1s 0.4s forwards;}
#contents .section_06.ani .txt {animation: fadeIn 1s 0.4s forwards;}
#contents .section_07.ani .title {animation: fadeUp 1s forwards;}
#contents .section_07.ani .partners_box {animation: fadeIn 1s 0.4s forwards;}


@keyframes fadeUp{ 
  0%{transform:translateY(70px); opacity: 0;} 
  100%{transform:translateY(0); opacity: 1;}
}
@keyframes fadeLeft{ 
  0%{transform:translateX(70px); opacity: 0;} 
  100%{transform:translateX(0); opacity: 1;}
}
@keyframes fadeIn{ 
  0%{opacity: 0;} 
  100%{opacity: 1;}
}
@keyframes fadeOut{ 
  0%{opacity: 1;} 
  100%{opacity: 0;}
}