@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
html {box-sizing: border-box}
body {margin: 0px; font-family: 'Pretendard', sans-serif; box-sizing: border-box; word-break: keep-all; font-size: 15px; line-height: 1.7}

div, ul, li, a, section {box-sizing: border-box}
ul {    padding-inline-start: 20px;}

/* header */


#header {position: fixed; left: 0px; top: 0px; z-index: 10; padding: 10px 30px; ;width: 100%; display: flex; align-items: center; background: #ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.2);justify-content: center}
.logo_top a img {width:100%; max-width: 140px}
#logo_top {display: block}
#logo_top_w {display: none}

#gnb {font-size: 1em; list-style: none; display: flex;  margin: 0px 20px 0px 70px; padding: 0px; align-items: center}
#gnb a {text-decoration: none; color: #000}
#gnb > li > a.on {text-decoration: underline;  text-underline-offset:12px; }
#gnb a:hover {color: #d9007f}
#gnb > li > a {padding: 10px 25px; display: inline-block}
#gnb > li > ul {list-style: none;margin: 0px; padding: 0px; display: none; position: absolute; background: #ffffff; font-size: 0.9em; margin-left: 15px}
#gnb > li:hover ul {display: block; border:1px solid #efefef; border-top: 0px}
#gnb > li > ul > li > a {display: inline-block; padding: 10px 25px}
#gnb > li > ul > li > a.on {color:#7D51B2}
#ico_menu, #ico_close {display: none}


.header_home {background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0)) !important; box-shadow: none !important}
.header_home #logo_top {display: none}
.header_home #logo_top_w {display: block}
.header_home #gnb a {color: #ffffff}
.header_home #gnb a:hover {color: #d9007f}


/* home #E60080 */
.home_mv {  overflow: hidden; position: relative;  height: 100vh; background-color: #000000; display: flex; align-items: center}
.home_slogan {position: absolute; z-index: 9; text-align: center; width: 100%; left: 0; }
.home_slogan img { width: 80%; max-width: 410px;}

.home_mv_content { width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0.7; position: absolute; left: 0; top: 0}
.slogan_txt {color: #ffffff; font-size: 1.3em; padding: 15px; line-height: 1.6 }




/*footer*/
#footer {background: #303030; padding: 70px 30px 20px; text-align: center; color: #ffffff; font-size: 15px}
#footer > div {padding-bottom: 15px}
#footer > div > span {margin: 0px 15px; color: #777}
.logo_footer img {max-width: 118px; margin-bottom: 20px}

/* contents */
.page_header {padding: 150px 50px 10px; margin: 0px auto}
.page_title {text-align: center; font-size: 2.7em;  font-weight: 400;} 
.breadcrumb { margin: 20px auto; font-size: 1em; text-align: center}
.breadcrumb > div { padding: 7px 20px; display: inline-block ; }
.breadcrumb a {color: #463060; text-decoration: none}
.slogan {font-size: 1.5em; text-align: center;  font-weight: lighter; padding: 30px 20px; max-width: 1024px; line-height: 1.7; margin-left: auto; margin-right: auto}

.section_dflt {max-width: 1200px; margin: 50px auto; padding: 30px}


.price_table {max-width:800px; border-collapse: collapse; margin: 30px auto 10px; font-size: 0.9em}
.price_table th, .price_table td {padding: 15px ; border-bottom: 1px solid #efefef; text-align: center}
.price_table th {text-align: left; color: #777}
.price_table tr td:nth-child(2), .price_table tr td:nth-child(3), .price_table tr td:nth-child(4) {width: 30%}
.price_table .prdt_name span {background: #000000; border-radius: 30px; color: #ffffff; width: 90%; display: block; padding: 10px 0}
.lg-flex {display: flex}

.h1 {text-align: center; font-size: 2.5em; margin-bottom: 15px; line-height: 1.2}
.h2 {text-align: center; font-size: 1.5em; margin-top: 10px; color: #444}
.h3 {}
.pic_header {max-width: 600px; padding: 10px 0; width:100%; margin: 0px auto}
.pic_header img {width: 100%; max-width: 100%}
.prdt_name {font-weight: bold; text-align: center; font-size: 1.3em;}
.left {text-align: left !important}

.pricelist_web {display: flex; column-gap: 30px}
.pricelist_web .price_item {width:33.333%; padding:30px 40px 30px; background: #f9f9f9; border-radius: 30px}
.price_item h3 {margin: 10px 0 0}
.content_box {padding-bottom: 50px}

.date {text-align: right; padding: 10px 20px; color: #777; font-size: 0.9em; font-style: italic; }
.ico_webprice {height: 60px}
.ico_webprice img {max-width: 60px}

.ico_webprice_l img {max-width: 90px}
.price_item .price {font-size: 1.6em; font-weight: bold; padding-bottom: 15px}
.price_item .short_guide {padding-bottom: 10px}
.gap_40 {gap:40px}
.align-item-center {align-items: center}
.for_mb {display: none} 
dl.price_option {display: flex; flex-wrap: wrap}
dl.price_option dt {width: 50%; padding-bottom: 5px; font-weight: lighter}
dl.price_option dd {width: 50%; margin:0px;padding-bottom: 5px; text-align: right}

.txt_center {text-align: center}
.p20 {padding: 20px}
.logo_about {max-width: 600px; padding: 10px 0 0; width:100%; margin: 0px auto; text-align: center}
.logo_about img {width: 100%; max-width: 70px}
.ico_portfolio {max-width: 600px; padding: 10px 0 0; width:100%; margin: 0px auto; text-align: center}
.ico_portfolio img {width: 100%; max-width: 100px}

.mt60 {margin-top: 60px}
.content_portfolio {max-width: 700px; margin: 0px auto}

@media screen and (max-width:1280px) {
    #header {padding: 10px 20px}
    #gnb {margin-left: 80px} 
    #home_hero {height: calc(100vh - 63px); margin-top: 63px}
    
}

@media screen and (max-width:1024px) {
    .lg-flex {display: block}
    
    .for_pc {display: none}
    .for_mb {display: block}
    
    body {font-size: 15px}
    #logo_top a img {width: 100%; max-width: 120px;}
    #gnb {position: fixed; right: 0px; top: 0px; display: none; flex-direction: column; width: 100%; max-width: 220px;  background: #ffffff; margin: 0;  box-shadow: 0px 0px 12px rgba(0,0,0,0.4); border-bottom-left-radius: 50px; padding-bottom: 50px}
    #gnb > li {display: block; width: 100%; text-align: left}
    #gnb > li > a {width: 100%; font-weight: 500; padding: 10px 25px 7px 35px}
    #home_hero {height: 100vh - 42px); margin-top: 42px}
    #gnb > li > ul {display: block; position: inherit; margin-left: 25px; padding-bottom: 5px}
    #gnb > li > ul > li > a {padding: 5px 20px; color: #777}
    #gnb > li:hover ul {display: inherit; border:0px; border-top: 0px}
    #ico_menu {display: block; max-width: 25px; float: right}
    #ico_menu img {width: 100%}
    #ico_close {display: block; text-align: right; padding: 15px 15px 0  0}
    #ico_close img {width: 100%;  max-width: 25px}
    #header { align-items: center; padding: 10px 20px}

    #footer > div {line-height: 1.5}
    
    .pricelist_web {display: block}
    .pricelist_web .price_item {margin: 30px auto; max-width: 100%; width:100%}
    
    
    
}