/**************** main *****************/

section { padding: 90px 0; }



/* story */
#story { background: rgba(0,0,0,0.05); }
#story .storyimg { float: left; width: 30%;}
#story img { width: 100%; }
#story h3 { padding-top: 30px; }
#story .text { float: left; width: 65%; margin-left: 50px; margin-right: 0; vertical-align: middle; }


/* slogan */
#slogan { border-bottom: 2px solid #eee; }
#slogan img { width: 100%; }
#slogan .text { text-align: center; }
#slogan h1 { padding: 50px 0; }
#slogan h2 { padding-top: 50px; font-weight: 500; line-height: 1.8; }


/* CI & BI */
#cibi { text-align: center; }
.cb { display: flex; justify-content: space-between; flex-wrap: wrap; }
.ci, .bi { flex: 0 0 48%; }
#cibi span { font-size: 2rem; font-weight: 100; color: #666;}
#cibi h1 { margin-bottom: 40px; }
#cibi h3 { font-weight: 500;}
.cb div { margin-bottom: 30px; }
.bi img { height: 78px; }
#cibi p { vertical-align: middle; }


/* history */
#history { background: rgba(0,0,0,0.05); }
#history ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
#history ul li { flex: 0 0 33%; }
#history h1 { padding-bottom: 50px; }
#history h2 { margin-bottom: 20px; font-weight: 500; color: #333; }
#history span { font-size: 1.1rem; font-weight: 400; }
#history p { font-size: 1rem; }


/* prize */
#prize h1 { padding-bottom: 50px; }
#prize ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
#prize ul li { flex: 0 0 16%; text-align: center; margin-bottom: 40px; }
#prize p { margin-top: 10px; font-weight: 400; }







/************ 태블릿 **************/

@media screen and (min-width:640px) and (max-width:1399px) { 
    
    /************main**********/

    section { padding: 90px 0; }
    .inner { width: 100%; }


    /* story */
    #story { background: rgba(0,0,0,0.05); }
    #story .storyimg { display: none; }
    #story .text { float: none; width: 90%; text-align: center; margin-left: 50px; vertical-align: middle; }
    #story h1 { color: #333; font-size: 2.5rem; }
    #story h3 {  font-size: 1.2rem; }
    #story h2 {  font-size: 1.5rem; font-weight: 300; margin-top: -50px; }


    /* slogan */
    #slogan { border-bottom: 2px solid #eee; }
    #slogan img { width: 100%; }
    #slogan .text { text-align: center; }
    #slogan h1 { padding: 50px 0; color: #333; font-size: 2.5rem; }
    #slogan h2 { padding-top: 50px; font-weight: 500; line-height: 1.8; }


    /* CI & BI */
    #cibi { text-align: center; }
    #cibi .inner { width: 90%; margin: 0 auto; }
    .cb { display: flex; justify-content: space-between; flex-wrap: wrap; }
    .ci, .bi { flex: 0 0 48%; }
    #cibi span { font-size: 1.5rem; font-weight: 100; color: #666;}
    #cibi h1 { padding: 50px 0; color: #333; font-size: 2.1rem; margin-bottom: 40px; }
    #cibi h3 { font-weight: 500;}
    .cb div { margin-bottom: 30px; }
    .bi img { height: 78px; }
    #cibi p { vertical-align: middle; }


    /* history */
    #history { background: rgba(0,0,0,0.05); }
    #history .inner { width: 90%; margin: 0 auto; }
    #history ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #history ul li { flex: 0 0 48%; }
    #history h1 { padding-bottom: 50px; color: #333; font-size: 2.1rem; }
    #history h2 { margin-bottom: 20px; font-weight: 500; color: #333; font-size: 1.5rem; }
    #history span { font-size: 1.1rem; font-weight: 400; color: #555; }
    #history p { font-size: 1rem; font-weight: 300; color: #777; }


    /* prize */
    #prize .inner { width: 90%; margin: 0 auto; }
    #prize h1 { padding-bottom: 50px; text-align: center; }
    #prize ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #prize ul li { flex: 0 0 25%; text-align: center; margin-bottom: 40px; }
    #prize p { margin-top: 10px; font-weight: 400; }
    #prize h1 { color: #333; font-size: 2.1rem; }



}






/************ 모바일 **************/

@media screen and (max-width:639px) {
    
    /************main**********/

    section { padding: 90px 0; }
    .inner { width: 100%; }


    /* story */
    #story { background: rgba(0,0,0,0.05); }
    #story .storyimg { display: none; }
    #story .text { float: none; width: 90%; text-align: center; margin-left: 20px; vertical-align: middle; }
    #story h1 { color: #333; font-size: 2.5rem; }
    #story h3 {  font-size: 1.2rem; }
    #story h2 {  font-size: 1.4rem; font-weight: 300; margin-top: -50px; }


    /* slogan */
    #slogan { border-bottom: 2px solid #eee; }
    #slogan img { display: none; }
    #slogan .text { text-align: center; }
    #slogan h1 { padding: 50px 0; color: #333; font-size: 2.5rem; }
    #slogan h2 { padding-top: 50px; font-weight: 500; line-height: 1.8; }


    /* CI & BI */
    #cibi { text-align: center; }
    #cibi .inner { width: 95%; margin: 0 auto; }
    .cb { display: flex; justify-content: space-between; flex-wrap: wrap; }
    .ci, .bi { flex: 0 0 100%; }
    #cibi span { font-size: 1.5rem; font-weight: 100; color: #666;}
    #cibi h1 { padding: 50px 0; color: #333; font-size: 2.1rem; margin-bottom: 40px; }
    #cibi h3 { font-weight: 500;}
    .cb div { margin-bottom: 30px; }
    .bi img { height: 78px; }
    #cibi p { vertical-align: middle; }


    /* history */
    #history { background: rgba(0,0,0,0.05); text-align: center; }
    #history .inner { width: 95%; margin: 0 auto; }
    #history ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #history ul li { flex: 1 0 100%; }
    #history h1 { padding-bottom: 50px; color: #333; font-size: 2rem; }
    #history h2 { margin-bottom: 10px; font-weight: 500; color: #333; font-size: 1.5rem; }
    #history span { font-size: 1.1rem; font-weight: 400; color: #555; }
    #history p { font-size: 1rem; padding-bottom: 30px; font-weight: 300; color: #777; }


    /* prize */
    
    #prize .inner { width: 95%; margin: 0 auto; }
    #prize h1 { padding-bottom: 50px; color: #333; font-size: 2rem; text-align: center; }
    #prize ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #prize ul li { flex: 0 0 5%; text-align: center; margin-bottom: 40px; }
    #prize p { margin-top: 10px; font-weight: 400; }

}