body {
    font-size: 62.6%;
}

/* for mobile, pad ~ 550*/
@media screen and (max-width: 550px) {
    #bn_icon,
    .show_pc {
        display: none;
    }

    #bn_mob > div > a {
        height: 50px;
        width: 65%;
        font-size: 17pt;
        line-height: 36px;
        color: #727171;
        border-radius: 12px;
        min-width: 290px;
    }

    #bn_mob > div:nth-child(1){
        margin-top: 40px;
    }

    #bn_mob > div:nth-child(3),
    #bn_mob > div:nth-child(5) {
        padding-top: 30px;
    }

    #share_icon {
        padding-top: 30px;
    }

    #share_icon > a:nth-child(2),
    #share_icon > a:nth-child(3) {
        margin-left: 25px;
    }

    /*why*/
    .info_t1 {
        width: 65%;
        min-width: 290px;
        margin: 40px auto 0 auto;
        color: #21a9d7;
        font-size: 20pt;
        font-family: 'Playfair Display';
    }

    .info_t2 {
        width: 65%;
        min-width: 290px;
        margin: 16px auto 0 auto;
        color: #727171;
        font-size: 12pt;
    }

    .info_t3 {
        width: 65%;
        min-width: 290px;
        margin: 16px auto 0 auto;
        color: #727171;
        font-size: 12pt;
    }

    .info_t3 > span {
        color: #21a9d7;
    }

    .info_t4 {
        width: 65%;
        min-width: 290px;
        margin: 25px auto 0 auto;
        color: #21a9d7;
        font-size: 18pt;
        font-family: 'Playfair Display';
    }

    .info_t5 {
        width: 65%;
        min-width: 290px;
        margin: 11px auto 0 auto;
        color: #727171;
        font-size: 12pt;
    }

    .join_t1 {
        width: 65%;
        min-width: 290px;
        margin: 40px auto 0 auto;
        color: #21a9d7;
        font-size: 20pt;
        font-family: 'Playfair Display';
    }

    .join_t2 {
        width: 65%;
        min-width: 290px;
        margin: 10px auto 0 auto;
        color: #727171;
        font-size: 12pt;
    }

    .join_t3 {
        width: 65%;
        min-width: 290px;
        margin: 20px auto 0 auto;
        color: #21a9d7;
        font-size: 20pt;
        font-family: 'Playfair Display';
    }

    .join_t4 {
        width: 65%;
        min-width: 290px;
        margin: 10px auto 0 auto;
        color: #727171;
        font-size: 12pt;
    }

    .join_t5root {
        margin-top: 20px;
        background-color: #21a9d7;
    }

    .join_t5root > .join_t5 {
        width: 65%;
        min-width: 290px;
        margin: auto;
        padding-top: 19px;
        padding-bottom: 16px;
        color: #fff;
        font-size: 18pt;
    }

    .join_t6 {
        width: 65%;
        min-width: 290px;
        margin: 10px auto 0 auto;
        color: #727171;
        font-size: 12pt;
    }

    .join_t6 > a,
    .join_t6 > a:focus,
    .join_t6 > a:hover {
        color: #727171;
        text-decoration: none;
    }

    /* part 1.5 share modal*/
    #shareM_t1 {
        margin-top: 30px;
        font-size: 20pt;
        color: #21a9d7;
        font-family: 'Playfair Display';
    }

    #shareM_t2 {
        margin-top: 16px;
        font-size: 14pt;
        color: #727171;
    }

    #shareM_fb > img,
    #shareM_tw > img,
    #shareM_pt > img {
        height: 30px;
        margin-right: 40px;
    }

    #shareM_fb {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        font-size: 14pt;
        color: #727171;

        width: 60%;
        min-width: 240px;
    }

    #shareM_tw {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        font-size: 14pt;
        color: #727171;

        width: 60%;
        min-width: 240px;
    }

    #shareM_pt {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        font-size: 14pt;
        color: #727171;

        width: 60%;
        min-width: 240px;
    }

    /* pin ele */
    .imgst,
    .imgsav {
        display: none;
    }

    #footer {
        margin-top: 20px;
        margin-bottom: 20px;
        color: #727171;
        font-size: 10pt;
    }
}

