﻿.row {
    display:block;
    padding:2px;
}

.subject {
    width:150px;
    float:left;
    padding:10px 10px 10px 10px;
    font-size:larger;
    font-weight:bold;
}
    .subject span {        
        font-size:larger;
        color: red;
        font-weight:bold;
    }
.content {
    float:left;
    padding:10px 10px 10px 10px;
}

.textbox250, .Bizname, .Email, .ContectPerson, .Tel {
    width:250px;
    height:25px;
    border:1px solid #808080;
    padding-left:5px;
}
.textbox80 {
    width:80px;
    height:25px;
    border:1px solid #808080;
    padding-left:5px;
}

.clear {
    clear:both;
}

.solid {
    height:0;
    border:1px solid #808080;
}

.dotted {
    height:0;
    border:1px dotted #808080;
}

.paddingLeft, .AdContent {
    border:1px solid #808080;
    padding-left:5px;
    width:650px;
}

.marginTop {
    margin-top:30px;
}

.ErrorMsg {
    float:left;
    color:red;
    padding:10px 10px 10px 10px;
}
.width100 {
    width:100%;
}

/* '(선택)' - 고르는 칸이라는 표시. 붉은 별(*) 과 나란히 서므로 눈에 덜
   띄게 둔다. 별은 .subject span 규칙이 붉게 칠한다. */
/* ==========================================================================
   이 칸의 틀

   .row 는 부트스트랩의 이름이기도 하다. 그쪽이 좌우에 -15px 를
   붙여 두므로, 이 칸은 틀보다 30px 넓어져 양쪽으로 포개개 나갔다 -
   넓은 화면에서 이름표의 첫 글자가 잘려 보였다. 재어 보고 알았다:
   줄이 -15px 에서 시작하고 이름표가 -13px 에 서 있었다.

   휴대전화에서만 되돌리고 있었는데, 넓은 화면에서도 같은 일이
   일어난다. 두 곳 모두에서 되돌린다.

   .IntroForm 안에만 건다 - 머리띄와 바닥글도 .row 를 쓴다.
   ========================================================================== */
/* 이 화면은 부트스트랩의 container 안에 서지 않아 양쪽 여백이
   없다 - 글이 창문 끓에 붙는다. 그 격자가 쓰는 것과 같은 15px 를
   준다. */
.IntroPage {
    padding-left: 15px;
    padding-right: 15px;
}

.IntroForm .row {
    margin-left: 0;
    margin-right: 0;
}

/* 길이를 적은 칸들이 테두리와 안쪽 여백까지 그 널이 안에 들도록
   한다. 이것이 없으면 250px 라고 적은 칸이 실제로는 262px 가 된다. */
.IntroForm input,
.IntroForm textarea {
    box-sizing: border-box;
}

/* 이름표와 적는 칸이 같은 높이에서 시작하도록 한다. */
.IntroForm .subject {
    width: 170px;
}

/* 빨간 별표가 혼자 다음 줄로 내려가지 않게 한다. 번역기를 어기면
   이름이 길어져 실제로 그랬다 - 전화번호 칸이 그랬했다. */
.IntroForm .subject span {
    white-space: nowrap;
}

/* 긴 글을 적는 칸. 650px 는 옆의 칸들보다 너무 널려 틀이 기울어
   보였다. 틀 안에서 줄어들게 한다. */
.IntroForm .AdContent,
.IntroForm .paddingLeft {
    max-width: 100%;
}

.subject span.optional {
    font-size: smaller;
    font-weight: normal;
    color: #888888;
}

/* ==========================================================================
   휴대전화

   이 칸은 이름표(150px) 와 적는 칸(650px 짜리 큰 칸까지) 을 나란히 띄운다.
   375px 화면에서는 줄이 화면 밖으로 15px 나가 잘렸다 - 적는 칸 자체가
   화면보다 넓었다.

   모두 .IntroForm 안에만 건다. .row/.subject/.content 는 부트스트랩과
   사이트가 이미 쓰는 이름이라, 밖에 걸면 머리띠와 바닥글까지 바뀐다.
   ========================================================================== */
@media (max-width: 767px) {

    /* 좌우 -15px 을 되돌리는 줄은 위로 옮겨 모든 화면에 걸려 있다. */

    /* 이름표를 적는 칸 위로 올린다. 나란히 두기에는 좁다. */
    /* 나란히 두기에는 좁다. 이름표를 적는 칸 위로 올린다. */
    .IntroForm .subject,
    .IntroForm .content {
        float: none;
        width: auto;
        padding: 6px 0;
    }

    .IntroForm .subject {
        font-size: inherit;
    }

    /* 적는 칸은 화면 너비를 따른다. box-sizing 이 있어야 테두리와 안쪽
       여백까지 그 너비 안에 든다 - 없으면 또 넘친다. */
    .IntroForm .textbox250,
    .IntroForm .Bizname,
    .IntroForm .Email,
    .IntroForm .ContectPerson,
    .IntroForm .Tel,
    .IntroForm .paddingLeft,
    .IntroForm .AdContent {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 손가락으로 누르는 칸은 조금 키운다. 또 16px 보다 작으면 아이폰이
       칸을 누를 때마다 화면을 확대한다. */
    .IntroForm .textbox250,
    .IntroForm .Bizname,
    .IntroForm .Email,
    .IntroForm .ContectPerson,
    .IntroForm .Tel,
    .IntroForm .textbox80 {
        height: 40px;
        font-size: 16px;
    }

    .IntroForm .AdContent {
        font-size: 16px;
    }

    .IntroForm .textbox80 {
        width: 120px;
        box-sizing: border-box;
    }
}

/* 신청 칸 위의 안내 상자. 막힌 길을 알리거나, 어떤 글을 쓸
   계획인지 적어 달라고 청하는 자리다. */
.apply-notice {
    margin: 20px 0 10px 0;
    padding: 16px 18px;
    background: #f7f7f7;
    border-left: 4px solid #ee0038;
    border-radius: 4px;
    line-height: 1.6;
}

.apply-notice strong {
    font-size: larger;
}

.apply-notice a.DefaultButton {
    display: inline-block;
    text-decoration: none;
}
