@import "font.less";

*{
  font-family: 'NBG' !important;
}

.content-main{
    width:100%;
    height:auto;

    & > .content-header{
        width:100%;
        height:200px;
        padding-top:10px;

        background:url(https://paritetboat.com/wp-content/uploads/2018/05/sea-water-ocean-waves1.jpg) top center;

        & > #boat-name{
            font-size:34px;
            font-weight: 500;
            margin:0;
            line-height: 100px;
            text-align: center;
            font-family: 'Crimson Text', serif !important;
            color:#424242;
            vertical-align: baseline;
        }

        & > .border{
            width:100px;
            height:2px;
            background-color:rgb(133, 165, 204);
            margin:auto;
        }

        & > #boat-root{
            font-size:14px;
            font-family: 'Nanum Gothic', sans-serif;
            font-weight:200;
            line-height: 50px;
            text-align: center;
        }
    }

    & > #slider{
        width:100%;
        height:600px;
        margin-top:200px;
    }

    & > .content-main-data{
        width:80%;
        height:auto;
        margin:auto;

        & > .content-main-explain-data{
            width:100%;
            height:auto;

            & > p{
                font-size:16px;
                line-height: 30px;
                color:#424242;
                word-break: keep-all;
                word-spacing: 2.5px;

            }

            & > h3{
                font-size:26px;
                line-height:40px;
                font-family: 'Nanum Gothic', sans-serif;
                color:#999999;
                margin-bottom: 2rem;
            }

            & > #lightgallery{
                width:100%;
                height:auto;

                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom:50px;



                & > div{
                   width: 40vmin;
                   height:30vmin;

                   background-size: cover;

                   margin:10px;

                //    margin:auto;
                //    margin-top:20px;

                }
            }

            & > #equipment{
                & > .main-content-detail-yacht{
                    display:none;
                    flex-wrap: wrap;
                    & > .yacht-equipment-data-list{
                        width:30%;
                        height:auto;

                        margin-left:auto;
                        margin-right:auto;
                        & > h4{
                            font-size:20px;
                            font-weight: 500;
                            margin:0;
                            line-height: 60px;
                            font-family: 'Crimson Text', serif;
                            color:#424242;
                            vertical-align: baseline;
                        }

                        & > .yacht-equiment-data{
                            display: flex;
                            align-items: center;
                            height:auto;
                            padding-top:5px;
                            padding-bottom:5px;
                            width:100%;

                            & > p{
                                font-size:12px;
                                color:#424242;
                                font-family: 'Nanum Gothic', sans-serif;
                                margin-left:20px;
                            }
                        }
                    }
                }
            }

            & > .content-main-plus-option-data{
                width:100%;
                height:auto;


                & > .main-cotent{
                    display:flex;
                    align-items: center;

                    height:80px;

                    border-bottom:#e8e8e8 1px solid;

                    & > p{
                        font-size:15px;
                        font-family:'Nanum Gothic', sans-serif;
                        margin-left:20px;
                    }

                }

                & > .main-cotent:first-child{
                    border-top:#e8e8e8 1px solid;
                }

                & > #layout-box{
                    width:100%;
                    height:400px;

                    display:none;
                    align-items: center;
                    justify-content: center;

                    & > .layout-image-box{

                        width:400px;
                        height:200px;
                        background-color: #EBEBEB;
                        padding:6px;
                        & > .layout-image{
                            width:400px;
                            height:200px;

                            background-size: cover;
                        }
                    }
                }

                & > #option-box{
                    width:100%;
                    height:auto;
                    display: none;
                    padding-top:20px;
                    padding-bottom:10px;

                    & > div{
                        width:calc(~"90% - 20px");
                        padding-left:20px;
                        height:50px;
                        display:flex;
                        align-items: center;
                        margin:auto;
                    }

                    & > .odd{
                        color: #fff;
                        border-bottom:#e8e8e8 1px solid;
                        background-color: #f8f8f8;
                        color:#424242;
                        font-size:16px;
                        font-family:'Nanum Gothic', sans-serif;
                    }

                    & > .even{
                        color: #808080;
                        border-bottom:#e8e8e8 1px solid;
                        font-size:16px;
                        font-family:'Nanum Gothic', sans-serif;
                    }

                    & > .text-box{
                        width:90%;
                        height:100px;

                        display: flex;
                        align-items: center;
                        color:#424242;
                    }

                    & > #option-image-list{
                        width:90%;
                        height:auto;

                        margin:auto;

                        display:flex;
                        flex-wrap: wrap;
                        justify-content: space-between;

                        & > .option-image{
                            width:23%;
                            height:30vmin;

                            & > .img{
                                width:100%;
                                height:80%;
                                background-size:cover;
                            }

                            & > .text-box{
                                width:80%;
                                height:20%;

                                margin:auto;

                                display:flex;
                                align-items: center;
                                justify-content: center;

                                & > p{
                                    font-size:1.2vmin;
                                    font-family:'Nanum Gothic', sans-serif;
                                    color:#000000;

                                    text-align: center;
                                }
                            }
                        }
                    }

                }

                & > .main-content-detail{
                    width:100%;
                    height:auto;
                    display: none;
                    padding-top:20px;
                    padding-bottom:20px;



                    & > #equipment-option-table{
                        width:100%;
                        height:auto;
                        border-collapse: collapse;
                        border-bottom:#e8e8e8 1px solid;
                        border-top:0;

                        & > tbody{
                            width:100%;
                            & > .even{
                                width:100%;

                                color: #808080;
                                border:#e8e8e8 1px solid;
                                & > td{
                                    padding-left:20px;
                                    border:#e8e8e8 1px solid;
                                    width:33%;

                                    font-size:14px;

                                }
                            }

                            & > .odd{
                            width:100%;

                            color: #fff;
                            border:#e8e8e8 1px solid;
                            background-color: #f8f8f8;
                            color:#424242;
                                & > td{
                                    padding-left:20px;
                                    border:#e8e8e8 1px solid;
                                    width:33%;
                                    font-size:14px;

                                }
                            }

                            & > .even-first{
                            border-top:0px !important;
                            border-left:0px;
                            border-right:0px;

                                & > td{
                                    border-top:0px !important;
                                }

                                & > td:first-child{
                                    border-left:0px;
                                }

                                & > td:last-child{
                                    border-right:0px;
                                }
                            }
                        }
                    }

                    & > .specification-list{

                        width:calc(~"100% - 40px");
                        padding-left:40px;
                        height:40px;
                        display: flex;
                        align-items: center;

                        font-size:16px;
                        line-height:30px;
                        font-family:'Nanum Gothic', sans-serif;
                        font-weight:200;

                    }

                    & > .engine-option{
                        width:calc(~"100% - 40px");
                        padding-left:40px;
                        height:auto;

                        & > h4{
                            font-size:16px;
                            font-weight:600;
                            font-family:'Nanum Gothic', sans-serif;
                            line-height:50px;
                        }

                        & > #engine-option-table{
                            width:660px;
                            height:auto;
                            border-collapse: collapse;
                            border-bottom:#e8e8e8 1px solid;
                            border-top:0;

                            & > tbody{
                               width:660px;
                               & > .even{
                                    width:100%;

                                    color: #808080;
                                    border:#e8e8e8 1px solid;
                                    & > td{
                                       padding-left:20px;
                                       border:#e8e8e8 1px solid;
                                       width:33%;

                                       font-size:14px;

                                   }
                               }

                               & > .odd{
                                width:100%;

                                color: #fff;
                                border:#e8e8e8 1px solid;
                                background-color: #f8f8f8;
                                color:#424242;
                                    & > td{
                                        padding-left:20px;
                                        border:#e8e8e8 1px solid;
                                        width:33%;
                                        font-size:14px;

                                    }
                               }

                               & > .even-first{
                                border-top:0px !important;
                                border-left:0px;
                                border-right:0px;

                                    & > td{
                                        border-top:0px !important;
                                    }

                                    & > td:first-child{
                                        border-left:0px;
                                    }

                                    & > td:last-child{
                                        border-right:0px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#price-btn{
    width:100px;
    height:40px;
    border:2px solid rgb(221, 51, 51);

    display: flex;
    align-items: center;
    justify-content: center;

    color:rgb(221, 51, 51);

    font-size:12px;
    font-family: 'Nanum Gothic', sans-serif;

    margin:auto;
    margin-top:50px;
    @media (max-width : 768px) {
        display: none;
    }
}
#price-btn-mobile {
    width:100px;
    height:40px;
    border:2px solid rgb(221, 51, 51);

    display: flex;
    align-items: center;
    justify-content: center;

    color:rgb(221, 51, 51);

    font-size:12px;
    font-family: 'Nanum Gothic', sans-serif;

    margin:auto;
    margin-top:50px;
    @media (min-width : 768px) {
        display: none;
    }
}

#price-btn:hover{
    background-color:rgb(221, 51, 51);
    color:#fff;
}

#info-btn{
    width:180px;
    height:40px;
    border:2px solid rgb(221, 51, 51);

    display: flex;
    align-items: center;
    justify-content: center;

    color:rgb(221, 51, 51);

    font-size:12px;
    font-family: 'Nanum Gothic', sans-serif;

    margin:auto;
    margin-top:20px;
}