/* for pc 551 ~ */
@media screen and (min-width: 551px) {
    /*hide*/
    #bn_mob,
    .show_mob {
        display: none;
    }


    .container_c1 {
        max-width: 992px;
        margin: 0 auto;
    }

    /* part 1 icon*/
    #icon_why {
        background-image: url("../images/iw200/01why.png");
    }

    #icon_why:hover,
    #icon_why.in {
        background-image: url("../images/iw200/02why.png");
    }

    #icon_join {
        background-image: url("../images/iw200/01join.png");
    }

    #icon_join:hover,
    #icon_join.in {
        background-image: url("../images/iw200/02join.png");
    }

    #icon_share {
        background-image: url("../images/iw200/01share.png");
    }

    #icon_share:hover,
    #icon_share.in {
        background-image: url("../images/iw200/02share.png");
    }

    #bn_icon > div:nth-child(2),
    #bn_icon > div:nth-child(3){
        margin-left: 38px;
    }

    /* part 1.5 box*/
    #infoBox {
        position: relative;
        margin: 30px auto 0 auto;
        width: 58%;
        min-width: 490px;
        border: 2px solid #21a9d7;
    }

    #infoBox > img {
        position: absolute;
        right: 15px;
        bottom: 0px;
    }

    /* part 1.5 information*/
    #info > div {
        margin-left: 18px;
        padding-right: 18px;
    }

    .info_t1 {
        margin-top:15px;
        color: #21a9d7;
        font-size: 37pt;
        font-family: 'Playfair Display';
    }

    .info_t2 {
        margin-top:10px;

        font-size: 12pt;
        color: #727171;
    }

    .info_t3 {
        margin-top:20px;

        font-size: 12pt;
        color: #727171;
    }

    .info_t3 > span {
        color: #21a9d7;
    }

    .info_t4 {
        margin-top:25px;

        font-size: 20pt;
        color: #21a9d7;
        font-family: 'Playfair Display';
    }

    .info_t5 {
        margin-top:10px;
        margin-bottom: 17px;

        font-size: 15pt;
        color: #909090;
    }

    /* part 1.5 join*/
    #join > div {
        position: relative;
        padding-left: 18px;
        padding-right: 18px;
    }

    .join_t1 {
        margin-top:25px;
        color: #21a9d7;
        font-size: 24pt;
        font-family: 'Playfair Display';
    }

    .join_t2 {
        font-size: 12pt;
        color: #727171;
    }

    .join_t3 {
        margin-top:30px;
        color: #21a9d7;
        font-size: 24pt;
        font-family: 'Playfair Display';
    }

    .join_t4 {
        font-size: 12pt;
        color: #727171;
    }

    .join_t5 {
        display: inline-block;
        background-color: #21a9d7;
        margin-top:20px;
        color: #ffffff;
        font-size: 14pt;
        line-height: 34px;
        font-family: 'Playfair Display';
    }

    .join_t6 {
        margin-top:10px;
        margin-bottom: 17px;
        font-size: 12pt;
        color: #727171;
    }

    .join_t6 > a,
    .join_t6 > a:focus,
    .join_t6 > a:hover {
        color: #727171;
        text-decoration: none;
    }

    /* part 1.5 share modal*/
    #shareM_t1 {
        margin-top: 70px;
        font-size: 29pt;
        color: #21a9d7;
        font-family: 'Playfair Display';
    }

    #shareM_t2 {
        margin-top: 16px;
        font-size: 16pt;
        color: #727171;
    }

    #shareM_fb > img,
    #shareM_tw > img,
    #shareM_pt > img {
        height: 48px;
        margin-right: 60px;
    }

    #shareM_fb {
        margin-top: 70px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        font-size: 18pt;
        color: #727171;

        width: 60%;
        min-width: 330px;
    }

    #shareM_tw {
        margin-top: 38px;
        margin-bottom: 38px;
        margin-left: auto;
        margin-right: auto;

        font-size: 18pt;
        color: #727171;

        width: 60%;
        min-width: 330px;
    }

    #shareM_pt {
        margin-top: 38px;
        margin-bottom: 70px;
        margin-left: auto;
        margin-right: auto;

        font-size: 18pt;
        color: #727171;

        width: 60%;
        min-width: 330px;
    }

    /* part 2 share icon*/
    #share_icon {
        margin-top: 30px;
    }

    #share_icon > a:nth-child(2),
    #share_icon > a:nth-child(3) {
        margin-left: 40px;
    }

    /* part 3*/
    .pin > div {
        color: #727171;
        margin-top: 15px;
        font-size: 11pt;
    }

    #footer {
        margin-top: 40px;
        margin-bottom: 40px;
        color: #727171;
        font-size: 12pt;
    }
}

/* global langBox */
#langBox {
    width: 122px;
    height: 25px;

    position: absolute;
    top: 25px;
    right: 25px;

    background-color: rgba(255,255,255,0.1);
    border: 1px solid #fff;

    font-size: 12pt;
    line-height: 25px;
    color: #fff;
    padding-left: 5px;
}

#langBox > .glyphicon {
    font-size: 10pt;
}

#langModal .txt {
    font-size: 12pt;
    color: #727171;
}

#langModal .modal-header {
    border-bottom: 0;
}
#langModal hr {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* share box */
#shareBox,
#shareBox2 {
    width: 300px;
    /*height: 200px;*/

    display: none;
    position: absolute;
    top: 0;
    left: 0;

    /*background-color: #fff;
    border: 1px solid #7227171;*/

}

.sb_top {
    width: 300px;
    height: 30px;

    background-image: url("../images/box/frame_top.png");
}

.sb_main {
    background-color: #fff;
}

.sb_sub1 {
    /*margin-bottom: 20px;*/
}

.sb_head {
    color: #727171;
    margin-left: 24px;
    font-size: 10pt;
}

.sb_icon {
    margin-left: 24px;
    margin-top: 16px;
}

