/*공통*/
#container{}
#container_title { font-size:2em; color:#404040; line-height:45px; letter-spacing:-1px; margin-bottom:30px; text-align:center; display:none;}

#container h3{ margin-bottom:50px; text-align:center; font-size:1.8em; line-height:1.3em; font-weight:600;}
#container h3 span{ font-size:14px; font-weight:normal; display:block; color:#999;}
#container h4{ text-align:center; font-size:1.2em; font-weight:600; margin-bottom:10px;}
#container h4 .fas{color:#0051AC;}

/*회사소개*/
#company{ padding:0px;}
#company .title{text-align:center; margin-bottom:50px; font-size:1.05em; line-height:1.8em;}
#company .title h3{margin-bottom:30px;}
#company .title h3 strong{color:#0051AC;}
#company .title span{display:inline-block; background:#F0F4FA; padding:0 3px; font-weight:600;}
#company h4{font-size:2em;}
#company .conts{margin-bottom:50px; line-height:1.8em; font-size:1.05em; padding:0 30px;}
#company .conts p{font-size:1.05em; font-weight:600; color:#0051AC;}
#company .location{ background:#FBFBFB; padding:30px; margin-bottom:5px;}
#company .location h5{ font-size:1.5em; color:#0051AC; font-weight:600; margin-bottom:5px; }
#company .location .info{margin-bottom:10px; line-height:1.8em;}
/*서비스안내*/
#service{}
.price{margin:0 -45px; margin-bottom:30px;}
.price:after{content:""; display:block; clear:both;}
.price{}
.price dl{float:left; width:50%; margin:0px; padding:0px 45px; position:relative;}

.price dt{ padding:20px; margin-bottom:20px; font-size:1.5em; text-align:center; position:relative;}
.price dt:before{content:""; display:block; position:absolute; left:0; top:0; width:15px; height:100%; border:4px solid #0051AC; border-right:0;}
.price dt:after{content:""; display:block; position:absolute; right:0; top:0; width:15px; height:100%; border:4px solid #0051AC; border-left:0;}

.price dt p{ font-size:0.9em;}
/*.price dt p:before{content:"["; display:inline-block;}
.price dt p:after{content:"]"; display:inline-block;}*/
.price dt span{color:#0051AC;}
.price dd li{position:relative; padding-left:15px; line-height:1.8em;}
.price dd li:before{ content:""; display:block; width:5px; height:5px; border-radius:50%; background:#0051AC; position:absolute; left:5px; top:9px;}

.p_option{text-align:center; padding:40px 0; background:#F7F7F7; margin-bottom:100px;}
.p_option li{ display:inline-block; opacity:0.8;}
.p_option li:after{content:""; display:inline-block; width:1px; height:13px; background:#ddd; margin:0 5px 0 10px; vertical-align:middle;}
.p_option li:last-child{margin:0;}
.p_option li:last-child:after{display:none;}

/*프로세스*/
.process:after{content:""; display:block; clear:both;}
.process dl{float:left; width:calc(20% - 32px); height:200px; margin-right:40px; border:1px solid #ddd; position:relative; padding:20px 15px; margin-bottom:40px;}
.process dl:after{content:"→"; display:block; position:absolute; right:-32px; top:50%; transform:translateY(-50%); font-size:3em; font-weight:bold; color:#0051AC;}
.process dl:nth-child(5),
.process dl:nth-child(6){ margin-right:0;}

.process dl:nth-child(5):after{content:"↓"; top:auto; bottom:-77px; right:50%; margin-right:-15px;}
.process dl:nth-child(6):after{display:none;}

.process dl:nth-child(1n+6){float:right;}
.process dl:nth-child(1n+6):after{content:"←"; right:-45px;}

.process dl:last-child{border:3px solid #0051AC;}

.process dt{font-size:1.4em; margin-bottom:10px; color:#0051AC;}
.process dt p{font-size:1.1em;}
.process dd{font-size:0.95em; color:#666; line-height:1.6em;}
.process dd strong{ color:#333; text-decoration:underline;}


.port div{ display: none; }
.port div:not(:first-of-type){margin-top: 25px }
.port div img{ width: 100%; border: 1px solid #eee; border-radius: 5px; transition: all ease 0.3s}
.port div:hover img{box-shadow: 0 0 15px #eee}
.port p{      background: #fff;    display: inline-block;    text-align: center;    border-radius: 0px;    word-break: keep-all;    padding: 8px;    line-height: 1em;    cursor: pointer;    font-weight: 600;    font-size: 13px;    position: relative;
    box-sizing: border-box;background-color: #fff; color: #484951; border: 1px solid #1a1a1c;width: 100%; padding: 15px 0; font-size: 1.2em; font-weight: 600; height: auto!important; transition: all 0.3s ease}
.port p:hover{ color:#fff;background:#0051AC }
.port h6{  margin-top: 25px;    background: #fff;    display: inline-block;    text-align: center;    border-radius: 0px;    word-break: keep-all;    padding: 8px;    line-height: 1em;    cursor: pointer;    font-weight: 600;    font-size: 13px;    position: relative;
    box-sizing: border-box;background-color: #fff; color: #484951; border: 1px solid #1a1a1c;width: 100%; padding: 15px 0; font-size: 1.2em; font-weight: 600; height: auto!important; transition: all 0.3s ease}
.port h6:hover{ color:#fff;background:#0051AC }
.port p:before {
    content: '';
    display: block;
    position: absolute;
    width: 102%;
    height: 30vh;
    bottom: 47.5px;
    left: -1px;
    background: linear-gradient(to bottom, #ffffff00, white);
}


@media (max-width: 768px) {
    #container h3 span{ line-height:1.5em;}

    #company{padding:0 10px;}
    #company .title h3{font-size:1.6em;}
    #company .title{text-align:left; font-size:1em;}
    #company .title img{width:100%;}
    #company .conts{font-size:1em; padding:0;}
    #company .location{padding:20px; margin:5px -10px;}

    .price{margin:0;}
    .price dl{float:none; width:100%; padding:0 10px; margin-bottom:20px;}
    .price dl:after{content:""; display:block; clear:both;}
    .price dt{ display:inline-block; vertical-align:middle; margin-right:10px; margin-bottom:0;}
    .price dd{display:inline-block; vertical-align:middle; width:calc(100% - 145px);}

    .p_option{text-align:left; padding:20px; line-height:1.8em;}

    .process dl{width:calc(50% - 5px); height:120px; margin-right:10px !important; margin-bottom:10px !important;}
    .process dl:nth-child(2n){ margin-right:0 !important;}
    .process dl:nth-child(1n+6){float:left;}
    .process dl:after{display:none;}
    .process dt{font-size:1.3em;}
    .process dd{display:none;}

    .port p:before {
        height: 15vh;
    }
}