@font-face {
    font-family: 'KOTRA_BOLD-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

header {
    padding: 15px;
    border-bottom: 1px solid #f0f2f4;
}
header .logo{
    width: 100px;
}

main {
    padding: 20px 20px 30px;
}

#wrap .section1 {
    display: flex;
    width: 100%;
	margin-bottom: 20px;
}
#wrap .section1 .right {
    text-align: right;
    width: 65%;
}
#wrap .section1 .right img{
   width: 350px;
}
#wrap .section1 .left {
    width:35%;
    margin-top: 3rem;
}
#wrap .section1 .left_mo {
    display: none;
}
#wrap .section1 .left .p1{
   font-size: 40px;
   font-family: 'KOTRA_BOLD-Bold';
   line-height: 1.5;
   white-space: nowrap;
}
#wrap .section1 .left .p2{
   font-size:23px;
   line-height: 1.5;
   white-space: nowrap;
   margin:1rem 0;
   color: #595959;
}
#wrap .section1 .left a{
   display: inline-block;
   padding: 1rem;
   border: 1px solid #cdcdcd;
   border-radius: 30px;
   font-size: 20px;
   white-space: nowrap;
}
#wrap .section2 {
 width: 100%;
 display: flex;
 margin-top: 20px;
 flex-wrap: wrap; 
 justify-content: space-between;
}
#wrap .section2 .btn1{
   background-color: #fb4b12;
   border-radius: 10px;
   display: flex;
   padding: 15px 0 15px 15px;
   width: 49%;
   justify-content: space-between;
  
}
#wrap .section2 .btn1 .left .p1{
   font-size: 23px;
   color: #fff;
   line-height: 1.5;
   font-weight: 600;
}
#wrap .section2 .btn1 .left .p1_mo{
   display: none;
}
#wrap .section2 .btn1 .left img{
   width: 50px;
   margin: 3rem 0 1rem;
}
#wrap .section2 .btn1 .right {
   width: 50%;
   text-align: right;
   display: flex;
   align-items: end;
   justify-content: flex-end;
   overflow: hidden;
}
#wrap .section2 .btn1 .right img{
   width: 150px;
   margin-right: -20px;
   
}
#wrap .section2 .btn2{
   background-color: #fc7e0d;
   border-radius: 10px;
   display: flex;
   padding: 15px;
   width: 49%;
   justify-content: space-between;
}
#wrap .section2 .btn2 .left {
   display: flex;
   flex-direction: column;
   justify-content: space-between
}
#wrap .section2 .btn2 .left .p1{
   font-size: 23px;
   color: #fff;
   line-height: 1.5;
   font-weight: 600;
}
#wrap .section2 .btn2 .left img{
   width: 50px;
   margin: 3rem 0 1rem;
}
#wrap .section2 .btn2 .right {
   width: 50%;
   text-align: right;
   display: flex;
   align-items: end;
   justify-content: flex-end;
}
#wrap .section2 .btn2 .right img{
   width: 110px;
}
#wrap .section3{
   margin-top: 2rem;
}

#wrap .section3 .btn3{
   background-color: #ffa447;
   border-radius: 10px;
   display: flex;
   padding: 15px;
   width: 100%;
   justify-content: space-between;
}
#wrap .section3 .btn3 .left {
   display: flex;
   flex-direction: column;
   /* white-space: nowrap; */
}
#wrap .section3 .btn3 .left .p1{
   font-size: 23px;
   color: #fff;
   line-height: 1.5;
   font-weight: 600;
}
#wrap .section3 .btn3 .left img{
   width: 50px;
   margin: 3rem 0 1rem;
}
#wrap .section3 .btn3 .right {
   width: 50%;
 
   text-align: right;
   display: flex;
   align-items: end;
   justify-content: flex-end;
}
#wrap .section3 .btn3 .right img{
   width: 130px;
}
#wrap .section3 .btn4  {
   display: flex;
   padding: 20px;
   background-color: #424769;
   border-radius: 10px;
   justify-content: space-between;
   margin-top: 2rem;
}
#wrap .section3 .btn4 .left .p1 {
   font-size: 23px;
   color: #fff;
   line-height: 1.5;
   font-weight: 600;
}
#wrap .section3 .btn4 .left_mo {
   display: none;
}
#wrap .section3 .btn4 .right img {
   width: 50px;
}
#wrap .section3 .btn4 .right_mo {
   display: none;
}

