<style type="text/css"> 
		html{margin: 0; padding: 0;}

	@font-face {
			    font-family: 'Pretendard-ExtraLight';
			    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
			    font-weight: 200;
			    font-style: normal;
			}	

		@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
		@font-face {
			    font-family: 'Pretendard-Medium';
			    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
			    font-weight: 500;
			    font-style: normal;
			}

		@font-face {
		    font-family: 'Pretendard-SemiBold';
		    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
		    font-weight: 600;
		    font-style: normal;
		}

		@font-face {
		    font-family: 'Pretendard-Bold';
		    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
		    font-weight: 700;
		    font-style: normal;
		}

		@font-face {
		    font-family: 'Pretendard-ExtraBold';
		    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
		    font-weight: 800;
		    font-style: normal;
		}

	    .nanum {
	    	font-family: 'NanumPen', system-ui;
	    	font-style: normal; margin:auto; font-size:3.8rem; line-height: 1.3; display: block; text-align: center;}

	    .checkfont{font-size: 1.1rem; display: block; font-family: 'Prentedard-Regular'; margin: 0; padding-left: 20px;}



	   body,a,b{margin: 0; padding: 0;}
	   section{padding: 85px 0px;}
		.wrap {margin: auto; width: 1000px;}
		.overwrap{margin: auto; width: 1000px;}
		.flex {display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}
		.flexCheck {display: flex; align-items: center; flex-wrap: wrap; justify-content: center;} 
		.flexHalf {display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; }
		.center{text-align: center; margin: auto; padding: 0;}
		.flexOne { display: flex;
            flex-direction: column;
            align-items: center;}

		h1,h2,h3{font-family: 'Pretendard-ExtraBold';}
		h5 {font-family: 'Pretendard-SemiBold';}
		h4,p{font-family: 'Pretendard-Medium';}
		ul a{font-family: 'Nanum Pen Script';}
		ul b{font-family: 'Pretendard-Regular';}
		h1{color:white; text-align: center; font-size: 4.6rem; line-height: 1.33;} /* 타이틀 */
		h2{padding: 6px; font-size: 3.3rem;} /* 문장 나열 */
		h3{font-size: 2.8rem; line-height: 1.23; font-weight: 700; margin: 0;} /* 제목 */
		h4{font-weight: 200; color:white; font-size:0.85rem; padding: 23px 490px 0px 0px;} /*안내문*/
		h5{font-size: 2.2rem; text-align: center; display: block;} /*원인*/
		p{line-height: 1.67; font-size: 1.2rem; display: block; color: black; padding: 0px 35px 0px 35px}
		

	

		.modify{margin:auto; font-family: 'Nanum Pen Script'; font-size:3.6rem; line-height: 1.25; display: block; text-align: center; align-items: center; justify-content: center; opacity: 0;}



	
		/* 그라디언트 */
		.gra1{color: black;}
		.gra2{color:#424242;}
		.gra3{color:#616161;}
		.gra4{color:#A5A5A5;}
		.gra5{color:#BCBCBC;}
		.gra6{color: #c0c0c0;}
		.gra7{color: #AEAEAE;}

		/* 배경 */
		.back_gra{background: linear-gradient(white 47%, black 100%);}
		.back_black{background: black;}
		.back_red{background: #B00202; color: white;}

		/*글씨색*/
		.fontWhite{color: white;}
		.fontRed{color:#B00202;}
		.aqua{color: dodgerblue;}
		.pen{background: aqua; color: white;}
		.blue{color: lightskyblue;}
		.violet{color: #ff80ff;}
		.orange{color: orange;}
		

		/* 이미지 */
		.imgsize{display: block; width: 300px; padding: 0;}

		/* 여백 */
		.morePad{padding: 250px 0px;}
		.btwnbox{padding-bottom: 35px;}
		.underPad{padding-bottom: 80px;}
		.noMar{margin: 0; padding: 0;}
		.lessPad{padding-bottom:14px;}
		.down{padding-top: 545px;} /*체크박스*/


		/*도형*/
		.box{display: flex; width: 172px; height: 57px; border: 2px solid white; border-radius: 70px; align-items: center; justify-content: center; text-align: center;
			color: white; font-family: 'Pretendard-Bold'; font-size: 1.26rem; position: relative;}

		.bbox{display: flex; width: 172px; height: 57px; border: 2px solid lightskyblue; border-radius: 70px; align-items: center; justify-content: center; text-align: center;
			font-family: 'Pretendard-Bold'; font-size: 1.26rem; color: lightskyblue;}


		.vbox{display: flex; width: 172px; height: 57px; border: 2px solid #ff80ff; border-radius: 70px; align-items: center; justify-content: center; text-align: center;
			font-family: 'Pretendard-Bold'; font-size: 1.26rem; color: #ff80ff;}


		.obox{display: flex; width: 172px; height: 57px; border: 2px solid orange; border-radius: 70px; align-items: center; justify-content: center; text-align: center;
			font-family: 'Pretendard-Bold'; font-size: 1.26rem; color: orange;}

		

		.box:hover{background: white; color: #B00202; width: 230px; height: 70px; border: 5px solid white; border-radius: 120px; font-size:1.5rem; }
		.bbox:hover{background: white; width: 230px; height: 70px; border: 5px solid white; border-radius: 120px; font-size:1.5rem;;}
		.vbox:hover{background: white; width: 230px; height: 70px; border: 5px solid white; border-radius: 120px; font-size:1.5rem;}
		.obox:hover{background: white; width: 230px; height: 70px; border: 5px solid white; border-radius: 120px; font-size:1.5rem;}



		/*이유*/
		.flexHalf div{margin: auto; width: 50%;}
		.reasonBox1{
						position: absolute;
						display:flex;
            color: white;
            width: 420px;
            height: 510px;
            background-color: #B00202; 
						align-items: center;
            justify-content: center;
            border-radius: 50px;
            margin:auto;
        	}

    .reasonBox2{
						position: absolute;
						display:flex;
            color: white;
            width: 420px;
            height: 510px;
            background-color: #B00202; 
						align-items: center;
            justify-content: center;
            border-radius: 50px;
          	margin:auto;}

   		 .reason1, .reason2{position: relative; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50px; border: 3.7px solid #B00202; width: 346px; height: 506px; color: black; margin-top:0; margin-bottom:0; word-break: keep-all;}

    .reason2{margin-right: 0px; }

	  .reasonBox1:hover.reasonBox1{opacity: 0;}
	  .reasonBox2:hover.reasonBox2{opacity: 0;}

	  .opa{opacity: 0.4}

	  .ab{position: absolute;}
	  .rela{position: relative;}

	  /*흐르는텍스트*/
         .flowCon {width: 100%;
    	 overflow: hidden;
   		 white-space: nowrap;
   		}

    /*하울*/
	    .flow1 {
	    	top:0;
	    	position: absolute;
            animation: flow1 15s linear  infinite alternate;
        		}

		@keyframes flow1 {
        from { left: 100%;}
  		to {left:0%;}}

    /*어레인지*/
        .flow2 {
            position: absolute;
            animation: flow2 15s linear  infinite alternate;
            top:0;
        }

		@keyframes flow2 {
        from { left: 20%;}
  		to {left:-80%;}}

    /*머스트해브아이템*/
  		 .flow3 {
            position: absolute;
            animation: flow3 20s linear  infinite alternate;
            padding-top: 93px;}

		@keyframes flow3 {
        from { left: 30%;}
  		to {left:-60%;}}


    /*아이디어*/
  		.flow4 {
            position: absolute;
            animation: flow4 20s linear  infinite alternate;
            padding-top: 95px;}

		@keyframes flow4 {
        from { left: 90%;}
  		to {left:0%;}}
    
    /*오픈런*/
    	.flow5 {
            position: absolute;
            animation: flow5 11s linear  infinite alternate;
            padding-top: 268px;}

		@keyframes flow5 {
        from { left: 40%;}
  		to {left:-30%;}}
    
    /*아젠다*/
    	.flow6 {
            position: absolute;
            animation: flow6 11s linear  infinite alternate;
            padding-top: 268px;}

		@keyframes flow6 {
        from { left: 90%;}
  		to {left:20%;}}
    /*인볼브*/
  		.flow7 {
            position: absolute;
            animation: flow7 18s linear  infinite alternate;
            padding-top: 480px;}

		@keyframes flow7 {
        from { left: 105%;}
  		to {left:5%;}}
   
    /*블렌딩*/
  		.flow8 {
            position: absolute;
            animation: flow8 12s linear  infinite alternate;
           padding-top: 625px;}

		@keyframes flow8 {
        from { left: 50%;}
  		to {left:0%;}}

    /*MSGR*/
		.flow9 {
            position: absolute;
            animation: flow9 11s linear  infinite alternate;
            padding-top: 350px;
         }

		@keyframes flow9 {
        from { left: -40%;}
  		to {left:20%;}}

	/*Needs*/
	.flow10 {
            position: absolute;
            animation: flow10 11s linear  infinite alternate;
            padding-top: 355px;
         }

		@keyframes flow10 {
        from { left: 0%;}
  		to {left:60%;}}

	/*날씨*/
  	.flow11{position: absolute;
            animation: flow11 18s linear  infinite alternate;
         }

         @keyframes flow11 {
        from { left: 0%;}
  		to {left:50%;}}

  		/*퍼포먼스*/
  		.flow12{position: absolute;
            animation: flow12 15s linear  infinite alternate;
       }

         @keyframes flow12 {
        from { left: -10%;}
  		to {left: 70%;}}

		/*스터디센터*/
  		.flow13{position: absolute;
            animation: flow13 9s linear  infinite alternate;
          top: 525px;}

         @keyframes flow13 {
        from { left: 90%;}
  		to {left: 20%;}}

		/*솔드아웃+인볼브*/
  		.flow14{position: absolute;
            animation: flow14 15s linear  infinite alternate;
         top: 600px;}

         @keyframes flow14 {
      from { left: 5%;}
  		to {left: 95%;}}

		/*아더+후르츠*/
  		.flow15{position: absolute;
            animation: flow15 7s linear  infinite alternate;
            top:750px;
         }

         @keyframes flow15 {
        from { left: -10%;}
  		to {left: 40%;}}

  		/*푸터*/
  		.more{font-family: 'Pretendard-ExtraLight'; font-size: 0.8rem; display: block; padding-top: 10px; color: grey; text-align: center; }
  		.me{font-family: 'Pretendard-Bold'; color: black; }
  		footer{font-family: 'Pretendard-Regular'; font-size: 0.9rem; line-height: 1.4; display: block; color: #262626; text-align: left; }
  		a{text-decoration: none;}


  	/*체크박스*/

    input[type="checkbox"] {
    width: 33px;
    height: 33px;
    margin-bottom: 5px;
    margin-left: 30px;
    cursor: pointer;
    outline: 3.5px solid #B00202; /* 테두리 두껍게 */
    outline-offset: -2px; /* 테두리를 안쪽으로 이동 */
  }

  input[type="checkbox"]:checked {
    outline: 3.5px solid dodgerblue; /* 체크박스가 선택되었을 때 테두리 색상 */
    background-color: dodgerblue; /* 체크박스 배경 색상 */
  }

 input[type="checkbox"]:hover {
    background-color: #eee; /* 커서를 올렸을 때 배경 색상 */
  }

	.backopa1{width: 100%; height: 700px; background: url(./img/good.png); opacity: 0.3;
		 background-size: 250px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; padding: 0;}
    .backopa2{width: 100%; height: 700px; background: url(./img/bad.png); opacity: 0.3;
		 background-size: 250px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; padding: 0;}	
		.bottom{display: none}
		.top{display: block}

	  #ch1:checked ~ .bottom{display: block;} 
	  #ch1:checked ~ .top{display: none} 
	  #ch2:checked ~ .bottom{display: block;}
	  #ch2:checked ~ .top{display: none}

	  .base{width: 1000px; text-align:center; position: absolute; left:0; top:200px;}

        


	</style>