점선으로 세로 자동으로 조절 채택완료

</p>

<p><style>

#detail-wrap {

    position: relative;

    height: 20em;

    background-color: #ddd;

}</p>

<p>#detail-wrap .courseWrap {

    padding: 2em;

}</p>

<p>#detail-wrap .courseWrap .course:before {

    display: block;

    content: '';

    width: 24px;

    height: 24px;

    position: absolute;

    top: 0;

    left: 0;

    background-image: radial-gradient(transparent 25%, black 25%);

    border-radius: 50% 50% 0 50%;

    transform: rotate(45deg) scale(0.8);

}

#detail-wrap .courseWrap .course:after {

    display: block;

    content: '';

    height: calc(100% - 36px);

    position: absolute;

    bottom: 5px;

    left: 11px;

    border: 1px dashed #31374f;

}

</style></p>

<p><div id="detail-wrap">

    <div class="courseWrap">

        <div class="course region">

            <h4>h4</h4>

            <div class="con">con</div>

        </div>

        <div class="course region">

            <h4>h4</h4>

            <div class="con">con</div>

        </div>

    </div>

</div></p>

<p>