@media screen and (max-width: 900px) {
	header .logo {
		width:75px;
	}
	main {
		padding: 15px;
	}
   #wrap .section1 .left_mo .p1{
		font-size: 20px;
		font-family: 'KOTRA_BOLD-Bold';
		line-height: 1.3;
		white-space: nowrap;
	}
   #wrap .section1 {
		display: flex;
		width: 100%;
		margin-top: 20px;
	}
	#wrap .section1 .left  {
		width: 40%;
		display: none;
	}
	#wrap .section1 .left_mo  {
		width:35%;
		margin-top: 3rem;
		display: block;
	}
	#wrap .section1 .left_mo .p1{
		font-size: 18px;
		font-family: 'KOTRA_BOLD-Bold';
		line-height: 1.5;
		white-space: nowrap;
	}
  #wrap .section1 .left_mo  .p2{
     font-size:13px;
     line-height: 1.5;
     white-space: nowrap;
     margin:1rem 0;
     color: #595959;
  }
  #wrap .section1 .left_mo  a{
     display: inline-block;
     padding: 1rem;
     border: 1px solid #cdcdcd;
     border-radius: 20px;
     font-size: 14px;
     white-space: nowrap;
  }
   #wrap .section1 .right {
      width:60%;
      margin-left: 3rem;
   }
   #wrap .section1 .right img{
      width: 190px;
      height: 250px;
   }
   #wrap .section2 .btn1,
   #wrap .section2 .btn2 {
       display: flex; 
       margin-top: 20px; 
       width: 100%;
   }
   #wrap .section2 .btn1 .left .p1{
      display: none;
   }
   #wrap .section2 .btn1 .left .p1_mo{
      display: block;
      font-size: 20px;
      color: #fff;
      line-height: 1.5;
      font-weight: 600;
      white-space: nowrap;
   }
   #wrap .section2 .btn2 .left .p1{
      font-size: 20px;
      color: #fff;
      line-height: 1.5;
      font-weight: 600;
   }
   #wrap .section3 {
     display: flex;
     justify-content: space-between;
     width: 100%;
   }
 
   #wrap .section3 .btn3{
      background-color: #ffa447;
      border-radius: 10px;
      display: flex;
      padding: 15px 10px 10px 15px;
      width: 48%;
      justify-content: space-between;
      height: 100px;
   }
   #wrap .section3 .btn3 .left {
      width: 70%;
   }

   #wrap .section3 .btn3 .left .p1{
      font-size: 14px;
      color: #fff;
      line-height: 1.5;
      font-weight: 600;
      white-space: nowrap;
   }
   #wrap .section3 .btn3 .left img{
      width: 25px;
      margin-top: 10px;
   }
   #wrap .section3 .btn3 .right {
      width:30%;
      text-align: right;
      display: flex;
      align-items: end;
      justify-content: flex-end;
   }
   #wrap .section3 .btn3 .right img{
      width:45px;
   }
   #wrap .section3 .btn4  {
      display: flex;
      padding: 15px 10px 10px 15px;
      background-color: #424769;
      border-radius: 10px;
      justify-content: space-between;
      width: 48%;
      height: 100px;
      margin-top: 0;

   }
   #wrap .section3 .btn4 .left {
      display: none;
   }
   #wrap .section3 .btn4 .left_mo{
      display: block;
      
   }
   #wrap .section3 .btn4 .left_mo .p1 {
      font-size: 14px;
      color: #fff;
      line-height: 1.5;
      font-weight: 600;
   }
   #wrap .section3 .btn4 .left_mo img {
      width: 25px;
      margin-top: 10px;
   }
   #wrap .section3 .btn4 .right_mo img {
      width: 45px;
   }
   #wrap .section3 .btn4 .right {
      display: none;
   }
   #wrap .section3 .btn4 .right_mo {
      display: block;
      width: 50%;
      text-align: right;
      display: flex;
      align-items: end;
      justify-content: flex-end;
   }
   #wrap .section3 .btn4 .right_mo {
      
   }
}