@charset "utf-8";





@media screen and (min-width:1201px) {
/* info_use */
.process{text-align: center;}
.process>.main_title{top: 100px; opacity: 0;}
.process .img_box img{width: 100%;}
.process h3{font-size: 1.1em; margin-top: 10px;}
.process .process_list{display: flex; flex-wrap: wrap; align-items: center; justify-content: center;margin-top: 50px;}
.process .process_list li{display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 50px; position: relative; top: 100px; opacity: 0;}
.process .process_list li:nth-child(1n){width: 18%;}
.process .process_list li:nth-child(2n){width: 7%;}

.process .process_list li .img_wrap{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 180px; height: 180px; box-shadow: 4px 4px 8px rgba(0,0,0,0.5); border-radius: 50%;}


/* guide */
.guide .img_box img{width: 100%;}
.guide .main_title{top: 100px; opacity: 0;}
.guide h2{text-align: center;}
.guide>p{text-align: center; margin-top: 20px; font-size: 1.3em; position: relative;top: 100px; opacity: 0;}
.guide>div{display: flex; justify-content: space-between; margin-top: 50px; position: relative; top: 100px; opacity: 0;}
.guide>div>ul{width: 38%;}
.guide>div>ul.tabs_list{width: 11%;}
.guide>div>ul.tabs_list li{margin-top: 20px; background-color: #fff; border: 1px solid #333; border-radius: 25px; transition-duration: 0.5s;}

.guide>div>ul.tabs_list li a{line-height: 50px; text-align: center; font-size: 1.1em; font-weight: 500;}

.guide>div>ul.tabs_list li.tabs_select{background-color: #FFAA45; border: 1px solid #FFAA45;}

.guide>div>ul.text_list{position: relative;}
.guide>div>ul.text_list>li{position: relative; display: none;}
.guide>div>ul.text_list>li:nth-child(1){display: block;}
.guide>div>ul.text_list>li h4{font-size: 1.8em; font-weight: 500; margin-bottom: 30px;}
.guide>div>ul.text_list>li p{font-size: 1.2em; margin-bottom: 10px; line-height: 1.4;}
.guide>div>ul.text_list>li li{font-size: 1.1em; margin-left: 6%;line-height: 1.2; margin-bottom: 10px; list-style-type: disc;}

.guide>div>ul.img_list{position: relative;}
.guide>div>ul.img_list>li{position: relative; display: none;}
.guide>div>ul.img_list>li:nth-child(1){display: block;}

/* limit */
.limit{text-align: center; position: relative; width: 90%; max-width: 1440px; margin: 250px auto;}
.limit .con_title{top: 100px; opacity: 0;}
.limit>p{font-size: 1.3em; margin-top: 20px; position: relative; top: 100px; opacity: 0;}

.limit ul{display: flex; justify-content: center; align-items: center; margin-top: 50px;}
.limit ul li{display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 5%; position: relative; right: -100px; opacity: 0;}
.limit ul li:first-child{margin-left: 0;}
.limit ul li h3{font-size: 1.6em; font-weight: 500; margin: 20px 0 10px 0;}
.limit ul li p{font-size: 1.1em;}
}




@media screen and (min-width:801px) and (max-width:1200px) {
    /* info_use */
.process{text-align: center;}
.process>.main_title{top: 100px; opacity: 0;}
.process .img_box{display: flex; justify-content: center; align-items: center;}
.process .img_box img{width: 90%;}
.process h3{font-size: 1.1em; margin-top: 10px;}
.process .process_list{display: flex; flex-wrap: wrap; align-items: center; justify-content: center;margin-top: 50px;}
.process .process_list li{display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 50px; position: relative; top: 100px; opacity: 0;}
.process .process_list li:nth-child(1n){width: 18%;}
.process .process_list li:nth-child(2n){width: 7%;}

.process .process_list li .img_wrap{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; box-shadow: 4px 4px 8px rgba(0,0,0,0.5); border-radius: 50%;}


/* guide */
.guide .img_box img{width: 100%;}
.guide .con_title{top: 100px; opacity: 0;}
.guide h2{text-align: center;}
.guide>p{text-align: center; margin-top: 20px; font-size: 1.3em; position: relative;top: 100px; opacity: 0;}
.guide>div{display: flex; justify-content: space-between; margin-top: 50px; position: relative; top: 100px; opacity: 0; flex-wrap: wrap; align-items: center;}
.guide>div>ul{width: 49%;}
.guide>div>ul.tabs_list{width: 100%; display: flex; margin-bottom: 50px; justify-content: space-between;}
.guide>div>ul.tabs_list li{background-color: #fff; border: 1px solid #333; border-radius: 25px; transition-duration: 0.5s; width: 23%;}

.guide>div>ul.tabs_list li a{line-height: 50px; text-align: center; font-size: 1.1em; font-weight: 500;}

.guide>div>ul.tabs_list li.tabs_select{background-color: #FFAA45; border: 1px solid #FFAA45;}

.guide>div>ul.text_list{position: relative;}
.guide>div>ul.text_list>li{position: relative; display: none;}
.guide>div>ul.text_list>li:nth-child(1){display: block;}
.guide>div>ul.text_list>li h4{font-size: 1.8em; font-weight: 500; margin-bottom: 30px;}
.guide>div>ul.text_list>li p{font-size: 1.2em; margin-bottom: 10px; line-height: 1.4;}
.guide>div>ul.text_list>li li{font-size: 1.1em; margin-left: 6%;line-height: 1.2; margin-bottom: 10px; list-style-type: disc;}

.guide>div>ul.img_list{position: relative;}
.guide>div>ul.img_list>li{position: relative; display: none;}
.guide>div>ul.img_list>li:nth-child(1){display: block;}

/* limit */
.limit{text-align: center; position: relative; width: 90%; max-width: 1440px; margin: 250px auto;}
.limit .con_title{top: 100px; opacity: 0;}
.limit>p{font-size: 1.3em; margin-top: 20px; position: relative; top: 100px; opacity: 0;}

.limit ul{display: flex; justify-content: center; align-items: center; margin-top: 50px; flex-wrap: wrap;}
.limit ul li{display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; right: -100px; opacity: 0; width: 35%; margin-top: 30px;}
.limit ul li:first-child{margin-left: 0;}
.limit ul li h3{font-size: 1.6em; font-weight: 500; margin: 20px 0 10px 0;}
.limit ul li p{font-size: 1.1em;}
}

@media screen and (min-width:601px) and (max-width:800px) {
    .process{text-align: center;}
    .process>.con_title{top: 100px; opacity: 0;}
    .process .img_box{display: flex; justify-content: center; align-items: center;}
    .process .img_box img{width: 70%;}
    .process h3{font-size: 1.1em; margin-top: 10px;}
    .process .process_list{display: flex; flex-wrap: wrap; align-items: center; margin-top: 50px;}
    .process .process_list li{display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px; position: relative; top: 100px; opacity: 0; width: 25%;}
    /* .process .process_list li:nth-child(1n){width: 18%;}
    .process .process_list li:nth-child(2n){width: 7%;} */
    
    .process .process_list li .img_wrap{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 140px; height: 140px; box-shadow: 4px 4px 8px rgba(0,0,0,0.5); border-radius: 50%;}
    
    
    /* guide */
    .guide .img_box img{width: 100%;}
    .guide .con_title{top: 100px; opacity: 0;}
    .guide h2{text-align: center;}
    .guide>p{text-align: center; margin-top: 20px; font-size: 1.3em; position: relative;top: 100px; opacity: 0;}
    .guide>div{display: flex; justify-content: space-between; margin-top: 50px; position: relative; top: 100px; opacity: 0; flex-wrap: wrap; align-items: center;}
    .guide>div>ul{width: 100%;}
    .guide>div>ul.tabs_list{display: flex; margin-bottom: 50px; justify-content: space-between;}
    .guide>div>ul.tabs_list li{background-color: #fff; border: 1px solid #333; border-radius: 25px; transition-duration: 0.5s; width: 23%;}
    
    .guide>div>ul.tabs_list li a{line-height: 50px; text-align: center; font-size: 1.1em; font-weight: 500;}
    
    .guide>div>ul.tabs_list li.tabs_select{background-color: #FFAA45; border: 1px solid #FFAA45;}
    
    .guide>div>ul.text_list{position: relative;order: 2;}
    .guide>div>ul.text_list>li{position: relative; display: none;}
    .guide>div>ul.text_list>li:nth-child(1){display: block;}
    .guide>div>ul.text_list>li h4{font-size: 1.8em; font-weight: 500; margin-bottom: 30px;}
    .guide>div>ul.text_list>li p{font-size: 1.2em; margin-bottom: 10px; line-height: 1.4;}
    .guide>div>ul.text_list>li li{font-size: 1.1em; margin-left: 6%;line-height: 1.2; margin-bottom: 10px; list-style-type: disc;}
    
    .guide>div>ul.img_list{position: relative; order: 1;}
    .guide>div>ul.img_list>li{position: relative; display: none;}
    .guide>div>ul.img_list>li:nth-child(1){display: block;}
    
    /* limit */
    .limit{text-align: center; position: relative; width: 90%; max-width: 1440px; margin: 250px auto;}
    .limit .con_title{top: 100px; opacity: 0;}
    .limit>p{font-size: 1.3em; margin-top: 20px; position: relative; top: 100px; opacity: 0;}
    
    .limit ul{display: flex; justify-content: center; align-items: center; margin-top: 50px; flex-wrap: wrap;}
    .limit ul li{display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; right: -100px; opacity: 0; width: 35%; margin-top: 30px;}
    .limit ul li:first-child{margin-left: 0;}
    .limit ul li h3{font-size: 1.6em; font-weight: 500; margin: 20px 0 10px 0;}
    .limit ul li p{font-size: 1.1em;}
}





@media screen and (max-width:600px) {
    .process{text-align: center;}
    .process>.con_title{top: 100px; opacity: 0;}
    .process .img_box{display: flex; justify-content: center; align-items: center;}
    .process .img_box img{width: 70%;}
    .process .icon_box img{width: 100%;}
    .process h3{font-size: 1em; margin-top: 5px; width: 75%;}
    .process .process_list{display: flex; flex-wrap: wrap; align-items: center; margin-top: 50px; justify-content: center;}
    .process .process_list li{display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px; position: relative; top: 100px; opacity: 0; width: 25%;}
    /* .process .process_list li:nth-child(1n){width: 18%;}
    .process .process_list li:nth-child(2n){width: 7%;} */
    
    .process .process_list li .img_wrap{ display: flex; flex-direction: column; align-items: center; justify-content: center; }
    
    
    /* guide */
    .guide .img_box img{width: 100%;}
    .guide .con_title{top: 100px; opacity: 0;}
    .guide h2{text-align: center;}
    .guide>p{text-align: center; margin-top: 20px; font-size: 1.1em; position: relative;top: 100px; opacity: 0;}
    .guide>div{display: flex; justify-content: space-between; margin-top: 50px; position: relative; top: 100px; opacity: 0; flex-wrap: wrap; align-items: center;}
    .guide>div>ul{width: 100%;}
    .guide>div>ul.tabs_list{display: flex; margin-bottom: 50px; justify-content: space-between; flex-wrap: wrap;}
    .guide>div>ul.tabs_list li{background-color: #fff; border: 1px solid #333; border-radius: 25px; transition-duration: 0.5s; width: 48%; margin-bottom: 2%;}
    
    .guide>div>ul.tabs_list li a{line-height: 50px; text-align: center; font-size: 1.1em; font-weight: 500;}
    
    .guide>div>ul.tabs_list li.tabs_select{background-color: #FFAA45; border: 1px solid #FFAA45;}
    
    .guide>div>ul.text_list{position: relative;order: 2;}
    .guide>div>ul.text_list>li{position: relative; display: none;}
    .guide>div>ul.text_list>li:nth-child(1){display: block;}
    .guide>div>ul.text_list>li h4{font-size: 1.8em; font-weight: 500; margin-bottom: 30px;}
    .guide>div>ul.text_list>li p{font-size: 1.2em; margin-bottom: 10px; line-height: 1.4;}
    .guide>div>ul.text_list>li li{font-size: 1.1em; margin-left: 6%;line-height: 1.2; margin-bottom: 10px; list-style-type: disc;}
    
    .guide>div>ul.img_list{position: relative; order: 1;}
    .guide>div>ul.img_list>li{position: relative; display: none;}
    .guide>div>ul.img_list>li:nth-child(1){display: block;}
    
    /* limit */
    .limit{text-align: center; position: relative; width: 90%; max-width: 1440px; margin: 250px auto;}
    .limit .con_title{top: 100px; opacity: 0;}
    .limit>p{font-size: 1.1em; margin-top: 20px; position: relative; top: 100px; opacity: 0;}
    
    .limit ul{display: flex; justify-content: center; align-items: center; margin-top: 50px; flex-wrap: wrap;}
    .limit ul li{display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; right: -100px; opacity: 0; width: 49%; margin-top: 30px;}
    .limit ul li:first-child{margin-left: 0;}
    .limit ul li h3{font-size: 1.4em; font-weight: 500; margin: 20px 0 10px 0;}
    .limit ul li p{font-size: 1em; }
}