@charset "utf-8";
/* import */

/* 전체 영역 */
    #wrapper {
        margin: 0 auto;
        width: 1200px;
        height: auto;
    }
    
    /* 섹션 타이틀 (공통) */
    h2 {
        font-family: 'NanumBarunGothicWeb';
        font-size: 30px;
        color: #4f4f4f;
        text-align: center;
        width: 100%;
        border-bottom: 3px solid #d7d7d7;
        padding-bottom: 20px;
        margin-top: 10px;
    }

    /* 프리허그 안심치료 3대 원칙 */
    #principle {
        float: left;
        width: 1200px;
        height: auto;
        margin: 100px 0 0 0px;
    }
    #principle h1 {
        float: left;
        width: 100%;
        height: auto;
        text-align: center;
        font-family: 'NanumMyeongjoWeb';
        font-size: 35px;
        font-weight: bold;
        color: #4f4f4f;
        margin-bottom: 100px;
    }
    #principle h2 {
        font-family: 'NanumBarunGothicWeb';
        font-size: 30px;
        color: #4f4f4f;
        text-align: center;
        width: 100%;
        border-bottom: 3px solid #d7d7d7;
        padding-bottom: 20px;
        margin-top: 10px;
    }
    #principle h1 span {
        color: #009cce;
    }
    #principle .three_principle {
        float: left;
        width: 380px;
        height: 550px;
        border: 1px solid #b7b7b7;
        margin: 50px 30px 0 0px;
    }
    #principle .three_principle:last-child {
        margin-right: 0px;
    }
    #principle .three_principle img {
        float: left;
        width: 100%;
        height: auto;
    }
    #principle .three_principle h2 {
        float: left;
        width: 85%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 16px;
        color: #f26c4f;
        text-align: left;
        border: none;
        padding: 0px;
        margin: 6.5% 7.5% 0 7.5%;
    }
    #principle .three_principle h3 {
        float: left;
        width: 85%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 22px;
        color: #2f3952;
        text-align: left;
        border-bottom: 1px solid #b7b7b7;
        margin: 0 7.5% 0 7.5%;
        padding-bottom: 3%
    }
    #principle .three_principle p {
        float: left;
        width: 85%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 14px;
        color: #4f4f4f;
        text-align: justify;
        line-height: 1.8em;
        margin: 4% 7.5% 0 7.5%;
    }

    /* 스테로이드 */
    #steroid {
        float: left;
        width: 1200px;
        height: auto;
        margin: 100px 0 0 0px;
    }
    #steroid #search {
        float: left;
        width: 500px;
        height: auto;
        margin: 50px 0 50px 350px;
    }
    #steroid #search h3 {
        float: left;
        width: 83%;
        height: 50px;
        text-align: left;
        font-family: 'NanumBarunGothicWeb';
        font-size: 24px;
        font-weight: bold;
        line-height: 44px;
        padding-left: 20px;
        border: 3px solid #5d8da3;
    }
    #steroid #search h4 {
        float: left;
        width: 17%;
        height: 50px;
        text-align: center;
        font-family: 'NanumBarunGothicWeb';
        font-size: 16px;
        font-weight: bold;
        color: white;
        line-height: 50px;
        background-color: #5d8da3;
    }
    #steroid #search p {
        float: left;
        width: 100%;
        font-family: 'NanumBarunGothicWeb';
        font-size: 16px;
        font-weight: bold;
        line-height: 1.8em;
        padding: 4%;
        border: 1px solid #999;
    }
    #steroid #search p span {
        color: #f26c4f;
    }
    #steroid article {
        float: left;
        width: 100%;
        height: auto;
        background-color: #f8f8f8;
    }
    #steroid article #summary {
        float: left;
        width: 100%;
        height: auto;
        background-color: #5d8da3;
    }
    #steroid article #summary #radius {
        float: left;
        width: 800px;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 22px;
        font-weight: bold;
        color: #4f4f4f;
        text-align: center;
        margin: 60px 0 20px 200px;;
        padding: 1.8% 6% 1.8% 6%;
        background-color: white;
        border-radius: 50px;
    }
    #steroid article #summary #txt {
        float: left;
        width: 100%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 16px;
        font-weight: normal;
        color: white;
        line-height: 1.8em;
        text-align: center;
        margin: 20px 0 30px 0px;
    }
    #steroid article #summary #fault {
        float: left;
        width: 100%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 22px;
        font-weight: bold;
        color: white;
        text-align: center;
        margin: 0 0 60px 0px;
    }
    #steroid #bg {
        float: left;
        width: 100%;
        height: 380px;
        background: url("http://freehugs.dshow.kr/images/intro/relaxcure/steroid_bg.jpg") no-repeat;
    }
    #steroid #bg p {
        float: left;
        width: 500px;
        height: auto;
        font-family: 'NanumMyeongjoWeb';
        font-size: 16px;
        font-weight: normal;
        color: white;
        line-height: 1.8em;
        text-align: justify;
        margin: 120px 0 60px 650px;
    }
    #steroid #bg p span {
        font-size: 19px;
        font-weight: bold;
    }

    /* 믿을 수 있습니다 */
    #trust {
        float: left;
        width: 100%;
        height: auto;
        margin: 100px 0 0 0px;
    }
    #trust article {
        float: left;
        width: 90%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 16px;
        color: #4f4f4f;
        text-align: center;
        margin: 5%;
        line-height: 1.8em;
    }
    #trust > h3 {
        float: left;
        width: 100%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 16px;
        color: white;
        text-align: center;
        background-color: #2f486a;
        padding: 1.5%;
    }
    #trust #quality_test .test {
        float: left;
        width: 20%;
        height: auto;
        border-left: 1px solid #2f486a;
        border-bottom: 1px solid #2f486a;
    }
    #trust #quality_test .test:last-child {
        border-right: 1px solid #2f486a;
    }
    #trust #quality_test .test img {
        float: left;
        width: 80%;
        height: auto;
        margin: 10%;
    }
    #trust #quality_test .test h4 {
        float: left;
        width: 100%;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 16px;
        color: #4f4f4f;
        font-weight: normal;
        text-align: center;
        margin-bottom: 10%;
    }
    #trust #quality_test .test h4 span {
        font-weight: bold;
    }

    #trust #recommendation {
        float: left;
        width: 100%;
        height: auto;
        margin: 10% 0 0 0%;
        background-color: #f8f8f8;
    }
    #trust #recommendation img {
        float: left;
        width: 50%;
        height: auto;
        margin: 0px;
    }
    #trust #recommendation h3 {
        float: left;
        width: 520px;
        height: auto;
        font-family: 'NanumBarunGothicWeb';
        font-size: 22px;
        font-weight: bold;
        color: #2f486a;
        margin: 25px 40px 30px 40px;
        border-bottom: 1px solid #2f486a;
        padding-bottom: 15px;
    }
    #trust #recommendation ol {
        float: left;
        width: 520px;
        height: auto;
        margin: 0 40px 0 40px;
    }
    #trust #recommendation ol li {
        margin-bottom: 10px;
        line-height: 1.6em;
        font-family: 'NanumBarunGothicWeb';
        font-size: 15px;
        font-weight: normal;
    }
    #trust #sub_title {
        float: left;
        width: 964px;
        height: 147px;
        background: url("http://freehugs.dshow.kr/images/intro/relaxcure/trust_sub_title.png") no-repeat;
        margin: 80px 0 0 118px;
    }
    #trust #sub_title h2 {
        border-bottom: 0px;
        font-family: 'NanumMyeongjoWeb';
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        color: #4f4f4f;
        line-height: 147px;
    }
    #trust #sub_title h2 span {
        color: #009cce;
    }
    #youtube {
        float: left;
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        margin-top: 10%;
    }
    #youtube iframe {
        position: absolute;
        width: 100%;
        height: 100%;
    }