.sb_icon .sb_img {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

.sb_icon .sb_img:nth-child(2),
.sb_icon .sb_img:nth-child(3),
.sb_icon .sb_img:nth-child(4) {
    margin-left: 10px;
}

.icon_fb {
    background-image: url("../images/iw150/01fb.png");
}

.icon_fb:hover,
.icon_fb.in {
    background-image: url("../images/iw150/02fb.png");
}

.icon_tww {
    background-image: url("../images/iw150/01twitter.png");
}

.icon_tww:hover,
.icon_tww.in {
    background-image: url("../images/iw150/02twitter.png");
}

.icon_pin {
    background-image: url("../images/iw150/01pinterest.png");
}

.icon_pin:hover,
.icon_pin.in {
    background-image: url("../images/iw150/02pinterest.png");
}

.icon_link {
    background-image: url("../images/iw150/01link.png");
}

.icon_link:hover,
.icon_link.in {
    background-image: url("../images/iw150/02link.png");
}

.sbs1_link {
    margin-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
}

.sbs1_link > input {
    border-radius: 18px;
}

.sb_sub2 {
    display: none;
    background-color: #fff;
    border-top: 2px solid #eee;
}

.sbs2_head {
    padding-top: 20px;
    color: #727171;
    margin-left: 24px;
    font-size: 10pt;
}

.sbs2_mail {
    margin-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
}

.sbs2_mail > input {
    border-radius: 18px;
}

.sb_bottom {
    width: 300px;
    height: 30px;

    background-image: url("../images/box/frame_bottom.png");
}


/**/

#bn {
    position: relative;

    background-image: url("../images/bn_1920.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

#bn_550 {
    position: relative;

    background-image: url("../images/bn_560.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

/* ICON */
#bn_icon {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

#bn_icon > div {
    position: relative;
}

#bn_icon > div > div{
    width:120px;
}

.icon {
    width:120px;
    height:120px;

    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;

    display: inline-block;
}

.info_head {
    color: rgb(41, 169, 215);
    font-size: 24px;
}



/**/

#share_icon > a > div {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
}

#share_icon > a > div:nth-child(2),
#share_icon > a > div:nth-child(3){
    margin-left: 5px;
}

.icon_fbs {
    background-image: url("../images/iw45/01fb.png");
}

.icon_fbs:hover,
.icon_fbs.in {
    background-image: url("../images/iw45/02fb.png");
}

.icon_igs {
    background-image: url("../images/iw45/01ig.png");
}

.icon_igs:hover,
.icon_igs.in {
    background-image: url("../images/iw45/02ig.png");
}

.icon_pins {
    background-image: url("../images/iw45/01pin.png");
}

.icon_pins:hover,
.icon_pins.in {
    background-image: url("../images/iw45/02pin.png");
}

/**/
#pins {
    margin: 0 auto;
}

#pins > div {
	display: inline-block;
    border-radius: 12px;
	padding: 10px;
	/*margin: 5px 5px 5px 5px;*/
	overflow:hidden;
	/*width:256px;*/
}

#pins > div:hover {
    background-color: rgb(228,245,253);
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    transition: background-color .25s linear;
}

#pins > div > .imgth {
    /*max-width:236px;*/
    border-radius: 12px;
}

#pins > div.pinload {
    visibility:hidden;
}

@media screen and (max-width: 532px) {
    #pins > div {
    	width: 50%;
        margin: 0;
    }

    #pins > div > .imgth {
        max-width: 100%;
    }
}

@media screen and (min-width: 533px) {
    #pins > div {
    	width:256px;
        margin: 5px 5px 5px 5px;
    }

    #pins > div > .imgth {
        max-width:236px;
    }
}

.imgst,
.imgsav {
    visibility: hidden;
    opacity: 0;

}

.imgst.in,
.imgsav.in {
    visibility: visible;
    opacity: 1;

    -webkit-transition: visibility 0s, opacity 0.25s linear;
    -moz-transition: visibility 0s, opacity 0.25s linear;
    -o-transition: visibility 0s, opacity 0.25s linear;
    transition: visibility 0s, opacity 0.25s linear;
}

.imgst {
    position: absolute;
    left: 21px;
    top: 21px;

    width: 45px;
}

.imgsav {
    position: absolute;
    right: 21px;
    top: 21px;

    width: 45px;
}

/* pin modal */

#pinModal #pinModalImg {
    width:100%;
}

#pinModal .modal-header {
    padding: 14px 18px 8px 8px;
    border: 0;
}

#pinModal .modal-body {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-top: 70px;
}

#pinModal .modimgshare {
    height: 45px;
    width: auto;
    position: absolute;
    left: 37px;
    top: 9px;
}

#pinModal .modimgsav {
    height: 45px;
    width: auto;
    position: absolute;
    right: 45px;
    top: 5px;
}

#pinModal .pininfo {
    margin-top: 37px;
}

#pinModal .pininfomsg {
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

.pif_1 {
    font-size: 9pt;
    color: #727171;
}

.pif_2 {
    font-size: 12pt;
    color: #727171;
}

#pinModal .pinUser {
    width: 40px;
}