#info-btn:hover{
    background-color:rgb(221, 51, 51);
    color:#fff;
}

#order-btn{
    width:180px;
    height:40px;
    border:2px solid rgb(221, 51, 51);

    display: flex;
    align-items: center;
    justify-content: center;

    color:rgb(221, 51, 51);

    font-size:12px;
    font-family: 'Nanum Gothic', sans-serif;

    margin:auto;
    margin-top:20px;

    margin-bottom:40px;
}

#order-btn:hover{
    background-color:rgb(221, 51, 51);
    color:#fff;
}

@media (max-width:1545px){
    .boat-explain-img{
        width:25vmin!important;
        height:15vmax!important;

    }
}

@media (max-width:1035px){

    .boat-explain-img{
        width:35vmin!important;
        height:30vmax!important;

    }

    .lookers{
        display:block !important;
        margin:auto !important;
    }
}


@media (max-width:900px){
    #engine-option-table{
        width:100%!important;
    }

    .boat-explain-img{
        margin:auto !important;
        width:100%!important;
        height:40vmax!important;
        margin-top:50px!important;
    }
}

@media (max-width:800px){
    .yacht-equipment-data-list{
        width:45% !important;
    }
}

@media (max-width:700px){
    .option-image{
        width: 50% !important;;

    }
}

@media (max-width:530px){
    .option-image{
        width: 100% !important;
        height:40vmax!important;

        & > .text-box > p{
            font-size:14px!important;
        }
    }
}

@media (max-width:500px){
    .yacht-equipment-data-list{
        width:100% !important;
    }
}